如何定义一套设计语言（四）

如何定义一套设计语言——设计语言包含什么内容（四）

设计语言是我们传达给用户的调性是一致的，包括：

设计原则

色彩系统

图形

栅格系统

字体

投影

图文关系

1.设计原则

产品的设计不仅仅在于外观和功能方面的体现，更来源于用户的每一次的操作都是流畅最合理的。在网页上浪费鼠标的点击，也是在挥霍用户的好感。

那么在多个部门之间，需要共同协作时，遵循一致的设计原则将使我们的设计有章可循，有迹可查的，系统化的设计语言还可以方便产品的迭代，同时也能提升开发效率和团队协同效率。

一个优秀的产品核心是产品的价值观和设计原则。

设计价值观

设计价值观通常为我们指引了设计方向。

简单：页面设计简洁，交互良好，去除可能造成干扰的设计元素，用户关注的是内容体验，而非单一设计本身。

一致性：设计风格应该是一致性的，不能有太突兀个性化的特征。

专业：好的设计一定是能经得起放大到具体到细节的，经得起推敲的，用户才有更好的体验，设计和开发也有了存在感。就像交朋友一样，我们都希望和具有良好，严谨，专业，可靠这些品质的人做好朋友。

设计原则

设计原则指在设计中按什么标准来执行，是设计系统中必不可少的一部分，例如：

一致性：在页面场景中按钮大小，圆角边框大小，风格是否一致，避免存在多种风格误导用户，减少学习成本。

易用：将组件进行封装，避免重复劳动。

亲密：相关联的元素尽量放在一起。

视觉原则：

对比的根本是避免页面元素过于相似，如果元素不同（大小，颜色，粗细）等不同，就完全做成不同的，这样模块之间有层级关系的变化，可以让用户快速识别到哪些是关键信息。

重复：重复的目的是形成“一致”。不同页面重复出现的颜色，按钮，字体等。既有条理又增加统一性。

亲密性：互相关联的元素靠近形成组，若多个元素，则归纳为一个整体，而不是独立元素。

2.色彩系统

色彩能给人强烈的视觉冲击，是我们看到一个物品首先看到的形状，颜色。

我们在建立设计语言的时候，色彩系统的建立是重中之重。

设计语言中的色彩包括主色（品牌色）、辅助色、灰阶，成功、失败等颜色。色彩系统一旦建立好，以后的设计就根据这些色彩进行设计延展。

其中颜色的使用不仅要考虑整体页面的统一性，还要达到准确传达信息的目的。提高产品的规范性和统一性。

主色

辅助色

色盘延伸

3.图形

图形，即特殊含义的形状，是设计中除了颜色外最重要的元素。

图标、背景图形都是图形的一部分，目的是快速传达信息，降低用户理解成本，美观好看是它的设计初衷。

图标

来源网络，侵删

插画图形，一般有故事性在里面。

来源网络，侵删

4.栅格

栅格系统是将空间分割成有规律的网格，每一个网格称为一个单元，遵循一定规则将界面元素进行横向布局，适用于大型区块间距，以使页面信息更加清晰明了、美观易读。

来源网络，侵删

5.字体

页面中出现最多的就是字体，字体的设计原则有字体，字号，字重，颜色，字间距，行间距，段落间距。

6.投影

在设计中，相比平面，好的投影关系通常能给我们更立体的感觉。

来源网络，侵删

7.图文关系

图文关系的处理能使页面更加协调，统一。

来源网络，侵删

总结

设计语言是比较庞大的系统，一旦完成后，对于基础的颜色，字体不要轻易改动。

以上四部分就是关于如何定义一套设计语言的框架。