2020年網(wǎng)站頭部設(shè)計(jì)最佳范例

時(shí)間：2023-03-16 20:18:01 | 來(lái)源：電子商務(wù)

時(shí)間：2023-03-16 20:18:01 來(lái)源：電子商務(wù)

海參君注：本文譯自 Kate Shokurova 的 Website Header Design in 2020: Best Practices and Examples 。作者分享了關(guān)于網(wǎng)站頭部（Header）設(shè)計(jì)的一些注意事項(xiàng)以及范例。希望對(duì)您有所幫助。

適合讀者：UI設(shè)計(jì)師、交互設(shè)計(jì)師、學(xué)生

閱讀難度：☆☆

---

Illustration by Eleni Debo

網(wǎng)站頭部（Header）設(shè)計(jì)在網(wǎng)站中起著關(guān)鍵的作用，并為網(wǎng)站的其他各個(gè)方面奠定了基調(diào)。特別是現(xiàn)在的極簡(jiǎn)主義時(shí)代，各種設(shè)計(jì)的花樣很多。有時(shí)沒(méi)有什么其他的東西可以吸引眼球，所以網(wǎng)站頭部設(shè)計(jì)的作用顯著增加。

網(wǎng)頁(yè)設(shè)計(jì)師花了很多精力來(lái)設(shè)計(jì)這一部分，為它注入了創(chuàng)意和效率。據(jù)Google所說(shuō)，形成對(duì)一個(gè)網(wǎng)站的印象只需要50毫秒，而這些印象的發(fā)展只需要難以置信的17毫秒。消費(fèi)者對(duì)品牌的認(rèn)識(shí)始于此。

要學(xué)習(xí)如何設(shè)計(jì)一個(gè)網(wǎng)站的頭部，它應(yīng)該包括什么元素，以下是一些例子。

“人生就是第一印象。你只有一次機(jī)會(huì)。讓它成為永恒?！?br>
― J.R.Rim

Tea Manufacturer Website Concept

什么是網(wǎng)站頭部?

網(wǎng)站頭部是網(wǎng)頁(yè)的頂部部分。在過(guò)去，人們把標(biāo)題理解為網(wǎng)站頂部的窄條，其中包含一個(gè)標(biāo)志、一個(gè)行動(dòng)召喚和聯(lián)系信息。但在現(xiàn)代設(shè)計(jì)中，主頁(yè)折疊上方的整個(gè)空間被認(rèn)為是頁(yè)眉。

作為人們?cè)诩虞d網(wǎng)站的第一秒看到的頁(yè)面部分，頭部起到了邀請(qǐng)的作用。它應(yīng)該提供關(guān)于站點(diǎn)的基本信息，以便用戶能夠在幾秒鐘內(nèi)理解它所提供的內(nèi)容。

一些設(shè)計(jì)師為網(wǎng)站的不同部分制作不同的頭部。例如，您可以為主頁(yè)創(chuàng)建一個(gè)大頭部，而為其他頁(yè)面保留一個(gè)小頭部。但要保持一致。內(nèi)頁(yè)的頭部設(shè)計(jì)應(yīng)該是主頁(yè)面頭部的縮略版。這是一個(gè)很好的網(wǎng)站設(shè)計(jì)方式。

Architectural Platform Home

網(wǎng)站頭部包含哪些元素?

頭部的任務(wù)是為用戶提供基本問(wèn)題的答案:代表什么品牌，提供什么商品和服務(wù)，如何與公司的員工取得聯(lián)系，是否有任何當(dāng)前的交易，等等。

除此之外，它還代表了一個(gè)網(wǎng)站的質(zhì)量甚至身份。如果頭部引起了良好的情緒反應(yīng)，并且觀眾覺(jué)得它有價(jià)值，那么你已經(jīng)初步成功了。

網(wǎng)站標(biāo)題的主要元素通常是:

• 標(biāo)志或品牌標(biāo)識(shí)
• 行動(dòng)呼吁
• 文本或標(biāo)題
• 導(dǎo)航元素
• 搜索。

