设计本体论——UI规范定义和实践经验总结

Recommand
北京/UX设计师/248天前/488浏览
设计本体论——UI规范定义和实践经验总结Recommand
史宏爽
今天从以下4个方面,结合7年B端设计工作经验,为大家分享原子设计理论和中后台设计系统搭建的应用实践。
设计本体论——UI规范定义和实践经验总结
Collect
01 搭建设计规范的意义
分别站在整个产品设计研发流程中各个角色的不同角度,在工作中可能会有以下“抱怨时刻”:
各个角色的“抱怨时刻”
各个角色的“抱怨时刻”
Collect
由此,体现出搭建设计规范的作用和意义:
搭建设计规范的意义
搭建设计规范的意义
Collect
产品侧
⼀个产品不同分⽀多个团队完成的时候,可以保证产品团队使⽤同⼀份设计规范快速完成产品原型设计。
保证可复⽤模块的交互体验的⼀致性。
设计侧
通过设计规范去解决⼤部分需求,极⼤提⾼效率解放双⼿,让设计师能去做⼀些更发挥创意和想象⼒的设计。
开发侧
形成开发资产,可以提升研发效率,降低维护成本。开发⼯程师⽆需再重复开发同⼀个组件,只需要去组件库⾥调⽤即可,配合业务逻辑,⾼效完成界⾯开发,做到开箱即⽤。
测试侧
标准化的设计规范,是测试⼈员最喜欢看到的。例如,设计规范规定弹窗 footer 区按钮组居右,那么测试⼈员只要测到不居右,就可以给产品提优化建议了。
02 原子设计理论
设计规范中具像化的环节是设计组件化,最早可以追溯到⼯业⾰命时期,福特创造的流⽔线⽣产⽅式。福特将汽⻋分解成零部件,再把零部件模块化组装,这⼀创举极⼤的提⾼了⽣产效率。
T型车
T型车
Collect
根据资料显示,T型⻋是世界第⼀款⼤量使⽤通⽤零部件,并进⾏⼤规模流⽔线装配的汽⻋。这种⽅式极⼤地提⾼了T型⻋⽣产效率,降低了⽣产成本。1914年,福特已经可以做到93分钟⽣产⼀辆汽⻋,⽽同期其他所有汽⻋⼚商的⽣产能⼒总和也不及于此。到了1920年代,T型⻋的价格甚⾄降到300美元⼀辆(问世之初T型⻋的售价仅需850美元,⽽同期的竞争对⼿则通常为2000-3000美元⼀辆)。
原子设计理论最初来源于化学领域,这一点从名字可以听出来。在化学中,所有的物体都是由原⼦构成,原⼦组合构成分⼦,分⼦组合构成有机物,最终形成了宇宙万物。
将化学理论引⼊⽹⻚设计中
将化学理论引⼊⽹⻚设计中
Collect
2013年前端⼯程师 Brad Forst
将此理论运⽤在界⾯设计中
,形成⼀套设计系统,包含 5 个层⾯:原⼦、分⼦、组织、模板、⻚⾯。
公司的业务产品逐渐扩⼤
时,我们就需要制定⼀套完整的设计系统,
提升设计和开发的协作效率,统⼀所有设计师的输出物
总之,将设计拆分成⼀些基本元素,例如⼀个按钮、⼀个弹窗,再根据业务需求、产品逻辑重新组装,形成最终的产品,这就是原⼦设计理论(组件化设计),区别于整体设计制造的⼀种新的⼯作流程。
原子设计理论示意图
原子设计理论示意图
Collect
设计系统搭建—原子
原⼦是物质的基础组成部分,是构成设计系统的最基础元素。
在界⾯中以「元素」的形式存在,例如:颜⾊、⽂字、图标、分割线、间距、圆⻆、阴影等。
后台设计规范-原⼦级规范
后台设计规范-原⼦级规范
Collect
色彩体系
中后台产品的⾊彩体系主要分为3类:品牌⾊、功能⾊、中性⾊。
色彩体系
色彩体系
Collect
  • 品牌色:大型公司往往都会有专属色号的品牌色,比如阿里橙色、美团黄色和腾讯蓝色,以体现产品特性、传播理念。在界面中主要体现在关键行动点、选中状态、重要信息和插画元素等。
  • 功能色:旨在表示某种状态提示,这类颜色往往是深入人心的,比如绿色代表成功,红色代表失败等等。
  • 中性色:还有一种是不需要传递颜色代表的特殊含义的,称为中性色,即黑白灰。B端网站体现理性和效率特性,往往会使中性色占据九成以上,应用在背景、边框、文本和分割线。
