網(wǎng)頁(yè)的第一印象至關(guān)重要，它在很大程度上決定用戶是否有興趣瀏覽下去。而這個(gè)第一印象則是由網(wǎng)頁(yè)的首屏部分所決定，它是最直接傳遞出網(wǎng)頁(yè)的功能與印象的媒介。

一個(gè)好的首屏，也能讓你在同質(zhì)化嚴(yán)重的情況下，脫穎而出實(shí)現(xiàn)彎道超車。好的，今天就讓我們一起來(lái)研究一下，網(wǎng)頁(yè)首屏部分的組成、方式以及設(shè)計(jì)手法吧。

說(shuō)到首屏大家肯定第一反應(yīng)是這樣的一個(gè)形式，有小伙伴可能會(huì)說(shuō)，這個(gè)不就是個(gè) Banner 嗎？那也是很多設(shè)計(jì)師的誤區(qū)，網(wǎng)頁(yè)首屏中存在著大量的交互元素在其中。

我們現(xiàn)在來(lái)看第一個(gè)網(wǎng)頁(yè)，這里就包括了五個(gè)互動(dòng)的按鈕在其中，這個(gè)是 Banner 所不具備的功能，接下來(lái)我們快速的瀏覽一下，這個(gè)區(qū)域的主要組成模塊。

這個(gè)網(wǎng)頁(yè)，是一個(gè)簡(jiǎn)單的組合形式，我們可以劃分為全局導(dǎo)航欄和形象部分。

這兩個(gè)網(wǎng)頁(yè)是類似的形式，我們稱之為大尺寸頁(yè)眉，即這整個(gè)區(qū)域都是頁(yè)眉的區(qū)域。

這其中我們又可以細(xì)分為：全局導(dǎo)航欄、全屏圖片和形象文案部分。

我們順著這個(gè)思路繼續(xù)分下去，看到這個(gè)網(wǎng)頁(yè)的首屏部分，包括了全局導(dǎo)航欄、形象文案和社交鏈接。

但具體我們的首屏高度要設(shè)計(jì)多少呢？這里我們可以參考 w3school 網(wǎng)站的數(shù)據(jù)。其他的尺寸我們直接忽略掉，剩下的我們看到 1366×768 像素的尺寸是一個(gè)最常見(jiàn)的尺寸。

這里我建立了一個(gè) 1920X1080 高度的畫板，點(diǎn)擊標(biāo)記區(qū)域的 “視口高度” 將數(shù)值改為 768 像素，即可。

右面的畫板上就出現(xiàn)了一個(gè)虛線標(biāo)記的地方，這個(gè)就是我們的視口高度。

有很多小伙伴問(wèn)我，老師什么是主頁(yè)？什么是著陸頁(yè)？它們是相同類型的東西嗎？答案肯定是否定的。

我們以這個(gè)網(wǎng)頁(yè)為例，它是一個(gè)游戲的專題頁(yè)面，并不是這個(gè)網(wǎng)頁(yè)的主頁(yè)。

而是這個(gè)網(wǎng)頁(yè)的著陸頁(yè)，用戶點(diǎn)擊搜索推廣、信息流或其他形式的廣告打開的第一個(gè)頁(yè)面。著陸頁(yè)可以是網(wǎng)站上的一個(gè)頁(yè)面，也有直接把主頁(yè)當(dāng)作著陸頁(yè)使用的情況。

進(jìn)入的才是這個(gè)網(wǎng)頁(yè)真正的主頁(yè)部分。

如果還不理解，我們可以一本書籍為例。這個(gè)書籍的封面可以理解為首頁(yè)。而它內(nèi)部的每一個(gè)頁(yè)面都可以理解為著陸頁(yè)。每個(gè)頁(yè)面都有自己專門的關(guān)鍵詞，這樣就不需要用戶，每次都是從首頁(yè)進(jìn)入了，方便用戶使用。

著陸頁(yè)可以著重用來(lái)介紹專題活動(dòng)或者產(chǎn)品。

這個(gè)著陸頁(yè)作為整個(gè)這個(gè)網(wǎng)站的介紹專題頁(yè)出現(xiàn)。用戶在搜索時(shí)，可以根據(jù)關(guān)鍵詞直接搜索到這個(gè)網(wǎng)頁(yè)。

這個(gè)著陸頁(yè)也同樣是起著介紹專題的作用。

著陸頁(yè)也常被用介紹產(chǎn)品，這樣我們?cè)谒阉鬟@個(gè)產(chǎn)品的時(shí)候，就可以更快的找到了。

很多情況下，網(wǎng)頁(yè)首屏的形式不斷地被強(qiáng)調(diào)，而首屏的功能性卻總是被忽略。這樣就會(huì)出現(xiàn)影響用戶使用的情況，因?yàn)榫W(wǎng)頁(yè)最重要的作用就是傳遞和收集信息。

