- 原文地址:7 Principles of Icon Design
- 原文作者:Helena Zhang
- 译文出自:掘金翻译计划
- 本文永久链接:github.com/xitu/gold-m…
- 译者:Jessica
- 校对者:Chorer,niayyy-S
关于 icon 设计的 7 个准则
明确性、可读性、校准、简洁性、一致性、特性、易用性。
打造出一套高质量的 icon 库需要深思熟虑、专业的眼光、一些迭代和大量的实践。在这篇文章中,我将通过 7 个准则和大量的实际例子来说明 高质量 icon 库的特征。希望您从中能学习到设计优秀 icon 的技巧。
明确性
icon 的主要目的是快速传达一个概念。
在上面这一系列符号中,哪些您能马上读懂?有经验的驾驶员也许能够了解这些图标的含义。但是的确,某些图标并不直观。您甚至需要一本手册才能明白它们含义。
以下是我对它们大致的感受:
当 icon 使用了不熟悉的隐喻时,我们很难理解它。安全带提醒灯的 icon(从左数第三个)非常直观,我们马上就能明白它的意思。而电力转向系统警示灯的 icon(最右边)的意思我们就很难读懂。
通常,一个难以理解的 icon 会令人沮丧。并且对于驾驶员来说,误解了警告 icon 将是十分危险的。
下面是一些我们比较熟悉的 icon —— 爱情、警告、音乐以及向上/向前的符号:
箭头是在指路中使用的强大符号:
最理想的 icon 不仅对于一群人来说是易于理解的,而且在不同的文化、年龄和背景下都是通用的。站在您的用户角度思考,使用能与用户产生共鸣的隐喻和色彩。
请记住,如果 icon 所表示的意思太抽象,那么单独的 icon 可能不是表达性最好的解决方案。在这种情况下,将 icon 加上文本标签,或者寻找其它的解决方法。
可读性
有了可以理解的 icon 后,请确保其可读性。
上面(第一行)的 Amtrak (美国铁路)App 中的车站 icon 就很难辨认出来,因为细节太多了。
Transit (美国公交)App 也有类似的问题。因为在板子和夹子之间的间隙太小,所以它们的剪贴板图标看起来像一团墨水:
稍作调整将带来很大的改进:
当处理多个形状时,在它们之间留出足够的空间。过细和更多的笔触会使得 icon 更复杂,更难以阅读。
谷歌地图 在这一方面就做得很好,他们的交通图标即使在极小的尺寸下也非常易读:
校准
为确保每个图标看起来平衡,需要在视觉上校准元素。
在这个播放 icon 中,尽管三角形按长度标准放在了圆的中心,我们的眼睛还是认为它不在中心。这是因为三角形较宽的部分看起来比点“重”,使得三角形视觉上向左侧偏移。
这就像排版人员通过视觉错觉来精细调整字体,从而达到平衡的视觉效果。(注意下图中,字母 “i” 和字母 “j” 上偏移中心的点以及超出准线的字母 “O”)
—— icon 设计师会进行类似的调整以平衡图标。要更正上面的示例,请稍微移动元素:
这看起来就好多了。
这里我们学到的是:不要简单地相信数字;用您的眼睛检查您的工作。
简洁性
用简单的几句话完整地表达一个想法,会让人感到高效和优雅。比如下面这句话:
教授您所知道的东西可以加强您对这门学科的理解。(Teaching what you know strengthens your own understanding of the subject.)
我们可以更简洁地说(来自 Robert Heinlein):
教学相长。(When one teaches, two learn.)
这就十分优雅了。
在将简洁性作为系统中 icon 的设计导向这个方面,Material 风格就做得很好。与其使用这种 icon:
不如使用简单的:
简洁性尤其适用于 icon 设计,因为我们经常在小画布上工作。为您的图标使用适当的细节就好,不要增加一些您不需要的。
在用户界面中,简化的风格可以帮助用户抓住重点并为突出内容。比如,Telegram 的 icon 就很简洁有趣:
有时,UI icon 需要具有更强的说明性。Yelp(美国商户点评)中这些多色调的 icon 是显示热门食物搜索的一种令人愉快的方式。泰国菜里的虾很精致:
对于代表移动、平板和桌面应用的 App icon,可以用更多的深度和颜色来增加适当的细节。因为用户清楚自己现在是在设备主屏幕还是屏幕下方的菜单栏(在 iPhone 手机中,指 dock 栏)还是应用商店,所以使用更好地表达品牌和产品的 icon 会比较好。
一致性
为了使 icon 库看起来和谐,请始终保持相同的样式规则。
在 iOS 13 之前,Apple 的图标展具有各种笔触,填充和大小:
瞇着眼睛看这一组 icon。您有感觉到有些图标比其它的看起来更“重”吗?
任何给定的 icon 都有一定的视觉权重,这是由填充、笔触厚度、大小和形状等参数决定的。在一系列 icon 中保持这些参数不变就可以建立一致性。
Apple 最近修正了他们 SF Symbols 的介绍,SF Symbols 是 San Francisco 字体的绝佳伴侣。SF Symbols 拥有 9 种权重和 3 种比例的图形 icon 风格(也许有点复杂,绝对详尽)。我们可以发现 icon 之间的过渡 ,填充和轮廓变量变得更加和谐了。
要维护一个庞大 icon 库的一致性可不是一件容易的事,特别是当多个作者参与其中时。遵循明确的原则和规则是至关重要的。
Phosphor icon 库 —— 由我设计并由我的另一半搭建,通过坚持相同的设计原则和严格测试每个图标来保持 700 多个图标的一致性。虽然每一个都有不同的形状,但它们都有相同的视觉权重,并且很好地结合在一起:
特性
每个 icon 集都有自己的风格。是什么让它风格独一无二?它是如何对品牌进行的表达?它会给我们带来怎样的心情?
Waze 的可爱的界面很大程度上依赖于它们的 icon。这些五颜六色、矮胖的图标上仿佛写着:我们不一样!
Twitter 的 icon 是比较柔软、轻盈的:
Sketch 的 icon 是比较精致和轻快的:
Freemojis 的 icon 是比较可爱的:
Android 的 icon 包迎合了主屏幕主题的多种需求,下图分别是抽象、像素、泡沫、和霓虹灯风格:
易用性
一个 icon 集被完美地设计出来还不够。它需要进一步的测试和准备,以确保贡献者可以方便地添加新 icon,设计师可以在设计中使用它们(用于屏幕、打印等),工程师可以在开发中使用它们。
一个高质量 icon 集应该是组织有序的、 文档完善的,并在上下文中进行过测试了的。除此之外,它最好还能:支持一些自定义工具,如 icon 管理器。
组织有序的
保持 master 分支文件干净,正确命名和存放您的资源文件,这样就很容易可以找到它们,正确命名您的资源文件,把它们放在容易找到的地方。选择一个最适合的分类方法。按字母顺序?按大小?按类型?
文档完善的
表达清楚 icon 库的关键原则:
Phosphor icon 库的原则示例(其实就是对上面介绍的内容):
• 明确性。首先 icon 要清晰明确。使图标易识别和易读。永远不要舍弃 icon 所表达的明确性。
• 简洁性。使用尽可能少的细节。Phosphor 的风格是简化的风格。icon 中的每一笔都要简明扼要,有意识地传达所要表达的本质。
• 特性。可以是独具特色的。适当地添加独特的细节,可能会为原本非常严肃正经的 icon 集增添一丝温暖和乐趣。
列出技术规则:
Phosphor icon 库的技术规则示例:
• 使用 48x48px 的画布
• 使用 1.5px 的中心笔触
• 使用圆角
• 除非断开有助于 icon 的理解,否则请使用连续的笔触。
• 尽可能使用笔直的线段,完美的弧度和 15° 的角度增量
• 必要时调整曲线以遵循设计原则
• 尽可能使用整数、偶数增量进行测量;必要时可以折至 1px 和 .5px
• 使用以下的形状关键线:28x28px 圆形、25x25px 正方形、28x22px 横向矩形、22x28px 纵向矩形
• 保留 6px 的修剪区域
重复上面的这些,如果您愿意,可以像下面一样将文档公开:
- Material 系统 icon
- IBM 的 UI icon、App icon 以及 icon 贡献者指南
- Shopify Polaris 的 icon
- Atlassian Iconography(产品)
测试
检查一致性。确保 icon 在上下文中以相应的大小工作。确保它们在更大的视觉系统也能协调工作。
将 icon 放在一起有助于验证我们的原则,这些原则包括明确性、可读性、校准、简洁性、一致性和特性:
自定义工具
最后,如果您有足够的资源和能力,请创建能够方便使用图标的工具。
Material 通过自定义 icon 资料库我们能够更方便地访问他们的 icon。我们可以搜索需要的 icon,在喜欢的文件格式中下载不同风格(主题)、不同颜色、不同大小的 icon:
我们使用的 icon 是有生命的。我们要给予它成功和成长所需要的爱和工具。
相关资源
icon 资料库
一些可选项:
- Feather,精美的 icon 集,提供 200 多个可以自由缩放的最小轮廓 icon。
- Material system icons,1 千多个具有 5 种风格的实用 icon。
- Nucleo,约有 3 万种 icon,提供 3 种样式:轮廓,平面/彩色和字形。
- Streamline,精美的 icon 集,提供 3 万多个具有 3 种视觉权重的线性风格 icon。
icon 大集合
- Noun Project, 尽管 icon 的质量参差不齐,但这也是从样式和隐喻中寻找灵感的好方法。
icon 管理器
- 使用 Nucleo app,在您导入 icon 集后,可以查看、导出 icon,还可以将 icon 拖拽到您喜欢的设计软件中。
🎶 文章的音频版:The Black Dog 和 Autechre
🙏 感谢:Toby Fried、Monica Chang、Darcy O’Donnell、Sara Thompson、Lonny Huff、Stephany Shigekuni、Clarissa Soto、Tate Chow、Christine Lee、Victor Vasquez、Chris Rodemeyer、David Landa、Pawel Piekarski、Matthew Vargas
这是我们 icon 系列的第一篇文章。请敬请关注该系列的后续文章:
• 5 步创建一个 Settings icon
• icon 网格 & 关键线大揭秘
• icon 设计中的像素捕捉:捕捉或不捕捉
如果发现译文存在错误或其它需要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。
掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。