做站的朋友的應(yīng)該都知道頁(yè)面首屏的重要性，因?yàn)檫@是一個(gè)訪客對(duì)你網(wǎng)站的第一眼印象，至關(guān)重要。雖然海天也很贊同首屏的重要性，也在做網(wǎng)站設(shè)計(jì)中會(huì)做一個(gè)漂亮的banner，但還只是簡(jiǎn)單的做，卻沒有想過這個(gè)首屏到底要設(shè)計(jì)多大才最好?？戳讼旅娴膬?nèi)容你就應(yīng)該知道頁(yè)面的首屏應(yīng)該多大了。
什么是首屏
首屏的英文是above the fold，fold有折疊之意，above the fold就是指在折疊之后能看到的，這個(gè)概念最早用于報(bào)紙，可以簡(jiǎn)單的理解為報(bào)紙的“頭版”。因?yàn)閳?bào)紙的運(yùn)輸和分發(fā)過程是折疊起來(lái)的，所以報(bào)紙折疊后展示在讀者面前的那一部分內(nèi)容就顯得尤其重要，讀者會(huì)根據(jù)頭版的內(nèi)容決定是否購(gòu)買。
因此處于頭版的內(nèi)容意味著一個(gè)，編輯認(rèn)為它們是最重要的，頭版的內(nèi)容也決定了立場(chǎng)和定位。“above the fold”的概念延伸到互聯(lián)網(wǎng)領(lǐng)域，則用來(lái)指代web網(wǎng)頁(yè)中第一個(gè)展示在訪客面前不需要滾動(dòng)能夠?yàn)g覽的信息。與報(bào)紙的“頭版”不同的是互聯(lián)網(wǎng)的首屏區(qū)域是動(dòng)態(tài)的，因?yàn)榛ヂ?lián)網(wǎng)用戶復(fù)雜的屏幕分辨率環(huán)境，導(dǎo)致他們看到的首屏內(nèi)容有很大差距。很多網(wǎng)站設(shè)計(jì)就是因?yàn)閷?duì)首屏的忽視導(dǎo)致很嚴(yán)重的體驗(yàn)問題。
屏幕分別率分布圖
其中屏幕高度在768以內(nèi)的用戶有41.57%，18.78%(1024X768)+2.91%(1280X768)+19.88%(1366X768)41.57%，這就是為什么一定要關(guān)注首屏。我們的設(shè)計(jì)師們都用上20寸以上的大屏幕的時(shí)候41%的用戶還在用768的顯示器。
首屏設(shè)計(jì)的要點(diǎn)
展示重點(diǎn)
既然知道了首屏的重要性，那么就要將頁(yè)面，甚至網(wǎng)站的主題通過醒目的方式展示出來(lái)，讓訪客能夠第一眼了解你想表達(dá)的信息。有些站長(zhǎng)可能認(rèn)為首屏并沒有那么重要，因?yàn)橛脩艨梢詽L動(dòng)屏幕最終看到我們期望他們看到的內(nèi)容。如果你有這樣樂觀的想法，建議你看一下尼爾森的研究報(bào)告：(雅各布•尼爾森(Jakob Nielsen)，著名網(wǎng)頁(yè)易用性專家。被譽(yù)為可用性測(cè)試鼻祖。Jakob Nielson是尼爾森—諾曼集團(tuán)的主要負(fù)責(zé)人之一，他被《美國(guó)新聞與世界報(bào)道》雜志譽(yù)為“Web可用性方面的世界頂尖專家”。根據(jù)他的報(bào)告得出的結(jié)論，即使是在用戶滾動(dòng)屏幕的前提下，用戶的注意力分部占比任然是相當(dāng)懸殊的：
• Above the fold 首屏以上: 80.3%
• Below the fold 首屏以下: 19.7%
展示差異
因?yàn)槭灼恋闹匾?，站長(zhǎng)會(huì)用來(lái)展示整個(gè)網(wǎng)站的主題，那么就可能造成網(wǎng)站所有頁(yè)面的首屏都是一樣的，這就可能導(dǎo)致用戶誤以為自己的點(diǎn)擊沒有產(chǎn)生預(yù)期的頁(yè)面跳轉(zhuǎn)，以為自己還停留在原始頁(yè)面。多次嘗試都沒有效果之后，最終跳失是很又可能的。
以下某品牌天貓商城的歷史版本首頁(yè),在768高度的屏幕下的截圖，大家觀察一下這兩個(gè)頁(yè)面有什么不同。
圖一
圖二
當(dāng)然，這兩個(gè)頁(yè)面是不一樣的，只有首屏的幾百像素是相同的，但是用戶在沒有滾動(dòng)屏幕的情況下，沒有看到下面的變化會(huì)誤以為自己的點(diǎn)擊無(wú)效，重復(fù)嘗試幾次后，最終跳失。同時(shí)在成這個(gè)banner的點(diǎn)擊率異常的高。
圖一
圖二展示完整
有的時(shí)候站長(zhǎng)在設(shè)計(jì)banner的時(shí)候，沒有經(jīng)過數(shù)據(jù)分析，只是單純的為了將信息展示給訪客，可能造成banner的圖片異常的大，以致于在沒有滾動(dòng)的情況下，不能完整的將banner圖片展示出來(lái)。
亦或者被網(wǎng)站的“對(duì)聯(lián)”廣告將首屏的重要信息給遮擋住，影響訪客瀏覽網(wǎng)站的主題內(nèi)容。
首屏不完整案例
首屏被遮擋案例
首屏應(yīng)該多大
通過上面的幾個(gè)要點(diǎn)可以發(fā)現(xiàn)，首屏的大小對(duì)于訪客能否在不損失用戶體驗(yàn)的前提下，瀏覽我們推送的信息，是非常重要的。那么為了符合“大多數(shù)”PC顯示器的瀏覽體驗(yàn)，首屏的大小可以這樣設(shè)計(jì)：
首屏寬度
以能夠完整顯示并占比最多寬度1024px為主，首屏的寬度去除瀏覽器邊框的寬度，應(yīng)該為1003px。
首屏高度
屏幕總高度768
任務(wù)欄高度40px(win7=40px winxp=30px)
瀏覽器=160px(IE8包含工具欄;狀態(tài)欄;邊框…等)
位置工具欄=30px(如搜搜工具欄，百度工具欄，360工具欄等等用戶瀏覽器上安裝的各種插件都會(huì)影響到首屏的高度)
首屏的高度為：768-40-160-30=538px
因此首屏的最佳大小應(yīng)該為1003px * 538px，這個(gè)至關(guān)重要的大小內(nèi)，就要包含你的網(wǎng)站頭部以及你想要展示給訪客的重要信息了。
友博云 招考云 智慧新聯(lián)會(huì)