前言 Introduction

•  文章结构：

上半部分，是我在建立UI设计规范时的一些思考过程与个人理解，如有什么不恰当的说法，希望大家留言告诉我，不胜感激。

下半部分是UI设计规范的展示（在整个平台稳定之前，这不算完整版，只是迭代的N+1版本…），规范包含了我使用的适配规则、交互效果、控件以及基本设计规则（颜色、文字、图标、布局、表单、弹窗）

•  整体反馈：

UI设计规范的使用，可以一定程度上地提升平台设计的统一性，提高设计师的工作效率和前端开发的复用率。（很多重复性的模块添加，甚至不需要设计师再出图，前端开发者可以直接根据规范增加新的模块，这样更有利于产品设计的延展性）  

阅读对象 Reading Object

•  研发人员：PC端、移动端 前端开发人员

•  设计团队：UI设计师、交互设计师、新入职设计师

设计目的 The aims

•  统一设计标准：

我们可以通过制定颜色、字体、间距等细节保证平台拥有统一的品牌特性和设计风格，帮助设计团队提高产品设计的统一规则，通过规范还可以让开发人员和产品经理快速了解平台的设计规则，提高了产品设计效率。

统一的设计能有效提高用户体验，用户会很自主的学习平台上的设计规则，例如：“删除按钮常常会采用红色，放置在右侧”，慢慢地用户都会形成一个视觉记忆，甚至肌肉记忆，统一的规则能减轻用户记忆负担，减少学习成本，更好的服务于产品和研发工作。

•  通用控件：

制作80%标准化设计控件（颜色规范、弹窗、翻页设计、日期选择控件等），沟通前端在开发时编写对应的公共类（宏，就跟我们Sketch工具里面的Symbol一样，开发建立了公共类之后迭代如需要换色调，可以直接修改一个公共类，就可以影响全部平台上使用到的控件部分），提高统一化，同时也方便以后迭代设计。

•  模块化开发：

管理系统的模块化设计，开发可直接参照UI设计规范自主研发与迭代小版本，成为有效的沟通工具，减少对接成本、降低开发成本和设计成本，加快产品开发迭代设计。

如下图是一个后台管理系统，采用了模块化设计，如果此时产品经理需要新增一个“病例管理”模块，并且是一个非常紧急的需求，那么，UI设计师只需要根据风格补充相应的icon。排版上，前端开发人员只需要根据UI规范定义的间距规则与表单规则直接去增加模块了。（当然这个适合简单业务的后台管理模块的增加…遇到复杂的逻辑，为了更好的用户体验，设计师只能老老实实地去加班做设计～）

内容 The contents

一、基础模块

首先，我们需要定下平台的基础模块，包括了平台的颜色、字体和字号规范，这些是平台最基本的参数。

如何制定？这个分三种情况：

1、根据行业的不同决定平台的整体基调；也就是说根据用户群体、用户使用场景以及定位来进行决定，例如电商类通常会选择暖色调的，财务管理类软件通常会选择冷色调的。

2、根据企业文化、平台形象统一规划；例如企业品牌形象已经采用了暖色，企业文化宣传想传递一种温暖的感觉，那么考虑到整体性，平台也应该使用统一色调。为了融入行业，我会将医疗类常用的绿色和蓝色作为辅助色去融合到规范里。

3、个性化设置；根据业务发展，很多平台为了满足用户个性化需求，会设计多套颜色搭配。这时候，我们仍然需要注意整体颜色的协调，避免太脱离品牌色，最好控制在3套左右避免造成视觉混乱、带来不好的体验。

• 颜色说明

1、黑白灰

我们在分配页面颜色时，黑白灰通常不算在页面的颜色，但是我觉得黑白灰的细节安排也可以体现出设计师的用心。

黑色：在设计页面时，我通常不会使用#000000，纯黑色，我简单粗暴的认为，因为纯黑与白色形成的对比太强烈，如果长时间阅读纯黑色字体，用户很容易产生视觉疲劳，尤其现在电子媒介都可以很清晰的呈现颜色，所以我们需要使用调整过后的黑色代替纯黑。（不过，需要印刷的设计搞会需要使用纯黑色，因为，打印在材料上的颜色，都会或多或少的失真。）

品牌灰色：增加品牌灰，用于中和颜色，作为点击前后效果时，可以让你的设计视觉上更平衡和舒服。（个人建议）

分割线的灰色：尽量选择更浅的灰色，用明确的间隔空白去划分区域，如果一眼看去页面上都是线，真的非常干扰视觉。

2、主色和辅助色

随着扁平化的升级，渐变的运用在界面设计中越来越普遍，能够使整个平台的颜色不会太死板，也更透气（emmmmm…我这个形容可能比较抽象…）所以我的规范里面一定会加上橙色的渐变。

但是如果全部都是渐变，作为一个后台管理系统，用户更注重操作性。花哨的大片渐变会让整个页面充满视觉负担，为了减负，为了使页面的视觉达到更好的平衡，我会增加一个饱和度更高的一个橙色、和一个明度低的橙色。分别用在字体颜色上和操作按钮上。

