UI设计之“信息过载”实战案例

Sponsor

前言：产品经理通常会给到设计很多文案信息，作为UI设计师，如何去优化它呢？本文将分享关于UI设计的“信息过载”案例，我们来一起学习吧！

不知道大家做设计的时候是不是经常会遇到一种情况就是，当我们想从简设计优化信息层级的时候，产品们恨不得把所有的文案说明都加到设计稿里，类似一种老妈子怕娃吃不饱穿不暖的操心，就担心用户会看不懂，因为看不懂功能而失去他们最重要的点击率和kpi。

其实这种主观担忧有时虽无数据支撑，但是作为一个深入了解用户的设计师还是可以理解的，因为有些用户群体确实额那个啥，对智能设备和新兴事物不是很了解，所以有些我们主观觉得他们能懂的设计，他们还真就是不那么懂。

但是很显然如果我们对产品这种“老妈子式担忧”不加以转化控制的话，整个ui出来就会因为信息过载而显得非常臃肿。

所以我们除了用A、B 测试的方式获取实际用户数据来衡量是否可以对设计降噪以外，也可以尝试“绞尽脑汁”去想一个方案达到两者平衡。而至于为什么我推荐大家还是努力“绞尽脑汁”，因为实际项目开发中根本没有那么多资源来让你搞A/B。

这里我们来看第一个案例：

这是一个社交类群聊页面改版前的列表样式。

先撇开其他的信息分布问题和视觉优化，我们单纯的关注下右边的按钮。

产品使用这个按钮的初衷是为了让用户通过这个按钮点击去参与群聊。所以产品角度理解就是这个按钮越明显越好，越直白越好。

所以这个按钮对于产品来说是非常OK的，但是对于有职业操守的我们来说，可能就不是那么OK了。

1.是因为它的引导性并不一定就最强，因为无法一眼识别（文字比图形的识别速度永远是慢的）。举个有点味道的例子昂：大家回忆下是不是90%的公厕都会贴个超大的性别图标，而不是只写3个大字“男厕所”or“女厕所”？

2.这种样式带来的信息量相对较大，铺开来看列表全局的时候就容易出现信息过载带来的信息干扰。

那么作为niubility的设计师，在改版的时候我们的首选肯定是要对信息进行降噪，也就是说视觉表达简化、符号化。

那么我们就获得了以下的几个方案：

but转念一想就猜到了，产品接下来要说的话，“能不能把这个图标改回加入聊天四个字，不然用户可能看不懂”。所以又有了下面的设计方案：

右侧短文案可以自定义，辅助理解。

这样一来的话可以通过符号化的视觉提升引导效率，也可以用短辅助信息来辅助用户理解，同时转线为面，减少视觉模块的分散与割裂感。

最后来看上加上左侧信息优化的整体效果对比图。

然后，我们再看一个案例。

一个社交类产品改版前的首页列表样式，先撇开别的，我们重点关注下“已认证”和“在线”标签的视觉样式。

这里的标签存在2个问题：

1.占用了名字行比较大的空间，如果之后再拓展标签形式，就放不下任何别的标签了。

2.信息过载，要用户阅读的文字信息过多，影响识别效率

所以如果按照最简化的逻辑，我们完全可以把在线和已认证完全符号化达到一举两得的效果，很多app也确实都是这么做的。

但回归到特定的用户群，普通的信息简化表达无法满足的情况下我们还可以通过哪些方式提升这些标签的说明和存在感呢？

1.可以通过简化文案、甚至更换文案都提升表意同时减少占用空间

2.变换布局与位置来重组信息结构，提升存在感与理解

3.增加新手引导浮层来进行强制说明

接下来来看下整体列表优化后的效果：

而这里“已认证”其实想表达的就是这个用户是真实的人，认证过照片和本人的匹配度的那种，所以我们可以通过变化文案和位置来更好的进行视觉说明，另外也空出了名字旁的位置留给未来更多的权益标签比如会员和贵族等。

在线的绿点可以通过调整整体大小和位置提升存在感的同时不占用重要的一级信息位置，如果还有表意不明确的顾虑可以采用和“搭讪”按钮一样的引导模式进行新手引导。

以上就是今天实战小case的内容，希望对各位能有亿点点帮助~

作者 | 柒爷
来源公众号 | Nana的设计锦囊（id:NanaUxDesign）

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。