PS:大家好,最近咱们UX小学,获得了 Ant Design 的文章转载授权,所以后面关于 Ant design 系列的精彩文章设计方法,我会持续在公众号分享给大家,感谢大家一直以来的关注与支持~~





前段时间蚂蚁金服体验设计团队,推出了一款插画生产工具-Hitu。机缘巧合体验了一下,发现使用起来远比想象来的轻松,只需要简单安装一个插件,就能随意拼凑出高质量的插图效果。( 后台回复 “蚂蚁插件” , 获取插件下载地址+官方内测群 )


毫不客气的说,个插件,能远超出我的想象,能极大提高设计效率。对那些插画不太擅长、非美术科班的同学,简直是天大的福利。试想一下,之前画插画不但要绞尽脑汁,还得花上大量时间,效果还不一定满意。而现在,有了蚂蚁金服的这个插件,简单动动手指,拼凑一下,就能凑出想要的效果


为了让大家更直白的感受这个插件效果,我用插件生产了几个版式,凭感觉生成了几副插画,不到两分钟时间,做了三个样式。





不知道大家看到后,是什么样的想法,个人认为已经很好了,能满足日常的需要,而且里面生成的所有插图都能免费商用,不但非常好用,视觉也非常Nice


那么这个Hitu,到底能做什么?如何使用效率才会最高,效果最好?Ant Design 官方设计师 @线丝,为我们带来了详细的介绍:


HiTu 目前以图形化设计资产的形式和大家见面,使用 ETCG 的思路设计(ETCG 分别是 案例 example ,模板template,组件component ,全局样式 global style ),包含构图、颜色、寓意等一系列设计指引,帮助设计者快速且优雅地完成图形化设计需求,让人人都是插画设计师。




项目背景:


图形化设计是品牌识别度的核心元素,在互联网产品,运营场景使用中无处不在。图形化在直观描述固有信息的同时塑造情感背景,使用户更具沉浸感和共情性,提升用户体验的同时来完成商业目标。图形化的风格缤纷复杂,插画师的个人风格明显,不同的设计师在图形化的工作协同中,风格很难复现和统一所以图形化体系在保持品牌一致性和提升工作效率上显得尤为重要。


// 其实这个插件的背景主要是希望解决两个问题,一个是用规范约束,避免插画设计师个人风格造成的风格不统一。二个就是组件化沉淀,避免重复造车,提高工作产出效率。




设计方法


HiTu 使用的 ETCG的设计思路(ETCG 分别是 案例 example ,模板template,组件component ,全局样式 global style ),从最底层的全局样式到最上层的使用案例。我们用组件化的设计思路,将元素组合成组件,组件又可以根据不同的场景组合成丰富的模板。模板可以组合搭配成各种使用场景的案例。

HiTu 使用的 ETCG的设计思路(ETCG 分别是 案例 example ,模板template,组件component ,全局样式 global style ),从最底层的全局样式到最上层的使用案例。我们用组件化的设计思路,将元素组合成组件,组件又可以根据不同的场景组合成丰富的模板。模板可以组合搭配成各种使用场景的案例。


// 感觉就是把插画进行了分层,比如颜色、形状、样式,用组件化设计的方式,对插画进行了拆解。这样想做一个新的插画时,也只需要选好组件,进行拼装组合即可。



HiTu 模板设计模型


基于科技,情感,自然,未来的四层品牌策略,我们将抽象的概念具象化。底层的科技能力为产品,体验和未来提供技术支撑和可能性。所以图例一一对应,我们总结了人和产品,体验及未来之间的关系。他们之间不同的组合方式可以满足不同的业务场景诉求。



HiTu 色板


HiTu 的色彩体系是基于 Ant Design 色板的场景应用,与 UI 色彩体系的应用有所不同。图形化的配色体系会相对更加灵活可变。基于 Ant Design 的基础色板我们进行了明度的调整,扩大色彩的宽容度,让设计者选择时更加高效,且和其他 UI 资产也完美兼容。



HiTu 默认资产颜色


通过搜资调研,我们发现在企业级产品的图形化,色彩使用上蓝色,白色会占很大比重。我们选取了色板中最具探索,钻研感的极客蓝作为我们的主色


基于 Adobe Color 的取色工具,和 Blender 三维建模小球作为取色参考,搭配海兔色板。可以轻松得到了我们 Dedult 版本的基础色彩搭配。


// 这个颜色我试了下,确实不错,看起来非常的高级。


设计资产


人物组件


在风格探索中我们总结出,企业级场景中的人物设计应基于自然的设计原则,我们不推荐使用Q版卡通形象和过于夸张的艺术化设计风格。


同时,我们结合情感化,将 9 种常见的职业进行人物角色设计。结合职业本身的一些性格特质,我们也赋予了他们不同形象风格,来满足不同的业务场景使用