不必一次吃成個(gè)胖子?？梢栽谪S富的信息和良好的信息排列之間找到一個(gè)平衡點(diǎn)。只使用必要的數(shù)據(jù)，不管所有的鏈接看起來(lái)多么重要，重載標(biāo)題都是沒(méi)有好處的。

讓頭部太空也不是一個(gè)好主意。如果用戶在幾秒鐘內(nèi)無(wú)法理解您的界面，那么他很可能離開(kāi)不再回來(lái)。一個(gè)糟糕的頭部會(huì)把訪問(wèn)者推到另一個(gè)網(wǎng)站去。

在簡(jiǎn)約的頭部設(shè)計(jì)，只有導(dǎo)航的主要部分和標(biāo)志。這種方式在設(shè)計(jì)落地頁(yè)時(shí)特別有用。

Design Freelancing Home Page

最佳網(wǎng)站頭部設(shè)計(jì)實(shí)例

在設(shè)計(jì)頭部部分時(shí)，沒(méi)有什么會(huì)限制你的創(chuàng)造力。網(wǎng)站的頭部是一個(gè)開(kāi)放的領(lǐng)域，應(yīng)該是難忘的，簡(jiǎn)潔和有用的，所以任何創(chuàng)意都可以。讓我們復(fù)習(xí)一下要點(diǎn)。

頭部的大小

網(wǎng)站頭部圖片應(yīng)該多大？對(duì)此沒(méi)有一個(gè)明確的答案。曾有人試圖提供精確的數(shù)據(jù)表，但是現(xiàn)在網(wǎng)站建設(shè)最困難的方面之一，是確保每個(gè)屏幕大小的有效性。即使兩個(gè)屏幕大小相同，分辨率也可能不同，所以用戶不會(huì)看到相同的東西。

所以不要執(zhí)著于精確的像素概念，最好遵循簡(jiǎn)單的常識(shí)規(guī)則。

頭部的高度應(yīng)該不要干擾內(nèi)容的感知。對(duì)于信息網(wǎng)站來(lái)說(shuō)，一個(gè)小頭部是一個(gè)很好的選擇；而對(duì)于落地頁(yè)，頭部可能需要更大。

對(duì)于長(zhǎng)頁(yè)面網(wǎng)站的頭部，最好在下面留出一些空間，這樣用戶就可以看到下面的內(nèi)容并開(kāi)始滾動(dòng)。

Webdesigner Site Concept

視覺(jué)層次結(jié)構(gòu)

尼爾森諾曼集團(tuán)在2006年首次提出了他們關(guān)于網(wǎng)絡(luò)閱讀的F型模式理論，該理論至今仍有其價(jià)值。

一個(gè)人發(fā)現(xiàn)自己進(jìn)入了一個(gè)新的不熟悉的網(wǎng)站，他的視覺(jué)旅程總是從屏幕的左上角開(kāi)始。如果他們?cè)谀抢餂](méi)有找到期望的信息，那么頁(yè)面將自動(dòng)被認(rèn)為是棘手的和不標(biāo)準(zhǔn)的，需要太多的努力來(lái)理解。

標(biāo)志。尼爾森諾曼進(jìn)行的另一項(xiàng)研究發(fā)現(xiàn)，用戶更容易記住那些標(biāo)識(shí)放在左邊的品牌，而不是放在中間或右邊。

如果你有一個(gè)圓形的標(biāo)志，那么把它放在屏幕的中心是可以接受的，盡管它的有效性不如放在左邊。

導(dǎo)航。注意不要把網(wǎng)站的這個(gè)部分弄得太亂。太多的鏈接讓訪問(wèn)者應(yīng)接不暇。有時(shí)一個(gè)網(wǎng)站的整體結(jié)構(gòu)改造，可能是為最重要的導(dǎo)航分類清理出空間。

讓訪客更容易明白他們?cè)谀睦?，以及如何找到想去的地方。使用懸停效果?lái)引導(dǎo)用戶導(dǎo)航。

行動(dòng)召喚。根據(jù)可視化層次結(jié)構(gòu)的原則，自然地突出顯示行動(dòng)召喚（按鈕或鏈接）。

Street Fashion Product Page

常駐的網(wǎng)站頭部