下图为颜色定义示例(考虑暗色模式)。
色彩体系示意
色彩体系示意
Collect
文字体系
B端产品的⽂字系统设计⽬标:增强阅读体验、提升信息获取效率,字体是体系化界⾯设计中最基本的构成之⼀。
字体的
⼤⼩、字重、⾊彩区分体现界⾯信息的层级关系
文字体系
文字体系
Collect
  • 整体思路:
    在同⼀个系统的 UI 设计中先建⽴体系化的设计思路,对主、次、辅助、标题、展示等类别的字体做
    统⼀的规划
    ,再落地到具体场景中进⾏微调,最终确定建⽴体系化的设计思路,有助于
    强化字体落地的⼀致性
  • 少即是多:
    在视觉展现上能够
    ⽤尽量少的样式去实现设计⽬的
    。避免毫⽆意义的使⽤⼤量字阶、颜⾊、字重强调视觉重点或对⽐关系,提⾼字体应⽤的性价⽐,减少不必要的样式浪费。
  • 拉开对⽐:
    在需要拉开差距的时候可以尝试在字阶表中跳跃地选择字体⼤⼩,会令字阶之间产⽣⼀种微妙的
    韵律感
下图为字阶应用规范示意:
字阶应用规范示意
字阶应用规范示意
Collect
阴影、圆角、线条
  • 阴影:在B端界⾯中,有些特殊的元素会使⽤到阴影,从阴影中我们可以看出物体距离平⾯的⾼度,距离平⾯越⾼的物体阴影越⼤;
阴影层级示意图
阴影层级示意图
Collect
  • 圆角:从直⻆到圆⻆给⼈带来从严谨冰冷到柔和亲切的⼼理感受,在B端界⾯ 中,常⽤2-8px圆⻆;
圆角规范
圆角规范
Collect
  • 线条:分割模块及辅助定位。
线条规范
线条规范
Collect
后台设计系统搭建—分子
在界⾯中,分⼦是按照规律组合起来的元素,如:按钮、搜索框、选择器等。
以按钮为例,⽂字、⾊块、图标和间距这些抽象的原⼦产⽣关联组合成分⼦:图标、⽂字
传达含义
;颜⾊、圆⻆
传递特性
;间距、尺⼨
定义规范
分子级规范示意
分子级规范示意
Collect
后台设计系统搭建—组织
分⼦+原⼦组合成更复杂和可拓展的组织(区块组件),如搜索区、卡⽚列表区、表单区、数据统计区等。
组织级规范
组织级规范
Collect
后台设计系统搭建—模板
由原⼦+分⼦+组织构成的更复杂更具拓展性的模块,构成了典型⻚⾯模板,如列表⻚、详情⻚、异常⻚、Dashboard等。模板在设计系统中承载的作⽤就是保证设计⽅案在原型各阶段的⼀致性,专注⻚⾯底层架构,并⾮具体⻚⾯。
模板级规范
模板级规范
Collect
后台设计系统搭建—页面
带业务逻辑的场景案例,如标注场景、权限管理、详情设置等,将⻚⾯模板填充真实的⽂字、图⽚后形成⻚⾯,即带交互逻辑的⾼保真原型图,真实内容使设计系统有了“⽣命” 。
页面示意
页面示意
Collect
 03 原子设计理论
