首发于Ant Design
解放图形化设计生产力 - HiTu

解放图形化设计生产力 - HiTu

HiTu 是什么?

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

https://www.zhihu.com/video/1196925110647652352

项目背景

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


设计方法

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


HiTu 模板设计模型

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



HiTu 色板

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

HiTu 色板

HiTu 默认资产颜色

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


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


设计资产

人物组件

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


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


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


通用组件

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




设计应用

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


敬请期待

为了满足更多场景的设计需求,如运营,广告,首页头图等场景都需要更加有体感的视觉表现。所以我们也设计了资产的三维化。同时,线上的拼搭工具Web HiTu也在稳步开发中。

敬请期待···

目前如何使用

下载 Sketch 插件 Kitchen 即可使用,一杯茶的功夫,通过拖拉拽的方式,轻松完成图形化设计。 下载 Kitchen


也可以扫码加入我们的钉钉群 参与讨论


- 参与知乎讨论,有机会赢取下一届 SEE Conf 的免费全天门票喔!参加第三届蚂蚁体验科技大会 SEE Conf 2020 是什么体验?

- 会后资料整理将发布到 SEE Conf 语雀知识,敬请留意更新哈!SEE Conf · 语雀

编辑于 03-16

文章被以下专栏收录

    Ant Design 是一个致力于提升「用户」和「设计者」使用体验的企业级设计体系,利用统一的设计规范、前端实现、设计/研发工具链对产品研发赋能,全面提升企业级产品的使用体验和研发效率。