前言

本文记录了是我在工作中遇到的UI细节总结，也算是一些经验之谈吧，大家有没有感觉我们的设计已经做很细致了，但是总有一些不精致感，老板会说不专业。设计要对产品负责，对自己负责，下面将基础的UI设计细节做了个总结，也许是你容易遗忘的点哦！

一、按照icon栅格画完，还是不统一

我们都知道同一页面的同模块图标风格、透视、粗细、圆角、大小都要保持一致，但大家一定都遇到过我们按照图标标准绘制完，整体看大小还是不统一，我们的眼睛不接受这样的设计，这主要是因为设计视觉差导致的结果。

图标视觉体量

我们按照上面的icon栅格，绘制三个图标，发现订单和邮件比首页图标要大些。所以需要对订单和邮件进行微调，使其可以在视觉体量上是一致的。（当物理尺寸一致的状态下，要以视觉体量为准，毕竟是视觉设计嘛），所以在实际应用时，图标可在安全区域内根据实际情况进行适当调整。对于过于饱和的图形，高度缩短时，宽度就需要增加，来平衡视觉体重。

图标出血

另外，在设计图标时，我们要注意出血，使图标有呼吸感。防止图标贴边切，贴边切图标会感觉笨重感，也有可能造成边缘的切割留痕。以24px切图为例，为不影响图标在栅格内的发挥，在外边缘加出血。

二、图标尺寸比例如何制定

我们在设计页面时，发现图标应用场景很多，大大小小没有规律可循，导致乱用图标大小。

在界面设计中最常用的图标尺寸有：12px、16px、24px、32px、48px、64px等，发现都是4的倍数。

这里以ios页面24px作为常规图标尺寸，苹果规范定义最小点触面积是44px（375），安卓是48px。

所以我们在定义页面图标时可以根据App的最小单位的倍数来设定，例如4的倍数为例。

然后根据不同的场景选择图标大小，尽量相似场景使用同一尺寸，保证页面统一。

三、图标放大缩小后，图标粗细怎么确定

我们在设计过程中，会遇到不同场景下用同一图标，此时可能会对图标进行放大缩小处理，而在对图标进行发达缩小时，图标粗细怎么去定义。直接放大缩小，小尺寸线会粗，大尺寸线会细。

可以运用【扩展涂层及其样式属性】功能，它可以依据大小对属性也进行更改。24px线1.5，12线0.75，32线2，那这些线的粗细又是如何得出的了？

确定图标大小和线的比例

这边以上汽大众icon为例，我们取常规尺寸24px，再24下VW定义边为1.5，那大小与边的比例是16:1。这里比例大小没有固定标准的，根据产品品牌个性、理念、风格去决定的。

根据风格确定了图标大小和线条粗细比例后16:1，如果图标大小是160px，那粗细就是10px。

确定比例后无论图标怎么变化，都能给出最佳状态。关于icon的细节都学会了么，在之后的工作中我们可以运用起来了，来提升我们的专业度，和设计精细度。 细节决定成败，加油哦！