「设计规范」Icon的规范线到底是什么

「设计规范」Icon的规范线到底是什么_第1张图片
辅助线规范做图


大家好我是西城,今天我想说一下我们经常见到icon规范线到底是什么。

我就不说太多废话了,只直接说是什么吧。


规范辅助线由三个形状组成:正方形、长方形、圆形

规范主要目的是保证图标占的面积相等,先来看看下面:


「设计规范」Icon的规范线到底是什么_第2张图片
长宽高一样的三个图形

这三个正方形、圆形、三角形在我们视觉上看起来是相似大小的,再看看下面:


「设计规范」Icon的规范线到底是什么_第3张图片
把他们放一起

放在一起看发现所占的面积不一样,所以这就是为什么我们做icon的时候,做的图标都是一样的宽高,然而看起来一个大一个小的原因,就是面积不一样造成的!


「设计规范」Icon的规范线到底是什么_第4张图片
尺寸不协调!!


怎么办?

那么规范就是要保证图标面积一致就行了!


「设计规范」Icon的规范线到底是什么_第5张图片
一个园+两个相同的长方形+一个正方形

接下来我们就算面积吧:

「设计规范」Icon的规范线到底是什么_第6张图片


「设计规范」Icon的规范线到底是什么_第7张图片

我在这里给大家我已经算好1024尺寸的数值,大家只需要在sketch里做出1024尺寸的辅助图,以后都可以套用:

「设计规范」Icon的规范线到底是什么_第8张图片



接下来可以再进行辅助线延展,依次增加辅助线



「设计规范」Icon的规范线到底是什么_第9张图片
有助于精确绘图


「设计规范」Icon的规范线到底是什么_第10张图片
垂直水平线

接下来就可以绘制icon了

绘制icon规范依次于:



「设计规范」Icon的规范线到底是什么_第11张图片

正确设计规范


「设计规范」Icon的规范线到底是什么_第12张图片
「设计规范」Icon的规范线到底是什么_第13张图片



在AI里可以把画好的规范线按⌘(ctrl)+5变成辅助线,以便于绘图


「设计规范」Icon的规范线到底是什么_第14张图片


最后总结一下:

在设计过程中,记得再预留一定的安全空白区域,正确使用辅助线不仅可以规范你的icon,还可以增加你设计的说服力。

谢谢大家~

你可能感兴趣的:(「设计规范」Icon的规范线到底是什么)