超全UI设计规范，带你了解规范设计全流程，设计语言，看似很火的一个词，无论国内的大团队还是小团队，都要做设计规范，仿佛还不够专业，UED的价值就不够高，尤其是对设计语言的借鉴，最著名的莫过于苹果和谷歌，也是设计语言的鼻祖。

一、首先，语言需要设计。
1.对内
许多设计组遇到的情况，按钮很多大小、颜色、大小，有时我们都有规格，但因为业务方的不同要求，要个性化，要不同，导致整个APP设计非常混乱，这是我们在设计中经常遇到的问题，许多APP由于缺乏基本规格说明，导致了APP各页面不同，设计者都是根据个人的主观经验来进行设计，造成风格的层次不齐，缺乏统一，所以对内，很多时候的设计语言都是以统一与效率为前提，不要让开发者重复某些组件的开发。

2.对外
外向，品牌符号统一、品牌特色，有助于加深对产品的印象，一致的色彩与互动形式可以帮助使用者加深对产品的理解与信任，一种优秀的设计语言本身就会给产品带来更多的体验，想象下，当你走进星巴克，它会发现LOGO已经改变，换了包装后，会不会感到像是山寨的感觉，就像汉堡XX，虽然是同样的薯条汉堡，但总感觉是山寨，良好的品牌规范，能更好地创造体验一致性。

二、设计语言能解决哪些问题。
1.一致性
平台整体创建一致性、色彩、按钮、字体、品牌的一致性，给用户安全感和熟悉感，同时解决了设计师因个性特点而造成界面不统一的问题。

2.明确设计原则。
要使每个设计者都清楚地认识到，我们产品要传达给用户的设计特点和原则是什么，整个平台都要遵循哪些原则，比如年轻、活泼，这样我们就有了相应的设计规格，如圆角按钮、渐变颜色等。设计者必须在这种约束下进行设计，无法将图形设计成直角或方正，因为与整个设计原理不相符。

3.效率
提高效率，针对一些常用组件，颜色、分割线、按钮、图标、字体、tab、窗体等组件，假如事先设计好统一，可以极大地减少重复设计，可以让设计师更注重设计质量，提高效率，为基础色彩，字型、间距可提前开发，减少重复开发。

4.多平台的协调。
如今，我们所处的时代，各种屏幕尺寸、平板电脑、笔记本、各种Android机、各厂商定制系统等，我们的设计要在这些平台上运行，一定要保证统一设计。

三、什么是设计语言所包含的。
在此之前，我们已经说过，设计语言的重要性和设计语言解决了什么问题，那么设计语言中究竟应该包含些什么，我们又该如何界定这些内容？

1.设计原理。
Airibnb在构建自己的设计语言之前，首先通过对整个产品公司的定位、价值观的分析，得出其整体设计语言的关键词：
统一性：每一个设计都要统一，不应具有过多的个性差异性；
在内容方面：用户应更加注重内容，而不应注重设计本身；
决定：减少设计中的不确定性因素及期望。

与此类似，在facebook的设计理念语言中，也首先强调了其设计价值观：通用性、人性化、干净、统一、实用、快捷、透明，在facebook的所有设计中，都以这几点作为其设计指南。

Apple设计规范，建议每个接触UI的同学都要学到，苹果的设计规范包括：完整性、一致性、直接操纵、反馈、比喻、用户控制等。

因此，在构建一门设计语言时，我们首先应该建立一个设计指南，在以后的文章中，我将对您详细地介绍设计指南。

2.颜色体系。
三个主要的设计要素，颜色，字体，图形，那么第一个步骤，当我们构建系统的时候，颜色是非常重要的，在我们的整个系统中，我们需要确定色彩体系的结构，色彩系统一旦建立，后边的设计都将围绕这些色彩进行设计，色彩包括：品牌色、辅助色、字体黑白灰、不可使用颜色、超链路颜色、成败颜色等。

3.图形
插图，是设计的一个重要元素，插图式的样式、图示、图示都属于图形的一部分。
插画在设计中有几种应用类型，例如atlassian对插图类型作了规定，插图需要有隐蔽性和故事性，插图必须具有构图感，定义人物特征，以及色彩规范。
包含空白页面的图形定义。
定义包括颜色关系的图标样式。
就头像而言，定义为五官与非五官式。
包含对整体规范的正确演示和错误演示等。
指定图标等。

4.格子制度。
网格化就是要保证页面的良好布局，保证布局的统一性。
超完整的UI设计规范，带您了解整个规范设计过程。
格子系统内部又分最小单元和间隔，在airbnb中，它们使用了8的倍数，所有的规范都非常具有弹性，即8,16,24,48,64。
网格系中的一列，还有叫栏。
网格系中的行。
网格制中的水池。
网格系内的边界。

5.字体
最常见的内容字体出现在界面，除了传统意义上的尺寸外，还有字距、行距、字重对比、字体和颜色等，在后面的系列文章中，我将详细介绍怎样定义字体。
字数，顾名思义就是字数的粗，通过字数来强化字数。
字号和场景的使用，字体在界面上使用了多大的字体，以及相应的字距、行距等，都是需要我们来定义的。
字型色彩，何时用商标色，成败，超链接错误等各状态颜色如何定义，我将在以后的文章中详述。

6.投影
投影法通常是通过透明度、投射远近最近定义的方式，来定义符合网页需求的大小，通常是由投射距离定义的。

7.图表关系。
界面中图像与文本如何处理，多色调怎样使用，黑字怎样处理，白色图片放文字如何处理等都是需要我们详细定义的。

总结
一套设计语言的设计是一个非常复杂的过程，前期通常需要较有经验的设计师来完成，完成设计之后，对底色来说，字体不能经常变动，成本会比较高，至少要保证这些基本要素，一年之内不能频繁变化，今日与您分享的只是一个大概的框架，接下来我将对内部各个模块进行拆解，逐步与您分享如何设计一门语言。