企業(yè)建網(wǎng)站網(wǎng)站導航菜單層次如何設計？有哪些排版形式

第一印象只有一次機會，是在第一次看到所留下，沒有第二次機會來產(chǎn)生第一印象。在數(shù)字產(chǎn)品領域，這種永恒的真理在高度競爭和令人難以置信的多樣性方面起作用。毫無疑問，網(wǎng)頁或移動屏幕的某些區(qū)域在這方面特別重要和有效。今天我們將更深入地討論其中一個：網(wǎng)站的菜單。

今天讓我們討論菜單的功能和設計建議。此外，我們將展示一系列網(wǎng)頁設計概念，將不同的方法應用于菜單設計。

什么是菜單？

企業(yè)建網(wǎng)站網(wǎng)站導航菜單層次如何設計？有哪些排版形式？企業(yè)建網(wǎng)站_企業(yè)網(wǎng)站設計_企業(yè)網(wǎng)站制作_企業(yè)網(wǎng)站導航設計_1980元全包_17073547034。在網(wǎng)頁布局中，菜單是網(wǎng)頁的上部（頂部）部分。它絕對是頁面的戰(zhàn)略部分，是人們在介紹網(wǎng)站的第一秒內滾動頁面之前看到的區(qū)域。以某種方式作為邀請的標志，菜單應該提供有關整個網(wǎng)站的核心信息，以便用戶可以在幾秒鐘內掃描它。從設計的角度來看，菜單也是創(chuàng)造性設計解決方案的廣闊領域，應該是吸引人的，簡潔和有用的。

所呈現(xiàn)的概念顯示了在線書店銷售漫畫的主頁。頂部水平區(qū)域aka菜單呈現(xiàn)徽標字母，顯示網(wǎng)站名稱和核心導航：鏈接到項目目錄，新鮮和特別優(yōu)惠，博客，動作人物，購物車典型電子商務網(wǎng)站的圖標和搜索的圖標。

菜單包括什么？

菜單可以包含各種有意義的布局元素，例如：

品牌標識的基本要素：標識，品牌字母，口號或公司聲明，公司吉祥物，公司或其領導者的照片，公司顏色等。網(wǎng)站內模塊所呈現(xiàn)的產(chǎn)品或服務的主題鏈接到網(wǎng)站內容的基本類別鏈接到最重要的社交網(wǎng)絡基本聯(lián)系信息（電話號碼，電子郵件等）在多語言界面的情況下切換語言搜索字段訂閱字段指向與產(chǎn)品交互的鏈接，例如試用版，從AppStore等下載。這并不意味著所有提到的元素都應該包含在一個網(wǎng)頁菜單中：在這種情況下，菜單部分會過載信息的風險很高。吸引用戶注意的物體越多，專注于重要物體的難度就越大。在設計任務的基礎上，設計師（有時與營銷專家一起）決定具有戰(zhàn)略意義的重要選項，并從列表中選擇或添加其他選項。

讓我們看看幾個例子，看看哪些提到的元素設計者放在特定網(wǎng)站的菜單中。

這是網(wǎng)頁的另一個示例，其菜單設計略有不同。這次作曲是圍繞中心建立的，其中包含徽標和品牌名稱。左側和右側在其周圍平衡，有兩個鏈接，每個鏈接允許用戶快速掃描并移動到他們感興趣的信息塊。

為什么菜單很重要？

菜單是許多網(wǎng)站的重要元素有幾個問題。

首先要考慮的是眼睛掃描模型，它顯示用戶在最初幾秒內如何與網(wǎng)頁交互。尼爾森諾曼集團大力支持這一重要的用戶研究領域，為設計師和可用性專家提供對用戶行為和互動的更好理解。

簡而言之，當人們訪問該網(wǎng)站時，特別是第一次，他們不會仔細和詳細地瀏覽頁面上的所有內容：他們掃描它以找到一個引起他們注意的鉤子，并說服他們花一些時間在網(wǎng)站上。收集用戶眼睛跟蹤數(shù)據(jù)的不同實驗表明，有幾種典型的模型，訪問者通常會掃描網(wǎng)站。在以下常見模型中，您將找到Z-Pattern，Zig-Zag模式和F-Pattern。我們來看看它們的方案是什么。

Z-Pattern對于具有統(tǒng)一信息呈現(xiàn)和弱視覺層次的網(wǎng)頁而言是非常典型的。從該方案可以看出，它標出了四個活動區(qū)域 – 其中兩個穿過典型的菜單區(qū)域。

另一種方案具有Zig-zag版本，對于具有可視劃分內容塊的頁面而言是典型的。同樣，讀者的眼睛從左上角開始從左到右移動，并在整個頁面上移動到右上角，掃描這個初始交互區(qū)域中的信息。

另一個模型是Nielsen Norman Group在探索中呈現(xiàn)的F模式，并顯示用戶經(jīng)常展示以下互動流程：

用戶首先讀取水平移動，通?？缭絻热輩^(qū)域的上部。這個初始元素構成了F的頂部欄。接下來，用戶稍微向下移動頁面，然后在第二個水平移動中讀取，該移動通常覆蓋比先前移動更短的區(qū)域。這個額外的元素形成了F的下欄。最后，用戶以垂直移動方式掃描內容的左側。有時這是一個相當緩慢和系統(tǒng)的掃描，在眼動追蹤熱圖上顯示為實心條紋。其他時候用戶移動得更快，創(chuàng)建了一個spottier熱圖。最后一個元素構成了F的詞干。所有提到的模型都表明，無論特定用戶遵循哪一個，掃描過程都將從網(wǎng)頁的頂部水平區(qū)域開始。使用它來顯示核心信息和品牌是一種支持雙方的策略：讀者快速掃描關鍵數(shù)據(jù)，而網(wǎng)站有機會保留它們，如果它正確呈現(xiàn)。這就是為什么菜單設計是UI / UX設計師以及內容和推廣專家必不可少的問題的基本原因。

