屏效最早起源于商業領域，指的是每平面積上產出的營業額，是用來衡量經營情況的重要指標。后面隨著互聯網的發展，就被用在了對界面的價值定義上，來說明屏幕單位時間、單位面積內可以帶來多少商業效益和效率的提升。高屏效指的是單位時間、面積內，信息對用戶的觸達更高效。Less is More，少即是多，看起來與追求屏幕單位面積的信息高效互相矛盾，所以怎么去把握“效率”和“少即是多”的平衡，是作為設計師在屏效相關項目上面臨的挑戰。

更多攜程設計案例：

一、項目背景

為什么發起屏效研究專項？

一直以來，酒店列表頁經常收到不同人的各種不定時反饋，比如為什么酒店地理信息有兩行，競品是一行？為什么競品的列表頁看起來比我們舒服？為了回答這些零散抽象的屏效問題，我們花費了很多時間精力，而且看起來我們一直在做的事情好像就是追齊競品。面對這些情況，我們意識到，我們急需整體化看待和解決列表頁屏效問題。

二、屏效價值和轉化天花板

1. 明確研究對象

列表頁的首屏相當于酒店頻道的門面，決定了用戶的第一印象，所以我們將列表頁首屏作為我們屏效的主要研究對象。那列表頁首屏到底有多重要？屏效真的是越高越好嗎？

2. 明確屏效價值

帶著這些疑問，設計師配合產品，一起建立了首屏酒店數和轉化的關系數據模型。通過對轉化折線圖模擬函數計算得出，首屏卡片個數在 x.x-x.x 個左右時，CR 與卡片數成正比，每增加 0.1 個卡片，CR 提升 0.07pp。首屏卡片數存在轉化天花板，卡片再繼續增多，CR 反而下降。目前轉化天花板首屏卡片數對應的 uv 占比并不高，說明列表頁首屏屏效仍存在很大提升空間。

三、屏效優化

1. 頭部模塊優化

列表頁頭部坑位利用雖然有著明確的規劃：重要通知、營銷 banner、身份區、領券區等，疫情期間，為了方便用戶出行，列表頁增加了疫情的消息通知和酒店疫情接待政策，導致頭部模塊越疊越多，可露出的酒店卡片越來越少，只有 2.3 個左右，與天花板值有著很大差距。

經分析，我們定位了頭部模塊的兩個問題：

1. 模塊定位重復：用戶身份 banner 和領券都透傳的是平臺的優惠福利，所以第一步，我們將用戶身份折扣和領券合并，將優惠感知聚焦在這一條 banner 上。
2. 輪出規則不合理：我們將頭部 banner 輪出規則優化，比如出重要通知時不再展示營銷 banner，最多只展示兩行。

經過這兩步優化，頁面的信息透傳效率和優惠感知都得到了提升。最后又利用視覺手段將營銷場景的 banner 高度進行縮減，進一步提升了屏效。

2. 酒店卡片優化

酒店卡片是一家酒店的門面，但線上存在卡片高高低低的情況，瀏覽起來不舒適，缺乏韻律感。

在追求高屏效的前提下，要把屏效的體驗目標更清晰地傳達給產品、開發和各 leader，讓合作方接受，是設計的最大挑戰。

為了解決這個問題，我們使用了能被普遍理解和接受的方法，量化分析手段，引入統計學里的標準差公式，并且自定義了留白率公式，通過數據化體驗目標，來達到我們追求的列表頁極致的瀏覽舒適度。

標準差

我們在看列表的時候，視線流會隨著卡片跳躍流動，流暢的瀏覽節奏帶來的是舒適愉悅的體驗。因此我們引入了標準差，來具象化我們對卡片高度差的要求。標準差來自于統計學里的公式，它一般被用來反映一組數據的離散程度。因此標準差越小，這組數據之間的差距就更小，更規律。

就卡片高高低低的情況，我們分場景，全面排查了線上高低線城市的高低星列表頁前兩屏，做了標準差計算。經排查，酒店列表在一屏內可能出現高度差值近 200 像素的卡片。因此我們通過降低過高的卡片高度，控制過低卡片高度，來縮小這種極端的卡片差。

我們主要采取兩種方式優化過高的卡片高度：

一個是“并”，把導致卡片超高的同類信息進行了 1 行合并，并縮小字號，降低了很近 70 像素的高度浪費。

一個是“減”，我們僅保留了酒店距搜索地標的距離信息，去掉了非必要的位置信息，優化實驗上線后效果顯著。針對線上“限時搶購”場景，因為過強的視覺包裝，占了很大行高。視覺也在不減少關鍵信息的前提下，克制了視覺表達。

通過“并”“減”的手段，80%的卡片高度控制在了合理的范圍內，將線上原來 190 像素的卡片高度差減少到 37.5 像素，并將這個數值作為當前信息量前提下列表頁的目標標準差。

與之前的列表對比，優化后的列表頁瀏覽舒適度有了顯著提升。

留白率

除了高度差，同時影響卡片瀏覽感受的，還有卡片的留白率，也是設計師口中的：呼吸感。所謂呼吸感就是你看到信息密度正合適，不會過密造成心理壓力，也不會過于單薄，導致頁面一眼看過去空空的。

為了準確傳達出合適的“呼吸感”，我們定義了卡片留白率公式，即卡片各行留白的寬度乘以對應行高，再把結果相加，除以卡片非圖片區域的面積，就得出了這張卡片的留白率數值。

我們拿出各種留白率數值對應的線上卡片，發起了一次線下調研，讓用戶選出哪幾張卡片的留白看起來更舒適，通過二十幾位用戶的選擇反饋，最終明確了最佳的卡片留白率范圍：30%至 40%。

四、建立監控體系

通過以上的屏效設計優化后，項目取得了顯著成果，首屏卡片數露出率增加 9.8%。我們趁熱打鐵，把首屏卡片數作為列表頁主指標，標準差、留白率作為體驗指標，納入列表頁數據監控系統，進行長期監控，方便隨時檢測出異常 case，及時進行優化。同時還把屏效相關指標作為 ab 實驗的觀測指標，在 ab 實驗未顯著時幫助判斷該功能能否上線；對于新增的資源位，則可對比屏效價值和功能帶來的價值，判斷這個新功能值不值得上線。

五、項目經驗

整體屏效項目的成功，我們認為可以給其他設計師借鑒的，就是我們系統化、可復用的屏效分析模式。從開始測算出屏效的具體價值，明確轉化天花板的卡片數。到量化體驗目標，引入標準差公式和定義了留白率公式，指導設計優化的方向。并把制定的效率目標和體驗目標納入長期監控系統，來保證屏效項目的長期穩定運行。

以上就是 less is more，每個像素都很重要的全部內容，希望我的屏效項目經驗對大家有所幫助。

歡迎關注作者微信公眾號：「TripDesign」