所以設(shè)計(jì)師在設(shè)計(jì)一個(gè)網(wǎng)頁(yè)的首屏部分時(shí)，應(yīng)該更多的去考慮這個(gè)網(wǎng)頁(yè)想要的提供的功能是什么，而不是一味的追求形式感。當(dāng)然不同的行業(yè)，所要求的網(wǎng)頁(yè)的功能也是不同的。接下來(lái)的部分我們主要來(lái)探討一下這個(gè)問(wèn)題。

一個(gè)網(wǎng)頁(yè)主要受到三個(gè)因素的影響。行業(yè)、功能和形式。這三個(gè)元素又在互相影響。

首先，行業(yè)決定了功能性。我們用醫(yī)療這個(gè)大行業(yè)下的，醫(yī)院類型、保健類型和醫(yī)學(xué)院類型的網(wǎng)頁(yè)來(lái)說(shuō)明。

首先我們來(lái)看醫(yī)院類型的網(wǎng)頁(yè)，這種特定的行業(yè)類型，要求的網(wǎng)頁(yè)功能就會(huì)比較全面。

首先就是為了方便用戶提供的預(yù)約功能。

在這個(gè)基礎(chǔ)上，網(wǎng)頁(yè)中還會(huì)加入導(dǎo)航功能，這是為了讓用戶更容易去找到這家醫(yī)院。

網(wǎng)頁(yè)設(shè)計(jì)者還會(huì)添加問(wèn)診功能來(lái)方便用戶直接進(jìn)行查詢。

這個(gè)網(wǎng)頁(yè)我們就看得更加詳細(xì)了，同樣是添加了一個(gè)問(wèn)診功能。

我們來(lái)總結(jié)一下，除了最基本的形象功能外，醫(yī)院類型的網(wǎng)頁(yè)還添加了預(yù)約功能、客服功能、導(dǎo)航功能和問(wèn)診功能，其本質(zhì)都是為了可以更好的服務(wù)客戶。

到了保健類型的網(wǎng)頁(yè)時(shí)，這個(gè)功能就會(huì)相應(yīng)的發(fā)生變化，由于是保健的性質(zhì)，更多是從招攬客戶這個(gè)點(diǎn)而出發(fā)的。

所以這類的網(wǎng)頁(yè)，雖然同屬醫(yī)療行業(yè)，卻有了不同的功能，這里更多的是發(fā)揮著這個(gè)網(wǎng)頁(yè)的形象功能，增加信賴感。

這個(gè)網(wǎng)頁(yè)則是直接把服務(wù)流程放在了首屏部分，可以讓用戶最容易地理解整個(gè)服務(wù)流程。

這個(gè)網(wǎng)頁(yè)也是同樣的設(shè)計(jì)邏輯，通過(guò)展示形象來(lái)吸引用戶。

保健行業(yè)的網(wǎng)頁(yè)，幾乎都存在著預(yù)約功能，這樣主要是提供了一個(gè)用戶和商家互動(dòng)的渠道，也是契合這類型行業(yè)的實(shí)際需求。

最后我們來(lái)看一下，醫(yī)療學(xué)校類型的網(wǎng)頁(yè)。

因?yàn)槭菍儆诮逃袠I(yè)，所以更多是一個(gè)形象功能的展示。

這個(gè)網(wǎng)頁(yè)是一個(gè)護(hù)士的招聘網(wǎng)站，他就用過(guò)輪播視頻的方式，讓用戶能最直觀地感受到護(hù)士這個(gè)職業(yè)的內(nèi)容和價(jià)值。

教育行業(yè)的網(wǎng)頁(yè)，則更多的是一個(gè)形象功能，向客戶傳遞自己的價(jià)值觀。

前面說(shuō)了行業(yè)決定功能，以此類推，功能確定著形式，我們主要以旅行行業(yè)的網(wǎng)頁(yè)進(jìn)行說(shuō)明。

這個(gè)網(wǎng)頁(yè)主要是向用戶展示環(huán)境以及服務(wù)，也就是我們前面說(shuō)的形象功能，所以在設(shè)計(jì)的時(shí)候直接做了一個(gè)全屏的形式，最好地向用戶展示自己的信息。

這個(gè)網(wǎng)頁(yè)也是同樣的功能，展示自己的形象，將自己的景色展示出來(lái)，這樣可以讓用戶最直觀的看到。

這里則是在展示形象功能的基礎(chǔ)上，添加了一個(gè)預(yù)定的功能，網(wǎng)頁(yè)的形式也發(fā)生了一定的改變。

這里還可以將預(yù)定功能的形式放在頁(yè)眉和主欄的交界處，創(chuàng)造一定的層次感。

這是一個(gè)酒店的網(wǎng)頁(yè)，在設(shè)計(jì)的時(shí)候，添加了一個(gè)銷售的功能，這樣在設(shè)計(jì)的時(shí)候網(wǎng)頁(yè)形式也相應(yīng)的進(jìn)行調(diào)整。

而最后到了形式的部分，它并不決定任何事情，而是反過(guò)來(lái)促進(jìn)行業(yè)。