常駐導(dǎo)航欄或者“粘性頭部”，意味著當(dāng)用戶滾動(dòng)頁(yè)面時(shí)，導(dǎo)航會(huì)常駐出現(xiàn)。這是目前的網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)。

讓頭部固定，如果它不違反你的整體設(shè)計(jì)概念。這對(duì)于桌面和移動(dòng)設(shè)計(jì)都是一個(gè)好主意:

• 電子商務(wù)網(wǎng)站-購(gòu)物車總是常駐顯示。
• 服務(wù)網(wǎng)站-電話號(hào)碼或行動(dòng)召喚常駐顯示。

常駐的頭部可以改善客戶體驗(yàn)，保持用戶導(dǎo)向，并給予他們更多的控制。

Tea Manufacturer Website

網(wǎng)站頭部傳達(dá)的信息

在設(shè)計(jì)標(biāo)題之前，思考網(wǎng)站的整體風(fēng)格和它的主要目的。

如果這是一個(gè)宣傳網(wǎng)站，目的是展示產(chǎn)品，頭部設(shè)計(jì)可能包含到主要部分的鏈接，在第一屏展現(xiàn)大的關(guān)鍵圖片，因?yàn)檫@樣一個(gè)網(wǎng)站的主要目的是有效地展示產(chǎn)品。對(duì)于電子商務(wù)或商業(yè)網(wǎng)站，情況可能有所不同。用戶需要輕松導(dǎo)航，了解最新的交易，如何快速聯(lián)系經(jīng)理，以及在哪里查看他們已經(jīng)完成的訂單，所以在這種情況下，頭部可能要更簡(jiǎn)潔，為其他內(nèi)容讓路。

頭部可以傳達(dá)如下的幾種信息:

• 敦促消費(fèi)者做某事
• 建立信任
• 鼓勵(lì)訪客了解更多
• 展現(xiàn)趣味,等等。

這取決于具體網(wǎng)站的目標(biāo)。

3D Model Store Concept

相關(guān)的圖片

頭部的圖片應(yīng)該直接傳達(dá)有關(guān)業(yè)務(wù)的信息。例如，如果它代表的是送餐服務(wù)，那么圖像可能描繪的是一個(gè)整潔的快遞員和具有審美吸引力的食物。讓訪問(wèn)的用戶產(chǎn)生購(gòu)買欲望。

高質(zhì)量的照片。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)，圖片是一個(gè)強(qiáng)大的工具。它可以講述一個(gè)故事，喚起情感，并激勵(lì)你的訪客進(jìn)一步滾動(dòng)。對(duì)于那些有強(qiáng)烈沖擊力的圖片的網(wǎng)站，試著做一個(gè)透明的頭部。它能更好地顯示圖像，并展示主要鏈接。

幻燈圖片。如果你有幾個(gè)非常棒的產(chǎn)品或業(yè)務(wù)照片，那就太棒了!用戶可以滾動(dòng)瀏覽一組精美的高分辨率圖像。

插圖。網(wǎng)站的標(biāo)題圖片必須能引起讀者的共鳴，建立起人與人之間的聯(lián)系。更好的是，如果一個(gè)插圖很有獨(dú)特性，那會(huì)給人們留下很深的印象?？梢员M量設(shè)計(jì)符合當(dāng)下的插圖設(shè)計(jì)趨勢(shì)。

Builddie Website Homepage

視頻或動(dòng)畫不要只關(guān)注靜態(tài)圖像。

添加視頻是最有效的網(wǎng)站頭部創(chuàng)意之一。如果可能的話，嘗試在頭部添加主題視頻。許多網(wǎng)站在展示他們的公司或產(chǎn)品時(shí)，都用視頻來(lái)吸引觀眾。

另一種使你的設(shè)計(jì)更有吸引力、更生動(dòng)、更令人難忘的方法是添加動(dòng)畫。它可以成為很酷的網(wǎng)站頭部。如果你正在尋找一個(gè)吸引觀眾的互動(dòng)網(wǎng)頁(yè)，動(dòng)畫是一個(gè)很好的選擇。

Triumph Motorcycle Shop

一個(gè)精心設(shè)計(jì)的行動(dòng)召喚（Call to Action）

