干货篇，最佳UI设计规范10例

时间：2023-09-10 19:48:01 | 来源：网站运营

时间：2023-09-10 19:48:01 来源：网站运营

干货篇，最佳UI设计规范10例：不得不承认，整理设计规范是UI设计师设计能力的一种体现，尤其是便随项目越来越多的情况下，对设计规范的把控力，成为了设计师职业素养的一种体现。

无论还是处于自己设计创作的阶段，还是和程序员沟通推动产品开发的阶段，设计规范完善与否，对产品的一致性和用户体验有着近乎于决定性的关键作用。在UI设计的过程中，设计规范是一个关键步骤。

整理设计规范很苦恼？优秀全面的设计规范是什么样的？如何通过设计规范提高品牌一致性和推动开发高度还原设计？我们不妨先来看看优秀的设计规范到底是什么样子。这里有我整理的10个设计和质量俱佳的设计规范模板，它们给我带来了很多启发，也希望对你有所帮助。

设计规范的组成

制定良好设计规范的第一步就是合理归类。你需要先明确你需要整理的内容有哪些，这些内容的分类又该怎样呈现。一般来讲，UI设计规范有一下几大分类：Logo、标准色、字号、段落设置、图标、图片、间距、圆角值、大小、阴影、组件等。

设计规范10例 （大图流量君谨慎，文末有打包资源，直接下载，我很勤快了）

1.







2.







3.







4.







5.







6.







7.







8.







9.







10.







制作设计规范

还在设计规范文档？也是很多人还在做着这样费力不讨好的事。相信看了上面的10个案例，你会发现，咦？还像它们都不是手写出来的呢？

的确，时代进步，高效的设计规范制作工具也频频出炉，比如，摩客设计系统。（本人亲用，功能尚佳）

1，摹客系统提供设计规范分类大纲

你可以建立多个库、分类和子分类来进行管理，每个库里包含2大类资源分类，第一类是文件类资源，其包含Logo、图片、图标、组件、字体；第二类是编辑类资源，包括颜色、度量、标准字、阴影。基本满足了设计师的多种设计类型需求。

设计规范整理和制作过程中，只需要在对应的分来下，自定义添加对应的内容就可以了。

2，对接设计工具Sketch和Mockplus

规范不等同于标注，却也有一种“限制感”。在这种规范的“束缚”下，优秀的设计师总是可以最大限度的利用可扩展性，做出优秀的设计方案。

但规范还是用来使用的，是一种有效的方法来为你的设计服务。因此规范本身应该是和工具相对接的。做出来的规范如何投入使用，如何才能服务于设计，服务于产品，完成产品体验的不断优化，这才是关键点。

在摹客设计系统中，对接的设计工具是Mockplus和Sketch。Mockplus是更快更简单的原型设计工具，而Sketch是一个高效的矢量图工具。在摹客设计系统中，可以实现设计资源的应用、上传和推送。也就是说，你可以在Mockplus和Sketch中制作和上传设计资源，再让整个团队分享和利用这些通用资源进行快速设计。而应用决策也很简洁，只需鼠标拖拽或者点击即可应用。这对于快速设计的需求，是极有利的。

3. 输出和优化

一个规范可能不仅仅是用于设计师之间，还需要对接开发，交付给你的老板以及第三方工作人员。因此规范的输出也是至关重要的。在摹客设计系统中，针对团队内成员，你可以一键分享设计规范，对于开发人员，你可以导出CSS、SCSS、LESS，应用到前端开发。当然，你还可以导出如上面分享的各类版式的设计规范图（UI Style Guide），用于更多的交付对象。

更多呢，还需要你么自己去亲自尝试，时间出真知。希望今天分享的设计规范图对大家有所启发啦。

对啦，这里可以下载更多的设计规范图哦，我都打包好了。

下载摹客设计系统。

下载Sketch插件。

PS：据悉摹客设计系统上新正在活动进行中。有三大福利享不停！

1，免费赠送摹客（Mockplus+设计系统）专业版半个月！

2，免费幸运抽奖，Airpods、Wacom手绘板、小米手环等你拿！

3，参加设计大赛，晒设计规范，赢iPad Pro！

领取福利快速通道在这里哦