设计的实用方法阴影

来源：西安天琥设计培训学校时间：2018/11/12 8:48:29

几乎是GUI界面设计诞生的那一刻起，阴影的运用就无处不在。

20世纪末的应用界面基本上都长这样：

可以看到，界面设计有高光有阴影有渐变。在当时GUI设计是一个新兴的行业，大家都没有可参考的对象，传统的平面印刷设计很难拿来借鉴，同时又受制于制图软件特性限制，也就有了如上图的结果。

后来设计工具不断迭代，手法也越来越多，特别是iPhone OS(是的那会还不叫iOS)出世后，拟物设计「Skeuomorph」风靡整个设计圈，在iOS 6的时候达到了顶峰。几乎所有设计师都在拼命画ICON，花费大量的时间在界面中的投影、反射、纹理、高光上，谁的设计能让人更想”舔”一口，谁就赢了：

iOS 7 推行扁平化设计后，当时的设计圈就炸开了锅。「这么多年辛苦练习的设计技巧，说抛弃就抛弃?」于是他们还是想到了阴影。你要说2014年最流行的设计风格是什么，毫无疑问是渐变「Gradient」+长投影「Long shadow」：

如果你还有印象的话，一定记得当时Appstore只要上推荐榜的应用，一大半都是这种风格。

艺术源于生活，长投影在生活中也随处可见：

紧接着设计师们就看腻了长投影，开始转向纸片化的设计，另加上大范围的薄阴影烘托质感。风格依旧是扁平的，只是大家在探索的过程中往里面加入了很多新的元素，变着法子做出不一样的感觉。

为了更好的理解在这二十年里的设计风格演变，大熊画了下面的图来管中窥豹：

「阴影在设计中运用的演变」

大熊想说的是，对潮流不要抗拒，新的设计风格兴起一定有它的时代背景。(比如扁平化的设计将设计师从无止尽的像素堆叠中解放出来，从更实用的角度去做设计，让精力回归到最基本的交互和使用体验上。)然而也要时刻保持思考，风格是皮外物，适合的才是好的。

花这么长篇幅说阴影跟文章的主题「设计的最后一公里」有关系吗?

别着急，有的。

还是举个栗子，这是大熊2014年给某个定制高端户外游的公司做的视觉概念设定，仔细一看，问题不少。首先是采用卡片式的设计，最好将内容和背景脱离开，否则「可点击」的暗示不够强烈;其次是采用了幽灵按钮「Ghost Button」，要补充一些必要的细节让内容更完整。

所以我们可以这么改进：

通过边框「Border」和阴影「Shadow」将卡片导航与背景明显分割开;提高文字的可读性;

给幽灵按钮增加细节，即便鼠标没有移到上面处于「Hover」状态，也要给人明显可点击的暗示;

是否看出区别：右侧底部卡片的标题可读性提高了，卡片和背景也分割的更明显。

一点点阴影，差别可以如此大。