设计师必看的图标设计指南「中」

书接前文,这是《设计师必看的图标设计指南》系列之「中」篇


功能图标的设计规范及应用

除了产品图标,还有一种图标被称为功能(或系统)图标,功能图标指的是担负一定功能和含义的图形,一般来说需要像文字一般地被人迅速理解,所以表达方式上不适合特别复杂,如微信底部四个系统图标就使用了比较简洁的线性风格。

功能图标在UI设计中占据非常重要的作用,几乎存在于每一个应用界面中,无论是在导航栏、工具栏或标签栏,还是在首页、详情页或个人中心页,都随处可见功能图标的身影。功能图标具有明确的表意功能,其作用在于替代文字或辅助文字来指引用户进行快速导航,它具有图形化的符号,比文字更加直观,符合普罗大众的认知习惯,有助于用户形成记忆思维,提高应用的易用性。同时设计精致、风格统一的功能图标提升了产品视觉效果,不但给用户带来视觉上的愉悦感,还带来了良好一致的使用体验。

4.1 图标的规范

图标是任何设计系统或产品体验的重要组成部分。图标能够帮助我们快速导航。他们与语言无关。最重要的是:他们非常小,所以他们不占用很多区域。图标是良好设计系统的基本组成部分,对营销材料非常有帮助。他们是插画内容的基础构建块,但他们也具有很高的技术性。

4.2 图标尺寸

一致性是设计图标的关键,在绘制时,一定要确保所有的图标都相同大小。在UI界面设计中,网格的大小必须要是4或12的倍数(安卓是8的倍数,iOS是4的是倍数)。@2x下作图要保证是4的倍数,这样可以整除2,适配@1x的屏幕;@3x下作图就需要是12的倍数了,这个数值可以整除2、3、4,适配@1x和@2x的屏幕,界面中通常使用的图标尺寸24*24px、48*48px。这里建议用48px做为常规图标设计尺寸。

通常我们只需要选择一个通用的尺寸来绘制,然后让开发人员根据倍数调整可能需要的尺寸即可,这样就不用一遍又一遍的去绘制不同大小的相同图标了。

不过当我们的图标涉及一些复杂的细节时,还是需要根据尺寸大小单独绘制。比如我们的系统图标可能是24px,但是营销图标是80px,两者的使用差别会很大,那么我们就需要为那些较大的尺寸添加一些细节。

这里建议从最大的尺寸开始,然后依次绘制小一点的。因为删除和简化细节要比添加容易得多,也能最大程度的保留图标原始状态。

图标绘制基于48x48px画布绘制的线性图标,线宽默认为4px,不同场景缩放比例使用:

图标为32x32px时,线宽3px(基准线宽)

图标为24x24px时,线宽2px(基准线宽)

图标为16x16px时,线宽2px(基准线宽)

......

如果你要绘制描边图标,那么需要保证所有的笔画都是相同的粗细,并且笔画之间的间距不要比笔画本身更细。

4.3 图标的keyline

图标网格为图形元素的一致但灵活的定位建立了明确的规则,keyline是网格的基础。通过使用这些核心形状作为知道,你可以跨系统保持一致的视觉比例。

4.4 图标关键图形

图标栅格用于图标元素绘制的参考并帮助建立清晰的内容轮廓边界,关键线有助于促进图标统一性,简化设计过程中比例调整成本,绘制小图形需要参照小正方形的keyline。

4.5 图标的拐角

直角拐角:当基础图形为满容器正方形时,建议使用3X圆角,当基础图形为满高(宽)矩形时,建议使用2X圆角。当基础图形为较小(小于1/2宽高)矩形时,建议使用1X圆角。

非直角拐角:根据图标场景,通常情况下无论角度,默认均为1X圆角;特殊弧度的曲线“拐角”情况除外,根据图标设计需要单独考虑。

4.6 图标区域 封闭和非封闭

封闭区域,有闭合曲线构成的为封闭区域,可以进行独立颜色填充;

非封闭区域,由非闭合曲线构成的非封闭区域,原则上是不能进行独立的颜色填充;

封闭区域为曲线形状且有相交线段时,原则上是不能进行独立的颜色填充;

