10组常用的UI设计规范分享,小白快速可以了解!

更新时间:2023-02-10 10:39:39

UI 设计规范是一个庞杂的设计系统,对颜色、图形、字体、尺寸都做了统一的规划和规定,这样做的目的是为了制定一套能复用的设计库。有了这套设计库,团队内部就有了共同协作的规则,这在提升了设计的效率,同时也让团队中的产品、开发、运营、测试等相关人员,都能一致的同步处理各自岗位的业务。一套好的 UI 设计规范,还能够帮助更多的设计师参考复用标准,而不用重头设计,因为获取优质的大厂设计规范,可以提升设计师的设计效率,本文整理了许多大厂 UI 设计规范,诸如:Element Plus 设计规范库官方1.0版本、Zan Design Vant 视觉规范、Systematize Design (Sysd)体系下设计标准等等,可以一键引用,超级便捷!

Element Plus 设计规范库

作者:AWM忠忠

Element Plus 设计规范库官方1.0版本正式发布了,欢迎大家使用

UI 设计规范

获取方法:

点击链接进入该案例页面,点击「使用」-点击「保存并打开文件」,即可进行使用或者在编辑态页面进行编辑。

如果暂时只需要保存下来备用,则可以点击「仅保存」,文件即被保存到工作台。

UI 设计常用尺寸规范大全

作者:即时设计团队

包含 APP 设计组件规范库,网页设计规范,B 端设计规范,小程序设计规范,车载设计规范,Apple Watch 设计规范,供设计参考复用。

获取方法:

点击链接进入该案例页面,点击「使用」-点击「保存并打开文件」,即可进行使用或者在编辑态页面进行编辑。

如果暂时只需要保存下来备用,则可以点击「仅保存」,文件即被保存到工作台。

设计规范参考

作者:七里香!

获取方法:

点击链接进入该案例页面,点击「使用」-点击「保存并打开文件」,即可进行使用或者在编辑态页面进行编辑。

如果暂时只需要保存下来备用,则可以点击「仅保存」,文件即被保存到工作台。

Element 饿了么设计规范库

作者:Element

饿了么 Element 官方通用「按钮」组件,适用于 Web 端,共同的特点是设计风格干净、简洁,具有自己的设计规范,按钮样式类型非常丰富全面,相关的交互态齐全,修改复用成本低,应用广泛,可以直接下载取用。除了打造自己的规范外,还可以了解、学习按钮的各种类型。

获取方法:

点击链接进入该案例页面,点击「使用」-点击「保存并打开文件」,即可进行使用或者在编辑态页面进行编辑。

如果暂时只需要保存下来备用,则可以点击「仅保存」,文件即被保存到工作台。


Vant 视觉设计规范

作者:有赞

Zan Design Vant 视觉规范 V3.0 提供了设计所需的各方面的指导、资源,能够有效地提升设计师与开发者之间的协作效率,降低生产成本,使设计师能专注于打磨更好的用户体验。

获取方法:

点击链接进入该案例页面,点击「使用」-点击「保存并打开文件」,即可进行使用或者在编辑态页面进行编辑。

如果暂时只需要保存下来备用,则可以点击「仅保存」,文件即被保存到工作台。

Systematize Design【开源共创设计标准 & 组件库】V2.3

作者:Cladonia Design Studios 团队

Systematize Design (Sysd)体系下设计标准,由 OUR Studio 与 Systematize Design 开源社区创造,提供统一且舒适的用户体验。目前版本:V2.3(2022/8/22)。

Tip: Systematize Design 支持 CC 4.0 协议与 MIT 协议

获取方法:

点击链接进入该案例页面,点击「使用」-点击「保存并打开文件」,即可进行使用或者在编辑态页面进行编辑。

如果暂时只需要保存下来备用,则可以点击「仅保存」,文件即被保存到工作台。

设计规范

作者:youth~


获取方法:

点击链接进入该案例页面,点击「使用」-点击「保存并打开文件」,即可进行使用或者在编辑态页面进行编辑。

如果暂时只需要保存下来备用,则可以点击「仅保存」,文件即被保存到工作台。


Systematize Design Straight 2.0

作者:elainegao

Systematize Design Straight 2.0,基于 Systematize Design v2 Beta,原作品:https://js.design/f/taEzz-?topPermission=1&p=QxjTB6nVgD ,现已加入共创,本组件基于原版进行直角化修正,现在的 UI 已经非常的直接啦。

获取方法:

点击链接进入该案例页面,点击「使用」-点击「保存并打开文件」,即可进行使用或者在编辑态页面进行编辑。

如果暂时只需要保存下来备用,则可以点击「仅保存」,文件即被保存到工作台。

UI设计规范

作者:吃糖会长痘

获取方法:

点击链接进入该案例页面,点击「使用」-点击「保存并打开文件」,即可进行使用或者在编辑态页面进行编辑。

如果暂时只需要保存下来备用,则可以点击「仅保存」,文件即被保存到工作台。

设计规范

作者:七里香!


获取方法:

点击链接进入该案例页面,点击「使用」-点击「保存并打开文件」,即可进行使用或者在编辑态页面进行编辑。

如果暂时只需要保存下来备用,则可以点击「仅保存」,文件即被保存到工作台。