当前位置 鱼摆摆网 > 创业 > 网络营销 >

微交互-可视化设计细节

  作者:鱼摆摆   2020-07-04 18:09

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

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

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

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

1. 降低理解难度

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

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

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

2. 让用户感知变化

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

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

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

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

3. 呼应用户所在的情景

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

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

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

4 提升数据操控感

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

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

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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 yubaibai360@qq.com 举报,一经查实,本站将立刻删除。

[ 标签:微交互 ]

相关文章

  • 全部评论(0
说点什么吧