专栏首页静Design干货!7个设计师必知的图标设计原理,收藏了!

干货!7个设计师必知的图标设计原理,收藏了!

清晰度,可读性,一致性,简洁性,一致性,个性,易用性。

创建高质量的图标套组需要合适的方法,训练有素的眼睛,一些迭代和大量实践。下面,我将通过7个原则和大量实际示例来说明。最终目标是让你了解设计出优质图标的关键细节。

001.明晰

图标的主要目标是快速传达概念。

普锐斯Prime仪表盘上的图标(来源:2020年手册)

在这一系列符号中,哪些是你看起来最清晰的呢?驾驶员可能会随着时间的流逝学习它们,但是其中一些图标并不直观。您需要一本手册来解释其含义。

这大致就是用户了解图标的过程,从简单到复杂:

当图标使用不熟悉的隐喻时,用户就会很难理解。安全带“提醒灯”(左起第3个)非常直观,我们可以快速掌握。“电动助力转向系统警告灯”(最右边)更加难以理解。

通常,不清楚的图标只会令人心生沮丧。对于驾驶员来说,误解警告指示器可能会造成危险。

以下是一些较熟悉的图标-爱心,警告,音乐和上/下方向的符号:

Phosphor Carbon图标家族的熟悉隐喻

箭头是在寻路中使用的强大符号:

