企业级/B端设计交互/界面规范(一) 简介

1. 前言

目前常用的前端框架为 Angular与Vue，个人觉得长久累积下来Angular 对于日后变化与动态表现会比Vue来的更佳，Vue虽然对于前端工程师较为方便好上手，但对于设计师维护两种设计规范是不大现实的，设计师只需要依据公司内部使用的前端框架维护一套设计规范即可。

接着开始介绍一下我长年使用的规范，一开始也是针对 Vue 设计，基本的设计规范可参考 Element 饿了吗即可。设计师一开始应该如何设计"设计规范 ( Design Guidline )"呢? 我对于规范当中的设计理论大多也是参考饿了吗为主，在参照其他公司的设计规范，依据自身公司内部的需求提取所需要的部分，先搜集完后在提炼，并且在日后维护继续修正调整。

2. 设计规范的目的

设计规范(Design Guideline)通常负责的为 UED 部门，国外一般也称"设计语言Design Language"，目的在于减少企业内部设计师重复劳动，并且提高设计师工作效率，帮助设计师能有更多的时间着重在思考、构思业务身上，在一定的基础上，设计师只需按照规范执行，透过设计规范公司的产品也能有一致性，包含交互行为、界面风格，最理想的状况下是衍生出自身的企业品牌，并且深刻于用户心中。所以设计规范不仅是一套规矩，肩负某种程度上公司能宣传的优势之一，尤其对于 B 端企业来说，一套能完全符合业务场景的设计规范，是经过不断的打磨与修正调整，能够扮演着教育客户角色，当然能够是服务于业务场景才是称得上好的设计规范。

3. 设计规范应用理论

原子理论 (Atomic theory) 为整套设计规范应用的基础理论，主要是由小的元素一步步堆叠成的最终页面等级的模板，透过长期的积累，不仅能从交互视觉达成一致性，慢慢演化成模板、页面甚至是整个操作流程，这样设计师就能高效地运用常见或者制式的流程，从而帮助设计师能有更多时间考虑交互上的细节，另一方面也能帮助设计师们协作一个软件或多个软件时，能有统一的规范参考，背后隐藏的深意是透过不断的累积，进而形成互联网公司独有的产品特色或产品交互流程；当然以上是非常理想的状况下能够达成的目标，实现这些目标的基础也是端看设计师与前端工程师必须对规范有很深入的了解与熟悉，才能达到一致性、清晰、高效的理想境界。以下是原子理论的一些解说与图示：

原子（Atoms）：符号，为页面构成的最小基本元素。如颜色、字体，或是图标等；

分子（Molecules）：组件，由原子构成的简单 UI 组件。例如文字按钮，结合文字、按钮与图像，形成一个独立的分子；

组织（Organisms）：模块，由原子及分子组成的相对复杂的组织，在页面中可视为模块/样式层级；

模板（Templates）：原型，将以上的元素进行排版，显示设计的底层结构，在设计中对应的是原型图层级；

页面（Pages），将实际内容（图片、文章等）套件在特定模板，页面是模板的具体实例。

4. 设计目录

1. 规范简介

2. 规范原则

3. 设计视觉

4. 组建规范

5. 设计模式

6. 附录：规范文案

参考链接：

饿了吗

Angular (左下方有各大厂应用组件)

Angular for Material Design

Uber

google

Apple

SAP