写在前面

今年的“双十一”，朋友圈异常安静，没有了以前电商活动的氛围，没有漂亮的数据，没有晒图，有人说是用户消费疲软了？数据不会骗人，今年”双十一”一天的GMV还是比去年高了将近500亿，而且一大波尾款人在11月1日就已经结束。再加上直播电商，用户购买渠道变多了。李佳琦直播带货一晚就超100亿的GMV，说明用户的消费意愿和消费力还是很强的。算一下，50个李佳琦直播一晚上就能抵上“双十一”一整天的GMV，有点厉害。中国伟大复兴的道路还在继续，随着人民生活水平的提高，文化素养提高，互联网普及，消费力只会增不会减，只是战场在变化。

前些日子发了PP微助手的优化作品，本篇将结合改版思路和最近对互联网设计行业的思考进行一些分享，希望对大家有一定的帮助，欢迎大家来指正吐槽~

点击可以查看   PP微助手改版优化

流量变“留量”

互联网产品最重要的就是流量，没有流量，就算产品设计的再好，早晚也会运营不下去。纵观这些年移动互联网的发展，市场已经被分割的差不多了，各个行业都有龙头企业（社交：微信、购物：京东淘宝、出行：滴滴哈罗、外卖：饿了么美团、旅游：携程等等），各大互联网公司业务也趋于稳定，红利期已经过去，流量市场已经变成了“留量”市场。就像淘宝这种大流量的产品，也在吃流量老本。

回归到设计，在互联网公司做设计，一直在强调需要有产品思维、用户思维，然而在“留量”的时代，更需要我们具有运营思维，同行业的业务趋同、需求趋同，可挖掘的需求少之又少，可以打开同一行业的各类app一看，就知道产品形态大同小异。所以只能在“留量”里下功夫，既要减少存量用户的流失，还要在这基础上让存量用户创造更大的价值。必然，我们在做设计改版的时候就需要结合一些运营知识。

曝光

“曝光”一词相信大家都听过，在拍照时，“曝光”时间越长，照片细节就越丰富，当然过度“曝光”，也会让照片失真。在运营一个互联网产品时，也需要用到“曝光”，这里的“曝光”是指产品内容的“曝光”。

用户在进入某款产品的时候，都是带有一定目的性，通常情况都会经历三步操作，从看见内容，到与产品互动，最后得到想要的结果。

这里的“看见”，就要说到产品承载信息的曝光，合理的信息曝光才能更精准快速的触达用户。同时，运营同学最关心的数据和流量，也是需要安排合理的信息曝光才能有有效的数据和流量。在手机这么一小块屏幕想把所有内容都曝光出来，是不太现实的，就算能，也不合理。把过多的信息一下子全部曝光给用户，效果反而会很差。通常做法就是对页面进行楼层的分割，流量进行合理的分发。大流量的产品，每个楼层都需要单独部门去运营的，这样就会出现业务主次和优先级，不然各部门就会为了争夺"屏幕地盘"，无限撕逼。

作为设计师，就需要和运营部门做好以下确认：

1、楼层怎么分割，哪些楼层是产品部门控制，哪些楼层是运营部门控制，每个楼层显示哪些内容，设计师需要根据每个楼层的重要性，去定义屏占比

2、哪些模块需要首屏曝光，哪些是需要第二屏曝光，依此类推，这个至关重要，设计师就要考虑各类机型适配问题，比如iPhoneX一屏能显示下的内容，在其他手机未必能显出来，这样会直接影响曝光，导致数据不好（等着背锅吧～），严格来讲要根据实际用户使用机型占比去定义首屏显示的内容。

3、每个模块内容的信息层级，明确信息优先级才能结果为导向去做交互布局和视觉呈现，这时候就是你发挥的时候，对比、亲密关系、留白等等，都可以上了。

这里结合PP微助手的一些改版优化（非全套），分享一些改版思路。

PP微助手改版思路解析

项目背景：PP微助手是取代电视遥控器一部分功能开发的一款小程序，核心需求有几点

1、账号统一，PPTV时代的用户，大多都是使用的PPTV的账号，为了方便管理苏宁易购账号体系，会引流把PPTV尚未升级的账户统一升级合并至苏宁易购账号。

2、投屏功能，看影片终端还是以电视机为主，所以只做投屏，不做在线播放功能

3、智能语音，结合苏宁小biu智能语音系统，可以和电视机语音互动，实现交互功能

4、会员业务，移动端开通会员比电视端更方便，同时可以用一些运营手段促进用户开通会员

5、推送活动，电视机打开频次不如移动端，推送活动给用户，移动端可以实时看到

电商行业通常会把用户分成“大明”、“笨笨”、“小闲”三大类用户，在视频类产品，绝大多数用户都是“小闲”用户，来平台都是找乐子打发时间的。

思路一：架构改变（产品思维）：

PP微助手本来就是辅助电视机的，用户觉得用遥控器操作麻烦才会选择用小程序操作。在设计的时候，把用户当成是一个并不想动脑子并且很懒的傻子，产品设计越简单越好，否则用户干嘛要用小程序，遥控器挺好的，遥控器的大多交互都已经习惯，也没啥学习成本。

从用户角度分析，进入小程序无非就是找片源、看片以及看片过程中的一些基础控制操作（播放、暂停、快进等等），所以简化了产品整体框架，从原来底部5个tab（首页、片库、遥控、搜索、我的），改为3个tab（首页、遥控、我的）。产品呈现给用户的样貌更加简单直观，也相应的培养了用户心智，让用户对PP微助手这款小程序有个基本定位。

思路二：楼层分割（运营思维）：

首页改版前，按照iPhoneX的尺寸，首页第一屏也就曝光了3个分类，而且下滑到底总共也就几个分类，片源的曝光度不高，banner呈现也相对普通，就是那种正常电商类头部banner。同时交互成本也高，要点击“更多”才能看该分类影片的全部列表，要知道多一步操作就会多损失一部分用户转化。

改版后，针对第一楼层推荐影片采用电影宣传时的大海报样式，视觉焦点更强烈，同时曝光也更强烈一些，你去电影院的时候，看到的电影宣传海报，大多都是这类竖版的，用户已经有一定的心智模型，所以在这里采用竖版更为好一些。这些推荐影片在这里也作为“hook”，后面会讲。当然像电商类产品，首页需要考虑严谨的屏占比，这类尺寸肯定不合适。

第二楼层是影片的分类，采用文字tab左右滑动的方式，这种分类方式虽然没啥设计感，也普普通通，但是在一个分类众多的产品里，这种处理方法相当不错。减小了楼层的冲突，也提高了内容的曝光。像腾讯视频、爱奇艺、优酷，分类tab都是吸顶固定的，很直观的传达给用户影片信息。下拉的时候，这里采用feed流，用户在交互习惯上，连续操作时，对同一种交互会有惯性和依赖，上滑时查看更多影片，能满足用户的预期，也不会因为调整新的交互（上述的点击跳转查看更多）方式让用户反感。在视觉形式上，采用了横版的样式，是为了和第一楼层形成对比，也是为了节省屏幕空间，能曝光更多的内容。二楼的影片内容也可以分布一些“hook”

搜索也是一种用户找片源的方式，后面再讲，这里要考虑到流量分发的情况。

思路三：引导用户（运维思维）

按照福格模型B=MAT，完成行为的三要素：动机、能力和触发器。

