什么是B端产品经理？和C端产品经理有什么区别？
“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
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
我们需要了解一下设计模式，例如它是什么、什么时候用、怎么使用，可以让我们在没有参考的情况下，也能设计出合理、好用的界面。
把不同的内容模块，放到一组顺序排列的面板中，这些面板每一个都可以折叠、可以展开，互不干扰。
你需要在页面上显示大量各种各样的内容，可能包括文本、列表、按钮、表单控件等，而你又没法把它们都显示在页面上。
1、用户可能一次只需要查看一个模块的内容。有些模块比别的模块更长或更短，不过它们的宽度一样。
2、这些模块组成了一个工具箱，或者两级菜单，或者包括一些交互式元素的某种结构，这些模块的内容要么彼此相关，要么彼此类似。
3、要注意的是，当一个大模块打开或者打开了很多个模块的时候，模块底部的标签可能会滚动到屏幕或窗口的外面。如果这一点对用户来说有问题，那就要考虑一下其他的解决方案。
竖向排列这些模块，并使用对于用户来说有意义的排列顺序。
例如：QUICK BI 右侧折叠面板，顺序是从大到小，从外到内。
为每个模块选择一个简短而富描述性的标题，并把这个标题放到一个横条上，让用户可以单击它来打开或关闭这个模块。
也可以用一个可以变换方向的三角形图标来提示打开/关闭的操作：关闭的时候向右或向下，打开的时候向上。
一次允许打开多个模块。
人们在这个问题上有一些不同的看法，有的人喜欢一次只能打开一个模块。不过根据经验，特别是在各种应用里，一次允许打开多个模块更合适。这样可以避免一个之前打开的模块突然消失，这样会让用户觉得很粗鲁，也很意外:“喂, 那个菜单哪里去了?之前就在这里的!
当用户在登录状态时，折叠面板应该在多个操作期间，保持它们各自模块的打开和关闭状态，这点很重要。
如果模块内容需要进一步拆分，折叠面板还可以级联使用，不过这样看起来会有点混乱。 因此只用一个一级折叠面板模块更合适，如果有必要可以采用其他结构代替，比如tab页。
把页面上的内容组合到几个不同的区块里，每一个都可以独立打开或关闭。可以随意在界面上放置这些区块，用户还可以移动它们，形成自己定义的布局。
你正在设计一个桌面应用（例如：钉钉、飞书）或者一个网页应用（例如：纷享销客、ONES），应用中会涉及看板、工作台、仪表盘、数据分析等页面，你希望用户对这些页面有一定的控制权。 这些页面应该是应用中的主页面、是用户会经常查看的页面。
在这个页面上，需要显示大量各种各样的内容，可能包括文本、列表、按钮、表单控件、图表等，而你又没法把它们都显示在一个模块上。
1、用户想同时查看好几个模块。
2、不同的模块对每个用户来说，有着不一样的价值。例如，有些人想看到A、B、C这三个模块，而另外一些人可能想看到的是D、E、F。 3、在空间大小方面，各个模块差异可能比较大。例如，用户希望把信息少的模块缩小。
4、模块在界面上的位置对用户来说很重要。例如，重要的内容用户希望放在前面。
5、有时候模块数量比较多，用户不希望全部展示出来。例如：用户汇报工作时不需要这个模块，可以把它先移除，汇报完后，再添加回来。
6、控制这些模块的功能可能是一个工具条，或其他交互式结构的组成部分。
因为不同的用户关注点也不同，他们希望能自己选择想看的内容。 可以把需要的内容放到显眼的位置，把不需要的东西隐藏起来。同时，他们还可以利用“空间记忆”来记住不同的内容在什么位置。
空间记忆：当人们需要使用某个东西时，经常是通过回忆它们的位置来寻找它们，而不是它们的名字。 例如：你因为有事外出，需要同事打开你的电脑帮你发一份文件，通常你也说一句文件好像再桌面的右边，这也是利用了空间记忆帮助快速寻找。很多软件把对话框的按钮（确定、取消）放在右下方，有一部分原因也是考虑到用户的空间记忆依赖性。
总结：使用可移动的面板可以让用户的工作效率更高，工作更舒服。
为每个模块提供名称、标题栏和默认尺寸，并为它们提供合理的默认设置。 让用户按自己的喜好在页面上移动这些模块，如果可能的话，可以提供拖曳功能。
让每个模块可以通过简单的操作进行编辑和隐藏，也可以考虑让用户可以彻底移走这些模块，在标题栏上放一个关闭按钮就可以。
可移动面板要清晰的体现编辑与预览状态，如果用户误操作打乱模块顺序，需要提供一个“恢复默认设置”的按钮。
把次要内容和可选内容放到用户能自己打开、收起的面板里。
你需要在页面上显示大量各种各样的内容，可能包括文本、列表、按钮、表单控件等，而你又没法把它们都显示在页面上。 同时，还可能有一些适用中央舞台模式的内容需要在视觉上优先处理，需要把面板收起。
1、这些模块为界面上的主要内容提供注释、修改、说明或支持。（例如：WPS右边的快捷键、样式、帮助、资源）
2、这些模块可能不是很重要，不需要默认展开。
3、对不同的用户来说，它们的价值并不一样。（例如：图中新手入门指导，老用户可能并不需要）
4、甚至对同一个用户来说，这些模块可能有时候非常有用，换个时间就不一定了。当 它们收起的时候，这些空间最好留给界面上的主要内容。
5、这些模块之间可能彼此没有多大关系。当用到Tab和折叠面板时，这两个模式会把各个模块组合到一起，表示它们之间有一些关联，而可收起面板不会对内容进行分组。
把无关紧要的内容隐藏起来可以让界面变得简洁。
当用户选择隐藏某个模块时，只要简单地收起这个模块就可以了。 它所占用的空间也会还给主要内容。
这也是渐进式展开原则的一个例子—只在用户需要的时候，需要的地方立即显示那些隐藏的内容。
总的来说，想让界面保持整洁，通过对内容进行分组和隐藏是非常有效方式。而可收起面板、Tab、折叠面板、可移动面板，这4种模式正是有效方式的工具。 如何使用
把内容放到一个单独的面板里，让用户可以用一次单击来打开或关闭这些面板。 可以利用引导性的文字来表示这里可以展开（例如：更多），也可以利用三角形的图标来表示这里可以展开。
当用户关闭这个面板时，把它所占用的空间收起来，用来显示主要内容。
也可以在打开和关闭这些面板的时候加上动画效果，这样会让打开和关闭时的过渡更加平滑。
如果有多个模块要用这种方式来隐藏，可以把这些模块放在一起，或者用Tab、折叠面板来组织，还可以把它们分开放在主界面上。
如果发现大部分用户都打开了一个默认为关闭状态的可收起面板，那么应该让它默认打开。
谢谢大家观看！
蓝蓝设计的小编 http://www.lanlanwork.com
