網頁首屏設計分辨率分析

　　每個從事互聯網行業網站設計的人，對于網頁分辨率大小和首屏尺寸的確定都不陌生，因為幾乎每天我們都在跟網頁打交道。下面是小編為大家整理的網頁首屏設計分辨率分析，歡迎參考~

　　首屏定義來源——出版領域的“頭版”

　　首屏的英文是above the fold，fold有折疊之意，above the fold是指在折疊之后能看到的內容。為什么首屏的英文翻譯會跟折疊有關系呢？原因很簡單，這個概念最早用于出版領域，可以簡單的理解為“頭版”。因為報紙的運輸和分發過程是折疊起來的，所以報紙的折疊后暴露在讀者面前的那一部分內容就顯得尤其重要，讀者會根據頭版的內容決定是否購買。因此處于頭版的內容意味著編輯認為它們是最重要的，頭版的內容也決定了出版物的立場和定位。所以“above the fold”也用來表示所有優先顯示或或優先級最高的內容。

　　首屏衍生到互聯網

　　“above the fold(頭版)”的概念延伸到互聯網領域。用來指代web網頁中不用滾動屏幕看到的信息。與出版業的“頭版”不同的是互聯網的首屏區域是動態的，由于互聯網用戶復雜的屏幕分辨率環境，導致他們看到的首屏內容有很大差距。很多店鋪設計就是因為對首屏的忽視導致很嚴重的體驗問題。

　　比較典型的首屏體驗問題

　　設計師應該認真思考下自己做過的一些網頁首屏設計分辨率是多大的？為什么要定成這么大？有什么理由或是數據可以支撐自己的設計嗎？帶著這樣的疑問，我們來看一下一些典型的首屏體驗問題（在1024*768的分辨率下查看的頁面效果）。

　　問題1：出現橫向滾動條

　　由于網頁在設計時沒有充分考慮到寬度的適配問題，導致了在分辨率比較低的時候，適配沒有做好，所以寬度方向的內容放不下出現了橫向滾動條，影響了用戶體驗。

　　問題2：首屏的完整性

　　banner的內容呈現不完整，傳達出來無效的信息。如下如的banner產品信息不完整，也沒有呈現出主題的信息，相當于是浪費了首屏這么重要的位置。

　　問題3：切換標簽無變化

　　由于首屏呈現的內容很少，然后標簽切換的時候，變化區域在首屏一下，用戶是看不見的。導致了用戶會以為切換后沒有反應，影響用戶的體驗最終導致流失。（PS：一種可能的解決方法，用戶切換后，網頁可以稍微向下滑動20%的距離，讓用戶感覺到操作有變化和反饋）

　　問題4：鏈接跳轉頁面無變化

　　首頁的大banner在點擊后進入對應的推廣頁面，但是點擊過后只是將菜單收起來，其他的內容大小顏色狀態什么的都沒有發生變化。引發用戶的疑問，疑問沒反應。實際上在首屏以下的內容是不一樣的。只是同樣的首屏Banner誤導了用戶。

　　尼爾森首屏原則

