品形象常是由不视觉元素构成，比如logo、调色板、特定体。除了这些，插图是另强大视觉传手段，于在UI界上也越来越需要。插画系统是个立公司视觉品有效，本文作者分享了如何设计并落地套强大插画系统过程，供大家起参考学习。
插画在现在视觉设计越来越要，是随便画是成功插画吗？显然不是，基于各以引流为最终目插画，从生成到落地都有套有规可循系统法，今天我将在这里为大家来揭秘，首先我想谈是关于FACE TEAM团队诞生。
故事是这样开始，我心有个想法，那是设计出能不能像故事样有个主公，在主公贯穿下讲述着房业务线故事。到有会讨论上，有个小伙伴提出了样类似想法，她说如我们有个固定房东或者租客形象，可以大大便了设计，而很统。这让我觉，这个似乎是大有可为，用现在管理（OKR）去说这件事，那是我将这个想法列为了自己个O。
在这之后我翻阅了大量有资，发现了牌插画这个概念——它是建立公司视觉牌的一种有效方式。一个好的牌形象仅表达公司的信息还与户建立联系，它最大优势就是将叙事元素引入视觉容中，甚至可全脱离了现实，户看到牌构建的想世界，我觉得这对务线来说是很有意义值得做的一个事情。
随着研究的不断深入，发现经过整的插画，还可形成高效的生产系统；它的理并不复杂，就好像每个计积累的素材库一，相同的画面可以实现素的共用，最大程度的提升生产效率，避免了计资源的浪费；另外还有一个非常深刻的体验就是，遇紧急需求，有了素材库的存在，可以更加从容的面对，不仅不用加班加点赶制，而且更不会因为间的压缩降低计品质。
了这么多好处，下一就将这法去落了，我决从探究了两方面手，去建立整插画体系。
一个就是，去构建，形成一个品牌插画，通俗点就是先去创造业务固定的人物形象，最终达到品牌宣传的目的。
第个是去合，实现系统高效性，意思是将各组件分类进拆分，最终实现组件可以复利用个过程；与此时，各业务线想法也不谋而合，于是faceteam这样诞生了。接下来我会从构和合两个去介绍我们是如何落地插画系统。
首先是寻找灵感，一步其业名词以称之为添加情绪版，我们收集大量现有的成熟插画案例，参考他们做品牌的经验，同时也思考着我们自己的道路，其中有airbnb，Uber和shopify等，airbnb比偏温情，它的重心在强每个人的不同，因为种族不同的问题，所以希望插画能是代表各类肤的人种；而两个比偏务，在设计手法上更加的干练扁平。
其实创情绪版后，我们在初期定制了设计计划，我们将个插画系统分为三期去制作，它分是：
- 确定形象：房东、租客、经纪人、车等形象，并且人物三视图；
- 形象应用：我们希望在UI使用能做减法，搭配常用组件和背景形成小场景，体现品感；运使用上做加法，可以保留形象特征，替换服饰，拓展更多画风，增强品质感；
- 平面变立体：从效，3D建模应插画组件，由2D转3D的效果实现。
有了初步研究与计划，我决定问大家个问题「那是你有freestyle吗？」其实是抛大家个命题：自己心58物形象应该是什么样。原很简单，是开始不想限制大家思维，希望更多新奇想法碰撞出更有意思设计。
于是便有了faceteam成立以来第海选大赛，大家各抒己见，个都描绘出了自己心58物样子，这里归纳下其实可以分为三个类，有偏写实风格物样，也有这圆润可盘样，有最后比较抽象夸张类样。
其实除了刚才三类，有类可以称为帮帮形象延展类，是这个想法在第轮我们将它否定了，为帮帮形象太过于卡画，将物形象也卡画设计会不够稳，不太符合企业形象。所以，如何成共识寻找到个适合58物形象成为我们下急需解决问题。
最终我们决定从两个方面考虑：
- 从58品属性出发，它是个服务于大众生活信息平台，那我们设计定要迎合大众口味。
- 作为插画系统，它要具备方绘制容易迭代的特性。
于是我们结出了形象制作四个关键词：
1. 平均风格
个性过于强烈风格，会形成⼀部分用户极喜欢，而另⼀部分极不喜欢争议形设计，所以我们要保证大多数接受，物形象设计需要保持平均风格，避免过度抽象和夸张。
2. 圆润亲和
我们想用户体现是安全舒适感觉，所以要避免过于冲击性画和奇特物形，圆润形将会用户带来更多亲和感。
3. 可拓展
我们设计插画需要形成个统系统，而不是单独立场景制作。此，它能满足多数设计师好上手，易模仿特质（有规律可循）。
4. 轻量
这里主要是希望表现技法能采用互联主流扁平化画法，线与结合，画精简归纳性强。
根据以上四原则，我们前过稿时那体态圆润，手脚略微收缩物形象更符合我们预期，我们将它划定为可发展象。有了可发展象，是58繁多业务线我们又该如何去制作呢？
我们初步的想法有两种：
第一个是各业线独立制作，这的好在于体量较，各业线方便管理，但是就会出现多风格；
第二就统一制作，形一家庭，这样的好处于品牌的统一性，俗话的一家人整整齐齐的，但它相比于独立制作，会挑战性，于家过一番商讨，决选择了家族化语言的后者。
整合成一个大家庭，人物角何设定其是面临的一个难题，里以举个例子，比一个男年，他在二手车是买家，但是在房产又能是卖家，买家和卖家一定要展现出来不一样的感，所以样的我们一个人就要设定很的角，58么业务，工量太庞大也不现，所以角设定能行不通。是我们想能不能找出一根主将他们串联在一，最我们现找到他们之间的共同点一切问题就迎刃而。
接下来一图帮我们大忙，是互联网人群的年龄分图，每个人在生活中扮演个不同的角，但是他在自己的年龄所表现出的种状态和精神面貌是大数人为接近的，所以年龄，正是我们要找的所有人物的共同点。
大家都很认这个观，我们决定做5个年龄段物骨骼，涵盖个58用户群，这样话哪个业务线需要哪个年龄段物都可以随取随用，常便，根据业务属性不，他们替换相应服饰可体现出他们物所扮演色。
到了共同点，接来我们就可制作人物骨骼了，但是在制作之前，我们还得确定的一件事情就是，才我们列为可重点发展对象的那套人物，放在各个务线是否适，我们得再验证一波。
于是我们将这一类身形圆润，手脚略微偏小的橄榄球式人物形象应在各务线中，发现是可行的，但是现的问题是每个人对拿捏准，有的形象夸张，有的较收敛，有的甚至现了较油腻的状态，但是我们认为这是可通过骨骼系统来规避的。
我们决定这类形象人物为参考进行骨骼建立，我们采的方法是先确定各年龄的人物形象样式，继而在人物形象样式的框架上反推的人物骨骼，我们称它为由具象推演抽象的制作方法。
我们开始在每个年龄择了一个代表，然后制作了这个年龄的一个人物形象的样式，从人的相貌，体态、身等方面入手，如说随着人年纪增大会发福，老一辈人身偏矮这些客观规律表现，目的就是为了制作每个年龄最具代表性的人物。实初稿反映了很多的制作问题，如女性胯较大腰又较细，如果同样的制作方法会显得胳膊过于粗壮，另外40岁男性我们感觉应该更矮点等问题。
于是在初稿的基础上我们进行修改，并且将人物延伸至了每个年龄分别会有男女两个角色，但是这一版并达到我们最终想要的效果，首先带眼镜的人群有点多，我们觉得应该适当减视人群的数量，画面更符合国情。
另外人物在美观性还需要加，人物表情过于严肃、大妈有点返祖等一系列问题。于是更新了一版，这一版本就是现在一直沿用的基础，在内部为了好称呼制作出来的人物还给每个人起了对应的名字，也许未来会给都赋予性格，成为一个更鲜活的人物形象。
有了准的人物形象作依托，在形象身上提取动作线和关节骨骼，实现人物骨骼化。这可初稿将上半身胳膊骨骼定义为弧形，虽然现在的插画形象有多这种艺术化的理方式，但是再三思量定义：圆润是人物形象的外在表现，但是骨骼也应该是直的，这既符现实，也更容易让人理解。
于是将骨骼进行修改，定义了人物的头身比，并且确定了各个关节位置等一系列关键点，制作完成所有人物的骨骼图。
最后对人物点进行了总结，是一种圆脸圆肩脚的征，人物整体呈锥形体，躯干胳膊腿部都是由多锥形组成，并且用骨骼图的形式定义了腰、肩膀、胯关节这些关键的人体构成要素，有了这些便能帮助描绘出更准的人物形象。
下来就是颜色的定义，因为是多业线共用的情况，的想法是可以根据各业线需求来更换颜色，所以这的颜色仅供参考不做制要求，算是提供一个基础配色。58的logo是红蓝橙绿四色，所以也将基础配色定义为四种颜色，只是适当降低颜色饱和度以达插画组最为舒适的状，然后根据基色推演出来较深的色系作为描边阴等理，较浅的色系做背景，氛围等理。
于是的线稿就这有了最基础的颜色，搭配上同类色的背景，这就是想营造出来的多彩、亲和的生活服类的觉。有这些产出，决定将它放入业线中进一步去推进，然后发现这当中出现了多急需去解决的问题：
比如，我们应用过程中发，人绘制还存不可控因素，主一些偏手绘的勾线与一些复杂的阴影，这样可能导致不同设师绘制出的东差异性较，所以我们决基础制作中让这些加规矩。
修改之后的形象我们严格规了描粗度1素，人五官较之也加精简，人减少了复杂明暗关系，画面整体感觉加净清爽。至此人形象色稿也就基本确认，按照划我们给每形象制了一标准套装，套装包含一骨骼图，一套基础服饰的三视图，一款春秋服饰一人动作。所以我们第一部分确人形象的划已基本达。
关去构建，形成一个品牌插画。在人物形象确定的时我是迈出一步，但是也面临着很挑战。比：大众产品和互联网属，使得插画必须兼容各类人群喜欢，加上主流的扁平画法，在表现上难免面临同质化的问题。为增加品牌的识别特，未来我们将在业务的使用颜和辅助图形上来增加插画的区分，以达到更的品牌传递效应。
构建基础的品牌插画人物，接下来我们就是要去整合插画，现高效的插画系统，最终达到让组件重复用的目的。我们整合插画系统的方法是将所有组件分成三大类别，分别是为基底的背组件，代表各业务属的通用组件，和最重要的人物组件。
里我们以举个例子，上图选中的人物组件、通用组件和背组件。将它们进行组装，便以生成一个我们想要的插画场，我们将个场拆分和其他组件结合，又能形成更我们想要的场插画，种增长以说是几何式的裂变，能够最高效的现组件的重复用，提升设计效率。
然个好用插画系统定要拥有丰富组件资，这样用起来才更加心应手，所以除了自以，我们有内容共制。
它具体做法是这样，第步是收，定期收各业务线在插画体系落地案例；第步是筛选，筛选符合品插画绘制规则，并具备示范性和代表性案例；第三步是收录，过筛选新内容，我们将会收录插画系统，形成新插画组件；第四步是步，我们会定期更新步到wiki和云盘供大家使用，让个插画库更加健康运转。
然，规范也有可能遇到不好落地情况，所以我们也会不断去改规范以到最适用状态，这里我们有个规则共法。
首先是收集，但这次我们收集的是各务线在插画使中遇到的难点，然后我们首先评估问题是否成立，然后探究导致落地困难的规范条款哪里合，接来就是修订，针对合的规则条款进行修订，最后还是定期更同步到wiki和盘中供大使。
于整合实现系统效。未来我们会通过自建的方式产更多与务相的场景，人物作，包括发可进行替换，并会将这些组件尝试嵌入sketch里进行自由组合。另外我们寄希望于容共建，目前我们正联合水晶球共同打UXD质素材库，大可水晶球faceteam题专栏载体验。
另外现在我们有尝试FaceTeam人物在3D中的使场景，未来我们会制作更多更好的素材供大使，敬请期待。
欢迎关注「58UXD」的公众号：
浙公网安备33011002017549号