图标可用性

4.适合并能提高计划的美学诉求。

3.容易快捷识别(设计得好的图景下)——尤其对于那个常见的或者使用过的标准图标来说 无需翻译,那多少个考虑了文化差距的图标设计是国际通用的。(例如,邮箱在不同的国度会有不同的规范,不过信封却是一样的,由此对待,信封是一个一发国际化,更适用于电子邮件的图标。) 

通用图标少之又少

用户只对个别多少个图标有着通用的认识,例如主页,打印以及放大镜图标代表的物色等等。除此之外,大部分的图标由于其在各样界面中的不同用法,在用户看来如故是暧昧的。久而久之,这种原则的缺失让图标在界面中的应用成为企划之痛,因为用户无法指望每趟见到那一个图标时它们都表示着相同的意义。

三条杠形状被俗称为“杜塞尔多夫”的图标就是个很好的事例,它变成通用图标还有很长的路要走。大部分施用中运用这么些图标代表了着力航菜单,而还有一些用它(或是分外像样的图标)来代表列表。例如,清单管理使用Buy
Me a
Pie就用这个图标来触发打开常用添加项的列表。更令人困惑的是,这些图标处在输入框的动手,而平凡这里出现的图标会是一个交到输入框内容的按钮。(实际上,界面中输入框和图标有着分别独立的功效,假使您以为在界面中输入文字后点击这一个图标会显示一个依照输入举办过滤后的列表,这您就错了。)

Buy Me a
Pie安卓版使用了五个五颜六色条的“开普敦”图标,用于打开常用项的列表,这与常用的导航菜单用法有很大的界别,不过情调上的拍卖不足以让用户认识到那些图标有着不同的意思。

心形和星形也是在不少常让用户误解的图标中的。它们常被用来代表喜欢,书签,特其余或者其他用户的评分。用户对这个图标的疑惑不仅来自那一个图标在不同站点中所代表的具体效果不一,也一如既往来自这六个图标的周旋统一。结果就是这么些图标以及它们的现实性意思就很难被用户记住,也很难解释得了解。例如,在布置假期出游的网站Combadi,用户可以经过心形图标来标记自己“喜欢”某个行程,不过那个行为并从未将以此路程保存下来以便于将来重播。(在前不久的用户测试中我们发现用户不太认同任什么人都足以“喜欢”一个里程的定义,他们认为唯有购买过这么些路程的人标记的欢喜对他们才有参考价值)比较之下,专门针对室内装饰的购物网站Fab里的心形图标就能将这几个物品保存下来,方便下次查看。

心形图标在Combadi(左图)相比较Fab(右图)功效就相比局限,它不能够用来保存商品到收藏列表,虽然Combadi在非常相似的岗位上采纳了同样的图标

就是是再小的功用可能含义的例外都会阻碍用户再度看到这么些图标时对它的知情和信任。

就在下周(译者注:那篇小说公布于7.27),我们揭露了一个关于网站在其主旨航栏中行使时钟图标的可用性报告,即使图形本身的识别度很高,用户都知情它是一个时钟,可是那个图标的在此案例中的含义是不行模糊的,因为网站并没有将以此图标用作它看起来所表现出的意思,而是作为导航历史记录,点击会打开一个侧边栏,展现用户如今访问过的页面。但是测试的结果是尚未一个受测用户去点击它。模糊的图标=无意义的法力

—————–我是分割线—————-

在图形用户界面中,图标除了通过其颜色和体裁来传播品牌特色之外,应当事先考虑界面语言的传言。依据定义,图标是实体、操作或创意的视觉展现,但万一用户看到这些物体、操作可能创意时,不可能知道精晓其含义,图标就会成为虚幻的摆设,而且还会变成阻挠用户完成任务的视觉困扰。

5.当一模一样的图标和体制用在不同的地点时,能给用户提供产品多样的定义,增强产品间的关联。

即使图标有上述这么多潜在的优势,当设计未充裕考虑到图标潜在的问题时,它们等同会给用户界面带来了可用性问题。

本文同样来自NNgroup,视觉设计不仅要考虑美观,用户体验的探讨进一步必不可少。

欢迎关注本身的微信公众号“开卷有译”得到新著作推送。如需转载请申明来源民众微信号“开卷有译”,或简书译文地址。

图标设计的小提出

当你决定给你的界面中计划图标时,请先做调研!先去看望这一个你的竞争对手使用的或者产品目的平台常用的图标,因为这么些是您的用户最熟稔的。

假定您无法不要统筹一个新的图标,你可以参考一下的指南,尽量将它计划得容易辨识和纪事:

1.保持简洁。裁减图形的底细尽量少添加一些个性元素远比制作一个效应实在逼真的图标更易于进步识别度。(复杂的底细在小尺寸的图标上很难识别)

2.五秒原则:假诺您想出确切的图标来表述你的计划性意图,花了您超越5分钟的光阴,那么似乎那个意思很难通过简单的一个图标传达出来。

