风格说明

轻拟物是近几年兴起的一股复拟物化的古的风潮，这一股隐隐的风潮在 MacOS Big Sur 发布时被摆上了台前。轻拟物风格介于拟物和扁平之间，仅采取拟物中能够塑造立体感的高光和阴影部分，舍弃细节的结构和纹理，所以可以明显感觉到轻拟物没有拟物图标这么繁复复杂，观感上却有很强的立体感。

所以轻拟物只是一种在扁平图标的基础上增加光影的做法，与真正的拟物有本质的区别，它追求的不是真实，而仅仅只是立体。

设计要点

轻拟物本身也是拟物，所以它的核心基础和拟物设计师一致的，只是省略了更多复杂的细节。而对于整个拟物的体系来讲，最重要的东西实际上只有2个——形体和光影。

1.形体表现

形体的表现，就是对图形外轮廓的样式的呈现。在过去我们写的图标分享中，有写过面性图标进阶的设计中，可以包含更多的细节、内部元素，而不是仅仅只有外轮廓。

轻拟物的形体设计就要处于进阶面性图标或者更难的水平之上，即你要把这个图形的内容有明确的示意并画出来，而不是用抽象的图形做填充而已。

比如大众点评的快速入口图标，虽然看起来很复杂，但是那是配色上的复杂，而不是形体轮廓上的具象化。

换句话说，拟物插画的图形基底，类似扁平插画风格图标，不能表现得太抽象，也不能增加过多的细节，需要一种恰到好处的平衡（玄学），这就非常考验设计师的判断和经验了。

并且，在描绘轮廓的时候，新手尽可能的采取正视图来进行绘制，而不要通过俯视图、侧视图、斜视图等方法来呈现图形的多个面，这样难度会大幅度上升，比如下面这种情况。

2.光影表现

除了形体外，光影就是整个拟物的灵魂了。

当一个完整的图形完成填充色时，它是扁平图案，如果完成光影呈现的时候，它就是三维空间的立体图形，比如下面这个圆的案例：

在拟物的设计中，我们对光影的定义是至关重要的，所以首先就是针对该图形确定光源的方向，是上方、前方、左上还右上，这对后续的设计有一连串的影响。

如果对光影没有正确的解释，那么在制作细节的渐变角度、投影的使用上，就会产生错误的设计，造成光影视觉冲突和矛盾。

在创建了光源以后，物体受到光线的影响就会产生明暗面和投影，可以简单划分成4个部分，高光、亮部、暗部、投影。

这和我们学习的素描有一定的差异，美术中对光影的表现害会包含明暗交界、反光面，这对于轻拟物的来说负担太重，所以我们要去掉它们，接下来重点讲讲高光和暗部。

高光是物体作为受光物对光源的直接反映，比如人像摄影中人眼眸中的高光就是对闪光灯的镜像表现，再或者一拳超人中男主光头上长期存在的高光配饰（多数动画的光头角色都有）……

高光可以非常有效的增加画面的层次和对比性，让物体看上去更有冲击力和观赏性。

而暗部，则完全是为了正常表现物体结构和弧度增加的示意，因为不在受光面，所以颜色会变暗。在实际操作过程中，我们可以通过渐变的方式开控制明暗的表达，但尽量不要直接手动设置一个渐变色出来，而是为它叠加暗部或亮部的黑白透明度渐变。

了解这几个特性以后，下面，我们就通过一个实例来讲解一下轻拟物设计的过程吧。

案例演示

作为轻拟物的演示，直接画个图标讲一遍怎么操作是没什么用的，我们要从实际场景出发，用它来解决一些真实的问题。比如看看下面的 KFC 官方 APP 首页：

总结它的问题，不难发现首页顶部业务功能太多了，顶部图标就包含30个（加滑动的），虽然每个模块图标单看都没有硬伤，但堆积到一起，就使得顶部缺乏足够的信息层级和对比性。

我们要做的，就是通过轻拟物的方式，调整快速入口最大的三个图标，凸显它们的重要性以及和其它图标的视觉差异性。先从第一个图标开始，讲解一下如何完成轻拟物化设计的升级。

第一步：确认轮廓造型

第一个操作，即确定图标本身的轮廓。根据原有图标的样式我做了一些改动，包括加粗车头，减少高度，增加车灯等。并对每一个模块进行纯色的填充，定义它们的色彩和做出区分。

形体的重要性在于要对图形本身有比较合理的呈现，不要让比例失调和图不达意。

第二步：完善图形细节

这一步，就要在原有基础上，进行下一步的深入。包括对一些细节交代得更清楚一点，增加一些有趣的小元素等等，完善它的具体样式。

第三步：增加基础的暗部表现

在这里，我们就要开始为图标增加高光了，高光从右上角打下来，那么有叠加关系的元素就会产生一个向下的投影。并且反向暗部的表现，让整体的立体感稍强。

这一步在软件中主要使用蒙版功能，通过蒙版在背景上方创建一个图层，然后添加深色的透明度渐变，就可以表现出对暗部和投影的效果。

第四步：增加高光效果

接着，就是最后一步，将高光添加到画面中来，讲整个图标的质感进行拉升，

通过上面的演示，我们可以将整个拟物设计流程精简成：

1. 确定图形基本轮廓、外形比例、模块色彩
2. 丰富细节样式增加趣味性和适当的拟真感
3. 通过蒙版添加暗部来完善表现的明暗和层级关系
4. 添加高光元素作为图形的亮点，拉升层次感

然后，通过这样的步骤，再来完成后续的两个图形，拆解完的效果如下。

然后，再用这三个修改后图标套用进原来的页面，并做出对应的修改，再来看看前后对比：