考慮到創(chuàng)造性和生產(chǎn)力，網(wǎng)頁(yè)設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站的這一部分時(shí)付出了大量的努力。因?yàn)橄M(fèi)者對(duì)品牌的認(rèn)識(shí)就從這里開(kāi)始。但據(jù)谷歌統(tǒng)計(jì)，消費(fèi)者對(duì)一個(gè)網(wǎng)站的意見(jiàn)只需50毫秒就能形成，甚至有的只需17毫秒。

要了解如何設(shè)計(jì)一個(gè)有效的網(wǎng)站首屏，以及它應(yīng)該包括哪些元素，請(qǐng)看下面的例子。

“生活是第一印象。你只有一次機(jī)會(huì)。讓它記住你”― J.R. Rim

什么是網(wǎng)站首屏？

什么是網(wǎng)站的首屏（header）？ 過(guò)去，人們通常把LOGO，按鈕，聯(lián)系信息一同構(gòu)成的一行窄窄的區(qū)域稱(chēng)作首屏。在現(xiàn)代設(shè)計(jì)中，主頁(yè)的第一屏區(qū)域都可以認(rèn)為是首屏。

作為人們?cè)诩虞d網(wǎng)站時(shí)第一秒看到的界面部分，首屏就相當(dāng)于邀請(qǐng)函。 它應(yīng)該提供一個(gè)網(wǎng)站的基本信息，以便用戶能夠在幾秒鐘內(nèi)對(duì)網(wǎng)站有個(gè)初步了解。

一些設(shè)計(jì)師會(huì)為網(wǎng)站的各個(gè)部分制作單獨(dú)的首屏。 例如，你可以為主頁(yè)制作一個(gè)大首屏，而在其他頁(yè)面留下一個(gè)小條。 但前提是，要保持一致。一個(gè)很好的網(wǎng)站設(shè)計(jì)實(shí)踐是將內(nèi)頁(yè)的首屏設(shè)計(jì)為主頁(yè)面首屏的縮寫(xiě)版本。

網(wǎng)站首屏包括什么？

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

除此之外，它還代表了網(wǎng)站的質(zhì)量甚至身份。 如果首屏喚起了良好的情感共鳴，觀眾覺(jué)得它有價(jià)值，那時(shí)你的首屏才已經(jīng)滿足了基本的設(shè)計(jì)要求。

網(wǎng)站首屏的主要元素通常是：

● LOGO或品牌標(biāo)識(shí)

● 行動(dòng)呼吁按鈕

● 文字或提要

● 導(dǎo)航元素

● 搜索符

但你不必一下子把它們都加進(jìn)去。 你需要在信息的豐富與其和諧的安排之間找到平衡。 只使用需要的數(shù)據(jù)，無(wú)論所有的鏈接看起來(lái)多么重要，過(guò)度的首屏沒(méi)有益處。

首屏留白太多也不是一個(gè)好辦法。 如果一個(gè)用戶在幾秒鐘內(nèi)無(wú)法弄清楚您的界面，就很可能會(huì)永遠(yuǎn)拋棄你。 一個(gè)糟糕的首屏可以把訪問(wèn)者推到另外內(nèi)容低劣的網(wǎng)站去。

在極簡(jiǎn)首屏的設(shè)計(jì)中，只顯示到網(wǎng)站主要部分和公司標(biāo)志的鏈接。 這種方法在設(shè)計(jì)登陸頁(yè)面時(shí)特別有用。

 最佳首屏設(shè)計(jì)實(shí)踐

在設(shè)計(jì)首屏部分時(shí)，別限制你的創(chuàng)造力。 網(wǎng)站的首屏是一個(gè)開(kāi)放且具有廣泛的創(chuàng)造性設(shè)計(jì)決策的領(lǐng)域，它必須值得紀(jì)念，簡(jiǎn)潔和有所用處。

讓我們列舉一下要點(diǎn)。

首屏的大小

網(wǎng)站首屏圖像應(yīng)該有多大，其實(shí)沒(méi)有明確的答案。 有些人試圖提供一套準(zhǔn)確的數(shù)字來(lái)規(guī)范它，但如今網(wǎng)站建設(shè)最困難的方面之一是確保每個(gè)屏幕大小的有效性。 即使兩個(gè)屏幕大小相同，分辨率也可能不同，因此用戶不會(huì)看到相同的效果。

所以不要專(zhuān)注在精確的像素概念上，遵循簡(jiǎn)單的常識(shí)規(guī)則就好。

首屏的高度最好不要干擾對(duì)內(nèi)容的感知。對(duì)于信息類(lèi)資源，小首屏將是一個(gè)很好的選擇，而對(duì)于類(lèi)似登陸界面，首屏大一點(diǎn)更好。