3.测试图标是否容易辨认:问问身边的人他们觉得这些图标是怎么样看头。

4.检测图标是否容易被铭记:告诉他们图标的意义后,过上多少个礼拜再问问她们是否还记得这么些图标是什么意思。

5.采纳文字襄助。正如布鲁斯Tognazzini(NNgroup的首席设计师)说的“一言胜千图”

图标需要文字援助

几乎拥有的图标都会遇见让用户觉得模棱两可的题目,为了缓解这一个问题,我们应有给图标配以文字标记,给用户在特定的现象中澄清它的意思。(即便使用正式图标,通常配上文字也会是个更安全的抉择,尤其是当您对这些图标做了一部分适合自己审美偏好的微调。)

图标的文字应当总是可见的,不遵照用户的操作来呈现或是隐藏。对于导航里使用的图标,文字更是卓殊重要的。不要过度依赖让用户悬浮图标来呈现文字:这不但进步了用户的互动成本,也不可以在用户选用触屏界面时生效。

Usability.gov在网站的每一页中都显得了长足导航的图标,用于神速跳转到设计格局、设计文档和模版以及设计规范的页面。倘若自身让这篇作品的每个读者都给我发一个她内心中能代表“设计形式”的图标,我能一定自己将选拔大量两样的答案。正如我辈连年前在《网站主页可用性设计规范》中涉嫌的,“倘使你着想要在导航里使用图标,用户将很可能麻烦鉴别它们。”就算他们在活动端的站点上发现到文字的基本点并且使用文字帮忙表达了图标的意义,可是她们在桌面版本上却潜藏了这一个文字,唯有当用户感到感叹将鼠标移动到图标上才面世。在桌面端的网站里,他们将导航菜单固定悬浮在页面的左边,以确保用户在前后滚动时仍然可以快捷的拓展页面的跳转,这表达了她们以为这多少个导航很要紧对用户很有用。可是,将图标的增援文字隐藏却将这一个导航的职能变得毫无意义,与原本的设计意图不快心满意。

Usability.gov网站移动端将导航图标放在页面的顶部,配以帮手文字。桌面端将导航定位悬浮在页面的左侧,可是只有在用户悬停的时候才显得文字。那迫使用户去发现文字来通晓导航的意义,降低了图标导航的效率。

1.制作卓绝的点击区域:图标的尺码往往丰裕大,用户可以很容易地在触屏界面中点击操作,对于鼠标来说也是如出一辙的。(文字链接在触屏上易造成用户阅读与点击的非正常称。)

2.节省上空:图标充裕小巧,工具栏、面板等控件在相持狭窄的上空里也得以展现许多图标。

图标能给图形用户界面(GUI)带来以下好处:

相对尺寸有助于加强用户关心

平日,图标在小叔子大上比桌面端网站可能应用中看起来更加简明,我们在规划中很容易去假定当一个图标在活动端看上去没有问题时,这多少个图标一定可以行使在桌面端的出品中。可是实际并非如此!在手机屏幕上,唯有一定量的元素在引发用户的注意力(道理很简单,因为手机屏幕更小,只能放少量的信息)。相相比之下,桌面端的屏幕要大得多,平常有广大的始末,用户很容易会失去一些音信,当然这取决界面中哪部分的消息在吸引他们的注意力。假使用户在二哥大上看出的界面元素是由一个标志,一个大标题,一个图片和一个菜系图标组成,那么这么些菜单图标比同等界面在桌面端里的图标会有更大的机遇受到用户的关心,因为在桌面端上,整屏都是引发用户注意力的始末,而那多少个图标仅仅是呆在某个角落里。

就此在图标设计中也应有考虑它与界面中此外因素的对峙大小。在一个正规移动版网站的页眉上,奥斯陆形状的食谱图标大约会占据页面宽度的20-25%,而将那一个设计使用到更大屏幕尺寸的设施上时,通常都拔取的是一律的高低。这样造成的结果就是在桌面端(或是大尺寸的机械,尤其是在横屏形式下),图标看起来会小得多,而且在界面其他因素的搅扰下,变得尤为不明了。要缓解这些问题,可以在大屏设备上(平日会有很多空中)直接将菜单项都来得出来,而非保持隐身在休斯敦(Houston)图标里。那样不光可以让菜单项更易于发现,也能够避免过多由隐藏导航带来的可用性问题。

Upworthy.com: 用于开拓主菜单的三条杠“加拉加斯”图标在移动端占据了站点标志下导航栏20%的增长率。查看它的桌面版本时,这多少个主菜单的图标仍然接纳同一的尺寸,即便导航栏已经变大了诸多。结果是这一个图标仅仅占桌面宽度的3.5%左右(这样总括的底蕴还不曾算上网站两侧的留白区域)。相对尺寸的界别以及桌面端更多因素在吸引用户的注意力,也表明了干吗图标在活动端更易被用户发现和理会到。

阅读原文请戳传送门