網(wǎng)站設(shè)計(jì)之十:如何做好網(wǎng)頁頭部?jī)?nèi)容設(shè)計(jì)?來看這些設(shè)計(jì)師的總結(jié)!

2022-6-14    博博

無論作為設(shè)計(jì)師還是普通瀏覽者,大家觀看一個(gè)網(wǎng)站時(shí)最先接觸到的就是網(wǎng)頁的頭部區(qū)域,這部分內(nèi)容為網(wǎng)站的其他各個(gè)方面設(shè)定了基調(diào),在網(wǎng)頁設(shè)計(jì)中起著非常關(guān)鍵的作用。

尤其是如今簡(jiǎn)潔設(shè)計(jì)比較盛行,多數(shù)時(shí)候把頭部?jī)?nèi)容設(shè)計(jì)好就變成了吸引用戶眼球最好的辦法。網(wǎng)頁設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站頭部時(shí)投入了大量精力,同時(shí)要兼顧創(chuàng)造力和實(shí)用性。根據(jù)一項(xiàng)Google的研究,用戶只需要短短數(shù)秒就可以形成對(duì)一個(gè)網(wǎng)站的看法,甚至有些觀點(diǎn)是在令人難以置信的1秒內(nèi)形成的。用戶對(duì)品牌的了解就是從這么短的時(shí)間內(nèi)開始的。


頭部區(qū)域在哪兒?


在通常網(wǎng)頁設(shè)計(jì)中,首頁上方的整個(gè)空間都被視為頭部區(qū)域。作為人們?cè)诩虞d網(wǎng)站后的最初幾秒內(nèi)看到部分,頭部信息起到了一種邀請(qǐng)作用,它應(yīng)該提供有關(guān)網(wǎng)站的基本信息,以便用戶能夠在幾秒內(nèi)了解網(wǎng)站的主要內(nèi)容。

如果以招聘活動(dòng)站點(diǎn)為例,整個(gè)頭部區(qū)域設(shè)計(jì)要明確傳達(dá)企業(yè)形象,及本次招聘活動(dòng)的特點(diǎn)。給瀏覽者一個(gè)強(qiáng)烈的視覺印象,企業(yè)已向你發(fā)出邀請(qǐng),我們對(duì)人才十分渴求,等等信息… 如果有線上線下活動(dòng)同時(shí)參與,那么在整體風(fēng)格上盡量保持一致。

如何做好網(wǎng)頁頭部?jī)?nèi)容設(shè)計(jì)?來看 58 設(shè)計(jì)師的總結(jié)!


包含哪些內(nèi)容與功能?


網(wǎng)頁頭部的任務(wù)是給用戶提供一些基本問題的答案:代表什么品牌,提供什么服務(wù)等等。如果我們?cè)趦?nèi)容上引起了用戶情感上的共鳴,那么就是正確的設(shè)計(jì)。

那么主要元素通常包括:

  • Logo 或品牌標(biāo)識(shí)
  • 交互指引
  • 標(biāo)題Slogan
  • 導(dǎo)航要素
  • 搜索功能

在設(shè)計(jì)網(wǎng)站頭部?jī)?nèi)容時(shí),從思維層面來講沒有任何東西會(huì)限制你的創(chuàng)造力,它應(yīng)該是令人難忘的、簡(jiǎn)潔和兼具實(shí)用性的,是一個(gè)可以展示創(chuàng)造性的開放領(lǐng)域。

下面讓我們一起來看看頭部?jī)?nèi)容設(shè)計(jì)的一些技巧。

1. 關(guān)于尺寸

對(duì)于網(wǎng)頁頭部圖片的大小是沒有統(tǒng)一的答案。有時(shí)候設(shè)計(jì)師希望提供相對(duì)固定的數(shù)字,但網(wǎng)頁設(shè)計(jì)最大的難點(diǎn)之一是很難確保每個(gè)屏幕尺寸的有效性。即使兩個(gè)屏幕的尺寸相同,分辨率也可能不同,因此用戶看到的內(nèi)容也不一定完全一樣。

