行高|B端产品界面高屏效初探

【行高|B端产品界面高屏效初探】编辑导语：在B端设计领域，用户对界面的屏效方面都存在同样的诉求。本篇作者就对这一问题，从用户案例收集、竞品分析和论文查阅入手，进行视觉、交互和信息三层面的实践设计，推荐想了解B端产品界面屏效，如何从倾听用户需求，到发现问题和解决问题过程的童鞋阅读。

文章插图
一、背景在 B 端设计领域中，不管是内部用户、产品、设计师、开发，还是外部产品、设计师等，总能听到关于界面「屏效」方面的诉求或吐槽。

文章插图
「屏效」狭义理解是「界面过度留白」；广义理解，「屏效」源自谐音“坪效”，指的是每坪的面积可以产出多少营业额(营业额/专柜所占总坪数）。而「屏效」对于界面而言可以指屏幕单位时间、单位面积内的信息可以带来多少商业效益/效率提升。
为了探索在 B 端产品中用户为何对「界面过度留白」或「屏效」问题如此敏感，于是我们展开了「屏效」专题的设计探索与实践。「屏效」专题探索主要以「探索」与「实践」相结合的方式展开，将实践过程中反复验证有效的设计策略沉淀成设计手册，同步将部分功能进行工程化，确保可以开箱即用。

文章插图
二、探索阶段-为谁在何时何地设计1. 用户声音｜不同的故事相似的诉求面向内部设计师和终端用户投放的《高屏效诉求》《中后台产品满意度调研》问卷中认为提高屏效能极大提升用户体验的设计师占 58.14%；认为提升屏效对体验有提升的终端用户占 50.6%。

文章插图
外部知乎上针对《Ant Design 4.0 设计价值观》的 13 条反馈里，其中就有 2 点提到关键字「效率」。

文章插图
通过了解不同用户和产品类型发现，不同的用户在工作场景的产品使用中有着相似的特征：

文章插图
2. 案例收集｜发现问题，大胆假设纵观 B 端产品界面，发现普遍问题和收录在解决屏效问题上实践得比较好的案例，为了逐步突破问题，选择以数据产品中覆盖率极高的表格为设计切入点，通过线上跨产品多端地毯式的体验走查，发现表格三个层次的问题：

文章插图
视觉、交互层在无需理解业务场景和用户目标的情况下，都较容易发现，属基础问题，但很多「过度留白」的屏效问题往往是信息被组织方式的差异导致的「过度留白」。
综上我们提出假设：为提高屏效，可从视觉、交互、信息三个层次解决。
视觉层为提高信息查阅速度，可以通过提高信息密度；交互层为提高操作速度，可以缩短当前手势到目标之间的距离；信息层为提高信息被理解的速度，可以通过重组织等方式。
基于假设，我们进行了进一步的桌面研究，查阅论文等书籍，寻找设计理论的验证和指导。
3. 竞品分析｜寻找实践证据，谨慎验证我们知道视觉上界面留白过多（过疏会增加滚屏成本，过密因易串行而影响阅读效率），以表格「行高」为例，探索各表格在字号、字高和行高的关系，因为不同字体的同字号实际像素高度会有差异。
因此选择的是字高（即文字垂直高度的视觉大小）而非字号或字行高，决定留白的两个重要因子是字高和表格行高，以次推演，界面元素和元素间距的留白关系，探究在视觉层怎样的留白率能保证甚至提升屏效。