APP设计中的细节（上篇）

一、卡片投影

在做卡片投影时将原本卡片复制一层，把底层卡片缩小之后（大概90%）使用高斯模糊（10px左右），适当调整模糊数值和不透明度，可以把投影做到更加精致美观，并且操作起来调节的数字也比较少，有利于整个项目投影的统一（注意蒙版的组不能直接模糊，需要点击图层—将所选拼合为位图）

二、图片的比例

不同板块的图片根据各自功能遵循一定的比例，即有利于产品的转化也可以使项目更加规范。常见的比例有16:9、1:1、3:2、4:3、3:1。

16:9 - 视频类尺寸多采用该尺寸

1:1 - 个人图像一般采用1:1尺寸；想在一排展示更多产品时一般采用该尺寸，既可以突出主体，又可以充分利用750的宽度

3:2 - 是胶卷的比例，所以一些app采用相机拍摄的照片时，可以考虑这个尺寸

4:3 - 图片展示的信息更加多，所以一些侧重展示图片的app使用该尺寸比较合适

3:1 - 这个尺寸比较特殊，一般用在对话框的图片里（对话框的图片尺寸比例大于等于3:1时缩略图统一采用3:1的尺寸显示）

三、卡片细节添加

添加细节可以把设计立马从平淡无趣变得耐看起来，平时多在花瓣、追波收集卡片上的背景纹理，多去临摹，自己设计的时候就会发现细节其实并不难。

四、页面的分割感

现在越来越流行用大留白代替分割线的设计，弱化分割线的使用，可以使用户在浏览时在视觉上更加流畅。

五、图标细节

图标可以分为面性图标、线性图标、线面结合图标。

面性图标可以添加细节例如：白色面性微渐变、色块不透明等。

白色面性微渐变：图标一边颜色为白色，另一边则微微映衬出环境色。

色块不透明：指的是同纬度的色系不透明，但不透明的面积占比较少。

线性图标应该注意统一线段粗细和圆角，一般粗细使用4px，年轻化产品可以使用稍微粗一些。

线面结合类图标应该注意每个图标面的比重应该相对均衡一些。

图标颜色应该统一渐变的方向和饱和度。并且金刚区图标颜色不宜过多（不能超过4个颜色）图标设计完成记得使用图标盒子进行视觉上的统一

六、使用数字字体

遇到字号较大的数字时，考虑使用数字字体，可以很明显的和其余文字区分开，提高界面的美观程度也能突出要表现的数字，用了就会发现有多香了～（对了，推荐的数字字体：lato、din。嗯…找不到字体可以下载“字由”，链接：http://www.hellofont.cn）

七、对齐

一般借助软件自带的对齐都很简单，但是设计是给人看的，所以我们更要讲究视觉上的对齐。

图标采用图标盒子对齐，上文已经说过了。

方和圆的对齐：相同直径的正方形和圆，正方形的视觉占比（面积）大于圆。所以一般我们用软件上下对齐没毛病后视觉上看起来还是别扭的，这时候，适当的把正方形缩小一点点就可以了。

按钮里包含图标的对齐：一般情况下按钮里只是文字，我们只要把文字上下左右居中就行，有图标的话如果把图标和文字打个组再上下左右居中一下好像没什么问题，但是一般来讲文字都会比图标复杂，也就是视觉占比大，单纯打组左右居中视觉上看起来会显得左右距离不相等，所以居中后，把图标和文字的组向图标方向挪一挪即可。

八、文字和背景之间的对比度

“W3C测试”前景色/背景色大于等于4.5:1，强光下视觉比较好。具体数值直接点击下面网址输入色值就可以得到。尤其碰到亮色背景而字体是白色时，觉得看起来不舒服了，就在下面网址测试一下。网站是：https://webaim.org/resources/contrastchecker/

谢谢阅读～