随着插画进入设计板块里，越来越多的企业和品牌开始采用这种更亲民活泼的元素，也使得用户的体验感大大增加。
(淘宝心选插画帆布包)
而区别于一般的插画师，商业插画师则是更为专业的存在，如果说一般的插画是以个人审美为主，那么商业插画则是为服务商家和大众而存在的，以达到吸引用户、引导转化和促进消费的目的。
(书籍配图的应用)
（手机壁纸的应用）
此外，在商业项目的插画设计上，也有着明显的区别，今天，数艺君就以一个精彩的案例，带大家领略一下它的风采。
手机QQ皮肤设计案例：《萌小兔》
《萌小兔》手机QQ皮肤是笔者2014年在腾讯手机QQ皮肤设计比赛中的获奖作品，从这个作品中我们可以看到插画在手机App皮肤设计中的应用效果。
《萌小兔》效果图
设计分析
在开始设计之前，需要对设计背景和界面进行分析。深入的分析有助于将插画元素与实际应用更准确地结合起来，从而设计出好看又实用的皮肤。
设计背景
由于是参加皮肤设计的比赛，因此需要从比赛要求、目标用户群和设计内容这几大方面展开分析。
腾讯手机QQ皮肤设计大赛的要求：风格不限，在不影响界面信息阅读的情况下自由发挥。手机QQ的多数用户相对年轻化。在了解了设计要求后，接下来要对界面进行分析。
界面分析
这个比赛需要设计的是手机QQ最主要的3个界面，即抽屉页、聊天页和消息页。通过观察可知，需要进行插画设计的地方包括界面内的图标、导航栏、操作栏、对话气泡和页面背景。
手机QQ的抽屉页、聊天页和消息页
图标
需要设计的图标有消息、联系人、动态、设置、搜索、表情和语音等。
导航栏/操作栏
导航栏用于指示当前页面的内容，承载了页面的标题和操作按钮等信息，需要设计的内容包括背景和分割线等。操作栏则是用户操作功能的区域，承载了操作按钮和信息输入框等信息，需要设计的内容同样包括背景和分割线等。
需要设计的图标
需要设计的导航栏/操作栏
对话气泡
对话气泡是信息交流的载体，承载了重要的对话信息。为了不影响其识别性，只需设计对话气泡的边框等内容。
界面背景
界面背景是指各个界面的背景。抽屉页的背景比较空，有大面积的区域，可以进行复杂化的主题设计；聊天页的背景也比较空，但需要通过这里阅读收发的信息，不适合做复杂化的主题设计；消息页是消息列表页，也不适合进行复杂化的主题设计。
分析和确定好需要设计的区域和设计的重点后，接下来就可以开始构思主题了。
提示：设计皮肤的界面时，需要先对界面进行分析，选择合做创意设计的地方。
主题构思与设计
在确定主题前，要先确定主题的风格，然后根据主题的风格设计主形象和辅助元素。完成主形象与辅助元素的设计后，就可以将其直接应用到界面的设计中。
确定主题和风格
由于这次比赛对作品风格没有限制，因此笔者结合自身的喜好将这次设计的风格设定为活泼可爱风。可爱风格的设计受众比较广泛，可接受度高。确定主题的风格后，考虑用可爱的动物来表现本次主题的形象，因此选择将兔子作为主形象，并采用描边、勾线和上色块的方式进行表现。
设计萌小兔的形象
确定使用兔子的形象来表达活泼可爱风格的主题后，接下来需要设计兔子的形象。先提取兔子的真实形象特征，然后进行草图设计，再绘制线稿，最后进行上色，直到完成整个画面。
萌小兔形象设计的过程
提取兔子的形象特征
从真实的兔子照片中可以总结出兔子的特点：长长的耳朵、小小的嘴巴、圆圆的身体、短短的手脚和尾巴。
提取兔子的形象特征
绘制草图
对兔子的特征进行简化和卡通化处理，在纸上画一些造型，将兔子的头身比例进行夸张表现，让它的头更大，身体更小，以凸显兔子可爱的特征。
绘制草图
刻画细节
01 绘制线稿。新建文档，因为设计的形象是应用到手机QQ软件中的，只要确保该形象在主流手机上能清晰显示即可，因此将尺寸设置为750像素×1334像素，将分辨率设置为72dpi。
考虑到在其他设备上应用的可能性，可以再新建一个1600像素×1600像素的文档。把确定的草图导入Photoshop，然后使用钢笔工具 刻画兔子的造型，之后再进行细节刻画。
a. 绘制头部，使用钢笔工具 画出圆形的头部。
b. 绘制耳朵，耳朵分为左侧的和右侧的，先画好一侧的效果，再将画好的这一侧耳朵进行镜像处理即可。
c. 画出小小的眼睛和嘴巴。
d. 画出兔子的腮红。
e. 画出兔子耳朵的细节。
f. 画出蝴蝶结。
g. 画出身体和脚，先画好一边的效果，再将画好的这一边进行镜像处理即可。
h. 画出手，先画好一边的效果，再将画好的这一边进行镜像处理即可。
绘制线稿
02 上色处理。将线稿绘制好后，继续为画面上色。这里选择将红色作为萌小兔的主色，使用浅白色填充身体部分，然后使用红褐色描边，再使用红色填充耳朵内的颜色，最后为萌小兔画上腮红，让萌小兔这一形象更加生动。
上色处理
03 绘制多角度视图。将萌小兔的正面画好之后，接着把萌小兔的侧面和背面也画出来。对形象进行多角度的设计，这样有助于我们在使用这一形象时，让形象保持统一。
画出萌小兔的多角度视图
设计道具
只有兔子的形象似乎有些单调，所以再添加一些与兔子相关的道具，如胡萝卜、水果、缎带和心形等。
道具的设计要与兔子的形象相匹配，从真实照片提取图形，然后绘制草图、画出线稿，最后进行上色。
绘制胡萝卜
给道具配色时，同样要考虑可爱的风格特点，这里使用了绿色、蓝色和红色作为道具的点缀色。
道具配色
至此，主形象和辅助道具就设计好了。下面需要将主题形象与界面进行结合。
提示：确定设计风格、选择与设计主题形象是皮肤设计的关键步骤。
形象与界面的结合
将主题形象萌小兔放到手机QQ界面中进行设计。萌小兔的颜色为粉色，手机QQ界面的颜色为蓝色，因此要先将界面的颜色统一设置为粉色，然后将蓝色作为点缀色。
手机界面大色块配色
对界面中需要设计的内容添加颜色，然后将这些内容组合在一起，再整体进行调整。
设计图标
萌小兔的形象比较可爱，所以图标的设计风格也要与萌小兔的风格相匹配。将信息联系人和动态的图标分为一组，将表情和语音的图标分为一组，再将返回和更多的图标分为一组。
图标分组
01 绘制信息图标。将信封图形作为信息的图标，收到消息就像收到了书信。
a. 搜集真实的信封图片，观察其结构。
b. 画出信封的草图。
c. 画一个矩形。
d. 添加白色的封口效果和红色的结构线。
e. 添加心形。
f. 添加装饰性的短线。
g. 将信封图形进行旋转。
a
02 绘制联系人图标。直接用萌小兔的头像表示联系人的图标即可。
联系人图标设计
03 绘制动态图标。将动态理解为来自远方朋友们的信息，从远处飘来的漂流瓶便是传递这些信息的工具，所以这里选择了漂流瓶来表示动态的图标。
a. 搜集真实的漂流瓶图片，分析其结构，包括瓶身、瓶塞和瓶里的液体。
b. 画出漂流瓶的草图，矩形的瓶身会使图标的视觉大小不一致，因此改为圆形的瓶身。瓶内有一卷纸，让整个图形看起来有一些复杂，于是去掉这一卷纸，改为心形。
c. 先画出圆形的瓶身、瓶口和瓶塞，然后画出蓝色的水，再添加一个心形。
d. 画出瓶口的飘带和水里的气泡。
e. 在瓶身、瓶塞和水中加上装饰性的短线条，丰富图标效果。
f. 将漂流瓶图标旋转至倾斜的角度。
动态图标设计
04 绘制语音图标。这里将话筒的图形作为语音的图标。
a. 搜集真实的话筒图片，分析其结构，包括拾音器、网头、手持管体、音频输出端口和话筒线等。
b. 画出话筒的草图，真实的话筒比较细长，但为了使它更符合设定的卡通风格，将草图画得偏圆润、可爱一些。
c. 画出圆形的拾音器和三角形的手持管体。
d. 在圆形的拾音器上添加一个横条作为装饰元素。
e. 在手持管体尾部增加两个横条。
f. 在圆形的拾音器上面画出网头。
g. 给拾音器、网头、手持管体加上装饰的短线条，以进一步丰富图标的效果。
语音图标设计
05 所有图标设计完成后，将它们放到界面中查看应用后的效果，从图标的图形特征及配色两个方面看是否与界面协调。
如果界面使用了粉色和蓝色，图标的配色也应该以粉色和蓝色为主。此时，虽然界面的图形还没有进一步设计，但是图标的整体特征还是比较符合可爱的卡通风格定位的。
图标设计效果
图标的应用效果
设计导航栏和操作栏
导航栏和操作栏需要承载的信息比较多，包括状态栏信息、头像、Tab栏、搜索框、返回、联系人信息和输入框等。
导航栏和操作栏
01 由于导航栏和操作栏承载的信息比较多，因此在设计界面的时候要尽量简洁一些。将多个不同大小的圆形放在不同的位置，形成丰富和有变化的边缘效果，然后添加心形的图案作为背景中的装饰纹样，这样可以丰富导航栏的效果。
设计区域
导航栏和操作栏的设计
02 导航栏和操作栏设计完成后，需要把它们放到界面中查看应用后的效果，看是否与界面及已完成的图标相匹配。导航栏和操作栏的颜色都是粉色的，形状都是圆形的，且浅粉色的心形也符合萌小兔可爱的特征。
导航栏和操作栏的应用效果
设计对话气泡
对话气泡是信息交流的载体，承载了重要的对话信息。为了不影响对话内容的识别性，只需要设计对话气泡的边框即可。
01 画出圆角矩形，将其作为气泡的底板，然后添加细节装饰效果。把画好的兔子头部和胡萝卜作为点缀元素加在圆角矩形上，再添加文字查看应用后的效果。
气泡设计步骤
02 分别用粉色和蓝色作为两个对话气泡的颜色。
颜色搭配
气泡分析
03 气泡设计完成后，需要把它们放到界面中查看应用后的效果，看是否与界面及已完成的图标、导航栏和操作栏相匹配。整个界面的元素都使用了粉色和蓝色来表现，结合圆润的图形，看起来是比较协调的。
气泡应用效果
设计界面背景
抽屉页的背景比较空，所以将其作为展示萌小兔的主要页面。
01 这里设计了一个萌小兔跳起来撒胡萝卜的样子，来表现兔子对胡萝卜的喜爱，这样更能活跃气氛。
a. 设计动作时，可以自己摆出这个动作作为参考，也可以找一些其他的参考图。
b. 绘制草图，画出能构思的元素。
c. 绘制萌小兔的线稿。
d. 为萌小兔上色。
画出萌小兔的动作
02 萌小兔的主要形象在这个页面中有两种摆放方式：一是展示在页面的侧面，二是展示在页面的底部。底部的面积比较大，放在底部显得比较中规中矩；侧面的面积虽然有限，但能表现出萌小兔活泼和有趣的形象，最后选择了侧面的摆放方式。
抽屉页的设计效果
03 聊天页的背景有很大的设计空间，可以设计一个完整的萌小兔形象，但考虑到聊天页需要阅读和收发信息，设计得简洁一些更为合适。
因此，降低萌小兔的不透明度，既能保证形象的完整性，又不干扰信息的阅读。在设计的过程中，将不透明度从10%调整到了60%，最终结合功能性与识别性，选择了30%的不透明度设计。
聊天页背景不同透明度尝试
04 消息页是展示消息列表的页面，不宜设计得太复杂。因此只改变了文字、 背景色和分割线的颜色。
消息页设计
整体的组合与调整
将各部分内容设计好之后，把它们结合到一起，再进行细节的调整。让导航栏和操作栏上的心形元素避开文字和图标，将操作栏的消息、联系人和动态图标调整至合适的大小。至此，主要界面的设计就完成了。
完成图
提示：将需要设计的内容进行拆分，然后逐一设计，这样可以降低设计的难度。虽然本案例是个性化的皮肤设计，但也要具备一定的识别性和可操作性。
相关内容的设计
主要的界面设计完成后，补充主题封面和Banner，方便用户在下载前能直接查看皮肤设计的效果。
主题封面的信息包括皮肤名字和皮肤的内容，最好使用与皮肤色调风格接近的图形表示。
主题的封面展示
主题的页面展示