化妝品的行業(yè)對(duì)網(wǎng)頁(yè)的美觀度要求很高，當(dāng)我們?yōu)g覽到這樣的網(wǎng)頁(yè)時(shí)，并不會(huì)增加我們購(gòu)買的欲望，甚至這樣的網(wǎng)頁(yè)起到的是一個(gè)反作用。

而當(dāng)我們就瀏覽到這樣的化妝品的網(wǎng)頁(yè)時(shí)，他是可以提升我們購(gòu)買力的。

我們放在一起對(duì)比一下，是不是孰優(yōu)孰劣就一目了然了。前面我們說(shuō)了，行業(yè)決定著功能，功能決定著形式，形式反過(guò)來(lái)促進(jìn)行業(yè)。所以最終呈現(xiàn)給用戶的網(wǎng)頁(yè)是一個(gè)多方綜合的結(jié)果。

在確定了行業(yè)和功能的前提下，就需要我們多去了解網(wǎng)頁(yè)的設(shè)計(jì)形式有哪些。這里，給大家介紹一下現(xiàn)在時(shí)下流行的設(shè)計(jì)形式——等分屏式。

等分屏式很容易理解，就是將網(wǎng)頁(yè)一分為二，AB 兩個(gè)部分，它們既可以展示相同的信息，也可以展示不同的信息。以這種形式設(shè)計(jì)的網(wǎng)頁(yè)，被稱為雙專欄型的網(wǎng)頁(yè)。

最常見(jiàn)的形式為一半圖片，一半文字。這就類似于我們的畫冊(cè)結(jié)構(gòu)—— 圖字組合。

第二種形式則是，左右都有圖片，它們既可以說(shuō)明同一件事情，也可以截然不同—— 圖圖組合。

第三個(gè)則是大圖小圖的對(duì)比形式，這種形式會(huì)賦予網(wǎng)頁(yè)一定的藝術(shù)感和時(shí)尚感 —— 大小圖組合。

圖字組合的形式，和我們?cè)谟^看畫冊(cè)習(xí)慣基本相同，一半圖片一半文字，可以很好的傳遞出網(wǎng)頁(yè)的信息，方便用戶理解。

這個(gè)婚戒的網(wǎng)頁(yè)，使用這個(gè)形式，更加增添了高級(jí)感。

它們也是可以左右進(jìn)行一個(gè)對(duì)調(diào)的，這個(gè)網(wǎng)頁(yè)同樣是依靠這種形式，傳遞出一種簡(jiǎn)約高級(jí)的感覺(jué)。

這個(gè)網(wǎng)頁(yè)使用的是圖圖組合的形式，左右照片連貫，講述的是一件事情，給用戶一定的聯(lián)想和視覺(jué)沖擊力。

這里左右選擇的是一個(gè)關(guān)聯(lián)性的圖片， 創(chuàng)造了一定的故事性，同時(shí)也傳遞出來(lái)這個(gè)網(wǎng)頁(yè)的產(chǎn)品。

大小圖組合，更加可以凸顯出來(lái)網(wǎng)頁(yè)的時(shí)尚感。

上述的三種組合，并不是永恒一成不變的，就拿圖圖組合來(lái)說(shuō)，我們可以通過(guò)移動(dòng)網(wǎng)頁(yè)的分割線，創(chuàng)造出很多形式?？梢赃x擇縮小圖片的范圍，更多的去展示文字的信息。

也可以選擇放大圖片，這些大家都可以根據(jù)實(shí)際的需求進(jìn)行操作。

大小圖的組合，也可以不局限于規(guī)規(guī)矩矩的排列形式。

我們也可以在規(guī)則內(nèi)，任意移動(dòng)小圖來(lái)創(chuàng)造出新的感覺(jué)出來(lái)。甚至可以將小圖拆分，創(chuàng)造出更加活潑的版面結(jié)構(gòu)出來(lái)。

這個(gè)飾品的網(wǎng)頁(yè)就是利用這種形式，多角度的展示了自己的飾品。

這個(gè)網(wǎng)頁(yè)則是用這種形式，創(chuàng)造出一定的故事性，提高用戶繼續(xù)瀏覽這個(gè)網(wǎng)頁(yè)的興趣。

我們也可以更進(jìn)一步的，把大圖也調(diào)整，重新布局在頁(yè)面中，就可以創(chuàng)造出更多的版面形式了。

使用這個(gè)形式的網(wǎng)頁(yè)，提升這個(gè)網(wǎng)頁(yè)的活潑度和設(shè)計(jì)感。

這樣調(diào)整了圖字組合和大小圖組合，我們就可以得到了 5 種完全不同的形式網(wǎng)頁(yè)了。

通過(guò)上面的思路，我們也可以嘗試去結(jié)合不同的組合，也可以創(chuàng)造出很多新的形式。更多的組合形式就需要小伙伴們自己去嘗試和發(fā)現(xiàn)了。

到這里大家有沒(méi)有一個(gè)感受，就是網(wǎng)頁(yè)設(shè)計(jì)其實(shí)是可以非常靈活的，形式也是多種多樣。

文章來(lái)源：優(yōu)設(shè)  作者：研習(xí)社

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)