什么是B端产品经理？和C端产品经理有什么区别？
编辑导语：B端产品的展现形式包含了很多类型，标签页、弹窗、悬浮层等等。本篇文章中作者分享了如何正确的呈现B端产品，让产品的交互体验更加丝滑。感兴趣的小伙伴们快来一起看看吧，希望对你有所帮助。
在B端产品操作中，需要高频率地打开各类链接和按钮，如果点击后需要展示新的内容，那么展现形式就包含了很多种类型，标签页、新页面、悬浮层、弹窗、抽屉等等。
在面对数量庞大的B端页面、组件、交互场景下，应该选择哪种展示形式就变成了一个棘手的问题。
本篇分享就将集中在解决如何选择正确的呈现形式上，让产品的交互体验更顺滑。
网页是一种可视化的UI界面，也是一种内容载体，它是浏览器访问网站后显示的主要对象，也是浏览器展示内容中层级最高的单位。
在同一个网站中，如果我们想要访问其它网页，就需要点击按钮或链接触发，这时候，打开新网页的方式就有两种，在新窗口/标签中打开（_blank）或者在本窗口/标签中打开（_self）。
不管是哪种，本质上都需要浏览器重新加载新的页面。对于一般的企业官网、新闻网站来说，这种加载的模式没有太大的问题，因为操作频次相对适中，用户中间会有比较长的时间停顿下来查看页面的内容信息。
而B端项目则不同，虽然也有不少查看页面信息的需求，但是包含了更多需要短平快完成操作目标的使用场景，比如修改个标题，更改商品价格，添加分类字段等。
如果所有高频操作的场景，都要重新加载页面，使用起来的 “顿挫感” 是非常强的，降低使用体验。
早期的网站加载内容必须刷新页面，所以顿挫感是难以解决的，只能想办法减少跳转流程来提升用户体验。
随着网页技术的发展，异步处理（AJAX数据交换方式）技术的应用，让网页的内容可以通过不刷新或加载新网页的形式加载和显示。
简单解释，就是早期的网页加载完成以后就是 “静止” 的，里面所有内容是固定的（不是HTML的静态）。而异步处理，就是让页面中的指定模块处于 “运动” 的状态，客户端可以在不重载网页的情况下只加载和更新这个模块的内容。
比如下面的案例，设置不同的条件选项，在过去的网页中只能重载页面更新，而使用异步处理就可以直接和服务器请求数据刷新这个图表模块，而不用重载整个页面。
所以，在B端项目中，我们不再是只有重载网页一个选项，而有了其它的选择，如下图所示。
其中，网页展示作为一个基础展示对象，我就不多做介绍了。我会通过分别介绍其它几个内容的载体，帮助大家区分它们和重载页面有何不同，以及如何正确选择内容加载形式。
首先介绍浮层，它是我对通过悬浮在页面基础内容之上的内容层的统称。例如各类气泡、提示框、下拉菜单，都是浮层的表现形式。
浮层是比较底层的形式，其展示内的容完全不需要使用一个新的页面，且和触发的元素有较强的视觉联系（对比弹窗）。
浮层并不是由内容的多和少决定的，复杂的浮层可以包含非常多的交互选项和内容信息，导致我们很容易和下方解释的弹窗搞混。
比如客户端软件常见的隐藏式侧边栏，搜索栏中展开的复杂面板，都是浮层的一种而不是弹窗。
浮层最大的特点，源自它的位置定义逻辑，它会和触发它的元素具有非常紧密的位置关系，而不是像弹窗一样无差别显示在界面或浏览器视图的固定区域。
如果我们想要显示内容，完全没到用一个新页面展示的地步（如搜索建议面板），且和触发它的控件有较强的联系，就可以考虑使用浮层来展示。
弹窗，也是一种悬浮在基础内容之上的内容层，它和浮层的不同之处，就在于弹窗通常是居中固定的显示区域，和触发它的元素没有什么位置联系。并且，弹窗可以包含的内容量级也是高于浮层的。基础的弹窗包含强提示弹窗，或类似注册登录这种表单弹窗。
而高级的弹窗，则类似下方案例，约等于打开一个独立的网页。
之所以使用这些高级弹窗作为页面载体，原因就是对原触发页面的使用和关注并没有结束，需要支持快速关闭当前的窗口并返回原来的页面中去。
比如在一个非常长的列表中，你下滑了几十页的高度，肯定不想放弃掉当前的页面位置，所以Behance或者花瓣等应用，都采用窗口模式加载新页面。
或者类似一个列表页面中需要大量创建新的数据，这些数据又不复杂。于是就通过弹窗表单的形式，快速完成创建并在原页面中再次点击 “新增” 按钮。
高级的弹窗使用除了保持原页面位置、高频操作等防止加载的原因之外，还有个更重要的特征，就是强制吸引用户的注意力到窗口上。
因为弹窗主要以模态 （Modal，后方有黑色遮罩）居中显示，通过深色蒙版进行前后隔断，凸显弹窗区域，意味着我们强制让用户关注眼前的信息和任务。
如果我们想要显示的内容，需要保留原页面状态，减少页面跳转数量，又需求用户强行关注，就可以使用这种模式展示。
最后，就是最难选择，也最容易和其它组件搞混的抽屉了。
抽屉本身的特征包含悬浮属性，覆盖在原页面之上。而我们常见的侧边栏、侧边菜单并不能和抽屉画上等号，因为他们会占用画布的实际显示区域，和原有内容同层。
比如下方案例中，Jira左侧导航（不分左右）可以隐藏收入，页面内容变大，这是侧边栏。而点击列表选项，右侧弹窗的窗口覆盖原有页面，才是抽屉。
和高级的弹窗类似，抽屉也可以当成一个独立的页面展示信息。但它和弹窗不同的是，抽屉通常是从页面的右侧展开，没有遮挡左侧的空间。它的主要特征是还需要在原页面进行交互。
比如Teambition案例中的列表，我们每开一个抽屉都还可以直接点击原列表的其它选项切换下一个抽屉，省掉关闭步骤或者原页面被遮挡的情况。
它比较适合应用在表格/列表环境中，作为表格/列表内容的详情页形式展开，这样用户可以在一个页面中快速查看不同列表的具体信息或编辑。并且，表格/列表本身的特征会将标题放在最左侧，也方便抽屉的切换。
也因为这种特性，抽屉不太需要使用模态和遮罩将左侧内容遮挡掉。如果需要通过遮挡来吸引用户注意力，那么这种情况往往更适合使用弹窗。
所以，如果不想通过新页面打开的列表详情内容，且不是强制要求用户聚焦的任务，就可以使用抽屉的形式展现。
以上就是几种基本的内容展现形式说明，时间关系还有后半部分关于如何站在系统框架级的角度使用内容载体的分享，我会留在下次分享。
如果有关于这部分的实际项目疑问，也可以在下方留言。
我们下篇再见～
作者：酸梅干超人；公众号：超人的电话亭
本文由 @超人的电话亭 原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自 Unsplash，基于CC0协议。
专栏作家
韩叙，微信公众号：运营狗工作日记，人人都是产品经理专栏作家。原猫眼电影产品运营专家，创业时经历了0到1的艰辛，在百度时规划了海量用户的玩法。从业10年，专注互联网运营领域，包括产品运营、用户运营、社区运营和UGC运营。
本文原创发布于人人都是产品经理，未经许可，不得转载。
题图来自Unsplash，基于CC0协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
本文深入分析了B端弹窗设计的尺寸规范问题，提供了科学定义弹窗尺寸的方法和思路，旨在帮助设计师提升操作效率并确保良好的用户体验，希望对您在弹窗设计上的决策有所启发。
相信大多B端设计师对web弹窗设计的规范都不陌生：比如弹窗按交互形式可分为模态弹窗和非模态弹窗；
按承载内容类型分为：提示类、操作类、展示类弹窗；按弹窗承载信息量的大小可以分为：小尺寸弹窗、中尺寸弹窗、大尺寸弹窗…等等但最近，在做一个操作提效的需求设计时遇到了需求方对弹窗尺寸的规范挑战~
大致需求是这样：为节省弹窗内对选项选择的时间，现将原本弹窗内的级联选择下拉框改成平铺按钮的形式。（见下图）ps：本平台为人工审核平台，使用用户为审核员，平台设计要为审核员的审核效率负责，审核效率一般表示为：单人单天（8小时）xxx条审核量。
问题点：承载内容信息量不固定原因：弹窗内用户选择项为不通过原因，而此选择项是用户根据自身企业的风险标签来自定义配置，这就涉及到级联选择数量的问题，有的客户风险标签体系细，多则几百个，有的客户只需要粗粒度标签，例如只有一级标签，总数可能不超过十个…
需求方：我要一个这么大的弹窗！好让信息呈现更全面！
但做设计从来不是凭空定义一个弹窗大小，要做到有理有据；前期选择先跟使用此平台的审核负责人沟通，来确定目前已接入的客户在此处自定义配置的原因数量量级并整理出沟通结论：
存在少量客户10个以内的原因个数、常规客户在30个左右的原因个数、现存一家客户使用最大量级100+原因个数。但由于控制权在客户方，原因量级不可控，未来也可能出现几百的数量。在以上结论中，可以确定出可能的备选 600px中弹窗、800px的大弹窗、或者需求方提出的将近1200px的超大弹窗，但到底哪个最为合适需要进一步判断。
在有可能的600px、800px、1200px三种宽度中选取最合适的弹窗尺寸，分别从操作效率与适配性角度对其进行判断。操作效率层面：
当原因个数在30个以下时：
若不同宽度时，都选择第一个处置原因，根据交互方法论–菲茨定律，指点设备到达目标的与两个因素有关：（1）设备当前位置和目标位置的距离（D）。距离越长，所用时间越长；（2）目标的大小（S）。目标越大，所用时间越短。
由此可见此操作的最终目标按钮为右下角的确定按钮，目标按钮大小不变，但整体的选择距离是相对两个较小弹窗要远的。D3>D2>D1，所用时间 T3>T2>T1。由于对审核员任务操作时间和效率要考虑到秒或毫秒级别，此大小对用户快速完成此操作起到负向作用。
另外，当原因个数10个以内时，可见此时弹窗宽度过宽，导致空白区域过大。
当原因个数在30个以下时，操作效率评分：
1200px ⭐️⭐️
800px ⭐️⭐️⭐️
600px ⭐️⭐️⭐️
当超过100个原因个数时：1200px 一屏内展示完全，不需要滚屏滑动；800px 可在两屏内展示完全，需要滚屏滑动；600px 超出两屏展示才可展示完全，需要滚屏滑动。
当原因个数超过100时，操作效率评分：
1200px ⭐️⭐️⭐️
800px ⭐️⭐️⭐️
600px ⭐️⭐️
适配性层面：
根据市面主流屏幕分辨率尺寸调研：
市面上存在部分 1024 分辨率的显示屏，所以：600px能够适配所有市面主流分辨率显示器；800px能够适配所有市面主流分辨率显示器；1200px不能能够适配市面主流1024*768的分辨率显示器，弹窗不能在显示器内显示完全，固适配性相对较弱。
综合三种弹窗大小的操作效率和适配性：
800px的表现最优，固选取800px的弹窗大小。
高度规范：由于信息量的不同可以根据内容多少进行自适应高度，限定max high 700px。由于一般超出800px可能出现浏览器外滚动条，所以选取高度为600-800px之间。
滚动条规范：限高后，若信息超出max high支持出现内滚动条。浏览器适配规范：浏览器窗口>800px，弹窗宽度保持固定宽度800px。浏览器窗口600-800px之间弹窗同步在600-800之间自适应。浏览器窗口<600px，弹窗宽度保持600px，出现浏览器外滚动条。
本文由人人都是产品经理作者【Clippp】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在当今这个信息爆炸、竞争激烈的市场环境中，用户体验已成为企业核心竞争力的关键因素。在这一背景下，我们启动了一项名为“简单设计”的专项优化项目，旨在通过化繁为简，重塑用户体验，提升B端产品的用户满意度和忠诚度。
在当今信息爆炸、竞争白热化的市场大环境下，企业核心竞争力的内涵已悄然变迁，不再单纯聚焦于产品或服务本身，而是将重心逐渐倾向于用户体验这一关键维度。
于招聘领域而言，B 端产品作为衔接招聘方与求职者的关键纽带，其设计的合理性、操作的便捷性以及语义的明晰度，犹如三把密钥，直接决定着用户满意度与忠诚度的高低。
今年，58招聘B端开启了“简单设计”专项优化的征程，作为项目主导设计师，我全程深度参与了从调研、剖析、设计至实施的各个环节，在这一过程中，深刻领悟到设计对于提升用户体验的非凡意义。
项目伊始，我们即对58招聘B端产品的现有用户展开了全面且深入的调研行动。
我们深知，唯有精准洞悉用户需求与痛点，方能打造出契合用户期望的产品。
为此，设计团队全员深入一线，置身于用户的实际使用环境，与各行业用户进行深度的面对面沟通。同时，我们运用多种调研方法，包括问卷调查、用户访谈、数据分析等，多维度、全方位地搜集用户信息。
在调研过程中，一系列影响用户体验的关键问题浮出水面。
其中，操作繁琐成为用户反馈最为突出的问题。众多用户抱怨，在使用B端产品时，完成诸如客户认证、发布职位、筛选简历等简单任务，往往需历经多个复杂步骤。
这种繁复的操作流程，不仅耗费大量时间与精力，更易引发用户的挫败感和不满情绪，宛如一道无形的屏障，拉远了用户与平台的距离。
此外，语义晦涩难懂也是普遍存在的问题。
B端产品中的专业术语和复杂表述，对于非专业用户而言，仿若天书，极大地增加了学习成本，甚至可能导致误解和误操作，严重损害了用户体验。
这些问题的根源，经深入分析，与传统产品设计理念的局限、对用户体验的忽视以及用户研究与沟通的不足密切相关。
基于此，我们决定从这三个层面入手，重塑设计思路，以提升用户体验。
在扎实调研的基础上，我们对问题进行了抽丝剥茧般的分析。
我们深刻意识到，若要从根本上解决用户问题，必须对设计理念进行大刀阔斧的革新。
首先，我们毅然摒弃传统的以产品为核心的设计理念，转而拥抱以用户为中心的设计哲学。用户作为产品的最终使用者，他们的需求和体验是产品设计的灵魂所在。因此，我们将用户需求与体验置于首位，重新审视产品的功能布局、操作流程以及语义表达等各个维度。
其次，我们将用户体验的重视程度提升至前所未有的高度。用户体验，作为产品竞争力的核心要素，贯穿于设计的全过程。我们通过简化操作流程、优化界面布局、明晰语义表述等手段，致力于提升用户的操作效率和满意度，打造流畅、高效的用户交互体验。
最后，我们强化了用户研究与沟通机制。深知只有深入了解用户需求与痛点，才能设计出符合用户期望的产品。因此，在与用户的每一次接触中，我们都用心收集他们的意见和建议，为产品设计与优化注入源源不断的智慧源泉。
基于对问题的深度剖析，我们开启了具体的设计工作。
设计，作为解决问题的关键环节，需要我们充分施展设计师的专业素养与创新能力，以用户为中心，对招聘B端产品进行全方位的重塑。
在操作流程优化方面，我们对现有流程进行了细致梳理和深度优化，大刀阔斧地去除了冗余步骤和环节，使操作流程如行云流水般简洁明了。
例如，在发布职位这一关键功能上，我们简化了信息填写步骤，并贴心地提供模板和自动填充功能，极大地降低了用户操作难度和时间成本，让用户在操作过程中感受到前所未有的便捷。
在语义表述清晰化上，我们对界面上的专业术语和复杂表述进行了精心简化和优化，使其通俗易懂且易于记忆。同时，对重点文案和标题进行突出处理，便于用户快速抓取关键信息，清晰知晓每一步操作的目的，辅助用户迅速决策，从而进一步提升用户体验。
在界面布局精简方面，我们对界面进行了精心雕琢，去除了繁杂的信息和多余的按钮。通过合理的布局与色彩搭配，提高了界面的可读性和美观度，营造出简洁大气的视觉体验。此外，增加搜索和筛选功能，使用户能够快速定位所需信息，进一步提升操作效率和满意度。
在整个设计过程中，我们充分发挥设计师的专业能力和创新精神，运用多种先进的设计方法和工具，如用户画像、设计原型、用户体验测试等，确保设计方案的科学性和有效性。同时，与产品经理、开发人员等团队成员紧密协作，形成强大的合力，共同推动项目顺利前行。
设计完成后，项目进入实施阶段。
我们深知，实施是设计落地生根的关键一步，需要团队充分发挥协作精神和强大执行力，确保项目顺利推进。
在实施过程中，我们采用敏捷开发方法，通过持续迭代和优化，不断提升产品的功能和性能。定期收集和分析用户反馈意见，及时对产品进行调整和改进。同时，加强与用户的沟通，通过多样化的用户调研方式，积极捕捉用户的每一个意见和建议，为产品的持续优化提供坚实支撑。
经过不懈努力，“简单设计”专项已取得显著成效。用户操作效率和满意度大幅攀升，产品留存率和口碑亦显著改善。然而，我们明白，设计优化是一场永无止境的修行。随着用户需求的持续演变和技术的不断革新，我们需持续探索与创新，以维持产品的竞争力和生命力。
展望未来，我们将坚定不移地秉持以用户为中心的设计理念，持续优化产品功能和性能。同时，进一步加强用户研究与沟通，通过持续收集和分析用户信息与意见，不断改进和优化产品设计。我们坚信，在全体设计师的共同努力下，58招聘B端产品将为用户带来更便捷、高效、愉悦的使用体验，成为招聘领域的璀璨之星。
总之，“简单设计”专项不仅是产品设计层面的优化与提升，更是对用户需求深度洞察与积极回应的生动实践。未来，我们将继续坚守这一理念，为用户创造更多价值与惊喜，同时不断提升自身设计能力与创新力，为产品的持续优化与创新注入源源不断的动力。
设计团队：老李头、王丹、温正远、崔秉鉴、赵德馨、陈浩然、刘静颐、刘春明
本文由人人都是产品经理作者【58UXD】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在效率至上的数字时代，钉钉硬件却走出一条“温暖设计”之路，从愉悦体验到隐私守护，再到多感官协同，它是如何让冰冷机器拥有心跳，重塑B端硬件设计准则的？一起来探寻。
钉钉自2015年推出后，逐步构建“软硬一体”生态，其智能硬件以“简单高效，底色温暖”为核心，通过普惠（几何美学/曲率连续）、专注（层级显隐/宁静科技）、平衡（功能-成本-环境）三大准则，将复杂B端需求转化为简约设计，设计出的产品斩获iF/Reddot等众多国际大奖，服务超1500万企业。
如今用户的需求已不再局限于实用功能，更追求情感层面的满足。
这种转变就像从”需要一台电脑处理工作”到”渴望一个能提供陪伴的机器人助手”——本质是从单纯的功能需求升级为情感连接。
通过洞察用户从本能需求到行为习惯，再到情感共鸣的完整链条，我们不断优化产品，让科技与人的关系变得更加紧密温暖。
产品与人的配合度决定了使用体验是否安全顺手，更是用户获得愉悦感的关键。我们建议从三个维度展开研究——人的使用习惯、设备性能特征、使用场景特点，通过实际测试与综合分析，最终得出科学可靠的最优方案。
让冰冷的工具性产品因为材质的改变而富有温度，让设备的立杆因为角度的改变而变得有仪式感和尊重感，以人为本的情感的设计赋予产品价值，形成用户对品牌的认知性与认可度。
2030年的碳中和战略和可持续目标已经是全球的趋势共识，这意味着产品不仅为今天创造价值，也为明天创造价值，钉钉建议从产品级的3R原则 (Reduce、Reuse、Recycle) 再到系统级的LCED（产品生命周期设计）的设计标准去思考如何给用户带来产生正向的绿色价值认同感和愉悦感的产品，再到通过设计领导力带来理念变革与循环经济。
现今无处不在的智能产品和共享数据在带来变革的同时带来了巨大的安全风险， 钉钉设计非常注重可感知的用户隐私信息保护（PBD），一直致力于通过最好的手段来守护用户安全隐私，消除用户在使用产品中“被监视”来的不安定感。
在隐私性设计上应考量如下维度：
策略-隐私保护不是成本负担，而是产品核心竞争力。
眼睛看到的不等于全部体验。我们始终相信，当视觉与听觉的韵律、触觉的肌理、嗅觉的记忆、味觉的惊喜交织成网（五感联动），产品才能真正叩击人心。这种立体的感官交响，不仅塑造独特的品牌印记，更能在用户脑海中种下记忆锚点。要让感官设计真正释放能量，设计师们需要一套系统化的设计指南——就像指挥家需要乐谱来统筹交响乐团。
钉钉设计一直致力于协调所有感官输入，以提供关于品牌价值的丰富信息和功能表达，光作为其中一条重要媒介，即是交互媒介也是内容更是品牌记忆点，其中包含了光的色彩，明暗，变化形式，以带给产品独特的识别度和无限的可能性。
声音的反馈能够在恰当的场景给予用户明确的指向和好的用户体验，同时也能很好得传达出品牌和价值主张，汽车关车门的声音是感官设计方法中最著名和最常用的例子，许多顶级汽车品牌都有独立的车门开发团队，例如梅赛德斯 SUV 的车门被调教得听起来更重，以传达它们的坚固性。
色彩是除了造型以外最能影响产品设计视觉体验的关键设计因素，中性的黑白灰建议作为产品主基调，能够适配更多场景的同时也能覆盖更多受众，限定色一般做根据产品定位的特殊版，或者局部的颜色点缀。
材质是产品外观效果实现的物质载体同样也是凸显产品定位的重要媒介，我们主张通过引入功能&情感导向材质的概念，来进行不同产品定位上的区分，同时保持理念透出的一致性。
工艺处理&图案是外观效果最后一步，为营造温润感和保证多场景下的耐用性，表面处理应注意以下两点：
1.主壳体表面处理应避免大面积高亮，避免使用大面积金属拉丝，表面质感光泽低于4分光，素色为主，可点缀亮色，避免大面积纯度过高的颜色喷涂，除窗口镜片外避免大面积亮镀，
2.肌理图案应选择低调克制的图形，以功能性为导向，例如在关键物理交互点上给予适当的触感引导或辅助。
在产品落地过程中，设计师应在量产限制与工艺要求之间平衡出最优化解，并将其沉淀成相应准则。
在效率至上的数字时代，钉钉硬件的设计选择了一条不同的路——不让技术成为压迫用户的工具，而是化作理解人心的伙伴。上篇提出的“简单高效”生态，不是把复杂功能简单堆砌，而是像拼乐高一样，用“普惠、专注、平衡”三大准则搭建出真正懂用户需求的硬件；下篇揭示的“温暖设计”，则让冷冰冰的机器拥有了心跳：它可能是电脑支架上一个微微倾斜的弧度，让你工作时挺直腰背的瞬间，感受到被尊重的仪式感；也可能是设备上一盏呼吸节奏的指示灯，用光的明暗变化悄悄告诉你：“数据已加密，请安心”；或是关机时那一秒类似合上书页的“咔嗒”声，让结束工作的动作变得像放下咖啡杯一样自然。这些细节背后，是钉钉对产品的三个坚持：
说到底，好的设计从不需要刻意标榜“高大上”。当科技能读懂人的疲惫、尊重隐私的敏感、在乎环境的未来，甚至在意你触摸机身时的指尖温度——这便是“芥子纳须弥”的真正含义：用最小的人文微光，照亮最深的数字丛林，让每个人在智能时代依然能体面地工作、自在地生活。
作者：创客
本文由人人都是产品经理作者【钉钉用户体验】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
许多设计团队在面对复杂的业务需求时，往往忽视了侧边栏设计的细节和灵活性。本文将深入探讨B端侧边栏的设计要点，并结合实际案例，分享如何根据不同行业、业务场景和用户习惯进行灵活设计，供大家参考。
很长一段时间我都觉得做B端的中台时间没什么技术含量，不就是第三方的组件，拼积木一样，拼接就好，甚至很多团队也是这么想的，早期很多的中台都没有设计师；
但是随着这几年越来越深度的B端中台的设计，做了太多各式各样的后台的设计系统，深入的进入业务，才发现设计过程中必须考虑很多细节和维度，甚至很小的点，也是有考究的。
最近我们在做侧边栏的升级，我做了市场上50+中台的侧边栏目调研，看了上万张图，越看越越是能发现针对不同的行业，不同的业务场景、信息层级和用户习惯进行灵活设计选择，需要具体问题具体分析及处理。
下面我就来总结一下我调研的这些侧边的设计分类及设计规则。
细栏（垂直导航）：以图标为主，文字辅助，适用于模块较少、内容区域需最大化展示的场景。
优势是简洁高效，但要求用户对图标含义有较高认知。
宽栏（混合导航）：图标与文字并存，支持多级菜单，兼容性强，适合复杂业务层级。这也是常见的侧边栏样式。
通过分组和标题提升信息密度，但可能压缩内容区域。
单级导航：直接展示所有一级菜单，适合功能模块较少的中小型系统（如蓝湖、Coding）。
遵循“7±2”原则，菜单数量控制在5-9个，避免用户选择疲劳;
多级导航：通过折叠面板或树形结构收纳子菜单，适用于大型企业级系统（如ERP、CRM）。
需明确可点击项与纯分类项的区分，避免交互混淆 ；
平铺模式：菜单完全展开，用户可快速定位功能（如新红小红书后台、抖音抖店等等模块）。适用于高频操作场景；
折叠/悬浮模式：侧边栏可收缩为图标或隐藏，适应窄屏设备或需专注内容的情境（如飞书的icon展开收起）。需提供显性触发按钮（如汉堡菜单）
侧边栏设计需平衡功能性与视觉体验，核心规则如下：
背景色差异化：通过深色或浅色背景区分侧边栏与内容区域，避免视觉干扰。例如，深色背景可突出白色内容区，但需确保品牌色符合无障碍标准（对比度≥4.5:1）
信息分组与留白：使用分割线、标题或间距对功能模块分组，减少信息密度。
图标设计原则：B端图标需简约且具辨识度，避免过度装饰。选中状态可通过填充色、微动效或标识线强化（如Ant Design的选中高亮）
交互反馈优化：鼠标悬停时图标变色、文字浮现；选中状态结合背景色与文字加粗，提升操作感知
响应式适配：窄屏下自动切换为图标模式，确保移动端可用性（如飞书后台的侧边栏收缩功能）
规范复用：建立统一的字号、间距、颜色规范（如主文字14px、辅助文字12px），降低用户认知成本
高频功能前置：将常用模块置于顶部（如“更多功能、功能设置等等”），低频功能收纳至底部折叠区
teambition：不仅做了更多功能，有意思的他还做了自定义导航栏的功能，支持排序，做到低成本的定制化。
权限分级展示：根据角色动态显示菜单（如管理员可见“系统设置”，普通员工仅显示“任务列表”），减少信息冗余
设计亮点：顶部导航进行功能入口切换，左侧平铺核心功能，图标与文字比例均衡；通过级分类提升信息层级
适用场景：设计协作工具，功能模块清晰且用户操作高频
设计亮点：顶部导航切换业务大类，侧边栏展开子模块；有一级也有多级菜单通过折叠面板收纳，层级深度可控。
适用场景：复杂业务，需支持多业务线交叉跳转
设计亮点：分两栏导航，窄屏下收缩为图标或者图标+简短文字；第二栏按照层级排列，客一级或者多级。
适用场景：企业级后台系统，业务场景复杂，需要多种场景切换，导航多层级切功能极多的情况
设计亮点：可自定义导航，包含排版、颜色。相对来说体验感更加，不过对应屏幕自适应要求更高。
适用场景：针对C端，功能复杂的情况
老版设计
新版设计
设计亮点：遵循原子设计方法论，定义图标尺寸（24px）、间距（8px倍数）、选中态（主色填充），确保开发与设计一致性 ，便于快速搭建新平台
适用场景：中台型系统，需快速复用组件库
侧边栏设计需以业务逻辑为核心，考虑信息层级与用户角色，同时兼顾视觉清晰度与交互效率。
未来趋势上，侧边栏的“C端化”设计（如情感化微交互、个性化皮肤）可能成为提升B端产品吸引力的新方向。
总的来说，做设计这些年，当遇到问题的时候，我觉得最好的解法就是看案例，看很多案例，爆炸式的研究一下，很多问题就有了解法。
专栏作家
三原设计，人人都是产品经理专栏作家。分享B端设计、品牌设计，原创设计文章、教程。
本文原创发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在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
蓝蓝设计的小编 http://www.lanlanwork.com
