2020網(wǎng)站頭部網(wǎng)頁設計趨勢和范例

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

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

要學習如何設計一個網(wǎng)站的頭部，它應該包括什么元素，以下是一些例子。

“人生就是第一印象。你只有一次機會。讓它成為永恒?！报D J.R.Rim


website-header-design-in-2020 14.jpeg
Tea Manufacturer Website Concept

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

網(wǎng)站頭部是網(wǎng)頁的頂部部分。在過去，人們把標題理解為網(wǎng)站頂部的窄條，其中包含一個標志、一個行動召喚和聯(lián)系信息。但在現(xiàn)代設計中，主頁折疊上方的整個空間被認為是頁眉。
作為人們在加載網(wǎng)站的第一秒看到的頁面部分，頭部起到了邀請的作用。它應該提供關于站點的基本信息，以便用戶能夠在幾秒鐘內理解它所提供的內容。

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


website-header-design-in-2020 13.gif

Architectural Platform Home


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

頭部的任務是為用戶提供基本問題的答案:代表什么品牌，提供什么商品和服務，如何與公司的員工取得聯(lián)系，是否有任何當前的交易，等等。
除此之外，它還代表了一個網(wǎng)站的質量甚至身份。如果頭部引起了良好的情緒反應，并且觀眾覺得它有價值，那么你已經(jīng)初步成功了。
網(wǎng)站標題的主要元素通常是:
  • 標志或品牌標識
  • 行動呼吁
  • 文本或標題
  • 導航元素
  • 搜索。
不必一次吃成個胖子?？梢栽谪S富的信息和良好的信息排列之間找到一個平衡點。只使用必要的數(shù)據(jù)，不管所有的鏈接看起來多么重要，重載標題都是沒有好處的。
讓頭部太空也不是一個好主意。如果用戶在幾秒鐘內無法理解您的界面，那么他很可能離開不再回來。一個糟糕的頭部會把訪問者推到另一個網(wǎng)站去。

在簡約的頭部設計，只有導航的主要部分和標志。這種方式在設計落地頁時特別有用。


website-header-design-in-2020 2.jpeg

Design Freelancing Home Page


最佳網(wǎng)站頭部設計實例

在設計頭部部分時，沒有什么會限制你的創(chuàng)造力。網(wǎng)站的頭部是一個開放的領域，應該是難忘的，簡潔和有用的，所以任何創(chuàng)意都可以。

讓我們復習一下要點。


1，頭部的大小

網(wǎng)站頭部圖片應該多大？對此沒有一個明確的答案。曾有人試圖提供精確的數(shù)據(jù)表，但是現(xiàn)在網(wǎng)站建設最困難的方面之一，是確保每個屏幕大小的有效性。即使兩個屏幕大小相同，分辨率也可能不同，所以用戶不會看到相同的東西。
所以不要執(zhí)著于精確的像素概念，最好遵循簡單的常識規(guī)則。
頭部的高度應該不要干擾內容的感知。對于信息網(wǎng)站來說，一個小頭部是一個很好的選擇；而對于落地頁，頭部可能需要更大。

對于長頁面網(wǎng)站的頭部，最好在下面留出一些空間，這樣用戶就可以看到下面的內容并開始滾動。


website-header-design-in-2020 4.jpeg

Webdesigner Site Concept


2，視覺層次結構

尼爾森諾曼集團在2006年首次提出了他們關于網(wǎng)絡閱讀的F型模式理論，該理論至今仍有其價值。
一個人發(fā)現(xiàn)自己進入了一個新的不熟悉的網(wǎng)站，他的視覺旅程總是從屏幕的左上角開始。如果他們在那里沒有找到期望的信息，那么頁面將自動被認為是棘手的和不標準的，需要太多的努力來理解。
標志。尼爾森諾曼進行的另一項研究發(fā)現(xiàn)，用戶更容易記住那些標識放在左邊的品牌，而不是放在中間或右邊。
如果你有一個圓形的標志，那么把它放在屏幕的中心是可以接受的，盡管它的有效性不如放在左邊。
導航。注意不要把網(wǎng)站的這個部分弄得太亂。太多的鏈接讓訪問者應接不暇。有時一個網(wǎng)站的整體結構改造，可能是為最重要的導航分類清理出空間。
讓訪客更容易明白他們在哪里，以及如何找到想去的地方。使用懸停效果來引導用戶導航。

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


website-header-design-in-2020 1.gif

Street Fashion Product Page

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

常駐導航欄或者“粘性頭部”，意味著當用戶滾動頁面時，導航會常駐出現(xiàn)。這是目前的網(wǎng)頁設計標準。
讓頭部固定，如果它不違反你的整體設計概念。這對于桌面和移動設計都是一個好主意:
  • 電子商務網(wǎng)站-購物車總是常駐顯示。
  • 服務網(wǎng)站-電話號碼或行動召喚常駐顯示。

常駐的頭部可以改善客戶體驗，保持用戶導向，并給予他們更多的控制。


