微交互-可视化设计细节

前言： 大家在使用产品时是否有过这样的感受，产品中一个不经意的小细节、小功能点突然让你对产品好感倍增，比如一个温馨的提示、一个便捷的操作，或一个有趣的反馈等等。这些能让用户产生共鸣的“微交互“设计，给用户带来了小确幸，也让产品显得更有人情味。同时也是设计所坚持的初心，对用户的关怀，以及设计师匠心态度的体现。

本文将对微交互以往案例中和“可视化”相关的案例进行归纳。

Nathan Yau在《数据之美》中写到，可视化并不仅仅是一种工具，而更像是一种媒介，能最大化帮助我们挖掘数字背后的信息，让数据“开口”讲故事。可视化设计将信息和数据转化为用户更能够理解的图表、图形和地图等元素，通过色彩、样式凸显其中的变化，帮助用户更高效的获取信息，判断趋势，识别变化等。

那么在可视化设计中怎样让用户能够更好的看清看懂数据或信息，让用户快速感知数据变化，让数据于用户所处的情境相呼应是微交互思考的方向。

1. 降低理解难度

通过可视化表达，将不易理解的信息呈现的更加清晰明了，帮助用户理解吸收。

案例一：CRO监控大屏-在有地球的实时监控大屏上，增加与当天一致的晨昏线数据。在观看实时业务数据的同时，也能了解当时昼夜变化所带来的影响。让监控者所观察的数据更加立体，使判断更全面。

案例二：D2 SQL编辑器可以将代码转为结构化的流程图，同时通过颜色和图形标识各节点，让代码阅读者能更好的理解代码结构。

2. 让用户感知变化

可视化中变化的凸显能够帮助用户快速达成目标，在最少的时间内获取更多的信息，并引导用户进行更深层次的探究。

案例一：雪球的股票 list，每条 item 的背景颜色会随着实时的涨跌情况闪现红色或绿色，在 list 页做到实时状态前置。

案例二：掌上运维APP 将数据趋势与预警变更等相关信息结合进行展示，让用户在查看数据的同时获取到可能引起数据变化的原因信息，便于更快捷的处理。

案例三：MTEE策略对比，通过色彩的变化标识两个版本策略的不同，让用户更直观的获取策略的改动点。

3. 呼应用户所在的情景

在可视化中增加与用户情境相关的元素，能够让用户获得更贴切，更直接的信息感知。

案例一：菜鸟裹裹，在物流详情页将包裹状态图像化呈现，用更可视化的方式呈现包裹出发地、现在所处的位置、距离终点距离、终点站、经历时间等信息。更加直观的呈现信息，让用户心中有数，增加用户对于物流的信任和好感。

案例二：蚂蚁财富，基金收益曲线最后的设计了盈利情况标记，盈利为红色，亏损为绿色，让用户快速感知收益的情况，“是盈利还是亏损” 以及是 “盈利或亏损了多少”。

4 提升数据操控感

提供足够便捷的筛选或操控组件，方便用户查看更多视图空间，快速定位想要的内容。

案例一：小睡眠app中，以雷达图的变形来展现当前播放的声音，点击对应的图标可以开关声音；通过滑块可以调整声音的强弱组合，实时的可视化展现，易于用户理解。

案例二：OBERHAEUSER中将将雷达图的维度设计为可调整的方式，保障了雷达图的高可读性，拖拽的切换方式相当便捷。

案例三：阿里云WAF安全防护产品，采用可视化的表现用户受攻击情况，通过拖动滑杆和点击数字控制折线图和列表的显示内容，帮助用户迅速定位目标事件，一键完成所需的防护设置。

在可视化设计中插入微交互可以让用户更好更便捷的获取信息，理解信息，并引导用户进行进一步的操作，让信息变得更加有效直接。