HiTu插画资产设计

60天前发布

原创作品 / 插画 / 概念设定
作品版权由DOGLI_狗粒 解释, 禁止匿名转载;禁止商业使用。 临摹作品,同人作品原型版权归原作者所有。

HiTu的推出主要是以图形化设计资产的形式,通过构图、颜色、寓意等一系列设计指引帮助设计者快速且优雅地完成图形化设计需求,让人人都是插画设计师,关于HiTu的项目背景,相信大家也有所了解,详情可查看蚂蚁金服站酷官方文章;

很高兴自己能有幸作为该套项目的插画主设,本次的分享与之前文章会有点不一样,主要会集中在图形化设计的专业沉淀上,跟大家更详细地分享一下我们在做 HiTu 插画设计的一些过程和方法,希望能给同样做这块内容的同学带来帮助与启发;

BU通常在接到插画需求时,普遍会遇到以下情况:

1、插画师少,创作执行时投入时间周期长成本高;
2、无插画资源支持情况下,上网扒图容易触及版权风险;
3、沟通成本高,影响业务进度;
4、学习成本高,资产单一,覆用率低,资产质量参差不齐;
5、 视觉风格不一致,修改成本高,体验度不佳;

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

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

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

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

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

基于这些关键词的概念方向,并结合蚂蚁企业级产品的场景内容,我们对行业中较受欢迎的插画作品做了大量搜资分析,并总结到大多企业级产品场景插画都有个多个共同点,扁平化、线面结合、伪3D、3D等四种表现样式、色彩偏蓝白冷色调,如下图所示:

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

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

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

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

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


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

以上为场景化案例草图概念的一些设定过程


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

94
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

作品信息

  • 创作时间

    2020/06/09

HiTu插画资产设计
DOGLI_狗粒 关注
没有新消息