前言 | PREFACE

社区智能安防系统v1.0版本在前期设计时间节点较紧，前设计师没有制作有效的UI和交互设计规范和对应的组件库，至后期我接手后版本功能迭代设计时，对界面的设计元素记忆降低，出现了界面控件不统一和遗漏交互细节的问题。增大了设计和前端开发沟通时间成本，同时也降低了开发和迭代维护的整体效率。

建立时机：设计规范是在完成风格定位，定稿几个重要页面就得着手后开始做。其一：设计的周长会影响你设计记忆点。即时一个人都很难保持页面的统一性；其二：不明确混乱的组件库对前端的延迟了工作周期，代码冗余问题。

设计弹性：利用28原则只能针对产品80%的界面元件进行规范。对常规的颜色，icon，按钮，导航，弹窗，布局等等定制规范就可以了，因为百分比规范约束死设计师的创作空间和灵感，留些许空间去打破规范，页面会更活力；其二；对于出现率微小的模块内容定制规范，纯属浪费时间成本

目录 | DIRECTORY

设计规范目的

设计原则

设计规范内容

一：设计规范目的 | DESING SPECIFICATIOND

1.设计师同步协同合作

庞大的后台设计，建立基础样式库、组件库，视觉调性设计语言标准。维护设计师横向同步协作的一致性，进而提高设计效率，保持产品设计的统一性、避免交互体验不一致的问题。

2.提高开发的效率

通过规范还可以让开发人员快速了解平台的设计规则。同时对复用率较高的组件搭建全局共用控件，避免重复开发，节约研发成本，高度还原设计稿；减少后期设计还原的返工。

3.不同用户

有效提高用户体验，加深对产品不同视觉和交互体验，降低学习成本，提高了操作效率低。

4.方便产品迭代

随着产品的不断推进和发展，为了新增的需求和不断优化的用户体验，这时候会需要对某些规范控件进行调整，在有设计规范的情况下，可以迅速对接开发快速全局调整控件，极大的提升了设计和开发的工作效率。

二：设计原则 | DESING PRINCIPLES

B 端产品帮助企业或组织通过协同办公，解决业务管理问题，因此更加注重的是业务逻辑的清晰和功能的实现，以提高办事效率为核心，同时在用户初次使用的认知成本较高，因为后台产品是数据密集型，业务繁复，功能庞杂的。在设计上去掉c端产品的一些’花哨’的品牌视觉元素和情感化的表达，回归到以简洁实用，内容的可读性和页面的加载时间为首要考虑因素。视觉的表现上一定是克制、简洁、干练的，避免分散用户对内容的注意力，从而提高信息获取效率。

设计元素清查

根据用户群体、用户使用场景以及产品的定位来进行思考和选取，对系统的组件元素梳理，主要包括项目的主体界面风格包含颜色、按钮、表格、表单、弹框等相关样式。可以更好的把控设计规范的内容。

三：设计规范内容 | DESING SPECIFICATION

3.1.1：栅格布局，适配规范

在这个屏幕尺寸上考虑的时间是最多了，一是我们公司内部都是用笔记本，笔记本有一个视觉逻辑分辨率，在13，14寸电脑基本是1280x800，2是我们平台面对用户是街道办等一些政府部门，根据产品经理反馈，大部分用户电脑偏老旧是1440*900。对v1.0版本的不同尺寸电脑的展示效果的对比。发现笔记本电脑表格显示很多会出现横向滚动，很影响操作效率。所以决定致下而上。已1280尺寸为基本作设计，往上适配1400x900；1920x1080，甚至更大。同时对大屏幕作一定的适配。

3.1.2：栅格系统

栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考，它让页面设计变得有规律，从而减少了设计决策成本；栅格化提高了页面布局的一致性跟复用性；避免了设计师与开发者在细节上的反复沟通确认，从而提升了整个设计开发流程的效率，并能帮助开发者实现较为理想的设计还原。

查看了现有pc屏幕大部分的尺寸，有兼顾现有的管理平台的边距。决定以10px为grid（最小的单位）；20px为gutter（水槽，也就是内容模块的距离/或者栏之间的距离）；70px为column（栏，删格的容器）同时居于现在管理平台的内容在自适应模块分十二栏；可以自由分3/4/6栏。

3.1.3：页面模块布局

页面构成是由不同的关联的组件组成模块，然后不同内容，层级模块构成界面，在整体界面下，利用栅格的规范下设定好模块之间比例关系，元素之间的边距，可以很好的把控整个页面的统一性，一致性，同时也可以加深用户对产品视觉和交互体验记忆点，提高了操作效率低。

3.2：内容模块

利用28原则只能针对产品80%的界面元件进行规范。对常规的颜色，icon，按钮，导航，弹窗，布局等等定制规范就可以了，因为百分比规范约束死设计师的创作空间和灵感，留些许空间去打破规范，页面会更活力；其二；对于出现率微小的模块内容定制规范，纯属浪费时间成本

3.2.1：标准色

产品的颜色要根据产品特性、用户使用场景、产品定位等进行选取，我们的管理后台主要用户政府人员，所以在主色的选择方面，选择政府部分常用的蓝色，严谨，冷静，由于用户整体年龄偏大，避免使用时间较长导致视觉疲劳，所以在主色掉色调降低了保护度和明度；同时辅助色用暖色去中和色调，根据不同产品的不同需求，匹配了辅助色、中性色的延伸，应用于操作状态、按钮色、可操作图标，可视化图标等。

