设计语言（规范）

序言：一个好的设计语言本身就可以在体验上为产品加分。

为什么需要设计语言呢？

      对内，很多设计团队都有这种状况，每一个页面或者功能类似模块（按钮）尺寸、颜色、大小不一样，个性化（设计师个人主观经验设计）比较严重，导致风格层次不齐，缺乏统一性，设计语言（规范）能解决统一性和效率，避免开发工程师重复开发。

      对外，统一的品牌符号、 特征、有助于加深产品在用户心中得印象，统一的颜色和交互形式也能加深用户对产品的熟悉感和信任感。

1、一致性

颜色、按钮、 字体、 品牌、一致性能给用户带来安全感，提高用户对产品的印象，同时也能解决设计界面风格不统一问题。

一致性展示

2、明确设计原则

a.产品要给用户传递的设计特征和原则是什么

b.平台约束力是什么

例如，平台特征年轻、活泼、那我们设计规范对应的就是：圆角按钮、渐变色。

设计师就要按照这个约束进行下去设计，不能用方形或者直角图形，因为和整个设计风格不匹配。

图片发自App

传递与约束力

3、效率

提升效率，一些经常用到的可以复制的模块内容（如：颜色、按钮、分割线、图标、字体、tab、表单等）提前统一并做好，能大大减少重复性设计，把时间放在提升设计品质上，还有把对于基础的颜色、字体、间距也可以提前开发好，减少重复性开发。

统一性展示

4、多平台设计统一

各种不同平台上（如：各种屏幕、 平板、笔记本、各种手机等）必须保证统一的设计风格。

5、 设计语言包含内容

a.设计原则

统一：那个设计都应该统一，不能有太多个性差异化特征。

关于内容： 用户应更多关注内容，而不是设计本身。

确定性： 减少不确定的因素和预期。

facebook设计围绕通用、人性、干净、统一、有用、快速、透明的设计价值观

苹果公司的设计规范：完整性、一致性、直接操作、反馈、隐喻、用户控制。

5、色彩系统

设计三大元素：色彩、字体、图形。

首先定义好整个系统的色彩架构体系，围绕这些色彩进行设计，色彩：品牌色、辅助色、字体黑白灰、不可用的、超链接、成功或者失败等。

色彩规范展现

图形，设计中很重要的元素之一，插画风格如何定义，图标，背景图形都属于图形一部分。

如atlassian对于插画进行规范，

插画需要有隐秘和故事性，

插画必须有构建的感觉，

定义了任务特征以及颜色规范，

空白页图形定义，

图标风格定义、色彩风格

头像，定义了有五官和无五官风格，

整个规范的正确与错误的示范

图标规范。

插画

空白页定义

规范正确与错误示范

图标规范

6、栅格系统

栅格为了保证页面更好，和统一性的布局。

栅格系统又分最小单位和间距，在airbnb中对于间距，运用了8的倍数（如8.16.32.64），所有规范都有弹性。

栅格实例

网格系统的列（栏）

网格系统的行

网格系统的水槽

网格系统的边距

7、字体

界面中出现最多的就是字体，除了传统意义上的大小之外，还有字间距、 行间距、字体颜色等

字重

字体界面中什么场景用多大字号，对应的字间距，行间距等等。

字体颜色

什么时候用品牌色，成功，错误，超链接等。

8、投影

投影要去定义不同强度、透明度。

投影规范

8、图文关系

图片和文字在界面中如何处理，多色调运用，不同图片放什么样的字，需要详细定义。

图文展示

总结：

设计是一个很复杂的过程，需要慢慢累积。

一般设计完成后，对于基础颜色，字体不要经常变动，（至少保证这些元素一年内不要频繁变动）。