首页 >热门资讯> 在线作图 > UI 速查表:图标分类 + 图标样式参考指南(上) >

UI 速查表:图标分类 + 图标样式参考指南(上)

转载时间:2022.01.09(原文发布时间:2021.02.07)
63
转载作者:36氪企服点评小编
阅读次数:63次

神译局是36氪旗下编译团队,关注科技、商业、职场、生活等领域,重点介绍国外的新技术、新观点、新风向。

编者按:几乎所有的UI设计都离不开图标。但是对于这个司空见惯的东西,在分类上面却往往会陷入混乱。为此,设计师Tess Gadd提出了自己的层次化分类建议,先按大小,再按类别,最后按要素对图标进行划分。里面不仅给出了具体的应用建议,还包括了丰富的样例,可以成为各位设计师的参考指南。原文发表在Medium上,标题是:UI cheat sheet: Icon categories + icon style reference guide。篇幅关系,我们分两部分刊出,此为第一部分。

UI 速查表:图标分类 + 图标样式参考指南(上)

图标是最好的,不接受反驳。我对图标的喜爱程度不亚于按钮。不过,图标的问题之一是我们真的不知道该从何说起。对于没有图形设计经验的人来说,这尤其困难。

所以,我的这份速查表关注的重点是帮助我们对图标的不同类型、类别以及样式建立共同的理解。对图标进行分类不是精确科学,不过这是我对怎么最好地做到这一点给出的解释/建议。

在本速查表中,我们将介绍:

图标分类:

  • 定义图标类别

  • 图标尺寸

  • 图标类别

  • 图标要素

Ico样式参考:

  • 小图标样式参考

  • 大图标样式参考

  • 最后思考

1.定义图标类别

图标样式的分类方法有很多种。可以根据主题、色彩调色板、尺寸、年代、创建方式、文化背景、审美等进分类。对图标进行分类时遇到的主要问题是,很多都是重复的,不具备很多的特异性。

下面的图标看起来简单,但从技术上讲,就可以分为几个类别。

UI 速查表:图标分类 + 图标样式参考指南(上)

目前的图标分类存在的问题示例。

好吧,“但它究竟属于哪一类?”,在回答这个问题之前,我们先看看其他网站是怎么分类的:

  • Iconfinder :填充、轮廓、扁平、填充轮廓、3D、等距、手绘、卡通、像素、平滑、长阴影、徽章、半实线等。

  • FlatIcon :黑色轮廓、黑色填充、多色、线性颜色(lineal colour)、扁平、渐变

  • IconStore.co:彩色,图象字符、轮廓。

  • Material Design图标:填充、轮廓、圆角、双色调、锐利。

但是,可惜,以上的分类对我来说是无效的。图标应该既可以是3D彩色的,也可以是手绘的、轮廓状的,也可以是锐利的图象字符等。

我的做法是分类要建立层次结构。首先,你得按大小(大图标或小图标)进行划分,然后再按类别划分(图象字符、轮廓、填充、彩色形状、拟物),然后按要素划分(阴影、容器、3D、手绘等)。这样就可以避免在前两个级别出现重合,然后鼓励在最底层的级别上重合。

UI 速查表:图标分类 + 图标样式参考指南(上)

该图显示两个大类(大和小),然后是大类(字形,线条,实心轮廓,彩色形状,拟形),然后是成分(标准,容器,渐变,等距,手绘,阴影,其他)。

2.图标尺寸

你要设计的图标的大小要取决于用途是什么。带亮眼渐变和阴影的酷炫图标的确很好看,但放在16px的文本标签旁边却不会起到应有的作用。

因此,我倾向于把“大图标”和“小图标”分开,因为它们各自有不同的目的,偶尔也会重合。小图标往往用作UI控件,可以起到功能性或装饰性的目的。大图标一般用来以图形方式说明服务或功能,但也可以用来表示品牌的标识,并让平台在美学上更加令人愉悦。

区分大小图标没有明确的界限,但我一般以40px为分界线。

UI 速查表:图标分类 + 图标样式参考指南(上)

大图标、小图标划分的图示。

3.图标类别

一旦确定了所需的图标是“大”图标还是“小”图标,就可以把它们进一步细分为图标类别:

  • 填充图标/字形

  • 线条图标

  • 填充轮廓图标

  • 彩色形状图标

  • 拟物图标

