易捷网络专注企业网站建设
11年企业网站建设经验、响应式网站建设,兼容PC、手机、平板全
终端,给你更佳的浏览体验...

高效的设计可视化

来源:网站建设行业资讯网
添加时间:2022-02-13

思考来源

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

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

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

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

……

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

可视化概述

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

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

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

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

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

控件可视化

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

控件元素一:单选框

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

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

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

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

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

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

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

控件元素三:树形控件

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

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

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

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

控件元素四:列表视图

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

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

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

总结

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

网站建设计最新案例赏析:


深圳捷益达电子网站制作首页设计效果图
深圳捷益达电子
深圳福工精密科网站制作首页设计效果图
深圳福工精密科
千瑞文化信息有限公司网站制作首页设计效果图
千瑞文化信息有限公司
深圳华璨文化传播网站制作首页设计效果图
深圳华璨文化传播
欧马腾会展科技网站制作首页设计效果图
欧马腾会展科技
广州庄齐实验室工程网站制作首页设计效果图
广州庄齐实验室工程
青岛沃柏斯智能实验网站制作首页设计效果图
青岛沃柏斯智能实验
深圳共安智能科技网站制作首页设计效果图
深圳共安智能科技
吴江正大纺织厂网站制作首页设计效果图
吴江正大纺织厂
江苏天兴环保股份网站制作首页设计效果图
江苏天兴环保股份
 

网站建设行业资讯推荐阅读:


网站建设如何确定关键词网站的产品详情页应该怎么设计网络营销怎么找客源网页设计在网站基本建设中的必要性是啥定制深圳福田网站设计是怎样的哪些因素影响网站建设用户体验Javascript的可选参数网站建设中如何针对SEO优化网站深圳网站建设公司:简洁网页设计技巧58与赶集今天将合并,今日盘前宣布 很好的网站设计制作联系方式 广州网站优化能给企业带来哪些好处软件定制开发的成本高不高不知道的你就来了解了解!深圳企业网站建设之网站栏目页的设计网站设计中弹出窗口设计的4条重要原则如何利用截屏方式为品牌制作话题-深圳网站设计公司分享芈月传、太子妃升职记、百事的千年猴戏电视剧里的营销技巧是什么沙井上市公司的网站建设是怎样的你为用户带来便利,用户给你带来收益如何把网站设计做得更好护肤品网站建设的技巧深圳中小企业网站制作,中小企业网站制作有哪些容易忽略的问题网站SEO优化对长尾关键词应该怎么优化比较好深圳网站建设分享企业网站首页如何布局高端网站定制的方法比免费建站优越在哪方面企业官网建设对企业的发展有哪些帮助灵活的应用nofollow标签网站建设前要做好哪些准备有哪些要素深圳福田网站建设哪家公司好,如何快速建设一个企业网站网站建设和网站后期运营有何联系深圳网站建设报道:微博联手360等推出自媒体平台 网页设计有哪几种常见艺术流派手机网站建设重要性越来越高SEM竞价是啥服务项目方法有什么如何进行电子商务网站建设新手做网站开发需要掌握哪些技术PHP程序语言开发网站的优势在哪里网站建设有什么地方不可忽略如何避免失去客户的网页设计技巧如何在传统的互联网营销中创新网站建设周期长短的影响因素有哪些有料!这样的网站设计才是较好深圳企业网站建设方案,家装行业做网站建设有哪些要求网站怎么才能做到有特色搭建物流网站建设制作要注意什么呢模版网站是否适合做搜索引擎优化营销型网站建设不可不知的三大原则WebApp触屏版网站开发有哪些要点企业网站建设的重要性极其主要目的是什么KindEditor4.1.10IE11复制粘贴总是到文章末尾的BUG深圳网站定制,定制网站建设有哪些步骤企业网站最常见的模块功能金融网站开发建设的技巧有哪些分享网站的用户粘性要如何提升 好口碑的网站设计制作专业定制 标准的网站制作是怎样的房地产网站提升怎样做有什么方法网站改版与网站重建有什么不一样哪个更重要些网站建设中需要注意的几个问题网站建设更应该遵循用户体验原则
企业网站建设行业信息服务发布平台!
(www.fantodo.com)版权所有
QQ在线咨询