智能手機(jī)的移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)的布局一次又一次地對(duì)設(shè)計(jì)師提出了挑戰(zhàn)。設(shè)備上的可用空間必須以有意義的方式使用—主要用于內(nèi)容。因此最好是導(dǎo)航根本不占用空間，同時(shí)仍然易于查找。本期尼高網(wǎng)站設(shè)計(jì)公司Angle將為大家提供了將導(dǎo)航放置在移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)中的位置的建議。

1、經(jīng)典：帶有漢堡圖標(biāo)的滑入式導(dǎo)航
關(guān)于使用漢堡包圖標(biāo)進(jìn)行了廣泛的討論。我們的總編輯也不是粉絲?？捎眯詫＜蚁矚g批評(píng)導(dǎo)航被完全隱藏，并且僅通過(guò)圖標(biāo)顯示。這樣即使必要的導(dǎo)航元素也可以放置在視口之外。盡管如此，漢堡圖標(biāo)已經(jīng)確立了自己在移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)中的標(biāo)準(zhǔn)，尤其是與滑入式導(dǎo)航結(jié)合使用時(shí)。在大多數(shù)情況下，此圖標(biāo)位于左上角，而導(dǎo)航則向右滑動(dòng)到視口中。甚至Google的Material Design也使用此版本的導(dǎo)航。到現(xiàn)在為止，它是如此的廣泛以至于使用起來(lái)不再是非常出色了。但是你可以確保你網(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í)進(jìn)行了排序，無(wú)論如何應(yīng)該如此。第一個(gè)菜單項(xiàng)是最重要的。其他項(xiàng)目以降序排列。由于尤其是在大型網(wǎng)站中，不可能所有菜單項(xiàng)都適合導(dǎo)航，因此你只需隱藏不適合的所有內(nèi)容，然后在導(dǎo)航末尾添加“更多”按鈕。其后是一個(gè)下拉菜單，其中包含導(dǎo)航的所有其余鏈接。好處是不會(huì)隱藏整個(gè)導(dǎo)航。將顯示所有適合的內(nèi)容。通常將顯示所有最重要的菜單項(xiàng)。這種靈活的導(dǎo)航是完全可見(jiàn)和完全隱藏的結(jié)合。

3、文本圖標(biāo)組合導(dǎo)航
將有意義的圖標(biāo)添加到導(dǎo)航的單個(gè)菜單項(xiàng)是一種流行的設(shè)計(jì)方法。借助大量的免費(fèi)圖標(biāo)字體和字體集，你幾乎可以找到適合自己的符號(hào)。如果你的導(dǎo)航范圍不是那么廣泛，則可以將圖標(biāo)留在移動(dòng)視圖上，而無(wú)需使用菜單文本。但是你應(yīng)該確保每個(gè)符號(hào)都有足夠的空間，并清楚地表示它所代表的含義。如果你的圖標(biāo)甚至有點(diǎn)含糊不清或難以理解，則不要采用這種方法。

4、全屏導(dǎo)航

由于導(dǎo)航是網(wǎng)站的重要組成部分，因此許多人在網(wǎng)站的設(shè)計(jì)和動(dòng)畫制作上投入了大量精力。即使只能通過(guò)漢堡包圖標(biāo)訪問(wèn)導(dǎo)航，也不必謹(jǐn)慎。因此許多網(wǎng)頁(yè)設(shè)計(jì)人員將導(dǎo)航顯示在整個(gè)顯示中，而不是簡(jiǎn)單的滑入式菜單。由于具有這些全屏外觀，因此菜單項(xiàng)傾向于以復(fù)雜的動(dòng)畫顯示，或者以其他方式隱藏。各個(gè)菜單項(xiàng)通常以大文本顯示。根據(jù)屏幕大小，還會(huì)顯示指向社交網(wǎng)絡(luò)的其他鏈接或聯(lián)系表。因此如果你不喜歡經(jīng)典的滑入式導(dǎo)航，則可以嘗試使用具有廣泛菜單項(xiàng)的全屏導(dǎo)航。在這里，對(duì)您的創(chuàng)造力的唯一限制是顯示尺寸。