当前位置:首页 > 运营 > 正文

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)

编辑导语:图标是界面视觉组成的关键要素之一,而了解这些图标的基础知识,也是入门设计的必备条件之一。本文作者总结了一些产品的图标,对图标的基础知识进行了分析,一起来看一下吧。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第1张2. 历程

80年代,本身是想把图标做的的具象,却因为当时电脑性能不足无法做到,所以设计师只能在有限的空间里面进行创作,对好的标准是越具象越好。

微软和苹果相继推出了新的系统界面,随着1995年计算机显卡在分辨率和色域上的提高,设计师或艺术家有了更大的发挥空间,随之出现了更多颜色的运用以及更多透视效果的可能性。刚开始只能设计单色的简单的图标,到后来可以执行各种创意,实现各种效果,一直到现在。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第2张2. 英文字母图标

英文字母图标通常是提取产品名称首字母进行设计,由于英文字母本身造型简洁,结合产品特点进行创意加工,很容易达到美感和识别性兼备。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第3张4. 特殊符号图标

特殊符号图标在应用图标的设计案例中相对较少,由于符号本身的含义会对产品属性有一定限制,所以针对性比较强。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第4张6. 动物/单双行剪影图标

动物剪影通常是提取动物整体形象或者局部特征部位作为设计元素,这类应用图标背景为单色或者渐变色,少量的会辅助一些图形作为背景元素,动物采用单色填充,以白色填充居多。

单双形是指应用图标只展示单个或两个的剪影图形,生活中可以作为剪影设计的元素很多。如食物、工具、生活用品、学习用品、娱乐道具等等。可以独立形成剪影图形,也可以根据产品特点进行创意加工,最终形成应用图标独有的造型图案。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第5张9. 线形图标

线性图标风格给人简洁轻快的感觉,线性设计的方式分闭合式和开放式,可以是一条连续的线条或者几条线段组成。在有色背景上面线条通常反白处理,背景设计可以是单色、渐变色、其他辅助图形设计等。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第6张12. 动物局部图标

利用动物局部进行图形设计,可以让元素特征更加明显。比起展示整个动物形象,局部特征展示视觉表现力更强。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第7张13. 人体局部图形

利用人体局部作为图形设计元素,比较常用的有眼、嘴巴、手掌、头部等。利用人体的元素进行设计,用户对图形的敏感度更强,易于传播和记忆。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第8张14. 卡通形象图标

卡通形象与动物形象容易混淆,因为很多卡通形象都是基于动物设计演变而来。这里单独提取出来是为了归类一些单纯以动物外形为设计元素的表现手法。卡通形象设计在应用图标的设计中是非常常见的,很容易对用户形成记忆。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第9张15. 拟人化图形图标

通过对接近圆形或者构图饱满的图形添加眼睛等元素,可以使整个图形拟人化。给原本冰冷的图形赋予其生命,拥有一定的情感表达,让产品更加亲民,更容易被用户所接受和记忆。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第10张17. 渐变色背景图标

渐变色背景的运用越来越受到设计师青睐,相对于单色的背景视觉表现力更加丰富,整体色彩给人通透的感觉。渐变色可以是双色渐变,也可以是多色渐变,根据产品的气质灵活地运用。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第11张19. 活动氛围图标

对应用图标进行特定的活动氛围包装。会保留原本的图形面貌,进行整体的氛围营造,以突出购物火爆的场景感。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第12张

IOS启动图标keyline线规范:

苹果官方会给 Production Templates 文件,我们只需要使用1024px*1024px这个尺寸进行启动图标的设计,把设计好的的启动图标放在文件里的智能对象的图层里,这个时候你会发现所有的尺寸的图标都会换成我们做好的启动图标。

这里提醒一下,虽然我们看见的iOS的图标是个圆角矩形,但是机上它并不是标准的圆角矩形,而是某种连续曲线。但我们很难肉眼地看出区别,因此并不用纠结它的圆角,按照直角矩形的尺寸进行绘制就好。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第13张四、功能图标1. 单色线性图标