用户进了影片详情，说明已经有动机了，这时候需要抓住机会，按照产品需求可以完成两个行为目的，一个是让PPTV账号升级成苏宁易购账号，二是转化成会员用户。

这里要看一下进入详情的数据，是“hook”进来的用户多还是非“hook”进来的用户多。如果是“hook”进来的多，说明用户主观意愿不是很强，这部分用户可能会流失，如果是非“hook”或者搜索进来的更多，说明平台用户主观意愿更强，有较高的粘性，更容易促进会员的转化。

对平台来说，希望用户进来完成两条路径：

1、未登录的用户，点“推送”和“开通会员”按钮，进入下一步登录或者升级账号流程。当然这一步会流失用户，部分用户会反感登录这种操作。

2、已登录的用户，可以快速推送影片，完成自己的看片目的，如果是会员影片，这里就需要用户先开通会员，当然只是引导，还会有一部分用户不想开通会员，选择离开。

防止用户过多的流失，就需要平台一定的干涉，加强登录或者开通会员的意愿，可以从以下几点入手：

1、沉浸式体验，进入详情，头部区域自动播放影片花絮或者预告，快速让抓取用户眼球，增加下一步操作的意愿。

2、醒目的豆瓣评分，“hook”影片选择一些评分高的，用户针对豆瓣评分已经有一定的认知，评分优质的影片，用户更有意愿观看，更容易促进下一步动作，提高会员的转化率。

3、各类标签，比如：首播、独家、会员免费、会员半价、4K高清等等，能清晰定位影片，捕捉各类用户看片心智。

4、会员相关信息展示，未登录的提示“登录领券、限时活动等”，非会员提示“会员权益、开通会员的利益点等”刺激用户。

思路四：优惠券吸引用户（运维思维）

改版前优惠券和体验券在不同入口，流量分散了，券的目的就是要让用户去使用，需要缩短路径，更直观的展示给用户，能让用户快速做决策。如果券种类多的话，还需要区分各种券样式，需要让用户快速定位想使用的券。

其中已使用和已过期的券对用户来说就是已经没用的券，并不需要再用单独的tab分类，并且弱化处理。因为PP微助手会员券相对比较少，不像电商一样，会送很多商品券，所以用最简单的形式展示给用户就行。

值得注意的一点，不是说已过期的券就没用了，如果运营把控好节奏，发券有一定规律，用户看到过期的券会有一定的挫败感，就会经常来关注券。“废券再利用”也能增加用户的粘性。针对快过期的券，必要时候可以做二次提醒，给用户造成紧张感，会激发用券欲望。

说服用户下决定，一般从以下三个点去考虑：时间紧迫性、暗示稀缺性、后果恐吓性

流量分发和流量承接

产品的流量来源有很多，除了自身用户进入产品的流量，还有线下广告、线上广告、分享链接等等各种来源。目前主要的流量分发方式包括：搜索分发、算法分发、社交分发、人工分发、付费分发。PP微助手主要应用算法分发、搜索分发、人工分发。

先讲一下“hook”，在电商里是“钩子商品”，这里我把“hook”当做是“钩子影片”，运营精准推荐的一些“hook”，会取到不错的转化效果。

用户在产品内的行为路径是不可控的，一大波流量进入首页，每个用户都有自己的目的，所以需要对用户进行分流。一部分用户去了搜索，这类用户目的很明显，知道自己想看的影片名称，这部分就是搜索分发的流量；一部分用户被“hook”勾走了，"hook"激发了用户的看片动机，这部分就是人工分发的流量，需要运营去干预；一部分用户在不停的浏览，在浏览过程中找自己的影片，产品会分析用户行为，显示千人千面的首页，这部分就是算法分发的流量。

有流量分发，那必然就有流量承接，流量承接都是相对流量分发的，在电商产品里，站内的流量承接一般都在商详，以及对应的后置链路（订单确认、结算等等），从各渠道进来的流量，最终汇总在商详。在商详，会突出各种利益点和产品自身优势去刺激用户下单。至于利益点，活动时候的各种优惠信息就是典型例子，产品自身优势，比如：淘宝的先享后付、京东有京东物流次日达等等。在PP微助手这里流量承接就是影片详情以及后置链路会员套餐页，具体可以看上面的“思路三”的分析，怎么去承接流量，怎么去促进转化。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

一、设计和艺术的区别

艺术：

艺术是感性、天马行空、富有创造力的，表达创造者的个人意识。

设计：

设计是理性、精密的，为了解决用户的问题

（你看得懂吗？你有什么见解？为什么大家见解不一样？这就是艺术的魅力）

二、用户体验及用户体验设计

什么是用户体验？——————使用一个产品时的主观感受

用户体验设计？———————为了提升用户体验而做的设计

1.用户体验设计

首先要解决用户的某个实际问题--让问题变得容易解决--最后给用户留下深刻的印象。（视觉只是其中一部分，并不是设计的全部）

Eg：充电插座的苦恼--错开位置

尿液四溅--厕所里放一只苍蝇，用户会去瞄准上厕所（设计美观且有趣味性）

2、用户体验设计的特征

(1)严谨、理性、创意

先关注要解决的问题----其次思考有趣的创意帮助用户得到更好的体验。

(2)提供特定问题的解决方案

设计目标是什么，为什么人解决问题，如何解决

Eg:钢铁侠u盘死死按住关机键；楼梯是为残疾人设计的吗，我懵了？

(3)不让用户思考

用户感到挫败，会放弃。你的设计不要用户一头雾水。

(我到底怎么走?)

(4)趣味横生

尿液四溅贴提示语效果不好，放一只苍蝇效果很好？

因为：抓住了用户的心理和行为习惯，同时充满趣味，吸引用户

Eg：path推出的商店功能，在里面买自己喜欢的贴纸，摇晃手机贴纸也摇晃，感觉很好玩吧～带来好的体验感

3.用户体验设计师遇到问题如何思考

三、各种设计师的区分

1.怎么和别人解释用户体验设计师

A：“你用一个网站的时候，有没有出现：某个功能找不到了，点击按钮没有反应，填写的信息不知道哪里错了总是不能提交成功？”

B：我们的工作就是改善这种情况，让你使用网站时有一个好的体验，同时能让用户感到愉悦和不受打扰。

工作中：除了考虑用户还要让公司有利可图

2.交互设计师

通过分析用户心理模型、设计任务流程、运用交互知识把业务逻辑（需求/功能）以用户能理解的方式表达给用户，最终实现产品战略（公司需求和用户需求的平衡点）的过程。

即：从公司战略角度考虑问题，在公司需求的基础上让用户觉得好用、易用

交互设计师的产出物：不是原型，你不是画图的工具，重要的是解决问题的能力

工作内容：竞品分析文档、用户反馈整理、流程图、设计草图、原型...

3.视觉设计师

原画：设计者很强的手绘能力，作品充满艺术表现力

平面：传达思想，较强的感染力

推广运营设计师：突出重点抓眼球

UI：良好的审美、具备一定的交互知识

                      (原画)                              (平面)                                              (推广运营)

4.用户研究员

通过各种分析和研究，深入了解用户特征，用户行为习惯，为产品运营推广提供必要的方向

工作内容：市场分析、竞品分析、创建人物角色、问卷调查、焦点小组、用户访谈、可用性测试

四、用户体验设计师的作用和价值

