设计师对像素能有多考究?来看携程的实战案例!

屏效最早起源于商业领域,指的是每平面积上产出的营业额,是用来衡量经营情况的重要指标。后面随着互联网的发展,就被用在了对界面的价值定义上,来说明屏幕单位时间、单位面积内可以带来多少商业效益和效率的提升。高屏效指的是单位时间、面积内,信息对用户的触达更高效。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」

设计师对像素能有多考究?来看携程的实战案例!

收藏 37
点赞 55

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。