高效的设计可视化(转载,据说有点偏细节)

结构可视化:即采用用户易于理解的结构,让用户对于界面元素关系清晰。如百度统计3.0的搜索推广效果查看,结构采用了漏斗的图形方式,达到真正的图表于意,表达转化率的概念,形象直观。

高效的设计可视化(转载,据说有点偏细节)

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

高效的设计可视化(转载,据说有点偏细节)

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

高效的设计可视化(转载,据说有点偏细节)

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

控件元素一:单选框

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

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

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

高效的设计可视化(转载,据说有点偏细节)

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

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

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

 2/3   首页 上一页 1 2 3 下一页 尾页

文章TAG:
下一篇