视觉设计的高效可视化(2)

       流程可视化：即让用户在操作时不要迷失方向，帮助用户定位，避免不明确操作的高成本。美国益智游戏网站Lumosity，在建立定制化大脑训练计划时的流程时，顶部采用步骤轴的图形化方式，不仅用图标“红圈”表明了用户所在的位置，也用图标“对号”标明了用户完成了哪些步骤，让用户对于整个流程熟悉。

       控件可视化：由于控件是产品的最小界面元素，是产品质量的基础，所以本文重点与大家分享基础控件的一些可视化案例。

       控件是创建界面的主要构造模块，是用户可与之交互以输入或操作数据的最直接对象。控件需要用户消耗大量的注意力和鼠标操作，从可视化角度，示例以下四个元素的设计区别：

       控件元素一：单选框

       单选框（Radio Button），又叫选项按钮或单选按钮，它容许用户在一组选项中选择并且只能其中一个时使用的控件形式，选项之间彼此互斥。

       图4某产品界面，控件单选框使用错误，同时用户必须在脑中想象空间位置，再转化为对应文字，点击两次，输入两次，才能完成。

       图5修改后采用图形化表达，直观，并且减少用户的点击次数（一次）；当用户输入边距时，在图形中对应的边距会出现动态三角，给予用户引导，防止用户输错。

       控件元素二：下拉列表控件

       下拉列表（Drop-down List）相对于单选框，同时用于从一组互斥值列表中进行选择一个选项，不同的是下拉列表的按钮数量通常较多。

       图6为新药品查询系统的下拉列表筛选控件，通过药品形状、颜色、类型等进行筛选，对于用户来说，认知成本较高，不够形象化。

       图7Naver的医疗药品的查找筛选控件，将品牌、药品形状、颜色、药品材质、药面纹理等通过图形化表达，使信息更直观、形式更有趣，增强用户的认知能力，提升操作效率，集合了趣味性与实用性。一图胜千言，但同时要平衡空间占用和页面加载成本等因素。

       控件元素三：树形控件

       树型控件是供用户浏览按分层方式排列的内容，并可与这些内容互动，进行单选或多选的控件。