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

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

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

什么是菜單？

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

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

菜單包括什么？

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

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

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

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

為什么菜單很重要？

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

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

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

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

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

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

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

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

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

設(shè)計(jì)實(shí)踐

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

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

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

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

漢堡折疊菜單

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

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

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

固定（粘滯）菜單

粘性菜單提供了另一種能夠有效應(yīng)用增強(qiáng)可用性的趨勢(shì)。實(shí)際上，它能夠?yàn)橛脩籼峁┰谌魏谓换c(diǎn)都可用的導(dǎo)航區(qū)域，這對(duì)于具有長(zhǎng)滾動(dòng)的內(nèi)容繁重的頁面而言是有幫助的。

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

雙重菜單

菜單中的雙重菜單可以呈現(xiàn)兩層導(dǎo)航。我們?cè)谝患颐姘昃W(wǎng)站最近的一個(gè)案例研究中展示了這種技巧的例子。

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

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