4.7  图标绘制规则

当线段与曲线相交或者与直线非垂直相交时,线段末端用圆头端点;

当线段与直线垂直相交时,线段末端用方头端点;

当圆点的直径与线宽一样时,圆点用图形绘制,不用线段;

当圆形和方形在小于16px时建议用图形绘制,不要用线;

4.7.1 倾斜角度

根据像素的网格线来设置一条线的起点和终点,会让你的图标看起来更清晰。图标中的倾斜角度应为45的倍数,保持与keyline中的对角线或十字垂直相交线保持平行关系,若是矩形外框,倾斜角度也可以与矩形的对角线或十字垂直相交线保持平行关系。应避免用13.7°,81°等这些奇怪的数值。

4.7.2 线段和端点

为保证风格的整体一致性,图标所有线段端点默认均应为与线段同宽的圆角端点,通常情况下线段端点和可编辑节点坐标以整数坐标为佳。默认基于48px画布绘制的线性图标,线宽默认为4px,无论直线和曲线在任何时候线宽都应均保持一致。

4.7.3 图标断口与间距

内部结构与外框的间距不得不小于线宽,内部元素之间的间距不得不小于线宽的1/2px。

外形框的端口尺寸关系:4px、8px、12px,建议尺寸为4的倍数。

4.7.4 图标风格变换

图标在特定规律下允许不同风格之间的变换,分别为线性风格(默认)、填充风格、混合风格、多色混合风格。

4.7.5 单双像素描边

如果为图标设置1像素的边框,边框应该使用外部或内部的描边样式,但是不建议居中描边样式,居中描边的1px边框,虽然在放大它们的时候,它们看起来很清晰。但在100%比例大小显示的时候,它们会模糊。双数用居中描边,单数用外描边,所有锚点要与网格对齐不能出现偏移。

4.7.6 线段闭合

所有线段结合处应为闭合状态,避免错位出现。

4.7.7 统一透视

如果图标有透视需求的话,就要统一透视角度,例如图标透视方向朝左,那就统一所有图标的透视角度都朝左边。

4.8 视觉栅格

除了像素栅格,还有视觉栅格。视觉栅格可以帮助我们找出图标的中心在哪里,以及人眼能感知到它有多大。圆形和弧形物体看起来会比正方形更小。因此我们应该在绘制图标时设定一个固定大小的容器,这样它们在导出时就都是相同的尺寸了。添加内边距可以让图标在视觉上看起来更加平衡,避免以后开发时还需要重新调整。

4.9 视觉重量

绘制图标不光要满足物理上大小统一,还要实现视觉上大小统一。设计师要懂得调节图标大小以避开视觉上的觉错。

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

根据图标形状,将它们放在相应的框架中。你就会发现,方形图标比三角形或细长图标更紧凑。

4.10 图标绘制细节

清晰是图标的基本要素,在sketch中,参数不要有小数点,让图标占满像素网格。因为计算机不能识别小数点,导出图标时计算机会把不能识别参数的部分拉伸填满像素网格,导致图标出现虚边。

通常从一套图标中最复杂的那个开始,因为它会帮助我们定义相同的视觉重量,让所有的图标视觉重量保持一致。因为当图标具有不同的细节层次时,更复杂的图标会吸引用户更多的注意力,而且视觉上看上去更重。

4.11 图标的颜色

默认颜色:如果是功能图标,那么最好只使用一种颜色:黑色。否则你的组件可能变得过于复杂,不利于和其他设计师协作。而对于营销图标,出于品牌宣传的目的,你可能会想要使用两种颜色,个人认为图标最好是单一颜色的,3种或3种以上颜色的东西都是插图,而不是图标。

选择状态颜色:未选择图标颜色为#000000,透明度为87%;未激活图标颜色为#000000,透明度为54%;禁用图标颜色为#000000,透明度为38%。

4.12 功能图标的风格

