貝殼找房的響應式網頁布局設計

Sponsor

響應式網頁布局設計已經成為互聯網的主流標準。讓網頁適應從桌面到手機的不同大小、不同分辨率的屏幕，從而為用戶提供更好的體驗。本文以貝殼找房為例，在貝殼找房原有的網頁基礎上，結合目前的設備屏幕趨勢和業務的增長需要，重新設計網格系統，完成響應式網頁布局設計。

目錄

1.設計背景
2.舊版官網存在的問題
3.設計方案論證
4.改進方案/實施細節

1.設計背景

貝殼在2018年完成了從0到1的歷程，但在移動端/web端都有許多的錯漏和細節的不完善。從1到2的過程相對復雜，往往在立項之后會遇到一些項目之外/歷史遺留問題——在修改響應式設計的過程中查看舊版網格系統設定，發現以早期鏈家網為模版的網格系統在設計時還沒有到移動端設備爆發增長的年代（鏈家在2009年開始互聯網化），因此沒有考慮到眾多尺寸的適配方案。改則費時費力，牽一發而動全身，不改則后續設計方案處處受限，所以干脆推翻重新設定網格系統，也以此為契機，改變向二手過度傾斜的設計導向，完善其他業務的用戶體驗。雖然過程非常曲折，但順藤摸瓜發現問題本質的那一瞬間是豁然開朗的，過程中也參考了許多優秀案例和大神分享核心技術，收獲頗豐，過往一些模糊不清的概念隨著論證得到了明確的解答，所以把整個思考和實踐過程整理出來分享給大家。

Web端產品現狀:

2.舊版問題

2.1 目前主流分辨率有哪些

研究舊版問題的第一步是搞清楚目前主流分辨率有哪些，同時檢查相對應的尺寸是否有問題。

綜上所述，舊版網格系統沒有響應式的基本條件，需要重新設置網格系統和頁邊距，否則響應式的方案無法實現

（鏈家在早期發展階段以二手房/租房業務為核心業務，因此從頂層設計到最終執行都傾向二手房交易；而鏈家網在2018年初升級為貝殼找房后，為構建行業大平臺，不再局限于二手房業務，新房、裝修等各項業務都有已經規?；?，但設計層面仍然保持二手房優先的策略，導致檢索其他業務的用戶會得到無該房源的搜索結果，造成不良體驗）

2.2 舊版網格系統有什么問題

嚴格來說，舊版官網沒有網格系統，但為了方便總結問題，以12柵格為衡量基礎

問題如下：

1、以官網主頁為例出現了兩個gutter值（29px/30px）且無法被偶數整除；
2、區塊2的大小為265x205px,也無法被偶數，縮放時會導致0.5px出現；
3、頁邊距（margin)值缺失,縮放時完全貼合網頁邊緣；

tips:為什么要被偶數整除呢？

為兼顧ios和android的常用分辨率，約定俗成以320px為1倍基數，一些情況會如480px遇到1.5倍，4px/8px可以在各個尺寸縮放都得到整數，但奇數（例如5px）則會得到小數點,帶小數點顯然會導致圖像模糊的情況，因此排除所有不能被4或8整除的數字，例如區塊2(265x205px)，槽1（29px），槽2（30px）等等。

2.3 先說結論

新的網格系統采用12柵格的劃分方案，內容區調整至1032px；

行高、間距等都以4px為基數，8px為一個層級，margin為36px，gutter值為24px；

主頁區塊改為328x244px和240x180px；

3.論證過程

4px原則

4px和8px被主流分辨率整除概率最高，因此就在這兩者中選擇。

考慮到順應折疊屏和穿戴設備的發展對設備響應要求更精細，4px顯然更能夠在有限尺寸內提供更多變化，但在web端相對寬裕的設備上，8px在視覺上的變化更明確，可以作為層級的基本參考。

為什么是12柵格而不是24柵格？

決定柵格數量前先確定內容區域整體寬度，主流產品的內容區域值在1000～1200px區間內——Ant design的建議是1136px或1152px,那新版內容區域1032px明顯小于主流的依據是什么呢？

“減少眼動”

得益于TV端的工作經驗，對瀑布流信息能否“一眼看完一行內容”這一點比較敏感，貝殼WEB端產品主頁也是瀑布流格局，經實測舊版內容區域1150px因偏大的間距和內容區，導致區塊間視覺連續性不高，且每瀏覽一行信息都非常艱難，在有14%比重的1366px設備上，內容區和設備邊緣僅剩100px，難以瀏覽內容，更小的1280px則瀏覽更困難，因此減少眼動會很大程度上提升瀏覽效率。

