什么是B端产品经理？和C端产品经理有什么区别？
毫无疑问，表格之于B端产品而言是及其重要的一部分，那么，如何系统掌握B端产品中的表格设计呢？本文作者从表格设计规范与交互逻辑两个角度提出了15点建议，干货满满，希望对你有帮助。
表格作为B端产品中重要的界面组成部分，承载着内容展示、数据记录等多重任务。每家产品的表格看起来构成差不多，但在交互细节上仍然有很多好的地方值得我们仔细思考。
本次通过整理10条B端表格设计规范+5条B端表格交互逻辑，系统掌握B端产品中的表格设计～
表格内的信息通过对齐，会更加规范易理解，给用户视觉上的统一感，且视线流动顺畅，能够让人快速捕捉到所要的内容。
默认展示的列数为3-8列，如果需要展示更多列数，则需要优先固定展示重要列，其余的列的内容会以滚动条滑动而展示出来。
有操作时需固定，操作项不固定时无法快速定位会降低操作效率；重要信息固定，有利于快速获取重要的内容。
宽度的尺寸大小自适应，但需要根据文字的重要性显示，重要文字内容优先完整显示。（如果由于屏幕小表格会出现省略，就要考虑多一个浏览器自带的title提示。）
注：当第一列是序号或多选项时，列宽不需要太宽，这样视觉不会显得空洞。
字符不要多，如果文字太多，就需要做文字信息精简化。同样，对于专业术语或用户不常见的名词应给予一定的帮助说明。
表格内容较多且有长文本时，长文本缩略展示；表格内容较少时有长文本，长文本换行展示。
表格中经常会出现空数据或无数据的情况，留白处理会给用户造成一定的困惑和误解，是系统没有加载出来吗？明智的做法，使用「-」填充显示。图片为空时使用图片占位符。
同一项目中的操作列命名应该保持统一，例如：常规增、删、改、查命名为新增、删除、编辑、详情。
操作项超过三个时，将操作低频折叠收起，可以帮助页面突出更加重要的信息，减轻空间压力，减少干扰。
给数据做升降区分可以快速判断数据的趋势，国内数据升图标默认为红色，降的为绿色。
全局操作为无需选择数据内容即可进行的操作，常见的有新增、导入、筛选。
批量操作就是对表格的多行数据同时操作，常见的有导出、删除。
全局和批量都不属于单个对象因此需要放在表格外，操作具体的位置排放根据操作的重要程度一次从左到右递减。
条纹颜色：标题背景色透明度60%左右；（条纹颜色视觉上应该比标题栏弱一点）鼠标hover颜色：主题色透明度10%。
当阅读丰富且繁多的表格时，由于屏幕有限，用户不得不拖动横向或纵向滚动条来阅读信息。
固定表头，能够让用户明白当前单元格内信息的属性而不至于不知道该信息的意思。固定表头也是一种界面友好性的体现。
可以让无序信息内容进行有序排列，排序分为升序和降序，一般用在数据、时间、数量上。
允许调整列的宽度来查看更加完整的缩略数据。被截断的数据，默认支持鼠标悬停时浏览器自带title显示完整数据。
呈现大型数据集时，水平滚动是不可避免的，通过横向滚动查看其它数据。将首列进行固定（若包含勾选操作，则一起固定），以便用户将数据与对象进行对应。
若表格是分页处理的，分页会放在上部、下部或上下部均有，分页固定省去了用户需要翻到顶部或底部进行操作的麻烦。
作者：谭檀檀
本文由 @Clippp 授权发布于人人都是产品经理，未经作者许可，禁止转载
题图来自 Pixabay，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
都是交互反馈和提示组件，大家可能会疑惑：文字气泡 Tooltips 和气泡卡片 Popover 的区别是什么，两者之间的应用场景如何？本文对两者的差异进行总结，希望对你有所帮助。
同样都是交互反馈及提示组件，你可能会疑惑：文字气泡 Tooltips 和气泡卡片 Popover 有什么区别？分别有哪些特定的使用场景？
本文就来详细分析下这两个组件的区别和联系，帮助你做好应用。
气泡卡片（Popover）是当用户点击 / 鼠标移入元素时，就会弹出气泡式的卡片浮层。当对于某个元素有更多的解释性描述和相关操作时，这些内容可以收纳到元素的气泡卡片中，根据用户的操作行为进行展现。
其用法特征是：
1. 用户可以在浮层卡片上进行相关操作，也即气泡卡片可以并需要承载更复杂的内容和交互功能。
2. 卡片中可以包括的内容有：文字说明，图片内容，操作按钮，相关链接等等。
3. 组件功能侧重于：承载信息和操作。即收纳并在需要的时候展示与该元素内容相关的信息和操作。这些信息的特征通常是：
文字气泡（Tooltips）是相对简单的文字提示气泡框。用户使用鼠标移入元素后显示提示，移出后提示消失。
其用法特征是：
1. 文字气泡通常不承载复杂的信息和操作，仅提供一段文案解释，也即用户在文字气泡中不能做除阅读外的其它操作。
2. 该组件功能侧重于：解释说明。即对局部内容或元素进行文字性的解释说明。通常来说该气泡是对其载体本身的解释，比如：
有同学看过 Ant Design 组件库提供的组件样例，会觉得气泡卡片 Popover 是白色背景，而文字气泡 Tooltips 是半透明黑色背景。
其实这两个组件的背景颜色上的差异并不是重点，因为这两个组件都可以使用其他颜色（比如带有透明度的品牌色）做背景底色。颜色并不具备唯一标准。AntD 就提供了多种颜色的文字气泡样式：
也许你已经发现，即使我们将一个组件的使用规范和应用场景解释得再全面，在使用时也总会出现一些特殊的业务需求和应用场景无法严格按照规范来执行。
面对复杂多样的业务需求，我们更应该学会：在理解业务需求的基础上，合理调整组件的使用方式和样式。
组件的规范对设计师来说并不应该是限制或约束，而是一种能够帮助我们快速实现产品设计一致性，保证基础体验的快速方式。
专栏作家
元尧，人人都是产品经理专栏作家。
本文原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
编辑导语：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
蓝蓝设计的小编 http://www.lanlanwork.com