UI 速查表:图标分类 + 图标样式参考指南(上)

图标类别:字形、线条、填充轮廓、彩色形状、拟物。

乍看之下,这似乎有点简单,但是这么做的好处是不会重叠。你不能把彩色形状的图标往字形里面放,也不能把填充轮廓网拟物里面放。

就像油和水一样,这些类别不会混在一起。

4.图标要素

在使用较大的图形时,你会希望图标具备更多的细节,否则的话,图标看起来就有些平淡无趣,甚至变成上天不容的“剪贴画”。不过在用较小的图标时——你几乎不需要任何细节。

由于小图标很小,所以可以操纵的像素更少。像素有限会导致要素有限。虽然小图标做拟物也有可能性,但这种可能性不高,所以我们就略掉了。

UI 速查表:图标分类 + 图标样式参考指南(上)

图标分类、要素二维表示例。

如果要制作的是大图标,你会有更多的空间来表现一下你的艺术气息。虽说做大字形也不是不可以,但我不建议你这样做,因为会有点无聊,而且吸引力没有颜色更丰富、细节更多的其他图标类别那么大。

有些要素适用于所有的类别,有的则不然。某些图标样式可以包含多种要素,或者只能在某种样式里面复制。或者,如果你观察一下拟物图标的话,其实大部分的要素它们都具备。

UI 速查表:图标分类 + 图标样式参考指南(上)

图标要素示例:标准、容器、渐变、3D、手绘、阴影等。

注:不用说,实际的要素比这里提到的要多得多。

5.小图标样式参考

大家往往认为小图标没有大图标那么有趣,但这跟事实相距甚远。可以摆弄的空间更少迫使你要更具创造力。而且你还要被迫更多地考虑图标要传达的内容,而不是风格。

“简单图像可以更具包容性。” —苏珊·卡瑞(Susan Kare)

5.1. 字形

字形(glyph)这个词最初来自希腊语的单词“gluphē ”,大致意思是“符号或象形文字”。我们现在使用的字形或填充/实心图标通常只是一种彩色和实体形状。这些图标在缩小的时候往往仍会保持形状。尽管它们非常容易辨认,但它们往往有点······无聊。在不运用颜色、轮廓等的情况下想给这些图标增加一点“个性”可能会很棘手。

5.1.1. 标准字形或实心图标

UI 速查表:图标分类 + 图标样式参考指南(上)

字形/填充图标

字形不是最漂亮的图标——但确实很容易看。这种图标最适合在界面中用作小尺寸。以及在标志上用作大尺寸。

设计师注意事项:

  • 要确保你的图标达到像素完美。如果图标制作得不正确的话,只有一种颜色会使得羽化非常明显。

  • 小字形要比大字形好看些。

  • 在制作自己的字形之前,不妨考虑用现成的图标字体。

UI 速查表:图标分类 + 图标样式参考指南(上)

不同字形集示例。Material Design图标(填充)、Font Awesome(实心)、Ionicons(填充)。

5.1.2锐利图标

UI 速查表:图标分类 + 图标样式参考指南(上)

锐利图标

锐利图标一般都是以字形/填充/实心图标为基础,但这些图标有着锐利的边缘。大多数图标的边框半径只有一两个像素,但锐利图标会有硬边。

你可能选择使用锐利图标而不是圆角图标的原因之一是,图标缩小到较小尺寸时会更清晰。如果看看下面的参考并将它们跟上一节的示例进行比较,你就会看到边界半径的差异。

设计师注意事项:

  • 确保你的图标像素完美。如果图标制作不正确,只有一种颜色会导致羽化非常明显。

  • 小字形比大字形更好看。

  • 在制作自己的字体之前,不妨考虑采用现有的图标字体。

  • 采用0像素边框半径。

不同锐利字形集示例。Material Design图标(锐利),Ionicons(锐利)。

5.1.3. 带彩色背景的字形图标

UI 速查表:图标分类 + 图标样式参考指南(上)

彩色容器里面的字形图标

2013年,Windows为极简设计和字形引入了一种崭新的外观——把它们放到彩色背景上。事实证明,这种超级简单的技巧能够让字形更友好,更具吸引力。

设计师注意事项:

  • 为容器选择4至12种颜色的调色板。

  • 确定字形是浅色还是深色,并确保适用于所有的容器颜色。理想情况下,图标的对比度为+7,而且最好不要黑色和白色。

  • 在彩色背景上把字形做成白色要比在彩色背景上做成黑色更好看些。黑色会导致亮色看起来比较“模糊”。

