網頁首屏設計解析度分析
每個從事網際網路行業網站設計的人，對於網頁解析度大小和首屏尺寸的確定都不陌生，因為幾乎每天我們都在跟網頁打交道。由於不同終端解析度的差異，網站的體驗會有所差異。為了保證絕大多數的使用者在不同終端都能有好的使用者體驗，設計師應該充分考慮網頁首屏在各終端的適配問題。本篇文章主要討論的就是網頁首屏設計推理的過程和思維方式。以下僅供參考！
首屏定義來源——出版領域的“頭版”
首屏的英文是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可用性方面的世界頂尖專家”。他在2012年的時候輸出的研究報告很好的論證了首屏的重要性。下面是原文網址
根據這份報告得出的結論，即使是在使用者滾動螢幕的前提下，使用者的注意力分部佔比任然是相當懸殊的：使用者會花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的有效設計範圍可以用來檢測目前的網頁設計是否合理。本篇文章只是提供了這樣的一種思路，如果對於百度統計資料有疑問的，可以從所負責的產品本身分析出更準確的資料然後進行替換分析，得出最後的結果。
【網頁首屏設計解析度分析】相關文章：