如何巧用投影提高设计品质

本周和你们聊一下设计中的投影，随着iOS11的升级后，投影一下子又再次重回我们的视野，其实投影经常是Ul界面设计很重要的一个元素，它能助于我们区分所看到的UI元素，投影在最早的之后，是利用在图标设计上面，能很高模拟出界面真实是视觉体验！

投影的发展历程

图片来源于dribbble

▲代表着从2009年迄今整个按钮的差异，可以很显著的看见，投影从最初期每个按钮有精美的渐变，圆角和阴影，到中间的扁平化所有页面全部拍平，千篇一律，于是设计师再次将新的元素与平面结合，出现了黑色投影，更注重调的款式本身的色调。

投影的重要性

几乎所有的设计师在扁平化处理之后针对扁平化赞不绝口，作为新的趋势，它让信息非常简单，内容十分干净，在所有的设备上看上去很一致性，但是扁平化演进到现在我们必须去探讨，没有差别性的设计真的是美的么？扁平化的设计难题在于，它让UI的层次变动困难，让用户不得不去关注你内容组件本来，看个实例：

图片来源于dribbble

▲上图这个实例是我们设计师一直经常在做的，很符合现今我们的设计趋势，界面扁平的像纸片一样，虽然在界面里面采用了线来区别，但是当我们第一眼看见这个界面时候还是不清楚看那里!

▲然后设计师尝试在这个界面基础上去增加一些轻度的投影，明显好多了，信息被区分为三层，信息非常明确了一些，同时也有在扁平化的基础上，没有这么突兀。

▲上图是iOS7刚回来的时侯，完全没有投影，我们认真去看日历图标，闹钟图标，当你使用红色以及白色背景之后，闹钟图标和日历图标，完全被背景吃掉了，是十分奇怪的一个设计，我们是期望用户迅速找到它们想要的图标。

▲苹果在iO8时候终于解决了这个难题，在图标四周增加一个细微的投影，使得整个界面不会被背景吃掉，让用户更好的理解。

▲前后版本效果对比，差异性就在于投影，这个设计也经常沿用到目前。

▲同样的难题也发生在了苹果的地图工具，苹果有个版本地图搜索栏阴影去掉了，纯扁平了，由于地图原本就有很鲜艳的色调，使得阅读出来糊在一起了，右图是苹果优化后，在导航栏上方增加了投影，让整个设计看上去非常完全清晰。

从上述一些实例我们可以看出，微妙的投影对于提高页面的信息结构有很重要的功用，在现代界面设计中，包括最新的小米系统及谷歌FluentDesignSystem的公布，里面大大提高了层次感，这种依赖于光特效，阴影和颜色的效果，让整个效果非常符合将来的一种界面设计方向。

投影的类型

卡片投影

使用阴影突出显示两个模块之间的高程变化。阴影可以应用于多个模块，包括卡片，菜单，侧边栏和软件提示。

▲一般投影会区别几个不同的区间，从小到大，分为小中大，根据实际画面来选取不同的投影深度。