4.確定執行方案

1、符合4px原則
2、整體縮小內容區域——縮小container
3、強化區塊間視覺聯系——縮小gutter

首先內容區大小也遵守4px原則，在此基礎上盡可能往小了去取，確定區間1000px~1100px，具體數值也要參考gutter的值

1032px可以很好地減少產品在1366px設備上的眼動，也能在區塊大小不變的情況下，組合不至于擁擠。

確定Gutter值

16px、24px、32px是相對應用較廣的Gutter值，同時也是4的倍數。

舊版Gutter值29/30px導致瀏覽連續性不佳，因此在不大改區塊尺寸的基礎上，32px排除；

16px導致區塊間太過接近，前后文本間產生視覺粘連的效果；因此最終采用24px。

確定Container值

首先內容區大小也遵守4px原則，在此基礎上盡可能往小了去取，然后出幾組數據進行測試——Container、Column、Gutter、Marign這四個參數都應該都遵循4px原則，所以可以從1000px起開始，以4的倍數為節點測試，實測內容區取1032px可以在1366px基礎上有效減少眼動。

確定柵格數量（Numbers of Column)

確定內容區域1032px、gutter24px，先嘗試24柵格系統，得Gutter值大于Column值，雖然在分辨率較大時沒什么差異，但分辨率縮小至較小尺寸時會造成視覺上的不連貫，Material Design中也建議Gutter值不應大于Colunm值，因此采用12柵格系統。

確定內容區域1032px后，先嘗試24柵格系統，得Gutter值大于Column值，會造成視覺上的不連貫，Material Design中也建議Gutter值不應大于Colunm值，因此采用12柵格系統

確定邊距最小值(Margin)

舊版邊距缺失，沒有參考，而新版邊距也遵循4px原則，邊距一般會比槽要大一個層次，基于24px的gutter值，32px已經能起到區分內容和邊緣的作用。

但考慮到目前市場主流移動端設備越做越大的趨勢，“3.5英寸最佳”的時代已經一去不復返。

iPhone X 已經到達5.8英寸，XR則到達6.1 英寸，基于手指熱區的考慮，以6p的5.5英寸熱區為例Margin取36px可以更接近單手持握時的舒適區，讓用戶在移動端操作上有更好的體驗。同時視覺上不顯突兀。

Tips:拇指操作熱圖最早是由設計師Steven Hoober于2011年的書《Designing Mobile Interface》中使用，其中的綠色部分被他稱為“單手握持時拇指觸摸最舒適的區域”。這些區域的測量是通過1333份觀測分析總結出來的，這些分析數據還表明，49%的用戶習慣于單手握持手機，用拇指操控屏幕，而用另外一只手做其他的事情。

至此網格系統的基本參數已經建立。

確定區塊

區塊的寬度以網格系統的分割方式準，但在確定長寬比的時候有一個論證過程。

理論上，1:1.5（3:2）的長寬比是4px原則下的最佳選擇——視覺舒適；偶數與1.5相乘都為整數，4的倍數與1.5相乘結果都是整數。

但結合業務實際需求來看1:1.5未必是最適合的比例，消費類電商圖片可以自制，而房產類的圖片最核心在于真實，因此除非運營活動，圖片的來源都是公司內部攝影師實地拍攝的房源內部圖片。

所以在遵循4px基礎上和攝影設備的出圖尺寸，盡可能拉高長寬比，更多地展示天花板和地板區域，單反目前主流長寬比有3:2、4:3。同一寬度的情況下，4:3可以展示更多的房源空間，符合展示需求。而為在長度上也符合4px，所以區塊適當調小為504×376、328×244、216×160。

確定斷點（Breaking point)

斷點區間有很多成熟的架構如Bootstrap等，參考成熟架構的區間，而響應的原則之一是Column、Gutter等值都是整數。

根據現有的網格系統的參數，在Bootstrap的斷點基礎上，加入內容區和兩側的邊距=1032px 36px*2=1104px,作為補充。

以下是斷點相應變化動態演示

問題解決

至此，響應式的問題已經得到解決，同時也建立了新的網格系統。

web端產品的視覺也有一些調整，為避免篇幅過長，將在《情感化設計-貝殼找房產品體驗優化》中詳細講解調整設計的由來。

參考資料:
Material Design
Airbnb

作者：zozo94w，站酷主頁：https://www.zcool.com.cn/u/14248314

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。