艺术专业

名校申请攻略领取

  • 姓名(称呼)*
  • 联系方式*
  • 意向国家
  • 意向专业
  • 申请学历
申请攻略领取

最新资讯

Popular universities


超实用的扁平图标绘制指南!
在平面设计、交互设计等设计中,扁平图标可以说是必不可少的一部分,而设计师在绘制过程中应该注意些什么呢,一起来看看吧,打算艺术留学的小伙伴在制作作品集时可以借鉴参考哦!


1

使用栅格


界面上的 icon 一般都能近似成一个基本形式,比如各个方向的长方形、圆、三角形、正方形。如果你把他们进行模糊化处理,你会发现他们都是差不多大的一小团黑色,也就是说其视觉重量是基本一致的。


把 icon 根据不同的形状放入栅格框架里面。举个例子,方形的 icon 就比三角和细长 icon 显得更紧密。


一个 icon 越紧密,它需要的空间就越少。一个 icon 的细节越多,我们在栅格框架中就应该给他更多的空间




注意不要让栅格限制你的创作,如果这个 icon 超出格子后的效果非常好,那就完全可以突破栅格的限制。

2

注意像素对齐


在非 retina 屏上,icon 的线条一定要紧贴像素网格,不要出现小数点;线型 icon 建议线宽 2px。



如果你使用 1px,那线条只能在内部或外部,不能使用中心对齐。使用居中的 1px 边框,使得图标会在100%的比例时模糊,不过如果你放大的话,它看起来很清晰。


依照格子来确定斜线的角度。尽量使用45°、30°、60°等常见角度,他们会比13.7°或者81°这样不常见的角度更清晰。

3

把握细节程度


设计一组 icon 时,先从最复杂的开始做起。这样就可以控制图标的细节程度,保证所有 icon 的视觉重量相同


如果 icon 的细节程度各不相同,那细节更多的 icon 就会吸引用户的注意力,看起来也更「重」一些。


4

控制最小间隔尺寸


在整套 icon 中,每个 icon 内部相邻元素之间的距离不应该太小。最好定义一个最小间隔尺寸,避免 icon 风格不统一。


对于线型 icon 来说,一个简单方法就是最小间隔大小与线宽保持一致。同时线条要清楚地分开或者相连,一定不要用那种似连非连的样式。


5

去除重复的部分


在一套 icon 里,你可能设计出很多重复的细节。但一定要舍弃这些重复的部分,突出每个图标中特色的点。这就像数学中的分数一样,视觉杂质越少,用户理解的就越清楚。


如果用户已经知道他们正在用什么样的软件,那就不需要一再重复地告诉他们。比如说在邮箱 app 里,icon 即使去掉「邮件」这个元素,用户依然知道自己是在收发邮件。


这个规则对于其他装饰性元素也适用,比如一些围绕在icon周围的框架、背景等。这些装饰可能没有帮助用户理解 icon,甚至在妨碍理解 icon。所以下面几点需要注意:


  • 坚持统一风格


在沉浸于图标设计前,请先思考风格方向。这不只代表要让所有图标保持特定的风格、颜色或质感。决定了图标风格方向之后,请保持一致。拥有多种变化与视重的图标组可能会自相矛盾。如果不确定图标是否彼此相搭,你可以将他们摆放在一起,然后逐个筛选出不需要的。完善图标组可能会需要好几次的修改。



  • 专注当前题材


浏览图标组会注意到的主要内容就是特定而一致的主题。图标组通常都有指定主题,不论那是音乐程式还是银行网站。如果觉得你的图标组意义不明确,请坚持使用单一主题或题材


  • 运用网格辅助线


你曾试过在空白纸张上设计图标吗?随着时间过去,你画出的线条和形状会开始不平直并且参差不齐──如果不在稍后整理就会变成一团糟。网格能够充当图标的边界──他们激励你在有限的空间里创作。



  • 配色保持一致


大多数的设计师在早期就会了解一致的配色对设计来说非常重要;图标设计也不例外。全程保持一致的配色能够让多个图标彼此间拥有连贯性。选择配色时,请确认颜色符合图标组主题。

根据经验法则,请避免在图标中使用过多色彩;坚持三种颜色或更少,并且选择能够相搭的色调,像是互补色或相似色。


  • 保持相同的尺寸


除了让图标组维持相同的配色之外,拥有一致的视重和尺寸也很重要。图标组内有过多变化可能会影响整体设计讯息,让图标看起来不匹配。

如果你忠于轮廓或形状,请确认每个图像的尺寸和视重都是统一的。例如,在下面的的图标组中,每项设计的圆圈和线条宽度都是一致的。



  • 设定严格的图标规范


想要在图标组里保持一致性,请设定一些规则。例如在每个图标里使用4像素的轮廓,15像素的网格界限,以及一致的圆圈与十字结合。不论规则是什么都要贯彻到底。完成后你会发现图标们感觉是一致的。


  • 确认所有尺寸的清晰度


大部分线上或程式介面的图标尺寸都相对的小。设计图标时,请尝试调整大小,以确保每个图标即使在最小的尺寸都能保持清晰。精细的图标常常在缩小时失去细节表现,而这会让他们变得难以阅读与理解。


同学们在平时设计作品时需要通过大量调整,不断改善你设计中不完善的地方,结合所有配色,构图轮廓等方面,才能设计出优秀的作品。图标的主要目的就是快速而清晰地传达视觉讯息,如果图标难以辨识,就需要你重新按照上面的方法多试几次啦。
- END-