在大量首屏的情況下，最好在折疊下面留下一些空間，這樣用戶就可以瞥一眼就知道頁(yè)面的下一個(gè)內(nèi)容并開(kāi)始滾動(dòng)。

視覺(jué)層次

尼爾森·諾曼集團(tuán)(Nielsen Norman Group)在2006年首次在F-shaped pattern of reading on the web 提出了他們的理論，這理論在今天仍然得到推崇。

如果訪客在一個(gè)陌生網(wǎng)站，他總是傾向于從屏幕的左上角開(kāi)始掃視。 如果他們?cè)谀抢镎也坏筋A(yù)期的信息，那么頁(yè)面將自動(dòng)被認(rèn)為是棘手且不標(biāo)準(zhǔn)的，他們會(huì)覺(jué)得難以理解而離開(kāi)。

● logo。另一個(gè)由NN/g進(jìn)行的研究表明，與中心或右側(cè)的位置相比，用戶更容易記住那些logo放在左邊的品牌。

但如果是一個(gè)圓形的標(biāo)志，其實(shí)也可以把它放在屏幕的中心，盡管它的效果仍然沒(méi)有放在左邊好。

● 導(dǎo)航。一定注意不要令網(wǎng)站的導(dǎo)航部分過(guò)于雜亂。 太多的鏈接會(huì)壓倒訪客。 有時(shí)，對(duì)網(wǎng)站結(jié)構(gòu)的整體調(diào)整可能是為最重要的類(lèi)別騰出一些空間。

比如使訪客容易了解他們?cè)谀睦?、如何找到更深層的?nèi)容，以及使用懸停效果來(lái)指導(dǎo)用戶等。

● 行動(dòng)按鈕(CTA)。視覺(jué)層次、結(jié)構(gòu)需要遵循“CTA原則”。

固定導(dǎo)航欄

固定導(dǎo)航欄或始終粘在界面上方，無(wú)論你的頁(yè)面是否滾動(dòng)都能看見(jiàn)它。這已經(jīng)成為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)。

在不違反整體設(shè)計(jì)概念的情況下，請(qǐng)固定導(dǎo)航欄。無(wú)論對(duì)桌面還是移動(dòng)設(shè)計(jì)，這都是一個(gè)很好的想法：

• 電子商務(wù)網(wǎng)站-購(gòu)物車(chē)總是在用戶面前。
• 服務(wù)網(wǎng)站-電話號(hào)碼或CTA會(huì)持續(xù)顯示。
• 固定首屏可以提升客戶體驗(yàn)，保持用戶導(dǎo)向，并給予他們更多的控制權(quán)。

由首屏傳遞的信息

在設(shè)計(jì)首屏之前，需要考慮網(wǎng)站的整體風(fēng)格及其主要目的。

如果它是一個(gè)旨在展示產(chǎn)品的促銷(xiāo)網(wǎng)站，首屏的設(shè)計(jì)可能包含到主要區(qū)域的鏈接，結(jié)合高清主圖，因?yàn)檫@樣一個(gè)網(wǎng)站的主要目的是有效地呈現(xiàn)產(chǎn)品。 就電子商務(wù)或商業(yè)網(wǎng)站而言，情況可能有所不同。 用戶需要很容易地導(dǎo)航，了解最新的交易，如何快速聯(lián)系經(jīng)理，以及在哪里看到他們已經(jīng)下好的訂單，因此在這種情況下，為了讓位于其他類(lèi)別，首屏可能更簡(jiǎn)潔：

• 首屏可以傳遞幾個(gè)可能的信息：
• 促進(jìn)消費(fèi)者做某事
• 建立信任
• 鼓勵(lì)訪客了解更多
• 有趣等等
• 取決于特定網(wǎng)站的目標(biāo)

相關(guān)圖像

首屏中的圖片應(yīng)該直接傳達(dá)有關(guān)業(yè)務(wù)的信息。 例如，如果它代表食品配送服務(wù)，那么圖像可能會(huì)描繪一個(gè)整潔的快遞與美觀有吸引力的食物。一般來(lái)說(shuō)，訪客應(yīng)該會(huì)在看過(guò)你的網(wǎng)站后想從你那里買(mǎi)東西。

• 高質(zhì)量的照片。 攝影是網(wǎng)頁(yè)設(shè)計(jì)師的有力工具.. 它可以講述一個(gè)故事，喚起情感，激勵(lì)你的訪客進(jìn)一步滾動(dòng)。 對(duì)于有強(qiáng)烈醒目圖像的站點(diǎn)，請(qǐng)嘗試制作一個(gè)透明的首屏。僅保留主要鏈接能更好地展示圖像。
• 輪播圖。如果你有幾張代表網(wǎng)站業(yè)務(wù)的好照片，直接用吧！ 用戶可以滾動(dòng)瀏覽一組精美的高分辨率圖像。
• 插畫(huà)。網(wǎng)站的首屏圖像必須奠定正確的基調(diào)，并建立個(gè)性化的連接。 當(dāng)然，如果圖像獨(dú)特且容易識(shí)別就更好了。你可以通過(guò)利用插畫(huà)來(lái)實(shí)現(xiàn)它。

