前言
回溯互联网的趋势发展进程 ，从桌面端的风格拨号上网 ，到 5G 移动互联网 ，和质再至人工智能的感篇助力，科技领域正在经历着翻天覆地的设计变革 。未来的趋势数字世界 ，在沉浸感 、风格参与度 、和质个性化等维度对体验会提出更进阶的感篇要求；与此同时 ，B 端企业对于高效 、设计简便、趋势用户友好的风格界面需求与日俱增 。在 2025 年的和质当下，B 端设计师唯有持续学习 ，感篇适应新技术与新趋势 ，紧密围绕客户的业务价值展开设计 ，进一步注重实用性 、包容性以及可定制化，方可为企业客户塑造出卓越的产品与服务 。
因此 ，我们结合钉钉近 10 年的 B 端产品设计经验 ，鉴于未来 B 端设计趋势将展现出多元化、智能化和人性化的特质 ，从 B 端产品个性化、风格与质感 、界面版式、图标、动态交互等多维度设计展开深度研究 ，与大家一道探讨 B 端设计的本质和趋势 ，期望在真正驾驭 B 端产品设计的这条道路上 ，带来些许有益的启迪 。
今天，我们要给大家分享的是 B 端产品风格&质感 ，为企业塑造品牌形象 、为个人用户提供情感价值 。
一 、从技术发展看 UI 设计风格的演变
设计作为科技和艺术的结合，UI 设计风格的演变不仅与技术的发展密不可分 ，而且与艺术创作风格的发展有着异曲同工之妙 ，都经历了抽象—具象—抽象的过程。
第一阶段 ：萌芽风格
20 世纪 70-80 年代是计算机图形界面的萌芽阶段 ，就像绘画艺术起源之时的那个茹毛饮血的年代 ，当时的原始人所能利用的工具只有火堆熄灭后留下的木炭，图像呈现的载体也只有山洞内的墙壁和岩石 。就像刚刚进入计算机时代的设计师们，不仅缺少专业的绘图软件 ，而且当时计算机本身的显示能力也尚且不足 。这个阶段的 UI 设计 ，能够在显示器上清晰地显示并传达明确的含义 ，比画出风格更加重要 。观察当时的操作界面，不难猜测当时的设计师 ，努力以具象的表现风格来减少人们对计算机界面的陌生感 ，但由于工具和载体的限制无法完美实现，虽然这种风格无法被称为拟物风格 ，但为后来真正的拟物风格的出现和发展奠定了基础。
第二阶段 ：拟物风格
1995 年 ，家用计算机的显示能力迎来了质的飞跃 ，Windows95 发布 、对真色彩的支持 、PhotoShop5.0 的发布......技术进步和专业软件的加持让设计师突破了过去创作工具和呈现载体的限制 ，就好像在山洞里用木炭绘画的原始人 ，拥有了画笔 、颜料和画布 。设计师的创作空间和写实能力得到极大提升 。
与此同时，个人计算机和手机开始普及 ，图形化的操作界面不再是科研人员和专业人士的专属 ，而是普通人工作学习中的一部分 。为了让没有接触过图形化操作界面的用户快速识别图标代表的功能，最好的方式就是在界面中对现实世界中的物体进行还原，这便推动了拟物风格的发展 。
拟物风格的设计作品 ，通过模拟现实物品的造型和质感，通过叠加 、高光、纹理 、材质、阴影等效果对实物进行再现 ，让用户以极低的学习成本快速熟悉图形化的操作界面和产品功能，并以符合日常习惯和直觉的方式引导用户进行交互 。
例如在 ios6 中的相机 icon ，对镜头部分细节刻画非常细致 ，用户很容易联想到使用真实相机时能够做到的事情 ，这对用户理解和熟悉某一个产品功能的帮助无疑是巨大的；再比如同样在 ios6 中的书架 icon 设计也十分精彩 ，不仅对真实报刊架的结构和质感极度还原 ，而且对书架内的杂志也进行了展示，用户甚至能像真的面对一个书架一样看到书架中的内容 ，小小的 icon 中信息含量极高 。
第三阶段 ：扁平化风格
到 2013 年左右 ，智能手机在全球主要国家和地区的普及率大幅提高 。根据统计数据 ，许多发达国家的智能手机普及率超过了 50% ，发展中国家的智能手机普及率也在快速上升 。大部分用户已经对图形化的操作界面非常熟悉 ，无需那些极致写实的风格也能快速理解图形背后的含义和功能。同时 ，越来越多的信息和应用涌入智能设备 ，拟物风格所推崇的肌理、质感、光影......带来精致效果的同时，也让细节变得冗余，如何处理爆炸的信息成为 UI 设计的首要问题 。就像 19 世纪摄影技术对传统写实绘画艺术的冲击 ，让艺术家们重新思考绘画艺术的发展方向一样 ，拟物风格的极致具象化在达到巅峰之时也渐渐到达了转折点 。
2013 年 9 月 ios7 发布 ，并且首次在 UI 设计中采用了扁平化的设计风格 。这种风格摒弃了拟物设计风格中的写实光影、肌理 、冗余的细节 、甚至放弃了体积的塑造以及一切可能会对识别产生干扰的元素 ，只保留对用户最关键的信息，呈现出十分干净整洁的视觉效果 。
然而物极必反 ，扁平化设计的极致简洁 ，容易让长期使用的用户感到冷淡和无趣 ，于是新拟物风格应运而生 。
新拟物融合了拟物和扁平两种风格的特点 ，在光影和立体效果方面较为写实 ，元素通常是凸起或凹陷于界面之上，视觉上错落有致，但是在色彩和造型方面则更偏向于扁平化风格 ，图形往往经过一定的简化和抽象 ，并搭配少量简洁的主观颜色。但是新拟物风格过于依赖投影和立体效果对界面元素的区分 ，很难呈现复杂的信息层级 ，而且微妙的对比度也不利于无障碍识别 ，所以这种风格并未真正大面积流行和使用。
二 、AI 时代的 B 端设计风格趋势
2022 年 ，ChatGPT 发布 ，AI 在自然语言处理方面达到了前所未有的高度 ，同年 Midjourney 和 stablediffusion 的出圈让每个人看到了 AI 生图的魅力 。不仅各种 AI 应用和网站如同雨后春笋般出现，而且各行各业的 APP 都在争前恐后的升级自己的 AI 能力 。这样的时代背景，为 UI 设计提出了一个新的命题 ：如何用设计展现应用的 AI 能力以及企业的智能化心智。
趋势 1 ：多变丰富的色彩
色彩在 B 端设计风格中占据着至关重要的地位 ，能够带给用户非常强烈的直观感受 ，是用户对产品和品牌的第一印象。例如蓝色就是过去对 To B 或科技产品的色彩印象 ，诸如英特尔 、微软 、联想、戴尔、IBM...这些品牌通过蓝色来传达简洁 、未来感和高科技等视觉感受 。但是这个标准并非是一成不变的 ，越来越多的 B 端设计，选择使用丰富的色彩来表达智能化千变万化的特点 ，科技感的表达不再是千篇一律的冷色 ，而有了更多的变化 。
弥散渐变
弥散渐变是一种借助模糊效果将多种颜色进行混合的特殊渐变形式 ，多种颜色的混合以及不规律的渐变走势 ，让弥散渐变具有很强的氛围烘托效果和表现力 。晕开的色彩仿佛在一片虚空之中慢慢弥散开来，细腻 、柔和又梦幻 ，很适合用来提升界面的局部氛围 。
① 优秀的场景适用性
在 B 端设计中 ，屏效和识别尤为重要，利用图形或插画的形式烘托氛围 ，往往需要占用更多的空间 ，并且在网页端的适配过程中 ，容易产生图文重叠带来的识别的问题 。而弥散渐变由于其模糊和明度均匀的特点 ，可以在为画面贡献丰富度的同时 ，不产生视觉上的焦点 ，所以在适配过程中也不会产生图文重叠的问题 ，具有很普遍的应用场景。
② 高效的场景拓展
在调整渐变时 ，通过保留一些相对清晰的轮廓 ，弥散渐变还能呈现出虚实结合的视觉体验 ，让画面更具动感和层次变化 ，就像一面磨砂玻璃后飘浮着一些真实的物体一样 ，十分具有空间感 。虚实的变化让色彩有了具体的造型 ，可能是一段波浪、一个球体 、或是一座山丘......这样的背景配合一些简单的排版 ，便可以是一张海报 、一张 banner 、一个推送封面......这无疑为高速迭代的 B 端设计提供了一个高效的解决方案。
动态变化
根据资料显示，手机软件的 AI 生图时长一般在 10 秒至 120 秒之间，AI 搜索平均时长大致在 2 秒到 15 秒之间 ，专业的写作 AI 成文时间大致在 3 秒到 30 秒......
AI 应用伴随着大量的等待时间。使用动态变化的颜色能够降低用户在等待期间的焦虑感 ，并且不断变化流动的色彩也能暗示用户，当前仍处在"生成中"的状态下。例如用户在等待钉钉 AI 助理回答的过程中 ，聊天气泡会呈现出多彩的流光效果；用户在与 AI 助理进行语音交互时 ，整个屏幕边缘会呈现动态的彩色光效 ，以表示当前的 AI 激活状态 。
除此之外 ，全屏动态的渐变背景还很适合用在信息不多的功能或应用首页 ，例如在钉钉的登录页面 ，屏幕近三分之二的空间中只有简单的文字动画 ，搭配全氛围的动态渐变背景 ，不仅清晰地传达品牌的智能化心智 ，而且为"登录"这一操作增添了满满的仪式感 。类似的还有钉钉 AI 搜索的功能首页，大面积涌动的动态渐变 ，充分在视觉层面展现了智能化的心智 ，而且大面积的留白也让钉钉 AI 企业搜索的功能价值描述显得格外突出 。
趋势 2 ：微妙克制的质感
虽然新拟态风格并未大规模的使用和流行 ，但其衍生和沉寂的背后反映了设计的本质就是一场功能和审美之间的角逐。B 端设计更是如此 ，用户侧需要美的设计来愉悦工作中的心情 ，但又不想被花哨的色彩和装饰干扰工作效率 ，企业侧需要摆脱沉闷古板的刻板印象 ，但同时也需要呈现专业、科技的高大形象保持可信度。微妙克制的质感表达为这种"平衡"的实现提供了解决思路。
玻璃拟态
玻璃拟态是 2020 年末开始流行的设计风格 ，顾名思义就是对玻璃这种材质的一种拟物化设计 ，玻璃拟态风格相较于新拟物风格最明显的进步在于 ，它巧妙地利用玻璃这种材质解决了新拟物风格中元素边界不清晰 、难以体现复杂层级等问题 。其风格特点可以总结为以下特点 ：
① 通透 ：
由于磨砂玻璃的通透性 ，在界面中存在多个层级时，会呈现出一种虚实结合的美感 。并且其透明的属性 ，能够很好的暗示用户目前所处的位置 ，利用此特性 ，不仅能更沉浸的展现用户当前关注的信息 ，而且"叠加"而非"跳转"的交互逻辑也极大减轻了用户操作时的心理负担 。
② 悬浮 ：
传统的拟物风格往往会塑造一个地面 ，再将图标"放置"在上面。而玻璃拟态风格则更像是构建了一个"无重力"的虚拟空间 ，界面中的元素有明显的悬浮感 ，显得十分轻盈 ，同时也非常适用于 B 端场景下对于科技感的体现 。配合投影 、虚实对比 ，用户能够清晰地感受到元素在空间上的高度差异 ，不仅保障了信息的可读性，而且让可交互元素更具点击感 。
③ 微妙：
由于磨砂玻璃的物理特性 ，页面背景在经过"玻璃层"的模糊处理后会变得十分柔和 ，类似上文所述的"弥散渐变" ，呈现出一种明度均匀，没有视觉焦点的状态 ，无论是动态还是静态都能很好的保障前景文字 、UI 控件等元素的可识别性 。并且在玻璃拟态风格中 ，常常使用轻薄微妙的边框来强化物理质感 ，这种既作为描边 ，又作为"玻璃"的厚度的处理方式 ，让卡片能够以一个恰到好处的对比度呈现在界面中。
综上所述 ，玻璃拟态风格在拟物程度上找到了一个很好的平衡点，既为枯燥的 B 端设计提供了真实感和趣味性 ，又保障了复杂信息情况下的识别度 。并且由于玻璃光滑、透明等物理特性 ，也为"科技感"的视觉呈现提供了新的方向 。
柔和光影+微质感材质
与 C 端设计中常用强烈的光影效果吸引用户不同，b 端设计相对更加沉稳 。对比阿里云 、WPS 、钉钉 、腾讯云的官网首页，都不约而同地使用了非常柔和的环境光 ，这种光影设计，在保障整体亮度的基础上 ，不会产生明确的光照方向和阴影效果 ，并且在材质选择上，也都使用了高光、反光均不明显的漫反射材质或微质感的毛玻璃材质，整体视觉感受十分沉静和整洁。
趋势 3 ：清晰明了的图形
图形在设计中扮演着两部分角色 ，一方面图形作为页面的装饰需要保证审美的愉悦性 ，另一方面图形也作为文字信息的补充 ，需要传达某些特定的含义 。好的图形设计不仅能为整个页面的氛围添光加彩 ，而且能帮助用户更好的理解文字信息。
规律感的几何图形
在 b 端场景下，常常需要借助图形表达一些抽象的概念 ，例如 PaaS、服务器 、AI 、用量 、科技 、流量......这类含义并不直接对应一个特定的造型 ，使用有规律的几何图形 ，似乎是一个不错的选择 。这些技术概念的背后来自于二进制中 0 和 1 的组合 ，而将几何元素有机地排列 ，甚至衍生出不同的形态的过程 ，不是正如代码的编写吗 ？
简洁高效的手绘元素
在当下的 B 端设计领域 ，越来越重视情感关怀和个人用户的体验 。在页面中使用具有手绘感的元素或使用直接使用手绘图案作为配图，不仅能够快速拉近品牌和用户之间的距离 ，塑造年轻化、有亲和力的品牌形象 ，也能提升用户在使用产品工作时的愉悦感 。这类充满轻松感的图形比起传统的插画或 3d 建模更加简洁 ，色彩鲜明 ，具有很强的表现力，并且设计成本也更低 ，十分适合作为一些小而美的产品配图 。
例如 Google 推出的 Material design 的设计语言就大量使用了抽象且配色艳丽的手绘元素作为配图 ，这类图案更加强调色彩并不过多细化造型 ，穿插在文字之间 ，让深色背景的页面一下活跃了起来 。与此类似的还有 figma 的官网 ，设计师将软件内的部分工具比如线条 、线框 、锚点 、指针等元素抽象出来作为插图 ，不仅简洁耐看 ，而且十分具有自身的品牌特色。
除此之外 ，利用手绘线条来表现 hover 的交互状态 ，圈画重要的文字信息 ，或是进行操作引导 ，也具有极高的效率 。简单的箭头或者波浪线 ，能够非常直接地将用户的注意力指引到重要信息处 ，就像学生时期在书本上圈画重点一样 ，感受上十分自然而亲切 。仿佛应用的设计者悄悄在用户耳边说了一句小 tips，而不是粗暴地把信息丢到用户眼前 。
结语
无论是拟物风格时期的极致写实 ，还是扁平化风格时期的极简 ，又或是 AI 时代的多彩绚丽 ，设计风格的发展始终围绕着技术发展的主线 ，其发展的目标，始终围绕着如何让当前时代的用户更好更便捷地享受到技术应用带来的便利 。一个好的 b 端设计风格 ，不仅能够帮助企业展现品牌心智和技术上的先进性；而且能够让个人用户更高效且愉悦地完成工作任务 。在未来的 B 端产品设计中，我们应该始终坚持形式服务于功能和以人为本的原则，探索更适合业务场景的设计风格 ，为用户带来更加舒适自然的视觉体验 。
以上是本期带来的 B 端设计趋势之个风格篇。接下来 ，我们还将从版式方面 ，与大家共同探讨 B 端设计的本质与发展趋势 。
作者 ：钉钉用户体验