有了基础的人物设计,我们将人物进行解构,然后搭配骨骼系统。为人物增加各种姿势的复用和延展。(骨骼系统匹配工具目前正在研发中,敬请期待)


// 有了骨骼,人物的任意动作,都能轻松调整,这个大大的赞。


通用组件

记忆点源于与众不同,专业感源于整齐划一。通用组件是业务场景中一些业务元素,状态元素。这类组件种类多样,我们希望在保持统一性的同时不去限制设计者的创意空间,通用组件的设计上,我们为了保持一定的韵律感,推荐设计师在1024*1024的网格中绘制组件,且圆角的大小保持8的倍数关系。



// 很专业很系统也很好看,可以媲美 Google 的 Material Design 啦


设计应用

有了丰富的设计资产,我们应该如何使用呢?在 HiTu 的设计指引中,我推荐设计者在使用资产的过程中构建 Z 轴向的空间概念,将整幅画面拆分成前景,中景及背景三个层次,在组件的排放时候,前景凸显重要的元素(如人物组件,核心通用组件等),中间交代所处环境,背景则渲染氛围。所以,在层次关系上,颜色和透明事物也是从前景到背景,逐级降低。




为什么蚂蚁的设计师,会想到来做一个这样的工具呢?包括在设计这个工具时遇到了哪些困难点?与现有市场其它工具的差异点在哪?


咱们继续看蚂蚁设计师 @伏星 带来的相关总结:

Hello ! 在这里先跟大家自我介绍一下,我叫伏星,是 HiTu 插画资产的设计负责人之一,来自蚂蚁金服体验技术部创意团队。关于 HiTu 的项目背景,相信大家也有所了解,HiTu 的推出主要是以图形化设计资产的形式,通过构图、颜色、寓意等一系列设计指引帮助设计者快速且优雅地完成图形化设计需求,让人人都是插画设计师。今天的目的主要也是想跟大家分享一下我们在做 HiTu 插画设计的一些过程和方法,希望能给同样做这块内容的同学带来帮助与启发;


为什么要做这件事情?


设计师通常在接到插画需求时,经常会遇到以下情况:


  • 插画师少,创作执行时投入的时间精力周期长成本高;

  • 无插画资源支持的情况下,上网扒图容易触及版权风险;

  • 沟通成本高,影响业务进度;

  • 学习成本高,资产单一,覆用率低,内部资产质量参差不齐;

  • 视觉风格不一致,修改成本高,体验度不佳,;


通过以上问题的分析,我们将影响业务价值的因素归纳两块内容,效能与体验,以下图所示:

如何解决这个问题呢?


我们需要创造一套能灵活覆用于大多数业务场景的优质设计资产,除了设计师外,也希望能帮助到做需求支持的非插画专业的同学快速上手,并高效完成插画场景的搭建工作,即简单、好用,因此我们也通过对大量业务场景问题的探索与分析,并最终决定以 ETCG 的设计思路作为整个插画设计资产的设计指引



何为ETCG?


ETCG设计思路(ETCG 分别是 案例 example ,模板template,组件 component ,全局样式 global style ),从最底层的全局样式到最上层的使用案例。我们用组件化的设计思路,将元素组合成组件,组件又可以根据不同的场景组合成丰富的模板,模板可以组合搭配成各种使用场景的案例。


如何定义全局样式 Global Style ?


全局样式是决定我们 HiTu 未来资产整体风格走向的重要一环,在定义颜色、线条、圆角、材质等内容前,我们开始针对我们自身服务的产品业务进行分析与探索;



确定整体基因方向


开始建立这套插画机制体系前,我们通过设计小组与技术团队、产品、用研等多个领域的同学一起对蚂蚁企业级产品当前的能力、业务价值、服务群体与未来发展等多维度进行了品牌基因探索提取脑暴会议,并最终确定以了以科技、情感、自然,未来的四层品牌策略作为本次设计的方向;


风格化探索阶段


基于这些关键词的概念方向,并结合蚂蚁企业级产品的场景内容,我们对行业中较受欢迎的插画作品做了大量的搜资与分析,并总结到大多企业级产品场景插画都有个多个共同点:


扁平化、线面结合、伪3D、3D等四种表现样式、色彩偏蓝白冷色调;


( 以上插画均来源于互联网搜资,仅作为竞品分析,不作任何商业用途 )


色彩篇章定义


主色


HiTu 的初衷是为了帮助更多人快乐高效完成图形化设计工作,解放设计生产力,让人人都可成为插画师,通过搜资调研与四层品牌关键词方向指引。我们从 AntDesign 色板中选择了最具科技感,有代表着探索、钻研有着像广阔天空与包容海洋般的极客蓝作为我们的主色;




辅助色(副色与点缀色)


