現(xiàn)在是我們討論網(wǎng)頁(yè)設(shè)計(jì)中第一個(gè)屏幕頁(yè)面的一些設(shè)計(jì)思路的時(shí)候了。第一個(gè)屏幕頁(yè)面是用戶第一次觸摸你的網(wǎng)站聯(lián)系人的“第一個(gè)視覺(jué)”，可以說(shuō)是你整體的網(wǎng)站設(shè)計(jì)門(mén)面項(xiàng)目。無(wú)論您的用戶是從桌面設(shè)備，平板電腦還是移動(dòng)設(shè)備訪問(wèn)您的網(wǎng)站，所有內(nèi)容都將集中反映在此頁(yè)面上。

因此，您在“第一個(gè)屏幕”中包含的信息是網(wǎng)站設(shè)計(jì)成功的關(guān)鍵。該設(shè)計(jì)與您的網(wǎng)頁(yè)設(shè)計(jì)相關(guān)，是為了吸引用戶留下并做出您期望的動(dòng)作，或強(qiáng)迫他們離開(kāi)您的網(wǎng)站。在用戶開(kāi)始滾動(dòng)之前，我需要在屏幕上顯示什么？讓我們來(lái)看看。

1.創(chuàng)建一個(gè)獨(dú)特的首屏

所有網(wǎng)站都以第一印象開(kāi)始。因此，您需要?jiǎng)?chuàng)建一個(gè)有影響力的網(wǎng)站，乍看之下會(huì)吸引用戶。

首先，您可以嘗試最大化您的視覺(jué)體驗(yàn)。——使用大型高清照片，視頻或插圖，您可以有效地吸引觀眾。您選擇的圖像應(yīng)該是人們不想停止觀看的內(nèi)容。它應(yīng)該有自己獨(dú)特的元素，以區(qū)別于任何其他網(wǎng)站設(shè)計(jì)。

您可以將圖像與幾個(gè)關(guān)鍵字組合在一起，告訴用戶他們來(lái)這里的內(nèi)容以及網(wǎng)站可以提供的內(nèi)容。

這是將它們放在一起時(shí)應(yīng)該考慮的事項(xiàng)：第一個(gè)屏幕的大小必須恰好適合所有終端設(shè)備的第一個(gè)屏幕。因此，您需要響應(yīng)地縮放內(nèi)容，以便整個(gè)圖像和所有相關(guān)內(nèi)容文本在第一個(gè)屏幕上保持可見(jiàn)而不滾動(dòng)。

2.導(dǎo)航應(yīng)直觀

在側(cè)邊欄或屏幕頂部放置導(dǎo)航的日子已經(jīng)一去不復(fù)返了。隱藏和彈出式導(dǎo)航樣式已成為當(dāng)前的趨勢(shì)，并且已被用戶認(rèn)可和接受（部分歸因于移動(dòng)設(shè)備），所有網(wǎng)站設(shè)計(jì)都可以接受這種風(fēng)格。

但是不要完全隱藏導(dǎo)航或使其難以使用。無(wú)論您是否喜歡漢堡式導(dǎo)航，您都不能否認(rèn)這種導(dǎo)航風(fēng)格已成為隱藏導(dǎo)航中最重要的角色。用戶已經(jīng)學(xué)會(huì)使用它，并且可以輕松地在頁(yè)面上找到他們想要的內(nèi)容。

您需要確保將導(dǎo)航縮回圖標(biāo)放置在用戶可以輕松找到的位置，您可以使其大于典型圖標(biāo)以增強(qiáng)其存在（當(dāng)然，不要過(guò)度使用）并確保導(dǎo)航是完全可用。在上面的Uve網(wǎng)頁(yè)設(shè)計(jì)中，它做了很好的演示。一個(gè)突出的漢堡包菜單圖標(biāo)，可以擴(kuò)展到全屏菜單選項(xiàng)列表。最重要的是，用戶不必猜測(cè)如何使用它。

3.創(chuàng)建一個(gè)關(guān)聯(lián)點(diǎn)

當(dāng)您考慮如何在Web設(shè)計(jì)工作中設(shè)計(jì)頁(yè)面時(shí)，例如第一個(gè)屏幕，最重要的是創(chuàng)建單個(gè)焦點(diǎn)或有用的消息。用戶有意或無(wú)意地訪問(wèn)了您的網(wǎng)站，他們需要的第一件事就是確切知道這個(gè)網(wǎng)站的作用。

單一的視覺(jué)概念可以幫助用戶關(guān)聯(lián)（或關(guān)聯(lián)）您是誰(shuí)以及您的董事會(huì)正在做什么。這可以通過(guò)許多不同的圖像或文本方式來(lái)完成。

雖然復(fù)雜的設(shè)計(jì)風(fēng)格可以達(dá)到這種效果，但為什么不開(kāi)始考慮簡(jiǎn)單的方法。極簡(jiǎn)主義既時(shí)尚又是傳達(dá)信息的有效方式。

4.有目的的使用文本元素

可以把第一個(gè)屏幕想象成一本書(shū)封面，而不是小說(shuō)的第一頁(yè)。

