超全面！大厂设计规范详解！|运营学社

1.1 界说

作为一个B端产品，为了应对公司快速迭代开拓市场和一部分购买者的定制化需求，与此一起还要确保产品间的用户体会共同性，近年来规划标准这一处理计划不断升温，如Salesforce，antdesign、等纷繁推出了自己的规划标准。那么究竟什么是规划标准呢？和规划言语、规划准则、组件库等有什么联系呢？

我以为的规划标准是以下的界说：

规划标准由规划准则、规划言语和组件库构成，在规划准则的辅导下运用规划言语和组件库创立体会共同的用户界面。

规划准则：即整个规划标准所要遵从的大局规矩，为规划供给方向辅导。以下给出几个比如：

规划言语：包括颜色，文字、图标等

组件库：分为根底组件（按钮，下拉列表等）及事务组件（产品模块）。

在做规划言语和组件库时，有一个根本准则是，少便是多(less is more)，竭尽或许少的款式来完结规划方针，例如按钮供给三种尺度即可，在习惯不同场景需求的一起确保体会的共同性；另一方面，坚持抑制的规划标准能够进一步削减规划师的决议计划时刻，进步规划功率。

1.2 理论根底-原子规划

1.2.1 什么是原子规划

原子规划是构建规划标准的中心辅导理论。2013年，Brad从化学中得到了构思，创立了原子规划理论。在化学中，一切的物体都是由原子构成，原子构成分子，从而构成国际万物。对应到界面中，界面也是如此，一切的元素都是由文字、颜色等最根本的元素构成的。这些根本元素构成组件，组件构成页面。

原子规划概念的提出使得规划标准演变成为了一种更为高效、科学的规划标准，极大的改进了规划师与前端工程师的作业体会。

1.2.2 原子规划体系的五个层次

原子规划包括五个一起作业的阶段，以更稳重和更具层次的办法创立界面规划标准。

原子:原子是构成界面的最小元素，例如颜色、文本、图标、线条。它们在在界面这个维度上不能再被细分。例如图标，本身是能够继续细分的，可是关于界面而言，图标细分得到的元素是没有任何含义的。

分子:原子依照必定的规矩组合就构成了分子，它们具有共同的功用，例如下拉列表，步进器等。

安排:在界面中安排表现为由分子原子组成的模块，例如数据概览的卡片。

模板:在界面中，模板的表现是原型图，是页面的根本形状，能够让咱们快速试错，树立出一个功用杰出的全体。

页面:在模板的根底大将占位符更换为实在内容，并进行视觉优化即为页面。

1.3 为什么需求规划标准

1.3.1 软件危机

在叙述规划标准之前，我想先叙述一个互联网史上的实在事情——软件危机。

19世纪80年代，软件的杂乱度进一步进步，大规模软件乃至会由由数百万行代码组成，有数以百计的程序员参加其间，笼统言语解放了程序员的生产力和想象力，人们能够像写文学小说相同随意发挥地去写代码。摆在面前的问题是怎么高效且可靠地保护与迭代如此巨大的软件。之后C++、Java等咱们熟知的面向目标的编程言语诞生了。

面向目标这种形式有一个很重要的特征是封装。这就比如当你在写王者荣耀的代码时，小兵是呈现频率较高的模块，你能够提早把王者荣耀里的一个小兵封装成一个代码块，当你需求用到它时，不必从头一行一行写，只需求把它全体调用即可。

纵观软件开展史，20世纪60年代的第一次软件危机发明了“模块”概念；20世纪80年代第2次软件危机引出了“面向目标编程”，发明了“目标”概念；模块与目标本质上都是对软件进行拆分与封装，只是目标拆分的粒度更大，维度更高。这点与原子规划的原理不约而同，从颜色文字等根底元素，到按钮、挑选器等根底组件、再到典型模块，也是对大型软件的规划元素不同粒度的拆分与封装。

1.3.2 规划标准的优势

