产品设计都应该知道的ICON知识

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

674480f45bf9ccbb2dc0fcaff9c047ba

图标是UI设计师必会技能之一,而一个好的icon是怎么设计出来的呢?

今天我们来给大家一个图标设计的全面知识汇总:

首先,在制作图标前要考虑以下几点(拿张纸默默写下来):

  • 你的icon主要适用于什么设备?
  • 需要什么风格的icon?
  • 有没有其他设计要求?

接下来我们进入设计过程:

  1. 设计从网格开始

针对不同的设计我们会运用不同大小的网格。我们这里以32*32的网格为例。

d9ce83d5f8ae73389a961fee032d2fdd

网格边缘的2px是我设计中不可触及的,也就是留白边缘。如果没有特殊情况的话,我一定不会让我的设计图形进入这个边缘界限。而留白的目的也是为了让设计看着不会太满给用户一定的呼吸感。

图标的结构分为形状和方向两部分。如果你的图标有边框,一般会在边界框位置画出像正方形,圆形,三角形,矩形等图形作为边框。

圆形图标会在网格中成居中状。在圆形图标设计中四个边缘会触及到内容区域的边缘,但不会到留白区域。一些小的图形和边边角角部位会超出圆形,但不用担心,这是一个常见的现象。

方形图标一般也会在网格中居中,但大多数情况也会触及到内容区域的边缘。我们看下下面这张图:图中分三个方形区域(蓝色、橙色和绿色),图标中的大部分图形在中间橙色区域内。每个区域内的图形占比取决于图标整体的视觉效果,而这个把控需要你不断地练习找一些感觉才能自如的运用。

b1cd88efce8451fc6cceb49bd1966612

在32px的网格中,你会注意到从28px中垂直和水平的分出20px区域,一般在设计图标时会试图遵循这样的规矩。

50a6c57cb19e0b53264f90e4f16200e3

不规则的图标设计会用一个圆形来去对齐,如下图。你看一看到图形已经触及到圆形的边缘,这里你不用特别精确的卡边,只要接近就可以了。

06d0563281553b1a298b3fae5c06ec1f

但你要记住网格规矩不是所有设计都要遵循的,一个图标的本质远远超过了这种规矩的设定。网格会帮助你提高图标设计的一致性,但是如果在设计一个牛逼图标和遵循规则中选择的话,相信你也会选牛逼设计的。

  1. 从一个简单的几何图形下手

设计图标跟画草图一样:从一个简单而粗糙的圆形、长方形又或是三角形开始。在设计小图标的时候,手绘的表现方式可能会看着不那么精致,所以用AI做设计是个更好的选择。用一些基本的几何图形进行设计会更加准确(尤其在曲线边缘部分),在调整的时候会更快,同时也能更精确的适应网格模式。

bbaa4297900c328a0f249baf65ab695e

  1. 边缘、边角、曲线及角度规范

尽可能在设计时边缘、边角、曲线及角度遵循一些数学规范的同时又不失有趣。换句话说就是不要太相信自己的眼球,在一些细节上需要遵循规范,因为如果这些元素不一致的话会很影响图标的质量。

角度

在设计中,大多情况我会使用45度角或者它的倍数。45度角会显得很均匀(在像素下会表现得更强),这种完美的对角线会让人眼很舒服也很清晰。这种模式同时也可以建立一组图标的统一性。如果我要打破这种规则我可能会使用减半角度(22.5或者11.5度)或者15的倍数,当然也会根据情况进行调整。使用45度的好处是即使反角度用也是不打乱规则的。

0246cabc4b24961f2df114f2d06ccb17

曲线

曲线是个特别考量技术的地方,即使图片质量很差,一看曲线就知道设计师的能力怎样。而且人眼的测量总也一些小的误差,大多数人眼睛和手协调能力达不到那么高层次,所以用软件的形状工具和一些数字来创造曲线从而达到效果。

273f91e1bbc4c3158cf48da025977140

 

4f4091f3b599e5a56a720eeadc35241c

边角

圆角可能用的并不多,2px半径的圆角就很显然是个圆形了。你要根据你的设计总特征来选择是否用圆角,并且要用多大的圆角。

4f4091f3b599e5a56a720eeadc35241c

 

68cb87ebcb2c859c876d59392b3511fb

像素效果

图标的像素效果在用户界面中是很重要的一部分,尤其在小尺寸设计中很影响整体视觉。如果像素网格中行间距不对齐,会导致边缘出现锯齿在小图标上会看起来很模糊。要是调整图标的像素网格会使直线变得单薄,角度与曲线的精确度就没那么精确。这也是为什么建议大家用45度角的原因,比较好掌握,更加精准容易对齐。

线的粗细

说到线的粗细,2像素应该是最理想的,可3像素是最通用的。我个人更倾向2PX和4px,理想状态下我会用2的倍数比较多。在大多情况下字和扁平的图标是要避免特别细的线条,除非你是为了做出一些期望效果。如果你想定义线条的形状,一般设计师会通过光线和阴影的方法。