1、用户价值商业价值

用户通过优秀的设计快速达到目标，企业也会财源滚滚

eg：改变一个按钮的颜色，点击率提高35%；优化操作流程，转化率提高50%...

2、项目价值

跟进各个环节，保证产出物质量

推进统一及标准化，提升设计效率

促使项目流程合理，有规划

五、交互设计师的作用和价值

1.工作内容

分析重塑需求;与用研配合，了解用户特征与行为；设计结构、流程、界面、动态效果；跟进视觉、前端、开发；及时整理上线问题，准备下次迭代...

2.品牌价值

维护和突出品牌形象，统一的设计理念

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加：ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

我们生活在一个信息大爆炸的数据化时代，随着网络科技的飞速发展，产品和用户之间的互动也日趋复杂，新功能不断涌现，带来便利的同时也导致用户对功能的认知摩擦日益加剧。在这种情况下，人们对交互设计的需求就越来越大，市场对交互设计师的需求也越来越多。许多公司都注意到交互设计对品牌创建、用户满意度以及回头率等方面的影响。那么，什么是交互？交互设计应该做什么？希望今天这篇文章，能够加强你对交互的理解。

交互就是与另一个人或者物进行交流互动，比如你说话或按动鼠标，对方给你反馈，这就是交互。对于设计师们来讲，交互多指用户与计算机、手机等产品进行的交互。

交互设计是一个页面或者一个界面的内容规划，例如哪里放图片，哪里放按钮，哪里出现文字；或者说是一个庞大网站以及产品的整体逻辑梳理，例如如何安排信息层级，如何让用户更轻松地找到自己想要了解的信息，如何让整个网站或产品更加合理、有效地运转。

一个城市有合理的规划交通才会便利，城市里面的人才会觉得更加舒适，而一个合理的交互设计也直接影响着一个网站、一个产品甚至一个品牌。

视觉设计是感性的，更注重一切表象的东西，比如颜色、版式、形状、调性等，视觉设计最终的成品是视觉的效果图设计稿。

交互设计相对来说更加理性，交互设计更加注重用户是谁，通过需求分析得出问题、解决问题，交互设计的最终成品是原型图。

看过了文字解释，再让我们一起来看看生活中无处不在的交互设计。

叠猫猫、盖楼、星秀猫……每年双11，天猫都会创新活动，激发用户对双11购物节的期待，营造蓄势。

今年的双11的主题为喵糖总动员，用户通过组队一起做任务赚喵糖，通过掷骰子的方式获取糖果数，占领格子，击败对手。获取喵糖的过程中，营销或引流设置无处不在。除了做每日签到奖励的简单任务外，最简单的方式就是用15秒的时间去浏览平台推送给你的主会场、各大分会场、各细分品类、各个商家店铺等页面。通过这样的任务设计，可以引导用户浏览会场店铺或各品类商品，最大程度地完成各个淘宝店铺的曝光需求。

 

天猫双11-喵糖总动员活动页面

新冠疫情还在持续蔓延，飞猪App贴心的在行程页面，添加了防疫工具引导栏，通过点击按钮，可跳转至支付宝中行程码、核酸预约等界面，为用户出行提供便捷的准备工作。

用户在滑动页面时该导航栏会被隐藏，静态时则显示两个应用，点击展开才能查看更多。设计采用浮层式引导，提供便利的同时，且不会对用户产生干扰。

 

飞猪App界面

一切交互设计所要达到的效果就是形成良好的用户体验，让用户在使用界面时更方便找到自己感兴趣的东西。

通过地图及定位，通过气泡及icon的区别，把附近的美食等进行排名，让用户更快知道自己的距离。还设置了点击卡片展示店铺信息同时支持查询路线等功能。

 

美团App界面

“优秀的设计是考虑周到且不放过每个细节”。往往在那些不易被察觉的细微之处，倾注了设计师的诸多巧思与心血，哔哩哔哩在设计中做了以下一个有趣的小细节。

在账号登陆页面，当我们输入账号或者手机号的时候，页面插画中的22和33是睁大眼睛的，而当我们输入密码或者验证码的时候，他们则用手捂住了眼睛。这个有趣的设计生动地传递了App对用户隐私的尊重与保护。

 

哔哩哔哩App界面

当你使用百度搜索物品，查看图片时，左右滑动即可切换下一张图片，上划即可关闭图片，这样的操作手势，更加方便快捷。

在查看物品图片时，下方还会出现商品推荐购买链接，仿佛“一站式”购物的贴心服务。

 

百度App界面

交互设计的核心目的是信息的传递，无论如何设计交互图、如何设计交互流程，我们要思考的核心和准则是如何把想要传递给用户的信息以最简单、最容易的方式让客户接收，反之用户也能用最简单的方式找到自己想要的信息。

这些信息包括内容、按钮、文字、图片等一切信息的载体。我们要明白在进行交互设计时的前提是如何去梳理信息更好地传递。

那么，如何才能让信息更好地进行传递？我们要搞明白信息传递时需要营造什么样的氛围，哪些信息元素需要突出，目标用户是谁，根据这些才能以一个正确的方向有逻辑地进行交互设计，而这一切的最终结果就是实现一个良好的用户体验。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷  作者：全速设计
分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

本文将从理论到实践，从软件到插件，再到不同应用场景拆解和团队协同的重构，一步步教你如何搭建产品KIT组件库。也给大家带来逆天的Anima插件教程，组件化设计的必备插件，目前国内还比较少有文章讲到。手把手！嘴对嘴！堪称全网最细保姆级教程！

01. 什么是KIT组件库？

一个成熟的设计团队，都会为产品制定设计规范，搭建产品KIT组件库，组件化思维也是设计师的必备思维之一。组件库会让团队协作变得高效且一致，让团队成员专注于深耕体验和细节，实现设计向产品赋能。极大的节省设计和开发成本，优化用户在界面流转间的感知差异体验。

02. 原子设计理论

将普遍存在的人性用户心理规律运用于设计，增加设计的温度。

近来对用户心理比较感兴趣，去看相关设计资料的时候发现相关内容重复性较高，多方搜集资料结合自己的一些分析总结出一篇补充。

定律是钥匙，在遇到让我们上瘾，持续付出或获得情感的APP，多去想一想它背后洞察了哪些人性及心理，能不能为我们的后续的设计吸收。

最后想说，设计师的价值不仅仅在视觉，好的设计必是好用好看好懂用户的。跨领域学习补充自己的视野，多思多想，掌握钥匙，开启用户不同的心门。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

“今天吃什么啊？”

“不知道啊，看看大众点评，哪家店比较靠前”

“一会去看什么电影？”

“我看豆瓣上，这部片子评分特别高，我们去看这个吧”

当我们每天面对类似“吃什么”“买哪个品牌”“周末去哪玩”等等需要抉择的问题时，会发现当你面对的选择越多时却越不知道该如何做决定，或者当下做了决定后会一直思考做的这个决定是不是最好的，这恰恰是当代绝大部分用户在实际生活中面临的问题-选择困难。面对用户的选择需求各大平台都有自己的方式，帮助用户做决定的同时，引导用户购买目标产品，极大的降低了用户的选择成本，其中排行榜就是平台的常用套路。用户的选择成本是什么？排行榜为什么能够帮助用户降低选择成本？如果排行榜仅仅是用来降低用户的选择成本，为什么所有商家都对排行榜趋之若鹜？下面带你了解为什么人人都爱排行榜，及我们生活无处不在的“显性”“非显性”排行榜。你可能不知道是我们的生活正在被各种排行榜所支配！