规划层面：处理用户体会共同性，削减规划本钱，进步规划功率，使得规划师能够快速接受新需求。沉积规划财物，使得规划愈加继续地输出价值，削减一次性规划，一起使规划师从款式中解放出来，站在更高的层面上来考虑事务与体会。

开发层面：与规划标准同步构成研制财物，防止重复造轮子，确保代码质量，下降保护和拓宽的本钱。

测验层面：防止重复的无含义走查。之前遇到过一个深色形式的需求，尽管只换了颜色，可是测验依然把一切组件都测验了一遍，加上重复的规划、开发量，导致本来一个很简略的需求，竟然花费了12人天的作业量。

产品层面：进步产品迭代与优化功率，下降试错本钱。

协作层面：下降不同规划师之间以及规划师与开发工程师之间的交流本钱。

1.4 为什么要自己做规划标准

这个时分能够会有小伙伴问，现在市道上有这么多的第三方规划标准，例如antdesign，element，有必要自己重复造轮子做一遍吗？答案对错常有必要。原因如下：

B端本身的事务性决议了市场上没有全能的规划标准，那些规划标准的组件并不能100%满意咱们产品的需求。别的一方面运用封装好的第三方规划标准，在此根底上进行修正，功率很低，适配的杂乱度和从头开发相差无几。

咱们都在运用第三方规划标准时，产品的同质化便不行防止。为了防止这种状况发生，咱们有必要要从规划言语开端，规划自己的标准。

那些大厂的老练的组件库该怎么用呢？我以为应该把它当成一个字典，有不会的当地，能够去参阅人家的老练的处理计划。

1.5 规划标准的落地

1.5.1 落不了地的原因

1.规划层面：

a. 组件扩展性弱：有的规划师做出来的组件尽管看着很好，可是实际上运用时，适配功率很低，用组件去扩展和从头做的功率差不多。

b. 脱离事务：大部分时分规划师手中都有使命，所以这个使命就落在了实习生的肩上，可是实习生不了解事务，做出来的是海市蜃楼，抛开事务谈规划标准的都是耍流氓。

c. 短少开发思想：规划师不了解开发的完结办法，或许会做出来开发较难完结的组件。

2.开发层面

短少开发资源：规划标准的作用是巨大而缓慢的，不能即时产出很大的价值，别的一方面，规划标准的落地会添加开发工程师许多的作业量，且无法量化收益。这也导致许多时分无法争取到满足的开发资源来做这件事，导致达不到预期的作用。

1.5.2 怎么落地

说完了落不了地的原因，那么怎么落地呢？我以为要从以下四个方面来推动：

写一份规划标准的价值的提案给领导，争取到满足的开发资源。

学习灵敏开发的思想，小步迭代快速推动，将规划标准的掩盖放在每次迭代过程中。

把规划标准的开发交给熟悉事务的规划师来做，经过事务提炼复用率高的典型元素，优先开发，最大化投入产出比。

规划师在做规划标准时，要不断与开发工程师交流，确保规划标准的复原度。

B端UI界面的视觉规划是一种倾向与排版的规划类型，而其间关于文字的运用更是重中之重。文字包括字体，字重，字号，行高、颜色五个特点。一般状况下，字体选用体系自带的字体（例如苹方、微软雅黑、思源黑体），别的关于B端来说，一般都会有较为重要的数据，这时能够选用特别字体给与必定的着重，最常用的便是DINpro。还有一点要注意，咱们运用的字体一般是依据用户有什么字体，而因为win和Mac默许字体不同，所以要提早预留好字体风格类似的多种字体。而且能够设置多个字体，经过逗号离隔，假如第一个字体用户没有，那么会主动替换成下一个字体。

字号上，精简为主，能够用字重和颜色来表现层级，就不要用字号来表现。淘宝在2019年的改版中便晋级了这一点。将本来的11个字体层级缩减至了7个。

行高上，咱们现在选用的计划是行高是字体行高为150%字号，取4的倍数。

可是现在会遇到额定距离的问题。

前段时刻谷歌发布了新的CSS更新“”leading trim，或许会是之后的行高处理计划。感爱好的小伙伴能够点击链接了解一下（https://blog.csdn.net/weixin_39781930/article/details/111576051）