纽约市地铁标志(来源:《纽约市交通管理局图形标准手册》

最理想的状态是,图标不仅对于一组人来说易于理解,而且在不同的文化,年龄和背景下都是通用的。考虑一下您的用户,并使用与之产生共鸣的隐喻和色彩。

请记住,如果所表示的想法过于抽象,则独立图标可能不是最清晰的解决方案。在这种情况下,请将图标与文本标签配搭配使用。

002.可读性

图标不仅要易于理解,更要便于阅读。

Amtrak移动应用程序中的图标

由于细节太复杂,用户很难有更好的可读性。

下面这款交通应用也有类似的问题。剪贴板图标一团黑,与上方的图标风格完全不匹配。

Transit移动应用中的图标

稍作调整将带来很大的改进:

调整后的剪贴板图标

处理多个形状时,请在它们之间留出足够的空间。更细更多的笔触,将使图标更复杂,更难以阅读。

Google Maps的图标非常出色-可读性很棒:

Google Map图标

003.对齐

为确保每个图标感觉平衡,请精确的将他们对齐。

在此播放图标中,尽管三角形按看起来放置在圆的中心,但我们的眼睛却误认为是不对齐的。三角形的较宽部分感觉比左侧“重”,所以我们要手工进行一些调整。

就像排版人员进行细微调整以在字体中创造平衡的视觉效果一样(请注意“ i”和“ j”上的偏心点,以及“ O”上的过冲点),

-设计师会进行类似的调整以平衡图标。要更正上面的示例,请稍微移动元素:

所以,请不要仅仅相信数据,也要相信你的眼睛。

004.简洁

谷歌的Material Design在其系统图标指南中很好地说明了,下面的图明显过于复杂了:

过于复杂的船形图标(来源:Material)

下图就是很好的表现方式:

简洁的船形图标(来源:Material)

简洁很适合图标设计,因为我们经常在小画布上工作。为图标使用适当的细节量,不要使用过多的内容。

在用户界面中,简洁风格可以理解并为内容腾出空间。Telegram的图标简洁有趣:

电报图标

有时,UI图标会采用更具象的表现形式。这些Yelp图标是用来为用户展示热门食物搜索的一种令人愉快的方式。泰国食品图标中的虾非常精致:

Yelp图标

使用代表移动,平板电脑和桌面应用程序的应用程序图标,适当的细节量可能意味着更多的深度和色彩。由于观众可以在移动主屏幕,码头和应用商店中了解其背景,因此图标可以更体现品牌和产品。

苹果应用程序图标

005.一致性

为了使图标家族达到和谐,请始终保持相同的样式规则。

在iOS 13之前,Apple的图标具有各种笔触,填充和大小:

iOS 13之前的苹果图标

任何给定的图标都具有一定的视觉权重,该视觉权重由诸如填充,笔触厚度,大小和形状之类的参数确定。在一个集合中保持这些参数相同可以建立一致性。

苹果公司最近推出了SF Symbols,它拥有9种权重和3种比例的图形图标风格(也许有点复杂)。在不同的图标之间,以及在填充和轮廓变体之间,它们都感觉更加和谐。

苹果SF Symbols中的图标

对于大型图标家族来说,保持一致性并不是一件容易的事,尤其是涉及多个设计师时。遵循明确的原则和规则至关重要。

Phosphor的图标套组将700+图标通过相同的一般准则和严格的测试,以保证每个图标一致。尽管每个图标都有不同的形状,但它们重量相同,并且可以很好地相互搭配使用。

006.个性

每个图标集都有其独特的风格。是什么让它与众不同?它对品牌有何影响?它会让用户产生什么心情?我们都需要反复考究。

Waze图标

Waze为什么受欢迎,在很大程度上取决于其图像设计。这些色彩斑斓的图标对用户说:“我们很古怪!”

Twitter的图标柔软,明亮,清晰:

Twitter图标

Sketch的图标精致而通透:

Freemoji的图标则非常可爱:

Android图标则抽象,多彩,亦或具有霓虹灯风格。

007.使用方便

完美绘制你的图标集并不代表你的工作完成了。它需要进行进一步的测试和准备,以确保后续设计师易于制作新图标,并在多种设计中使用它们(用于屏幕,印刷等),以及工程师将其编码到产品中。

008.有组织的

保持文件整洁,为图标资源命名并合理放置它们,以便于查找。考虑最好的分类方法。是按字母顺序?按大小?按类型?

009.总结下图标设计的原则:

•清晰度。首先要清楚,使图标可识别和可读。切勿牺牲图标代表的清晰度。 •简洁。使用尽可能少的细节。每笔动作都要简洁明了,以传达所要表达的本质。 •风格。要独特,添加一些独特的细节可以让人觉得图标很有人情味。 010.其它可参考技术细节: •使用48x48px的画布 •使用1.5像素居中笔画 •使用圆润的边角 •使用连续的笔触,除非折断的片段有助于理解 •尽可能使用直线段,完美的弧度和15°的角度增量 •必要时调整曲线以保持设计原则 •尽可能使用整数,偶数增量进行测量;必要时可使用至1px和.5px

011.测试你的图标

检查一致性。确保图标在UI界面中工作良好,确保它们与较大的视觉系统协调工作。

将图标彼此并排放置有助于证明我们的上述原则(清晰度,可读性,对齐方式,简洁性,一致性和个性):

Phosphor的质量检查流程中使用的测试表

原文地址:https://medium.com/@minoraxis/7-principles-of-icon-design-e7187539e4a2

作者:Helena Zhang

翻译:静电@静Design

本文分享自微信公众号 - 静Design(JingDesign91)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-02-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ICON设计使用手册:如何设计一个优秀的图标?

    大家都知道UI设计师要画图标,面对那么多纷繁复杂的林林总总的图标,大家有没有总结过一些系统的知识点呢,今天咱们来看看Nick Babich的这篇文章。

    用户5009027
  • [精品译文] 如何为移动应用设计出色的图标

    APP产品营销的其中很重要一环 ,就是图标设计。它的重要性很明显,即图标将影响用户的第一印象,这是吸引用户注意力的一种重要方式。特别是一些需要基于应用程序进行创...

    用户5009027
  • [静Design译文] UI界面图标终极设计指南

    UI界面的图标通常可以近似的看做以下的基本格式之一:横向矩形,纵向矩形,对角矩形,圆形,三角形,正方形。 如果把它们做成高斯模糊效果,你就会发现它们具有相同的视...

    用户5009027
  • 披着羊皮的狼:如何利用漏洞以特定图标伪装可执行文件

    这个漏洞背后的图标显示bug可以深溯到Windows图像处理代码,其允许攻击者“借来”本地其他常用的图标并自动将可移植的可执行文件伪装起来,这样就更容易诱使用户...

    FB客服
  • 信号图标

    类视图**和对象浏览器显示表示代码实体的图标,例如命名空间、类、函数和变量。下表演示并描述了这些图标。

    vv彭
  • Unity3d 修改编辑界面控制图标大小 修改相机图标显示大小

    在 Unity3d 会显示一些控制图标,如相机图标和光照图标。而在编辑界面我发现这些图标太大了,影响我编辑,可以通过界面控制修改图标显示大小

    林德熙
  • [精品译文] 如何为移动应用设计出色的图标

    APP产品营销的其中很重要一环 ,就是图标设计。它的重要性很明显,即图标将影响用户的第一印象,这是吸引用户注意力的一种重要方式。特别是一些需要基于应用程序进行创...

    用户5009027
  • 从iOS 11看怎样设计APP图标

    苹果WWDC2017开发者大会已经尘埃落定,除了新产品的发布,iOS 11也正式亮相。新系统中,地图、App Store、时钟、相机、联系人等等原生应用都换了...

    奔跑的小鹿
  • ICON设计使用手册:如何设计一个优秀的图标?

    大家都知道UI设计师要画图标,面对那么多纷繁复杂的林林总总的图标,大家有没有总结过一些系统的知识点呢,今天咱们来看看Nick Babich的这篇文章。

    用户5009027
  • [静Design译文] UI界面图标终极设计指南

    UI界面的图标通常可以近似的看做以下的基本格式之一:横向矩形,纵向矩形,对角矩形,圆形,三角形,正方形。 如果把它们做成高斯模糊效果,你就会发现它们具有相同的视...

    用户5009027

扫码关注云+社区

领取腾讯云代金券