交互细节观察——信息展示篇

已收录  要点24个，界面52张。

—————————————————— 我是抢镜的分割线 ——————————————————

1，以误差退款信息告知包装已完成

「每日优鲜」中，订单下达一段时间后，会告知实际称重与标记的差值：“非常抱歉，因为重量误差…已经退款¥1.45元”，

这个设计有两个目的：

1，巧妙暗示用户商品已包装，如果文字是“商品分拣已完成”，很多用户会感觉只是系统自动的显示，可信度不高。
2，彰显平台绝不损害用户利益，缺斤少两必退款，不占用户便宜，有利于提升用户对品牌的信任的。

其他案例：其实「叮咚买菜」也有同样的设计，订单下达后，会有差值退款的提示。

反思：这样的设计，似乎也可以出现在其他称重销售的物品上，例如散装称重的零食饼干糖果，桃酥糕点等。但是非称重的商品就不太合适了，例如以个计算的糕点等，即便是外卖中少了碗附带的汤，再给用户退款也会可能引起用户的强烈不满。

2，点赞/播放情况可视化

「小宇宙」在播放进度条上，将用户的点赞情况进行了可视化的传达。柱子较高的地方代表了该片段有较高的点赞数量，帮助其他听众直观了解单集中的「高赞」位置，提高了内容获取的效率与质量。

类似的做法，在视频类应用也很常见，例如爱奇艺，B站都可以在播放条上展示了每个片段的播放量。直观便捷地向用户展示高赞高播放量的地方。

反思：不过类似的做法，在音乐类，书籍类，文章，游记应用上似乎还比较少见，个人认为只要是观看收听起来需要一定时间的内容平台，都可以引进这种做法提升用户体验。

3，位置前置的同意协议选框

以往很多产品都是将同意协议选框放在页面底部自动勾选，而现在法律要求用户登录注册时，必须手动同意协议。但是问题在于，用户在输入完信息后很容易跳过忽视这个协议选框。

「豆瓣」在这个页面的设计上花了些心思，将协议勾选选框移到了输入框上方，放在用户必定的视觉流线上，再加上气泡提示，非常显眼。

4，大额数字上方使用文字标注

「招商银行」当输入的数额位数足够多的时候，数额顶部会出现计数单位，方便用户读取。

右侧例子是我4年前的一个数据可视化项目，大额数额中，中间插入“w”代表“万”方便用户识别读取。

当数额比较大的时候，用户读起来会相当费力，千分位加逗号的方法，又只适合西方人的语言，很多系统在使用只是因为银行也在这样用。

所以我们可以思索一些方式，既能满足读取，又能满足系统间的数据交换。

5， 录音后查看的单句得分

「唱吧」录音完成后，可查看单句得分，成绩详情一目了然，还可以单句补录，唱错了不用整首重来。
B站很多up主会在视频下方做上时间轴，标注内容节点，方便用户快速跳转到想看的内容。

这两个案例看起来不一样，实际上背后的原理都是，将一般认知中不可拆分的信息进一步拆分，拆分为更小的信息块，方便用户查找，调取。

6，数值变化引起图标变化

iOS调节音量和亮度时，图标会有相应的变化。
其他案例：教育培训产品I win中，随着视频的观看进度，左侧的小节点会出现相应变化。

7，评论以对话框样式出现

「今日头条」评论以对话框样式出现，更具生动，亲和力，社交化更明显。
优设（网页端） 评论同样以对话框形式展现，的确更有讨论的欲望，但坏处就是一屏可以看见的评论要少一些。

触类旁通：当用户通过持续操作，付出获得结果时，最好实时的告知“任务”完成的进度，还可以添加一些激励的话，给用户更多耐心与勇气。
当然如果每完成一段，可以获得一定的奖励，那是更好啦。

8，顶部显示当日阅读数量

「得到」App会在页面顶部区域显示当日的阅读数量。

微信读书也会在顶部显示阅读进度，并会附上一句激励读者的话。

9，显示群成员比例信息

QQ群的介绍页面会显示性别，地域，年龄，单身等方面的比例数据，让加群的人可以更快的对这个群有所了解。

10，滑动金额标尺查看对应收益

「支付宝」理财产品预约界面，用户可以滑动金额标尺，查看对应金额的收益，避免输入不同的金额的频繁操作，更直观表现购买金额与收益的关系。