虽然通过设计规范可以对产研流程提效,但在开发还原中还是会经常遇到⼀些棘⼿的问题。
  • 开发还原准确度难以保证,走查几轮还有有细节问题没有修复;
  • 领导要求开发暗色模式,或者客户要求换一套主题色,找到替换的工作量巨大;
  • 设计一处变更,涉及多个页面模块,维护工作量大。
设计本体论——UI规范定义和实践经验总结
Collect
为了解决和优化上述的问题,Design Token 应运⽽⽣。它可以解决产品设计和开发过程中的细节、变更和⻛格⼀致性的问题,有效提⾼产研团队设计质量和协作效率。
Design Token介绍
“Token”原本的意思是“令牌,指令”,与 Design 连在⼀起指“设计变量”。在⼯程逻辑中⽤于⽤户身份与服务器端进⾏验证,⽽在设计体系中,Design Token 则可以简单理解为封装的视觉样式参数。它通过规定样式参数,并通过⼀套符合设计师、⼯程师理解的统⼀的命名规则,为这些样式参数的定义名称。
利用Figma生成Design Token
利用Figma生成Design Token
Collect
Design Token优势
  • 设计语义更易理解
帮助设计师和开发建⽴统⼀语⾔,设计⽅案更加⼀致。
从下到上的Design Token命名思路
从下到上的Design Token命名思路
Collect
  • 主题⽪肤⼀键替换
主题⽪肤的替换可以⽤在两个维度,⼀是浅⾊模式和暗⾊模式的替换,⼆是不同品牌⾊之间的替换。我们可以将不同主题的同⼀个场景下的颜⾊使⽤同⼀个 Token 命名,达到⼀键换肤的效果适配不同客户⽅案。
快速切换颜色主题
快速切换颜色主题
Collect
  • 设计变更⾼效维护
替代传统⼯作流⼀键替换效果。例如修改二级文本的颜色,传统工作流需要先修改设计规范,修改设计稿,然后输出给开发,开发逐一更新代码,完成后提交给设计师进行走查验收。而当使用Token之后,只需要更新Token参数,就可以直接导出JSON给开发,一键自动更新。提高效率不止一点点。
Token工作流和传统工作流的对比
Token工作流和传统工作流的对比
Collect
  • 设计效果精准还原
代码编辑器⾃动化提示颜⾊选择,如不正确则产⽣报错。
使用Token开发和传统开发的对比
使用Token开发和传统开发的对比
Collect
总结一下使用Token开发的优势:
  • 设计语言 更易理解
  • 主题皮肤 一键替换
  • 设计变更 高效维护
  • 设计成果 精准还原
Design Token应用流程
第一步:提炼token元素;第二步:定义命名规则;第三步:整理Design Token资产表;第四步:开发与应用。
Design Token应用实践
Design Token应用实践
Collect
接下来具体说说如何为Design Token命名,命名方式目前并没有绝对统一的要求,不过有一定的逻辑规则,可以由设计师找前端开发一起商量出一个都能通俗易懂便于理解的命名规则,举个例子:
1.Token名称由大到小排序,中间用“-”分隔;
2.Token前缀可自定义添加公司简称,如“--el-xx” 、“--ant-xx”、“--td-xx”。
命名规则示意
命名规则示意
Collect
为了更好的统一规范,应用Token,建议成熟的互联网公司设计团队搭建自己的低代码平台。一键更换主题,尽在指尖。
图为腾讯开箱即用中后台设计平台
图为腾讯开箱即用中后台设计平台
Collect
如果有任何问题,欢迎一起交流讨论。
6
Report
|
6
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
DESIGN NEW WAVE
Homepage recommendation
相关收藏夹
学生
学生
学生
学生
作品收藏夹
需要
需要
需要
需要
作品收藏夹
规范
规范
规范
规范
作品收藏夹
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
精选收藏夹
作品收藏夹
企业展厅/文化墙 参考
企业展厅/文化墙 参考
企业展厅/文化墙 参考
企业展厅/文化墙 参考
精选收藏夹
作品收藏夹
小家电
小家电
小家电
小家电
精选收藏夹
作品收藏夹
大家都在看
Log in