ICON制作如何保持一致性?

Recommand
广州/设计爱好者/6年前/1325浏览
ICON制作如何保持一致性?Recommand

主要针对图标视觉比重问题解决方案!

一、图标重要性


图标,在一个APP界面中占据的面积并不大,但是方寸之地却承担了APP大部分的引导入口,是UI设计中至关重要的一环。好的图标才能给界面更好的体验,以及符合客户的APP品牌要求。


设计一个图标不难,但是设计一套图标时难度升级,其中我们要注重的点在于:

  1. 大小统一

  2. 风格一致

  3. 留白一致

  4. 简洁明了


二、图标制作不一致?


首先我们来对基本图形的视觉比重有一个认知,比如我们在下面同样大小的背景下制作图标,如图:

分别画上正方形、圆形、三角形,如图:

结果如上,我们会发现正方形 > 圆形 > 三角形,造成这样的原因是由于留白不统一,也就是视觉比重不统一,进而造成统一大小背景却画出不一样大小的图标,你们这个问题该如何解决呢?


三、制作具有统一性的ICON


(1)以制作大小为128PX的图标为例,首先制作图标辅助图形,可以以1PX为单位的单元格(外正方形描边1PX,内外正方形四周距离1PX)、3PX为单位的单元格(外正方形描边3PX,内外正方形四周距离3PX)、或4PX单元格(外正方形描边4PX,内外正方形距离4PX),单元格像素越大,做出来的图标错落感会强些,单元格像素越小,图标更稳定些。如图所以进行制作:

(2)在辅助图形上应该遵行的规则如下:

正方形:边长为内部正方形的边长;

长方形:宽为内部正方形的边长,高为外部长方形的高;

圆形:直径为外部正方形的边;

多边形:抵外部正方形的边长;

(3)牛刀小试一下:

最后,利用这样的辅助图形制作出其他具有大小统一,风格一致的图标,如下(是不是很简单啊,简单就对了,赶紧也去试试吧)







27
Report
|
37
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
工作渲染
Homepage recommendation
MOVA 扫地机器人-活水版
Homepage recommendation
大家都在看
Log in