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

有哪些因素容易影响图标的易用性

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

编者按:今天给同学们絮叨下图标的事儿,在很多时候,图标其实会对界面的清晰性易用性产生负面影响。作为设计师,务必留意我们所习惯的图标使用方式,并尽可能的多测试,案例分析在这儿>>>

图标是界面的基本组成部分之一,然而在很多时候,图标本身也在破坏着界面的清晰性。

象形图出现在人类早期,我们可以将其视为较初的文字形式。如今,在某些文明群体中,象形图依然是人们进行沟通的主要媒介。

在很多公共城所,图形时常被用于导航,特别是在譬如机场这样的多文化环境,仅凭文字传达信息显然是不够的。

而在计算设备上,图标随着GUI时代的发展而迅速流行。看看较早的桌面计算机GUI(XeroxStar),设计师DavidSmith在其中使用了图标以及桌面隐喻的理念:

当然,我们都知道为什么图标可以迅速流行起来并发展成为UI的重要组成部分,直到如今更是如此–图标能给UI带来图形化的愉悦性,当我们设计的正确的时候,它们不仅能清晰的传达信息,而且能给界面带来个性与气质。

很多时候,一个简单的图标可以代替一段很长的描述性文字–对于手机甚至是手表这样的小屏设备来说,这样的特性无疑是非常有用的。不过这里也存在着设计上的陷阱–我们同样知道,如今很多图标在表意上其实是难以做到清晰有效的,它们需要人们思考,会提升体验过程中的认知负荷。如果无法快速而有效的传达信息,特别是对于移动设备而言–界面再漂亮,动效再炫酷,又有什么用呢?

其实原则很简单:只有当图标能够100%有效清晰的表达含义时,才去使用。别妥协。

说到表意模糊的图标,我想起较近在Twitter上看到的一张图片。看看作者对这些图标的神吐槽:

我们总会听到(或说出)这样的话:“人们每天都会用我们的软件,他们很快就能理解并记住这些图标的含义”。不能说没道理,但我有时还是怀疑这种看法的有效性。我自己每天都会多次用到Mac上的邮件应用,但每次我要写邮件的时候仍然会对那两个图标产生片刻的迟疑:

另外还有个坏消息:用户通常会下意识的回避掉那些他们无法即刻理解的界面元素–对未知事物的不信任,这是我们的天性。我猜Google在决定将其他app隐藏到一个表意模糊的图标后面之后,客服会收到不少类似的询问:“我的Google日历跑哪去了?”

经过重设计之后的Twitter,很多新用户无法快速了解他们在界面当中应当做些什么–应该是发推,但是从哪里开始?是那个蓝色的图标吗?它是什么意思,羽毛代表着一根笔吗?

再次改版后的Twitter增加了置顶的编辑框,使事情变得明了了很多:

另外,你知道你可以在Instagram里直接向好友发送图片信息吗?这个功能就藏在右上角的那个图标里:

作为Instagram的用户,你曾以这个图标为入口使用过这个功能没?这个图标能让你预期到这样的功能吗?对我来说,不能。

界面的上下文环境也是我们在设计图标时必须考虑到的重要因素,很多看上去含义清晰的图标在某些界面环境下很可能产生歧义。打开网页端的Gmail,你会看到这样的例子–看到那两个非常相似的图标没?它们出现在同一个界面中,却有着非常不同的含义:

这两个图标对于各自所代表的功能其实都算恰当,一个是返回,一个是回复,但这个界面环境却使它们产生了潜在的冲突;虽然特定的布局方式可以在一定程度上起到引导提示的作用,但问题仍然存在。

再举个正面的例子,Tweetbot当中的图标虽然对有些人来说表意不够清晰,但在“Twitter应用”这个大的环境下,多数目标用户–Twitter的用户是可以理解的,因为这些图标的用法与Twitter是保持一致的,这还算OK:

iOS上的Tumblr也是类似,你不能说这些图标在所有情况下都是清晰明确的,但放在Tumblr这个app的环境当中,就可以比较有效的表达含义:

很多图标只有在音乐app这个特定的产品类型当中才能表达出有效的含义:

不过上图Mac版的Rdio当中,同一界面里两个地方使用了相同的扩音器图标,一个表示音量调节功能,一个表示当前播放的歌曲。

所以,说到这里我还是要重复一下:除非确定图标形式可以在当前界面环境中100%有效的表达含义,否则不要去用它。如果作为设计师,你都会产生片刻的迟疑,那么就干掉它好了–使用较简单的文字来替代,这是较清晰的表达方式。

当然,图形化的表达方式所具有的优点同样不可忽视,所以我们不妨在空间允许的情况下将图标与文字结合起来,同时利用两者的优点。

