2020-9-2 资深UI设计者
轻拟物本身也是拟物，所以它的核心基础和拟物设计师一致的，只是省略了更多复杂的细节。而对于整个拟物的体系来讲，最重要的东西实际上只有2个，形体、光影。
1. 形体表现
形体的表现，就是对图形外轮廓的样式的呈现。在过去我们写的图标分享中，有写过面性图标进阶的设计中，可以包含更多的细节、内部元素，而不是仅仅只有外轮廓。
轻拟物的形体设计就要处于进阶面性图标或者更难的水平之上，即你要把这个图形的内容有明确的示意并画出来，而不是用抽象的图形做填充而已。
比如大众点评的快速入口图标，虽然看起来很复杂，但是那是配色上的复杂，而不是形体轮廓上的具象化。
换句话说，拟物插画的图形基底，类似扁平插画风格图标，不能表现得太抽象，也不能增加过多的细节，需要一种恰到好处的平衡（玄学），这就非常考验设计师的判断和经验了。
并且，在描绘轮廓的时候，新手尽可能的采取正视图来进行绘制，而不要通过俯视图、侧视图、斜视图等方法来呈现图形的多个面，这样难度会大幅度上升，比如下面这种情况。
2. 光影表现
除了形体外，光影就是整个拟物的灵魂了。
当一个完整的图形完成填充色时，它是扁平图案，如果完成光影呈现的时候，它就是三维空间的立体图形，比如下面这个圆的案例：
在拟物的设计中，我们对光影的定义是至关重要的，所以首先就是针对该图形确定光源的方向，是上方、前方、左上还右上，这对后续的设计有一连串的影响。
如果对光影没有正确的解释，那么在制作细节的渐变角度、投影的使用上，就会产生错误的设计，造成光影视觉冲突和矛盾。
在创建了光源以后，物体受到光线的影响就会产生明暗面和投影，可以简单划分成4个部分，高光、亮部、暗部、投影。
这和我们学习的素描有一定的差异，美术中对光影的表现还会包含明暗交界、反光面，这对于轻拟物的来说负担太重，所以我们要去掉它们，接下来重点讲讲高光和暗部。
高光是物体作为受光物对光源的直接反映，比如人像摄影中人眼眸中的高光就是对闪光灯的镜像表现，再或者一拳超人中男主光头上长期存在的高光配饰（多数动画的光头角色都有）……
高光可以非常有效的增加画面的层次和对比性，让物体看上去更有冲击力和观赏性。
而暗部，则完全是为了正常表现物体结构和弧度增加的示意，因为不在受光面，所以颜色会变暗。在实际操作过程中，我们可以通过渐变的方式开控制明暗的表达，但尽量不要直接手动设置一个渐变色出来，而是为它叠加暗部或亮部的黑白透明度渐变。
了解这几个特性以后，下面，我们就通过一个实例来讲解一下轻拟物设计的过程吧。
作为轻拟物的演示，直接画个图标讲一遍怎么操作是没什么用的，我们要从实际场景出发，用它来解决一些真实的问题。比如看看下面的 KFC 官方 APP 首页：
总结它的问题，不难发现首页顶部业务功能太多了，顶部图标就包含30个（加滑动的），虽然每个模块图标单看都没有硬伤，但堆积到一起，就使得顶部缺乏足够的信息层级和对比性。
我们要做的，就是通过轻拟物的方式，调整快速入口最大的三个图标，凸显它们的重要性以及和其它图标的视觉差异性。先从第一个图标开始，讲解一下如何完成轻拟物化设计的升级。
第一步：确认轮廓造型
第一个操作，即确定图标本身的轮廓。根据原有图标的样式我做了一些改动，包括加粗车头，减少高度，增加车灯等。并对每一个模块进行纯色的填充，定义它们的色彩和做出区分。
形体的重要性在于要对图形本身有比较合理的呈现，不要让比例失调和图不达意。
第二步：完善图形细节
这一步，就要在原有基础上，进行下一步的深入。包括对一些细节交代得更清楚一点，增加一些有趣的小元素等等，完善它的具体样式。
第三步：增加基础的暗部表现
在这里，我们就要开始为图标增加高光了，高光从右上角打下来，那么有叠加关系的元素就会产生一个向下的投影。并且反向暗部的表现，让整体的立体感稍强。
这一步在软件中主要使用蒙版功能，通过蒙版在背景上方创建一个图层，然后添加深色的透明度渐变，就可以表现出对暗部和投影的效果。
第四步：增加高光效果
接着，就是最后一步，将高光添加到画面中来，将整个图标的质感进行拉升。
通过上面的演示，我们可以将整个拟物设计流程精简成：
然后，通过这样的步骤，再来完成后续的两个图形，拆解完的效果如下。
然后，再用这三个修改后图标套用进原来的页面，并做出对应的修改，再来看看前后对比：
通过这个对比，我们就可以看出在这个复杂的首页头部中，轻拟物风格可以从一众平面中被凸显出来，且不会显得太突兀和复杂。
而这就是轻拟物在项目设计中的实际作用，当画面元素已经开始超负荷，且容易导致同质化的审美疲劳和主次不清时，就是轻拟物登场的时候了。
最后的总结，学习轻拟物就是增加我们完成界面视觉输出的可能性，为视觉创意增加一些储备弹药，以应对越来越复杂的互联网产品和职业要求。
我们只在这篇罗列了制作的顺序和思路，并没有把软件的操作完全放出来，一方面是因为时间上来不及，另一方面是希望大家不会被软件的使用框住。只要概念清楚了，那么使用 PS、AI、Skecth、Figma 还是 Affinity 等软件都可以做出来。
文章来源：站酷 作者：超人的电话亭
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务