注意：控制辅助色的数量，为了不增加用户记忆负担，我尽量减少辅助色的数量，万不得己时才会考虑添加辅助色。同时，新入坑的同学们还需要注意，根据颜色的性格、用户使用习惯，去选择按钮的颜色使用，如：红色有警觉意义，常用语删除、关闭。

ps.再次提醒别忘了与前端沟通，创建公共类，对颜色进行命名，方便迭代时统一调整颜色。

• 字体字号说明

字体: 为了保证用户的阅读体验，需要保证字体的统一性，注意：使用微软雅黑的设计们，记得提醒企业购买字体版权。

字号：根据使用场景划分字号，一般通用的正文都需要14号字体，（我按照sketch 的1x的参数标注的）

字间距：可以跟我一样使用office软件常用的1倍间距、1.5倍间距。当然也可以根据不同场景去制定最舒服的字间距行间距。

二、图标按钮模块

图标按钮尺寸，使用双数制作。完成后导出SVG文件上传到阿里巴巴的字体图标库。（http://www.iconfont.cn）

前端可以直接通过网站调用图标，设计师可以避免反复切图、更全的整理你的图标库、调整大小也不会失真。缺省页对于平台来说也是很重要的一块，我现在暂时没有分享出来。

需要点击的图标和按钮上，设计师需要统一规范至少三种状态：点击前、点击后、不可点击状态。（个人决定点击后和悬停效果可以统一，用户往往更倾向于点击一下就立刻得到页面反馈结果，而不是一直看到一个点击按钮的反馈）

注：按钮需要统一圆角，规范尺寸、同时考虑到按钮文字多的情况（一般在2-6个之间，但是医疗行业，说不准…），我在文字多的时候规范的是固定的文字到边的间距。

三、平台组件

1、布局、适配规范

设计之初，我们只需要基于一个尺寸去做设计，为了保证其他分辨率的用户也可以正常使用，我们需要考虑多屏的适配问题。目前主流分辨率主要为 1920*1080、1440*900 和 1366*768，因为我们做的是医疗类平台，我们的用户面向各大医院，现实情况是使用1280*720的显示设备仍占很大比例。所以我们更多的考虑小屏幕用户，基于1440*900去做的设计，将中间的内容控制在一定比例做适配。

我的具体方案：

界面做最小适配：屏幕宽度

屏幕宽度>=1200PX两边适配为屏幕80%（除banner的适配），这就保证了常规的大屏幕用户，不会也只看到1200的内容，这也能通过比例去控制整体的适配。

当然接下来会涉及到更大的屏幕，现在非常推崇的可视化大屏设计和大数据分析则需要根据特别的要求重新设计了。（比较大屏客户要求是酷炫、酷炫、再酷炫一点…而且大片暖色系在超大屏上显示应该会很辣眼睛…）

2、表单规范

•  输入框

建立输入框交互反馈：未选中状态、选中状态、输入状态，并应用在单选、多选、下拉选、输入框、时间选择等控件中。文字与边框需要水平居中（前端叫垂直居中…刚好相反），标题与边框之间的间距要保证关联性。（不同控件间的分栏间距要始终大于控件内文字与边框之间的间隔）

对齐方式：因为行业特殊，常常会涉及到很多特殊专有名称，为了视觉上更整体，阅读更顺畅，我采用的是将冒号与前面的文字分开， 然后以“：”为基准对齐，字数也做了一定的限制、6个字进行换行。

•  列表适配

列表的适配：需要根据具体内容的重要性和常规情况下出现的字数去规范，设计安全距离，超出使用“...”代替，鼠标悬停展示全部，根据屏幕全局规则适配。（为了保证阅读，每个列表的内容还是需要做字数限制的）

特殊适配：在与产品需求沟通之后列表信息无法删减的情况下，为了保证1366分辨率的用户使用，操作按钮尺寸做了特别的适配，让列表所有内容整屏刚好放下，用户不需要每次拖动再点击。

•  列表参数

内容：为了清晰呈现表格内容，无数据时用“-”来填充，数据为零时用“0”填充，避免出现空白，误导用户还没加载出来。也可以更好的对齐内容。

视觉：列表标题的颜色与文字要强调，在列表很长的情况下，鼠标滚动需要固定标题列。列表内容颜色需采用“斑马线”分层展示，用以增强视觉引导。鼠标悬停每一行需要做交互反馈，提示当前操作列。

3、弹窗规范

弹窗规范分为模态弹窗和非模态弹窗两种，两者的区别在于是否打断用户操作流程，只能对当前弹窗操作。

•  模态弹窗

我司的业务流程，会需要用户在弹窗上进行比较重要的填写信息工作，所以常常会听到用户嫌我们的弹窗显示内容太少，操作性不强，所以我们需要做最大尺寸的适配和显示，在合适的范围内，做最大容量的弹窗。（emmm…记得要根据用户的使用场景来做合理的适配规则）

我的适配方案：最大宽度为 1176PX、最大高度为屏幕的80%。当然欢迎