如何通过设计规范提高品牌一致性,促进开发高度还原设计?

无需加好友免费技术支持

作为UI设计师，整理设计规范也是设计能力的体现。因此，无论是在自己的设计和创作阶段，还是在与程序员沟通以促进产品开发阶段，您的设计规范是否完善对产品质量起着决定性的关键作用。

在UI设计规范是设计过程中的关键一步。如何通过设计规范提高品牌一致性，促进开发高度还原设计？

在这里，我们整理了精细优质的设计规范模板，干货多，有助于您在整理设计规范时理清思路，完善细节。

首先，我们整理了设计规范中的分类，UI设计规范有几个类：Logo、标准色、字号、段落设置、图标、图片、间距、圆角值、大小、阴影、组件等。

根据页面不同背景使用的品牌印象的直接感受Logo图片也不同。产品中使用的图片。Logo统一分类，以下参考Moby’s Petshop UI Style Guide的Logo举例说明资源。

Moby’s Petshop UI 的Logo由图形和文字组成，品牌颜色为蓝色，Logo还需要考虑使用Footer黑色背景下Logo。所以用Logo水平和垂直排版和单个Logo最好对图形进行分类。

分类显示品牌颜色Logo、品牌色背景Logo、Footer黑色背景的Logo。

颜色是设计中最重要的部分，没有一个。细节决定了质量，所以颜色的使用特别详细，颜色的搭配直接决定了产品的质量感。颜色大致可分为品牌颜色、文本颜色、背景颜色、线框颜色等。在颜色中添加关键字，以确定界面什么。

以下引用real-pixels UI Style Guide对于颜色规格，我们可以从每种颜色中学习，不仅标记颜色值，而且在右侧给出使用颜色的场景。值得学习的是按钮Normal状态和Hover状态的颜色值放在一起，使不同状态的颜色感觉更直观。

统一规范颜色值命名变量，提高开发效率，更好地维护设计规范。

在前端开发中，编号颜色值，大大优化了代码。定义设计规范CSS样式库在开发过程中不需要重复修改CSS参数值，直接引用定义好的变量名，大大降低了修改设计规范的成本。

字体是设计中必不可少的考虑因素。不同的字体气质不同，不同的场景给人不同的感受。因此，在设计过程中需要考虑字体的设计效果，然后在设计规范中注明。

下面引用的是Retail Banking Service UI Style Guide字体规字体名称的同时，还定义了字体的风格，并增加了不同字体风格的预览效果，常见的字体风格有：Light、Regular、Italic、Semibold、Bold。

在实际的产品设计中，段落有多种风格，不同场景下的段落要求也不同。例如，阅读内容的段落要求文本具有较强的可读性，因此字体、字体大小、颜色、行间距等要求简单易读。装饰性段落文本不需要那么严格，装饰性强。

需要注意的是，在定义段落默认字体时，还需要定义一个后备字体，即当默认字体不能正常显示时。设计的水平在于细节的抛光，这就是段落规范在设计中的意义。

图标是设计资源中最重要的软件标源中最重要的模块之一。图标甚至可能存在于软件产品的每个页面上。除了美化功能外，图标还具有计算机图形的明确指示意义。

分为以下三个功能：

图标是与其他网站和其他网站链接的标志和门户网站。图标是网站形象的重要体现。图标可以方便观众选择。根据图标大小和使用情况对设计规范进行分类，使其更加清晰。

图片也是设计规范中最重要的部分之一。图片资源按用途分类，设计风格系统化。

在设计的过程中，我们经常会使用一套规范的度量标准，来保持产品的一致性，分别为圆角值、间距、大小。

最好的测量解释是网格系统在设计中经常使用（Grid Systems），采用固定的网格设计布局，其风格整洁简洁。这就是我们在网页和APP格栅系统常用于设计过程中。

阴影风格和参数也是设计规范的一部分。在整理设计规范时，需要注意的是，阴影的参数值是控制网页中阴影的参数值，而不是设计软件中的参数值。

例如：网页中阴影对应的参数值为：box-shadow: type:Outset offset X:0px offset Y:4px Blur:8px Spread:0px color:# ，不透明度：10%，这是程序员需要的阴影参数值，否则最终开发的阴影会不一致，不能达到规范的目的。

常用的UI组件（Component）：Button控件、下拉框、选择框(单选复选框)、时间选择器、输入框、搜索框、进度条、分页器、提示框、警告框、表格、弹出面板、数字步进器、选项卡等。

Button控件

按钮是最常见的组件之一，有五种状态：Normal、Hover、Active、Disabled 、Loading。

这五种状态需要在规范中单独列出，标记相应的按钮填充颜色、框架颜色、圆角值、按钮宽度和高度、按钮文本大小和颜色值。如果是图标按钮，除上述参数值外，还需要标记icon按钮文本和按钮文本之间的间距icon图标的大小。

下拉框是为用户提供多种选择的单选组件。其优点是它以最简单的界面布局存储了许多选项。需要注意的是，当下拉选择框弹出时，鼠标移动Normal、Hover、Active状态。

顾名思义，单选框是许多选择中的一个，而复选框是许多选择中的无限选择。单选框和复选框需要三种状态，即未选择、选择和不点击。

时间选择器：

时间选择器是选择年月日的组件，分别对应于年月日星期的信息，在设计需要考虑四种状态，即：Select、Not_Select、Hover和Disable，并写入设计规范。

输入框：

输入文本框是我们软件产品设计必不可少的组件，文本输入框有4个状态：Normal、Active、Disable和Error。

搜索框：

在与输入框相同的地方，需要集中注意力，然后输入内容来完成操作应该有前途Normal、Active、搜索下拉状态，Error状态。

进度条：

这需要在规范中注明上传进度条的整个交互操作过程Normal状态、点击上传/拖动上传状态、上传、上传成功、上传失败、整个过程状态。在上传过程中，任何用户都应及时响应，以免在使用过程中感到困惑。

分页器：

分页器是一种用于切换内容页面的复合组件。传统的分页器包括上下页操作按钮、分页页码按钮、手动搜索输入页码的搜索框和分页器的四种状态：Normal、Hover 、Active、Disabled。

提示框：

提示框是触发事件弹出面板显示的组件。提示框常用于删除按钮、难点、提示弹出信息等。这种风格有很多设计，设计风格不同，定义了底板风格、文字风格和阴影参数。

警告框：

页面报错时的显示样式，常用的警告信息是：操作成功，提醒用户注意，警告用户注意等。

表格：

大多数表格信息应该集中在表格样式和文本颜色的大小上。

弹出面板：

弹出面板主要由文本信息、按钮、面板尺寸样式、蒙版颜色和透明度四部分组成。

数字步进器：

数字步进器是一种复合组件，可以理解为按钮和输入框之间的联动组件，因此步进器具有输入框和按钮的属性状态。

选项卡：

切换选项卡是切换内容，不同于下拉选项框，选项卡是多个选项排列的单选组件，需要考虑四种状态：Normal 、Hover 、Active 、Disabled 。

设计规范极大地促进了整个项目的标准化，但需要时间和耐心，所以整理数据、编辑材料、分类和整合需要花费大量的时间和精力，最后在设计软件中重新安排整个规范。

本文由 @ jongde 每个人都是产品经理。未经许可，禁止转载

题图来自 Pixabay，基于 CC0 协议