拟物化（Skeuomorphism）风格的图标在iOS7发布之前广为流行。相当长一段时间，无论系统、网页还是第三方应用都争相使用拟物化的设计风格。那时候的dribbble网，各色优秀的拟物化设计作品也争奇斗艳、层出不穷。

下面先展示几张优秀的拟物化设计作品，让你们进一步了解这一风格，甚至爱上这个风格。大可不必站在产品的角度来较真，just欣赏它们的美，感受细节的震撼。

放两张鄙人当年设计的作品，略显粗糙，跟大神的作品比起来多有不足，见笑了哈哈。

好了，谈正事。设计师们设计的拟物化图标，一般两种方式：纯ps绘制，或者3D软件建模渲染+ps调细节。但今天我要说的是如何用css写一个拟物化图标出来，不需要任何的图片素材。很惊讶是不是！很惊讶是不是！少啰嗦，先看东西。

ok，教程开始~

在写代码之前，先说一些简单的光影原理（不涉及到透视还有材质，追求极简^_^），即素描的基础：三大面和五大调。

三大面：

五大调：

不同人叫法可能不同，但本质一样。三大面是指一个物体在光源照射下，会出现明暗的三种状态：亮面——受光面；灰面——侧光面；暗面——背光面。

五大调是指在三大面中，根据受光强弱的不同，产生更多明显的区别：高光——受光物体最亮的点；中间调——高光与明暗交界线之间的区域；明暗交界线——区分亮面与暗面的区域，不是一条真实的线，它的形状、明暗、虚实会随物体结构转折发生变化；反光——物体的背光部分受其他物体或物体所处环境的反射光影响的部分；投影——物体本身遮挡光线后在空间中产生的暗影。

来一张图，具象化这些理论。

明白了这些概念之后，我们在设计这个图标的时候，就有理可循了。因为这个图标结构本就不复杂，不需要做到那么精准，该有的都有就好了。

先把形状写出来，这个图标的形状非常简单，你可以按我的写，也可以任意微调，先不用管颜色，什么颜色都行。包括墙面、底座、凹槽、旋钮和小红条（我也不知道叫什么）。

效果如图：

这一步我们来调整一下颜色。要知道生活中的物体是没有绝对的纯色的，只要有光，势必产生明暗，这意味着所有的颜色都有或多或少的渐变。这个图标设计中，为了简单易懂，我们不考虑环境光了，除了那个红色条，其他都用黑白灰，不掺杂色相。

我们规定光源为位置在正上方稍微偏左的软光，这样看着比较舒服的。

我们先给墙面设置一个径向渐变，渐变圆心在中上方位置，圆心亮，四周相对暗。但不要有太大对比，柔和才好看。

参考色值：

效果如下：

来个线性渐变，同样上亮下暗，色差值不要太大。

参考色值：

效果如下：

这两个一起弄，对比着看，才看的准。参考色值：

凹槽（由于物体结构这里是凹陷的，光源被遮挡，自然比其他地方要暗）

旋钮（旋钮的颜色和底座基本上是差不多的）

效果如下：

不要遇到红色就想到那个"red"值，那种高饱和度高亮度的纯红在自然界中是不存在的，而且也不好看。我们挑一个柔和点的红。

参考色值：

效果如下：

到目前为止，大体的颜色都调完了，但是没有立体感。我们接下来通过调节投影、内阴影、高光等元素，使其立起来。

标题起为“立体感”是不负责任的，因为不能这么分类，只是为了通俗易懂。

这一步骤只用了一个css3的属性，就是box-shadow，它是非常强大的。无论是投影、高光、内阴影还是反光，都可以用它巧妙地调出来。

前方高能！

属性虽然只有一个，但是需要设置非常多的值。因为太多，不具体细讲了。

不过，这里有几个原则大家需要知道：

具体每个值都是什么效果，大家可以一个一个尝试对照，就明白了。

来看看效果：

这里需要注意的是，这个结构出现了大角度的转折，那么在转折处，颜色上应该突出一下。效果如下：

旋钮

红色指示条

在旋钮的投影交界处，我故意将转折处细细的边缘线进行提亮，这是为了让对比更加突出，增强立体感。红条没什么可说的，试试就知道了。

到这，我们的拟物化图标就完成了，再看一下最终效果：

源码奉上，朋友们可以按照自己的想法进行微调，看看谁做出来的最美观最自然。

以上，教程部分结束，我再谈谈我对拟物化风格的一些看法。

拟物化设计风格在光影、材质、透视、纹理等因素上都极为讲究，创作灵感通常来源于生活中的物件。一个好的拟物化设计，完美的细节会让人吃惊。这需要考查设计师深厚的设计功底，对光影材质的理解与把握能力，对图形的精准的构造能力，对软件工具的熟练运用能力等。

如今，拟物化的设计风格已很少出现在大众视野，从微软的Metro，到苹果的iOS7风格，再到Google的Material Design（不属于纯粹的扁平化，本文不谈，感兴趣的请自行搜索），扁平化（flat）设计风格已成为数字世界的主流（当然扁平化的风格很早就有，它只是印刷出版美学在当今数字世界的一次重现而已）。在电子产品的用户界面中，扁平化设计风格更为高效、直接，使用户得以沉浸体验，尽量不被眼花缭乱的其他视觉元素所干扰。但是，视觉风格是流变的，拟物化永远不可能被淘汰，它不仅仅是一个设计趋势，它还包括一个设计理念，即把现实生活中的对象用作视觉隐喻，使产品更便于使用。

谈论拟物化和扁平化的优与劣，这个话题没有意义，任何人都有偏好，两者本身也各有优劣。两种设计风格从来就不是对立面，我们可以很清楚地在扁平化设计中看到拟物化设计的精神内核所在。

最后，感谢阅读，希望喜欢，期待你的反馈。