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