功能图标在UI设计中占据非常重要的作用,几乎存在于每一个应用界面中,无论是在导航栏、工具栏或标签栏,还是在首页、详情页、或个人中心页,都随处可见功能图标的身影。功能图标具有明确的表意功能,起作用在于替代文字或辅助文字来指引用户进行快速导航,它具有图形化的符号,比文字更加直观,符合普罗大众的认知习惯,有助于用户形成记忆思维,提高应用的易用性。同时,设计精美、风格统一的功能图标提升了产品视觉效果,不但给用户带来视觉上的愉悦感,还带来良好一致的使用体验。

常见的功能性图标风格大致有三种:线性图标、面形图标和扁平化图标。但其实我们可以将「扁平化图标」可以看作是「线性图标」和「面型图标」的一种组合形式,所以归根到底,基础的图标风格有两大类:「线性图标」和「面型图标」;

4.12.1 线性图标

线性图标是通过线条来表现物体的轮廓,它比面形图标更能塑造优美的外观,且作为贯穿图标绘制的线条本身就是一种设计语言,因此绘制整套线性图标会更加统一,具有整体感。例如twitter和微信底部的tab图标等。在一个场景下的几个同等重要的图标,如果线条粗细不一致,会给人一种权重上存在差异的感觉。所以,在绘制线型图标时,通常会使用统一粗细的线条。

线性图标具有辨识度高,清晰,简约易识别等优点,线性图标不会对页面造成太多的视觉干扰。缺点是:线性图标的创作空间较少,太复杂的线性图标对识别性产生较大的困扰。

常用的App图标设计线的粗细一般有2PX或者3PX,不同的线条粗细 ICON 所带来的视觉感受也不同,细线显得精致,粗线视觉面积大,显得厚重。圆角粗线条的 ICON 显得饱满而可爱,个别 App 的底部标签栏图标采用粗线条设计,但粗线条的 ICON 图形较为极简才适用。

线性图标根据样式还可以分为:双色线性图标、线面填充图标、线性渐变图标。

线性图标使用场景

在iOS所有原生应用的导航栏和工具栏都采用了2px线框的图标设计,很多APP产品的标签栏都选择用线性风格的图标设计。无疑,线性图标可以减少视觉干扰,让用户集中在产品核心功能上,同时轻量化的视觉语言也与扁平化的设计风格更为融合。它比面形图标更能塑造优美的外观,且线条本身就是一种设计语言,因此绘制整套线性图标会更加统一,具有整体感。

通常,在UI设计中,线性图标很少和背板同时存在,因为线条的图形视觉表现力较弱,容易埋没在背景色中,但也不是必须的,如果掌握好一定的规则,一些简单的线性图标和背板的组合也会很协调。

4.12.2 面形图标

面形图标是以面为主要表现形式的图标,通过线或者面去切割基础轮廓面,通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。在「微信」底部标签栏中,未选中的图标是线性图标,而选中的图标则是面形图标,同时颜色会变成微信的品牌绿色再次暗示用户选中状态。面形图标占用的面积要比线性图标多,所以更加显眼。实际上,苹果在新的设计规范中也建议开发者在APP底部标签栏中全部使用面形图标,是否处于点击态通过改变填充图标的颜色进行区别。这是因为填充图标看上去像可点击的。

面形图标具有表意能力强,细节丰富,情绪感强,视觉突出,创作空间大等优点。面性图标可以让用户迅速定位图标位置,预知点击后的状态。但是面性图标在页面中不可过多出现,否则会造成页面臃肿,难分主次,用户视觉疲劳。

面性图标根据不同的配色样式可以分为:单色饱和度填充图标,纯色渐变图标和多色渐变图标。

基于最基本的「线性图标」和「面型图标」,通过不同的形态和风格的组合,再结合丰富的 表现手法,就可以设计出形形色色的图标风格了。比如:不同粗细线条线性图标的组合,或者面面组合,或者线面组合。大家在设计图标的时候,需要根据自己的产品特征、受众和使用场景,去选择适合自己的表现形式。

面形图标使用场景

面形图标具有广泛适用性,通常在运动、时尚类应用的标签栏出现。由于面形图标的视觉占比最大化,具有强烈的视觉表现力。

