2022-6-14 博博
無論作為設計師還是普通瀏覽者，大家觀看一個網(wǎng)站時最先接觸到的就是網(wǎng)頁的頭部區(qū)域，這部分內(nèi)容為網(wǎng)站的其他各個方面設定了基調(diào)，在網(wǎng)頁設計中起著非常關鍵的作用。
尤其是如今簡潔設計比較盛行，多數(shù)時候把頭部內(nèi)容設計好就變成了吸引用戶眼球最好的辦法。網(wǎng)頁設計師在設計網(wǎng)站頭部時投入了大量精力，同時要兼顧創(chuàng)造力和實用性。根據(jù)一項Google的研究，用戶只需要短短數(shù)秒就可以形成對一個網(wǎng)站的看法，甚至有些觀點是在令人難以置信的1秒內(nèi)形成的。用戶對品牌的了解就是從這么短的時間內(nèi)開始的。
在通常網(wǎng)頁設計中，首頁上方的整個空間都被視為頭部區(qū)域。作為人們在加載網(wǎng)站后的最初幾秒內(nèi)看到部分，頭部信息起到了一種邀請作用，它應該提供有關網(wǎng)站的基本信息，以便用戶能夠在幾秒內(nèi)了解網(wǎng)站的主要內(nèi)容。
如果以招聘活動站點為例，整個頭部區(qū)域設計要明確傳達企業(yè)形象，及本次招聘活動的特點。給瀏覽者一個強烈的視覺印象，企業(yè)已向你發(fā)出邀請，我們對人才十分渴求，等等信息… 如果有線上線下活動同時參與，那么在整體風格上盡量保持一致。
網(wǎng)頁頭部的任務是給用戶提供一些基本問題的答案：代表什么品牌，提供什么服務等等。如果我們在內(nèi)容上引起了用戶情感上的共鳴，那么就是正確的設計。
那么主要元素通常包括：
在設計網(wǎng)站頭部內(nèi)容時，從思維層面來講沒有任何東西會限制你的創(chuàng)造力，它應該是令人難忘的、簡潔和兼具實用性的，是一個可以展示創(chuàng)造性的開放領域。
下面讓我們一起來看看頭部內(nèi)容設計的一些技巧。
1. 關于尺寸
對于網(wǎng)頁頭部圖片的大小是沒有統(tǒng)一的答案。有時候設計師希望提供相對固定的數(shù)字，但網(wǎng)頁設計最大的難點之一是很難確保每個屏幕尺寸的有效性。即使兩個屏幕的尺寸相同，分辨率也可能不同，因此用戶看到的內(nèi)容也不一定完全一樣。
因此，我們不要拘泥于精確的像素概念，最好遵循經(jīng)驗積累的常識規(guī)則。
頭部的高度本著不干擾內(nèi)容感知的基本原則。對于一些展示信息資源的頁面，較小的頭部區(qū)域是一個不錯的選擇，而對于落地頁或者企業(yè)客戶首頁，頭部區(qū)域可能會更大，而且多數(shù)大客戶會有主視覺單屏展示頁。
如果某些網(wǎng)頁，例如落地頁頭部內(nèi)容較長的情況下，最好在首屏給下一屏內(nèi)容露出一些空間，這樣用戶就可以意識到下一頁還有內(nèi)容，引導用戶滾動。
2. Logo展現(xiàn)
當一個人發(fā)現(xiàn)自己在陌生網(wǎng)站上，總是習慣于從屏幕的左上角開始瀏覽網(wǎng)站。盡管設計師有時候認為打破常規(guī)的布局也可以帶來不錯的效果，但是多數(shù)用戶如果他們常規(guī)位置找不到預期的信息，將會不假思索地認為這個頁面是難用的和不規(guī)范的，需要花費很多的努力才能理解。這就要看你的設計目的和受眾群體能夠接受哪些程度的變化，我們今天主要說大多數(shù)受眾。
Logo ——與居中或右側(cè)放置相比，用戶更容易記住那些 Logo 放在左邊的品牌。如果你使用的是圓形 Logo，那么可以把它居中放置，盡管它的有效性仍然比放在左側(cè)要低。
3. 吸頂導航欄
吸頂導航，換句話說就是「粘性標題」，當你滾動頁面時，導航區(qū)在頁面中跟隨，現(xiàn)在成為一個網(wǎng)頁設計標準。如果不違反網(wǎng)站整體設計理念，請將導航欄吸頂固定。無論是PC端還是移動端設計，這都是一個好的選擇：
可根據(jù)頁面內(nèi)容展示要求，向下滾動時調(diào)整導航背景透明度，盡量少的影響內(nèi)容展示同時使頁面看起來更生動和通透。還可以在滾動時簡化導航欄樣式或高度，使用戶能找到但又不過于搶眼。
總之，固定導航欄有助于提升用戶體驗，保持用戶導向并給予了他們更多控制權(quán)。
3. 關于圖片的應用
頭部內(nèi)容所用圖片可以選擇直接和要表達的業(yè)務相關性很強的，例如招聘類網(wǎng)站使用招聘場景圖片；也可以選擇中性感覺的例如辦公場景、城市風景類圖片進行虛化降低清晰度或明度來突出前景內(nèi)容；
高質(zhì)量圖片——攝影對于網(wǎng)頁設計師來說是一個強大的工具。它可以講述一個故事，喚起用戶的情感，并鼓勵訪問者進一步滾動。對于那些有強烈沖擊力的圖片的網(wǎng)站，試著做一個透明的標題，它可以更好地顯示圖像，并保留了主要鏈接。
輪播圖片——如果客戶給了幾張代表該企業(yè)業(yè)務的出色照片，這種方式就沒錯！企業(yè)希望用戶可以滾動瀏覽一組精美的高分辨率圖像。
插畫——網(wǎng)站的頭部圖片必須能引起讀者的共鳴，建立起人與人之間的聯(lián)系。如果圖片是獨特的且易于辨認，即使是從網(wǎng)站標題中剪切出來，效果也會很好，可以利用當今的插圖潮流來實現(xiàn)這一點。
4. 視頻或動畫
當然我們也不能只關注靜態(tài)圖片，添加視頻也是最有效的網(wǎng)站頭部創(chuàng)意之一。如果可能的話，嘗試著在頭部內(nèi)容中添加主題視頻材料，很多網(wǎng)站利用在背景中添加短視頻來吸引用戶，盡可能以最好的方式展示他們的公司或產(chǎn)品。
△ 華夏幸福校招官網(wǎng)首頁動畫，撥云見日的效果加上中式剪紙風格的運用，將公司各業(yè)務線融合到幾個轉(zhuǎn)輪中，產(chǎn)生了故事性的動畫場景。
如果想要使設計更具吸引力、生動和令人難忘的另一種方法是添加動畫。它可以使網(wǎng)站頭部內(nèi)容變得非?？帷Ｒ悦考拘@招聘企業(yè)站點為例，各大公司對應屆生群體的追逐，很大程度上體現(xiàn)在對該群體審美和喜好的迎合上，年輕有活力的動畫或視頻元素絕對是吸引眼球的不二之選。
當然不一定只有滿屏大型動畫，一般動畫越復雜面積越大占用流量越多，客戶打開延遲也影響觀感。這時候我們可以根據(jù)功能不同，設計一些交互性的動畫，去提升客戶使用感受，盡量不影響網(wǎng)頁打開速度。
5. 移動端頭部設計
網(wǎng)頁頭部不可能只顯示PC端的網(wǎng)頁上，還應該正確顯示在移動端的網(wǎng)頁上。因此，在近年的設計中，網(wǎng)頁必須具有響應性，并且能夠很好地適應各種移動設備，這樣才能帶給用戶完整的設計體驗。
移動設備的日常使用廣泛性早已影響網(wǎng)站設計，即使在PC中，也有一些細節(jié)看起來像是面向移動設備的網(wǎng)站設計。例如，Banner和漢堡包菜單都起源于移動設計。
移動端有著與PC端不同的屏幕尺寸和操作方式，很多時候需要設計師在一開始就考慮到兩種界面的適應情況，比如在PC上頂部一條的導航，到移動端就演變?yōu)橐粋€漢堡包菜單。而原本PC頁面中展開顯示的內(nèi)容，在移動端會向下層延伸，首層界面成為一個內(nèi)容聚合頁。
網(wǎng)站是以頭部內(nèi)容為先導的，它就像是一張獨特的名片。因此，我們在設計網(wǎng)站時，盡可能最大限度地關注該區(qū)域。
最后還要提醒大家，一定記得定期更新網(wǎng)站頭部內(nèi)容哦！以校園招聘大客戶為例，大多數(shù)企業(yè)都會在每年春秋兩季的招聘旺季更新其招聘主題風格，以保持網(wǎng)站的新鮮感和時效性。
以上只是在工作中的一些點滴體會，微不足道。感恩能在UXD集體中不斷成長。
轉(zhuǎn)載請注明：優(yōu)設網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.wnxcall.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
網(wǎng)站設計之一：怒馬！超實用的單頁網(wǎng)站設計指南（附大量資源）
網(wǎng)站設計之二：旅游網(wǎng)站設計分析！教你10個小技巧
網(wǎng)站設計之三：實例教學！如何將極簡風格的原則運用到網(wǎng)站設計中？
網(wǎng)站設計之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設計形式的幾種方法
網(wǎng)站設計之五：經(jīng)驗分享：移動網(wǎng)站設計應該避免的“七宗罪”
網(wǎng)站設計之六：4000 字快速回顧20多年的網(wǎng)頁設計發(fā)展史！
網(wǎng)站設計之七：騰訊出品！2021-2022設計趨勢報告：動態(tài)篇
網(wǎng)站設計之八：為什么千萬別隨便學國外的極簡設計？
網(wǎng)站設計之九：高手出品！2020~2021年UI界面設計趨勢
網(wǎng)站設計之十：如何做好網(wǎng)頁頭部內(nèi)容設計？來看 58 設計師的總結(jié)！
