［读书笔记］用投影来提高UI界面品质

原文：如何巧用投影来提高UI界面品质

投影的发展历程

［读书笔记］用投影来提高UI界面品质 ［读书笔记］用投影来提高UI界面品质

上图代表从2009年起按钮的变化，精致渐变→圆角、阴影→扁平化→彩色投影、更强调材质本身的颜色。

投影的重要性

扁平化作为新的趋势，让信息更简洁，内容更干净，在不同设备上也能保持一致性。但扁平化的设计问题在于，它让UI的层次变动困难，让用户不得不去关注内容组件本身。

上图界面扁平如纸片，虽然在界面里运用了线加以区分，但第一眼看见它依然不知道看哪里。

［读书笔记］用投影来提高UI界面品质

当尝试在上一个界面上加一些轻微的投影后，信息被分为了三层，信息更加明确，同时，在扁平化的基础上没有那么突兀。

［读书笔记］用投影来提高UI界面品质

上图为iOS7刚出来时，完全没有投影。当背景使用白色或者黑色背景时，日历或者闹钟图标完全被背景吃掉了。用户在使用感上存在着不适（没办法快速找到图标）。

［读书笔记］用投影来提高UI界面品质

苹果在iOS 8的时候已经解决了这个问题，在图标四周增加一个微妙的投影，使得整个界面不会被背景吃掉，让用户更好的理解。这个设计也一直沿用到现在的iOS 11系统。

［读书笔记］用投影来提高UI界面品质

同样的问题也出现在了苹果的地图软件里，左图导航栏底部没有阴影，导致导航栏跟地图粘在一起。右图是苹果优化过后，在导航栏底部增加了投影，让整个设计看起来层次感更清晰。

［读书笔记］用投影来提高UI界面品质 ［读书笔记］用投影来提高UI界面品质

从上面两个案例中，我们可以看出恰到好处的投影对于增强页面的信息结构有很重要的作用。在现代界面设计中，包括iOS 11以及微软Fluent Design System设计语言，运用投影、光特效、阴影材质增强了层次感，更符合未来的设计方向。

投影的类型

·卡片投影

使用阴影突出显示两个组件之间的高程差异。阴影可以应用于多个组件，如：卡片、菜单、侧边栏、工具提示。

［读书笔记］用投影来提高UI界面品质 ［读书笔记］用投影来提高UI界面品质 ［读书笔记］用投影来提高UI界面品质 一般投影会区分几个不同区间，根据实际场景来选择不同的投影深度 规范来源于

·弥散投影

与上面卡片投影的区别：弥散投影颜色一般是物体本身的颜色，而不是黑白灰。

图中按钮粉紫色的投影也是按钮本身粉紫色透明度变化 ［读书笔记］用投影来提高UI界面品质

列举弥散投影在sketch中的实现步骤

［读书笔记］用投影来提高UI界面品质

·照片投影

其特点是投影本身是在原照片上做了照片的模糊处理。目前在苹果系列产品中出现，如iOS 11的苹果音乐，营造的效果柔和，通透，富有光泽和活力色彩。

［读书笔记］用投影来提高UI界面品质 ［读书笔记］用投影来提高UI界面品质 ［读书笔记］用投影来提高UI界面品质

照片投影目前iOS 11代码可以实现，步骤简单。

［读书笔记］用投影来提高UI界面品质 ［读书笔记］用投影来提高UI界面品质 ［读书笔记］用投影来提高UI界面品质 ［读书笔记］用投影来提高UI界面品质 ［读书笔记］用投影来提高UI界面品质

照片投影的效果就出来了，可以保存成Symbol，这样在Symbol里面改变图片就可以得到更多效果。

·长投影

这个效果12年的时候流行过，现在偶尔在平面设计里看见，UI领域很少再出现。

［读书笔记］用投影来提高UI界面品质

总结

投影的运用需要考虑页面场景，效率型页面可能列表更合适，投影的目的不是为了页面好看，而是让用户对于信息的理解更加简单。