你必須要知道的：網(wǎng)站標(biāo)題導(dǎo)航設(shè)計方法

時間：2023-06-05 11:30:02 | 來源：網(wǎng)站運營

時間：2023-06-05 11:30:02 來源：網(wǎng)站運營

你必須要知道的：網(wǎng)站標(biāo)題導(dǎo)航設(shè)計方法：

關(guān)于網(wǎng)站標(biāo)題的定義，結(jié)構(gòu)和組成的一組見解作為網(wǎng)站的戰(zhàn)略部分：各種示例和方法。

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




在專門討論網(wǎng)頁設(shè)計術(shù)語的UI / UX詞匯表問題中，我們已經(jīng)提供了什么是標(biāo)題的簡要概述。今天讓我們看一下這個主題，并討論標(biāo)題的功能和設(shè)計建議。此外，我們將展示一系列網(wǎng)頁設(shè)計概念，將不同的方法應(yīng)用于標(biāo)題設(shè)計。

什么是標(biāo)題？

在網(wǎng)頁布局中，標(biāo)題是網(wǎng)頁的上部（頂部）部分。它絕對是頁面的戰(zhàn)略部分，是人們在介紹網(wǎng)站的第一秒內(nèi)滾動頁面之前看到的區(qū)域。以某種方式作為邀請的標(biāo)志，標(biāo)題應(yīng)該提供有關(guān)數(shù)字產(chǎn)品的核心信息，以便用戶可以在幾秒鐘內(nèi)掃描它。從設(shè)計的角度來看，標(biāo)題也是創(chuàng)造性設(shè)計解決方案的廣闊領(lǐng)域，應(yīng)該是吸引人的，簡潔和有用的。標(biāo)題通常被稱為“網(wǎng)站菜單”，并被定位為網(wǎng)站布局中的導(dǎo)航的關(guān)鍵元素。



















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

標(biāo)題包括什么？

標(biāo)題可以包含各種有意義的布局元素，例如：

• 品牌標(biāo)識的基本要素：標(biāo)識，品牌字母，口號或公司聲明，公司吉祥物，公司或其領(lǐng)導(dǎo)者的照片，公司顏色等。

• 復(fù)制塊設(shè)置所呈現(xiàn)的產(chǎn)品或服務(wù)的主題

• 鏈接到網(wǎng)站內(nèi)容的基本類別

• 鏈接到最重要的社交網(wǎng)絡(luò)

• 基本聯(lián)系信息（電話號碼，電子郵件等）

• 在多語言界面的情況下切換語言

• 搜索字段

• 訂閱字段

• 指向與產(chǎn)品交互的鏈接，例如試用版，從AppStore等下載。

這并不意味著所有提到的元素都應(yīng)該包含在一個網(wǎng)頁標(biāo)題中：在這種情況下，標(biāo)題部分會因信息而過載的風(fēng)險很高。吸引用戶注意的物體越多，專注于重要物體就越困難。在設(shè)計任務(wù)的基礎(chǔ)上，設(shè)計師（有時與營銷專家一起）決定具有戰(zhàn)略意義的重要選項，并從列表中選擇或添加其他選項。




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



















這是室內(nèi)設(shè)計工作室的網(wǎng)站。頁面的上半部分顯示了在滾動過程中始終保持在視覺感知區(qū)域的粘性標(biāo)題。它分為兩個區(qū)塊：左側(cè)部分具有品牌標(biāo)識，右側(cè)部分呈現(xiàn)交互式區(qū)域，其中包含“Product”，“Studio”和“Press”等多個信息塊的鏈接以及標(biāo)記為“Shop”的號召性用語按鈕出形狀。標(biāo)題的中心部分使用負(fù)空間來視覺分離這兩個塊。




















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

為什么標(biāo)題很重要？

標(biāo)題是許多網(wǎng)站的重要元素有幾個問題。




首先要考慮的是眼睛掃描模型，它顯示用戶在第一秒內(nèi)如何與網(wǎng)頁進(jìn)行交互。用戶研究的這一重要領(lǐng)域得到了尼爾森諾曼集團(tuán)的大力支持，為設(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ū)域 - 其中兩個穿過典型的標(biāo)題區(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)站有機(jī)會保留它們，如果它正確呈現(xiàn)。這就是為什么標(biāo)題設(shè)計是UI / UX設(shè)計師以及內(nèi)容和推廣專家必不可少的問題的基本原因。




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




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

設(shè)計實踐

可讀性和視覺層次

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



















上面提到的新聞網(wǎng)站的設(shè)計概念包括標(biāo)題，包括作為組成的中心元素的網(wǎng)站標(biāo)題，到基本類別的出版物的兩個活動鏈接，鏈接到實時模式和標(biāo)有放大鏡圖標(biāo)的搜索字段。




















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




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

漢堡菜單

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



















此按鈕通常放在標(biāo)題中，現(xiàn)在它是交互的典型元素。大多數(shù)定期訪問和使用網(wǎng)站的用戶都知道此按鈕隱藏了核心類別的數(shù)據(jù)，因此這個技巧不需要額外的解釋和提示。漢堡菜單釋放空間，使界面更簡約，充滿空氣，并為其他重要的布局元素保存空間。這種設(shè)計技術(shù)還為響應(yīng)和自適應(yīng)設(shè)計隱藏導(dǎo)航元素并使界面在不同設(shè)備上看起來諧波提供了額外的好處。




















所呈現(xiàn)的網(wǎng)頁設(shè)計概念顯示了漢堡菜單的版本。由于網(wǎng)站的菜單包含許多位置，設(shè)計師使用這種技術(shù)將漢堡按鈕放在初始交互區(qū)域 - 左上角。它允許創(chuàng)建支持網(wǎng)站的一般簡約風(fēng)格的標(biāo)題。標(biāo)題的水平區(qū)域分為兩個區(qū)域：左側(cè)區(qū)域顯示品牌標(biāo)識，網(wǎng)站簡短介紹為紅色，并與頁面標(biāo)題和號召性用語元素的視覺效果保持視覺一致性; 右側(cè)區(qū)域包含社交網(wǎng)絡(luò)和搜索圖標(biāo)的圖標(biāo)。標(biāo)題的中央部分留空，這為其設(shè)計增加了一些空氣和平衡，并作為分隔兩個不同功能塊的負(fù)空間。



















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




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

固定（粘滯）標(biāo)題

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






















所呈現(xiàn)的網(wǎng)站設(shè)計概念具有固定的標(biāo)題，當(dāng)頁面滾動時不會隱藏。然而，它遵循極簡主義原則，其中品牌名稱字母作為構(gòu)圖的中心，放大鏡圖標(biāo)標(biāo)記搜索功能和漢堡按鈕隱藏鏈接到導(dǎo)航區(qū)域。




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

雙重菜單

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



















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




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







相關(guān)文章



2019年設(shè)計趨勢指南(全集）





移動UI設(shè)計：15種基本類型界面





移動應(yīng)用程序設(shè)計：移動應(yīng)用程序類型的大指南








網(wǎng)頁設(shè)計：Web內(nèi)容的5種基本圖像類型