腾讯大赛2020，腾讯 大赛

随着插画进入设计领域，越来越多的公司和品牌开始拥抱这种更加人性化、充满活力的元素，这也极大地改善了用户体验。

（淘宝最爱插画帆布包）

与普通插画师不同，商业插画师更加专业。普通插画是基于个人审美，而商业插画则是为了服务企业和公众，吸引用户、诱导转化、拉动消费。

（书籍插图申请）

（手机壁纸应用）

此外，商业项目的插画设计也存在明显的差异。今天，舒怡君用一个精彩的案例来展现它的优雅。

手机QQ皮肤设计案例：《萌小兔》

《萌小兔》 手Q皮肤是作者在2014年腾讯手Q皮肤设计大赛中的获奖作品。这项工作展示了在移动应用程序皮肤设计中应用插图的有效性。

《萌小兔》 效果图

设计分析

在开始设计之前，您需要分析设计的背景和界面。深入的分析使您能够更精确地将说明性元素与实际应用相结合，设计出美观且实用的皮肤。

设计背景

由于您参加的是皮肤设计比赛，所以您需要分析比赛要求、目标用户群和设计内容。

腾讯手Q皮肤设计大赛要求：风格无限制，可以自由使用，不影响界面信息的阅读。手Q用户大部分都比较年轻。一旦了解了设计要求，下一步就是分析界面。

界面分析

本次大赛要求设计手Q的三个主要界面：抽屉页面、聊天页面、消息页面。如果你观察的话，你会发现需要插画设计的地方是界面中的图标、导航栏、操作栏、对话框、页面背景等。

手Q抽屉页面、聊天页面、消息页面

图标

您需要设计的图标包括消息、联系人、更新、设置、搜索、表情符号、声音等。

导航栏/操作栏

导航栏用于指示当前页面的内容，显示页面标题、操作按钮等信息。需要设计的内容包括背景和分隔线等。操作栏是提供用户操作功能的区域，显示操作按钮、信息输入框等信息。背景和分割线也包含在设计中。

需要设计的图标

需要设计的导航栏/操作栏

会话框

对话气泡是信息交流的媒介，承载着重要的对话信息。仅设计标注边框等内容，以免影响识别。

界面背景

界面背景是指各个界面的背景。抽屉页面背景比较空旷，面积较大，可用于复杂的主题设计。聊天页面的背景也比较空，但事实并非如此，因为发送和接收的消息都需要在这里读取。消息页面适合复杂的主题设计。消息列表页面不适合复杂的主题设计。

一旦分析并确定了需要设计的领域和设计的重点，您就可以开始概念化您的主题。

提示：在为您的皮肤设计界面时，您应该首先分析界面并选择在哪里进行创意设计协作。

主题概念与设计

在确定主题之前，首先要确定主题的风格，然后根据主题的风格设计主要画面和辅助元素。设计好主图像和支持元素后，您可以将它们直接应用到您的界面设计中。

确定主题和风格

由于这是一个对作品风格没有限制的比赛，所以我根据个人的品味创作了一个欢快可爱的设计。可爱的风格设计被广泛的人群所接受，接受度很高。确定了主题的风格后，想想如何用可爱的动物来表现它，选择兔子作为主要形象，并使用笔触、轮廓和色块来表达它。

设计灵感来自一只可爱的兔子

一旦决定用兔子形象来表达欢快可爱的主题，下一步就是设计兔子形象。首先，提取兔子的真实图像特征，创建草图设计，绘制线条图，最后添加颜色以完成整个图片。

可爱的兔子图像设计过程

提取兔子图像特征

从真兔子的图片来总结兔子的特征，就是耳朵长、嘴小、身子圆、四肢短、尾巴短。

提取兔子图像特征

草图

将兔子的五官简化、卡通化，在纸上画一些形状，夸大兔子的头和身体的比例，使头大，身子小，突出兔子可爱的特点。

草图

雕刻细节

01 画线稿。创建一个新文档。将设计好的图片应用到手Q软件中，保证图片在普通手机上清晰显示，大小为7501334像素，分辨率为72dpi。

考虑到应用于其他设备，您可以创建1600 像素x 1600 像素的新文档。将最终草图导入Photoshop 中，并使用“钢笔工具”勾勒出兔子的轮廓并添加细节。

画出头部。使用钢笔工具画一个圆头。

b. 在左右两侧画出耳朵，并镜像一侧画出的耳朵。

c.画小眼睛和嘴巴。

d.画出兔子的脸红。

e. 画出兔子耳朵的细节。

f. 画弓。

g. 绘制躯干和腿部，先在一侧绘制效果，然后镜像绘制的一侧。

