admin 管理员组文章数量: 1087709
2024年5月7日发(作者：汇编计算1到100的和)
9例UI设计规范模板
作为UI设计师，整理设计规范也是设计能力的一种体现。所以，无论是自己设计创作
的阶段还是和程序员沟通推动产品开发阶段，你的设计规范是否完善，对产品的质量起着
决定性的关键作用。
在UI设计的过程中，设计规范是一个关键步骤。如何通过设计规范提高品牌一致性和
推动开发高度还原设计？
这里，为大家整理了设计精细并且优质的设计规范模板，干货多多，有助于你整理设
计规范的时候理清思路，完善细节。
先为大家整理了设计规范中的分类情况，UI设计规范有几大分类组成，分别是：Logo、
标准色、字号、段落设置、图标、图片、间距、圆角值、大小、阴影、组件等。
1、Logo
品牌印象的直接感受，根据页面不同背景所使用的Logo图也不同。将产品中所使用
到的Logo统一分类，以下引用Moby’s Petshop UI Style Guide的Logo资源例举说
明。
Moby’s Petshop UI 的Logo由图形和文字组合而成，而品牌色为蓝色，Logo的
使用也需要考虑到Footer黑色背景下的Logo。所以用Logo的横竖向排版和单个Logo
图形来分类更好。
第 1 页
共 7 页
分类里面则展现品牌色的Logo、品牌色背景的Logo、Footer黑色背景的Logo。
2、标准色
颜色是设计最重要的部分，没有之一。细节决定品质，所以对颜色的运用格外细致，
颜色的搭配直接决定产品的品质感。颜色大致可分为品牌色、文本颜色、背景色、线框色
等。给颜色添加关键词，明确用于什么界面。
以下引用real-pixels UI Style Guide的颜色规范，可以借鉴的是每个颜色不仅标注了
颜色值，而且右侧给出了颜色使用的场景，值得借鉴的是按钮Normal状态和Hover状态
的颜色值放在一起，这样，对不同状态显示的颜色感受更直观。
对颜色值统一规范命名变量，提高开发效率的同时更好的维护设计规范。
在前端开发中，对颜色值进行编号，这样对代码也有着极大的优化。定义一个设计规
范的CSS样式库，开发过程中就不用重复修改CSS参数值，直接引用定义好的变量名就可
以，这样修改设计规范的成本大大降低。
3、字体
字体是设计中必不可少的考虑因素，不同的字体气质不一样，并且不同场景下带给人
的感受也不一样。所以需要在设计的时候考虑到字体的设计效果，然后在设计规范中注明。
以下引用的是Retail Banking Service UI Style Guide中的字体规范，在定义字体名
称的同时也定义了字体的风格，并且添加了不同字体风格的预览效果，常见的字体风格有：
Light、Regular、Italic、Semibold、Bold。
第 2 页
共 7 页
版权声明：本文标题：9例UI设计规范模板 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1715072401a685556.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论