超全面！大厂UI设计规范详解！ 保险金信托方案设计原则是什么

编辑导语：建立合适的UI设计规范，对提升用户体验有很大帮助。这篇文章讲述了设计规范的定义和来由，并说明了在文字、色彩、阴影、圆角、布局、栅格、图标、文案和组件等方面的详细设计规范，推荐对UI设计感兴趣的同学阅读。

一、设计规范综述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年代第二次软件危机引出了“面向对象编程”，创造了“对象”概念。

模块与对象本质上都是对软件进行拆分与封装，只是对象拆分的粒度更大，维度更高。这点与原子设计的原理不谋而合，从色彩文字等基础元素，到按钮、选择器等基础组件、再到典型模块，也是对大型软件的设计元素不同粒度的拆分与封装。

1.3.2 设计规范的优势

设计层面：解决用户体验一致性，减少设计成本，提高设计效率，使得设计师可以快速承接新需求。沉淀设计资产，使得设计更加持续地输出价值，减少一次性设计，同时使设计师从样式中解放出来，站在更高的层面上来思考业务与体验。

开发层面：与设计规范同步形成研发资产，避免重复造轮子，保证代码质量，降低维护和拓展的成本。

测试层面：避免重复的无意义走查。之前遇到过一个深色模式的需求，尽管只换了颜色，但是测试仍然把所有组件都测试了一遍，加上重复的设计、开发量，导致原本一个很简单的需求，居然花费了12人天的工作量。

产品层面：提高产品迭代与优化效率，降低试错成本。

协作层面：降低不同设计师之间以及设计师与开发工程师之间的沟通成本。

1.4 为什么要自己做设计规范

这个时候可以会有小伙伴问，目前市面上有这么多的第三方设计规范，例如antdesign，element，有必要自己重复造轮子做一遍吗？答案是非常有必要。原因如下：

第一，B端自身的业务性决定了市场上没有万能的设计规范，那些设计规范的组件并不能100%满足我们产品的需求。另外一方面使用封装好的第三方设计规范，在此基础上进行修改，效率很低，适配的复杂度和重新开发相差无几。

第二，大家都在使用第三方设计规范时，产品的同质化便不可避免。为了避免这种情况发生，我们必须要从设计语言开始，设计自己的规范。

那些大厂的成熟的组件库该如何用呢？我认为应该把它当成一个字典，有不会的地方，可以去参考人家的成熟的解决方案。

1.5 设计规范的落地

1.5.1 落不了地的原因

1.设计层面：

组件扩展性弱：有的设计师做出来的组件虽然看着很好，但是实际上使用时，适配效率很低，用组件去扩展和重新做的效率差不多。脱离业务：大部分时候设计师手中都有任务，于是这个任务就落在了实习生的肩上，但是实习生不了解业务，做出来的是空中楼阁，抛开业务谈设计规范的都是耍流氓。缺乏开发思维：设计师不了解开发的实现方式，可能会做出来开发较难实现的组件。

2.开发层面

缺少开发资源：设计规范的作用是巨大而缓慢的，不能即时产出很大的价值。

另外一方面，设计规范的落地会增加开发工程师很多的工作量，且无法量化收益。这也导致很多时候无法争取到足够的开发资源来做这件事，导致达不到预期的效果。

1.5.2 如何落地

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

写一份设计规范的价值的提案给领导，争取到足够的开发资源。借鉴敏捷开发的思想，小步迭代快速推进，将设计规范的覆盖放在每次迭代过程中。把设计规范的开发交给熟悉业务的设计师来做，通过业务提炼复用率高的典型元素，优先开发，最大化投入产出比。设计师在做设计规范时，要不断与开发工程师沟通，保证设计规范的还原度。二、文字规范

B端UI界面的视觉设计是一种偏向于排版的设计类型，而其中对于文字的使用更是重中之重。

文字包括字体，字重，字号，行高、颜色五个属性。一般情况下，字体采用系统自带的字体（例如苹方、微软雅黑、思源黑体），另外对于B端来说，一般都会有较为重要的数据，这时可以采用特殊字体给与一定的强调，最常用的便是DINpro。

还有一点要注意，我们使用的字体一般是基于用户有什么字体，而由于win和Mac默认字体不同，所以要提前预留好字体风格类似的多种字体。并且可以设置多个字体，通过逗号隔开，如果第一个字体用户没有，那么会自动替换成下一个字体。

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

行高上，我们目前采用的方案是行高是字体行高为150%字号，取4的倍数。

但是目前会遇到额外间距的问题。

前段时间谷歌发布了新的CSS更新“leading trim”，可能会是之后的行高解决方案。感兴趣的小伙伴可以点击