返回

更新|B端系统设计规范

#B端UI设计
45%
进度
0/0
知识点
0
笔记
概览
B端设计规范基本认识
B端系统的设计规范是什么
设计规范的主要内容说明
设计规范的创建流程分享
设计规范的创建工具和载体
样式规范的整理说明
色彩规范的定义
字体规范的定义
图标规范的定义
描边规范的定义
圆角规范的定义
投影规范的定义
首页知识库B端UI设计更新|B端系统设计规范

设计规范的创建工具和载体

酸梅干超人 编辑于 2025-04-1611人正在学
00

设计规范的创建需要使用对应的工具,并以特定的载体进行输出和交付。在早年,UI设计规范会学习品牌VI规范的做法,使用 PS或AI编写规范内容,然后将规范打印成册。

打印的模式不利于传阅、更新,所以很快被淘汰,然后演变成将规范做成长图或PPT,导出成图片或PPT,这也是网上看到最多的规范案例的样式。

但这种做法同样也已经过时了,因为图片的模式只能“看”,而我们还希望可以直接“用”它,比如复制出里面的色值、参数、控件或组件。随着UI软件的发展,这种需求就得到了满足,即我们直接将规范创建在设计文件内,不仅可以直接查看,还可以直接调用规范的样式和组件。

也就是说,你用哪个设计软件进行界面的设计,就用它创建设计规范即可。但这部分工作还包含两个步骤,一个是软件样式/组件创建,另一个是规范内容的展示整理。

软件样式/组件的创建,是软件本身功能应用的体现,比如将规范中使用的色彩创建进样式表或变量中,将按钮创建成组件,并添加自动布局和变体功能。通过这些功能的应用,设计师可以快速调用组件和填充预设的样式实现界面的设计,极大的提高我们完成项目的效率和质量。

如果使用的是Figma,可以查看这两个部分功能的笔记:

将样式和组件添加到软件列表中并不够直观,所以在正式项目中还需要对规范做一定程度的包装,也就是把样式和组件都分门别类罗列出来,提升它们的可见性和可读性。

这个步骤的核心要求就是对规范内容的整理准确、清晰、完整,但不用大费周章的做排版和视觉设计,所以只要根据样式的类目创建画板,并简单置入规范内容即可。

最后,不管是其他设计师,还是程序员、产品经理、测试,想要查看规范的时候都只要通过链接访问该文件即可,而不用设计师另外导出。所以,使用类Figma等云端设计软件,它就即是规范的创建工具,也是保存和展示规范的载体。

如果还使用Sketch、XD甚至是PS做规范整理的话,那么建议要上传蓝湖、Codesign等工具来作为展示的载体,满足今天云端协作的需要。

点赞
收藏
学会
4180011
下一篇: 色彩规范的定义
色彩规范,即定义项目中使用的色彩类型和色号。色彩规范的定义需要完成以下工作内容: 品牌色定义 功能色定义 中性色定义 色彩变体定义 特殊色彩定义 品牌色定义 品牌色是一个品牌或产品的色彩身份标识,用于输出和强化品牌认识,也是项目中最重要的颜色类型,要应用在项目全权重最高的元素和区域,是奠定项目色彩应...
笔记 (1)
只看自己
logo
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