網(wǎng)頁首屏設(shè)計(jì)分辨率分析
每個(gè)從事互聯(lián)網(wǎng)行業(yè)網(wǎng)站設(shè)計(jì)的人，對于網(wǎng)頁分辨率大小和首屏尺寸的確定都不陌生，因?yàn)閹缀趺刻煳覀兌荚诟W(wǎng)頁打交道。下面是小編為大家整理的網(wǎng)頁首屏設(shè)計(jì)分辨率分析，歡迎參考~
首屏定義來源——出版領(lǐng)域的“頭版”
首屏的英文是above the fold，fold有折疊之意，above the fold是指在折疊之后能看到的內(nèi)容。為什么首屏的英文翻譯會(huì)跟折疊有關(guān)系呢？原因很簡單，這個(gè)概念最早用于出版領(lǐng)域，可以簡單的理解為“頭版”。因?yàn)閳?bào)紙的運(yùn)輸和分發(fā)過程是折疊起來的，所以報(bào)紙的折疊后暴露在讀者面前的那一部分內(nèi)容就顯得尤其重要，讀者會(huì)根據(jù)頭版的內(nèi)容決定是否購買。因此處于頭版的內(nèi)容意味著編輯認(rèn)為它們是最重要的，頭版的內(nèi)容也決定了出版物的立場和定位。所以“above the fold”也用來表示所有優(yōu)先顯示或或優(yōu)先級最高的內(nèi)容。
首屏衍生到互聯(lián)網(wǎng)
“above the fold(頭版)”的概念延伸到互聯(lián)網(wǎng)領(lǐng)域。用來指代web網(wǎng)頁中不用滾動(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)閷κ灼恋暮鲆晫?dǎo)致很嚴(yán)重的體驗(yàn)問題。
比較典型的首屏體驗(yàn)問題
設(shè)計(jì)師應(yīng)該認(rèn)真思考下自己做過的一些網(wǎng)頁首屏設(shè)計(jì)分辨率是多大的？為什么要定成這么大？有什么理由或是數(shù)據(jù)可以支撐自己的設(shè)計(jì)嗎？帶著這樣的疑問，我們來看一下一些典型的首屏體驗(yàn)問題（在1024*768的分辨率下查看的頁面效果）。
問題1：出現(xiàn)橫向滾動(dòng)條
由于網(wǎng)頁在設(shè)計(jì)時(shí)沒有充分考慮到寬度的適配問題，導(dǎo)致了在分辨率比較低的時(shí)候，適配沒有做好，所以寬度方向的內(nèi)容放不下出現(xiàn)了橫向滾動(dòng)條，影響了用戶體驗(yàn)。
問題2：首屏的完整性
banner的內(nèi)容呈現(xiàn)不完整，傳達(dá)出來無效的信息。如下如的banner產(chǎn)品信息不完整，也沒有呈現(xiàn)出主題的信息，相當(dāng)于是浪費(fèi)了首屏這么重要的位置。
問題3：切換標(biāo)簽無變化
由于首屏呈現(xiàn)的內(nèi)容很少，然后標(biāo)簽切換的時(shí)候，變化區(qū)域在首屏一下，用戶是看不見的。導(dǎo)致了用戶會(huì)以為切換后沒有反應(yīng)，影響用戶的體驗(yàn)最終導(dǎo)致流失。（PS：一種可能的解決方法，用戶切換后，網(wǎng)頁可以稍微向下滑動(dòng)20%的距離，讓用戶感覺到操作有變化和反饋）
問題4：鏈接跳轉(zhuǎn)頁面無變化
首頁的大banner在點(diǎn)擊后進(jìn)入對應(yīng)的推廣頁面，但是點(diǎn)擊過后只是將菜單收起來，其他的內(nèi)容大小顏色狀態(tài)什么的都沒有發(fā)生變化。引發(fā)用戶的疑問，疑問沒反應(yīng)。實(shí)際上在首屏以下的內(nèi)容是不一樣的。只是同樣的首屏Banner誤導(dǎo)了用戶。
尼爾森首屏原則
看了上面這些首屏設(shè)計(jì)不當(dāng)可能會(huì)引起的問題，有些設(shè)計(jì)師可能會(huì)認(rèn)為，首屏并沒有那么重要，用戶是會(huì)滾動(dòng)屏幕最終看到我們期望他們看到的內(nèi)容。如果你有這樣樂觀的想法，建議你看一下這份尼爾森的研究報(bào)告：(雅各布尼爾森(Jakob Nielsen)，著名網(wǎng)頁易用性專家。被譽(yù)為可用性測試鼻祖。Jakob Nielson是尼爾森—諾曼集團(tuán)的主要負(fù)責(zé)人之一，他被《美國新聞與世界報(bào)道》雜志譽(yù)為“Web可用性方面的世界頂尖專家”。他在
根據(jù)這份報(bào)告得出的結(jié)論，即使是在用戶滾動(dòng)屏幕的前提下，用戶的注意力分部占比任然是相當(dāng)懸殊的：用戶會(huì)花80%的注意力在首屏以上的內(nèi)容，即使用戶會(huì)滑動(dòng)屏幕，但也只會(huì)花20的注意力在首屏以下的內(nèi)容。
通過上面分析出來可能出現(xiàn)的問題和列舉的一些經(jīng)過實(shí)踐研究的原則，我們了解到首屏設(shè)計(jì)的重要性。那么要從哪些方面來考慮首屏的設(shè)計(jì)才能避免了這些問題，讓我們的網(wǎng)頁在統(tǒng)一各端風(fēng)格的同時(shí)保證用戶體驗(yàn)？是不是可以從以下方面考慮（因?yàn)槲覀兪褂镁W(wǎng)頁必須通過終端，再通過瀏覽器來查看，所以可以從這兩方面來考慮問題）
根據(jù)百度統(tǒng)計(jì)的數(shù)據(jù)，收集了所負(fù)責(zé)產(chǎn)品的真實(shí)用戶終端訪問數(shù)據(jù)（占據(jù)超過90%的分辨率），然后進(jìn)行分析。首先說明一個(gè)問題，可能有些人會(huì)懷疑百度統(tǒng)計(jì)數(shù)據(jù)的真實(shí)性，所以這些數(shù)據(jù)我們僅僅作為參考，這些數(shù)據(jù)可能會(huì)有點(diǎn)差異，但是靠前的也能說明問題。每個(gè)公司都應(yīng)該具備這樣的大數(shù)據(jù)部門來分析這些數(shù)據(jù)，這樣就更有說服力。縱觀靠前這些分辨率的最小寬度是1024*768，并且這個(gè)分辨率也占據(jù)了第四的位置，屬于比較重要的我們必須兼顧考慮的范圍。同時(shí)在高度分辨率上選擇768也能滿足90%以上的終端分辨率。所以最終選擇1024*768的分辨率來進(jìn)行設(shè)計(jì)適配是比較合理的。當(dāng)然有些產(chǎn)品根據(jù)數(shù)據(jù)結(jié)果顯示1024*768的分辨率占比很小，那他們設(shè)計(jì)師可能就可以忽略不計(jì)，并選擇其他兼顧90%以上的分辨率來進(jìn)行考慮。
考慮了終端的問題后，再來看看瀏覽器的問題。同樣也是根據(jù)百度統(tǒng)一的數(shù)據(jù)列舉了占比比較多的瀏覽器。分析這些可以獲得的信息就是，充分了解到各瀏覽器的參數(shù)，方便后續(xù)確定首屏的寬度和高度。有了以上的終端分辨率和瀏覽器數(shù)據(jù)后，可以選取有代表性的數(shù)據(jù)作為依據(jù)推理首屏合理設(shè)計(jì)尺寸范圍。
寬度：1024-15*2=994
高度：768-160-40-120-30=418
根據(jù)實(shí)際的情況來進(jìn)行計(jì)算，減掉對應(yīng)的參數(shù)得到合理的范圍。這樣的思維方式可以應(yīng)用到一切網(wǎng)頁的設(shè)計(jì)，因?yàn)橹灰蔷W(wǎng)頁設(shè)計(jì)就必須考慮這樣的問題。
可能會(huì)有設(shè)計(jì)師認(rèn)為994*418的分辨率在高分辨率的情況下有點(diǎn)浪費(fèi)空間，那么我們可以從另一種方式來考慮。那就是根據(jù)實(shí)際的數(shù)據(jù)分成兩種以上的分辨率來進(jìn)行設(shè)計(jì)適配，保證高分辨率和低分辨率用戶的體驗(yàn)達(dá)到很好的統(tǒng)一。下圖知識(shí)打個(gè)比方，列舉兩個(gè)分辨率進(jìn)行適配。
總的來說，994*418的有效設(shè)計(jì)范圍可以用來檢測目前的網(wǎng)頁設(shè)計(jì)是否合理。本篇文章只是提供了這樣的一種思路，如果對于百度統(tǒng)計(jì)數(shù)據(jù)有疑問的，可以從所負(fù)責(zé)的產(chǎn)品本身分析出更準(zhǔn)確的數(shù)據(jù)然后進(jìn)行替換分析，得出最后的結(jié)果。
舉個(gè)栗子，京東商城就是在寬度大于1024以上的終端顯示器上采用一種分辨率，然后在小于1024分辨率上做了微調(diào)進(jìn)行設(shè)配。在保證整體結(jié)構(gòu)統(tǒng)一的前提下，優(yōu)化不同終端頁面的體驗(yàn)。
總的來說，以網(wǎng)頁首屏分辨率設(shè)計(jì)分析的例子提供一種思路，來使設(shè)計(jì)師的設(shè)計(jì)都有理可依。同樣的可以延伸到手機(jī)端WAP，應(yīng)用、游戲的分辨率適配。與此同時(shí)，提供的一些思維方式就是在平時(shí)的設(shè)計(jì)中，設(shè)計(jì)師要多問為什么！不斷的思考質(zhì)疑自己的方案，幫忙尋找到更好的支撐。為什么設(shè)計(jì)成這個(gè)大小？圖標(biāo)樣式為什么要設(shè)計(jì)成這樣？在不斷發(fā)問的同時(shí)，設(shè)計(jì)師慢慢的可以找到些依據(jù)作為支撐。
在這個(gè)過程中，有幾個(gè)明顯的好處就是設(shè)計(jì)師會(huì)強(qiáng)迫自己學(xué)習(xí)更多的知識(shí)，讓自己的設(shè)計(jì)有理可依后，在向產(chǎn)品經(jīng)理賣稿的時(shí)候，可以更有說服力，成功率自然也會(huì)更高。在尋找依據(jù)的時(shí)候可以從以下幾個(gè)方面考慮：首先最有說服力的肯定就是后臺(tái)用戶實(shí)際的使用數(shù)據(jù)結(jié)果分析，抽取對自己方案設(shè)計(jì)有用的部分；其次，可以從一些設(shè)計(jì)定律原則方面入手，因?yàn)檫@些定律法則都是經(jīng)過很長時(shí)間的實(shí)踐得出的確實(shí)可行的方法，也可以有很高的說服力；如果條件允許的話，也可進(jìn)行用戶調(diào)研或是測試等得出一些結(jié)果做支撐，等等。如果能從這幾個(gè)方面考慮，都能大大提高自己的分析能力和方案的可信度。
【網(wǎng)頁首屏設(shè)計(jì)分辨率分析】相關(guān)文章：
網(wǎng)頁設(shè)計(jì)之網(wǎng)頁首屏高度確定技巧03-16
網(wǎng)頁設(shè)計(jì)添加吸引眼球的首屏頁面的方法01-13
網(wǎng)頁首屏設(shè)計(jì)圖文混排的十大技巧03-14
網(wǎng)頁設(shè)計(jì)要點(diǎn)分析11-19
網(wǎng)頁設(shè)計(jì)網(wǎng)頁制作的流程分析07-29
關(guān)于網(wǎng)頁設(shè)計(jì)布局的分析02-04