3.2.2：按钮规范

按钮是后台设计中最重要的元素之一，它在用户和系统的交互中承担着非常重要的作用。后台中常见的按钮类型分为线性按钮、面状按钮、文字按钮、图标按钮、文字+图标按钮。规范中要写出按钮的样式包括宽高、圆角以及文字按钮的字数大小，边距等内容，同时标注好常见按钮的各种状态：默认状态、hover、按住/激活、禁用。

主按钮：最常使用的按钮类型，如无特殊要求均使用此类按 钮，用于导航栏，工具栏，弹窗确认等

辅助按钮：弱化操作权重，与主按钮在同一个操作区域出现，如弹窗取消确认，搜索和错置

次级按钮：不与主按钮在同一个操作区域出现。

3.2.3：文字规范

优先考虑使用系统默认字体，有条件可提供一套利于屏显的备用字体库。保持在不同平台及系统的显示下，字体始终保持良好的易读性和可读性。体现了友好、稳定和专业的特性。

3.2.4：icon规范

icon是将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度。

在图标设计过程中，不做没有意义的变形，要始终保持图形的高辨识度，避免失衡，始终保持平衡整洁，同时不要为了丰富图标的细节，而添加不必要的点、线、面，要始终保持图标干净简洁。

3.2.5：表格

常见表单是由多个列表项构成的。而每一个列表项都是由最基本的标签（标题）和输入框组成，常规的表单包括单选、多选、下拉框、输入框、时间选择、开关选择、图片附件上传、提交按钮等多种元素构成。

输入框的交互状态包括默认、输入结果、hover、提示错误、禁用。

输入框：字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式，比较适合PC端的使用；上下分布增加了表单的整体高度，视情况选择使用；由于平台的标题出现了2-6个字段五个情况，所以在左右的情况下很容易出现差次不齐。所以用了上下结构

选择器：选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形，复选框多为方形。

3.2.6：列表

列表是一种信息集合的方式，包含标题，内容，通常都是一行行(tr)展示，可承载文字、列表、图片、段落，操作icon等，设计时，将标题和内容做层级区分，选择背景，字号，字重的区分。标题选择重点的颜色，表格设计也尽量不使用线框，斑马栏隔一行给背景设置比主背景更淡的背景。跟易于阅读，加强视觉流的横向引导

排列：整体布局改为左对齐，修改因为人阅读的顺序为左到右，更易于阅读获取信息；整体视觉更整齐，严谨点；去掉多余的网格分割线，用斑马线去区别不同列数的内容，让界面更简洁，回归到内容本身

竖滚动条：列表表格内容超过一屏需要显示竖向滚动条时， 需要固定表头和页码。只需滚动表体内容部分

横滚动条：但列数太多出现横向滚动时候，展开和操作项固定在不变，横向滚动其他的内容

列表标准：每一行的高度可以设置一个值：40px，建议所有元件的高度、宽度、间距的数值参数都设置为偶数。：如果列表的数据很多，设计分页码控件，即设计固定高度的列表，一页最多展示10页条数据，然而有时候数据太少只有一两条，这个时候仍然要固定默认最多展示条数的高度

空数据：当数据为空时，可使用『- -』来表示暂无数据；对于数据为零的单元格，填上0；若有图片或者视频缩略图：大小设为50*50px。

3.2.7：弹窗

弹框又称对话框，是叠加在应用主窗口上的弹出式窗口，以对话的方式使用户参与进来。

功能弹窗：在当前页面进行操作时衍生出其他操作行为，采用弹窗形式进行操作，适用于简单与快速的操作。

反馈弹窗：主要用于用户新增或编辑内容弹出二级确认的弹框，，弹窗文字内容尽量不要太多，简洁易懂。

toast：建议停留时间3s，可根据文字字数调整停留时间，文字内容限制在30以内。

警告提示：用不同颜色和样式展示需要关注的信息。

3.2.8：筛选栏

筛选功能筛选功能并不是普通的单一功能项，它和导航一样是一个体系，都是可以帮助用户对功能信息进行快速的定位，缩短用户的查找时间，提升决策效率。通常它的组成元件有输入框，选择框，决策按钮等。

所有筛选条件平铺展开。上下布局

平铺展示的话用户浏览时非常清晰直观，能够第一时间看到所有内容，便于筛选，但是当筛选条件太多的时候，整个页面内容非常拥挤且冗余；

收起筛选

收起筛选的做法通常有默认显示使用频率较多的筛选条，同时可以增加页面的空间感，一页可以显示更多列表信息，缺点就是增加了操作步骤

四：总结 | SUMMARY

读文章听过商业运作的本质就一句话：更低的成本，更高的效率；设计规范的意义就在一下

1. 解决多人协作时控件混乱问题，设计效率大幅度增快，改稿率大幅度降低；

2. 解决开发效率、代码冗余问题，团队管理更系统。

3. 保持设计一致性，产品有统一调性；

当然定制规范组件要看团队的时间空间和人力成本，建议跟前端商量引入 antdesign 和 element 等开源的设计组件，会使得设计师以及前端事半功倍，设计师把更多的精力投入产品的迭代或其他地方

Powered by Froala Editor