排行榜的本质是一个没有感情的信息筛选机制，将所有相关的同类事物之间通过比较，从而反映出同类事物的客观实力。排行榜建立的基础在于用户对信息筛选平台权威性的认可，比如我们买衣服会首选淘宝，电子类产品会首选京东，看电影会看豆瓣评分，这些都是对平台某一领域权威性的认可。用户信任平台权威性对信息的筛选，由于锚定效应使得用户降低自己的选择成本，可以准确快速的做出选择。同时由于用户的从众心理或者羊群效应，也会对上榜主体产生强烈的品牌认可，为上榜主体带来更多的利益、强烈的荣誉感、甚至流量以及平台背书标签，比如：B站的百大up主，各个平台排行榜的销量冠军、朝阳地区必吃榜第一名，那么这一切背后的原理是什么？

一个完整的排行榜是由平台、上榜主体、用户三大组成部分，俗话说屁股决定脑袋，不同的定位决定了排行对三大组成部分不同的作用，当然背后的原理也不尽相同。

1.选择类排行榜-降低用户选择成本

在没有各种应用前，当我们决定购买什么东西或去哪家消费时，前期需要花费大量的人力、物力去搜集相关的信息进行整理集合，对比集合信息后才能做出决定，也就是说用户需要经过信息的搜集-备选集的建立-择优决策3个过程才能等到最终的结果。在建立备选集后，做出择优决策阶段发生的成本或费用都是用户付出的选择成本（前两个阶段发生的成本是交易费用，而不是选择成本）。在备选集的建立过程中，包含的选择越多，用户选择的难度就越大，选择成本就会越高。

选择性排行榜在备选集建立完成后，利用沉锚效应在用户心理建立潜意识的目标参照，帮助用户完成择优决策，降低用户的选择成本。（另一方面平台在帮助用户降低选择成本的同时，也影响着用户的最终选择，在接下来的平台侧方面会有详细的分析）。

比如说：当我需要买个耳机时，如果在没有各大应用的前提下，我需要通过找到我身边的耳机发烧友或数码电子方面方面的内行人对耳机进行了解，收集信息建立备选集，但由于京东在电子设备购物方面的权威性，我会优先查看京东的耳机类排行榜，也就是说京东帮助我完成了前期对于信息的搜集及备选集的建立，而用户出于对平台权威性的信任，根据平台给出的维度参照、品牌参照、价格、标签参照等信息，最终快速的完成自己的选择。整个过程就是用户在对锚的寻找，以及用户对信息确定性的寻找过程。

2.信息类排行榜-满足社交需求

在马斯洛需求中，当个人的生理需求和安全需求被满足时，与他人建立情感联系或关系成为人们最强烈的需求，即社交需求。社交又分为：为达到某种目的产生的功利社交或为获得情感连接及体验的共情社交需求。例如：QQ音乐新增的扑通社区、微博的明星超话打榜等功能模块的火热正是满足了拥有共同兴趣爱好的用户对于共情社交的需求。

无论是“功利社交”还是“共情社交”首先需要的是沟通，沟通的本质则是信息的流通，但当双方都没有可以沟通的信息时则社交不成立，而类似：微博热搜、今日头条、澎湃新闻等信息类排行榜，则给有社交需求的用户提供了可以展开话题相通的谈资。

在选择类排行榜中，提到的从众心理（又称羊群效应），是指人类由于对信息压力及规范压力，会希望融入到群体中寻求安全感的特性，即便此类信息与自己无关。大部分人由于对未获得及时信息的焦虑感，会热衷于浏览此类排行榜来获取实时信息，融入群体生活。每天早上，在通勤的路上用户利用碎片时间刷微博、浏览知乎或今日头条等应用了解最近发生了什么社会事件，在上班电梯或工作间隙讨论各自掌握的信息，及对事件的见解，甚至在与他人有相同的见解或之后，会对对方产生莫名的亲近感等等，这些都是在满足大众自己的社交需求。

3.分享类排行榜-自我确认需求

过年期间各家app纷纷都推出了自己的用户年度报告总结榜，不知道你有没有参与到其中，并把这些报告的截图分享到自己的朋友圈！在我们的日常生活中也会在朋友圈、B站等看到各种测试自己隐藏能力或性格的小程序，人们对于这类活动的空前热情其实是因为人类除了需要信息的确认外，还需要清楚自身在大数据下的自我确认，通过各种各样自我测试类榜单，判断自身的能力、情绪、价值等等，来达到自我认同，否则就会感到焦虑不安。

加拿大社会学家欧文·戈夫曼在《日常生活中的自我呈现》中提出他对社会生活的理解是“社会是舞台，人人皆演员”。 在社会这个舞台我们需要对外有印象管理的过程，我们想要呈现给观众怎样的形象，需要我们对自身及身边人有所思考和了解。所以在社会生活中我们呈现的是自己思考管理下被他人和社会接受的自己，为了维持自身的平衡防止崩溃，人类会自发“忠诚、纪律、谨慎”的维护自己的外在形象。而互联网平台大数据则折射出“隐形”的自己，让用户更加清楚的认知自己，同时通过分享，满足自我确认以及他人确认的需求。

我目前只总结出这三种类型的排行榜，如果有小伙伴想到其他类型欢迎在评论区提出，大家一起参与讨论。

无论哪种排行榜，用户信任的基础都来自对平台的信任，那么用户为什么信任平台？排行榜对平台意味着什么？背后原理是什么？下面我们来讨论排行中平台的影响及背后的原因。

对于用户来说排行榜是为了满足用户对于数据参数、社交信息、自我个人的确定性，选择成本是品牌经济学的核心，而用户对于排行的信任首先要建立在平台品牌的权威性下的结果。

1.平台权威性—用户侧

从我们记事起，我们对世界的认识来自我们的父母或老师，而这些教导我们什么是对、什么是错的长辈或老师，对当时刚来到这个世界的我们来说就是权威的化身。长大后我们对于权威的认可则更倾向于某一领域的专家，比如：医生、律师、教授等，认为处于权威地位的人在某一领域相对普通用户的判断更可靠，可以帮助普通用户节省研究这一领域问题的工作，做出更轻松的决定，虽然不一定是正确的。

搜索我们会第一时间想到百度，需要观看影视、书籍会想到豆瓣，想听音乐会打开网易云音乐、QQ音乐等等。各大应用经过长时间的厮杀各自在用户心中建立了某一领域的权威性，形成品牌号召力，推动着用户做出需求决策。另一方面排行榜中也会说明数据来源，比如京东会在排行榜页面有明确的榜单说明，豆瓣根据平台数据更新，汽车之家依靠外部的权威数据等等方式力证自己榜单的公正、透明，减少用户做出决定中的思考、猜测，获得用户的信任，增强平台的权威性。那对于平台来说权威性的建立意味着什么？

2.平台权威性—平台侧

• 影响用户的决策方向

平台权威性对用户来说意味着说服力和影响力，在减轻用户的决策压力的同时，也影响着用户做出平台所需的决策方向；

• 平台自带话题性

平台本身的权威性也会为平台承载的内容带来讨论的话题度，加大平台承载内容的传播范围。比如，每年苹果发布会都会带来范围极大的热度讨论，而app store内的热门推荐自带话题度和讨论热度。

