结构可视化：即采用用户易于理解的结构，让用户对于界面元素关系清晰。如百度统计3.0的搜索推广效果查看，结构采用了漏斗的图形方式，达到真正的图表于意，表达转化率的概念，形象直观。
流程可视化：即让用户在操作时不要迷失方向，帮助用户定位，避免不明确操作的高成本。美国益智游戏网站Lumosity，在建立定制化大脑训练计划时的流程时，顶部采用步骤轴的图形化方式，不仅用图标“红圈”表明了用户所在的位置，也用图标“对号”标明了用户完成了哪些步骤，让用户对于整个流程熟悉。
控件可视化：由于控件是产品的最小界面元素，是产品质量的基础，所以本文重点与大家分享基础控件的一些可视化案例。
控件是创建界面的主要构造模块，是用户可与之交互以输入或操作数据的最直接对象。控件需要用户消耗大量的注意力和鼠标操作，从可视化角度，示例以下四个元素的设计区别：
控件元素一：单选框
单选框（Radio Button），又叫选项按钮或单选按钮，它容许用户在一组选项中选择并且只能其中一个时使用的控件形式，选项之间彼此互斥。
图4某产品界面，控件单选框使用错误，同时用户必须在脑中想象空间位置，再转化为对应文字，点击两次，输入两次，才能完成。
图5修改后采用图形化表达，直观，并且减少用户的点击次数（一次）；当用户输入边距时，在图形中对应的边距会出现动态三角，给予用户引导，防止用户输错。
控件元素二：下拉列表控件
下拉列表（Drop-down List）相对于单选框，同时用于从一组互斥值列表中进行选择一个选项，不同的是下拉列表的按钮数量通常较多。
图6为新药品查询系统的下拉列表筛选控件，通过药品形状、颜色、类型等进行筛选，对于用户来说，认知成本较高，不够形象化。
文章TAG：
