图标设计的7个原则-清晰度、可读性、对齐、简洁性、一致性、个性化、易用性
创建高质量的图标需要有效的方法、迭代调整、大量实践和一双挑剔的眼睛。本文,我们通过7个设计原则和实例来说明如何创建高质量图标。
清晰度
图标的主要目的是快速传达其表达的含义,即概念。
这这一系列符号中,你对哪些比较熟悉呢?如果考过驾照,你可能会认出好多个,但其中一些图标并不直观,需要一本驾驶手册才能完全弄明白。
下边列出了易于识别到很难分辨的几个:
当图标使用我们不熟悉的隐喻时,理解就变得很困难。安全带“提示灯”(左起第三个)非常直观,我们一看就能明白。“电动助力转向系统警告灯”(最右边)的可识别性就很不清晰。
传达信息不清楚的图标让人不不安,尤其是在驾驶过程中,甚至会造成危险。
下边是一些我们常见的图标:爱心、警告、音乐和方向指示。
箭头是在路标中最经常使用的符号:
NYC subway sign (Source: Standards Manual)
成功的图标符号不仅对多数人来说易于理解,而且在不同的文化、年龄和背景下都是通用的。从多数使用人群的角度出发,使用能与之产生共鸣的隐喻和色彩,更容易创建出成功的图标。
如果其表示的想法过于抽象,则用单个独立的图标可能无法清晰的表达。这种情况需要和文本标签搭配使用。
可读性
一旦使用图标,就必须保证其可读性。
由于细节太过精细,上方的第一个图标很难被清晰的识别。
下边的第二个图标也有类似的问题,两部分形状之间的空间太小了:
稍作调整后的效果好了不少:
处理多个形状时,请在它们之间留出足够的空间。过细过多的笔触会使图标难以阅读。
Google Maps的图标虽然很小,但可读性就非常好:
对齐
为了确保图标视觉上的平衡感,需要做好对齐。
在这个播放图标中,虽然三角形按照等分尺寸放置在了圆形的中心,但看起来位置是偏的。其重心明显是在左边,失去了平衡。
排版人员对字体进行细微的调整,以实现视觉上的平衡效果。
设计人员对播放图标进行了细微的调整,把三角形向右移动:
看上去好多了。
不要简单的以数值为依据,眼睛才是最终的检查工具。
简洁性
仅用几句话就能清楚的表达一个想法,会让人感觉高效又优雅。
如:传授你的知识给别人,可以增强你自己对本学科的理解。
我们可以更简洁的说:
教会别人的同时,你也在进步。
Beautiful。
看下边这个图标
再看这个图标的简版:
简洁是图标设计的一个特性,更适合在较小的屏幕上使用。减少不必要的细节,能增加视觉上的轻松感。
在UI中,简洁的风格更利于理解和布局。这是Telegram的图标,简洁而有趣:
有时,UI图标采用更为具体的说明性样式。这些是Yelp的热门食物的一些图标,你看那只虾精致又生动:
在手机、平板和PC上的部分应用程序图标,会通过添加适当的细节以突出其个性和识别性,这就意味着需要更多的色彩和深度。配合其他的场景的展现,这些图标更能体现出品牌和产品的特性。
一致性
如果要创建一系列在同一场景下应用的图标,务必保持一致的样式规则。
在iOS13之前,Apple的图标具有各种笔触、填充和大小:
仔细观察一下,是不是有些图标感觉上比其他图标要更重一些?
任何给定的图标都具有一定的视觉权重,该视觉权重由诸如填充、笔触粗细、形状大小等因素决定。在一个系列中保持这些参数的值相同,可以保证图标一致性的实现。
苹果公司最近推出了SF Symbols。SF Symbols拥有9种权重和3种比例的图标风格。各种填充和轮廓变化使得图标更具和谐感。
对于图标家族来说,保持一致性并不是一件容易的事情,尤其是有很多作者时。设定明确的设计原则和具体规则就尤为重要。
下边这组图标由很多设计师创建集合而成,共包含700多个,设计师们都遵循了同一设计原则和严格的具体规则。尽管每个人的图标形状各不相同,但它们的权重具有相当的一致性,并且能很好的应用在同一场景中。
个性化
每个图标都有其各自的特性或风格。如何与众不同,怎么表达品牌,传递什么情绪?
Waze的界面之所以受欢迎很大程度上取决于其图像。这些色白斑斓有亲切感的图标表达着:“我们很可爱!”
Twitter的图标反而明亮、温和、清晰:
Sketch的图标充满了精致感:
Freemoji图标可爱又乖巧:
Android图标可匹配不同心情的屏幕主题:
易用性
一个系列的图标只有完美适配后,才算绘制完成。图标绘制后,需要进一步的测试和调整,以便设计师在屏幕和印刷中使用及工程师将其进行编码。
高质量图标需要有组织、有据可查并在上下文中进行测试。幸运的是,它也受到图标管理器的自定义工具的支持。
有组织
保持主文件整洁,并做好文件命名,以便于查找。选用合适的分类方法,如字母排序、类型等。
有据可查
阐明图标系列的主要原则:
Example principles from the Phosphor icon family (a riff on what we covered above):
? Clarity. Be clear first and foremost. Make the icon recognizable and readable. Never sacrifice clarity of what the icon represents.
? Brevity. Use as few details as possible. Phosphor’s style is reductive. Be concise and intentional with every stroke to communicate the essence of what’s being represented.
? Character. Be quirky. Add unique details sparingly to bring a little warmth and play to what may otherwise be a very austere set.
列出技术性规则:
Example technical rules from the Phosphor icon family:
? Use a 48x48px canvas
? Use a 1.5px centered stroke
? Use rounded end caps
? Use contiguous strokes unless broken segments are helpful for comprehension
? Use straight segments, perfect arcs, and 15° angle increments where possible
? Adjust curves when necessary to maintain the design principles
? Use whole, even number increments for measurements where possible; fold down to 1px and .5px if necessary
? Use the following shape keylines: 28x28px circles, 25x25px squares, 28x22px landscape rectangles, 22x28px portrait rectangles
? Keep a 6px thick trim area
重复这些步骤,并根据需要制定参考文档:
- Material System Icons
- IBM的UI icons、App icons和图标指南
- Shopify PolarisIcons
测试
检查图标一致性。确定图标在不同应用场景中的效果。
将图标彼此并排放置有助于检验我们的上述原则:(清晰度、可读性、对齐、简洁性、一致性、个性化、易用性)
定制工具
最后,如果你有资源,为了方便使用图标,那就创建工具吧。
通过使用自定义图标库,Meterial的图标更易于访问。搜索所需的文件,可以下载不同的文件格式、色彩和大小的样式图标。
Font Awesome,虽然没有应用上述某些设计准则,但它们的图标具有难以置信的易用性。它们提供了多种图标使用方法:前端框架库,CDN,图标字体或RAWSVGs。Awesome还是一个开源项目,它们分享各类图标,作品中的,最新发布的等。
资源
图标库
推荐几个:
Feather,一组精美的200多个额外的最小轮廓图标,可以很好地缩放
Material system icons,,5种样式的UI的1000多个实用图标
Nucleo,约3万种图标,有3种样式:轮廓,扁平/彩色和字形类
Streamline,一组精美绘制的3万多种线型图标,分为3种字重
图标聚合器
该Noun Project,但在质量方面参差不齐,是搜索有关样式和隐喻灵感的好方法
图标管理员
使用Nucleo app,可以导入图标集,查看,导出并将其拖放到首选的设计软件中
图标文档
在设计文档方面,Material是最好的:Material System icons,Product icons
IBM提供了出色的视觉辅助工具:UI图标,APP图标以及图标的贡献指南
Shopify提供一些最好的指南:ShopifyPolaris图标
? Written to the sounds of: The Black Dog and Autechre
文中链接,请查看原文。