欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

提高可用性!6个新人进阶该学的图标设计小技巧

发布时间:2017:03:21 17:01:17 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1715个文字,预计阅读时间5分钟
导语
编者按:新人学习图标设计,好看固然要紧,但更关键的是图标的识别性和可用性,今天这篇好文总结了6个提高图标

  编者按:新人学习图标设计,好看固然要紧,但更关键的是图标的识别性和可用性,今天这篇好文总结了6个提高图标识别性和可用性的技巧,来收。

  欢迎关注点融设计中心DDC微信公众号:「微信ID:DR_DDC」

  在早期的计算机图形学领域内,图标只能在有限的范围内被使用。从人机交互的角度来说,使用图标比使用文本更具有优势,原因如下:

  简单、醒目、而且友好,可以取代一段冗长枯燥的描述;

  随着屏幕尺寸变的越来越小,使用图标可以节省空间,这点是很受欢迎的;

  使用图标看起来很舒服,并能增加设计的艺术感染力;

  最后(但同样重要的是),在大多数应用中使用图标,是一种为用户熟知的设计模式。

  尽管图标有这些潜在的优点,但如果设计时不考虑其潜在的负面影响,也会常常导致可用性问题这篇文章致力于总结UI中与图标相关的一系列主要问题,并提出一套对这些问题的解决方法。您可以在图标设计中使用这些技巧作为起步,来更好地完成工作。

  1. 图标应传达含义

  设计师们有时会过于注重形式,忽略了本身的功能,广州网站建设,导致图标难以识别,这打破了它最重要的图形意象属性-图标的传达含义功能必须放在首位。按照定义,图标是一个对象或动作的视觉体现。如果对于用户而言,这个对象或行动不明确,该图标就立刻失去它的实用价值,并成为一个视觉干扰。

  以下是一些在用户心中享有普遍共识的图标。(首页、打印机、用于搜索的放大镜都是属于这种类型)。

  

提高可用性!6个新人进阶该学的图标设计小技巧

  △ 容易辨识的图标

  但除了这些例子,对用户而言大部分图标的意思仍旧模棱两可,以为它们还具有不同的含义。例如游戏中心图标,是一组色彩鲜艳玻璃感的圆圈。这代表了什么含义?它与游戏有什么关系?

  

提高可用性!6个新人进阶该学的图标设计小技巧

  △ 游戏中心图标无法传达游戏的概念

  看看另一个例子︰ 当谷歌决定简化 Gmail 用户界面,把所有功能隐藏在一个抽象的图标之下,他们得到的是一大堆用户的帮助请求,比如“我的谷歌日历在哪里?”

  

  △ 桌面端的GMAIL界面

  无论你能理解多少这个图标的含义和代表的功能,对初次看到这个图标的用户来说体验仍旧可能完全不同。假定用户都熟悉这些抽象的图形是一个普遍的错误。

  图标的首要任务是引导用户去他们需要去的地方,所以请确保他们能够实现这个目标︰

  使用 5 秒钟规则︰ 如果花了你超过5 秒考虑一个合适的图标。这个图标不太可能有效地传达含义。

  选择熟悉的图标:用户对图标的理解往往基于以前的经验。让自己熟悉竞品所使用的图标和常用的目标平台上的图标(现有系统图标),那些是用户最容易辨认的。

  2. 保持图标的简单和示意

  在大多数情况中,设计图标无需发挥创意。别误会,并不是说创新图标是不好的,但基本功能太花哨的图标可能会对用户体验产生负面影响。如果你想展示你的设计技能,你可以依靠其他设计元素传达你的产品信息,同时保持系统图标的设计简单、现代、友好。

  图标设计理念的本质是减到最简形态-简化图标是出于降低学习曲线的需要。设计应确保即使图标在小尺寸更具有可读性和清晰度,所以精心设计的图标应该能够快速辨认,一目了然。

  3. 包含清晰可见的文本标签

  良好的用户体验可以定义在很多方面,但衡量标准之一是减少了多少用户思考的成本。清晰是一个 好界面的最重要特征。图标的设计应该帮助用户毫不费力知晓他们要做什么。但是,图标的问题在于用户会基于之前的经验对每个图标联想出不同的含义。假定用户(特别是手机用户)会为了探索每个图标的功能而一一试用是另一个常见的误解。

  

提高可用性!6个新人进阶该学的图标设计小技巧

  △ 苹果邮箱的标准化屏幕。你能准确的定义每个图标表达的含义吗?

  事实上,用户面对不熟悉的界面常常有不安全感,而且并不会到他们的舒适区域之外探索。在一些特殊的上下文环境里,为避免几乎所有图标都可能会产生的歧义,应该在图标周围设计一个文本标签用于清晰表达其含义。为用户在点击前设定清楚的预期。

  

提高可用性!6个新人进阶该学的图标设计小技巧

  △ 同样的设计中加入了文本标签的图标,文本标签解释了图标的含义,并提高了可用性

  UserTesting(一家为开发者提供测试用户的创业公司)进行了一系列关于是否是要标签的测试,结果发现:

  对于带有标签的图标,88%的情况下,用户轻点图标时可以准确地预测接下来会发生什么。

  对于没有标签的图标,这个数字下降到60%。对于那些特殊的图标,这个数字只有34%。

  这里有三个重要的情境需要考虑:

  对于更多复杂且抽象的功能来说,图形化的表达具有局限性。所以他们应该使用合适的文本标签来展示。

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:面试不成功?可能是你没学会这5个UI设计师的面试套路!

下一篇:帮你梳理微交互的五个基本要素

  • 18877 文章总数
  • 2198747访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信