B端究竟需要什么样的产品经理？
在B端产品设计的世界里，色彩不仅仅是视觉元素，它还承载着信息传递、用户体验和品牌识别的重要角色。本文深入探讨了色彩空间理论在B端设计中的应用，从基础的色彩空间概念到如何在实际工作中运用这些理论，为设计师提供了一套科学的颜色搭配和管理方法。
对于 B 端产品而言，我们经常会和颜色进行斗争。
比如在工作当中，开发没有正确还原颜色、不知道如何进行色彩配置、以及对于 B 端产品而言，究竟应该如何协调科学的进行颜色的搭配～
最近会讲颜色的部分，整体会分为四篇文章：B 端设计如何理解色彩空间、B 端产品怎样合理搭配颜色、B 端项目的视觉风格、B 端项目颜色的实战技巧。
本篇文章是第一篇，我们先来聊聊产品配色的基础 色彩空间与颜色管理。
不知道各位同学是否遇到这种情况，当你在调整颜色时，就是在漫无目的的在拾色器上来回游走，在被问到为什么要选择这个颜色时，也茫然无措，这时候的你作何感想？
所以颜色还原需要熟练的掌握色彩空间，并配合屏幕进行颜色管理，才能够让设计顺利落地。但颜色其实过于抽象，因此我们将整体内容进行简化，多和大家聊聊在理论背后究竟应该如何与工作内容进行结合。
首先我们先说说色彩空间。
色彩空间又叫色彩模型，它是为了让系统能够准确地描述颜色、使用颜色，进而定义出来的一种颜色组织方式。
比如有一排随机颜色，要按特定规则排列，你会怎么做？我相信，我们首先想到的便是按照不同的色相进行归类。
如果颜色变为10000个，又该怎么排列呢？因此，为了让企业更好地使用颜色、设计师更便利地选择一致的颜色，行业中便提出了色彩空间的概念。
色彩空间其实很简单。因为我们需要使用颜色，且不同人群对颜色的需求不同，所以颜色的排列方式会存在差异。
比如，行业中较为出名的潘通色彩体系，其实是基于印刷行业制定的一种特殊色彩空间；CMYK是为印刷从业者提供的、便于他们更好地进行物料印刷的色彩空间；Lab是一种更强调色彩亮度的色彩空间。
因此，行业会根据颜色的不同规律和自身使用需求，总结整理出不同的色彩空间。
我们目前在工作当中，主要都是聚焦于屏幕当中，因此影响颜色呈现的也就变为：
在我们细致讲解色彩空间的部分时，我们先来了解三个重要的概念。
RGB是显示器当中的颜色基础。
比如在现实世界当中，我们将手机屏幕进行放大，你会发现屏幕都是由红绿蓝三个灯管所组成的。
而 RGB 的色彩模式就是模拟现实世界当中的屏幕显示原理，将灯光照射的逻辑在设计软件当中进行复现，因此在 RGB 的调色盘中，就会分别包含三个输入框，这便是 红绿蓝。
其中，数字 0 代表不发光、255 则是最亮的灯光。
那为什么最亮是 255，不是 250？或者是 280 呢？
原因在于RGB 所有的颜色，最后都需要通过计算机进行运算显示，对于它说并不认识 红色、蓝色，在它的脑袋里（不对，CPU 里面）就只有 0 与 1，因此在计算机存储的时候，一个字节也就是 8 个比特、也就是 2 的八次方、也就是 256，这样 一个色彩信息等于一个字节，数据存储就会更加高效。
所以我们所聊的颜色更多指的是代码层面的颜色设定。
接着我们打开 Figma，看到另一种格式 Hex，那我们称之为是 RGB 模式的精简版。
因为它嫌弃每个输入框都会出现 255（255,255,255 白色）实在太长，不利于我们在日常工作当中进行记录。
因此将每个颜色，三位数值缩减为两位数值（十进制变为十六进制），就是增加英文字符的数据，就能较短的表达颜色，使得颜色表达更为高效。
因为 Hex 只是 RGB 的精简版本，所以 Hex 里面，每两个字符所对应的就是 红、绿、蓝。
比如我们刚才提到的这个蓝色，在 RGB 空间当中为(0,86,255) ，Hex 则是#0056FF，也是一一对应关系。
RGB 听上去似乎很美好，但问题在于两点：
1.颜色的调整不够直观：作为设计师，我们很难模拟灯光的照射思维对颜色进行调整，具体应该增加多少颜色，其实是不够清楚的。我们更熟悉的其实是：亮度、色相、饱和度，因此在调色时会十分困难。
比如我目前是红色，那我要调整到紫色，应该输入多少值呢？其实我们很难进行一个准确的判断。
2.颜色信息与亮度信息的数据混合：导致我们很难对于有一个准确的判断，比如在 RGB 相同的数值当中，明显会感受到 黄绿色 与其他颜色的亮度存在较大差异，这样在调色时，颜色一致性偏差较大。
为了解决这些问题，就提出一种新的色彩模型：HSB
HSB （也叫 HSV）就是通过颜色的 色相、饱和度、亮度 来进行表示。
在色相当中，由于颜色的呈现是色环的方式，因此在数值上是以 0-360 度来进行表示的，在设计软件里面，我们也只能输入所对应的数值。
同时饱和度与亮度都是以百分比的形式进行呈现，饱和度越低，相对应就会给颜色增加白色，使其更灰；亮度越低，就会增加对应的黑色，让其更深。
由于 HSB 的色彩空间的分类模式非常有利于我们进行颜色的调整，因此我们在日常调色时其实会经常用到。
比如日常工作当中，假设我们需要设计一组图标，根据 HSB 颜色的基本原理，我们其实只需要调整不同的色相，就能够得到不同的图标颜色。
但… 颜色上依旧会存在问题。
你会发现当我们调整了色相过后，整体的颜色并没有形成统一。原因在于我们人眼对于 黄绿色的感知 会和红色、蓝色有所不同，我们通常在看黄绿色时会更为刺眼，因此在设计层面上需要单独调整。
所以在 HSB 当中的颜色逻辑上，也并没有解决颜色一致性的问题。于是在 2021 年 Google 提出一种全新的色彩模式，HCT。
HCT 首先会将颜色当中的 感知度、亮度 进行结合，对之前的 HSB 重新调整。
在颜色层面上主要分为：Hue：色相、Chroma：色度、Tone：色调
色相与色度和之前基本类似，但色调上优化了黄绿色凸显问题，让人眼的感知度也加入到了色彩空间当中，使其颜色更为准确。
同时色彩空间的呈现，优化了颜色渐变的流畅性，我们会发现整体的渐变感觉会更为自然。
那为什么 Google 想要做 HCT？
其实因为 Material Design 当中会强调设计的一致性和灵活性，在功能设计上，需要增加一个根据屏幕当中的图标生成与其风格一致的壁纸。
但在之前无论什么样的色彩空间都不能准确的还原颜色。现在就提供了一个可靠的色彩基础，能够让我们在不同的设备、平台和应用场景下，都能够生成具有一致性的色彩方案，同时也能更好地适应各种主题和风格的变化，如亮色模式和暗色模式的切换。
比如，还是以上面这个案例，我们使用 HSB 与 HCT 对颜色进行的色相的调整，那得到的结果明显会发现 HCT 会更加准确。
那 HCT 就真那么完美无瑕？
其实也不然，因为 HCT 色彩空间出现时间较晚，所以在使用上也会有很多问题。
这么深奥的色彩空间，到底要如何使用？
因为 HSB 是设计师最容易理解的色彩空间，因此我们在调色时需要根据数值来进行颜色的调教。
比如说你的颜色很脏，不够干净。其实就是在强调 HSB 当中使用了更多的黑色，我们便可以调整到这个色彩空间当中，去增加 B 的值（也就是第三个输入框）
比如说你的字体很灰，不够明确。
其实就是在说 你的亮度太高，需要减少亮度，也就是 H 的值（也就是第一个输入框）
因为每一个屏幕所显示的颜色其实都不太相同，因此色彩调整时要多看数据，观察数据之间的对比变化。
比如以 B 端产品的中性色为例，现在系统当中所使用的正文颜色为 #333333，看到过后就明确知道颜色深度不够、颜色也不透气。
我们就会按照，先确定颜色色相，为灰色偏蓝色，因此在色相当中需要拖动色环找到合适的色相；
紧接着确定饱和度，因为要偏蓝色，但不宜过多，因此整体的数值只会在 1-5 之前浮动；
最后确定深度，之前颜色过于浅，需要加深，所以直接减少，变为 22 左右的数值。
其次在判断颜色时，也会更具章法。
在多辅助色的情况下，我们可以使用 HCT 对颜色进行判断。
对于日常工作来说，我们可以使用 Figma 当中的 color Space 插件 进行日常的色彩管理。在今后遇到类似同类型图标时，我们可以使用 HCT 的方式快速生成发散色板，帮助我们进行色彩搭配。
最后在 B 端系统当中，会存在较多颜色搭配的场景。
像是图表设计、自定义系统主题，原来只能通过系统预设固定颜色的方式进行解决，而现在 Google 也将这套计算公式开源，也就是说程序员可以直接引用 HCT 的色彩空间，将颜色配置的权限给到用户，通过颜色的调整，呈现用户想要的颜色内容。
对于屏幕显示的色彩空间而言，有部分内容我们也是要重点关注。比如在 B 端设计当中，色彩还原老是出问题，那我们就可以通过屏幕的色彩空间进行判断。
sRGB（standard Red Green Blue）是由惠普公司和微软公司共同开发的一种标准色彩空间，目的是提供一种通用的色彩标准，使得在不同的设备（如显示器、打印机等）之间能够实现相对一致的色彩显示。
对于 sRGB 来说，它是我们作为设计师最为重要的屏幕显示色彩空间，因为它通用性强，所以大多数普通的电脑显示器、网页浏览器等都默认采用 sRGB 色彩空间，这样在浏览网页、查看普通的数码照片时，可以获得比较稳定的色彩效果。
所以我们在做设计时，通常都会将屏幕与软件，都调整的 sRGB 的空间当中，这样就能够最大限度保证色彩的一致。
Display P3 是基于 DCI – P3 色彩空间衍生而来的，主要用于消费级显示器设备。它在 DCI – P3 的基础上进行了一些调整，以适应显示器的特性。
整体而言 P3 色彩空间显示出来的颜色会更加 生动、艳丽，但是这会和你的设备密切相关。目前行业中只在苹果设备以及部分高端显示器才会使用，所以我们在设计时需要考虑自己产品的受众，这一设备是否普遍使用。
最后，我们总结一下：
本文由人人都是产品经理作者【CE青年】，微信公众号：【CE青年Youthce】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在视觉设计的世界里，色彩不仅仅是一种装饰，它是传达情感、影响情绪和吸引用户的关键。本文深入探讨了色彩在界面设计中的重要性，揭示了如何通过色彩的定义、属性、模型以及在不同场景下的应用来增强设计的吸引力。
色彩在我们日常设计中起着定生死的作用，它是设计的灵魂，舒适的色彩搭配可以让设计师一遍定稿，感觉在自己的设计生涯中，大部分都是在与色彩的博弈中度过的，虽然客户可能不懂色彩原理，可是客户天生都是色彩的感受家，什么样的色彩搭配美，通常他们瞄一眼就会有定论，不用你去辩解太多，不好的搭配，纵使有千万种理由，也说服不了客户，所以好好研究色彩以及每一种色彩传递的情感对我们做好设计至关重要。
目录
一、 色彩的定义
二、 色彩的三属性
三、 色彩的三种常见模型
四、 色彩的语意及它的应用
五、 不同场景下的色彩应用
六、 色彩在B端设计中的作用
七、 B端色彩设计使用的原则
1、物理学角度
色彩是光的属性，当光波通过物体时，物体会吸收某些波长的光，而反射或透射其他波长的光，这些被反射或透射的光波长度决定了我们看到的颜色。
2、心理学角度
色彩是人脑对光波长的视觉感知，不同的波长刺激视网膜上不同类型的感光细胞，进而产生不同的色彩感觉。
3、 艺术学角度
色彩是艺术创作的重要元素，它不仅关乎视觉感受，还与情感、文化、象征意义相关联。
4、 设计学角度
在设计领域，色彩是传达信息、影响情绪和创造美感的关键工具。
5、 计算机科学角度
在数字图像处理中，色彩通常通过颜色模型（如RGB、CMYK等）来定义，这些模型通过不同比例的原色或色料混合来表示各种颜色。
色相是指不同颜色之间的差别，即不同颜色的表象和名称，每个颜色都有自己的专属ID,如红、橙、黄、绿、青、蓝、紫等。不同的色别都可用光谱中的波长来表示，人的眼睛可分辨出的色别有180种左右。
明度是指色彩的明暗程度。一般在反光率相同的情况下，不同色别的明暗程度不同。如黄色光比红色光更明亮，而红色光则比青色光要明亮。
同时，同一色相在受光强弱或者物体对光的吸收、反射性能不同的情况下，会呈现不同的明暗变化和差异。
饱和度（纯度）是指同一色别的纯净度和鲜明度的变化。从色光的角度而言，光的波长单一程度越高，饱和度就会越高；不同色别所达到的饱和度不同，一般情况下，红色的纯度可达到最高，绿色的则相对较低；同一色相深浅不同的颜色有不同的饱和度；黑白色光的渗入会导致饱和度和明度发生变化；通常，照明光线的性质、物体表面结构对光线吸收与反射的性能等因素影响饱和度。
HSB模型也叫HSV模型，其中H代表色相，即颜色的种类；S代表饱和度，即颜色的纯度；B(V)代表亮度，即颜色的明亮程度。
这种色彩模型是我日常在的设计工作中用的最多的一种色彩模型，如果在同色系中如果只想让他们有细微的变化，我通常会通过调节S和B的百分比数值来达到自己想要的目的。
以上就是我在设计项目中，运用该色彩模型做的一个实战，项目中用到了一个图形，需要用同色系来表达，我保持了H色值的不变，让S值和B值都发生着微妙的不同，于是就产生了四五种同色系的绿色，该色彩模型特别的好使，也鼓励大家多在实战中运用这样的色彩模型，简单实用。
RGB是从颜色发光的原理来设计定的，通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯，当它们的光相互叠合的时候，色彩相混，而亮度却等于三者亮度之总和，越混合亮度越高，即加法混合。
红、绿、蓝三个颜色通道每种色各分为256阶亮度，在0时“灯”最弱——是关掉的，而在255时“灯”最亮。当三色灰度数值相同时，产生不同灰度值的灰色调，即三色灰度都为0时，是最暗的黑色调；三色灰度都为255时，是最亮的白色调。
虽然RGB模型色彩更加的丰富，但是很多颜色不能完全打印出来，于是CMYK模型就成了打印、印刷的不二选择。C是青、M是品红、Y是黄、K是黑，通过颜料反射和吸收光线来显色。
记得之前自己从事平面工作的时候，就经常要用到CMYK模式，因为印出来的效果偏差是最小的，是最靠近设计效果图的。
通过对比，我们发现RGB色彩模型颜色显示上确实更加的绚丽丰富些，而CMYK的色彩模型颜色显示上就黯淡了不少，但是要印刷的话，就必须转化为成CMYK的色彩模式。
红色代表热情、活力、强烈的情感和爱。它可以象征着激情、勇气和行动力，也常与兴奋、热烈的情绪相关。
著名的快餐品牌肯德基，在自己的网页及店铺装修中都运用了红色，因为红色是所有颜色中最容易引起人们注意的颜色，也是很容易刺激人们食欲和购买的颜色。
橙色传达温暖、欢快和积极向上的情感；它常与乐观、友好、创造力联系在一起，给人以活力充沛和充满希望的感觉。
百度网盘的这个登录界面就运用了橙色，给人阳光、向上、热情的感觉，通过色彩的运用一下让界面有了温度。
黄色象征快乐、开朗和乐观；它能带来明亮、愉悦的情绪，代表着阳光、温暖和智慧。
叫叫阅读是一款非常著名的儿童阅读软件，整个色调采用的是非常有活力的黄色，这与儿童处于好奇与活力的阶段相符合，这种高亮的黄色，饱和度和明度都非常的高，特别容易抓住儿童的目光，同时它是一种快乐的颜色，也是一种能激发孩子创造力和想象力的颜色，特别符合儿童成长的需求。
绿色代表平静、和谐与生机。绿色常与大自然相关，给人带来安宁、放松的感觉，也象征着成长、希望和新生。
青椒云的目标用户是吸引年轻用户和创意工作者，绿色这种富有活力和创意的颜色更容易吸引他们的关注，同时绿色也代表着健康、可持续发展的企业形象。
青色寓意清新、宁静和沉稳，它给人一种冷静、理智的印象，同时也带有一丝清新的活力。
青色是一种带有蓝色和绿色的颜色，因此青色既有蓝色的专业感、信任感，也有绿色的生机感、希望感。
以下是日本某牙医品牌的官网首页，病人希望在这里带来健康与复苏，也希望获得专业、可靠的治疗，而青色就成了很好传递这种情感的品牌色。
蓝色代表冷静、忠诚和信任；它常与沉稳、深邃的情感相关，能带来宁静、平和的心境，也象征着智慧和理性。
123云盘使用了蓝色，蓝色符合社会的普遍审美认知，接受度比较高；其次，蓝色给人安全的感觉，也符合云盘的初衷，给用户安全的存储服务。
紫色象征神秘、高贵和浪漫；它常给人一种优雅、奢华的感觉，同时也带有神秘莫测的氛围，与梦幻、创造力等情感相关。
美柚的主要用户是女性，紫色在色彩心理学中常被认为具有优雅、神秘、浪漫的特质，这些特质与女性的审美和情感需求相契合，能够吸引女性的关注。
白色代表着纯洁、神圣、信任、安静、朴素和雅致，是一种充满纯洁的颜色，它可以跟任何颜色和谐的共生。
以下是熊掌ID的登录界面，颜色用了大量的白与灰，简洁又不失大气，传递出了一种质朴、雅致的感觉。
❶ 吸引顾客注意力
在众多商业场所中脱颖而出，色彩鲜艳的商场外观和内部装饰更容易在人们的视线中凸显出来，吸引过往行人的目光，激发他们的好奇心和探索欲。
确实多彩的颜色更加容易引起我的关注，这不看到商场的美图，都忍不住拍照留念了，成功的吸引了我的目光。
❷ 增强可见性
即使在较远的距离或在繁忙的街道上，多彩热烈的配色也能让商场更容易被发现，提高商场的知名度和曝光度。
多彩的配色，让我很远就被商场美轮美奂的插画吸引，大大增加了商场的可见性。
❸ 营造愉悦氛围
色彩可以激发积极情绪，明亮、鲜艳的色彩往往与快乐、活力和兴奋等积极情绪相关联。当顾客进入一个色彩丰富的商场时，会感受到一种愉悦和轻松的氛围，从而更愿意在商场中停留和购物。
星沙永旺城的美陈设计很好，墙面采用极具诱惑力的颜色与美食，把小小实物十倍放大，增加了视觉看点，让人忍不住过去拍照晒一下，大大增加了愉悦性。
❹ 缓解压力
在现代生活中，人们常常面临各种压力。走进一个多彩热烈的商场，可以暂时摆脱日常的烦恼和压力，享受购物的乐趣。
特别可爱夸张的插图设计，引发了丝丝童趣和欢乐，让人短暂忘记压力，远离烦恼。
❺ 引导消费行为
商场通常会使用不同的颜色来区分不同的区域，如购物区、餐饮区、娱乐区等。这样可以帮助顾客更快速地找到自己感兴趣的区域，提高购物效率。
突出重点商品，对于一些重点推荐的商品或促销活动，商场可以使用鲜艳的色彩来突出展示，吸引顾客的注意力，引导他们进行购买。
❻ 塑造品牌形象
6.1 传达个性和风格
不同的商场可能有不同的品牌定位和目标客户群体。通过选择特定的色彩组合，商场可以传达出自己的个性和风格，吸引与之相符的顾客。
6.2 增强品牌记忆度
独特而鲜明的色彩搭配可以让商场在顾客的心中留下深刻的印象，提高品牌的记忆度和辨识度。
芙蓉区的龙湖天街主要面向中等收入新兴家庭，是一个区域型的购物中心，集购物、餐饮、休闲、娱乐等多业态于一体，为消费者提供一站式商业综合体，它在餐饮区采用了大量的吃喝玩乐的插画来引导用户消费。
❶ 视觉特性方面
1.1 稳定性
蓝色给人一种沉稳、可靠的感觉。在B端产品中，用户往往需要处理重要的业务数据和进行复杂的操作，蓝色的稳定性可以让用户感到安心，增强对产品的信任感。
1.2 专业性
蓝色通常与科技、专业领域相关联。B端产品通常面向企业用户，需要传达出专业、高效的形象，蓝色正好符合这一需求。
❷ 心理影响方面
2.1 减少焦虑
相比鲜艳、刺激的颜色，蓝色较为柔和，不容易引起用户焦虑和紧张的情绪；在B端使用场景中，用户可能需要长时间使用产品，蓝色的舒缓效果有助于提高用户的使用体验。
2.2 提高专注度
蓝色具有一定的沉静作用，能够帮助用户集中注意力，专注于工作任务。对于B端用户来说，高效完成工作是首要目标，蓝色的这一特性有助于提高工作效率。
B端产品在心理上追求的是类似如下图的这种宁静式的体验，跟教育有着异曲同工之处，就像这个易贝乐少儿英语一样，用大面积的蓝色，希望孩子在这里能很快的安静下来学习、专注自己的事情。
❸ 行业习惯方面
3.1 科技行业引领
许多知名的科技企业和软件产品在 B 端市场中广泛使用蓝色，逐渐形成了一种行业习惯。其他企业在设计B端产品时，也会倾向于选择蓝色以符合用户的认知和期望。
3.2 传统与延续
在过去的设计中，蓝色在 B 端领域的成功应用使得它成为了一种传统选择。设计师们在延续这一传统的同时，也不断优化和创新蓝色的运用方式，使其更符合现代设计趋势和用户需求。
嘉为科技是一个有着20多年技术沉淀的科技公司，它的官网和产品风格一直是沿用着科技蓝的风格，应该也是基于传统的沉淀吧。
❹蓝色可以提高产品的复用率
很多用户都能接受蓝色的B端界面，当面对有差不多需求客户时，同一套UI，可以多次复用，可以减少开发成本和设计成本，这也是自己通过长期实战观察发现的。
一个UI风格，用在了两个项目中，不同的用户，趋向同样的风格，说明蓝色在大家心目中的接受度是非常的高，用蓝色可以促进设计的多次复用。
在日常的项目中，我看到的B端UI界面是千篇一律的稳重，不追求过于刺激的颜色搭配，通常都比较的干净简洁，不像商场里面的美陈背景设计，色彩对比非常的强烈，比较的吸引人眼球。
有一次我厌烦了常规的稳重风，探索一种大胆的色彩风格时，虽然风格比较新颖，可是发出去客户的接受度不高，觉得太不稳重了，然后重新按照以往习惯进行设计时，就很好，客户一致认同。
可见每个领域都有自己的色彩运用习惯，商场需要吸引人眼球、刺激消费，越大胆越好，可是B端设计需要提供一个让人平静去处理工作事项的环境，它需要安静，不需要过于刺激的颜色搭配。
比方在日常设计当中，红色代表流程失败，绿色代表流程成功，橙色代表信息有告警，蓝色代表着链接，同时不同的按钮颜色也可以很好的区分按钮状态，在反馈结果和状况方面，色彩起着非常重要的作用。
下面这个IDC运营的监测平台，它就是通过颜色来区分不同的告警级别的，可见颜色在B端产品中的重要性。（备注：图中数据都不是真实数据，仅做展示）
B端设计中大面积使用品牌色，可以强化品牌形象，使用与品牌标志风格相近的色彩，可以帮助用户快速识别和记住品牌，在不同的B端产品界面中使用统一的色彩方案，有助于建立品牌的连贯性和一致性，增强用户对品牌的信任。
例如我给湖南高速设计的一套B端界面设计，用户强烈要求改变传统的蓝色风格，要求整套界面设计要用湖南高速品牌色-绿色，说明在追求大流和品牌色之间，客户更加倾向品牌的传达。（备注：图中数据都不是真实数据，仅做展示）
在B端界面设计中，颜色在帮助信息区分起着非常重要的作用，通常可以通过不同的色彩来区分功能区域，可以让用户更清晰地了解界面的结构和布局，例如，导航栏使用一种特定的颜色，而内容区域则使用另一种颜色。
我设计的天翼写作，就是这样的设计思路，导航栏和内容区的颜色完全不一样，这里颜色起到了很好的区分作用。
选择合适的色彩对比度可以增强文本的可读性，减少用户的视觉疲劳。例如，黑色文字在白色背景上通常比较容易阅读。
选择适当的色彩可以营造出专业、高效、舒适的工作氛围，从而影响用户的情绪和感受，提高用户的使用体验。
我参与的这个后台界面，就是通过合理的色彩搭配来引导用户使用的，当用户已经完成的环节都是用绿色表示，没有走完的流程就会是灰色的，寓意指示非常的鲜明，很好的解决了用户不知道清晰进程的卡点，提升了用户体验。
人的性格有活泼的、文静的、沉稳的、深邃的，其实色彩也是有性格的，不同的色彩也有不同的性格，当我们对色彩的性格有足够多的了解，在面对不同的客户时，我们对色彩的拿捏以及设计需求的把握时，会更加的游刃有余。
我们平常确实是在做设计，但是我们更多的是在与人打交道，我们更好的聆听，会帮助我们更快的抓取到客户的喜好，快速做出满足客户需求的设计，少受加班之苦。
比方说我之前给云门户设计的一套UI，客户的决策层是男性，且年龄偏大，他们就偏爱深沉的UI风格；而我负责的天翼云电脑专家，客户的决策层是女性，且年龄偏年轻，她每次就喜欢轻盈、明快的UI色调,不同的决策层客户，就会带来不同的设计结果。
在这个登录页面中，我就是运用的6：3：1原则，60%的主色，30%的次要色，10%的点缀色；使用了大面积的蓝色和蓝灰色，最后使用一点点的橙色，这样的配色会显得高级。
为了保证画面风格的统一、干净整洁，文字颜色、边框颜色、以及边框背景色都需要用到无彩色，通常通过颜色的深浅来区分信息的层级关系。
比方说我参与的星辰大模型AI文档生成能力的应用，里面无论文字颜色还是底色都是运用的无彩色，只是通过了色彩深浅变化来做了层级区分，因为无彩色可以起到很好的降噪作用，既传达了信息，又不会显得界面凌乱复杂。
比方说，日常我们设计的卡片都是用的白色，而底色我们用的是灰色，因为卡片里面的内容都是比较重要的信息，需要用一个亮度比较高的颜色，让内容往前走，而灰色的背景通常就往后走的感觉，这样能跟卡片形成一个一前一后的对比，更好的帮助内容进行传播。
比方说我设计的这个IT运维监控平台的首页，物理主机、网络及安全设备、工单、在途工单这几个指标是非常关键的，所以他们的图片底色用了纯度比较高的有彩色来标识。
作为设计师，我们的设计工作其实就是在设计一种感觉，一种情绪，设计前定调的意识真的太重要了，感觉对了，什么都就对了。
比方说我前段时间接到了一个B端的大屏可视化需求设计，客户说之前的大屏设计不喜欢，希望重新出一个新的设计，然后公司的需求对接人员在给我下达需求时，真的就只是给我下达了这几个字，让我重新出一个设计试试。
以我的职业直觉，感觉这个需求是不够细化的，于是我就多问了几句，我问客户是想要常规的蓝色调的还是别的？果然一问，客户说不希望再用常规的蓝色的，希望新的设计要用他们的品牌色绿色，刚听到这几个字的时候，我以为这次我把握住需求了，在收集参考图的时候，我发现常见的绿色大屏有深色的和浅色的，根据自己以往的作图习惯，我觉得深色会更加的受欢迎一些，我自以为是的朝着深色的方向去出图，出到了一半的时候，我内心有些许的忐忑，我于是找了一深一浅的参考图，让同事跟客户确认一下，客户是想要深色的感觉，还是要浅色的感觉，这次沟通又给了我深深的一击，客户不按常理出牌，说希望按浅色的风格来出图。
在出稿之前，通过自己反复的沟通确认，发现设计前的定调意识真的太重要了，要不是有出图前一波三折的反复确认以及需求的细化，就不会有后来的一遍过稿。
不管我们设计什么色系的界面，都避不开用到灰色，在设计中用跟主视觉相符的灰，会使得界面更加的高级、协调与美观，注意好了这个小细节，会给我们的设计加分不少。
下面是我日常体验到的两个界面，上面综合管理平台里面的灰色就没有跟主色调蓝色相呼应，灰色没有向蓝色倾斜，界面看起来就没那么美观；下面通义千问的灰色设计就非常的注重细节，灰色偏紫，整个界面看起来浑然天成，毫无违和，美感、档次瞬间提升好几个等级。
一个微小细节的在意，在无形中拉高了设计的高度，十个细节乃至更多细节的在意，就会带来更多意想不到的结果。
总结：
以上就是我最近对色彩的一些顿悟、感受和学习收获，在不断的复盘总结中，我们总会收获一些新的认知，通过这次色彩的复盘之旅，发现色彩对设计师真的太重要了，希望我的分享对大家有启发，不足之处也欢迎大家留言交流。
本文由 @姝斐suphie 原创发布于人人都是产品经理。未经作者许可，禁止转载
题图来自 Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
“B 端页面加载，关乎用户体验。” 在 B 端产品设计中，页面加载功能不容小觑。如何让用户在等待中减少焦虑？怎样使页面加载逻辑清晰、策略得当？本文将详细阐述，为 B 端产品设计提供指引。
每一个用户都不喜欢进入页面时需要长时间的等待，并且对着一个空白的页面。
因此在 iOS当中会使用大量的动效、情感化设计来引导用户多停留一些时间等待加载；在较多 app 当中，也会通过动效设计，优化页面信息的加载。
那既然页面加载很重要，对于B端产品而言，我们也需要去考虑页面的功能究竟要如何进行设计。
今天我们会聊聊 页面加载 功能的具体逻辑，以及B端产品的常见页面加载策略，希望能够对各位同学有所帮助～
在系统当中，页面加载其实是用户对系统界面进行交互后，系统会将对应的数据传给服务器，而服务器又会将内容反馈给用户的整个过程。
比如在按钮组件中，我们就需要去设定「当用户点击了按钮过后它需要长时间加载的 Loading 状态」
通过这样的做法，其实就是缓解用户等待所花费的时间，减少焦虑。
在很多C端产品中，页面加载是非常常见的。比如会有懒加载、预加载、异步加载等。
同时会使用非常多的 插画设计、动效设计 去降低用户所使用的焦虑。但是在桌面端中，它的思考方式会有些许不同，我们将其分为四种不同的方式。
骨架屏是较为常规的页面模块加载方式。
它主要适用于模块当中，加载内容需要提供占位信息时进行使用。通常会在 列表、卡片类 图文信息较多的页面当中进行呈现 。
在用户预期上，骨架图能够帮助我们展示当中页面的大体结构，以避免在页面加载信息的过程当中出现随意跳动、乱展示的情况。
特别是在很多页面第一次加载时，由于数据内容较多，因此使用骨架图填充会更为合理。比如在有赞当中， 就会使用骨架图的方式来进行页面信息的加载。而在B端后台中也更多的适用于工作台信息的加载，特别是在工作台中有数据部分的内容呈现的时候，需要格外去注意。
Spin 主要要于页面和区块当中的信息加载，通过适当的动效，能够保证页面加载时缓解用户的焦虑。
在 Spin 当中，会有许多不同的类型：基础Loading、动画Loading、进度Loading
基础Loading 更适用于页面当中的组件类级别的加载，像是在输入框内、按钮中、下拉选择… 的内容加载。
动画Loading 则偏向于区块、页面级别的加载，比如在表格页面中，就会经常使用加载的方式展示目前正在相应。
进度Loading 则更像是进度条的外露，想要更凸显目前的真实进度情况。目前在 Ant Design 5.18.0 版本当中即可支持
当然，在系统当中还会出现一些特殊的加载状态。比如在针对数据量较大的情况下时，我们会采取什么样的加载策略？
比如在神策数据当中，当我们在去分析后台的行为数据时，需要进行大量的计算，因此在分析完一次过后所等待的时间也会更为长久。这时候神策会给出一套更为复杂的加载策略。
首先在加载层面上，它会优先告知用户目前整体的加载进度，这对于用户的等待是非常有益的。
其次，如果你对于整体加载的时间进度不够满意，那我可以给你相应的解决策略，像是分批加载等等。
最后如果你在加载过程当中有其他的分析任务，也可以通过异步加载的方式，进行后台计算，等结果出来后会通过通知的方式进行提示。当然，在此过程中，你可以中断、退出。
异步加载也是针对长时间加载的一种策略，比如我需要去上传较大信息的时候，我需要耗费特别多的时间。那这时候就可以采用异步加载的方式，满足用户的正常使用。
在飞书当中，我要上传飞书妙记，我要导入飞书成员，那都可以通过异步加载的方式来进行呈现。
那在设计的时候需要去考虑异步加载整体的入口以及功能之间是如何实现的。
像是在飞书妙记中，它会将其作为一个上传入口，进行快速的展现。而在导入飞书成员的时候，则会展现是将其放在后台进行加载，等完成过后通过通知的方式来告知用户（与神策相同）
关于加载，其实在设计上还会有很多细节，我们也会在课程当中，通过 功能设计 的方式给大家进行梳理设计要点（肯定会比现在更为系统），后续有时间，再和大家分享～
本文由人人都是产品经理作者【CE青年】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
从拟物风格到扁平化，再到如今的多变色彩与微妙质感，设计风格的演变不仅反映了技术的进步，也折射出用户需求的转变。本文结合钉钉近10年的B端设计经验，深入探讨2025年B端设计的三大趋势：多变丰富的色彩、微妙克制的质感以及清晰明了的图形。揭示了如何在满足企业高效、专业需求的同时，为用户带来更具情感价值和科技感的视觉体验。
回溯互联网的发展进程，从桌面端的拨号上网，到5G移动互联网，再至人工智能的助力，科技领域正在经历着翻天覆地的变革。未来的数字世界，在沉浸感、参与度、个性化等维度对体验会提出更进阶的要求；与此同时，B端企业对于高效、简便、用户友好的界面需求与日俱增。在2025年的当下，B端设计师唯有持续学习，适应新技术与新趋势，紧密围绕客户的业务价值展开设计，进一步注重实用性、包容性以及可定制化，方可为企业客户塑造出卓越的产品与服务。
因此，我们结合钉钉近10年的B端产品设计经验，鉴于未来B端设计趋势将展现出多元化、智能化和人性化的特质，从B端产品个性化、风格与质感、界面版式、图标、动态交互等多维度设计展开深度研究，与大家一道探讨B端设计的本质和趋势，期望在真正驾驭B端产品设计的这条道路上，带来些许有益的启迪。
上篇文章我们讲述了B端产品的个性化趋势，如何利用个性化帮助个体提升用户价值，打造个体形象、满足个体情绪以及增强个体自信。
今天，我们要给大家分享的是B端产品风格&质感，为企业塑造品牌形象、为个人用户提供情感价值。
设计作为科技和艺术的结合，UI设计风格的演变不仅与技术的发展密不可分，而且与艺术创作风格的发展有着异曲同工之妙，都经历了抽象—具象—抽象的过程。
20世纪70-80年代是计算机图形界面的萌芽阶段，就像绘画艺术起源之时的那个茹毛饮血的年代，当时的原始人所能利用的工具只有火堆熄灭后留下的木炭，图像呈现的载体也只有山洞内的墙壁和岩石。就像刚刚进入计算机时代的设计师们，不仅缺少专业的绘图软件，而且当时计算机本身的显示能力也尚且不足。这个阶段的UI设计，能够在显示器上清晰地显示并传达明确的含义，比画出风格更加重要。观察当时的操作界面，不难猜测当时的设计师，努力以具象的表现风格来减少人们对计算机界面的陌生感，但由于工具和载体的限制无法完美实现，虽然这种风格无法被称为拟物风格，但为后来真正的拟物风格的出现和发展奠定了基础。
1995年，家用计算机的显示能力迎来了质的飞跃，Windows95发布、对真色彩的支持、PhotoShop5.0的发布……技术进步和专业软件的加持让设计师突破了过去创作工具和呈现载体的限制，就好像在山洞里用木炭绘画的原始人，拥有了画笔、颜料和画布。设计师的创作空间和写实能力得到极大提升。
与此同时，个人计算机和手机开始普及，图形化的操作界面不再是科研人员和专业人士的专属，而是普通人工作学习中的一部分。为了让没有接触过图形化操作界面的用户快速识别图标代表的功能，最好的方式就是在界面中对现实世界中的物体进行还原，这便推动了拟物风格的发展。
拟物风格的设计作品，通过模拟现实物品的造型和质感，通过叠加、高光、纹理、材质、阴影等效果对实物进行再现，让用户以极低的学习成本快速熟悉图形化的操作界面和产品功能，并以符合日常习惯和直觉的方式引导用户进行交互。
例如在ios6中的相机icon，对镜头部分细节刻画非常细致，用户很容易联想到使用真实相机时能够做到的事情，这对用户理解和熟悉某一个产品功能的帮助无疑是巨大的；再比如同样在ios6中的书架icon设计也十分精彩，不仅对真实报刊架的结构和质感极度还原，而且对书架内的杂志也进行了展示，用户甚至能像真的面对一个书架一样看到书架中的内容，小小的icon中信息含量极高。
到2013年左右，智能手机在全球主要国家和地区的普及率大幅提高。根据统计数据，许多发达国家的智能手机普及率超过了50%，发展中国家的智能手机普及率也在快速上升。大部分用户已经对图形化的操作界面非常熟悉，无需那些极致写实的风格也能快速理解图形背后的含义和功能。同时，越来越多的信息和应用涌入智能设备，拟物风格所推崇的肌理、质感、光影……带来精致效果的同时，也让细节变得冗余，如何处理爆炸的信息成为UI设计的首要问题。就像19世纪摄影技术对传统写实绘画艺术的冲击，让艺术家们重新思考绘画艺术的发展方向一样，拟物风格的极致具象化在达到巅峰之时也渐渐到达了转折点。
2013年9月ios7发布，并且首次在UI设计中采用了扁平化的设计风格。这种风格摒弃了拟物设计风格中的写实光影、肌理、冗余的细节、甚至放弃了体积的塑造以及一切可能会对识别产生干扰的元素，只保留对用户最关键的信息，呈现出十分干净整洁的视觉效果。
然而物极必反，扁平化设计的极致简洁，容易让长期使用的用户感到冷淡和无趣，于是新拟物风格应运而生。
新拟物融合了拟物和扁平两种风格的特点，在光影和立体效果方面较为写实，元素通常是凸起或凹陷于界面之上，视觉上错落有致，但是在色彩和造型方面则更偏向于扁平化风格，图形往往经过一定的简化和抽象，并搭配少量简洁的主观颜色。但是新拟物风格过于依赖投影和立体效果对界面元素的区分，很难呈现复杂的信息层级，而且微妙的对比度也不利于无障碍识别，所以这种风格并未真正大面积流行和使用。
2022年，ChatGPT发布，AI在自然语言处理方面达到了前所未有的高度，同年Midjourney和stablediffusion的出圈让每个人看到了AI生图的魅力。不仅各种AI应用和网站如同雨后春笋般出现，而且各行各业的APP都在争前恐后的升级自己的AI能力。这样的时代背景，为UI设计提出了一个新的命题：如何用设计展现应用的AI能力以及企业的智能化心智。
色彩在B端设计风格中占据着至关重要的地位，能够带给用户非常强烈的直观感受，是用户对产品和品牌的第一印象。例如蓝色就是过去对To B或科技产品的色彩印象，诸如英特尔、微软、联想、戴尔、IBM…这些品牌通过蓝色来传达简洁、未来感和高科技等视觉感受。但是这个标准并非是一成不变的，越来越多的B端设计，选择使用丰富的色彩来表达智能化千变万化的特点，科技感的表达不再是千篇一律的冷色，而有了更多的变化。
弥散渐变
弥散渐变是一种借助模糊效果将多种颜色进行混合的特殊渐变形式，多种颜色的混合以及不规律的渐变走势，让弥散渐变具有很强的氛围烘托效果和表现力。晕开的色彩仿佛在一片虚空之中慢慢弥散开来，细腻、柔和又梦幻，很适合用来提升界面的局部氛围。
优秀的场景适用性
在B端设计中，屏效和识别尤为重要，利用图形或插画的形式烘托氛围，往往需要占用更多的空间，并且在网页端的适配过程中，容易产生图文重叠带来的识别的问题。而弥散渐变由于其模糊和明度均匀的特点，可以在为画面贡献丰富度的同时，不产生视觉上的焦点，所以在适配过程中也不会产生图文重叠的问题，具有很普遍的应用场景。
高效的场景拓展
在调整渐变时，通过保留一些相对清晰的轮廓，弥散渐变还能呈现出虚实结合的视觉体验，让画面更具动感和层次变化，就像一面磨砂玻璃后飘浮着一些真实的物体一样，十分具有空间感。虚实的变化让色彩有了具体的造型，可能是一段波浪、一个球体、或是一座山丘……这样的背景配合一些简单的排版，便可以是一张海报、一张banner、一个推送封面……这无疑为高速迭代的B端设计提供了一个高效的解决方案。
动态变化
根据资料显示，手机软件的AI生图时长一般在10秒至120秒之间，AI搜索平均时长大致在2秒到15秒之间，专业的写作AI成文时间大致在3秒到30秒……
AI应用伴随着大量的等待时间。使用动态变化的颜色能够降低用户在等待期间的焦虑感，并且不断变化流动的色彩也能暗示用户，当前仍处在“生成中”的状态下。例如用户在等待钉钉AI助理回答的过程中，聊天气泡会呈现出多彩的流光效果；用户在与AI助理进行语音交互时，整个屏幕边缘会呈现动态的彩色光效，以表示当前的AI激活状态。
除此之外，全屏动态的渐变背景还很适合用在信息不多的功能或应用首页，例如在钉钉的登录页面，屏幕近三分之二的空间中只有简单的文字动画，搭配全氛围的动态渐变背景，不仅清晰地传达品牌的智能化心智，而且为“登录”这一操作增添了满满的仪式感。类似的还有钉钉AI搜索的功能首页，大面积涌动的动态渐变，充分在视觉层面展现了智能化的心智，而且大面积的留白也让钉钉AI企业搜索的功能价值描述显得格外突出。
虽然新拟态风格并未大规模的使用和流行，但其衍生和沉寂的背后反映了设计的本质就是一场功能和审美之间的角逐。B端设计更是如此，用户侧需要美的设计来愉悦工作中的心情，但又不想被花哨的色彩和装饰干扰工作效率，企业侧需要摆脱沉闷古板的刻板印象，但同时也需要呈现专业、科技的高大形象保持可信度。微妙克制的质感表达为这种“平衡”的实现提供了解决思路。
玻璃拟态
玻璃拟态是2020年末开始流行的设计风格，顾名思义就是对玻璃这种材质的一种拟物化设计，玻璃拟态风格相较于新拟物风格最明显的进步在于，它巧妙地利用玻璃这种材质解决了新拟物风格中元素边界不清晰、难以体现复杂层级等问题。其风格特点可以总结为以下特点：
通透：
由于磨砂玻璃的通透性，在界面中存在多个层级时，会呈现出一种虚实结合的美感。并且其透明的属性，能够很好的暗示用户目前所处的位置，利用此特性，不仅能更沉浸的展现用户当前关注的信息，而且“叠加”而非“跳转”的交互逻辑也极大减轻了用户操作时的心理负担。
悬浮：
传统的拟物风格往往会塑造一个地面，再将图标“放置”在上面。而玻璃拟态风格则更像是构建了一个“无重力”的虚拟空间，界面中的元素有明显的悬浮感，显得十分轻盈，同时也非常适用于B端场景下对于科技感的体现。配合投影、虚实对比，用户能够清晰地感受到元素在空间上的高度差异，不仅保障了信息的可读性，而且让可交互元素更具点击感。
微妙：
由于磨砂玻璃的物理特性，页面背景在经过“玻璃层”的模糊处理后会变得十分柔和，类似上文所述的“弥散渐变”，呈现出一种明度均匀，没有视觉焦点的状态，无论是动态还是静态都能很好的保障前景文字、UI控件等元素的可识别性。并且在玻璃拟态风格中，常常使用轻薄微妙的边框来强化物理质感，这种既作为描边，又作为“玻璃”的厚度的处理方式，让卡片能够以一个恰到好处的对比度呈现在界面中。
综上所述，玻璃拟态风格在拟物程度上找到了一个很好的平衡点，既为枯燥的B端设计提供了真实感和趣味性，又保障了复杂信息情况下的识别度。并且由于玻璃光滑、透明等物理特性，也为“科技感”的视觉呈现提供了新的方向。
柔和光影+微质感材质
与C端设计中常用强烈的光影效果吸引用户不同，b端设计相对更加沉稳。对比阿里云、WPS、钉钉、腾讯云的官网首页，都不约而同地使用了非常柔和的环境光，这种光影设计，在保障整体亮度的基础上，不会产生明确的光照方向和阴影效果，并且在材质选择上，也都使用了高光、反光均不明显的漫反射材质或微质感的毛玻璃材质，整体视觉感受十分沉静和整洁。
图形在设计中扮演着两部分角色，一方面图形作为页面的装饰需要保证审美的愉悦性，另一方面图形也作为文字信息的补充，需要传达某些特定的含义。好的图形设计不仅能为整个页面的氛围添光加彩，而且能帮助用户更好的理解文字信息。
规律感的几何图形
在b端场景下，常常需要借助图形表达一些抽象的概念，例如PaaS、服务器、AI、用量、科技、流量……这类含义并不直接对应一个特定的造型，使用有规律的几何图形，似乎是一个不错的选择。这些技术概念的背后来自于二进制中0和1的组合，而将几何元素有机地排列，甚至衍生出不同的形态的过程，不是正如代码的编写吗？
简洁高效的手绘元素
在当下的B端设计领域，越来越重视情感关怀和个人用户的体验。在页面中使用具有手绘感的元素或使用直接使用手绘图案作为配图，不仅能够快速拉近品牌和用户之间的距离，塑造年轻化、有亲和力的品牌形象，也能提升用户在使用产品工作时的愉悦感。这类充满轻松感的图形比起传统的插画或3d建模更加简洁，色彩鲜明，具有很强的表现力，并且设计成本也更低，十分适合作为一些小而美的产品配图。
例如Google推出的Material design的设计语言就大量使用了抽象且配色艳丽的手绘元素作为配图，这类图案更加强调色彩并不过多细化造型，穿插在文字之间，让深色背景的页面一下活跃了起来。与此类似的还有figma的官网，设计师将软件内的部分工具比如线条、线框、锚点、指针等元素抽象出来作为插图，不仅简洁耐看，而且十分具有自身的品牌特色。
除此之外，利用手绘线条来表现hover的交互状态，圈画重要的文字信息，或是进行操作引导，也具有极高的效率。简单的箭头或者波浪线，能够非常直接地将用户的注意力指引到重要信息处，就像学生时期在书本上圈画重点一样，感受上十分自然而亲切。仿佛应用的设计者悄悄在用户耳边说了一句小tips，而不是粗暴地把信息丢到用户眼前。
无论是拟物风格时期的极致写实，还是扁平化风格时期的极简，又或是AI时代的多彩绚丽，设计风格的发展始终围绕着技术发展的主线，其发展的目标，始终围绕着如何让当前时代的用户更好更便捷地享受到技术应用带来的便利。一个好的b端设计风格，不仅能够帮助企业展现品牌心智和技术上的先进性；而且能够让个人用户更高效且愉悦地完成工作任务。在未来的B端产品设计中，我们应该始终坚持形式服务于功能和以人为本的原则，探索更适合业务场景的设计风格，为用户带来更加舒适自然的视觉体验。
以上是本期带来的B端设计趋势之个风格篇。
本文由人人都是产品经理作者【钉钉用户体验】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在B端产品设计中，退订是用户对产品不满的直接表现，也是我们优化产品的重要信号。作为UI设计师，如何通过交互设计降低退订率，提升用户留存，是一个值得深入探讨的话题。本文将结合 DeepSeek（深度探索） 的设计理念，从用户心理和交互设计的角度，分享B端产品退订心理学的设计策略与实践。
强调通过深度探索用户行为和心理，找到问题的本质。在退订场景中，用户的行为背后往往隐藏着以下心理动因：
1）设计目标：通过数据分析，找到用户退订的高频节点，优化交互路径。
2）设计策略：
1）设计目标：通过设计手段，让用户直观感受到产品的价值。
2）设计策略：
1）设计目标：降低用户的操作成本，减少因体验不佳导致的退订。
2）设计策略：
1）设计目标：通过设计让用户感受到被重视，增强对产品的情感依赖。
2）设计策略：
以某B端 SaaS 产品为例，通过 DeepSeek+交互设计策略，退订率降低了20%。
具体优化包括：
退订是用户对产品的“最后反馈”，也是我们优化产品的重要机会。通过 DeepSeek+交互设计，我们可以深度探索用户心理，优化交互路径，强化价值感知，简化操作流程，并建立情感连接，从而有效降低退订率。希望本文的设计策略与实践能为B端产品的优化提供启发，让我们的产品更好地服务于用户，提升用户留存与满意度。
本文由 @刘萍 原创发布于人人都是产品经理。未经作者许可，禁止转载
题图来自Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在数字化转型和AI技术的推动下，B端设计正在经历一场深刻的变革。本文从钉钉近10年的B端产品设计经验出发，深入探讨了2025年B端品牌物料系统设计的趋势。
回溯互联网的发展进程，从桌面端的拨号上网，到5G移动互联网，再至人工智能的助力，科技领域正在经历着翻天覆地的变革。未来的数字世界，在沉浸感、参与度、个性化等维度对体验会提出更进阶的要求；与此同时，B端企业对于高效、简便、用户友好的界面需求与日俱增。在2025年的当下，B端设计师唯有持续学习，适应新技术与新趋势，紧密围绕客户的业务价值展开设计，进一步注重实用性、包容性以及可定制化，方可为企业客户塑造出卓越的产品与服务。
因此，我们结合钉钉近10年的B端产品设计经验，鉴于未来B端设计趋势将展现出多元化、智能化和人性化的特质，从B端产品个性化、风格与质感、界面版式、品牌物料、动态、图标等多维度设计展开深度研究，与大家一道探讨B端设计的本质和趋势，期望在真正驾驭B端产品设计的这条道路上，带来些许有益的启迪。
今日，将为大家分享2025 B端品牌物料的设计趋势，深入探讨如何系统的构建和管理品牌物料体系：从精心提炼品牌战略，到积极探索客户触点创新，针对品牌物料的生产、加工和面客宣发等多元场景，聚焦于高效传递品牌一致性、强化专业信赖感、精确传递产品服务及价值，进而吸引目标客户并推动转化。
“当企业采购决策者同时收到5份方案书，你的设计怎样才能率先映入眼帘？”引用Forrester报告可知，76%的B端采购决策会受视觉专业度影响。
B端场景下，由于客户具有一些特殊性：比如决策流程漫长、涉及角色众多等，所需往往不只是产品，还涵盖配套安装、培训、维护等整体解决方案，并且更看重稳定性、信任感与长期合作价值。因而，B端产品在面向客户展示品牌服务与物料时，设计上需从品牌策略、视觉体系、场景应用、体验升级及工具支持等多个维度，传递出专业、高效、创新的形象。
随着数字化转型的影响力与日俱增，综合行业变革、技术发展以及客户需求的动态演变，在实现品牌一致性传达、提升专业信赖感以及达成目标客户转化等方面，B端品牌物料设计历经了从基础功能传达迈向多维度体验升级的不断进化：
在传统印刷时代，为我们所熟知的品牌物料核心载体包括信纸、手册、单页、展板等。
这些物料的设计呈现出高度标准化的特征：严格依照CI手册执行，该手册详尽规定了企业在各类场景下正确运用品牌元素的方式，诸如标志（Logo）、标准字体、色彩系统、宣传语等，以此确保所有对外传播信息均契合企业的形象定位与价值观。然而，这种模式也存在一些弊端，例如改版周期长、难以满足客户的定制化需求。
步入互联网时代，B端面客的品牌物料通常覆盖从线上到线下的多元场景，诸如官网、H5产品价值页、文档介绍、PPT模板、活动沙龙物料等等。不仅如此，线上产品一般还借助大量运营推广、市场传播等形式触达客户或用户。
这种方式具备诸多优势：比如制作周期短，更新迭代快，能够针对客户的不同身份与需求，实现更为定制化、精准化的服务。同时，还可通过复盘数据转化情况，持续优化和调整价值内容的呈现方式。
近年来，技术迭代日新月异，诸如Web3、AR、生成式AI等新兴技术重构了物料形态。与此同时，B端决策者的代际更替显著，越来越多年轻的企业管理者对数字叙事的接受度大幅提升。数据可视化的融入，不仅让内容更具说服力，也契合了B端客户对数据的需求。加之产品竞争同质化现象愈发凸显，当技术参数趋于相同时，视觉体验便成为影响客户选择的关键差异点。
当前，B端品牌物料设计的前沿趋势亮点纷呈：实时数据看板可与客户系统API直接相连、动态信息图表借助AE动画演示技术架构、动态数据资产化表现多样：比如阿里云以流体力学动画演绎云计算资源调度，利用粒子系统可视化AI算法运行路径；再比如AR说明书扫描设备可触发三维拆解动画，全息投影方案沙盘等，这些都为客户带来了从“单向传播”到“交互式对话”的沉浸式体验。
“在B端领域，视觉设计不是美工，而是产品价值的翻译官与商业信任的构筑者。”
我们不难察觉，B端品牌物料设计在视觉叙事逻辑上已然经历了深刻的进化：
过去
产品介绍大多局限于功能说明书层面。基于精准传递技术参数这一核心目的，形成了以“产品图 + 技术指标 + 对比表格”构成的模块化排版定式，同时采用齿轮寓意工业设备、电路板象征智能化等隐喻图形。然而，这种方式弊病明显，同质化现象极为严重，且严重缺失品牌个性。
现在
产品介绍在两方面实现了显著突破。
其一: 在叙事方式上，实现了从“我们有什么”到“你能实现什么”的理念升级；
其二: 在创新策略上，通过插画生动呈现客户现有工作流程的痛点，将枯燥的数据进行戏剧化处理，例如把“节省30%成本”转化为动态损益曲线，直观且富有冲击力。
于B端品牌物料设计的发展进程里，如何在秉持专业性的基础上，传递出饱含情感的温度，已然成为关键所在。
举例而言，当鼠标悬停（hover）在数据图表上，粒子绽放的效果瞬间呈现，为用户带来耳目一新的奇妙体验；借助材质隐喻来传达特定情感，磨砂金属质感犹如无声的语言，诉说着可靠与安心；还有别出心裁的反数字化实践：比如制作触感编码手册，让不同纸张纹理与产品特性一一呼应，磨砂纸寓意安全防护的坚实壁垒，金属箔象征尖端科技的无限探索。
与此同时，可持续物料创新层出不穷，诸多环保实践让人眼前一亮：比如采用大豆油墨印刷，让废弃手册在短短6个月内便可自然降解；电子说明书中巧妙内嵌碳足迹计算器，清晰展示环保贡献数值。像某清洁设备厂商独具匠心，其手册采用种子纸制作，客户将手册种植后，便能收获与企业LOGO形状相关的植物，为环保行动增添一抹别样的诗意。此外，展望未来生态感知期，诸如脑机接口情绪反馈设计等前沿探索，正引领着B端品牌物料设计迈向更多维的天地。
B端品牌物料作为与客户之间的沟通材料，需要兼顾品牌战略穿透力与商业场景适配性，其本质离不开以人为中心的服务和体验，不管是网页还是H5，印刷物还是空间，都大量借助“物理元素”进行可视化呈现，“有形”的体验能够加深客户对服务的记忆，强化客户感知。
接下来，我们从品牌战略层到系统层再到执行层，深入阐述如何更系统地构建B端品牌物料设计。
B端品牌物料系统设计的首要步骤，便是提炼其独特的价值观、差异化竞争优势，以及与客户建立信任的关键标识等要素。这些品牌基因的提取，应重点着眼于行业特性、技术门槛以及品牌服务定位，而非侧重于感性的情感表达。
以钉钉为例，AI时代下，我们的品牌主张聚焦于让组织和个人更敏捷、更有创造力，致力于塑造智能、简约、普惠且开放的企业形象。基于这一品牌战略，我们在设计风格（涵盖色彩、质感、版式以及传播物料等方面）、面客产品介绍，以及文案描述等多个维度，都进行了系统性的焕新升级。
B端品牌物料设计，绝非仅仅着眼于美观，更需具备策略性，以便针对不同客户场景，精准传递相应信息。
在钉钉，我们精心构建了新紫品牌物料库，无论是内部的企服人员、销售、设计师、业务PDSA等，还是外部生态服务商及其他人员，都能开放使用，实现及时共享。
例如，当线下的前线销售团队举办面对面的会销活动或客户沙龙时，为了更直观、规范地展示产品或服务，我们提供一系列契合钉钉调性的基础演示物料，包括PPT、产品介绍文档、手册、企业名片、一&五&十页纸、邀请函以及展厅氛围布置等标准模板。同时，针对各类物料，配备详细的使用说明文档和生产SOP，内容涵盖从文件下载到字体安装，从素材使用到标准输出，再从工艺制作到预算成本等各个环节。即便你是设计小白不懂设计，也能依据自身需求，迅速对接供应商，制作出精美且符合品牌调性的物料。
同时，为扩大新紫品牌物料在前线人员中的知晓度与认知度，提高物料使用频率，并确保物料使用的一致性，我们与前线团队紧密建联，定期开展线上直播培训与答疑活动。通过收集真实客户需求反馈，反哺品牌物料不断完善。
又如，当钉钉员工进行客户共创、拜访时，为保障服务专业度，提升企业品牌形象，我们会准备精美且适宜的伴手礼，并联合市场团队，输出一套完整的钉钉官方品牌介绍、钉钉集团案例介绍等物料供其使用。
值得注意的是，钉钉的生态服务商也是展现钉钉企业服务与形象的关键力量，因此，我们还为其提供统一装修建议，包括门头设计、装修风格、着装要求、解决方案手册等。
再如，在钉钉的线上场景中，钉钉官网、各业务产品H5价值页等都是客户快速了解产品的重要渠道。为提升内部人员协同效率，我们设计开发了钉钉内容运营生产平台——「叮当猫」，其中沉淀并搭建了大量关于钉钉产品功能、价值介绍、企业案例和解决方案等模板，如同精心配置的“预制菜”，使用者可直接便捷取用。
此外，在B端具体业务中，品牌物料需更具灵活性。例如，在钉钉管理套件商业化场景中，针对面客材料繁多、演示组织操作门槛高、及时迭代性差等痛点，我们打造即开即用的产品体验样板间，让客户能够快速、便捷、可视化地体验产品，加速客户决策。
最后，B端场域下，客户除了通过线下一对一或线上触达服务了解产品介绍，各类传播渠道同样是企业品牌与心智塑造的重要阵地。像大型企业发布会、产品公众号、小红书等平台，都是不容忽视的关键场景。在钉钉，我们每年定期举办大型产品升级发布会，并借助各类传播渠道持续宣传推广，不断扩大品牌影响力。
品牌物料管理在B端业务中不仅是设计规范问题，更是品牌资产运营、组织协同效能提升的系统工程。
在品牌物料投放与实际使用过程中，我们时常遭遇一些典型痛点场景，比如某会晤物料使用过期Logo、某线下展会采用过时的色彩规范、某产品价值页与白皮书技术参数不一致等。追根溯源，这些问题的核心成因在于上下游协同与一致性管理的缺失。在几十人的小型企业中，此类情况或许尚不严重，通过简单的相互“问一嘴”，便能较快达成信息对焦。然而，一旦企业规模扩张，人数达到几百、上千甚至过万，品牌物料一致性的协同管理便会变得愈发困难。因此，为更高效地解决信息不对齐、不统一的难题，建立一套标准的品牌物料管理范式用以指导物料设计与使用的准入及准出，就显得尤为必要。
在钉钉，随着智能化的全面升级，为提升品牌物料的美观度与专业度，同时提高物料调用效率、确保使用的一致性，我们与销售团队特别成立专项项目组。在企服前线代表和各业务产品代表的关键支持下，形成了 「生产部」-「加工中心」-「面客部」 的品牌物料生产、加工与调用管理机制。「生产部」的人负责做什么，再到「面客部」的人负责卖什么，而处于中间环节负责加工的人员，则如同桥梁一般，确保上下游信息传递的准确性以及品牌物料管理的一致性。比如：有人负责细化到行业或场景的demo设计，有人核心输出标杆客户案例，还有人负责输出一套完整的企业服务面客规范。做好品牌物料的一致性管理，能够极大的提升B端客户决策效率（降低认知成本），同时强化企业专业可信度。
随着行业变迁、客户需求的不断更迭以及技术的日新月异，B端品牌物料设计已悄然蜕变，从传统认知里单纯的宣传材料，逐步发展成为多维且个性化的服务与体验。当下B端品牌物料的设计趋势，聚焦于高效传递品牌一致性、强化专业信赖感，以及系统性管理好物料的生产、加工和面客宣发。从精心提炼品牌战略，到积极探索客户触点创新，每一个环节都旨在降低客户认知成本，助力企业精准传递产品服务及其价值，从而推动客户转化。
以上就是本期为大家带来的B端设计趋势之品牌物料系统设计的全部内容。后续，我们还将从动效、图标等设计趋势深入研究，期待在深耕B端产品设计的道路上，与各位携手前行，共同进步。
作者：冬然 @
本文由人人都是产品经理作者【钉钉用户体验】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
常见的B端卡片组件，应该怎么设计才可以达成更好的传播效果、传递更清晰、更完善的视觉体验？在本篇文章里，作者就结合具体案例，对B端卡片组件设计进行了技巧拆解，一起来看看吧，或许会对你有所启发。
B端设计的过程中，并不是所有元素抄一抄别人的，从组件库里引用下就完事了，而是要经过具体组织并设计。尤其在一些特殊的组件中，是可以去表现设计水平，提升项目整体视觉质量的，而不是让它们看起来非常的枯燥乏味。
这次，我们的改版主要就围绕在B端常见的卡片组件中，通过3个以前提交过的作业，来分享如何设计B端的卡片。
三个改版案例我们都遵循相同的设计方式和顺序：
在该案例中，卡片作为页面的核心对象，视觉重心不够突出，且内容的权重没有得到有效的表现，订单标识只有一个的情况反复强调对识别卡片没有任何帮助，且卡片占比过大，没必要的浪费页面空间。
所以，重构它的结构时，重点突出标题弱化标签，将卡片拆分成标题、信息、操作三个栏，让信息的呈现更简洁直观。
然后再具体优化内容和细节，对重要信息突出，固定的标题字段弱化。
最后，再根据主色的需要填充色彩进去即可。
这个案例也是设计得比较有问题的，但是忽略掉全局组件的粗糙，卡片部分的设计也是很多作品案例中的常见问题，要素过多，没有主次，在列表化的展示中，根本没办法很好的识别相关的内容和关注到有效的信息，会被淹没在繁复的字段内容中。
所以，我们用相同的方法作下区分，将内容分为上中下三个栏。
然后再对字段做权重的划分，虽然字段信息很多，但值得被突出的要素不多，企业名和数据是卡片中最重要的信息，一个用于识别卡片，一个用于查看核心的指标。
最后，再完成样式的补全即可，只在星级和用户职位上增加色彩。
问题和前面还是一样，内容很零碎，所有要素都强调，于是就没有重点。所以，下面对它们进行改版，这次因为数据项不再是重点，卡片的目标不是用来查看数据而是用于检索进入到下级页面的，所以只分了两栏。
然后，再对权重进行强调，查看详情是这里面最重要的元素，图片则没有太大的意义仅仅是点缀所以缩小。
最后，再完成相应色彩的添加和图片的填充，完成最终的视觉效果。
这三个改版都用了很简单的修改方式，通过理解卡片的作用、字段信息，对它进行信息分区，然后填入相关的字段并做出权重划分，最后再用颜色为不同的要素加权。
只要掌握这样的设计思路，做绝大多数卡片都不会有阻力，只会纠结于应该用哪套样式更合适。
因为时间关系只做了很简单的调整，没去做多套大跨度的样式变更，同时套进原图环境没做整体的处理，所以还有很多升级优化的空间，理解这个感觉即可。
作者：酸梅干超人；
本文由 @超人的电话亭 原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash ，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
这些是一些创新和不同寻常的B端系统界面设计思路，可以根据具体的业务需求和用户群体的特点进行定制和调整。希望这些思路能够为您带来新的灵感和想法！
在B端产品设计中，中后台UI设计规范的建立对于提升设计效率、保证用户体验一致性以及优化开发流程至关重要。本文从设计规范的意义、原子设计理论、后台设计系统搭建以及Design Token应用实践四个方面，详细总结了B端中后台设计的要点和方法，供大家参考学习。
今天从以下4个方面，结合7年B端设计工作经验，为大家分享原子设计理论和中后台设计系统搭建的应用实践。
分别站在整个产品设计研发流程中各个角色的不同角度，在工作中可能会有以下“抱怨时刻”：
由此，体现出搭建设计规范的作用和意义：
① 产品侧
⼀个产品不同分⽀多个团队完成的时候，可以保证产品团队使⽤同⼀份设计规范快速完成产品原型设计。保证可复⽤模块的交互体验的⼀致性。
② 设计侧
通过设计规范去解决⼤部分需求，极⼤提⾼效率解放双⼿，让设计师能去做⼀些更发挥创意和想象⼒的设计。
③ 开发侧
形成开发资产，可以提升研发效率，降低维护成本。开发⼯程师⽆需再重复开发同⼀个组件，只需要去组件库⾥调⽤即可，配合业务逻辑，⾼效完成界⾯开发，做到开箱即⽤。
④ 测试侧
标准化的设计规范，是测试⼈员最喜欢看到的。例如，设计规范规定弹窗 footer 区按钮组居右，那么测试⼈员只要测到不居右，就可以给产品提优化建议了。
设计规范中具像化的环节是设计组件化，最早可以追溯到⼯业⾰命时期，福特创造的流⽔线⽣产⽅式。福特将汽⻋分解成零部件，再把零部件模块化组装，这⼀创举极⼤的提⾼了⽣产效率。
根据资料显示，T型⻋是世界第⼀款⼤量使⽤通⽤零部件，并进⾏⼤规模流⽔线装配的汽⻋。这种⽅式极⼤地提⾼了T型⻋⽣产效率，降低了⽣产成本。
1914年，福特已经可以做到93分钟⽣产⼀辆汽⻋，⽽同期其他所有汽⻋⼚商的⽣产能⼒总和也不及于此。
到了1920年代，T型⻋的价格甚⾄降到300美元⼀辆（问世之初T型⻋的售价仅需850美元，⽽同期的竞争对⼿则通常为2000-3000美元⼀辆）。
原子设计理论最初来源于化学领域，这一点从名字可以听出来。在化学中，所有的物体都是由原⼦构成，原⼦组合构成分⼦，分⼦组合构成有机物，最终形成了宇宙万物。
2013年前端⼯程师 Brad Forst将此理论运⽤在界⾯设计中，形成⼀套设计系统，包含 5 个层⾯：原⼦、分⼦、组织、模板、⻚⾯。当公司的业务产品逐渐扩⼤时，我们就需要制定⼀套完整的设计系统，提升设计和开发的协作效率，统⼀所有设计师的输出物。
总之，将设计拆分成⼀些基本元素，例如⼀个按钮、⼀个弹窗，再根据业务需求、产品逻辑重新组装，形成最终的产品，这就是原⼦设计理论（组件化设计），区别于整体设计制造的⼀种新的⼯作流程。
原⼦是物质的基础组成部分，是构成设计系统的最基础元素。
在界⾯中以「元素」的形式存在，例如：颜⾊、⽂字、图标、分割线、间距、圆⻆、阴影等。
色彩体系
中后台产品的⾊彩体系主要分为3类：品牌⾊、功能⾊、中性⾊。
B端网站体现理性和效率特性，往往会使中性色占据九成以上，应用在背景、边框、文本和分割线。下图为颜色定义示例（考虑暗色模式）。
文字体系
B端产品的⽂字系统设计⽬标：增强阅读体验、提升信息获取效率，字体是体系化界⾯设计中最基本的构成之⼀。
字体的⼤⼩、字重、⾊彩区分体现界⾯信息的层级关系。
下图为字阶应用规范示意：
阴影、圆角、线条
阴影：在B端界⾯中，有些特殊的元素会使⽤到阴影，从阴影中我们可以看出物体距离平⾯的⾼度，距离平⾯越⾼的物体阴影越⼤；
圆角：从直⻆到圆⻆给⼈带来从严谨冰冷到柔和亲切的⼼理感受，在B端界⾯ 中，常⽤2-8px圆⻆；
线条：分割模块及辅助定位。
在界⾯中，分⼦是按照规律组合起来的元素，如：按钮、搜索框、选择器等。
以按钮为例，⽂字、⾊块、图标和间距这些抽象的原⼦产⽣关联组合成分⼦：图标、⽂字传达含义；颜⾊、圆⻆传递特性；间距、尺⼨定义规范。
分⼦+原⼦组合成更复杂和可拓展的组织（区块组件），如搜索区、卡⽚列表区、表单区、数据统计区等。
由原⼦+分⼦+组织构成的更复杂更具拓展性的模块，构成了典型⻚⾯模板，如列表⻚、详情⻚、异常⻚、Dashboard等。模板在设计系统中承载的作⽤就是保证设计⽅案在原型各阶段的⼀致性，专注⻚⾯底层架构，并⾮具体⻚⾯。
带业务逻辑的场景案例，如标注场景、权限管理、详情设置等，将⻚⾯模板填充真实的⽂字、图⽚后形成⻚⾯，即带交互逻辑的⾼保真原型图，真实内容使设计系统有了“⽣命” 。
虽然通过设计规范可以对产研流程提效，但在开发还原中还是会经常遇到⼀些棘⼿的问题。
开发还原准确度难以保证，走查几轮还有有细节问题没有修复；
领导要求开发暗色模式，或者客户要求换一套主题色，找到替换的工作量巨大；
设计一处变更，涉及多个页面模块，维护工作量大。
为了解决和优化上述的问题，Design Token 应运⽽⽣。它可以解决产品设计和开发过程中的细节、变更和⻛格⼀致性的问题，有效提⾼产研团队设计质量和协作效率。
“Token”原本的意思是“令牌，指令”，与 Design 连在⼀起指“设计变量”。在⼯程逻辑中⽤于⽤户身份与服务器端进⾏验证，⽽在设计体系中，Design Token 则可以简单理解为封装的视觉样式参数。它通过规定样式参数，并通过⼀套符合设计师、⼯程师理解的统⼀的命名规则，为这些样式参数的定义名称。
Design Token优势
设计语义更易理解：帮助设计师和开发建⽴统⼀语⾔，设计⽅案更加⼀致。从下到上的Design Token命名思路。
主题⽪肤⼀键替换：主题⽪肤的替换可以⽤在两个维度，⼀是浅⾊模式和暗⾊模式的替换，⼆是不同品牌⾊之间的替换。我们可以将不同主题的同⼀个场景下的颜⾊使⽤同⼀个 Token 命名，达到⼀键换肤的效果适配不同客户⽅案。
设计变更⾼效维护：替代传统⼯作流⼀键替换效果。例如修改二级文本的颜色，传统工作流需要先修改设计规范，修改设计稿，然后输出给开发，开发逐一更新代码，完成后提交给设计师进行走查验收。而当使用Token之后，只需要更新Token参数，就可以直接导出JSON给开发，一键自动更新。提高效率不止一点点。
设计效果精准还原：代码编辑器⾃动化提示颜⾊选择，如不正确则产⽣报错。
总结一下使用Token开发的优势：
第一步：提炼token元素；
第二步：定义命名规则；
第三步：整理Design Token资产表；
第四步：开发与应用。
接下来具体说说如何为Design Token命名，命名方式目前并没有绝对统一的要求，不过有一定的逻辑规则，可以由设计师找前端开发一起商量出一个都能通俗易懂便于理解的命名规则，
举个例子：
1.Token名称由大到小排序，中间用“-”分隔；
2.Token前缀可自定义添加公司简称，如“–el-xx” 、“–ant-xx”、“–td-xx”。
为了更好的统一规范，应用Token，建议成熟的互联网公司设计团队搭建自己的低代码平台。一键更换主题，尽在指尖。
以上就是从四个方面归纳的B端设计规范定义和总结，希望对你有所帮助！
本文由人人都是产品经理作者【Clippp】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在数字化时代，B端产品的用户体验设计正变得愈发重要。动效设计作为提升交互体验和效率的关键手段，正在成为B端设计中不可或缺的一部分。本文将深入探讨2025年B端设计中动效的趋势，从动效的历史演变、物理世界中的灵感汲取，到钉钉设计系统中的实践应用，帮助我们理解动效如何从简单的视觉装饰转变为提升产品效率和用户体验的核心工具。
回溯互联网的发展进程，从桌面端的拨号上网，到5G移动互联网，再至人工智能的助力，科技领域正在经历着翻天覆地的变革。
未来的数字世界，在沉浸感、参与度、个性化等维度对体验会提出更进阶的要求；与此同时，B端企业对于高效、简便、用户友好的界面需求与日俱增。
在2025年的当下，B端设计师唯有持续学习，适应新技术与新趋势，紧密围绕客户的业务价值展开设计，进一步注重实用性、包容性以及可定制化，方可为企业客户塑造出卓越的产品与服务。
因此，我们结合钉钉近10年的B端产品设计经验，鉴于未来B端设计趋势将展现出多元化、智能化和人性化的特质，从B端产品个性化、风格与质感、界面版式、品牌物料、图标、动态交互等多维度设计展开深度研究，与大家一道探讨B端设计的本质和趋势，期望在真正驾驭B端产品设计的这条道路上，带来些许有益的启迪。对交互等多维度设计展开深度研究，与大家一道探讨B端设计的本质和趋势，期望在真正驾驭B端产品设计的这条道路上，带来些许有益的启迪。
今天要和大家聊聊 B 端产品的动效设计趋势。我们将回顾动效的发展轨迹，从历史演变到设计哲学，探索如何从物理世界汲取灵感，并分享钉钉在动效设计中的思考与实践。
动效设计在互联网的发展历程中经历了多次变革。从最初简单的过渡动画，到如今复杂而精细的交互体验，动效的演进不仅是技术发展的产物，也映射了用户体验设计理念的不断深化。
在互联网的早期，受限于带宽和硬件性能，动效的应用较为基础，主要用于加载进度条和页面过渡，核心目的是向用户提供反馈，减少操作过程中的不确定性。典型案例是 Windows 98 时代的加载进度条和网页上的缓冲动画。这些动效虽然简单，却在当时发挥了重要作用——帮助用户理解系统状态，降低等待焦虑。
进入 2000 年代中期，Flash 技术的普及让网页动画迎来了黄金时代。Flash 赋予了设计师更大的自由度，使得网页可以呈现更丰富的动态效果，动效不再局限于状态反馈，而开始深度参与交互体验。这一时期，动效的作用从提示系统状态进化为增强用户沉浸感，例如按钮悬停时的动态反馈，炫酷的页面切换过渡，以及交互式动画（如鼠标跟随效果、小游戏动画等）。
不过，Flash 的动效过度依赖插件，影响性能，并且在移动端难以兼容。2010 年代，随着 HTML5 和 CSS3 的发展，Flash 逐渐被取代，动效设计进入新阶段。
随着移动互联网兴起，尤其是 Material Design，iOS，以及 Fluent Design 等动效规范的推出，动效设计进入了全新的阶段。这个阶段的核心理念是基于物理规律的自然动效，强调动效不仅仅是装饰，而是信息层级传递、引导用户操作的重要工具。
Material Design：强调物理隐喻与流畅性
Fluent Design：深度融合光影与层次感
由此可见，动效不再只是视觉上的炫技，而是成为提升可用性、降低认知负荷的重要工具。合理的动效可以提升用户的操作流畅度，让界面变得更自然、更具生命力。
在自然界里，每一次风吹树叶的摆动、每一滴水滴入湖面的扩散，都遵循着物理规律，展现出流畅且和谐的运动轨迹。这些自然现象不仅带来视觉上的愉悦，也蕴含着深层次的运动逻辑，为数字动效设计提供了源源不断的灵感。动效的流畅性、节奏感、反馈感，本质上都是对物理世界美学的映射。
例如，波纹扩散是我们常见的自然现象。当一颗石子落入湖面，波纹自中心向外扩散，起初迅速，随后逐渐放缓，最终消失。这个过程中的渐进减速特性为数字动效设计提供了极佳的灵感。在数字界面中，我们可以通过缓慢扩散的动画来模拟水面波纹的效果，形成一种温和的反馈感。
再比如，现实世界中的物体在运动时通常会表现出加速与减速的特性。以地球上的自由落体为例，物体从高空下落时，初始速度较慢，但随着重力作用，它不断加速。这种非匀速运动，在动效设计中被转化为缓动曲线（Easing Curves），使得用户在界面交互时感受到更加自然的动态变化。
而弹跳和反弹又是另一个物理世界中常见的运动方式。想象一颗篮球从地面反弹起来，起初速度快，随后逐渐放缓，最终停止。这种逐渐衰减的回弹，正是弹性动效的灵感来源。在界面交互中，弹性动效可以模拟物体的重量和材质，提升操作的真实感。
当牛顿凝视落下的苹果，他发现了万有引力的奥秘；而当钉钉的设计团队观察一张任务卡片的拖拽轨迹时，我们探寻的是数字世界的运动法则。在物理规律与交互逻辑的交汇处，钉钉的动效设计体系逐渐凝练出一套方法论——让每个像素的运动既符合自然规律，又服务于生产效率。
在 B 端产品中，动效远不止是视觉与交互的简单结合，更是提升可用性和降低认知成本的关键手段。它不仅承担着引导用户操作、传递信息层级、降低认知负荷的功能，还通过增强操作确定性，帮助用户更高效地完成任务。换句话说，我们正以理性与直觉，重塑效率美学。
钉钉的设计框架始终围绕视觉感官和用户体验两个核心维度展开，追崇理性与感性的精密协作：
1. 视觉感官：流畅
2. 用户体验：高效
企业级应用中，物体的运动时间需要把控得恰到好处。研究表明，人类对 100ms 以下的变化几乎无感，而超过 1s 的等待则会让用户产生不耐烦的情绪。因此，钉钉的动效体系严格遵循以下节奏，通过顺应人类大脑的认知规律，确保每一次动效都恰到好处，带来舒适的体验：
现实世界中的物体运动受到重力、摩擦力等因素影响，呈现加速与减速的动态变化。钉钉的动效体系也采用缓动曲线（Easing），以模拟真实世界的运动节奏。当数字界面挣脱线性匀速的机械感，便拥有了令人愉悦的「生命感」。
在二维屏幕上构建三维认知，需要更精密的「空间修辞学」。钉钉的动效体系确保每一次位移都符合用户的直觉，并运用空间层次感，让信息更易理解。
1. 同级物体
2. 从属物体
3. 三维空间
在动效设计中，无障碍性不仅关乎技术标准，更关乎用户的体验公平性。一个包容的设计体系，应该让所有用户——无论其身体或认知能力如何——都能平等地理解和使用产品。无障碍动效的核心，在于减少干扰、提供替代方案，并赋予用户选择权，确保每一次交互都是安全、友好的。
避免诱发健康问题：高频闪烁或快速变化的动画可能诱发光敏性癫痫等健康问题。因此，在设计时，我们应避免超过3次/秒的快速闪烁，并尽可能减少过度刺激性的动效
提供替代方案：对于依赖屏幕阅读器的用户，纯视觉动效可能难以感知。我们可以为动效添加文本描述或提供静态替代方案，确保所有用户都能理解动效传达的信息。例如，在钉钉 AI 助理中的加载场景，我们提供「正在为你生成…」的文本标签，方便屏幕阅读器用户理解当前状态
动效设计已成为现代数字产品中不可或缺的组成部分。从简单的过渡动画到如今富有交互感和情感触动的设计，动效已经不再是单纯的视觉装饰，而是推动产品发展、提升用户体验的关键力量。
真正的好动效，是那种用户几乎察觉不到的流畅交互，它能够让信息传递变得高效、让操作更加顺畅，同时也让数字产品展现出温暖的人文气息。动效，作为产品与用户之间的一座桥梁，它不仅是界面的点缀，更是效率与体验的催化剂。
未来，钉钉将继续探索动效设计的创新与实践，通过优化交互体验、提升产品效率，不断赋能用户、创造更美好的数字世界。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
蓝蓝设计的小编 http://www.lanlanwork.com
