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

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

是不是很震撼，很精致，那丰富的细节让观者不禁感叹设计师的一丝不苟。

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

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

跟ps绘制出来的图标是比不了的，有很多细节是纯css代码没法实现的，这没办法。不过没关系，我就是通过这个练习让大家了解一下这个设计风格的原理，还有，你尽可以发到朋友圈装逼，并配上一句话“码农能干的事多了”。

ok，教程开始~

理论基础

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

三大面：

亮面
灰面
暗面

五大调：

高光
中间调
明暗交界线
反光
投影

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

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

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

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

形状

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wall {
            position: relative;
            width: 1000px;
            height: 750px;
            background: #eaeaea;
        }

        .base {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -170px;
            margin-top: -170px;
            width: 340px;
            height: 340px;
            border-radius: 60px 60px;
            background: #fafafa;
        }

        .groove {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -113px;
            margin-top: -113px;
            width: 226px;
            height: 226px;
            border-radius: 50%;
            background: #dddddd;
            z-index: 50;
        }

        .knob {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: #fafafa;
            z-index: 100;
        }

        .spot {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -4px;
            margin-top: -74px;
            width: 8px;
            height: 30px;
            border-radius: 10px;
            background: red;
            z-index: 150;
        }
    </style>
</head>

<body>
    <div class="wall"><!--墙面-->
        <div class="base"></div><!--底座-->
        <div class="groove"></div><!--凹槽-->
        <div class="knob"></div><!--旋钮-->
        <div class="spot"></div><!--红色指示条-->
    </div>

</body>

</html>

效果如图：

颜色

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

1.确定光源

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

2.墙面

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

参考色值：

background: radial-gradient(circle at 50% 20%, rgb(241, 241, 241) 10%, rgb(221, 221, 221));

效果如下：

由于光源位置在偏上方，所以墙面最亮的点也对应在偏上方，光源略微偏左在这里暂且忽略，为追求背景的对称。

3.底座

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

参考色值：

background: linear-gradient(180deg, rgb(244, 244, 244), rgb(234, 234, 234));

效果如下：

有点看不清楚了是吧，没关系，先不管它，继续。

4.凹槽和旋钮

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

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

background: linear-gradient(180deg, rgb(221, 221, 221), rgb(207, 207, 207));

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

background: linear-gradient(180deg, rgb(250, 250, 250), rgb(234, 234, 234));

效果如下：

5.红色指示条

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

参考色值：

background: #ff5d5d;

效果如下：

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

立体感

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

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

前方高能！

1.底座

box-shadow: 1px 4px 6px -3px rgba(0, 0, 0, 0.05), 3px 8px 20px -8px rgba(133, 133, 133, 0.9), 7px 16px 28px -8px rgb(188, 188, 188), 8px 33px 60px -12px rgb(200, 200, 200),
            1px 2px 4px 0 rgb(248, 248, 248) inset, 5px 10px 10px 0 rgba(255, 255, 255, 0.8) inset, 0px 20px 60px 0 rgba(255, 255, 255, 0.4) inset,
            -1px -2px 4px 0 #cccccc inset, -5px -10px 8px 0 rgba(144, 144, 144, 0.3) inset, 0 -20px 60px 0 #e0e0e0 inset;

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

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

物体的投影也是有渐变的，离物体越近的地方，投影越暗、越实，离物体越远，投影越淡、越虚。
亮部也是有层次的，越靠近光源的地方，越亮、越实。
底部有反光，因为墙面会反射一部分光给它。

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

来看看效果：

是不是很带劲，物体一下子就跟墙面拉开了。请注意底座最低端那一层淡淡的反光（其实墙面也应该有物体给它的反光的，但由于css3没法做出我想要的效果，就不做了，有点遗憾）。

2.凹槽

box-shadow: 2px 4px 6px 0 #c0c0c0 inset, -1px -1px 0px 0 rgba(255, 255, 255, 0.9) inset, -1px -1px 1px 0 rgba(0, 0, 0, 0.1), -8px -18px 40px 0 rgba(255, 255, 255, 0.8);

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

3.旋钮和红色指示条

旋钮

box-shadow: 1px 4px 6px -2px rgba(0, 0, 0, 0.05), 3px 10px 12px -8px rgba(0, 0, 0, 0.3), 6px 30px 30px -6px rgba(160, 160, 160, 0.5),
            1px 2px 0px 0 #fff inset, 0 -1px 1px 0 rgba(255, 255, 255, 0.4) inset;

红色指示条

box-shadow: 1px 2px 1px 0 #df3434 inset, 1px 1px 0 0 #fffdfd;

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

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wall {
            position: relative;
            width: 1000px;
            height: 750px;
            background: radial-gradient(circle at 50% 20%, rgb(241, 241, 241) 10%, rgb(221, 221, 221));
        }

        .base {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -170px;
            margin-top: -170px;
            width: 340px;
            height: 340px;
            border-radius: 60px 60px;
            background: linear-gradient(180deg, rgb(244, 244, 244), rgb(234, 234, 234));
            box-shadow: 1px 4px 6px -3px rgba(0, 0, 0, 0.05), 3px 8px 20px -8px rgba(133, 133, 133, 0.9), 7px 16px 28px -8px rgb(188, 188, 188), 8px 33px 60px -12px rgb(200, 200, 200),
            1px 2px 4px 0 rgb(248, 248, 248) inset, 5px 10px 10px 0 rgba(255, 255, 255, 0.8) inset, 0px 20px 60px 0 rgba(255, 255, 255, 0.4) inset,
            -1px -2px 4px 0 #cccccc inset, -5px -10px 8px 0 rgba(144, 144, 144, 0.3) inset, 0 -20px 60px 0 #e0e0e0 inset;
        }

        .groove {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -113px;
            margin-top: -113px;
            width: 226px;
            height: 226px;
            border-radius: 50%;
            background: linear-gradient(180deg, rgb(221, 221, 221), rgb(207, 207, 207));
            box-shadow: 2px 4px 6px 0 #c0c0c0 inset, -1px -1px 0px 0 rgba(255, 255, 255, 0.9) inset, -1px -1px 1px 0 rgba(0, 0, 0, 0.1), -8px -18px 40px 0 rgba(255, 255, 255, 0.8);
            z-index: 50;
        }

        .knob {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: linear-gradient(180deg, rgb(250, 250, 250), rgb(234, 234, 234));
            box-shadow: 1px 4px 6px -2px rgba(0, 0, 0, 0.05), 3px 10px 12px -8px rgba(0, 0, 0, 0.3), 6px 30px 30px -6px rgba(160, 160, 160, 0.5),
            1px 2px 0px 0 #fff inset, 0 -1px 1px 0 rgba(255, 255, 255, 0.4) inset;
            z-index: 100;
        }

        .spot {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -4px;
            margin-top: -74px;
            width: 8px;
            height: 30px;
            border-radius: 10px;
            background: #ff5d5d;
            box-shadow: 1px 2px 1px 0 #df3434 inset, 1px 1px 0 0 #fffdfd;
            z-index: 150;
        }
    </style>
</head>

<body>
    <div class="wall"><!--墙面-->
        <div class="base"></div><!--底座-->
        <div class="groove"></div><!--凹槽-->
        <div class="knob"></div><!--旋钮-->
        <div class="spot"></div><!--红色指示条-->
    </div>


</body>

</html>

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

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

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

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

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