UI设计规范流程
新闻来源：优漫本站
日期：2023-05-06
目前移动设计在我们的工作中越来越重要啦，除了掌握基本的UI设计技能之外，我们也要对移动互联网的特征有所认识。为了能在交互设计和用户体验上做出比竞品更优秀的移动APP产品，我们必须知道移动设计的基本规范。
APP为何要制定设计规范
目前移动设计在我们的工作中越来越重要啦，除了掌握基本的UI设计技能之外，我们也要对移动互联网的特征有所认识。为了能在交互设计和用户体验上做出比竞品更优秀的移动APP产品，我们必须知道移动设计的基本规范。
在UI设计的过程中，设计规范是一个关键步骤。今天为大家整理了设计规范中的分类情况，UI设计规范几大分类组成，分别是：尺寸、标准色、字号、图标、栅格系统等。
1、尺寸
设计图尺寸
虽说现在大多数都是以750（@2x）为设计稿，但是也还是有720（@2x）的尺寸，或是375（@1x）的尺寸，比如我就是用的720，所以设计之初最先要定一个统一的设计尺寸，特别是多个设计师合作的时候。
间距大小
间距包括页边距、模块与模块之间的间距,这种全局的间距大小必须要一致,页边距的大小很好定,基本上20、24、32居多,根据产品特性定一个统一的就好。
而模块与模块之间的间距就相对复杂一点,在定之前需要先确定模块之间的分割方式,是用线、还是面、还是留白,然后再确定间距。
确定好模块与模块之间的分割方式后，还需要确定模块内部的，确定之后就要严格执行。
比如规范定的模块与模块之间用线，模块内部之间用留白，那后续所有页面都需要按照这个规则来（特殊情况除外）。
2、标准色
颜色是设计最重要的部分，没有之一。细节决定品质，所以对颜色的运用格外细致，颜色的搭配直接决定产品的品质感。包括基础标准色（主色）、基础文字色,还应该包括全局标准色（背景色、分割线色值等）这些都需要标好色值以及使用的场景。
在前端开发中，对颜色值进行编号，这样对代码也有着极大的优化。定义一个设计规范的CSS样式库，开发过程中就不用重复修改CSS参数值，直接引用定义好的变量名就可以，这样修改设计规范的成本大大降低。
3、字体
字体是设计中必不可少的考虑因素，不同的字体气质不一样，并且不同场景下带给人的感受也不一样。所以需要在设计的时候考虑到字体的设计效果，然后在设计规范中注明。
在定义字体名称的同时也定义了字体的风格，并且添加了不同字体风格的预览效果，常见的字体风格有：Light、Regular、Italic、Semibold、Bold。
还有一点也不能忘记，那就是行间距，不管是一行文字还是多行文字，我们都需要标注清楚行间距，也就是行高，如果是段落的话还需要标注段落间距。
所以为了避免团队的其他成员忽略了文字的行间距，我们需要在做规范的时候标明，所有文字必须注明行间距。
4、图标
图标具体分为以下三个作用：
图标是与其它网站链接以及让其它网站链接的标志和门户。
图标是网站形象的重要体现。
图标能使受众便于选择。根据图标大小和使用用途进行分类整理设计规范，这样才更清晰明了。
5、栅格系统
在设计的过程中，我们经常会使用一套规范的度量标准，来保持产品的一致性，分别为圆角值、间距、大小。
对度量解释最好的是设计中经常使用到的栅格系统（GridSystems），运用固定的格子设计版面布局，其风格工整简洁。这就是我们在网页和APP设计的过程中经常使用到栅格系统的原因。
优漫教育全程大咖级讲师资亲授，多年教学经验，掌握最前沿的IT技术(移动端设计、UI设计、AI与品牌设计、产品交互、photoshop等)，拥有实力雄厚、大型实战项目经验丰富的技术团队。用真实的工作体验让学员提前适应职场，4个月后直接走向工作岗位，避免工作后的水土不服。