因此,我們不要拘泥于精確的像素概念,最好遵循經(jīng)驗(yàn)積累的常識(shí)規(guī)則。

如何做好網(wǎng)頁頭部?jī)?nèi)容設(shè)計(jì)?來看 58 設(shè)計(jì)師的總結(jié)!

頭部的高度本著不干擾內(nèi)容感知的基本原則。對(duì)于一些展示信息資源的頁面,較小的頭部區(qū)域是一個(gè)不錯(cuò)的選擇,而對(duì)于落地頁或者企業(yè)客戶首頁,頭部區(qū)域可能會(huì)更大,而且多數(shù)大客戶會(huì)有主視覺單屏展示頁。

如果某些網(wǎng)頁,例如落地頁頭部?jī)?nèi)容較長的情況下,最好在首屏給下一屏內(nèi)容露出一些空間,這樣用戶就可以意識(shí)到下一頁還有內(nèi)容,引導(dǎo)用戶滾動(dòng)。

2. Logo展現(xiàn)

當(dāng)一個(gè)人發(fā)現(xiàn)自己在陌生網(wǎng)站上,總是習(xí)慣于從屏幕的左上角開始瀏覽網(wǎng)站。盡管設(shè)計(jì)師有時(shí)候認(rèn)為打破常規(guī)的布局也可以帶來不錯(cuò)的效果,但是多數(shù)用戶如果他們常規(guī)位置找不到預(yù)期的信息,將會(huì)不假思索地認(rèn)為這個(gè)頁面是難用的和不規(guī)范的,需要花費(fèi)很多的努力才能理解。這就要看你的設(shè)計(jì)目的和受眾群體能夠接受哪些程度的變化,我們今天主要說大多數(shù)受眾。

如何做好網(wǎng)頁頭部?jī)?nèi)容設(shè)計(jì)?來看 58 設(shè)計(jì)師的總結(jié)!

Logo ——與居中或右側(cè)放置相比,用戶更容易記住那些 Logo 放在左邊的品牌。如果你使用的是圓形 Logo,那么可以把它居中放置,盡管它的有效性仍然比放在左側(cè)要低。

3. 吸頂導(dǎo)航欄

吸頂導(dǎo)航,換句話說就是「粘性標(biāo)題」,當(dāng)你滾動(dòng)頁面時(shí),導(dǎo)航區(qū)在頁面中跟隨,現(xiàn)在成為一個(gè)網(wǎng)頁設(shè)計(jì)標(biāo)準(zhǔn)。如果不違反網(wǎng)站整體設(shè)計(jì)理念,請(qǐng)將導(dǎo)航欄吸頂固定。無論是PC端還是移動(dòng)端設(shè)計(jì),這都是一個(gè)好的選擇:

  • 例如長頁面展示、瀏覽內(nèi)容同時(shí)客戶需要導(dǎo)航區(qū)總是在視線范圍內(nèi)。
  • 如有滾動(dòng)信息,不斷提示客戶點(diǎn)擊,則可置頂或置底處理。

如何做好網(wǎng)頁頭部?jī)?nèi)容設(shè)計(jì)?來看 58 設(shè)計(jì)師的總結(jié)!

可根據(jù)頁面內(nèi)容展示要求,向下滾動(dòng)時(shí)調(diào)整導(dǎo)航背景透明度,盡量少的影響內(nèi)容展示同時(shí)使頁面看起來更生動(dòng)和通透。還可以在滾動(dòng)時(shí)簡(jiǎn)化導(dǎo)航欄樣式或高度,使用戶能找到但又不過于搶眼。

總之,固定導(dǎo)航欄有助于提升用戶體驗(yàn),保持用戶導(dǎo)向并給予了他們更多控制權(quán)。

3. 關(guān)于圖片的應(yīng)用

