腾讯在哪抽皮肤（这套QQ皮肤引爆了我的心）

随着插画进入设计板块里，越来越多的企业和品牌开始采用这种更亲民活泼的元素，也使得用户的体验感大大增加。

(淘宝心选插画帆布包)

而区别于一般的插画师，商业插画师则是更为专业的存在，如果说一般的插画是以个人审美为主，那么商业插画则是为服务商家和大众而存在的，以达到吸引用户、引导转化和促进消费的目的。

(书籍配图的应用)

（手机壁纸的应用）

此外，在商业项目的插画设计上，也有着明显的区别，今天，数艺君就以一个精彩的案例，带大家领略一下它的风采。

手机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，方便用户在下载前能直接查看皮肤设计的效果。

主题封面的信息包括皮肤名字和皮肤的内容，最好使用与皮肤色调风格接近的图形表示。

主题的封面展示

主题的页面展示

,