智能手機(jī)的移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)布局反復(fù)挑戰(zhàn)設(shè)計(jì)師。 設(shè)備上的可用空間必須以有意義的方式使用-主要用于內(nèi)容。 因此，最好在不占用空間的情況下進(jìn)行導(dǎo)航，同時(shí)仍然易于查找。 今天提供有關(guān)在移動(dòng)Web設(shè)計(jì)中放置導(dǎo)航的建議。
1.經(jīng)典：帶有漢堡圖標(biāo)的滑入式導(dǎo)航
關(guān)于使用漢堡包圖標(biāo)的討論很多。 我們的總編輯也不是粉絲。 可用性專家喜歡批評(píng)導(dǎo)航是完全隱藏的，只能通過(guò)圖標(biāo)顯示。 這樣，即使是必要的導(dǎo)航元素也可以放置在視口之外。 盡管如此，“漢堡包”圖標(biāo)已成為移動(dòng)Web設(shè)計(jì)的標(biāo)準(zhǔn)，特別是與滑入式導(dǎo)航結(jié)合使用時(shí)。 在大多數(shù)情況下，此圖標(biāo)位于左上角，導(dǎo)航會(huì)向右滑動(dòng)到視口中。 甚至Google的Material Design也使用此版本的導(dǎo)航。 到目前為止，它是如此廣泛，以至于不再適合使用。 但是您可以確保您網(wǎng)站的每個(gè)訪問(wèn)者都能找到導(dǎo)航。 您可以選擇此經(jīng)典產(chǎn)品，因?yàn)楸M管它可能不符合預(yù)期，但現(xiàn)在大家都知道了。
2.帶有“更多”按鈕的靈活導(dǎo)航
那些不想從視口中隱藏整個(gè)導(dǎo)航的人一定會(huì)喜歡以下導(dǎo)航。 這是經(jīng)典的水平導(dǎo)航，菜單項(xiàng)按優(yōu)先級(jí)排序，無(wú)論如何應(yīng)該如此。 **個(gè)菜單項(xiàng)是最重要的。 其他項(xiàng)目按降序列出。 因?yàn)橛绕涫窃诖笮途W(wǎng)站中，不可能所有菜單項(xiàng)都適合導(dǎo)航，因此您只需要隱藏所有不合適的內(nèi)容，然后在導(dǎo)航末尾添加“更多”按鈕即可。 這之后是一個(gè)包含所有其余導(dǎo)航鏈接的下拉菜單。 優(yōu)點(diǎn)是不會(huì)隱藏整個(gè)導(dǎo)航。 將顯示所有合適的內(nèi)容。 通常，將顯示所有最重要的菜單項(xiàng)。 這種靈活的導(dǎo)航是完全可見(jiàn)和完全隱藏的結(jié)合。
3.文字圖標(biāo)組合導(dǎo)航
將有意義的圖標(biāo)添加到單個(gè)菜單項(xiàng)以進(jìn)行導(dǎo)航是一種流行的設(shè)計(jì)方法。 借助大量免費(fèi)的圖標(biāo)字體和字體集，您幾乎可以找到適合您的符號(hào)。 如果導(dǎo)航的范圍不那么廣，則可以在不使用菜單文本的情況下將圖標(biāo)保留在移動(dòng)視圖中。 但是，您應(yīng)該確保每個(gè)符號(hào)都有足夠的空間，并清楚地表明其代表的含義。 如果您的圖標(biāo)甚至有點(diǎn)模棱兩可或難以理解，請(qǐng)不要使用此方法。
4.全屏導(dǎo)航
由于導(dǎo)航是網(wǎng)站的重要組成部分，因此許多人在網(wǎng)站的設(shè)計(jì)和動(dòng)畫(huà)制作上投入了大量精力。 即使只能通過(guò)漢堡包圖標(biāo)訪問(wèn)導(dǎo)航，也請(qǐng)不要小心。 因此，許多網(wǎng)頁(yè)設(shè)計(jì)師在整個(gè)顯示器中顯示導(dǎo)航，而不是簡(jiǎn)單地滑入菜單。 由于這些全屏外觀，菜單項(xiàng)傾向于以復(fù)雜的動(dòng)畫(huà)顯示或以其他方式隱藏。 各個(gè)菜單項(xiàng)通常以大文本顯示。 根據(jù)屏幕的大小，還會(huì)顯示指向社交網(wǎng)絡(luò)的其他鏈接或聯(lián)系表。 因此，如果您不喜歡經(jīng)典的滑入式導(dǎo)航，則可以嘗試使用多種菜單項(xiàng)進(jìn)行全屏導(dǎo)航。 在這里，對(duì)您的創(chuàng)造力的唯一限制是顯示尺寸。
蘇公網(wǎng)安備32030302000492號(hào)