頭部?jī)?nèi)容所用圖片可以選擇直接和要表達(dá)的業(yè)務(wù)相關(guān)性很強(qiáng)的,例如招聘類網(wǎng)站使用招聘場(chǎng)景圖片;也可以選擇中性感覺的例如辦公場(chǎng)景、城市風(fēng)景類圖片進(jìn)行虛化降低清晰度或明度來突出前景內(nèi)容;

如何做好網(wǎng)頁頭部?jī)?nèi)容設(shè)計(jì)?來看 58 設(shè)計(jì)師的總結(jié)!

高質(zhì)量圖片——攝影對(duì)于網(wǎng)頁設(shè)計(jì)師來說是一個(gè)強(qiáng)大的工具。它可以講述一個(gè)故事,喚起用戶的情感,并鼓勵(lì)訪問者進(jìn)一步滾動(dòng)。對(duì)于那些有強(qiáng)烈沖擊力的圖片的網(wǎng)站,試著做一個(gè)透明的標(biāo)題,它可以更好地顯示圖像,并保留了主要鏈接。

如何做好網(wǎng)頁頭部?jī)?nèi)容設(shè)計(jì)?來看 58 設(shè)計(jì)師的總結(jié)!

輪播圖片——如果客戶給了幾張代表該企業(yè)業(yè)務(wù)的出色照片,這種方式就沒錯(cuò)!企業(yè)希望用戶可以滾動(dòng)瀏覽一組精美的高分辨率圖像。

如何做好網(wǎng)頁頭部?jī)?nèi)容設(shè)計(jì)?來看 58 設(shè)計(jì)師的總結(jié)!

插畫——網(wǎng)站的頭部圖片必須能引起讀者的共鳴,建立起人與人之間的聯(lián)系。如果圖片是獨(dú)特的且易于辨認(rèn),即使是從網(wǎng)站標(biāo)題中剪切出來,效果也會(huì)很好,可以利用當(dāng)今的插圖潮流來實(shí)現(xiàn)這一點(diǎn)。

4. 視頻或動(dòng)畫

當(dāng)然我們也不能只關(guān)注靜態(tài)圖片,添加視頻也是最有效的網(wǎng)站頭部創(chuàng)意之一。如果可能的話,嘗試著在頭部?jī)?nèi)容中添加主題視頻材料,很多網(wǎng)站利用在背景中添加短視頻來吸引用戶,盡可能以最好的方式展示他們的公司或產(chǎn)品。

如何做好網(wǎng)頁頭部?jī)?nèi)容設(shè)計(jì)?來看 58 設(shè)計(jì)師的總結(jié)!

△ 華夏幸福校招官網(wǎng)首頁動(dòng)畫,撥云見日的效果加上中式剪紙風(fēng)格的運(yùn)用,將公司各業(yè)務(wù)線融合到幾個(gè)轉(zhuǎn)輪中,產(chǎn)生了故事性的動(dòng)畫場(chǎng)景。

如果想要使設(shè)計(jì)更具吸引力、生動(dòng)和令人難忘的另一種方法是添加動(dòng)畫。它可以使網(wǎng)站頭部?jī)?nèi)容變得非???。以每季校園招聘企業(yè)站點(diǎn)為例,各大公司對(duì)應(yīng)屆生群體的追逐,很大程度上體現(xiàn)在對(duì)該群體審美和喜好的迎合上,年輕有活力的動(dòng)畫或視頻元素絕對(duì)是吸引眼球的不二之選。

當(dāng)然不一定只有滿屏大型動(dòng)畫,一般動(dòng)畫越復(fù)雜面積越大占用流量越多,客戶打開延遲也影響觀感。這時(shí)候我們可以根據(jù)功能不同,設(shè)計(jì)一些交互性的動(dòng)畫,去提升客戶使用感受,盡量不影響網(wǎng)頁打開速度。

5. 移動(dòng)端頭部設(shè)計(jì)