在設(shè)計(jì)網(wǎng)頁(yè)頭部時(shí)，設(shè)計(jì)師會(huì)加入一些行動(dòng)按鈕，如“登錄”、“登錄”、“聯(lián)系”等。為了吸引用戶的注意，從而產(chǎn)生所需的行動(dòng)，按鈕應(yīng)該包含一個(gè)可以被客戶理解的詞語(yǔ)，并且在其他內(nèi)容中脫穎而出。

有效的行動(dòng)召喚非常有意義，可以促使用戶在一開(kāi)始就采取行動(dòng)，從而提高你的轉(zhuǎn)化率。有些行動(dòng)召喚按鈕可以在一段時(shí)間內(nèi)用來(lái)促進(jìn)購(gòu)買，有些則可以長(zhǎng)期存在。

Drone Racing League Redesign Concept

適合網(wǎng)站頭部的最佳字體

首先，聯(lián)系方式、有趣的報(bào)價(jià)等信息，會(huì)讓用戶得到較好的感知。因此，您需要選擇清晰、易讀的字體，這些字體不會(huì)損害用戶的感知能力，而且一眼就能看懂。

對(duì)于大的主頁(yè)頭部，你可以使用一些大膽的排版和富有想象力的元素來(lái)吸引用戶的注意力，否則，最好不要選擇那些難以閱讀的花哨字體。

Communication Security Web Page

簡(jiǎn)單的頭部設(shè)計(jì)

通過(guò)保持頭部的清晰和整潔，訪客會(huì)感覺(jué)訪問(wèn)沒(méi)有過(guò)分的負(fù)擔(dān)。一個(gè)有創(chuàng)意的網(wǎng)站標(biāo)題也可以有非常簡(jiǎn)單的外觀。

Meal Service Home Page

隱藏導(dǎo)航(漢堡包菜單)

這是一個(gè)越來(lái)越多用于網(wǎng)站設(shè)計(jì)的解決方案。漢堡包菜單是一個(gè)由三道條紋組成的小圖標(biāo)，點(diǎn)擊后會(huì)顯示完整的菜單。當(dāng)設(shè)計(jì)師需要專注于主屏幕時(shí)，他們就會(huì)使用這種技術(shù)。從網(wǎng)站可用性的角度來(lái)看，這是一個(gè)不錯(cuò)的選擇。這樣的菜單來(lái)自移動(dòng)設(shè)計(jì)，用戶已經(jīng)很熟悉了。這種漢堡適用于促銷網(wǎng)站，在那里主要強(qiáng)調(diào)使用照片或視頻來(lái)高質(zhì)量地展示產(chǎn)品。對(duì)于在線商店，這個(gè)選項(xiàng)可能不太合適，因?yàn)閷?duì)于客戶來(lái)說(shuō)，擁有一個(gè)購(gòu)物車、已購(gòu)產(chǎn)品和搜索是很重要的。

Skate Store Versatility Case

移動(dòng)版網(wǎng)站的頭部設(shè)計(jì)

頭部不僅應(yīng)該在網(wǎng)站的桌面版本上正確顯示，而且應(yīng)該在移動(dòng)版本上正確顯示。因此，它必須反應(yīng)靈敏，能夠很好地適應(yīng)任何移動(dòng)設(shè)備。移動(dòng)設(shè)備的日常使用導(dǎo)致了網(wǎng)站設(shè)計(jì)看起來(lái)就像以移動(dòng)為導(dǎo)向的，即使是在它們的桌面版本中。例如，大的形象圖片和漢堡包菜單的都來(lái)自于移動(dòng)版設(shè)計(jì)。

Furniture Store Responsive Design

總結(jié)網(wǎng)站頭部就是網(wǎng)站的名片。因此，在設(shè)計(jì)網(wǎng)站時(shí)，要盡可能的關(guān)注頭部設(shè)計(jì)。

網(wǎng)站頭部設(shè)計(jì)的最后一個(gè)最佳實(shí)踐是：定期迭代以保持你的網(wǎng)站更新?？梢猿浞掷帽疚奶峁┑母鞣N建議。

---

http://weixin.qq.com/r/_UzZwT7EDGNzrXqi9xnr (二維碼自動(dòng)識(shí)別)