• 输出口优化

排行榜作为内容输出口，在平台权威性的背书下，产品优化自身的价值，而平台也可以通过排行榜优化自身平台价值。

• 平台盈利

平台权威性下，可以通过多种方式达到盈利，比如苹果app store应用商店内的付费应用，百度的凤巢系统、微博热搜的第3、4位排名等。

3.平台权威性—广告告知

在平台完成建立权威性后，部分平台开始利用排行榜进行商业变现，比如百度、58的竞价排名等，现在大部分应用会使用明显的方式告知用户，防止平台建立品牌权威性。比如微博热搜第3、4位广告位的“荐”，淘宝、小红书推荐猜你喜欢的“广告”。

上榜主体作为整个排行榜的内容中心，由于排行榜自带的竞争机制、筛选机制，使得上榜用户会很乐于分享出去，比如游戏类应用王者荣耀的胜利者排位、微信运动排行榜。

由于马太效应上榜主体中的头部用户会获得平台更多的曝光量、绝大部分用户的关注度，以及各种潜在资源，比如：流量、资源、人脉、某一领域影响力、平台背书等等，这些都是潜在的社交货币。这种激励机制极大的满足了上榜主体的荣誉感、及平台归宿感，比如bilibili不同粉丝量级会送出相对应的粉丝牌。

而平台方也利用上榜主体挖掘潜在的用户，为平台带来更多的新用户，加强平台权威性，形成平台和上榜主体的良性循环。甚至与出现上榜主体自己的流量超过平台自身流量，带走平台用户的情况。比如去年和热闹的“巫师财经推出b站，签约西瓜视频”，各大平台也时不时会出现抢占流量up主的情况。

排行榜资源的建立

排行榜设计要达到用户攀比的效果，很重要的充分条件就是相同需求的好友基数足够大，这样才能构成排行榜设计成功的必要条件。

• 同系同门资源导流

对于已有成功产品的公司，可以借助平台相互间的导流完成初试资源的搭建，比如：微信初期借助QQ好友流量，带来好友初期的爆发；抖音最初的活跃借助今日头条的流量输入。

• 自建用户体系

不断推送已关注好友的信息流，当通讯录好友开始使用头条都要发送系统推送。比如全年年低火爆全网的cloubhouse就是利用的熟人社交，你要先有这个人联系方式才能要求好友，关注的人越多才能解锁更多的聊天室。通讯录、地理位置、兴趣偏好等等，不断社区建设推送动态信息流和好友卡片推荐。

• 伪造

当应用建立初期，没有很多的资源和内容时，需要平台自行填充内容，使得排行榜信息量大，增加用户活跃，才能挖掘用户的需求和个性化。不如一些小编推荐、猜你喜欢等等，或是平台pgc发布推送的内容。

面对不同的用户人群及使用场景排行榜的入口表现形式也会千变万化，根据表现形式大体可分为“显性排行榜”和“隐形排行榜”。

在界面有明显的榜单名称、排序、评判规则、上榜主体、卖点信息等。排序和内容主体是这个排行榜的基本构成，其他则根据不同产品类型及产品需求决定是否展示。

1.页面tab

在首页底部或顶部tab形式出现，多出现在以UGC或文字信息为核心的产品，以内容信息为主，常见以信息热度为主要功能的资讯、新闻类应用。比如：知乎、今日头条、36氪。

知乎热榜内容完全展开；36氪分为话题榜、人气榜，话题榜仅展示前5条，人气榜展示10条，仅在前5条有名次图标，在36氪热榜的中部还会出现收藏榜，综合榜。

而今日头条仅在整个页面的1/3处展示部分“头条热榜”，点击“查看更多”后，展开“头条热榜”及“今日关注”“北京热榜”，整个交互形式类似微博热搜。

2.图标入口

首页功能入口处明显排行榜图标，优先级较高，常见自带推荐属性，能够帮助用户快速选择，减少选择成本，比较依赖榜单的应用。比如：豆瓣、音乐类、腾讯动漫等应用。

其中豆瓣、网易云音乐由于各种类型的排行榜很多，在图标点击开后，在当前页面平铺不同维度榜单类型，用户进行点击跳转；腾讯动漫相对榜单类型较少，在左边侧边栏切换不同的榜单。

3.商品详情页榜单入口

用户查看商品详情时，可能会希望能够横向对比同类商品，才能最终决定购买那件商品。常见于电商类应用，比如：京东、拼多多、得物等。点击后进入不同的榜单页面，获取更多产品信息进行筛选。（淘宝的商品详情页没有排行榜，但在首页却存在隐形排行榜，在隐形排行榜模块会有详细说明）。

4.搜索-筛选（无明确搜索目的）

当用户没有明确搜索目的时，搜索框的下方，平台会推荐没有明确指向性但有热度的产品信息。衡量的标准一般为搜索热度或信息本身的热度。利用榜单效应留住用户，比如：微博热搜、淘宝热卖、抖音热榜等。

没有明显排名及规则，但经过大数据、平台或榜单制作者筛选后呈现在平台用户的面前，位置越靠前，在用户心目中的默认位置越靠前，比如淘宝的“有好货”、编辑精选等。

1.编辑推荐/小编推荐

在平台建立初期没有特别的内容供平台呈现，这时候就需要平台人工有目的的推荐一些内容，不同于“猜你喜欢”建立在用户的行为数据下，编辑推荐更多的平台希望用户看到的内容，一方面作为平台内容的输出口引导用户，另一方面内容是平台自己发布内容，也可以保证内容的高质量。

2.猜你喜欢/相关推荐

平台根据用户之前的浏览量、收藏量、转发、搜索等用户行为数据推荐给用户相关内容。这个时候的应用基本已度过最初的获客期，并且存在大量的平台用户使用数据，“猜你喜欢或相关推荐”模块用来增加用户的浏览时长及购买的可能性，各大应用平台适用性强，一般出现在首页部分。

3.年度总结排行榜

朋友圈每年年底都会晒出的各种各样的生活、音乐、消费的排行榜，这些其实是用户自己确定了解自己，且喜欢他人了解自己的一种方式。用户通过网络数据折射出自我的轮廓，清楚的认识自己。

4.TOP排行榜

不知道大家小时候看没看过《第10放映室》，那是我最早关于排行榜的印象，里面会有各种最佳动作片总结、最佳男配角总结等等，以香港电影偏多，是我早年的电影信息资料库。现在我们也会在小红书、抖音、公众号平台刷到各种各样的top推荐，这其实也是排行榜的一种。TOP类是已经经过人为筛选的排行榜，从众多选择中选择出部分答案，给出理由，而用户只需在已被筛选过的内容中进行决定，节省选择成本，比如豆瓣每年都会举行的豆瓣电影。另外一种TOP榜并不能帮助用户做决定，但可以迎合用户对确定性需求的各种盘点性质的排行榜，比如抖音的TOP榜哥就是盘点各种内容，人物。

5.搜索-筛选（有明确搜索目的）

相比其他排行榜，筛选后的内容已经体现了用户的具体需求，高效明确的给用户提供选项，引导用户快速选择。

排行榜一般由必需的榜单头部、上榜主体，及非必需的榜单规则、更新信息构成；而上榜主体由必需的主体信息、排序，以及非必需的推荐理由、排名变化、热度信息构成。