2d477faad6d0d3df5c5a01490dc93a76

  1. 通过设计元素及图标特点来达成统一性

设计师会通过某一个元素让一系列设计更统一,像荷兰设计师在2015年图标沙龙上谈到他为荷兰政府做的项目,在设计中他跟伙伴运用了“缺口“的元素,不是每一个图标都有这个元素,但是大多数的统一让这一系列有了自己的特色,也真正的把它们融合了起来。

1243baa9d8b2a56a55499c8aa3729f40

  1. 有节制的使用细节与装饰

图标的目的与让用户的沟通,让他们想到并且进行选择。太多的细节会增加图标的辨识复杂度,尤其是小尺寸更会成为累赘。当然,细节的复杂程度也会影响单个或者整个系列图标的效果。所以当你拿不准细节轻重的时候,最好的方法是考虑最低限度的保证细节,但要保证高质量的明确图标含义

18800f58e492839555c03e0c10cec16d

  1. 独特性

虽然我们能看到很对牛逼设计师在制作高质量的图标,但是他们过于注重设计趋势和其他高端设计师的风格模仿。作为一个设计师来说,创造可能是我们应该更看重的,我们可以从结构、字体、工业、心理、自然等其他领域寻找灵感。千篇一律的图标我们都见过,可是特立独行的你才是用户真正认可的风格。

1b28a8751b8913cd133de7606bcd04c1

下面讲一些设计过程中你需要注意的:

  1. 让用户更容易理解

4ea6325f01e6d50908deb179c5d196ae

图标最重要的作用就是它的辨识度是否让用户易理解,人们需要在小图标中做出他们的选择是件很困难的事,所以对于品牌来说,大部分的图形设计是为了展现品牌logo或者是一个标志性的形象。当然对于一个新的或者小的品牌来说也会通过一些其他方式来展现。

  1. 图标并不是图像

7ae740e706bd8f1e77a2ce8e0731f83a

图标可以包含图像,但也可能是一个文本,一个logo又或是这些元素的组合。图像图标在其他适应设备上会不易阅读,而图形的话可以携带更多的视觉感。

  1. 避免文字

19c19188b4371b73d847ba077e34f1dd

对于一个图标而言,不会使用单词作为内容,因为空间本身就不大,而内容不多又不易用户理解。这也是一则经验:如果这个文本不是你logo的一部分,那么请尽量避免。如果是,也要慎重考虑一下。

24d5b0b655256579ce09b7172e47fb87

此外,很多图标实际使用是在一定的环境下,大多数包括一行描述性文本在图标下面。设计时,字母的颜色和图标的类型或者网站也要保持一致,这样才能建立品牌的统一性。

  1. 用鲜亮的颜色

82dee63a480a8fa3b1026295e5075b83

想让你的图标脱颖而出?那么请大胆的用色。选择一个充满活力的颜色可以帮你抓住用户注意力,让你的品牌更有特点。比如蓝色,特别是天空蓝和海军蓝,你可能会回避因为这种大众色并不吸引人。但如果蓝色是你的主要logo色,你可以尝试一些新的偏中性的颜色,像石灰绿,或者选择一个季节性色调比如夏天选择亮橙色、春天选择粉红色之类的。

  1. 做一个logo的延伸

bc3dc4d47972b6bd3a3c9a7e0909842c

你的品牌会有它的logo,可一旦它变成了图标,更像是一个标志。这个标志可以是一个简单的logo或者图像,它需要表现的更直接更能让客户记住它。而品牌也希望将logo和图标建立一些联系,让自身达成统一

  1. 图标的用途

194f3a8334d09705f42fcbe93708402c

图标不止限于手机或者电脑桌面上,所以在设计时也要顾及到它的大小和应用,所以在做大图标后缩小是个更好的方式。图标设计涉及到它的规模和大小,格式也成为了一个重要的因素,为了方面运用,矢量图是你最佳的选择。

  1. 内容外面的世界

3593ec80c862b3b247218f581e00d05e

最近有很多图标运用单色背景加白色图标,扁平化设计与阴影结合,这种趋势虽然很流行,但不要局限在这种设计里,在你的图标中做一些不一样的设计。当大多数人考虑用方形的设计,也许你该考虑些别的方式。在背景中加入纹理效果就会在人家单色中脱颖而出。

  1. 单色挑战

4707268facb07844df8b2804ad10998c

有一个有趣的小窍门设计师们多年用来测试设计的有效性——单色模式。在单色设计中,如果你的设计传达同样的信息,那么它是个有效设计;如果没有颜色它变得很弱甚至影响用户识别,那么请继续修改。也有些设计师会先用黑白色进行设计,建立一个坚实的框架后,然后再添加颜色。

来源: IDC创新设计中心

您的赞赏,是对我创作的最大鼓励。

评论( 0

登录后参与评论
加载中