风格简约、外形简单,具有强烈的识别性,在视觉感知上轻松、干净。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第14张2. 双色线性图标

更具表现力,细节更丰富,结合颜色的叠加、对比、互补提升了图标的层次感和丰富度。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第15张4. 渐变线性图标

渐变线性带出图标的质感,结合「不同深度」或「不同饱和度」的变化,让图标更具有细节和层次。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第16张6. 双色图标

通过对比色、邻近色的搭配营造整体的图标氛围,提升了图标的层次和丰富度,双色的表达也增添了图标的趣味性。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第17张11. 渐变层次叠加

整体效果与不透明度变化较为接近,通过渐变的深浅变化,使得形状的衔接处出现了明暗对比,因此图标也具有了厚度和层次感。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第18张12. 毛玻璃图标

利用背景模糊的效果,单从视觉上与透明度变化或者颜色叠加相比都更具有空间感一点,图标具有较强的设计感。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第19张14. 轻拟物图标

核心基础和拟物设计一致,省略了更多复杂的细节,重点放在光影的表达上,高光和阴影都非常到位。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第20张15. 写实图标

零几年一几年的时候,直接反映现实、投射现实,方便用户看一眼就知道设个功能或者这个按钮是干嘛的,后来因为显示器的分辨率跟不上,慢慢风格变为扁平化,最近几年又逐渐兴起,最典型的就是Apple的Mac系统上的图标。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第21张16. 2.5D图标

建立在轴测图的基础上,XYZ轴,具有立体透视的感觉。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第22张18. 照片处理图标

常见于生鲜类APP,让食物看上去更真实,更鲜活。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第23张19. 装饰图案填充图标

黑白线 品牌色,或者两个相近色。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第24张20. 整体填充图标

弱面强线的外形识别度较高,更符合图标的表达。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第25张21. 线面错位图标

在双色图标的基础上,线和面按照统一的百分比进行缩放,或使用统一/有规律的图案,进行透视和位移的设计,整体呈现一种交错叠加的视觉效果。

22. 卡通插画图标

整体感觉比较卡通、可爱、二次元。

五、设计规范

图标是任何设计系统或产品体验的重要组成部分。图标能够帮助我们快速导航,它们与语言无关,最重要的是:它们非常小,所以它们不占用很多地方。图标是良好设计系统的基本组成部分。因此科学严谨的设计规范能帮助我们设计精致、风格统一的图标。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第26张1. 尺寸

ios的删格式 4 的倍数,安卓的删格式 8 的倍数。想要做到两端都适配就得选用8的倍数,又因为ios的最小可点击区域是 44px,所以 48px 是比较合适的尺寸。不是硬性规定,最好要遵行一下 4 或者 8 的倍数。

设计师必看超全面的图标基础知识(设计师必看超全面的图标基础知识)  第27张

图标绘制基于 48x48px 画布绘制的线性图标,线宽默认为 4px。

不同场景缩放比例使用:

图标为 64x64px 时线宽为 6px(基准线宽)图标为 32x32px 时线宽为 3px(基准线宽)图标为 24x24px 时线宽为 2px(基准线宽)图标为 16x16px 时线宽为 2px(基准线宽)2. 图标的keyline线

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

3. 图标关键图形

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

4. 图标的拐角

1)直角拐角

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

2)非直角拐角

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

5. 图标区域 – 封闭和非封闭

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

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

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

6. 图标组成 – 线段和端点

为保证风格的整体一致性,图标所有线段端点默认均应为与线段同宽的圆角端点;通常情况下线段端点和可编辑节点坐标以整数坐标为佳。

默认基于 48dp 画布绘制的线性图标,线宽默认为 4dp;无论直线和曲线在任何时候均保持一致线宽。

7. 图标绘制规则

当线段与曲线相交或者与直线非垂直相交时,线段末端用圆头;当线段与直线垂直相交时,线段末端用方头;当圆点的直径与线宽一样时,圆点用图形绘制,不用线段。

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

