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

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

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

什么是菜單？

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

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

菜單包括什么？

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

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

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

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

為什么菜單很重要？

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

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

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

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

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

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

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

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

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

設(shè)計實踐

可讀性和視覺層次結(jié)構(gòu)

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

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

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

漢堡折疊菜單

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

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

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

固定（粘滯）菜單

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

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

雙重菜單

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

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

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