同样类似的还有：

减肥健身小程序Fix Body，设置身高，体重，减肥目标时间，均可通过滑动标尺操作，并实时给出建议。

向上金服 滑动天数滑块，实时显示利率和优惠信息，增强互动感。

但在天数设置档位有限的情况下，会不便于比较不同档位之间的“预计年化利率”，也是有利有弊吧。

12，输入框字符长度剩余量显示

「Twitter」当输入框里剩余可输入的文字越来越少的时候，数字和外面圈圈的颜色会随之变化，从蓝色逐渐填满整个环形变为黄色再变为红色，方便用户检查删除。

触类旁通：当某项信息随着用户的操作而变化的时候，最好让它有持续不断的显示更新。有一些大家习以为常的简单例子，滑动颜色滑块，相应的颜色需要及时更新。

13，计数选择器，将数字显示在商品右上角

下面小程序订单页面中，计数选择器打破了常规的左中右布局，将数字显示挪到了右上角。
这里将数字放在右上角可能是为了与上方的卡面选择勾勾位置保持一致；
也有可能是为了与发表朋友圈时照片计数的数字位置保持一致。
这里的做法可以作为下参考。

触类旁通：我们在设计时可以多考虑下依循自己系统内独有的展示操作习惯，特别是已经在过往线下业务场景中形成的习惯。

14，个人中心图标可表示用户状态

「微博」App内听歌时，“我的”图标会有个音乐标示，表示用户当前状态。
同时让用户知道声音是由微博发出来，而不是其他App。

同样在个人中心图标上做文章的还有豆瓣，个人中心图标在登录后，会显示用户头像。

15，物流信息卡片可左右翻看

「淘宝」当同时有多件快递在路上时，物流信息卡片可左右翻看， 很方便。
同样这个设计的还有陌陌等相亲App的翻动操作，当然陌陌等有“翻牌”之意。
知乎个人中心的「回答问题」版块也采用了类似的卡片翻动设计。

触类旁通：在多个同类信息每次只用展示一次的时候，可以考虑下这种卡片滑动效果，增加交互的趣味性。

（其实网页端层出不穷的banner展示形式也与这个比较类似）

16，高铁的座位信息表示

高铁上会使用标示显示屏上的颜色表示席位状态。
绿色表示表示该席位当前站没有旅客，下一站也没有旅客上车；
黄色表示表示该席位当前站没有旅客，但下一站会有旅客；
红色表示该席位当前站有旅客。
这样方便只有站票的人把空座位有效利用起来，也能避免占用别人座位的尴尬。

个人观点：
但是，其实可以使用更加直接的设计，在座位号后面文字标注
绿色：本站&下站无人乘坐
黄色：下站有人
红色：有人乘坐（或者不标注，因为座票卖完了才开始卖站票）
这样比起使用颜色更好理解，学习成本也更低。
可能是由于成本问题放弃这种做法。

17，对陌生内容进行解释

使用「飞书招聘」时，如果沟通人的姓名里有生僻字，可显示字的拼音。不至于在面试沟通的场景里出现叫不出名字的尴尬。

同样对陌生内容进行注解的案例，还有「爱奇艺」会很巧妙地将剧集的补充信息融入到小标签和弹幕中。
当我们看一部时代背景不熟悉，场景设定，概念名词有比较专业小众时，作为观众我们往往会因为不理解而对故事产生疑惑，「爱奇艺」的做法可以让用户及时了解到注解，如若真对该词条感兴趣，还能马上点击条目调出更详细的百科解释。缩短用户的操作路径，让体验更加周到。

另外还有阿里健康，微医会对医患咨询对话中出现的专有名词进行解释，也极大方便了用户获取关键有效信息。
（图还没找到，找到了一定立马不上 >;< ）

18，按款式规格的数量确定不同的显示方式

淘宝的商品款式规格选择底部弹窗，款式规格少的以卡片方式显示，款式图片更大，如果款式繁多，就按条目样式显示，一屏内可以看见更多款式。

有的商品款式规格后面直接显示了该款式规格的价格，比起之前选中后在顶部才能看到价格，减少了操作，也不再需要视觉焦点不停转换，更方便比价价格差异，体验要好了很多。（这个不是所有商品都有）