好的榜单能够快速吸引用户快速找到自己的需求点，引导用户点击排行榜进行查看。而榜单头部也由于功能需求的不同分为唯一性榜单头部、可复用性榜单头部。

1.唯一性榜单头部

当排行榜在整个应用中有且只有一个时，通常会对榜单头部的背景及榜单名称进行个性化、品牌化设计。比如微博的微博热搜、知乎的盐选榜单、今日头条的头条热榜、大众点评的大众点评榜单等。其中微博、头条、大众点评都在名称上有做品牌漏出，增加平台的品牌权威性。

2.可复用性榜单头部

有些应用平台会存在内容需要多种不同纬度的排行榜展示的情况，为了平台的统一性、降低后期的维护成本，一般会使用可复用的榜单头部，如豆瓣、京东、QQ音乐等。

得物通过替换左右切换商品进行宣传。豆瓣、微博、马蜂窝虽然都是通过替换图片及文案的形式达到适配，但根据场景又有不同。豆瓣、微博因榜单效应根据榜单第一位的变化更换底图及文案；马蜂窝沿用自己品牌的蜂窝形状及“马蜂窝榜单”的标签设计形式，通过更换文案底图达到适用不同主题；京东就相对比较简单，只是更换标题的文案达到多主题适配。

排行榜上榜主体由于不同的场景业务需求，一般有纯文字形式、图文结合形式、横排+列表结构3种表现形式，其中主体信息及排序为排行榜必须信息，而推荐理由、排名变化、热度信息、评分等等非必须信息则根据用户关注信息点选择漏出。

1.纯文字形式

纯文字的排行榜一般是以内容（或标题）加排名的形式出现，常见以信息为主的排行榜，比如微博、知乎、今日头条等以信息为主要关注点的应用，或是搜索列表下方的热度排行榜。信息类排行榜一般以信息热度为衡量标准，因此会在标题及排位外，增加各种突出热度信息的表现形式，如关注热度人数，或是“热”“新”“爆”等等表示热度的标签，如抖音、微博。而淘宝搜索热度则是在标签外增加了上升下降的排名变化。

2.图文结合形式

相对于纯文字形式，图文结合的排行榜因为图片信息的增加，使整个榜单主体占居更多的空间也可以展示更多的产品信息，辅助用户进行选择。

• 图片形式

上榜主体图片尺寸一般会有横版、方版、竖版3种形式。头条、知乎等资讯类应用都采用传统的横版图片形式，延续了用户阅读新闻类资讯的习惯；而豆瓣、腾讯动漫等由于现实中书籍封面、电影海报等用户视觉场景都是竖版构图，因此沿用至线上使用的也是竖版图片形式；而京东、大众点评、马蜂窝则使用方版的图片形式，大概是因为产品的多样性需要考虑多种图片的适配问题。（视频、游戏类由于使用场景大部分采用横版图片形式；但由于游戏封面、宣传海报也会有竖版的形式，比如：游民星空、小黑盒）。

• 左文右图VS左图右文

每当设计图文结合的部分，首先要考虑到底是采用左图右文还是左文右图的形式呢？可能很多人会说这两种形式没有什么大的区别啊，有什么可纠结的！或者认为由于视频、图片、文字对人类的吸引力是呈递减形式的，因此应该选择左图右文的形式。但实际上这跟我们长久以来的阅读习惯以及应用希望触达的用户类型有很大的关系。

人类对画面的阅读及扫描方式通常为三种布局方式，包括：古腾堡图（Gutenberg），Z型（z-pattern）和F型（f-pattern）。其中产品列表页中最常使用的就是F型布局模式，F型布局是雅各布·尼尔森（Jacob Nielsen）在公司进行眼动追踪研究后首次提出的。与其他模式相同的是，眼睛从上/左，水平移动到上/右，然后回到左边缘再此进行水平扫描。但在F型布局第二次扫频后，向右扫动的次数会越来越少，并且会随着向下移动，眼球会紧贴左边缘。用户也倾向于F型模式浏览浏览整个页面，即自左向右自上而下的阅读模式，越向下信息获取效率会越低。

因此今日头条、知乎等需要通过文字传递给用户准确、丰富的新闻资讯类应用普遍以左文右图的形式展现。而电影、游戏、动漫等以画面触达用户需求的应用则都采用的是左图右文的表现形式，比如：腾讯动漫、爱奇艺、得物等等。

3.横排+列表表现形式

说到排行榜我们一般第一个会想到领奖台，很多平台也采用领奖台这种前三名横排+其他排名列表的结构。纯列表形式的排行榜，平台用户的注意力大部分集中在第一名，而领奖台的形式模仿现实生活中的奖励形式和仪式感，将整个排行榜的关注范围从第一名扩展至3名，另一方面排行榜的竞争关系从单一争争夺一名变成前三名的竞争关系，增加了第一名的高度。（目前这种形式我只在微博的明星势力榜及抖音的直播总榜中有看到）

榜单规则是排行榜规则的描述，是平台权威性的体现。榜单规则有些平台本身具有数据库，会有相关的平台数据支持如京东；而汽车之家则依靠“汽车工业协会”外部的数据支持，增加平台的权威性及榜单的可信度；

信息更新一般存在在榜单头部和上榜主体的中间，有些是固定时间更新，也有类似微博热搜是实时更新的模式，而腾讯动漫的更新作为用户的痛点会在延续企鹅形象的侧边栏头部标明榜单更新周期。

排行榜的成功看似是人们对于选择困难、信息获取的解决方案，但归根到底因为人们对于不确定性的惧怕，无论是信息的不确定性或是对自身价值的不确定性。而平台方利用金钱、名誉、奖励的外部激励方式，结合满足感、确定性、社交性的内在激励相互作用使得排行榜成为无论何种平台都非常受欢迎的产品功能。作为平台方因产品使用受众、产品侧重点、宣传方式的不同，排行榜会以多种入口及展现形式出现。作为设计师需要深入了解排行榜等功能背后的产品逻辑，以及用户操作行为背后的思考及心理效应，提出合理的设计，帮助用户了解产品功能，满足用户需求。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

背景

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