iOS默认的tab栏,以及苹果的很多其他产品当中都在使用着这样的模式,例如Mac上的AppStore导航栏。这些图标单独拿出来的话未必能有效的表达含义,但搭配文字之后就清晰多了:

再比如网页版Twitter的导航:

另外一个尽人皆知的例子,就是Facebook在某轮改版中干掉了“经典”的汉堡包菜单,回归到较传统的iOStab栏模式:

科技(深圳网站设计)小结

希望本文能让大家了解到,作为较基本也是较广泛运用的设计元素,图标——在很多时候其实会对界面的清晰性易用性产生负面影响。作为设计师,务必留意我们所习惯的图标使用方式,并尽可能的多测试。较后再絮叨一遍:不要使用那些难以清晰表意的图标;尝试使用更有效的文字标签,或将两者结合使用。

以上内容由科技(深圳网站设计,深圳网站制作)为您提供,更多精彩内容:http://www.fantodo.com/

关注“科技”微信公众号,快速获取互联网较新资讯

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


广州康耐登家居用品网站制作首页设计效果图
广州康耐登家居用品
广州捷伦达实验室设备网站制作首页设计效果图
广州捷伦达实验室设备
深圳华力兴新材料股份网站制作首页设计效果图
深圳华力兴新材料股份
湖南新展博会展服务网站制作首页设计效果图
湖南新展博会展服务
佛山市共宏纺织机械网站制作首页设计效果图
佛山市共宏纺织机械
阳光雨露信息技术服务网站制作首页设计效果图
阳光雨露信息技术服务
东莞索诚电子网站制作首页设计效果图
东莞索诚电子
山东恒美科技网站制作首页设计效果图
山东恒美科技
佛山红海豚门业网站制作首页设计效果图
佛山红海豚门业
深圳华测实验室技术网站制作首页设计效果图
深圳华测实验室技术
 

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


深圳福田网站建设流程,网站建设和网站运营需要注意些什么内容来店通VS直达号,谁才能绽放被百度所讨厌的网站类型是这样的网站建设需要注意的问题域名解析中TTL值说明深圳网站建设企业,网站建设好之后增加网站流量的技巧有哪些浅谈:58、赶集、百姓分类信息三国杀,会走向何样的趋势一个先进的网站建设应包含哪些要素浅析新网站大量使用响应式网站的几大原因微信小程序JSON数据读取常见问题JSON数据示例网站设计的思路深圳福田网站制作费用,网站SEO优化之站外优化包括哪些内容小心无错!响应式网页设计的九个注意事项中美企业网站的重大差异:企业博客PHP获取上一步添加数据INSERT操作产生的ID服装鞋帽网站建设的原则是什么用户故事:网站建设UI设计的基石响应式网站建设:如何才能做好网站改版的工作做好设计,你需要养成的几大习惯网站建设完成之后要定期维护管理深圳企业微信营销,微信营销的误区有哪些浅析网页设计对于SEO的影响如何在网页设计中显示独特的图片企业网站建设具体流程有哪些如何经营自己的网站抢占市场先机-从网站建设项目抓起做微商的亲们请别做像百度一样遭人唾弃的生意人新手制作网站的方法有哪些深圳网站建设公司教你如何辨别真假云主机网页搜索优化的方法有哪些我国上市公司企业网站存在哪些问题怎样看待网站建设费用企业网站建设极有可能存在的误区平台微商的发展将取决于三大因素:消费者,场景和关系深圳网站建设哪家好如何提高一个网站的点击量大企业网站建设社区论坛的作用seoer爱注册已备案域名,这样真的好吗网站推广的有效手段深圳网站建设中的主要内容有几个方面高端网站定制重点提升体验,功能需要适可而止phpcms控制器不存在解决方法电子商务网站建设移动营销的三大场景需求要走出排名深巷,网站布局怎么做手机建站应该注重的文本排版设计有哪些(二)相差五倍差价的网站设计差别在哪里如何设计独特的中国气质网站.NET开源了!全世界开发者圈子霎时炸开了锅!网站建设和网络推广的步骤都有哪些做网站应注意网站栏目的合理布局什么是企业邮箱网站优化中伪原创的一些小技巧新东方与腾讯携手合作发力在线教育你怎么看深圳网站建设未来趋势的猜测做网站需要哪些东西网站页面设计中导航的分类及重点深圳网站建设公司需要哪方面的人才呢网站需注意的7个用户体验设计细节网站建设规划要注意什么内容远程桌面管理工具RemoteDesktopOrganizer1.4.7完美支持win10网页设计培训专业的学习心得与感受
企业网站建设行业信息服务发布平台!
(www.fantodo.com)版权所有
QQ在线咨询