从功能、结构、操作到控件,阐述信息可视化四层阶梯.pdf

从功能、结构、操作到控件 ，阐述信息可视化的四层阶梯 思考来源 每一天 ，人们都淹 在信息的海洋中。用户在主动获取和被动接受过程中 ，都始终避免不开一个“ 效率”的诉求。在这信息海洋 ，用户目前面对了什么样的困境呢 ？ 1 一些设计细节的 “隐藏式”、“折叠式”、“渐进式”设计消耗了用户的快速认知诉求 ； 2 偏于复杂和庞大的功能 ，给界面呈现带来了负担 ，加重了用户操作映射的错乱 ，让用户理解也模 棱两可 ； 3 设计过多的操作点击 ，用户手部肌肉不停运动 ，切换不同页面去查看 ； …… 作为信息传达的设计师 ，如何让信息更直观清晰、剔除不确定性理解 ，是工作中的重中之重。而“可 视化”就是多种高效传递信息方式中的一种 ，对于信息可视化、视觉化、图形化 ，也成了设计圈热捧 的观点和研究方向。 可视化概述 对 于产品的可视化设计 ，主要旨在借助于图形化等直观手段 ，清晰有效地传达与沟通信息 ，形成高 效的功能、使用映射 ，完成用户任务目标。为用户想完成的任务选择 正确的界面元素 ，通过一种能 迅速理解和易于使用的表达方式 ，展现在页面上 ，降低用户的认知负担和物理负担。大概分为四个 层次 ：功能可视化、结构可视化、操 作可视化、控件可视化。 功能可视化 ：即 确定需求优先级的前提下 ，确保优先级高的功能展现给用户 ，让用户易于识别和 查找 ，使设计有正确的层次结构。用户对信息层次的理解需要两个过程 ，首先是快速 捕捉 ，其次是 对具体内容更详细的理解。在快速捕捉阶段 ，其过程中时间跨度短暂 ，通过颜色、对比、定位等 运用 ，突出产品的主要功能点。例如图1韩国著名门户 /有哪些信誉好的足球投注网站引擎网站Naver旗下的Naver Sho pping ，其产品定位即提供商品的有哪些信誉好的足球投注网站服务 ，通过有哪些信誉好的足球投注网站商品名称 ，可以按照商品类别列出几乎韩国所有的 大型电子商务网站提供的该商品链接。所以在界 面上 ，用强对比色调突出有哪些信誉好的足球投注网站功能和导航区。通过 视觉化引导 ，让用户专注于核心内容 ，聚焦用户视线的焦点 ，在白色为主色调的页面 ，视线会先看 到强色调的部 分 ，所以也可以用强色调来突出核心内容 ，让用户的视觉聚焦在那里。 结构可视化 ：即采用用户易于理解的结构 ，让用户对于界面元素关系清晰。如百度统计3.0的有哪些信誉好的足球投注网站推 广效果查看 ，结构采用了漏斗的图形方式 ，达到真正的图表于意 ，表达转化率的概念 ，形象直观。 流程可视化 ：即 让用户在操作时不要迷失方向 ，帮助用户定位 ，避免不明确操作的高成本。美国益 智游戏网站Lumosit y ，在建立定制化大脑训练计划时的流程时 ，顶部采用 步骤轴的图形化方式 ，不 仅用图标“红圈”表明了用户所在的位置 ，也用图标“对号”标明了用户完成了哪些步骤 ，让用户对于整 个流程熟悉。 控件可视化 ：由于控件是产品的最小界面元素 ，是产品质量的基础 ，所以本文重点与大家分享基础 控件的一些可视化案例。 控件可视化 控件是创建界面的主要构造模块 ，是用户可与之交互以输入或操作数据的最直接对象。控件需要用 户消耗大量的注意力和鼠标操作 ，从可视化角度 ，示例以下四个元素的设计区别 ： 控件元素一 ：单选框 单选框 （Radio But t o n ），又叫选项按钮或单选按钮 ，它容许用户在一组选项中选择并且只能其中 一个时使用的控件形式 ，选项之间彼此互斥。 图 某产品界面 ，控件单选框使用错误 ，同时用户必须在脑中想象空间位置 ，再转化为对应文字 ， 点击两次 ，输入两次 ，才能完成。 图5修改后采用图形化表达 ，直观 ，并且减少用户的点击次数 （一次 ）；当用户输入边距时 ，在图形 中对应的边距会出现动态三角 ，给予用户引导 ，防止用户输错。 控件元素二 ：下拉列表控件 下拉列表 （Dro p-dow n List ）相对于单选框 ，同时用于从一组互斥值列表中进行选择一个选项 ，不 同的是下拉列表的按钮数量通常较多。 图6为新药品查询系统的下拉列表筛选控件 ，通过药品形状、颜色、类型等进行筛选 ，对于用户来说 ，认知成本较高 ，不够形象化。 图7Naver的医疗药品的查找筛选控件 ，将品牌、药品形状、颜色、药品材质、药面纹理等通过图形 化表达 ，使信息更直观、形式更有趣 ，增强用户的认知能力 ，提升操作效率 ，集合了趣味性与实 用性。一图胜千言 ，但同时要平衡空间占用和页面加载成本等因素。 控件元素三 ：树形控件 树型控件是供用户浏览按分层方式排列的内容 ，并可与这些内容互动 ，进行单选或多选的控件。 图 8淘宝商城_厨房用具二级页的树形筛选控件 ，比如用户要查找高压锅 ，对于一般新手用户 ，