字重上，以开发的视角来看的话，包括从100-900的九个字重。一般咱们只选用regular、medium、semibold三个字重。

3.1 根本介绍

3.1.1 颜色的作用

B端产品中，颜色不只是用来传达品牌调性，更多的是用来传达以下信息：

反应信息经过不同的颜色给予信息反应，例如赤色代表过错信息，绿色代表成功信息。

杰出层级经过颜色能够对内容信息进行分层级展现，进步用户读取信息的功率。

标明状况经过颜色来差异某个事物处于何种状况。

3.1.2 组成

在实在的规划场景中，对颜色的杂乱度要求对错常高的。颜色标准应该根本掩盖一套产品对用色的一切场景。

一套完好的颜色标准，包括品牌主色、语义色、中性色。

品牌主色：一般，一套产品只需一个品牌主色，是界面中呈现最多的颜色，在需求用色着重而且没有其他要求时，一般都会挑选主色，例如tab的选中态，图表的颜色等。

语义色：即功用色，凭借人们的对颜色的心思模型，协助人高效取得信息。例如绿色代表通行、成功，赤色代表制止、过错，橙色代表正告、

中性色：除文字外，中性色还被许多运用在分割线、边框、布景等场景中。

3.1.3 颜色体系的准则

理性的

咱们在选色时，尽或许防止个人的规划风格，削减配色的主观性，理性有逻辑地选色。

可扩展的

运用这种选色办法能够扩展生成更多的颜色，以习惯不同的改动。

调和的

颜色标准中的颜色相互调配运用时，应该是调和的。

3.2 怎么制造颜色标准

在开端制造颜色标准之前，先介绍一下HCL颜色空间。

HCL (Hue-Chroma-Luminance) 与 RGB、HSB相同同属颜色空间的一种，因为最早由国际照明协会 CIE 提出，又被称作 CIELch。

现在咱们常用的颜色数值可视化的颜色空间是HSB，规划师能够经过H(色相)，S（饱和度），B（明度）三个数值来量化颜色，完结理性配色。可是传统的HSB颜色空间的缺陷是，明度数值是依据计算机元件而言，而非人眼。别的，计算机的明度与人眼感觉到的明度并非线性匹配，这就导致在不同颜色中，即便色相相同，咱们感觉到的明度（即感官明度）也是不共同的。而HCL就防止了这个缺陷，在HCL中，只需两种颜色的L相同，感官明度便是相同的，HCL能够完美的量化咱们对颜色明度的感觉。可是现在干流的规划软件根本上不支撑HCL颜色空间配色，因而要凭借插件或许网站。这儿给咱们引荐Figma的一个插件：HCL color。不必figma的小伙伴能够去这个网站http://tristen.ca/hcl-picker/#/hcl/12/1.03/000000/F69877。

3.3 落地

落地分为两个方面：规划方面和开发方面。

3.3.1 规划方面

将颜色生成款式库，并规矩规划搭档不能够手动调色，只能够从规划标准中取色。

3.3.2 开发方面

在前期与开发搭档交流，将每个颜色界说为一个变量，在代码中不运用具体的色值，而是例如red-100的的色值，这样做的长处是，

在需求替换某个色值时，只需求在底层对变量改动即可完结大局的更改，进步了许多功率。

开发搭档彻底从库中取色，确保了颜色的精确性，进步了规划稿的落地率。

实际日子中的物体不行彻底堆叠，当光打过来时，每个物体都会发生暗影。这是咱们了解物体的层叠联系的重要依据。依据实际中的这一行为，咱们把暗影标准挪到屏幕国际中，使得用户更简略了解咱们的体系。暗影标准供给给了咱们另一个表达元素差异的维度，不同的暗影清楚地传达了不同的交互状况。某一目标在屏幕中的高度视觉表现为其暗影，暗影越大，高度越高。可是日子中实在的暗影扑朔迷离，咱们不或许也没必要彻底复刻，咱们只需求能够表达出元素层级即可。与按钮相同，咱们将暗影分为三个等级，分别为，S、M、L。

