这篇文章是之后WEB端系列规划规范的前语部分，目的是起到抛砖引玉的效果，简述怎么制造属于“自己”的Web端规划规范。Web端规划规范系列也是我个人整理学习总结构建的进程，一起分享出来给我们做参阅学习。

Web端规划规范的价值

1. 可复用性

有了完好的规划规范和对应的组件控件。便利视觉和交互规划师重复复用，不需要重复制造，削减作业量进步作业功率。

2. 一致性

有了一致的规划规范，规划师之间运用时，可防止自我发明组件控件，坚持团队产品的一致性体验。

3. 进步才能

因为组件控件的可复用，这直接使规划师的作业功率得到极大进步节省了许多时刻，能够有许多时刻考虑规划和事务背面的逻辑然后进步规划思维才能。一起完好的规划规范是系统的，规划师阅览之后能够构建自我的规划体系，关于规划的进步有极大的优点。

4. 团队文明沉淀

团队有了规划规范之后，便于团队以后做规划的依据和参阅，不论是新职工的到来仍是老职工的离去，都能够很好的对接作业进步团队的协同功率。

Web端规划规范包括哪些

现在网上大部分规划规范都是之针对组件控件的规范，短少完好的规划思维和体系化的内容。

在拟定规划规范进程中会构成规划理念、规划准则、组件控件、界面交互和输出文档等。规划者能够依据自我的规划理念和准则依照功用需求直接调用规范中的规范控件，依照信息结构调用元素尺度进行规划，很容易便能输出中高保真原型图，减轻了规划进程中对交互控件挑选和信息排版考虑的担负。

Web端规划规范之规划理念篇

不同的运用目标(B端、C端)，不同的终端设备，规划的区别是彻底不一样的。所以规划理念也有所区别。

B端产品一般较定制化，以事务为导向。可能有许多高档功用，杰出高效易用，导致易学性打折扣。

C端产品一般考虑绝大部分用户运用场景和诉求，高档功用会相对少点。杰出易学性。

所以在拟定规划理念时，可依据团队实际状况来规划拟定。

Web端规划规范之规划准则篇

规划准则现在已经有许多，例如尼尔森的十大可用性准则、格局塔准则、剃刀规律、费茨规律、以及规划中常见的比照、对齐等，那么关于这么多准则怎么变成一套自己的规划规范的规划准则篇呢?这个需要规划师们依据本身状况或许本身团队实际状况去把控整理。

Web端规划规范之组件控件篇

组件控件是整个规划规范的最重要的内容之一，组件控件分类能够依据组件控件特点进行分类，也能够依据组件控件的功用进行区分。

依照规划师做规划的运用场景，仍是依照组件控件的功用性进行区分比较切合。

依据于功用区分，例如表单类就能够区分为：单文本输入，多文本输入、日历时刻挑选器、下拉挑选列表、单选多选等等

Web端规划规范之界面交互篇

移动端的触发手势有单击、长按、左右滑动、拖拽、旋转、夹捏等。相关于移动端，Web端的界面交互就很简略了，根本就是悬浮和点击。

界面交互的实质用一个公式可表述即：触发目标+操作行为+交互成果=界面交互

Web端规划规范之团队输出物篇

作为一名交互规划师，我们的重点作业职责是起到承上启下的效果。

比方对接上游的产品司理和项目司理，跟他们评论过产品规划及需求后，他们会依据交互规划师输出的交互文档来评定规划计划是否满意用户需求，以及在开发施行进程中的可行性;

其次要对接下流的视觉规划师和开发工程师，他们会依据交互文档中的线框图、交互细节阐明等来输出视觉规划稿、用代码完结交互规划计划，并以此为依据完结落地完结等作业。所以交互规划师最重要的输出物就是交互文档，它是对接上下流的重要枢纽。

专业的交互文档应该包括以下7点内容：完好的项目简介、需求剖析、新增修正纪录、信息架构、交互规划的计划阐述、页面交互流程图(包括界面布局，操作手势，反应效果，元素的规矩界说)、反常页面和反常状况的阐明。

作为视觉规划师而言，输出物的是视觉稿、标示和切图，这儿不做赘述。