01  前言

近年随着数字基建的兴起，B 端产品的数量越来越多，业务越来越复杂，设计师面临的问题难度也越来越高。因此，在设计的过程中，我们希望能沉淀有用的设计方法和设计模式，建立 B 端产品的设计语言，来增强产品体验的一致性，为产品注入品牌调性，让设计更好的为产品的整体体验服务。

02 什么是设计语言

什么是设计语言，为什么想要建立 B 端产品的设计语言，这还要从 B 端产品的特点开始说起。

B 即 Business，B 端产品，通常是指提供给企业或商家使用的系统或平台，面向企业用户，解决企业的业务需求，用来维持企业日常的商业经营活动，例如企业内部 CRM 系统、ERP 管理系统、OA 办公自动化、CMS 内容管理以及 SAAS 产品等。

与之相对应的是 C 端产品，主要面向的是终端消费群体，对于使用者而言主要是用来满足自己的日常生活实践需求，例如娱乐、消费、学习、出行等等，类似产品如 QQ、微信、支付宝、抖音、淘宝等。这类产品追求转化、增长，对用户体验的要求较高。相对于 C 端产品，B 端产品普遍业务复杂度更高、对稳定性要求高、追求高效率，更强调信息的准确性、流程的完整性和操作的便捷性，总体上对视觉美观度没有过高的要求。

在界面设计方面，B 端产品普遍页面数量较多，其中有很多相似的管理页面。通过对 BSS 某后台管理门户页面类型的占比分析，可以计算出，大约 85%的页面是近似的，仅有 15%的页面需要进行特殊的设计。找出 85%的页面共同点并统一起来不是一件容易的事，但从最终的结果来看，通过制定设计规范或设计语言来减少设计工作量、维持产品的体验对于 B 端产品而言更加有意义。

03 设计语言与规范的区别

设计语言和设计规范最终都会以一种设计文档的形式呈现，表达的内容通常涵盖视觉、交互等方面，且都具有一定约束力，因此设计语言与设计规范之间并没有严格的分界线，但在深入了解后会发现两者的区别。

下图提取自国内 BSS 在电信、联通和移动项目的设计规范，从图片可以看出，该规范明确标明了页面的布局、颜色、尺寸、间距等具体数值，这样做的目的就是便于生产出统一标准规格的页面。而设计语言通常不会直接指定某一个参数值，更多强调的是品牌特征的体现和设计原则、设计方法的运用，这使得设计语言通常不会直接限制视觉风格。

以 BMW 汽车的设计为例，双肾形前格栅是 BMW 汽车标志性的品牌特征，所有型号的 BMW 汽车都执行着相同的设计原则，例如格栅的位置必须位于前部车标正下方，必须分成左右两个部分，且左右必须对称，形状整体水平居中等，这已经成为 BMW 设计语言的一部分。与此同时，我们也不难发现，每一款 BMW 车型的前格栅外观都不一样，因为它们同时也遵循着各自车型的设计规范。

通过以上对比就能得出，设计规范的主要作用是描述参数并生产出统一规格的物品，而设计语言更强调设计的品牌特征，在具有一定约束作用的同时，更注重自身与其它产品的差异，这种差异可能很大很明显，也可能藏于细节之中。

04 设计语言的构成

对于设计语言的理解，重点应该落在“语言”二字。如同我们人类沟通时使用的自然语言，设计语言也具有类似的特性，下面我会对这些概念逐一进行介绍。需要说明的，不同的设计语言包含的内容并不完全相同。对比各家出品的设计语言，大多都涉及到了设计理念、视觉、设计模式等几个方面。因为所有界面的最终要呈现到用户的眼前，所以视觉部分又是其是最重要的必备内容。下面我会从视觉做为切入点，通过对设计语言概念的介绍，简要分享国内 BSS 部分产品在设计语言方面的实践。

语素

语素是语言中最小的单位。在设计语言中，语素相当于界面上的颜色、文字、图标、形状等基础的视觉元素，也是设计的最小单位。比较典型的语素有以下内容，比如 Ant Design 的颜色、Material Design 的文字、IBM Design 的图标等。

除了常见的颜色、文字、图标等元素，插画和动效等元素也越来越多加入到界面设计中。比如在国内 BSS 某业务受理的系统中，为了增加界面的美观度，我们会见缝插针地加入动效与插画，希望通过这些小小的细节，让界面更生动，更有特点。

语义

语义是指语素表达的含义。设计语言中的语义，就是为设计的元素赋予含义，以便设计师通过这些元素表达设计的意图。这些含义有些来自于设计师的设计理念，有些来自于行业的习惯，也有一些可能来源于某些品牌文化或者地域文化。这其中有些语义沿袭多年，已逐渐成为了共识。

例如，在不同的设计语言中，通常会用蓝色表示链接。追根溯源，最早使用蓝色链接的是在 1993 年的 Mosaic 浏览器上，设计师给蓝色赋予了文字链接的含义，于是蓝色链接就诞生了，而在此之前，所有链接都是普通的黑色文字。此后这一设计语言就逐渐被广泛使用，沿用至今。

同样具有广泛共识的语义，还是红色、绿色和黄色。在大部分的界面设计里，都会用红色代表错误、用绿色代表成功、用橙色代表告警，这样设置的依据最早来自于交通信号灯。交通信号灯的规则是全球统一的，绿色代表通行，红色代表停止、黄色代表提醒。因此，把类似的规则引入到界面中，相似的颜色就更容易让人理解其代表的含义。

