智能(neng)手機的移動(dong)網頁設(she)計(ji)布局反復(fu)挑戰設(she)計(ji)師。 設(she)備(bei)上的可用(yong)空間(jian)必須以有意義的方式使用(yong)-主要用(yong)于內容(rong)。 因(yin)此，最好在不占(zhan)用(yong)空間(jian)的情(qing)況下進行導航，同時仍然(ran)易于查找。 今(jin)天提供有關在移動(dong)Web設(she)計(ji)中放置(zhi)導航的建議。
1.經典：帶有漢堡圖標的滑入式導航(hang)
關于(yu)使(shi)用(yong)(yong)(yong)漢(han)堡(bao)包(bao)圖(tu)標(biao)(biao)的(de)討論很多。 我們的(de)總(zong)編輯也(ye)不是(shi)粉(fen)絲。 可(ke)用(yong)(yong)(yong)性專家喜歡(huan)批評導(dao)航(hang)(hang)(hang)是(shi)完全隱藏的(de)，只能(neng)通(tong)過圖(tu)標(biao)(biao)顯示(shi)。 這樣，即(ji)使(shi)是(shi)必要的(de)導(dao)航(hang)(hang)(hang)元素也(ye)可(ke)以(yi)放置(zhi)在(zai)(zai)視口(kou)之外。 盡(jin)管如此(ci)，“漢(han)堡(bao)包(bao)”圖(tu)標(biao)(biao)已成為(wei)移(yi)動(dong)Web設計的(de)標(biao)(biao)準，特別(bie)是(shi)與滑(hua)入式導(dao)航(hang)(hang)(hang)結合使(shi)用(yong)(yong)(yong)時。 在(zai)(zai)大多數情況下，此(ci)圖(tu)標(biao)(biao)位(wei)于(yu)左上(shang)角(jiao)，導(dao)航(hang)(hang)(hang)會向右滑(hua)動(dong)到視口(kou)中。 甚(shen)至Google的(de)Material Design也(ye)使(shi)用(yong)(yong)(yong)此(ci)版本的(de)導(dao)航(hang)(hang)(hang)。 到目前為(wei)止，它是(shi)如此(ci)廣泛(fan)，以(yi)至于(yu)不再適合使(shi)用(yong)(yong)(yong)。 但是(shi)您可(ke)以(yi)確保您網站的(de)每個訪(fang)問者都能(neng)找到導(dao)航(hang)(hang)(hang)。 您可(ke)以(yi)選擇此(ci)經(jing)典產(chan)品，因為(wei)盡(jin)管它可(ke)能(neng)不符合預期，但現在(zai)(zai)大家都知道了。
2.帶有“更多”按(an)鈕的靈活(huo)導航
那些不想從(cong)視(shi)口(kou)中隱藏(zang)整(zheng)個(ge)導(dao)航(hang)的(de)(de)(de)人(ren)一定會喜歡以下(xia)導(dao)航(hang)。 這(zhe)是(shi)經典(dian)的(de)(de)(de)水平導(dao)航(hang)，菜(cai)單項按(an)(an)優先級(ji)排序(xu)，無(wu)論如何應該如此。 **個(ge)菜(cai)單項是(shi)最重(zhong)(zhong)要的(de)(de)(de)。 其(qi)他項目按(an)(an)降序(xu)列(lie)出(chu)。 因為尤其(qi)是(shi)在大型(xing)網站中，不可能(neng)所(suo)有(you)(you)菜(cai)單項都適合(he)導(dao)航(hang)，因此您只需要隱藏(zang)所(suo)有(you)(you)不合(he)適的(de)(de)(de)內容，然后(hou)(hou)在導(dao)航(hang)末尾添加(jia)“更多”按(an)(an)鈕即可。 這(zhe)之后(hou)(hou)是(shi)一個(ge)包含(han)所(suo)有(you)(you)其(qi)余導(dao)航(hang)鏈接(jie)的(de)(de)(de)下(xia)拉菜(cai)單。 優點(dian)是(shi)不會隱藏(zang)整(zheng)個(ge)導(dao)航(hang)。 將顯(xian)示(shi)所(suo)有(you)(you)合(he)適的(de)(de)(de)內容。 通(tong)常，將顯(xian)示(shi)所(suo)有(you)(you)最重(zhong)(zhong)要的(de)(de)(de)菜(cai)單項。 這(zhe)種(zhong)靈活(huo)的(de)(de)(de)導(dao)航(hang)是(shi)完(wan)全可見和完(wan)全隱藏(zang)的(de)(de)(de)結(jie)合(he)。
3.文字圖標(biao)組合導航
將有(you)(you)意義的(de)(de)圖(tu)(tu)(tu)標添(tian)加(jia)到單個(ge)菜單項以進行導航是(shi)一種流行的(de)(de)設計(ji)方法(fa)。 借助大量免費的(de)(de)圖(tu)(tu)(tu)標字體和字體集(ji)，您幾乎可以找到適合您的(de)(de)符號。 如果(guo)導航的(de)(de)范圍不那(nei)么廣，則可以在(zai)不使(shi)用菜單文本(ben)的(de)(de)情(qing)況下將圖(tu)(tu)(tu)標保(bao)留在(zai)移動視圖(tu)(tu)(tu)中。 但是(shi)，您應該確保(bao)每個(ge)符號都有(you)(you)足夠的(de)(de)空間，并清楚地表明其代(dai)表的(de)(de)含義。 如果(guo)您的(de)(de)圖(tu)(tu)(tu)標甚至有(you)(you)點模棱兩可或難(nan)以理解，請不要使(shi)用此方法(fa)。
4.全屏導(dao)航
由于導(dao)航(hang)(hang)是網站(zhan)的(de)(de)(de)重要(yao)組成部分，因此(ci)(ci)許多(duo)人在網站(zhan)的(de)(de)(de)設計(ji)和動畫(hua)制(zhi)(zhi)作上投入(ru)了大(da)量精力。 即使(shi)只能通過(guo)漢堡(bao)包(bao)圖標(biao)訪問(wen)導(dao)航(hang)(hang)，也請(qing)不(bu)要(yao)小(xiao)(xiao)心。 因此(ci)(ci)，許多(duo)網頁設計(ji)師(shi)在整個顯示(shi)(shi)器中顯示(shi)(shi)導(dao)航(hang)(hang)，而不(bu)是簡(jian)單(dan)地滑入(ru)菜(cai)單(dan)。 由于這些全(quan)屏外觀(guan)，菜(cai)單(dan)項傾向于以復雜的(de)(de)(de)動畫(hua)顯示(shi)(shi)或以其(qi)他方式(shi)隱(yin)藏。 各個菜(cai)單(dan)項通常以大(da)文本(ben)顯示(shi)(shi)。 根據屏幕的(de)(de)(de)大(da)小(xiao)(xiao)，還(huan)會顯示(shi)(shi)指向社交網絡的(de)(de)(de)其(qi)他鏈(lian)接或聯系表。 因此(ci)(ci)，如果您不(bu)喜(xi)歡經典的(de)(de)(de)滑入(ru)式(shi)導(dao)航(hang)(hang)，則可(ke)以嘗試使(shi)用(yong)多(duo)種菜(cai)單(dan)項進(jin)行全(quan)屏導(dao)航(hang)(hang)。 在這里(li)，對您的(de)(de)(de)創造力的(de)(de)(de)唯一限制(zhi)(zhi)是顯示(shi)(shi)尺寸。
蘇公網安備32030302000492號