　　看了上面這些首屏設計不當可能會引起的問題，有些設計師可能會認為，首屏并沒有那么重要，用戶是會滾動屏幕最終看到我們期望他們看到的內容。如果你有這樣樂觀的想法，建議你看一下這份尼爾森的研究報告：(雅各布尼爾森(Jakob Nielsen)，著名網頁易用性專家。被譽為可用性測試鼻祖。Jakob Nielson是尼爾森—諾曼集團的主要負責人之一，他被《美國新聞與世界報道》雜志譽為“Web可用性方面的世界頂尖專家”。他在

　　根據這份報告得出的結論，即使是在用戶滾動屏幕的前提下，用戶的注意力分部占比任然是相當懸殊的：用戶會花80%的注意力在首屏以上的內容，即使用戶會滑動屏幕，但也只會花20的注意力在首屏以下的內容。

　　通過上面分析出來可能出現的問題和列舉的一些經過實踐研究的原則，我們了解到首屏設計的重要性。那么要從哪些方面來考慮首屏的設計才能避免了這些問題，讓我們的網頁在統一各端風格的同時保證用戶體驗？是不是可以從以下方面考慮（因為我們使用網頁必須通過終端，再通過瀏覽器來查看，所以可以從這兩方面來考慮問題）

　　根據百度統計的數據，收集了所負責產品的真實用戶終端訪問數據（占據超過90%的分辨率），然后進行分析。首先說明一個問題，可能有些人會懷疑百度統計數據的真實性，所以這些數據我們僅僅作為參考，這些數據可能會有點差異，但是靠前的也能說明問題。每個公司都應該具備這樣的大數據部門來分析這些數據，這樣就更有說服力。縱觀靠前這些分辨率的最小寬度是1024*768，并且這個分辨率也占據了第四的位置，屬于比較重要的我們必須兼顧考慮的范圍。同時在高度分辨率上選擇768也能滿足90%以上的終端分辨率。所以最終選擇1024*768的分辨率來進行設計適配是比較合理的。當然有些產品根據數據結果顯示1024*768的分辨率占比很小，那他們設計師可能就可以忽略不計，并選擇其他兼顧90%以上的分辨率來進行考慮。

　　考慮了終端的問題后，再來看看瀏覽器的問題。同樣也是根據百度統一的數據列舉了占比比較多的瀏覽器。分析這些可以獲得的信息就是，充分了解到各瀏覽器的參數，方便后續確定首屏的寬度和高度。有了以上的終端分辨率和瀏覽器數據后，可以選取有代表性的數據作為依據推理首屏合理設計尺寸范圍。

　　寬度：1024-15*2=994

　　高度：768-160-40-120-30=418

　　根據實際的情況來進行計算，減掉對應的參數得到合理的范圍。這樣的思維方式可以應用到一切網頁的設計，因為只要是網頁設計就必須考慮這樣的問題。

　　可能會有設計師認為994*418的分辨率在高分辨率的情況下有點浪費空間，那么我們可以從另一種方式來考慮。那就是根據實際的數據分成兩種以上的分辨率來進行設計適配，保證高分辨率和低分辨率用戶的體驗達到很好的統一。下圖知識打個比方，列舉兩個分辨率進行適配。

　　總的來說，994*418的有效設計范圍可以用來檢測目前的網頁設計是否合理。本篇文章只是提供了這樣的一種思路，如果對于百度統計數據有疑問的，可以從所負責的產品本身分析出更準確的數據然后進行替換分析，得出最后的結果。

　　舉個栗子，京東商城就是在寬度大于1024以上的終端顯示器上采用一種分辨率，然后在小于1024分辨率上做了微調進行設配。在保證整體結構統一的前提下，優化不同終端頁面的體驗。

　　總的來說，以網頁首屏分辨率設計分析的例子提供一種思路，來使設計師的設計都有理可依。同樣的可以延伸到手機端WAP，應用、游戲的分辨率適配。與此同時，提供的一些思維方式就是在平時的設計中，設計師要多問為什么！不斷的思考質疑自己的方案，幫忙尋找到更好的支撐。為什么設計成這個大小？圖標樣式為什么要設計成這樣？在不斷發問的同時，設計師慢慢的可以找到些依據作為支撐。

　　在這個過程中，有幾個明顯的好處就是設計師會強迫自己學習更多的知識，讓自己的設計有理可依后，在向產品經理賣稿的時候，可以更有說服力，成功率自然也會更高。在尋找依據的時候可以從以下幾個方面考慮：首先最有說服力的肯定就是后臺用戶實際的使用數據結果分析，抽取對自己方案設計有用的部分；其次，可以從一些設計定律原則方面入手，因為這些定律法則都是經過很長時間的實踐得出的確實可行的方法，也可以有很高的說服力；如果條件允許的話，也可進行用戶調研或是測試等得出一些結果做支撐，等等。如果能從這幾個方面考慮，都能大大提高自己的分析能力和方案的可信度。

【網頁首屏設計分辨率分析】相關文章：

網頁設計網頁制作的流程分析03-02

關于網頁設計布局的分析03-30

如何打造優秀小屏網頁06-29

網頁設計中橙色系運用案例分析04-22

《說屏》教學設計12-05

網頁設計師是怎么樣分析SEO技巧03-29

網頁設計技巧03-18

網頁設計的布局12-06

網頁設計技巧精選12-02