UI 速查表:图标分类 + 图标样式参考指南(上)

彩色容器背景的字形例子。

5.2. 线条图标

近年来,由于有着简洁性以及更现代的外观,线条或轮廓图标已变得越来越流行。虽然字形往往被认为在可用性方面表现更好,但并不是所有的符号都这样。比方说,对话泡泡图标用线条图标表示起来会更好。

5.2.1. 小尺寸线条图标

UI 速查表:图标分类 + 图标样式参考指南(上)

小尺寸线条图标

创建小尺寸线条图标可能会比较棘手,过去我一般会用字形,因为创建更容易,并且更容易保持。但是,随着智能手机屏幕变得越来越好,我们现在也可以享受一下采用线条图标的奢侈了,就算做得不好的线条图标在新iPhone上面也过得去。

设计师注意事项:

  • 确保像素完美,这个要求甚至比字形图标还要高。

  • 越简单越好。

  • 力求细节简单一些。

UI 速查表:图标分类 + 图标样式参考指南(上)

线条图标集示例。Material Design图标(轮廓),Feather Icon,Ionicons(填充)。

5.2.2. 双色小尺寸线条图标

UI 速查表:图标分类 + 图标样式参考指南(上)

双色小尺寸线条图标

在制作较小尺寸的图标时,你得放弃细节,强调简单形状。添加一些颜色是可行的,但是当使用一种颜色的时候,可读性就不会很理想。

设计师注意事项:

  • 用两种可以配合使用的颜色。

  • 考虑一种颜色用于主要形状,第二种颜色用于细节。

  • 少即是多

  • 使用粗线

  • 尽管技术上而言这些图标是小图标,但不能太小。如果你想做得很小(22像素及以下),请使用普通的小尺寸线条图标。

UI 速查表:图标分类 + 图标样式参考指南(上)

带两种颜色的小尺寸线条图标示例。YiğitPinrbaṣi制作的Candy Icons,Wilbur Xu制作的35 Simple Line Icons,Freebie:PixelBuddha的电子商务和导航矢量图标集。

5.3小尺寸填充轮廓图标

UI 速查表:图标分类 + 图标样式参考指南(上)

小尺寸填充轮廓图标

我认为填充轮廓图标是最“令人愉悦”的小图标样式之一。但是,如果颜色太多的话,就会出问题。

设计师注意事项:

  • 纯黑色的轮廓有时候看起来会很刺眼,所以还是用深色的颜色就好了。

  • 按图标、图标集限制颜色调色板。

  • 避免细节。少即是多。

UI 速查表:图标分类 + 图标样式参考指南(上)

小尺寸填充图标的例子。Material Design图标(双色),Aha-Soft的16x16免费工具栏图标, Sihan Liu的彩色天气图标。

5.4. 小尺寸彩色形状图标

UI 速查表:图标分类 + 图标样式参考指南(上)

小尺寸简约扁平彩色图标

在所有样式里面,就美学而言,这也许是我最喜欢的样式。简单又巧妙的,这些小图标很有内涵,同时还靠调色板和样式传递出强大的品牌标识。

极简图标在缩小比例的时候也比其他的扁平图标类型要有效得多,虽然仍比不上字形。不过这种图标用在图形区域的时候有时会显得太小,用在界面的时候有时候又会显得太大。我最喜欢的应用场合是演示是作为“要点符号”。

给设计师的提示:

  • 这种图标样式要避免小尺寸(<20px)。

  • 选择2到3种可以一起使用的颜色。

  • 以一种颜色作为基础色,另一种颜色应作为高亮色/细节色。

UI 速查表:图标分类 + 图标样式参考指南(上)

彩色形状图标集的示例。Erdem创作的Freebie Security图标,Nitish Khagwal的Vivid svg Icons, Fajrul Fitrianto为Inipagi Studio创作的SEO ICONS (FREE!)。

译者:boxi

[免责声明]

资讯标题: UI 速查表:图标分类 + 图标样式参考指南(上)

资讯来源: 36氪官网

36氪企服点评

在线作图相关的软件

查看更多软件

大厂都在用的在线作图软件

限时免费的在线作图软件

新锐产品推荐

消息通知
咨询入驻
商务合作