蚂蚁金服的讲解
你们做这个组件化这么麻烦，图什么？
解决两种问题：
1 效能问题：我们在做插图的时候，时间人力和学习成本都会耗费我们的精力，但是 hitu 可以解决；
2 体验问题：插图水平不一致，表意不清，品牌传递不准确。
体验
效能
Efhciency
Experience
增长
Growth
情感
时间
用户
业务务
设计师
品牌
人力
创意
学习
插画库这么做：
分成四个方向来制作组件库，从下往上慢慢搭建
Example
移动端产品
PPT
Web 端产品
影视动画
品牌运营
案例
Template
模板
人物姐件
背景组件
透用组件
Component
组件
背禁元素
人动元素
用元素
GlobalStyie
颜色
投影
圆角
全局样式
具体的模版设计模型的结构怎么搭建？
未来
未来展望
自然
用户体验
确定
产品应用
科技
技术能力
品牌概念
图形结构表达
气氛辅助
人物组件
业务区块
技术底层
技术底层是实现方式，比如用 sketch 插件，figma 插件，或者外置素材库等。
青量组件
人物望件
进用姐件
gln￥
Component
组件
背景元素
适用元素
人物元东
通用组件
人物组件
背景组件
探索风格
AntDesinn 同格图
区快锁
制餐区快捷时住
4
轮的风格探索
历时
$
插画库的核心关键词：第一个：自然
1：虽然用插画表现，但是用尽量写实的自然的手法描绘人物
2: 细致刻画表情，让插画设计更亲和，可信赖，暖科技。
决定好方向之后，开始绘制草图
通过市场调研，选择颜色方向。
经调研发现，蓝色应该是科技类的主要颜色
定下来，我们的 default（默认）版本的产品颜色
然后我们用 Adobe color 这个工具，把主色输入进去，采用 Triad（三原色）的方式取得我们辅助的配色
blender 建模工具
在灯光条件下，我们得到了一个立体小球，在 ps 中把它像素化、组件化。
基础人物
和 UI 的组件库不同的点在于，他的丰富性要求更高，有时候会涉及很灰暗的颜色，所以我们在我们原有色板上进行扩充，填充了我们的 hitu 的色板。
然后定出基础人物，给每个角色定义性格，然后延续
单独人物效率提升，如何拆开原色做可复用搭建
角色设计人物分解
hitu 骨骼系统
人物姿态复用
记忆点源于与众不同，专业感源于整齐划一
通用组建的使用场景实在是太丰富了，因为他涉及到每个业务里面的不同区块，不同概念，不同术语，所以我们会把不同接口的不同业务的设计师召集在一起。
通过头脑风暴，讨论优先级最高的一批业务组件，（组件化设计中最需要注意的问题，就是逐级分批制作）
具体制作方法
给到设计师一个基础制作模版，1024*1024 的制图板，每个像素单元格是 32 像素
圆角上根据 antdesign 的原则，方便大家去记忆，都是以 8 的倍数去递增我们的圆角，这个时候，他就具备了一定的规律性去递增，所以在这个基础上，我们就可以得到一个比较标准的且具有美感的一些通用组件，来满足我们不同业务场景的使用。
再说说特殊情况：在企业级产品中，会有小区块存在，他们是一种很弱的场景，不能用太丰富的颜色去干扰用户。
做好了组件库，我们该怎么用
在 HiTu 的设计使用指引中，推荐设计者在使用资产的过程中构建 Z 轴向的空间概念，将整幅画面拆分成前景，中景以及背景三个层次，在组件的排放时候：
前景凸显重要的元素（如人，核心元素组件等）
中景层交代所处环境
背景层则渲染烘托氛围
前中后需要在饱和度、明度、对比度逐级递减，颜色的使用和透明上也是前景的饱和度和透明度最高，逐级降低
一个真实项目案例：
我的需求是，做一个可视化图标显示异常的插画
首先进行抽炼，分析需元素
先选择人物组件中比较合适的人，
得到结果：
如果出现需求修改，如需求异常修改成正常了
女性改成男性
或者更贴合其他的业务线，如语雀，我们更贴合他的颜色，用到他的主要设计元素，这样的话，你就进行了一个风格的迁移。
再通过 svga 进行动态落地，直接导出动态库（不用渐变，杂色等设计元素，要矢量化
设计）
最后落地商业
其他延续（具体规则，制作使用说明书，全公司推进）
另外更高技术探索
若有收获，就点个赞吧
0 人点赞