S：杰出组件悬停作用，标明可供性。关于这个数据概览卡片来说，鼠标移入移出时暗影的显现与躲藏供给了一个交互或许性，标明它是能够点击交互的。

M：给下拉列表，气泡提示等运用的暗影。因为这些元素是与由底层元素翻开而来的，但又不归于底层元素，所以将中等层级的暗影给了这些元素。

L：模态组件暗影。例如弹窗。当弹窗呈现时，弹窗坐落必定的最顶层，所以暗影最大。

圆角是用一段与图形两头相切的圆弧替换本来的直角，圆角的巨细用圆弧的半径R标明。在界面中运用圆角首要有以下两个长处：

亲和感。咱们倾向于“防止尖利的边际，因为在天然界中它们或许会构成威胁”。运用圆角矩形能给咱们带来亲和感，圆角越大，亲和感越高。

辨识度。相关于没有圆角，人能够更快的辨识圆角矩形。

关于组件库来说，咱们能够把组件比喻为积木，而布局则是把积木树立为各种不同制品的图纸。

6.1 盒子模型

6.1.1 规划师为什么需求了解盒子模型

在介绍布局之前，先介绍一下盒子模型。尽管盒子模型是前端开发中的一个概念，可是了解一些前端常识对咱们规划的落地以及与前端的交流上大有裨益。咱们能够带着盒子模型的思想去做规划，这样开发人员拿到规划稿后，更简略了解咱们的布局逻辑，下降交流本钱，进步落地率。

6.1.2盒子模型是什么

盒子（box）模型是开发中经常用到的CSS模型，咱们日常所见到的界面都是由一个一个的盒子拼接而成的。翻开安卓手机的开发者选项中的显现布局鸿沟，便能够看到手机上的各个盒子的摆放；在电脑阅览器翻开查看视图，也能够看到每个元素对应的盒子。咱们能够了解为开发搭档都是先画一个一个的盒子，然后在盒子里填充，也与咱们供给的矩形切图相对应。而且盒子间存在嵌套状况，几个小盒子能够作为一个大盒子的内容。

以咱们的日子来举例的话，例如咱们去买月饼，大盒子里装了四个小盒子，每个小盒子里是一个月饼。

6.1.3 规划师怎么运用盒子模型

了解了盒子模型后，咱们在规划时，该怎么运用呢？

做规划时，对任何元素都尽量用一个矩形给他封装，这姿态前端在定位元素和承认距离时可完美完结规划稿的内容。

而前段时刻figma更新的auto layout 功用与盒子模型根本完美对应。咱们在规划时能够运用这个让开发更简略get咱们的规划稿，削减交流时刻。

以标签页为例，咱们规划时，不只是画个横线与文字就行了，这样开发无法了解到规划稿，后边还会继续找咱们问询触控热区。

6.2 导航

导航将网站的信息架构分组归类展现给用户，便利用户抵达想去的界面。

6.2.1 顶部导航

长处:

契合人眼阅览网页的视觉动线，给用户供给更沉溺式的阅览体会。

缺陷:

扩展性差:因为顶部空间有限，无法承载太多的菜单项，别的因为水平菜单的特性决议了无法承载太多的层级，当扩展至三个或四个层级时，顶部导航的易用性极差。

通用性较差:相同受空间的约束，菜单项字数被严厉约束。

适用产品：

全体结构无论是广度仍是深度均较简略且之后不会扩展许多功用的产品。

6.2.2 侧边导航

长处:

扩展性好:侧边导航是以树形控件的办法来标明的，相关于顶部导航，无论是数量和层级，扩展性均较好。

便利寻觅:因为纵向阅览无需把每个单个菜单完好阅览，相对水平菜单，定位更快。

缺陷:

沉溺感低:因为用户在阅览内容的过程中，不行防止会被左边常驻的导航栏打断视野流,阅览沉溺感较低。

适用产品：

现在结构不对错常杂乱但之后会迭代添加许多功用的产品。