它應(yīng)該包含足夠的文本信息，以幫助用戶參與。一個(gè)簡(jiǎn)單的標(biāo)題和一小塊文本通常足以做到這一點(diǎn)。雖然這種內(nèi)容很少見(jiàn)，但它可能是一個(gè)需要大量工作的過(guò)程。寫(xiě)作需要簡(jiǎn)潔，挑選一組清晰的文本內(nèi)容可能具有挑戰(zhàn)性。

以你的網(wǎng)站為目標(biāo)。為什么用戶在這里？你想讓他們做什么？使用文本創(chuàng)建此關(guān)聯(lián)并開(kāi)始講述您的故事。請(qǐng)記住向用戶展示您的網(wǎng)站優(yōu)于其他類(lèi)似網(wǎng)站的優(yōu)勢(shì)或好處。

5.給用戶一些要做的事情

雖然網(wǎng)站設(shè)計(jì)提供了獨(dú)特的視覺(jué)體驗(yàn)，但它還需要為用戶提供盡可能長(zhǎng)時(shí)間保留和瀏覽網(wǎng)站信息的原因。因此，當(dāng)您考慮第一個(gè)屏幕上網(wǎng)站設(shè)計(jì)應(yīng)包含哪些元素時(shí)，請(qǐng)記住讓用戶參與。

行動(dòng)可包括：

您的第一個(gè)屏幕不僅需要包含其中一個(gè)屏幕，而且您應(yīng)該完全了解您的操作以及用戶應(yīng)該執(zhí)行的操作。您的網(wǎng)頁(yè)設(shè)計(jì)并沒(méi)有讓他們感到被迫這樣做。

在上面的Big Short電影的網(wǎng)站中，向用戶提供了大量信息。視頻剪輯足以讓您對(duì)電影感興趣，并有一個(gè)按鈕來(lái)觀看預(yù)告片。你對(duì)這個(gè)真實(shí)的故事感興趣嗎？同時(shí)，頁(yè)面上有一個(gè)按鈕可以與專(zhuān)家見(jiàn)面。你見(jiàn)過(guò)它并想分享你的想法嗎？這有一個(gè)社交媒體按鈕，可以幫助您立即執(zhí)行此操作。有很多方法可以從一開(kāi)始就與網(wǎng)站進(jìn)行交互。

6.為品牌創(chuàng)造空間

如果您不知道您的網(wǎng)站設(shè)計(jì)是針對(duì)該類(lèi)型的用戶，則此網(wǎng)站可能不如您預(yù)期的那樣有效?；谶@種考慮，您的第一個(gè)屏幕應(yīng)至少包含一個(gè)徽標(biāo)，或者與您的網(wǎng)站后面的品牌形象相關(guān)聯(lián)。

品牌或公司名稱(chēng)可以產(chǎn)生強(qiáng)烈的相關(guān)性和可信度。這使得網(wǎng)站看起來(lái)更“真實(shí)”（這對(duì)于包含任何類(lèi)型的財(cái)務(wù)或個(gè)人交易的網(wǎng)站尤其重要，因?yàn)橛脩絷P(guān)心誰(shuí)專(zhuān)門(mén)獲取他們的信息）。

一些知名品牌可以擺脫上述限制，因?yàn)楹芏嗳丝赡芤呀?jīng)知道它們。對(duì)于較小的品牌，我認(rèn)為有必要清楚地表明徽標(biāo)和樣式對(duì)于用戶關(guān)聯(lián)和信任的網(wǎng)站身份非常重要。

7.減少分心

在第一個(gè)屏幕的網(wǎng)頁(yè)設(shè)計(jì)中，不要讓用戶看太多或要處理太多內(nèi)容。它應(yīng)該簡(jiǎn)單，簡(jiǎn)化和集中。

如果您有很多內(nèi)容，請(qǐng)?jiān)诙鄠€(gè)屏幕上逐步組織（這可以促進(jìn)用戶參與并防止在網(wǎng)站結(jié)構(gòu)中出現(xiàn)混淆或混淆）。

Melanie DaVeid做了一次精彩的演示，通過(guò)簡(jiǎn)單的視覺(jué)演示讓您對(duì)其他作品感興趣。通過(guò)動(dòng)畫(huà)，顏色和特殊文本組合，用戶在第一個(gè)屏幕上創(chuàng)建了獨(dú)特的感覺(jué)。

總結(jié)

當(dāng)分屏設(shè)計(jì)回歸時(shí)尚時(shí)，我們?cè)趯?shí)際的網(wǎng)頁(yè)設(shè)計(jì)工作中對(duì)這個(gè)方向的設(shè)計(jì)做了一些改變。最好的網(wǎng)站設(shè)計(jì)使用響應(yīng)式設(shè)計(jì)和滾動(dòng)功能（如視差）為用戶創(chuàng)建基于屏幕的體驗(yàn)。

作為“網(wǎng)關(guān)”的第一個(gè)屏幕可以說(shuō)是最重要的一個(gè)屏幕。確保創(chuàng)建一個(gè)有趣，可讀和不同的外觀，而不是將用戶帶入網(wǎng)站的其他網(wǎng)站視覺(jué)效果。