设计系统
设计系统搭建的4阶段
工作痛点:
频繁为使用什么组件而反复Battle —— 上下游都在拍脑袋式决策
有些诉求没有合适的组件 —— 依赖现成组件,但使用后有歧义
场景1
产品/其他角色在图表库快速找到合适的组件
场景2
围绕“维”、“度”、“量” 追问问题,映射到唯一组件
场景3
为创新组件提供理论依据
点击查看完整内容 >
达成结果
90.0%
设计交付
新机型OS设计交付效率明显提升
5人日降低至0.5人日
背景:OS侧对素材的要求和软件侧不同,每出一款新的机型,都要针对性地出图以满足适配要求,设计师花时间在改尺寸、改颜色等基础操作上
75.0%
迁移适配
旧项目在新机型上的迁移效率
背景:硬件有屏幕尺寸、比例、屏幕密度等多因素影响适配逻辑。其中字体适配和元素尺寸是两套适配。想真正做到一套代码更好地适配所有机型,需要针对该机型的字体映射关系和数值映射比例进行配置
30.0%
开发走查
新项目使用组件,开发效率和走查效率均有提升
提效挺多的 省得自己封装组件了
后期应该会更快 这个很不错👍
30%差不多
Why:问题&现状
设计团队在OS层面自驱做的事,希望在提升用户体验的同时提升团队内的协作效率
难点:适配
每个机器的屏幕分辨率、屏幕密度、宽高比不同。做好适配至关重要
如何让一套组件代码兼容所有机型?
1、全机型验证,确定适配方案
2、Token表:字体、数值映射规则
3、生产组件
执行过程
Step1
组件分类与层级架构
组件分类的调研 & 已有样式的梳理 ——> 制定4层架构6种类型
Step2
跨机型效果,寻找映射关系兼容适配
字体在不同设备上的字号映射、间距圆角宽度高度在不同设备上的数值映射、颜色在深浅模式下的映射
Step3
组件生产 & 需求评审
设计验证,保障效果后再提需
Step4
全机型验证与走查
组件分类的调研 & 已有样式的梳理 ——> 制定4层架构6种类型
Step5
落地应用 & 效果验证
节奏与排期
04
Ai搭建
Figma设计图 - Ai提炼规范 - 新需求新页面
Ai在制定设计系统时的效率与精准度远超人力,交互与体验还是需要人力主导
UI生产
设计规范 色彩
设计规范 字体排版
设计规范 间距与圆角
设计规范 组件模式