網(wǎng)頁頭部不可能只顯示PC端的網(wǎng)頁上,還應(yīng)該正確顯示在移動(dòng)端的網(wǎng)頁上。因此,在近年的設(shè)計(jì)中,網(wǎng)頁必須具有響應(yīng)性,并且能夠很好地適應(yīng)各種移動(dòng)設(shè)備,這樣才能帶給用戶完整的設(shè)計(jì)體驗(yàn)。

移動(dòng)設(shè)備的日常使用廣泛性早已影響網(wǎng)站設(shè)計(jì),即使在PC中,也有一些細(xì)節(jié)看起來像是面向移動(dòng)設(shè)備的網(wǎng)站設(shè)計(jì)。例如,Banner和漢堡包菜單都起源于移動(dòng)設(shè)計(jì)。

如何做好網(wǎng)頁頭部?jī)?nèi)容設(shè)計(jì)?來看 58 設(shè)計(jì)師的總結(jié)!

移動(dòng)端有著與PC端不同的屏幕尺寸和操作方式,很多時(shí)候需要設(shè)計(jì)師在一開始就考慮到兩種界面的適應(yīng)情況,比如在PC上頂部一條的導(dǎo)航,到移動(dòng)端就演變?yōu)橐粋€(gè)漢堡包菜單。而原本PC頁面中展開顯示的內(nèi)容,在移動(dòng)端會(huì)向下層延伸,首層界面成為一個(gè)內(nèi)容聚合頁。


寫在最后


網(wǎng)站是以頭部?jī)?nèi)容為先導(dǎo)的,它就像是一張獨(dú)特的名片。因此,我們?cè)谠O(shè)計(jì)網(wǎng)站時(shí),盡可能最大限度地關(guān)注該區(qū)域。

最后還要提醒大家,一定記得定期更新網(wǎng)站頭部?jī)?nèi)容哦!以校園招聘大客戶為例,大多數(shù)企業(yè)都會(huì)在每年春秋兩季的招聘旺季更新其招聘主題風(fēng)格,以保持網(wǎng)站的新鮮感和時(shí)效性。

以上只是在工作中的一些點(diǎn)滴體會(huì),微不足道。感恩能在UXD集體中不斷成長。

作者:58UXD

轉(zhuǎn)載請(qǐng)注明:優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



更多精彩文章:

網(wǎng)站設(shè)計(jì)之一:怒馬!超實(shí)用的單頁網(wǎng)站設(shè)計(jì)指南(附大量資源)

網(wǎng)站設(shè)計(jì)之二:旅游網(wǎng)站設(shè)計(jì)分析!教你10個(gè)小技巧

網(wǎng)站設(shè)計(jì)之三:實(shí)例教學(xué)!如何將極簡(jiǎn)風(fēng)格的原則運(yùn)用到網(wǎng)站設(shè)計(jì)中?

網(wǎng)站設(shè)計(jì)之四:另辟蹊徑談創(chuàng)新!提升網(wǎng)站設(shè)計(jì)形式的幾種方法

網(wǎng)站設(shè)計(jì)之五:經(jīng)驗(yàn)分享:移動(dòng)網(wǎng)站設(shè)計(jì)應(yīng)該避免的“七宗罪”

網(wǎng)站設(shè)計(jì)之六:4000 字快速回顧20多年的網(wǎng)頁設(shè)計(jì)發(fā)展史!

網(wǎng)站設(shè)計(jì)之七:騰訊出品!2021-2022設(shè)計(jì)趨勢(shì)報(bào)告:動(dòng)態(tài)篇

網(wǎng)站設(shè)計(jì)之八:為什么千萬別隨便學(xué)國外的極簡(jiǎn)設(shè)計(jì)?

網(wǎng)站設(shè)計(jì)之九:高手出品!2020~2021年UI界面設(shè)計(jì)趨勢(shì)

網(wǎng)站設(shè)計(jì)之十:如何做好網(wǎng)頁頭部?jī)?nèi)容設(shè)計(jì)?來看 58 設(shè)計(jì)師的總結(jié)!





分享本文至:

日歷

鏈接

個(gè)人資料

存檔