Less is More，每个像素都很重要
项目背景
为什么发起屏效研究专项？
一直以来，酒店列表页经常收到不同人的各种不定时反馈，比如为什么酒店地理信息有两行，竞品是一行？为什么竞品的列表页看起来比我们舒服？为了回答这些零散抽象的屏效问题，我们花费了很多时间精力，而且看起来我们一直在做的事情好像就是追齐竞品。面对这些情况，我们意识到，我们急需整体化看待和解决列表页屏效问题。
带着这些疑问，设计师配合产品，一起建立了首屏酒店数和转化的关系数据模型。通过对转化折线图模拟函数计算得出，首屏卡片个数在x.x-x.x个左右时，CR与卡片数成正比，每增加0.1个卡片，CR提升0.07pp。首屏卡片数存在转化天花板，卡片再继续增多，CR反而下降。目前转化天花板首屏卡片数对应的uv占比并不高，说明列表页首屏屏效仍存在很大提升空间。
头部模块优化
列表页头部坑位利用虽然有着明确的规划：重要通知、营销banner、身份区、领券区等，疫情期间，为了方便用户出行，列表页增加了疫情的消息通知和酒店疫情接待政策，导致头部模块越叠越多，可露出的酒店卡片越来越少，只有2.3个左右，与天花板值有着很大差距。
模块定位重复：用户身份banner和领券都透传的是平台的优惠福利，所以第一步，我们将用户身份折扣和领券合并，将优惠感知聚焦在这一条banner上。
轮出规则不合理：我们将头部banner轮出规则优化，比如出重要通知时不再展示营销banner，最多只展示两行。
经过这两步优化，页面的信息透传效率和优惠感知都得到了提升。最后又利用视觉手段将营销场景的banner高度进行缩减，进一步提升了屏效。
酒店卡片优化
酒店卡片是一家酒店的门面，但线上存在卡片高高低低的情况，浏览起来不舒适，缺乏韵律感。
在追求高屏效的前提下，要把屏效的体验目标更清晰地传达给产品、开发和各leader，让合作方接受，是设计的最大挑战。
我们在看列表的时候，视线流会随着卡片跳跃流动，流畅的浏览节奏带来的是舒适愉悦的体验。因此我们引入了标准差，来具象化我们对卡片高度差的要求。标准差来自于统计学里的公式，它一般被用来反映一组数据的离散程度。因此标准差越小，这组数据之间的差距就更小，更规律。
就卡片高高低低的情况，我们分场景，全面排查了线上高低线城市的高低星列表页前两屏，做了标准差计算。经排查，酒店列表在一屏内可能出现高度差值近200像素的卡片。因此我们通过降低过高的卡片高度，控制过低卡片高度，来缩小这种极端的卡片差。
一个是“并”，把导致卡片超高的同类信息进行了1行合并，并缩小字号，降低了很近70像素的高度浪费。
一个是“减”，我们仅保留了酒店距搜索地标的距离信息，去掉了非必要的位置信息，优化实验上线后效果显著。针对线上“限时抢购”场景，因为过强的视觉包装，占了很大行高。视觉也在不减少关键信息的前提下，克制了视觉表达。
通过“并”“减”的手段，80%的卡片高度控制在了合理的范围内，将线上原来190像素的卡片高度差减少到37.5像素，并将这个数值作为当前信息量前提下列表页的目标标准差。
与之前的列表对比，优化后的列表页浏览舒适度有了显著提升。
为了准确传达出合适的“呼吸感”，我们定义了卡片留白率公式，即卡片各行留白的宽度乘以对应行高，再把结果相加，除以卡片非图片区域的面积，就得出了这张卡片的留白率数值。
我们拿出各种留白率数值对应的线上卡片，发起了一次线下调研，让用户选出哪几张卡片的留白看起来更舒适，通过二十几位用户的选择反馈，最终明确了最佳的卡片留白率范围：30%至40%。
通过以上的屏效设计优化后，项目取得了显著成果，首屏卡片数露出率增加9.8%。我们趁热打铁，把首屏卡片数作为列表页主指标，标准差、留白率作为体验指标，纳入列表页数据监控系统，进行长期监控，方便随时检测出异常case，及时进行优化。同时还把屏效相关指标作为ab实验的观测指标，在ab实验未显著时帮助判断该功能能否上线；对于新增的资源位，则可对比屏效价值和功能带来的价值，判断这个新功能值不值得上线。
整体屏效项目的成功，我们认为可以给其他设计师借鉴的，就是我们系统化、可复用的屏效分析模式。从开始测算出屏效的具体价值，明确转化天花板的卡片数。到量化体验目标，引入标准差公式和定义了留白率公式，指导设计优化的方向。并把制定的效率目标和体验目标纳入长期监控系统，来保证屏效项目的长期稳定运行。
以上就是less is more，每个像素都很重要的全部内容，希望我的屏效项目经验对大家有所帮助。