有时设计师也会用绿色表示下跌，红色表示上升，这可能源于我们国内的股市行情。不过这样的含义只适合在部分国家与地区使用，因为在其他地方，这些颜色表达的含义不相同，甚至是相反的。

除了颜色以外，在设计语言当中，通常也会为图标赋予特定的含义。比如国内 BSS 某业务受理的界面，每一个图标都表示了一个特定的产品或功能，随意乱用图标就容易引起语义的混乱，增加理解的负担。因此我会建议图标在原则上应该要用在符合含义的地方。

语速

语速是单位时间内表达的词汇数量。在设计语言中，语速会受到多个因素的影响，比如界面布局的模式、排版的方式、元素之间距离等等，它们都有可能影响到界面信息的密度。因此，在界面设计中，语速更直观的表现是单位面积内呈现的信息量。信息密度相对较高的界面，间隔小语速快。排版较为宽松的界面，信息密度较低，语速也相对较慢。

例如，在下图中，左图是浩鲸科技国内某平台的配置界面，信息密度较高，排版紧凑。右图是该平台的管理界面，信息密度较低，排版就相对宽松。

语法

语法，简单理解就是遣词造句的规则。在界面设计当中，语法为设计师提供了应用的规则或方法，约定在什么场合下如何使用它们。

以国内 BSS 业务受理系统为例，我们约定统计信息的数据应该摆放在名称的下方，整体保持右对齐。当界面中有多个链接并列出现时，链接之间应使用浅色分割线将他们隔开。标题栏中如果计算出信息的总量，这些总量数据应该放在标题文字的后面。这些约定能为设计师提供设计的依据，因此语法是设计语言的重要组成部分。

响度

响度表示语音的强弱程度，对应到界面设计中，则代表了信息的不同强弱程度。不同的语义和语法，都会直接影响信息的响度，然后通过强弱程度的不同，来表达信息的层级、重要性或优先级。

以国内 BSS 业务受理系统为例，重要的信息使用高亮的颜色，让使用者能更快的发现这些属性。在大量文字排版中，不同的字号、字重和颜色，能更好的表达信息的层级，以便使用者快速从大段文字中区分出哪些内容是主要的信息，哪些文字只是次要的说明。界面中“删除”作为重要的操作，不跟折叠图标放在一起，而是单独展示，这也会起到强化的效果，更容易让使用者区分和点击。以上这些的方法，都是为了制造不同的响度，以起到突显的作用。

设计模式

设计模式可以是一种布局的方式、一种排版的形式，也可以是交互的方式。经过总结提炼的设计模式可重复用于相同或类似的场景中。

同样以国内 BSS 业务受理系统为例，卡片嵌套的展示模式，方便容纳层级较多的内容，让不同层级内容的界限更明显。层层递进的系统菜单，既表达了菜单的多层级结构，同时又能看到菜单的总量并快速过滤。全屏的加载页面，则让进入受理页面的过程增加一些“准备好了再给你看”的期待与仪式感。表单排版模式，则是通过精密计算，最大程度的利用页面空间，让页面在相同的宽度内展示更大的字号和更多的字数，并保持对齐，让页面的信息得到完整展示且更加美观。

05 设计语言的作用

苹果、微软、谷歌等巨头对旗下重要产品建立设计语言已是常态，各路厂商也已经陆续开始为自己的重要产品建立“设计语言”。

例如微软的 Metro Design，是数字设计领域极简主义和扁平化设计的先行者，在设计上注重字体与排版的平面感，主张“内容大于装饰”，非常注重内容本身以至于表现相对极端，去掉了几乎所有的装饰。Apple 的设计语言同样主张“扁平化”风格，去掉了部分高光、透视、纹理和立体拟物效果，但在设计里仍然保留了圆角、投影、渐变和高光等装饰。他们先后通过全新的设计语言，将 GUI 设计带进了扁平化的时代。

由此可见设计语言可以产生较大的影响力，它们不仅影响着自己的产品，甚至可能影响整个设计领域。

对于我们的客户而言，执行统一的设计语言，能让产品在不同场景中表现一致。客户也能通过设计语言来传递自身的品牌基因，提升产品的辩识度，加深受众对产品形象的印象。

以浩鲸科技 BSS 系统门户登录页面为例，所有登录界面均使用了左侧主题图、右侧登录框的版式。这种统一的界面版式，让 BSS 的所有系统看起来既像一个系列，同时各自又有着明显的区别，在简化设计的同时，也给设计师留下了发挥创意的空间。

而登录框中的圆形登录按钮，如同 BMW 汽车的双肾型前格栅一般，从 2017 年诞生之后，就一直保留沿用至今，逐渐成为了国内 BSS 产品的品牌特征之一。

06 结语

通过本文简要的分享了国内 BSS 设计团队在 B 端产品设计方面的一点心得。我们会持续地在项目过程研发中进行设计的探索和实践，努力寻找机会提升设计能力，满足客户的要求。同时我们也正在研究和沉淀贴合行业、满足客户的设计语言，这需要投入不少的时间和精力，是循序渐进的过程，欢迎各位大咖们提出宝贵意见，共同探索。