高效的设计可视化

标签: 设计 可视化 | 发表时间:2012-05-16 15:45 | 作者:刘曼
出处:http://ucdchina.com/rss/all

 

 

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

        1  一些设计细节的 “隐藏式”、“折叠式”、“渐进式”设计消耗了用户的快速认知诉求;

        2  偏于复杂和庞大的功能,给界面呈现带来了负担,加重了用户操作映射的错乱,让用户理解也模棱两可;

        3  设计过多的操作点击,用户手部肌肉不停运动,切换不同页面去查看;

 

       ……

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

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

       功能可视化:即确定需求优先级的前提下,确保优先级高的功能展现给用户,让用户易于识别和查找,使设计有正确的层次结构。用户对信息层次的理解需要两个过程,首先是快速捕捉,其次是对具体内容更详细的理解。在快速捕捉阶段,其过程中时间跨度短暂,通过颜色、对比、定位等运用,突出产品的主要功能点。例如图1韩国著名门户/搜索引擎网站Naver旗下的 Naver Shopping,其产品定位即提供商品的搜索服务,通过搜索商品名称,可以按照商品类别列出几乎韩国所有的大型电子商务网站提供的该商品链接。所以在界面上,用强对比色调突出搜索功能和导航区。通过视觉化引导,让用户专注于核心内容,聚焦用户视线的焦点,在白色为主色调的页面,视线会先看到强色调的部分,所以也可以用强色调来突出核心内容,让用户的视觉聚焦在那里。

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

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

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

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

       控件元素一:单选框

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

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

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

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

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

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

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

       控件元素三:树形控件

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

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

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

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

       控件元素四:列表视图

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

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

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

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

 

 

 

源地址: http://ueo.baidu.com/?p=1126

相关 [设计 可视化] 推荐:

信息可视化(视觉化) 设计

- 虫虫 - 图研所-infographics-图表设计-信息图表-信息设计-信息视觉化专业网站
信息可视化(视觉化)是用一种人脑容易识别的形式,通过图形化的手段来传达知识、建议或者强制性的命令. 下面这张图为你剖析一下信息可视化. David McCandless的新作,还是用金字塔形讨论数据到信息到知识再到智慧的整个视觉认知体系http://www.informationisbeautiful.net/2010/data-information-knowledge-wisdom/.

高效的设计可视化

- - 所有文章 - UCD大社区
       每一天,人们都淹没在信息的海洋中. 用户在主动获取和被动接受过程中,都始终避免不开一个“效率”的诉求. 在这信息海洋,用户目前面对了什么样的困境呢.         1  一些设计细节的 “隐藏式”、“折叠式”、“渐进式”设计消耗了用户的快速认知诉求;.         2  偏于复杂和庞大的功能,给界面呈现带来了负担,加重了用户操作映射的错乱,让用户理解也模棱两可;.

高效的产品可视化设计

- - 雷锋网
【编者按】本文转载自 百度UEO,作者为 @刘曼0722. 对于降低产品对于用户的使用门槛是否也曾经对你造成困扰. 交互设计中对用户体验尤为重视、可视化效果就成了设计中的制高点. 可视化在对商业效果以及用户体验价值的提升上都是非常重要的手段,而如何高效的设计产品的可视化效果就成了值得研究的一个课题.

可视化设计数据分析统计图形框架总结

- - 互联网 - ITeye博客
这些框架,类库或者工具是从30多款主流软件分析对比筛选得出,读者可以根据自己需要进行进一步筛选.       Flex 是一个免费的开放源框架,可用于构建交互性较高、具有表现力的 Web 应用程序,这些应用程序一致地部署在所有主要浏览器、桌面和操作系统中. Flex 提供一个现代、基于标准的语言和编程模型,该模型支持公共设计模式.

让用户体验设计的前期交付物更加可视化

- - 互联网的那点事
Barnabas Nagy ,译者. Barnabas是一名拥有六年从业经验的UX设计师、信息架构师,其对用户体验设计的交付提出一点:“你的合作伙伴未必会看懂你的交付”. 为了让自己的设计能够让人更容易理解,交付一个优秀可视化的成果是一个不错的选择. 在实际的用户体验设计工作当中,作为设计师,我们的一些产出在信息呈现方式及沟通效果等方面做的其实不算理想,尤其是那些涉及到用户角色定义、信息架构分析、功能流程规划的文档.

数据可视化

- Sillywolf - ISD Webteam

可视化编程

- - 酷 壳 - CoolShell.cn
本文来自《 Visual Programming Languages – Snapshots》,作者 Eric Hosick收集了一堆关于可视化编程的工具,好多我都听都没听说过,我一股脑的全转过来,给大家看看,算是开开眼界了. 本文也是参考了Wikipedia的  Visual Programming Language 词条.

数据可视化

- - 人月神话的BLOG
推荐阅读知乎的关于有哪些可视化工具推荐的回答,内容已经相当全面了. 要注意的是当前主流的仍然是基于javasrcirpt开发的图表库,对于偏重的flex不应该做为选择的基础. 下面对一些选择的思路做些简单的说明. 首先可选的主流图表库包括了百度的 Echart,Highchart,D3.js这三个.

大数据的可视化

- - CSDN博客云计算推荐文章
       现在数据管理面临的一个关键性问题是如何将这些海量的来自于四面八方的非结构化数据可视化. 不管你从事于什么行业或者正在从事于哪一方面的研究,正将是你经常会触及的问题. 最近,埃里克•奥彭肖和JR里根做客了商务博客的“金融时代”专栏,讨论的主题为“大数据可视化是‘大数据’的关键机会”,分析了今天大数据的使用者们面临的可视化问题,以及公司为应对这个挑战而付诸的一些创新的方法.

可视化系统搭建

- - 腾讯ISUX – 社交用户体验设计
如何搭建数据可视化系统,用丰富的设计语言清晰表达复杂和庞大数据,并形成鲜明的设计风格. 我们把数据可视化的元素进行拆分并建立相应的规范体系. 六种基本图表涵盖了大部分图表使用场景,也是做数据可视化最常用的图表类型:. 柱状图   分类照片照片什么照片什么什么项目之间的比较;. 饼图   构成即部分占总体的比例;.