6.2.3 混合导航

长处:

扩展性好:因为添加了-个顶部的一级菜单，扩展性是三者中最好的。

缺陷:

交互途径长:除了和侧边导航-样存在沉溺感低的问题，因为每个菜单项都需求点击顶部和侧边两次,操作功率低。

占用空间大:在B端产品中，界面空间寸土寸金，混合导航常驻的两个导航占用了较多的空间。

适用产品：

现在结构现已十分杂乱的巨大产品。

6.3 栅格

6.3.1 栅格介绍

6.3.1.1 来历

栅格体系本来来历于平面规划，早在20世纪初，德国、荷兰、瑞士等国的平面规划师们发现经过坚持视觉次序,从而使版面能愈加明晰有效地传递信息，二战后这种理念在瑞士得到了杰出的开展。有爱好的小伙伴能够去看下由瑞士规划师大师Josef Miller—Brockmann (约瑟夫.米勒-布罗克曼)所著的《平面规划中的网格体系》一书。

6.3.1.2 优势

高效：将布局标准化，可削减规划决议计划的时刻，让规划师专心于内容.上的规划呈现。

呼应式布局:因为web端尺度多样，运用栅格体系能够做到自习惯布局(在面临多个分辨率的体系时，无需规划多套计划，仅需规划一套来适配即可)

漂亮:进步内容的规矩性，让规划更有次序和节奏感，赋予界面数学逻辑美感，进步用户的阅览和阅览功率,为用户供给更好的体会。

协作:因为栅格体系的可复用性，多个规划师协作时，能够共用-套栅格体系，进步全体布局的统-性。一起也防止了规划与开发的重复承认的状况，使得部分内部与部分间交流更顺利。

6.3.3 组成与原理

栅格体系包括页边距，列和水槽。

页边距:指内容区与页面的边距。

列和槽:列是承载内容的容器，水槽是两个列(即内容)之间的距离。在前端视角中列宽是依据百分比而不是固定值界说的。一般说的栅格数就指的列数。水槽越宽，页面留白越多，呼吸感越强。

自习惯原理:在网页运用的规划中较为常见的一种呼应办法，当屏幕宽度改动时，页边距和水槽宽不变，列宽自习惯。

计算公式:以24栅格(即有24列)为例，页面自习惯部分总宽度: 24*列宽 +23*水槽宽+2*页边距。

6.4 距离

在规划距离体系中，咱们一般会依据8点网格体系和亲密性原理规矩几个典型值。例如4,8,(12,)16,24,32……。遇到距离时在这些值中选取适宜的即可。别的一般咱们会使得大模块的纵向距离与栅格体系中的水槽巨细相同。

7.1 图标重要性

当一个界面彻底由文本构成时，用户被逼阅览每个文字来找到自己想要的信息。而引进图标后，下降了用户的认知负荷，协助用户更快导航，进步用户运用产品的功率。别的一方面、规划精美风格共同的图标进步界面的漂亮度的一起，也为用户带来了连接共同的运用体会。

7.2图标标准的内容

尺度：因为不同形状(三角形，圆形、长方形、正方形)具有不同的视觉巨细，只是标准图标的巨细是不行的，一般咱们会规划一套图标keyline，来确保不同的图标具有相同的视觉巨细。

填充/描边：一般的体系功用图标选用描边。作业台的常用功用进口一般选用带布景的填充图标，原因是在空间有限的的区域，太多形状会显得凌乱，另一方面面型图标的视觉面积较大，短时刻内愈加简略辨认。

除此之外，还包括圆角、端点、线宽、歪斜视点等其他标准。

7.3 落地

在产品中，图标一般有多种尺度，咱们一般会为每个尺度的图标各创立一个frame来进行办理，其间，咱们会把同一个图标的填充版和描边版创立为一个组件集，这样在调用时能够直接操控图标的填充和描边，在做有选中态和非选中态的组件时尤为便利。

别的，在命名上，咱们会用图标的内容为它命名而非表意，例如一个灯泡的图标，咱们会直接命名为灯泡而非构思。