用户做出选择时候，如果带来的结果方便及时显示时，我们可以尽量寻找方式传达出来。

18b，二维码显示跟随手机翻转

「支付宝」当想别人出示二维码时，页面可随手机朝向而翻转。
微信也有类似的功能，微信面对面红包会将二维码图案随手机翻转而翻转。

19，消息再分类

钉钉将@我的消息，特别关注人的消息，稍后处理的消息等信息分类选项在首页设置了快捷入口，对重要的信息进行智能分类以便用户快速查看和处理。待消息处理完毕后，入口图标才会置灰。

其实类似的做法还有很多，只是在PC网页端更加常见。
例如各种网站会将点赞，收藏，评论，私信分类，B端后台系统分类各种信息更是常见的做法。只是在移动端，由于屏幕大小的限制，这个做法会需要考虑的更多。

20，目录与关键词索引

为长篇文字建立目录，本来一般是读书类应用的做法。马蜂窝上主要由用户产生的内容是游记，但也在左下角位置设计了显眼的目录图标，即不影响主界面的大图阅读体检，又可快速定位浏览文章，非常适合移动端的阅读。文中提及的景点（关键词）也能随时在目录中查看收藏，方便做笔记。

知乎也可以在长篇回答中加入目录，便于读者查找内容。

当内容比较长的时候，提供目录或者关键词索引，可以大大提升用户体验。如果可以在这个基础上可以显示哪个章节片段点赞更多，查看更多，那就更上一层楼了。

21，重要信息的保持显示，再次显示

将「淘宝」的填写订单页下拉时，头部填写的地址会始终停留在页面顶部。用户无需来回滑动页面，就能进行地址正确与否的确认。这样能给有多个寄件地址的用户或者不常使用该App的用户更多的安全感。毕竟不小心填错地址信息真的是太糟糕了。

「京东」的做法则是在页面底部，提交订单按钮上方再次出现，并且提醒强度更强。

个人感觉这种寻求反复确认的提醒强度，有些烦扰到用户了，孰优孰劣大家可以讨论讨论。

22，使用具体事物让数据可感知

「哈啰出行」会在骑行完成后，将消耗的能量，减少的碳排放用食物，种树表现出来。让用户可以更直观的感受到信息，也增添了趣味性和幽默感。

步行时使用「百度地图」App进行道路导航，系统会自动计算行走路程碳减排与消耗卡路里的数值，在通过食物的图标（比如薯条🍟、巧克力🍫等）表现出来。

将数据使用普罗大众可以感知的事物变现出来，这种做法其实不仅仅是运动出行相关的产品可以做，涉及水电煤天然气，距离，称重食品的产品都可以做。例如用户可能不清楚一个月消耗的燃气大概相当于做了多少次饭；距离6KM，骑车多久能到，500g葡萄大概有多少等等。

23，通过使用人群，关键词对评论进行分拣

美妆等产品的使用体验很受用户群体影响而影响，同一款产品不同肤质的人使用起来会完全不一样。

「淘宝」上这些产品的评论区，头部会有多个关键词标签对这些评论分类，比如最显眼的标签——特定肤质，特定颜色标签等，都可以方便用户快速判断产品是否适合自己。

在点击“选款式”后，还可根据产品的颜色、型号等更细致的筛选条件，对评论进行更精准的搜索。减少关联性不大的评论内容，有效提升用户筛选评论的效率和精准度。

24，地点转移时间代替空间距离

「自如」的找房模块可根据指定交通方式，指定时间成本筛选房源。

我们在找房的时候最常考虑的是去上班/去地铁站需要花多长时间，所以比起简单的按距离筛选，按时间筛选更能满足用户的真实需求，这里「自如」能考虑到这些特别细致的点，是非常棒的用户体验了。（当然成本也更高，需要计算不同的交通工具，路线，路况等）
显示数据的时候还可选择地图模式（直观）或者切换成列表模式（数据更清晰）。

58同城也有类似的设计，使用转移需要的时间，代替空间距离。

关注用户决策时真正关注的选项，产品多帮用户做一些计算，缩短用户决策路径，这样带来的体验升级，是很多细枝末节无法比拟的。

喜欢的话，就点个赞👍吧！！

下期带来 操作成本篇。

先立个flag，嘿嘿～