功能入口的面形图标通常分为反白和正形两种类型。反白即在彩色背板上显示白色的图标,正形即图标直接填充色彩且无背板。在带有背板的图标设计时要注意图标与背板的尺寸比例,虽没有严格的绘制标准,但从整体视觉效果上考虑,图标尺寸最好不低于背板直径但1/2,最大不超过背板直径的0.618(黄金比例),同时还要考虑所有图标的视差一致。

4.13 扁平图标的使用场景

扁平化图标实际上是线性图标和面形图标的一种组合形式,这种类似插画感觉的图形一开始多用于引导页、空状态也的情感化设计,后来逐渐在标签栏、首页主要功能入口也出现了扁平化图标的身影。精致的扁平化图标令人赏心悦目,拉近了与用户之间的距离,从而建立起良好的用户印象。

4.14 品类区图标

品类区图标的卫视通常是位于搜索框、banner之下(也俗称“金刚区”),而且品类区区域通常会占屏幕22%-25%不等,且位于屏幕头部,从用户阅读屏幕内容的视觉流来说位置至关重要,而且是聚合各类子版块的入口,为各个子版块分发内容引导流量。所以其重要性不言而喻,产品要让用户通过不同类型展示方式的组件找到相应的功能,而图标具备精炼高度概括内容的特性,识别度也大于文字,所以「金刚区」的图标设计通常以图标+说明文字为主。

常见的设计手法有:圆形底板+45度渐变+白色面形+微投影;45度渐变+扁平图标+微投影;简单线性;45度渐变+不透明度+面形图标。

4.15 文字图标

文字图标是指用文字直接表示特定含义的图标符号。由于文字本身就是一种演化而来的符号,英文的首字母或者词语关键字本身也具备很强的信息浓缩性,因此在某些场景下,采用文字或字符作为图标,是一种很不错的表现手法。

比如「提示」图标,使用一个圆圈包裹一个英文字母「i」,意为 information,表示「注释信息」的含义;比如停车场直接使用「Parking」中的首字母 「P」,这些都是比较约定俗称的使用方式。还有一些场景,很难用象形或者表意的方式进行表达,那么就很适合使用文字符号,例如京东/天猫某些商品具备「正品保证」的标识,这个概念太抽象了,很难用象形去概括,创造新的表意符号又很难被大众接受,这时「正」字就很适合作为这个场景特定的图标符号,作为针对中国用户群体的产品图标,简单粗暴且有效。

如果可能的话,尽量避免在图标中使用文字。因为图标应该是全球性的。如果你确实需要文字图标(例如货币符号等等),那么请你自己绘制,而不是直接使用字体。

4.16 动态图标

这几年动效设计的热度稳定增长,只有静态排版的时代正在过去。动效的出现,也让图标拥有了更多的可能性。动态图标可以让你的app或网站生动有趣,在我们所常见的各种数字产品当中,UI组件和各色元素都已经动画化了。

运动中的物体比静态的物体更能快速引起人们的注意,在UI设计中尝试添加一些动画及动画图标,不仅能在视觉上快速吸引用户,还能使产品更具交互性,提升产品的趣味性。分享几个动态图标资源网站:

useAnimations:支持所有设备、网站、Android和iOS,可以免费用于个人和商业用途。

useanimations.com

Lordicon:每一个图标都提供线性轮廓和面形剪影两种风格样式,并且图标是基于Lottie动画引擎的矢量动画图标,大小完全可扩展,兼容所有主流浏览器。

https://lordicon.com

Icons8 Animated icons 2.0:提供的动态图标格式包括 Lottie 适用的 JSON、GIF 和 After Effects 格式,透过网页可以搜寻、预览动态图标效果。

https://icons8.com/animated-icons

Feather:设计师Cole Bemis制作的一个开源图标库,可自行调节图标大小和线条粗细。

https://feathericons.com/

4.17 图标命名规则

科学和高效的命名规则能够帮助我们快速定位到自己制作的图标,并且帮助开发缩短命名时间,加强团队写作效率。切图可按照“业务_类型_功能_大小_状态”的格式进行命名。

切图命名的格式建议为全英文,可在切图之前对图层进行命名,常用切图命名对照表如下所示。

中篇就到这里,关注持续更新。

小手一赞,年薪百万!

推荐阅读更多精彩内容