視頻或動(dòng)畫(huà)

不要把注意力集中在靜態(tài)圖像上。

添加視頻是最有效的突出網(wǎng)站首屏的方式之一 。如果可能，請(qǐng)嘗試將主題視頻材料添加到首屏中。 許多網(wǎng)站使用它來(lái)吸引觀眾，同時(shí)以盡可能好的方式展示他們的公司或產(chǎn)品。

另一種讓你的設(shè)計(jì)更有吸引力，更生動(dòng)，更加印象深刻的方法是添加動(dòng)畫(huà)。 它可以幫助你制作很酷的網(wǎng)站首屏。如果你正在尋找一個(gè)互動(dòng)的網(wǎng)頁(yè)來(lái)吸引觀眾，動(dòng)畫(huà)是一個(gè)很好的選擇。

精心設(shè)計(jì)的行動(dòng)按鈕

在設(shè)計(jì)網(wǎng)頁(yè)首屏?xí)r，設(shè)計(jì)師在那里添加了一些動(dòng)作元素的調(diào)用，如“注冊(cè)”、“登錄”、“聯(lián)系”等。 為了吸引用戶的注意力，使其知道怎么行動(dòng)，按鈕應(yīng)該包含一個(gè)對(duì)用戶來(lái)說(shuō)可理解的并且在其他內(nèi)容中也很顯眼的描述。

呼吁行動(dòng)放置在一個(gè)具有戰(zhàn)略意義的位置是一個(gè)完美的機(jī)會(huì)，能敦促用戶采取行動(dòng)，從而提高您的轉(zhuǎn)化率。

網(wǎng)站首屏的最佳字體

首先，客戶必須能明確感知各版塊名稱(chēng)及公司提供的信息：聯(lián)系方式，有吸引力的優(yōu)惠等… 因此，您需要選擇清晰、可讀的字體，確保不會(huì)造成閱讀困難，可以一眼就理解。

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

簡(jiǎn)單的首屏設(shè)計(jì)

保持一個(gè)清晰和整潔的首屏，如果內(nèi)容過(guò)多，訪問(wèn)者會(huì)覺(jué)得你在用你的內(nèi)容“綁架”他們。 一個(gè)創(chuàng)造性的網(wǎng)站首屏也可以有一個(gè)非常簡(jiǎn)潔的外觀。

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

這是一種使用得越來(lái)越多的網(wǎng)站設(shè)計(jì)解決方案。漢堡包菜單是三條條紋的小圖標(biāo)，點(diǎn)擊時(shí)顯示完整的菜單。當(dāng)設(shè)計(jì)師需要專(zhuān)注于主屏幕時(shí)，它們就使用這種方法。

從網(wǎng)站可用性的角度來(lái)看，這是一個(gè)很好的選擇。 這樣的菜單來(lái)自移動(dòng)設(shè)計(jì)，用戶已經(jīng)很熟悉了。漢堡包菜單適用于促銷(xiāo)網(wǎng)站，其中主要重點(diǎn)是使用照片或視頻高質(zhì)量地展示產(chǎn)品。 對(duì)于在線商店，這個(gè)選項(xiàng)可能不太合適，因?yàn)閷?duì)于消費(fèi)者來(lái)說(shuō)，有一個(gè)購(gòu)物車(chē)、選定的產(chǎn)品和快速訪問(wèn)的搜索字段是很重要的。

響應(yīng)式的首屏設(shè)計(jì)

首屏不僅應(yīng)正確顯示在網(wǎng)站的桌面端，還應(yīng)正確顯示在移動(dòng)端上。 因此，他必須是可響應(yīng)式的，并能夠很好地適配不同（型號(hào)）的移動(dòng)設(shè)備。

移動(dòng)設(shè)備的普及，使得桌面端的網(wǎng)頁(yè)設(shè)計(jì)看起來(lái)也像是移動(dòng)端的風(fēng)格。 例如，桌面端的主圖和漢堡包菜單的實(shí)現(xiàn)就起源于移動(dòng)設(shè)計(jì)。

最后

首屏對(duì)于網(wǎng)站來(lái)說(shuō)，就像一張獨(dú)特的名片。 因此，在設(shè)計(jì)網(wǎng)站時(shí)，要最大限度地重視首屏。

網(wǎng)站首屏設(shè)計(jì)的最后一個(gè)最佳實(shí)踐：定期修改，以保持的網(wǎng)站和最新的設(shè)計(jì)潮流接軌。

學(xué)習(xí)工具，但不受限于某種工具。

譯文地址：UI中國(guó)

作者：Kate Shokurova

譯者：Mockplus