8. 图标中的倾斜角度

图标中的倾斜角度应为 45 的倍数,保持与 Keyline 中的对角线或十字垂直相交线保持平行关系。

若是矩形外框,倾斜角度也可以与矩形的对角线或十字垂直相交线保持平行关系。

角度为 45°、30° 和 60° 的对角线比 13.7° 或 81° 等不均匀角度的对角线看起来更锐利。

9. 图标断口与间距

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

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

10. 图标风格变换

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

11. 命名规则

科学和高效的命名规则能够,帮助我们快速定位到自己制作的图标,并且帮助开发缩短命名时间,加快团队协作效率。切图命名可以按照「业务_类型_功能_大小_状态」的格式,最好使用英文。

12. 页面或功能中英文对照表13. UI模块六、图标设计的评判标准

我们已经了解了图标的基本理论,那我们如何设计出一个好的图标呢?怎么看我们设计的图标是否符合产品呢?下面我们将从4个方面进行了解,什么才是一个好的图标。

1. 识别性

设计师们有时会过于注重形式,忽略了本身的功能,导致图标难以识别,这打破了它最重要的图形意象属性 – 图标的传达含义功能必须放在首位。

图标是一个对象或动作的视觉体现。如果对于用户而言,这个图标含义不明确,该图标就立刻失去它的实用价值,并成为一个视觉干扰。在图标设计中,我们必须保证图形是简洁、严谨、清晰、边缘干净利落的,这是提升产品界面品质感的一个重要而且基础的部分,而不是盲目地追求流行的视觉风格和炫技。

达到基础水平以外,在图标中我们还可以通过融入品牌信息、有趣的细节使图标更有吸引力,提升用户对产品/品牌的好感度。

图标设计理念的本质是减到最简形态 – 简化图标是出于降低学习曲线的需要。设计应确保即使图标在小尺寸更具有可读性和清晰度,所以精心设计的图标应该能够快速辨认,一目了然。

2. 规范性

我们需要保证每个图标的视觉大小的一致性,图标栅格用于图标元素绘制的参考并帮助建立清晰的内容轮廓边界。关键线有助于促进图标统一性,简化设计过程中比例调整成本。

3. 统一性

在绘制一整套图标时候,统一性就非常重要,不要在一整套图标中混入不同风格的样式,风格一致性将帮助用户识别图标并理解它们具有同等重要性或状态。

界面中的图标一般是成系列的设计,除了视觉风格和特征保持一致以外,在同一产品内,同样的功能和信息图标应也保持一致的形态,避免用户产生疑惑。图标的统一性上可以从线条的粗细、颜色、圆角、倾斜角度方面进行检查。

4. 呼吸感

呼吸感的意思就是适当留白。不管是在做图标还是做界面,适当的留白可以突出主体,让空间更有张力,更具备可看性。图标的相邻元素之间的空间不应太小或在整体中不一致。定义最小间隙并将其保留在任何地方以避免轮廓“粘连”。

七、总结

图标 设计是设计师必备的能力,图标绘制看似简单,要做好却并不容易,好的图标设计不仅能帮助用户更高效地解决问题,还能帮助产品和品牌形成差异化,非常考验设计师们的细节,不过UI设计处处充满细节,想要自己的界面更加精致,就不要忽略每一个可以提升的点。

以上就是分享的图标基础知识的大部分内容了,图标本身是一个比较大的范围,文中难免有很多不深入的内容,欢迎各位总监们的指教。最后感谢大家阅读,希望今天的这篇文章能够帮到你。

附录·参考文献

《Material Design》

《Apple Developer》

《History of icons》

《An oral history of the hamburger icon》

《Hopefully, the Ultimate Guide to an Interface Icon Set》

《设计师必看的图标设计指南》

本文由郝小七指导http://www.woshipm.com/u/917803

本文由 @明非 原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash,基于 CC0 协议。

取消
扫码支持 支付码