基于AntDesign的色板并配合Adobe Color三元取色工具,最终定义了我们HiTu自己的应用色板,并尽把副色与点缀色控制在6个左右,在这里,设计师们如果要自定义某新品牌色彩选择时,可以尝试使用以上方法进行颜色筛选,但仅作参考,不同品牌的色彩选择还需根据业务的实际属性等综合角度去考虑;


色彩使用比例建议:主色 > 辅助色(副色、点缀色)


主色是作为品牌第一印象的基调色,辅助色包含副色与点缀色,副色为更好地突出主色优点而存在,使整体画面更饱满,点缀色的特点是使用面积小,色相清晰、醒目,能对画面能起到画龙点睛,丰富细节等作用,画面中的色彩比例关系里,视觉表现度尽量大于辅助色,同时我们可以尝试多用主色的邻近色作为画面的辅助色,这样能帮助画面的色彩视觉差过度更自然;


左:案例 中:案例色彩比例图 右:巧用辅助色的参考样式


概念草图设计


结合了搜资与产品的品牌调性,我们快速进入了草图概念创作阶段,并通过借助产品中的常见图形场景案例如:异常页、产品首焦、功能介绍、帮助页面等内容进行实验对象,我们组织了多位设计师基于场景内容,大胆做了多个风格表现手法的设计尝试,希望通过此种方式得到有效的筛选结果,这一过程也是个试错的过程,因为风格多样化的插画海洋中,要找到一个符合自身特色的设计风格本身就是种很大的挑战;


上为场景化案例草图概念


在草图概念设计的过程中,我们对业务场景中的人物与业务元素加入了情绪化的互动情节,希望通过生动的画面帮助用户更快速轻松了解信息内容;



以上为帮助页概念草图



以上插图均来自创意小分队中的不同设计师之手


表现手法:线面结合结合


在做了大量草图概念设计的案例中,我们最终拟定了以 线面结合 的插画方式作为下一阶段的风格设计方向,原因是我们发现线面绘制的表现手法能帮助图形带来非常高的可塑性空间和特殊的艺术感;


线面样式 / 全局样式

线条样式


以下为资产线条的使用说明,至于为什么会这么做,在接下来的组件设计篇我们会详细说到;




圆角( 适用于通用组件 )


此规范主要适用于通用组件和背景组件,基于这类型组件种类多样,我们不去过多限制设计者的创意空间,为了保持视觉上一致性与韵律感,我们推荐设计师在1024*1024的画板中绘制组件,且图形的圆角大小应保持8的倍数关系



图形大小绘制范围推荐控制在896*896px的范围内


材质机理


海兔资产默认无机理扁平化,出于涉及到不同领域业务场景的使用情况,设计者可以适当地对图形添加噪点、纹路、渐变等机理效果,这一块不作详细建议,根据实际情况自定义即可;




如何定义组件 Component 设计 ?


组件资产主要由人物组件和通用组件(业务、背景元素)组成,是整个资产构成的核心内容,下面我们会从这两块内容原型从 0~1 这样的一个设计过程对大家进行展示。


以上为组件中的人物组件与通用组件样式展示案例


组件 / 人物设计篇


在人物资产组件设计上,定义了一男一女的基础角色,并开始草图概念绘制,在草图设计中我们对人物的外观棱角柔硬度,线条的外轮廓处理方式做了几番设计与探索,如下图所示:


1 期人物设定草图


线条描边样式案例尝试与选择


基础人物最终定稿


比例上我们基于自然的设计价值指引,并考虑到适配的业务场景是企业级产品为主,所以保留了符合人类 7~8 头的正常身高比例,不推荐使用Q版、低幼或者过度夸张的设计比例,在外观上棱角的处理会偏圆滑柔和,线条表现手法上也做了简化处理,描边不会使用全轮廓化,而是灵活出现在结构、阴影等交界处,让画面看起来更轻量清爽;


身高比例 :7~8头身比例

人物组件拓展


在确定了原型基础的条件下,我们便开始对人物的动作、表情、服饰等内容进行拓展设计;


动作姿态

我们提供了12组姿态动作,能适用于多种页面场景、如异常页、帮助页等


服饰搭配


可替换发型


人物场景化使用案例

在页面异常页面中,人物结合表情脸谱与肢体语言使用将使画面变得更加生动



组件 / 人物设计升级


一期资产设计完成后,在推动业务落地上我们遇到了些问题,业务方反馈了人物角色太少,动作不够,只有男女两种较单一的人物选择,在不同业务场景不好适配,基于这些问题我们开始有了角色新增的想法,并针对不同业务人群分析,将 11 种( 设计师、用研、程序员、BD、经理、PD、商人、保安、互联网工作者、客服 )常见的职业进行设计。从服装、形体差异上,同时结合职业本身的一些性格特质,我们赋予了他们不同形象风格,并在后期增加更多姿态动作,来满足不同的业务场景使用。