在其中一篇致力于菜單設計實踐的文章中，其作者Bogdan Sandu提到了一個重要的觀點，應該牢記：“人們只需幾秒鐘即可判斷一個網(wǎng)站的質量，而互聯(lián)網(wǎng)上缺少第二印象。總而言之，一個網(wǎng)站必須引人注目，它只不過是一個大失敗“。

另一件需要考慮的事情是，菜單可以很快幫助快速向用戶呈現(xiàn)基本數(shù)據(jù)，并通過清晰的導航提供積極的用戶體驗。但是，這并不意味著每個網(wǎng)站都需要菜單。有許多創(chuàng)造性的解決方案提供在布局的其他區(qū)域中應用典型菜單功能的設計。每個網(wǎng)站設計案例都需要對產(chǎn)品或服務的目標受眾進行分析和研究。

設計實踐

可讀性和視覺層次結構

菜單和背景顏色的字體選擇應該經(jīng)過嚴格的研究和測試，因為菜單中的可讀性方面起著至關重要的作用。用戶必須能夠盡可能快地掃描和感知這些基本信息，而無需任何額外的努力。否則，您將面臨提供非用戶友好界面的風險。

這是另一個網(wǎng)站，其布局是在破碎的網(wǎng)格上構建的，因此菜單對應于此方法。菜單的左側部分視覺上較長，由四個元素組成：徽標和三個數(shù)據(jù)塊的鏈接，而右側部分較短，僅包含兩個布局元素：搜索和號召性用語按鈕市場形狀和顏色為高對比度。

還有一件事要記住，在向下滾動頁面的過程中，菜單有不同的轉換方式。有些網(wǎng)站使用固定菜單，在與網(wǎng)站的任何互動點上始終保持可見和活躍狀態(tài); 其他人在滾動過程中隱藏菜單。還有一些網(wǎng)站沒有完全隱藏菜單，但在滾動過程中縮小了菜單，這意味著它們隱藏了輔助信息，只留下了布局的核心元素在整個交互過程中處于活動狀態(tài)并且可用。

漢堡折疊菜單

另一種在菜單功能方面非常流行的設計解決方案是隱藏漢堡包按鈕后面的數(shù)據(jù)類別的基本鏈接。它被稱為由水平線組成的形狀看起來像典型的面包 – 肉 – 面包漢堡包。

這個設計概念為網(wǎng)站提供了頁面的原始結構，在頁面的左側留下了寬闊的邊緣，左上角的品牌名稱和徽標是第一個掃描點。另一部分呈現(xiàn)交互式區(qū)域，并有自己的菜單組成：左邊的漢堡按鈕和向右過渡的四個核心鏈接。正如這個交互示例所示，漢堡包菜單允許設計者組織許多主題信息塊并提供有效的視覺層次結構。

雖然漢堡菜單仍然屬于現(xiàn)代網(wǎng)絡和應用程序設計中備受爭議的問題，但它們仍被廣泛用作菜單元素。反對漢堡包菜單的論據(jù)是基于這樣一個事實，即這個設計元素可能會讓那些不經(jīng)常使用網(wǎng)站的人感到困惑，并且可能會被那些具有高度抽象性的標志所誤導。因此，應在用戶研究和定義目標受眾的能力和需求后做出關于應用漢堡按鈕的決定。

固定（粘滯）菜單

粘性菜單提供了另一種能夠有效應用增強可用性的趨勢。實際上，它能夠為用戶提供在任何交互點都可用的導航區(qū)域，這對于具有長滾動的內容繁重的頁面而言是有幫助的。

這是另一個設計概念，采用創(chuàng)意方法設計菜單。主頁的初始視圖包括非常簡約的菜單：它僅顯示社交圖標和搜索。然而，向下滾動用戶得到相當與傳統(tǒng)集的粘頭導航項目：第一個元素上看到左上角部分漢堡包按鈕隱藏擴展菜單，然后品牌符號后面的鏈接，專題信息塊。在與頁面交互的所有過程中，組合完成搜索放置在頁面的右上部分，并支持一致性的感覺。

雙重菜單

菜單中的雙重菜單可以呈現(xiàn)兩層導航。我們在一家面包店網(wǎng)站最近的一個案例研究中展示了這種技巧的例子。

如您所見，該網(wǎng)站還使用了一個由兩個級別的導航組成的粘性菜單。上方菜單顯示隱藏擴展菜單的社交網(wǎng)絡，徽標，搜索，購物車和漢堡按鈕的鏈接。第二行導航提供了與核心交互區(qū)域的即時連接：產(chǎn)品目錄，銷售點的位置，新聞和特別優(yōu)惠，有關服務和聯(lián)系部分的信息。視覺和印刷層次結構使所有元素清晰，易于掃描，為積極的用戶體驗提供堅實的基礎。

底線很簡單：菜單是任何網(wǎng)站的戰(zhàn)略重要互動區(qū)域。每個特定案例都需要自己的方法，這些方法將為特定目標受眾提供信息和可用。用戶研究可以為設計解決方案提供良好的基礎，這些解決方案可以遵循相當傳統(tǒng)的菜單組織形式或需要全新的視角。