「屏效」狭义理解是「界面过度留白」；广义理解，「屏效」源自谐音“坪效”，指的是每坪的面积可以产出多少营业额(营业额/专柜所占总坪数）。而「屏效」对于界面而言可以指屏幕单位时间、单位面积内的信息可以带来多少商业效益/效率提升。

为了探索在 B 端产品中用户为何对「界面过度留白」或「屏效」问题如此敏感，于是我们展开了「屏效」专题的设计探索与实践。「屏效」专题探索主要以「探索」与「实践」相结合的方式展开，将实践过程中反复验证有效的设计策略沉淀成设计手册，同步将部分功能进行工程化，确保可以开箱即用。

探索阶段-为谁在何时何地设计

用户声音｜不同的故事相似的诉求

面向内部设计师和终端用户投放的《高屏效诉求》《中后台产品满意度调研》问卷中认为提高屏效能极大提升用户体验的设计师占 58.14%；认为提升屏效对体验有提升的终端用户占 50.6%。

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

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

案例收集｜发现问题，大胆假设

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

视觉、交互层在无需理解业务场景和用户目标的情况下，都较容易发现，属基础问题，但很多「过度留白」的屏效问题往往是信息被组织方式的差异导致的「过度留白」。

综上我们提出假设：为提高屏效，可从视觉、交互、信息三个层次解决

视觉层为提高信息查阅速度，可以通过提高信息密度；交互层为提高操作速度，可以缩短当前手势到目标之间的距离；信息层为提高信息被理解的速度，可以通过重组织等方式。

基于假设，我们进行了进一步的桌面研究，查阅论文等书籍，寻找设计理论的验证和指导。

竞品分析｜寻找实践证据，谨慎验证

我们知道视觉上界面留白过多（过疏会增加滚屏成本，过密因易串行而影响阅读效率），以表格「行高」为例，探索各表格在字号、字高和行高的关系，因为不同字体的同字号实际像素高度会有差异，因此选择的是字高（即文字垂直高度的视觉大小）而非字号或字行高，决定留白的两个重要因子是字高和表格行高，以次推演，界面元素和元素间距的留白关系，探究在视觉层怎样的留白率能保证甚至提升屏效。

以数据产品中的表格为例，通过直接和间接竞对的方式，分别从数据的查阅（视觉）、分析（交互）维度进行功能点和设计细节上的比对，来看看优秀产品是如何解决屏效问题。

直接竞对：内部用户口碑较好的产品 A、B外界竞对：同领域的 Tableau、网易有数、金山、微软表格；间接竞对：谷歌邮箱、AntD 等的紧凑主题的常规列表（一维表格）

通过竞品分析可以发现，数据分析领域的表格留白率普遍较低（信息密度高），尤其是金山和微软的电子表格，其次是同类面向数据用户的 Tableau、网易有数，而谷歌邮箱等工作台常用的常规列表紧凑版本中，留白率和数据领域的电子表格不相上下。

紧凑版的使用场景也常常是面对数据量巨大的信息呈现，通过切换紧凑主题，提升信息的快速浏览，而这也非常适合数据分析场景中巨大的数据量呈现。因此我们的产品在留白率的提升空间极大，而在实际案例实践中，也已经将表格行高优化至 30px，克制的使用留白。

除此外，竞品其他层次的设计也做了比对，总结来看整体设计做法：高密度、少屏数、少留白等。

文字陷阱：中英文字高不等于字号

举个容易犯错的竞品参考是，谷歌在紧凑版主题下字号 12px，列表行高是 28px，但在 AntD Table 中同样的 12px 和列表行高 28px 就会发现非常拥挤，缺乏呼吸感。

原因在于谷歌的 12px 是英文字体，实际字高只有 10px，而 AntD Table 的语境是中文字偏多，实际字高有 12px，所以留白的差异在于一个是 18px（28-10），一个是 16px（28-12），这也是为什么决定决定留白的两个重要因子是「字高」和表格行高，而非「字号」和表格行高，进一步推演，决定界面留白的是「元素视觉高度」和「元素间距」。

论文查阅｜寻找理论证据，谨慎验证

研究表明，低密度认知负荷低，但高密度任务完成率高，用户更喜好

参考资料：论文《基于眼动的网页对称性和复杂度对用户认知的影响的研究》

对于信息，用户需要需要阅读（视觉），思考和理解（认知），需要点击按钮、操作鼠标和打字（行动），在人机工程学中，统称为负荷。即认知（记忆）负荷、视觉负荷、动作负荷，即分别对应用户体验设计的三个层级，信息/视觉/交互。而负荷所花费资源从多到少依次为：认知 > 视觉 > 行动。

认知负荷，举个例子，看了但不一定懂了。你是否有这么一种体验——刷抖音，虽然很多（信息密度小，输出效率低），但可以一直刷下去并且刷很久；而看一门 C4D 教学视频，即使就短短十来分钟（信息密度大，输出效率高），但是却要看上半天。因为刷短视频时，你的输入效率远高于作者的输出效率，而看一门 C4D 教学视频时，你的输入效率远低于作者的输出效率。可是，输出效率是客观的，输入效率是主观的。如果输出效率很高，你可以通过提高自己的输入效率（比如让自己成为 C4D 专家）来跟上作者，从而变强；否则输出效率很低（信息质量低），你的输入效率很高（很专业），信息于你而言都是无效的。

假设负荷总量不变的情况下，那么以上三类场景界面需要对用户负担分配大致如下，官网品宣类需要低认知成本，低视觉负担，视觉要求高，用户才会被吸引过来阅读，甚至酷炫的交互更能增加互动体验而带来的趣味感，比如苹果官网，信息量极少、图版率高带来极具艺术的视觉体验、进而吸引用户愿意跟随屏幕滚动渐进式接受信息，而 B 端应用因为是专业使用，首先认知方面随着员工的专业度提高而降低，因此可以通过提高视觉负担，来降低行动负担，进而减少操作用时，当然最佳情况是三个维度能整体降低负担，让总负担降低，就需要更多设计巧思了。

面向内部设计师和终端用户投放的《高屏效诉求调研》预设解决方案中，设计师常用的 Top 3 做法为：【信息层】隐藏不必要信息、【视觉层】提高布局紧凑度、【交互层】减少点击跳转。

实践阶段-如何设计

通过以上的探索，我们可以确定的是，B 端产品面向专业人员的工作界面设计中，提高屏效可从视觉、交互、信息三个层次进行，视觉层-高密度，即提高屏幕信息密度；交互层-低跳转，通过减少页面跳转、手势与常用操作的距离等；信息层-有效性，通过重组织或辅助信息帮助用户理解，甚至提供帮助手册等以提高用户专业能力。

基于以上的总结，对产品进行优化。下面以一个简单案例进行设计策略的解读。一位运营同学想对比 A、B 两不同人群在相同维度（白领-有信用卡）下的人数差异，寻找运营机会点。

如下表格经过高屏效策略优化前后对比图，优化前相同维度下不同人群数量的对比需要视线来回跳动比对，而优化后的表格内容，更符合用户看差异场景下分析目的数据查阅，视线锁定相同维度，即可快速比对数值大小。

下面以视觉、交互、信息三个层次解剖设计过程背后的思考。

视觉层｜高密度-克制的留白

眼动理论：研究表明，人眼最小可视视角 0.3 度，水平最大眼动舒适转动区 30度，垂直最大眼动舒适转动区 55度。可得出人眼最小识别范围 12px，水平视野舒适眼动宽 1200px，垂直视野舒适眼动高 2200px。参考资料：论文《基于眼动交互的用户界面设计与研究》

如图，缩小表格行高的同时，目标信息之间的眼动距离随之缩短，在眼动舒适区内看到更多信息，便于信息的高效获取。

交互层｜低跳转-高频信息前置

理论基础：菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型，它由保罗·菲茨在1954年首先提出。这个模型考虑了用户定位点的初始位置与目标的相对距离、目标的大小、移动的最短时间。三者之间关系公式为：T=a+blog2(D/W+1)，W为其中目标的大小；D为到目标的距离；T为移动到目标所用最短时间。参考资料：菲兹定律

表格单元格借助交互状态，增加悬浮出现的信息组件，前置显示目标单元格明细信息，同时通过交互出现的指示器辅助行列信息的获取，高频操作考虑手势位置放置，缩短与操作目标的距离，以提高整体操作效率。

信息层｜有效性-信息重组织

理论基础：交互设计四大策略「组织、删除、隐藏、转移」参考资料：《简约至上》

用户为了对比 A、B 两不同人群在相同维度（白领-有信用卡）下的人数差异，但内容的重组织方式让两数据行需要频繁点击滚动条来查看，根据用户目标，将关联性大的数据放置相邻列（即将要对比的人群放置列头），即可快速查阅，减少眼跳距离。

结语

设计趋势中常见的大字体大留白界面，但在 B 端场景中，面对紧张的工作节奏，时间和注意力变得尤为可贵，相对而言，基于复杂度守恒定律， B 端信息量大且高频访问的产品中，「用得快」要比「看得美」更重要，「高密度」「低跳转」诠释的即是「空间换时间」，少一次点击，少一次跳转，少一份等待，就多一份时间和效率。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

搜索动作在App中依靠搜索框来完成，好用的搜索框很大程度上决定了产品的搜索体验如何。大多数搜索框存在相似性，但真正好的搜索框会在细节上为用户带来差异化的反馈，带来很暖很贴心的感觉。

1、搜索框结构分析 

从体验层面上看，一个良好的用户体验需要具备完整的流程。搜索框的使用流程可以简单划分为：

使用前-找到搜索框入口；使用中-点击输入内容；使用后-展示搜索结果。

其中使用中会涉及到跳转和输入两种不同的状态，在下面的文章里我会展开来分析。

2、搜索框的常见类型 

回想常用App的搜索框，好像它们的样式看起来差别并不是很大，但其实每个搜索框的细节都是经过精心设计的，下面总结了几种常见的搜索框类型。

搜索图标

页面上只提供一个放大镜图标，通常需要用户点击图标后才能跳转到搜索页面，例如小红书就将搜索图标放置在页面右上角。

基本搜索框

基本的搜索框组成包括放大镜图标、文字提示、输入框三部分。微信主页的搜索框采用了这种基本形式，文字提示为搜索，简洁清晰。

文字提示类搜索框

和基本搜索框的唯一不同的地方在于，这类搜索框中的文字提示部分不再是搜索两个字，而是根据产品需求支持预置多组文字提示并在搜索框内循环展示。

▲ 在大众点评的顶部搜索框中，文字提示部分循环展示了三组不同的内容，引导用户快速检索到好吃和好玩的。

功能类搜索框

之所以叫做功能类搜索框，是在文字提示类搜索框的基础上根据产品功能的需要额外添加了常用的功能性图标，如扫码图标、拍照图标、语音图标等，赋予搜索框更多的功能属性。

▲ 经常使用豆瓣看书评的同学可能会注意到豆瓣主页的搜索框中有一个扫码图标，点击之后可以快速扫描图书条码或二维码，快速识别书的内容，省去检索的麻烦。

▲ 淘宝搜索框的组成更复杂，除了支持扫码外还有相机图标，方便用户拍照识别商品。 

3、搜索框设计状态分析 

使用搜索框搜索的过程总体可以分为四部分：搜索前、点击搜索框、输入中、搜索后。设计分析过程中我们要先理清整体的搜索流程，再考虑每个状态对应的交互细节及反馈，这样才能保持逻辑清晰。

搜索前-默认状态

位置

大多数搜索框出现在页面顶部，作为一个大的触摸目标更符合用户的认知习惯，更容易被用户发现和使用。

▲ 在苹果自带的地图应用中，搜索框放在页面中部偏下的位置，相比于顶部搜索框，这样的位置分布更方便用户单手操作。

样式

搜索前的状态除了前面讲的几种常见的搜索框样式外，有些产品会直接在搜索框增加“搜索”按钮。

▲ 阿里系产品包括淘宝、支付宝、闲鱼等主页搜索框都额外添加了“搜索”按钮，相比于点击搜索框再点击键盘搜索内容推荐，直接点击按钮简化了搜索流程。

点击后-获取焦点

搜索框

点击搜索框后，框内的放大镜图标会消失，出现闪烁的光标引导用户输入，搜索框右侧会出现“取消”按钮。

▲ 点击大众点评的搜索框后，搜索页会出现三个选项，点击每一个选项，搜索框内的文字提示都会改变，有效帮助用户提升搜索准确度，虽然是很小的点但做的很用心。

键盘

点击搜索框后会弹起键盘，在不输入内容的情况下，点击键盘自带的“搜索”按钮能查询搜索框中推荐的内容。

搜索页

搜索页的内容通常包括历史搜索、搜索发现、热门推荐等版块，记录用户的搜索行为，推荐目标商品或服务，提高转化率。

▲ 豆瓣将最热门的内容都展现在搜索页中，包括实时更新的热门书影音榜单、热门小组、热门话题等，为用户提供有效的引导。

关于历史搜索我们还可以继续深入分析，思考这些记录怎么排序、最多显示几条记录……

▲ 网易云音乐的历史搜索最多可以保留10条，采用横向滑动的手势交互可以节省屏幕空间。根据内容长短一屏一次可以显示2-3条记录，这会导致排在后面的历史记录不容易被用户快速发现。

▲ 淘宝的历史搜索可以容纳更多的数量，当搜索记录超过两行时会有一个小的展开按钮，点击按钮可以查看早期的记录，这样既能节省屏幕空间也能最大化容纳历史记录。

搜索中-输入内容

删除/取消

当开始输入内容时，在搜索框的右侧会出现删除图标，方便用户一键删除输入的内容，这里要注意区分删除和取消的区别。

▲ 在淘宝中点击“删除”图标，页面会返回到上一级也就是搜索页；

▲ 点击“取消”按钮，页面会直接返回到主页也就是搜索前的状态。

搜索提示

在用户输入内容时，产品会根据用户输入的内容提供相对应的搜索推荐，这是搜索框的必备的交互反馈。

通过合理的词条推荐能极大降低用户的思考时间，提高搜索效率，同时省去再次点击搜索按钮的流程，降低用户的操作步骤。

字数限制

目前我所知道的大多数App在搜索时都没有字数限制问题。

回顾一下搜索使用场景会发现用户在搜索框内输入任何内容都是有可能的，尽量不要约束用户的输入内容。无论用户输入多少内容，点击都可以完成基本的搜索操作，这样整个流程才完整。

▲ 在百度中输入过多字符时，会提示查询限制在38个汉字以内，多的字符会被忽略，虽然给出了提示但并未打断用户的操作流程，可以让用户继续完成搜索。

搜索后-展示结果

符合预期

搜索的理想状态是搜索到的结果符合用户的预期，满足用户的搜索需求，并把最吻合的搜索结果排在前面，为用户带来清晰的结果展示。

智能提示

智能提示是对用户输入内容上的一种提示或纠正，如果用户输入的内容有问题或不够标准，在搜索结果中会能给最贴切的搜索结果。

▲ 在淘宝中输入“shouji”或“souji”，淘宝会根据拼音给出“手机”的搜索结果，但仍保留原标签，方便用户再次点击搜索；输入“手ji”时，会直接给出“手机”标签，这种差异化的反馈能更好的为用户服务。

无结果提示

如果没有搜索到用户输入的内容，搜索页会显示一个空状态，提示用户没有搜索结果。关于空状态如何设计可以看我之前写的一篇文章——如何做好「空状态」设计？来看资深设计师的总结！详细分析了空状态的设计方法。

▲ 相比于直接显示搜索无结果的状态，拼多多的搜索结果首先会标明相关商品较少，然后将搜索内容拆分成不同的标签进一步引导用户来发现内容。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务