h. 要绘制手，首先在一侧绘制效果，然后镜像绘制的一侧。

画一条线图

02 着色过程。画好线稿后，继续上色。在这里，我们选择红色作为可爱兔子的主色调，用亮白色填充身体部分，然后用红棕色勾勒出轮廓，最后用红色填充可爱兔子的内部颜色。把可爱的兔子变成这样。

染色

03 绘制多角度视图。画完可爱兔子的正面后，画侧面和背面。通过从多个角度设计图像，您可以在使用时保持一致的外观。

画一只可爱的兔子的多角度视图

设计道具

单独一张兔子的图片会有点单调，所以可以尝试添加与兔子相关的道具，如胡萝卜、水果、丝带、心形等。

道具是根据兔子的形象设计的，图形是从真实照片中提取出来的，经过素描、勾画、最后上色。

画一根胡萝卜

在搭配道具颜色时，还要考虑可爱的风格特点。在这里，绿色、蓝色和红色被用作道具的装饰颜色。

道具配色

至此，我们就完成了主形象和辅助道具的设计。接下来，您需要结合主题图像和界面。

提示：确定设计风格以及选择和设计主题图像是皮肤设计的重要步骤。

结合图像和界面

01 导航和操作栏包含大量信息，因此在设计界面时应尽量保持简洁。您可以在不同位置放置多个不同大小的圆圈，形成丰富多变的边缘效果，并在背景中添加心形图案作为装饰图案，丰富您的导航栏效果。

设计区

导航栏和操作栏设计

02 导航栏和操作栏设计完成后，需要将它们放置到界面上，检查界面和完成的图标是否匹配，以及应用后的效果。导航栏和操作栏为粉色，呈圆形，浅粉色的心形也符合可爱小兔子的特点。

导航栏和操作栏的应用效果

设计一个讲话泡泡

对话气泡是信息交流的媒介，承载着重要的对话信息。只需设计对话气泡的边框，使其不影响对话内容的可识别性即可。

01 画一个圆角矩形作为气泡的底部并添加详细的装饰。将画好的兔子头和胡萝卜作为装饰元素添加到圆角矩形中，添加文字，看看应用后的效果。

气泡设计步骤

02 将两个对话框的颜色更改为粉色和蓝色。

颜色匹配

气泡分析

03 气泡设计完成后，需要将其放置在界面上，检查应用后的效果，并检查界面是否与完成的图标、导航栏和操作栏相符。整个界面的元素以粉色和蓝色呈现，与圆形图形相结合，营造出更加统一的外观。

泡沫应用效果

设计界面背景

抽屉页面背景比较空，所以作为主页面来展示可爱的小兔子。

01 设计了一只爱吃胡萝卜的兔子，上蹿下跳，撒胡萝卜，活跃气氛。

a. 设计动作时，可以自己摆姿势，也可以找其他参考图片。

b. 绘制草图并绘制您可以想象的任何元素。

c. 画一只可爱的兔子的线稿。

d.给可爱的兔子上色。

我们来画一只可爱兔子的动作

02 在该页面中，您可以通过两种方式放置可爱兔子的主图：将其显示在页面侧边，或者将其显示在页面底部。底部面积比较大，侧面面积有限，但最终我们选择放在侧面。

抽屉页设计效果

03 聊天页面的背景有很大的设计空间，甚至可以设计一个可爱的兔子形象，但更简单的设计适合聊天页面，考虑到消息的阅读和发送和接收。

因此，通过降低可爱兔子的不透明度，我们可以在不干扰信息读取的情况下保证图像的完整性。设计过程中，不透明度从10%调整到60%，最终根据功能和观感选择了30%不透明度的设计。

尝试更改聊天页面的背景透明度

04 消息页面是显示消息列表的页面，请不要设计得太复杂。因此，只有文本、背景颜色和分隔符颜色会改变。

留言页面设计

整体组合与调整

设计完每个部分后，将它们组合在一起并调整细节。避免在导航栏和操作栏中使用心形元素中的文本和图标，并适当调整操作栏中的消息、联系人和动态图标的大小。至此，主界面设计完成。

完成图像

提示：您可以通过将需要设计的内容分成多个部分并一次设计一个来降低设计过程的难度。虽然这款手机壳是个性化的皮肤设计，但也需要一定的辨识度和易用性。

设计相关内容

主界面设计完成后，将添加主题封面和横幅，以便用户在下载前可以直接看到皮肤设计的效果。

主题封面信息包括皮肤名称和皮肤内容。最好使用与您的肤色风格非常相似的图形表示。

主题封面展示

显示主题页面