網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
什么是首屏
首屏的英文是above the fold,fold有折疊之意,above the fold是指在折疊之后能看到的,為什么首屏的英文翻譯會(huì)跟折疊有關(guān)系呢,原因很簡(jiǎn)單,因?yàn)檫@個(gè)概念最早用于出版領(lǐng)域,可以簡(jiǎn)單的理解為“頭版”因?yàn)閳?bào)紙的運(yùn)輸和分發(fā)過(guò)程是折疊起來(lái)的,所以報(bào)紙的折疊后暴露在讀者面前的那一部分內(nèi)容就顯得尤其重要,讀者會(huì)根據(jù)頭版的內(nèi)容決定是否購(gòu)買。
因此處于頭版的內(nèi)容意味著一個(gè),編輯認(rèn)為它們是最重要的,頭版的內(nèi)容也決定了出版物的立場(chǎng)和定位。所以“above the fold”也用來(lái)表示所有優(yōu)先顯示或或優(yōu)先級(jí)最高的內(nèi)容。
“above the fold(頭版)”的概念延伸到互聯(lián)網(wǎng)領(lǐng)域。用來(lái)指代web網(wǎng)頁(yè)中不用滾動(dòng)屏幕看到的信息。與出版業(yè)的“頭版”不同的是互聯(lián)網(wǎng)的首屏區(qū)域是動(dòng)態(tài)的,由于互聯(lián)網(wǎng)用戶復(fù)雜的屏幕分辨率環(huán)境,導(dǎo)致他們看到的首屏內(nèi)容有很大差距。很多店鋪設(shè)計(jì)就是因?yàn)閷?duì)首屏的忽視導(dǎo)致很嚴(yán)重的體驗(yàn)問(wèn)題。
天貓?zhí)詫毜氖灼?/strong>
那么我們店鋪的買家看到的首屏是什么樣的呢?首先看以下天貓和淘寶的買家用戶的屏幕分辨率占比情況:下圖是最近的淘寶網(wǎng)用戶屏幕分辨率占比情況的分布圖。
其中屏幕高度在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è)。
典型問(wèn)題
以下案例均以用戶瀏覽器分辨率占比最高的768像素為例
店鋪類目結(jié)果列表的差異
點(diǎn)擊店鋪?zhàn)髠?cè)類目,首屏內(nèi)容沒(méi)有任何變化,天貓和淘寶的店鋪普遍存在這個(gè)問(wèn)題,如下圖:
這種問(wèn)題導(dǎo)致用戶誤以為自己的點(diǎn)擊沒(méi)有產(chǎn)生預(yù)期的頁(yè)面跳轉(zhuǎn),自己還停留在原始頁(yè)面。多次嘗試都沒(méi)有效果之后,最終跳失是很正常的。
鏈接目標(biāo)頁(yè)面的差異
這是某品牌的某個(gè)歷史版本的首頁(yè),在768高度的屏幕下的截圖。大家觀察一下這兩個(gè)頁(yè)面有什么不同。
圖一
圖二
找到答案了嗎?
正確答案是:
圖一:是T400的新版首頁(yè)。
圖二:是點(diǎn)擊新版首頁(yè)上的美圖(2012夢(mèng)幻水晶之城活動(dòng)banner)進(jìn)入的活動(dòng)頁(yè)面。
當(dāng)然,設(shè)計(jì)師的設(shè)計(jì)稿中這是兩個(gè)不一樣的頁(yè)面,只有頁(yè)頭的幾百像素是相同的,關(guān)鍵是用戶在沒(méi)有滾動(dòng)屏幕的情況下,沒(méi)有看到下面的變化會(huì)誤以為自己的點(diǎn)擊無(wú)效,重復(fù)嘗試幾次后,最終跳失。同時(shí)成就了這個(gè)banner的點(diǎn)擊率。
首屏完整性
店鋪信息在用戶的顯示設(shè)備上顯示不完整。此問(wèn)題通常出現(xiàn)在店鋪首頁(yè)的營(yíng)銷信息,推廣banner上,看下面幾個(gè)案例:
首屏浮層遮蓋
屏幕寬度1024的用戶似乎已經(jīng)在20%以下了,如果你認(rèn)為可以忽略這一部分用戶,可以不用關(guān)心下面的內(nèi)容。天貓的店鋪相關(guān)頁(yè)面的默認(rèn)寬度為990,但是店鋪裝修系統(tǒng)開放了樣式自定義的功能,因此很多用戶,開始在店鋪?lái)?yè)面的設(shè)計(jì)中使用,“掛耳朵”的方式(如下圖)
1024的屏幕寬度,去除瀏覽器邊框的寬度,可見區(qū)域1003,1003-990=13也就意味著,店鋪?lái)?yè)面兩側(cè)各有6像素的可用寬度。
結(jié)果“掛耳朵”變成了“貼膏藥”,影響用戶瀏覽店鋪主體內(nèi)容。
用戶會(huì)滾動(dòng)屏幕?
有些設(shè)計(jì)師可能會(huì)認(rèn)為,首屏并沒(méi)有那么重要,用戶是會(huì)滾動(dòng)屏幕最終看到我們期望他們看到的內(nèi)容。如果你有這樣樂(lè)觀的想法,建議你看一下這份尼爾森的研究報(bào)告:(雅各布•尼爾森(Jakob Nielsen),著名網(wǎng)頁(yè)易用性專家。被譽(yù)為可用性測(cè)試鼻祖。Jakob Nielson是尼爾森—諾曼集團(tuán)的主要負(fù)責(zé)人之一,他被《美國(guó)新聞與世界報(bào)道》雜志譽(yù)為“Web可用性方面的世界頂尖專家”。他的Alertbox專欄從1995年就開始在互聯(lián)網(wǎng)上發(fā)布了(網(wǎng)站地址是:www.uselt.com)。Nielsen博士曾經(jīng)是Sun 公司杰出的工程師。)http://www.useit.com/alertbox/scrolling-attention.html
• Above the fold: 80.3%
• Below the fold: 19.7%
根據(jù)這份報(bào)告得出的結(jié)論,即使是在用戶滾動(dòng)屏幕的前提下,用戶的注意力分部占比任然是相當(dāng)懸殊的:
首屏以上:80.3%
首屏以下:19.7%
最合理的首屏設(shè)計(jì)稿范圍值
寬度:
寬度無(wú)干擾因素影響因此是確定的1003
高度:(此處是指店鋪設(shè)計(jì)稿高度)
屏幕總高度768
任務(wù)欄高度40px(win7=40px winxp=30px)
-商城頁(yè)頭+吊頂=106px
-瀏覽器=160px(IE8包含工具欄;狀態(tài)欄;邊框…等)
-位置工具欄=30px(如搜搜工具欄,百度工具欄,360工具欄等等用戶瀏覽器上安裝的各種插件都會(huì)影響到首屏的高度)
768-40-106-160-30=432
因此得出最終的有效設(shè)計(jì)范圍
1003X432
查看你的天貓店鋪首屏效果
大家可以根據(jù)這個(gè)工具檢測(cè)自己的店鋪設(shè)計(jì)是不是在最合理的范圍
本文地址:http://m.likemindfilms.com/tutorial/di1472.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