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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

可以把第一個屏幕想象成一本書封面，而不是小說的第一頁。

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

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

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

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

行動可包括：

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

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

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

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

品牌或公司名稱可以產(chǎn)生強烈的相關(guān)性和可信度。這使得網(wǎng)站看起來更“真實”（這對于包含任何類型的財務(wù)或個人交易的網(wǎng)站尤其重要，因為用戶關(guān)心誰專門獲取他們的信息）。

一些知名品牌可以擺脫上述限制，因為很多人可能已經(jīng)知道它們。對于較小的品牌，我認(rèn)為有必要清楚地表明徽標(biāo)和樣式對于用戶關(guān)聯(lián)和信任的網(wǎng)站身份非常重要。

7.減少分心

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

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

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

總結(jié)

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

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