7.4 图标库引荐

在这儿给咱们引荐几个我常用的图标库，在来不及画图标时，能够先用这些敏捷树立起一个图标组件库。之后有时刻了再渐渐更新为自己的图标。

Iconfont：国内功用很强壮且图标内容很丰厚的矢量图标库,供给矢量图标下载、在线存储、格局转化等功用。特点是图标十分丰厚。

Remixicon：Remix Icon 是一套面向规划师和开发者的开源图标库。质量很高，风格中性大气，因而适用于许多风格的项目，分为“线性图标”和“面型图标”两种风格。比较于 Material Icons，RemixIcon 看起来风格会更共同、精约且精美健康一些。

IconPark：这是字节CUX规划团队出品和保护的开源图标库，现在已对外开放运用，特点是图标巨细，线宽等多个特点均可设置，自由度较高。

8.1 案牍是什么

案牍是咱们的产品与用户交流的最根底最简略的交流东西。案牍存在于产品的各个当地，例如按钮案牍告知用户按钮的作用，轻提示案牍告知用户反应成果。关于新用户来说，案牍必定比图标易了解，别的一方面，案牍更不简略发生歧义，例如一个图标能够会有多种意思，而案牍相对更精确。

8.2 案牍标准的重要性

伴跟着B端的事务功用的快速迭代，因为规划师、产品司理的水平、案牍风格、对案牍的注重程度不同，导致体系内部案牍积累了许多问题，最显着的问题，同一场景案牍不共同，会给用户带来体会的分裂感，添加用户运用产品的认知本钱。

而经过构建案牍标准，能够标准案牍的运用和编写，进步案牍的质量，给用户带来连接共同的运用体会。

8.3 案牍编撰的准则

这儿给咱们介绍一些产品案牍通用的一些准则，包括，精确，简练、用户视角

8.3.1 精确准则

8.3.2 简练准则

8.3.3 用户视角准则

8.4 落地

一般状况下，案牍没有专门的人来担任，国外或许会有“UX Writer” 这样的专门职位来担任，在国内一般会交给体会规划师来担任。

案牍标准的落地分为四步：

1. 遍历页面，列出一切的案牍

2. 收拾相同或类似场景的案牍，将案牍归类收拾

3. 依据实际状况拟定产品案牍的准则，并编撰一部分典型场景的案牍。

4. 输出文档，包括案牍编撰准则及典型场景的案牍。

9.1 组件库是什么

组件库相当于乐高的一个个积木，经过组件的拼搭能够敏捷树立出一个页面。一般咱们将组件库分为根底组件和事务组件两大类，前者是体系通用组件（图标/按钮/输入框等），后者是由事务决议的相对更杂乱的组件模块。而关于B端产品和C端产品，二者的组件库又有少许差异。C端的组件库更寻求极致的交互和视觉体会，因而需求考虑视觉、功能、完结、兼容性，另一方面，C端会依据活动、节日切换不同的主题，也要考虑组件视觉上的个性化扩展。关于B端而言，组件库更垂青可复用性和稳定性，确保能够支撑事务快速迭代。别的B端会涉及到各式各样的数据录入与展现，因而相对更高的要求是大而全，掩盖面广。

9.2 怎么做组件库

9.2.1 承认组件库的内容

新产品

关于新产品来说，事务体量较小，较难抽取共性，组件也不全面，因而较好的办法是参阅大厂的组件库承认要做哪些组件，它们的相对老练，参阅价值较高。

老练产品

关于现已老练的产品来说，咱们能够直接遍历页面，穷举出一切用到的组件，除根底组件外，提炼出复用率高的事务组件进行结构化和组件拟定。

9.2.2 树立每个组件

以正告提示（Alert）为例，演示单个组件的树立办法。

1. 界说组件

依据事务界说正告提示的运用场景，正告提示用于重要信息的提示，选用非浮层的办法展现在页面顶部，被迫呈现，且不会主动封闭。

2. 拆分组件

这一步是将组件拆分为元件。对正告组件进行拆分后得到如下：