概念设计草图


正稿样式


最终我们从创意草图中筛并选择了其中 9 个角色进行正稿绘制,并对人物进行了规范化的设计梳理;


人物组件构成指引


考虑到角色在业务场景中能得到更高的利用率,方便设计师灵活编辑与延展,我们对人物肢体进行组件化解构拆分处理,在设定角色新姿态时,设计者可对肢体模块进行自定义节点移动进行二次组合,为保证肢体的自然运动协调度,可以参考下图右方的运动轨迹方法或者通过我们提供的动作骨骼模型进行参考;




人物资产预览


基于人物元素组件配骨骼动作模型的参考,我们高效快速地完成了180+的人物组件,帮助节省了更多的绘画执行时间,解放了更多设计生产力;



组件 / 通用组件设计篇


这次我们同样组织了来自不同业务线的设计师,进行了一次关于业务元素组件收集的脑暴会议,并最终根据各自业务汇总了250+的业务元素关键词, 并对通用组件进行了分类梳理成两大类:业务元素、背景装饰元素;这次元素收集会的其中一环意义,是希望通过这种业务碰撞的方式验证我们组件并不是凭空想象,而是通过业务所需去定义而得到的结果,真正取之于业务,用之于业务;

草图概念设计稿


正稿样式

在全局样式的风格上基本和人物资产保持一致,目前 HiTu 资产已上线250+设计资产,新资产还在继续更新中…



通用组件构成方法指引


通用组件(业务组件、背景组件)都是由业务中的原子级元素组成,原子级元素可以通过改变颜色、大小、角度、得到不同的新元素组件,利用不同的子元素组合能得到多种新的通用组件,我们通过这样的方式让每个组件在场景中充分地的发挥了其利用率与覆用率,如下图所示,对话框、植物、几何体,它们就像乐高积木一样,可以通过简单的原始单体元素组合出丰富多样的新图形组建



Template 模版

模版内容主要是插画场景的构成案例和页面布局样式组成;



插画场景构成指引


在搭建一幅完整图形场景时,我们使用了分层的概念将场景拆分成前景,中景以及背景三个层次,在组件的排放时候,前景凸显重要的元素(如人,核心元素组件等),中间交代所处环境,背景则渲染烘托氛围,颜色饱和度与透明度也会随着层级的推移逐渐降低,如下图所示:

这样的排序方式可以更清清晰处理画面元素的层级关系


关于插画模版案例

场景模版案例这块内容比较开放且复杂,不同的应用场景与不同的组件样式会产生多种多样的的组合方式,设计者可自定义进行创作组合,所以目前我们仅提供了30+的基础模版样式,未来也会继续针对这块内容做详细的方法沉淀与增量工作;




页面布局样式

我们目前提供了4 种常规的基础排版模式,信息图形上下左右的排布方式,基本都能满足Web端大部分如:登陆、详情、异常状态、功能描述等页面内容;

最后

这期分享我们基本就到这里结束,下次会给大家带来更多内容,目前我们的资产可能还有多不足之处,也在一步步改进中,让大家有更好的使用体验,HiTu 资产已经上线Kitchen ,但目前仅支持IOS系统端用户使用,为普及更多设计者,我们已经开始web端的开发工作,希望大家继续关注我们的动态;

感谢前期参与的设计成员:奇灵、它山、线丝、松鸠、芮晗、梓元、旧一、松仙、鱼亦

THANKS!

插件获取地址

后台回复 “蚂蚁插件” , 即可获取资产下载地址+内测群 


注:文中转载部分来自于知乎 @Ant design ,欢迎大家在知乎上关注专栏 # Ant Design

同时欢迎在使用上有疑问或建议的同学加入 蚂蚁金服的 HiTu 官方钉钉交流群一起探讨~


为了方便大家上班摸鱼🐟,咱们UXD FANS 也建了一个钉钉群,欢迎大家进来日常摸鱼,包括讨论世界性难题:今天中午吃什么。

微信群还是扫下面这个二维码


———–  我 是 分 割 线  ———–

延伸阅读  
当初的农村小伙,现在统管着阿里几千位设计精英
三轮面试后,我拿到了腾讯设计Offer
设计驱动 | 腾讯产品设计改版笔记
经验方法:如何有效描述设计改版的价值
QQ红包设计项目复盘-爆款案例
在腾讯的八年,我的职业思考
腾讯QQ设计部ISUX-高效设计专题的技巧
看天猫设计师如何写项目复盘-智能音箱设计
提升界面视觉功底的几套秘招
每日经验-设计师到底需要掌握理论知识吗?
[深度思考]如何有效汇报自己设计的价值

你的每一个点赞,我都认真当成了喜欢
 

本篇文章来源于微信公众号: UX小学