website-header-design-in-2020 3.gif

Tea Manufacturer Website

4，網(wǎng)站頭部傳達的信息

在設計標題之前，思考網(wǎng)站的整體風格和它的主要目的。
如果這是一個宣傳網(wǎng)站，目的是展示產品，頭部設計可能包含到主要部分的鏈接，在第一屏展現(xiàn)大的關鍵圖片，因為這樣一個網(wǎng)站的主要目的是有效地展示產品。對于電子商務或商業(yè)網(wǎng)站，情況可能有所不同。用戶需要輕松導航，了解最新的交易，如何快速聯(lián)系經(jīng)理，以及在哪里查看他們已經(jīng)完成的訂單，所以在這種情況下，頭部可能要更簡潔，為其他內容讓路。
頭部可以傳達如下的幾種信息:
  • 敦促消費者做某事
  • 建立信任
  • 鼓勵訪客了解更多
  • 展現(xiàn)趣味,等等。

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


website-header-design-in-2020 6.jpeg

3D Model Store Concept

5，相關的圖片

頭部的圖片應該直接傳達有關業(yè)務的信息。例如，如果它代表的是送餐服務，那么圖像可能描繪的是一個整潔的快遞員和具有審美吸引力的食物。讓訪問的用戶產生購買欲望。
高質量的照片。對于網(wǎng)頁設計師來說，圖片是一個強大的工具。它可以講述一個故事，喚起情感，并激勵你的訪客進一步滾動。對于那些有強烈沖擊力的圖片的網(wǎng)站，試著做一個透明的頭部。它能更好地顯示圖像，并展示主要鏈接。
幻燈圖片。如果你有幾個非常棒的產品或業(yè)務照片，那就太棒了!用戶可以滾動瀏覽一組精美的高分辨率圖像。

插圖。網(wǎng)站的標題圖片必須能引起讀者的共鳴，建立起人與人之間的聯(lián)系。更好的是，如果一個插圖很有獨特性，那會給人們留下很深的印象。可以盡量設計符合當下的插圖設計趨勢。


1582279600394793.jpeg
Builddie Website Homepage

6，視頻或動畫

不要只關注靜態(tài)圖像。
添加視頻是最有效的網(wǎng)站頭部創(chuàng)意之一。如果可能的話，嘗試在頭部添加主題視頻。許多網(wǎng)站在展示他們的公司或產品時，都用視頻來吸引觀眾。

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


website-header-design-in-2020 5.gif

Triumph Motorcycle Shop


7，一個精心設計的行動召喚（Call to Action）

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

有效的行動召喚非常有意義，可以促使用戶在一開始就采取行動，從而提高你的轉化率。有些行動召喚按鈕可以在一段時間內用來促進購買，有些則可以長期存在。


website-header-design-in-2020 10.jpeg

Drone Racing League Redesign Concept

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

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

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


website-header-design-in-2020 11.jpeg

Communication Security Web Page

9，簡單的頭部設計

通過保持頭部的清晰和整潔，訪客會感覺訪問沒有過分的負擔。一個有創(chuàng)意的網(wǎng)站標題也可以有非常簡單的外觀。


website-header-design-in-2020 12.jpeg

Meal Service Home Page


10，隱藏導航(漢堡包菜單)

這是一個越來越多用于網(wǎng)站設計的解決方案。漢堡包菜單是一個由三道條紋組成的小圖標，點擊后會顯示完整的菜單。當設計師需要專注于主屏幕時，他們就會使用這種技術。

從網(wǎng)站可用性的角度來看，這是一個不錯的選擇。這樣的菜單來自移動設計，用戶已經(jīng)很熟悉了。這種漢堡適用于促銷網(wǎng)站，在那里主要強調使用照片或視頻來高質量地展示產品。對于在線商店，這個選項可能不太合適，因為對于客戶來說，擁有一個購物車、已購產品和搜索是很重要的。


website-header-design-in-2020 7.gif

Skate Store Versatility Case

11，移動版網(wǎng)站的頭部設計

頭部不僅應該在網(wǎng)站的桌面版本上正確顯示，而且應該在移動版本上正確顯示。因此，它必須反應靈敏，能夠很好地適應任何移動設備。

移動設備的日常使用導致了網(wǎng)站設計看起來就像以移動為導向的，即使是在它們的桌面版本中。例如，大的形象圖片和漢堡包菜單的都來自于移動版設計。


website-header-design-in-2020 9.gif

Furniture Store Responsive Design


總結

網(wǎng)站頭部就是網(wǎng)站的名片。因此，在設計網(wǎng)站時，要盡可能的關注頭部設計。

網(wǎng)站頭部設計的最后一個最佳實踐是：定期迭代以保持你的網(wǎng)站更新。可以充分利用本文提供的各種建議。




作者：Kate Shokurova 原文：https://uxplanet.org/website-header-design-in-2020-best-practices-and-examples-1992f80ddd69

每天更新，
全站高品質素材免費下載！