高效的产品可视化设计

【编者按】本文转载自 百度UEO，作者为 @刘曼0722。对于降低产品对于用户的使用门槛是否也曾经对你造成困扰？交互设计中对用户体验尤为重视、可视化效果就成了设计中的制高点。

可视化在对商业效果以及用户体验价值的提升上都是非常重要的手段，而如何高效的设计产品的可视化效果就成了值得研究的一个课题。

每一天，人们都淹没在信息的海洋中。用户在主动获取和被动接受过程中，都始终避免不开一个“效率”的诉求。在这信息海洋，用户目前面对了什么样的困境呢？

1.  一些设计细节的 “隐藏式”、“折叠式”、“渐进式”设计消耗了用户的快速认知诉求；
2. 偏于复杂和庞大的功能，加重了用户操作映射的错乱，让用户理解也模棱两可；
3. 设计过多的操作点击，用户手部肌肉不停运动，切换不同页面去查看；

作为信息传达的设计师，如何让信息更直观清晰、剔除不确定性理解，是工作中的重中之重。而“可视化”就是多种高效传递信息方式中的一种，对于信息可视化、视觉化、图形化，也成了设计圈热捧的观点和研究方向。

对于产品的可视化设计，主要旨在借助于图形化等直观手段，清晰有效地传达与沟通信息，形成高效的功能、使用映射，完成用户任务目标。为用户想完成的任务选择正确的界面元素，通过一种能迅速理解和易于使用的表达方式，展现在页面上，降低用户的认知负担和物理负担。大概分为四个层次：功能可视化、结构可视化、操作可视化、控件可视化。

功能可视化：即确定需求优先级的前提下，确保优先级高的功能展现给用户，让用户易于识别和查找，使设计有正确的层次结构。

用户对信息层次的理解需要两个过程，首先是快速捕捉，其次是对具体内容更详细的理解。在快速捕捉阶段，其过程中时间跨度短暂，通过颜色、对比、定位等运用，突出产品的主要功能点。

例如图1韩国著名门户/搜索引擎网站Naver旗下的Naver Shopping，其产品定位即提供商品的搜索服务，通过搜索商品名称，可以按照商品类别列出几乎韩国所有的大型电子商务网站提供的该商品链接。所以在界面上，用强对比色调突出搜索功能和导航区。通过视觉化引导，让用户专注于核心内容，聚焦用户视线的焦点，在白色为主色调的页面，视线会先看到强色调的部分，所以也可以用强色调来突出核心内容，让用户的视觉聚焦在那里。

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

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

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

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

控件元素一：单选框

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

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

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

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

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

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

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

控件元素三：树形控件

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

图8淘宝商城_厨房用具二级页的树形筛选控件，比如用户要查找高压锅，对于一般新手用户，会来回点击厨房/餐饮用具的子分类，展开子分类，然后扫视每行字是否有高压锅，直到确认找到。树形控件承载的信息越多，认知的负担就会越重，浏览查找越困难。新手用户可能无法完全理解树的布局，只有当他们在对树操作一段时间之后可能会形成一个关于其关系的心理模型，成本较高。

图9 Naver Shopping_厨房用具二级页的分类筛选，采用了图标加文字的形式，同样是查找高压锅，虽然是韩语，但是恰当的使用具象化图标，使用户基本上看懂，可以缩短用户操作时间，让用户更快捷地找到目标链接。对于中高级用户，对网站更加熟悉后，图标就更方便了。

与软件的设计主要针对中间级用户的不同，web界面设计需要针对新手及初级用户。用户在网站上愿意为之所付出的学习成本更低，更加缺乏耐心，则web界面需要更直接，让用户认知过程更短。而文字本身并没有视觉传达功能，恰当的使用图标，把要表述的功能可视化呈现给用户，可以缩短用户操作时间，往往效果更好。但也要根据用户效率，否则会成为鸡肋。

控件元素四：列表视图

列表视图（List View）是一个显示项目集合的扩展列表框控件，用于通过单选或多选的方式，查看并操作一个数据对象集合。

图10 SNS常用的好友分组和管理，采用列表的方式，列表目录清晰，但用户对其的选择管理成本稍大，特别是对于批量管理复杂。

图11 google+“圈子”，查看更直观，批量管理操作也更简单，通过拖拽方式对用户分组，强调对好友的少层级管理，保证页面简洁，让体验变得有趣而可爱，更符合用户的心理模型。

总之，围绕着“快、明确、高效”的信息传递定位，揭其根本从功能模块、任务流程、界面控件元素、信息承载等方面去提升体验的有效性和合理性，设计中根据目标受众的需求、行为，合理运用可视化方式，使产品更易用，提高用户体验。

原文链接： 百度UEO