吉祥物怎么设计?来看腾讯设计师的思考经验总结!

2016/10/30 14244

mascot-design-method-summary-1

编者按:为一款软件做形象设计的流程是怎样的?今天腾讯设计师@Veles 把参加形象设计比赛后写的设计心得分享出来,包括前期思考,形象选定,后期展示等,全是干货,建议阅读。

故事开始前言:

科普:KM 是公司内部沟通软件。

KM里面内容丰富,各种干货交流等等,简直~简直~是个大学内部论坛的感觉~(好吧,它确实是个内部论坛,里面潜伏各种大神)以后每逢有时间空隙,必抓起手机,撸起KM,让我看的不要~不要的~

好吧,话不多说,偶然一日看到了一篇KM征集吉祥物的广告文章,里面说明 征集吉祥物,再看看奖品,Word妈~有 iPad Pro!!!!

好吧,其实我只是旨在参与,其实奖品什么的都是浮云,提高自己能力嘛,增加自己经验这个才是主要的对吧?不说太多废话了,形象大概从这样的思路开始想象的~

一,初步提取一些关键文字

uisdc-tx-201610312

· 8个年头( 陪伴时间长)

· 沉淀50万篇文章 (沉淀海量知识)

· 承载数以万计的活动与投票,工作生活必不可少(承载许多沟通,联系,表达的使命)

再从基本品牌吉祥物中提出一些通用点包括:

· 可爱(让人容易接受喜爱)

· 方便延展(一旦做出吉祥物,后续有许多地方都需要用到延展,所以设计造型要考虑方便延展性)

· 容易记忆(一眼就能有印象)

同时我也觉得KM是一个让我这样的新人可以快速了解公司,融入这个大家庭一个重要的窗口,所以这里可以加多几个关键词(嫩芽,生长,生机等)

二,细化关键字,让它转化为图形语言

· 沉淀海量知识———(海洋?鲸鱼?机器人?)
· 承载许多沟通,联系,表达———(SMS?气泡对话框?)
· 生长,生机——-(新生嫩芽?植物?成长?)
· 容易记忆——–(动物?可爱?大众认知?)

综合以上归纳有了以下一张关键字说明:

uisdc-tx-2016103113

然后收集相关参考图片,让设计构思更加清晰:

uisdc-tx-2016103114

最终提炼设计元素:

uisdc-tx-2016103115

1. 犹如鲸鱼般的海量知识体(海量·知识·遨游)

2. 气泡对话框式的表达方式(沟通·表达·联系)

3. 让新人生根发芽的使命感(嫩芽·生长·生机)

三,那么开始画草稿吧!

uisdc-tx-2016103116

一开始还没最终确定用鲸鱼为原型之前,也出过几个稿,想过一些其他想法,例如延续企鹅?还是说用机器人?龙感觉也很聪明可爱~不过最后 个人还是感觉 鲸鱼的代表性比较强~

鲸鱼神秘又神奇的一种生物~原鲸科动物均出现在5000万年前,历史悠久遨游在海洋的哺乳类动物,巨大的身躯感觉像蕴涵了大量的知识体系~所以后面就出了 鲸鱼的设计稿,反正构思也不是一瞬间想到~也是经历了构思推翻 构思推翻的一系列过程~最后选择自己喜欢且觉得最符合的一种来表达:

uisdc-tx-2016103117

鲸鱼身上一般是喷水的,假如直接喷水会不会显得太单调,不够特别~继续想!!有水(又要表达出生机,成长这一理念)

有水,有生命(生命~~?植物)感觉头顶加个植物 也是毫无违和感的!!那就加一个茁壮成长的小植物吧!(⊙_⊙;)

最后一个阳光灿烂的小鲸鱼头顶发芽的小植物诞生啦~(发芽的植物以后会不会开花?是不是会跳出鲸鱼的头顶变成一个可爱的植物人?)

小萌芽 到底是怎么在鲸鱼头顶上生长的?(这里面感觉信息量好大~~哈哈哈 可以继续深挖)

四,草稿确定以后,大方向已经尘埃落定,后面就是各种优化配色啦!

配色方面,一开始是沿用KM的蓝色来做,不过用在形象身上的时候,颜色显得有点深沉,所以就把蓝色的饱和度 稍微提亮了。

让蓝色更加海蓝一些再搭配了一些翠绿色~所以最终形象配色如下图:

uisdc-tx-2016103118

形象主要圆溜溜鼓鼓的~可爱想捏的感觉,侧面或者45°角看 大致像一个气泡对话框,加个小尾巴,遨游知识的海洋~

当完成这一步,我个人觉得 骨架已经完成了~后面就是增加血肉 情感的一些东西啦~例如丰富下表情,使用场景等等啦。

uisdc-tx-201610311

先大概构思草稿阶段~

uisdc-tx-2016103119

为了方便后续延展设计跟使用,设计主要是用矢量方式来制作~

主要工具包括:

1. SAI (起草稿)  2. PS(钢笔图形工具完善设计稿)

工具因人而异啦~自己喜欢跟习惯哪个就用哪个,没有太多局限喔!~

下面是一些设计的延展,包括周边产品设计,APP UI界面形象使用场景~

uisdc-tx-201610315 uisdc-tx-201610314

uisdc-tx-2016103112 uisdc-tx-201610316

uisdc-tx-201610319 uisdc-tx-2016103110 uisdc-tx-201610317 uisdc-tx-201610318 uisdc-tx-2016103111 uisdc-tx-2016103120

五,结语

每次形象设计都是一次新的挑战,除了要表达出表面的含义,也要符合实质内在的含义。

设计的时候也从里里外外不断的挖掘信息,思考如何才能最切实的表达。对于每一个形象设计,都应反复思考和打磨,只为给用户呈现最佳的体验效果。考虑让形象如何融入产品,更好的丰富产品等等~为KM树立一个鲜明的品牌形象。

很高兴参与这么有意思的活动,希望以后参与更多KM有趣的活动~

哇哈哈···谢谢大家的观看与支持!!~Thank you!mua~

作品已经商用,最终版权归tencent所有~

「人气过万的优秀实战案例教程」

大众点评:《大众点评智慧餐厅LOGO设计全过程总结》

红包预热HTML 5:《聊聊刷一刷红包预热HTML 5背后的设计过程》

火影游戏HTML 5:《揭秘腾讯火影游戏HTML 5背后的设计故事》

2016uisdc-classroom-new

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量180万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/mascot-design-method-summary

界面设计 HTML5 素材 交互设计师 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 扁平化设计 设计规范 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里