很多情况下，用户选择一个产品的理由是有没有某个功能，但弃用的理由却常是产品好不好用。能否打造优质的B端用户体验，成了影响B端产品用户续约的一个关键因素。
(1）流程越短越好。 我们在上班、逛街的时候，倾向选择一条最短的路线，希望用最少的时间到达目的地。用户操作系统时也希望这样。
(2）整合功能场景。 某个功能由谁、在什么场景下操作，以及可能会遇到什么问题、需要什么关联功能来解决，如果功能点相互独立， 关联很少，会让用户用起来很不顺手，有种断层的感觉。
（3）有效指导异常。Saas 有一个特点是功能模块间会尽可能相互独立，基础数据的设置和业务上面的使用往往是在不同的功能模块内。这会导致B端用户在遇到空数据的情况下， 可能不知道该怎么操作。这时，需要要提示用户按具体步骤操作来顺利完成任务。
交互体验，对上承接了业务，对下承接了视觉。好的交互体验能让业务流程简捷，更关注用户习惯。 B端产品的交互和C端产品差异较大，C端常用的移动客户端屏幕小，可显示的内容较少，需要不停地跳转完成操作，但B端产品大多用电脑来操作，一页可显示的内容较多。所以做B端产品交互一般需要注意下面几点：
(1）少跳转。曾有用户反馈，说某个功能操作流程太长了，操作起来很麻烦。通过走查发现流程其实是没有问题的，不能再缩减流程了。通过可用性测试发现是因为跳转页面导致，用户在操作时去了另一个界面，然后再返回来，让用户在操作时感觉流程更长。于是就把页面跳转优化成了弹窗，弹窗里面操作完点击关闭即可， 改后用户觉得流程缩短了，操作效率更高了。
B 端产品能用弹窗的时候，不要跳转，哪怕弹窗里面加弹窗，只要不跳出这个页面，用户都会觉得没有阻断他的操作。虽然，从交互的角度讲，弹窗里再加弹窗不符合规范，但在实用性面前是可以商榷的。
(2）少弹窗。 相比弹窗，在某些场景下，有更好的处理方式。比如，直接放页面上。 弹窗是点击按钮触发的，自动完成操作后关闭，或者用户手动关闭。虽然比跳转好，但比不上在页面上直接呈现高效。
页面上直接呈现是理想状态。但是往往因为内容太多，很多时候不得不隐藏起来。直接呈现对于页面的布局和设计都有极高的要求，原则是高频且重点的内容外露。
（3）交互形式统一。 整个系统里面的交互规则要保持一致，大到弹窗的出现形式是居中弹出还是右侧滑出，小到多选控件是不是一致。 在整个系统里面相同的业务都用同一个控件。虽然可能由于一些业务的特殊性， 需要对控件做个性化处理，但不要影响整体的一致性。
(1）信息清晰。 信息清晰不仅指信息结构的层次，还包括页面的内容，最好让用户一眼就能看到上面写了什么，有什么功能。有些设计师不喜欢加黑、大、粗的字， 觉得不够高级，而是根据自己的美感把字体设计为一些个性化字体，且字号不大。
很多时候B端用户的操作时间比C端用户长，他们需要长时间盯着页面，所以页面信息清晰就能减少他们的疲劳。
(2）信息紧凑。 当页面上想要呈现的内容较多时，设计师一定要压缩空间，使布局合理紧凑。
(3）少用图标。 有时候，设计师会使用图标来代替文字表达，并花大精力设计很好看的图标。图标的应用在C端产品中非常常见，一是为了节省空间，二是为了美观。但在B端产品中，大多数情况下，图标越少越好，有时文字的简写比图标来得直观易懂。图标过多用户需要使用很多遍才能记住每个按钮的含义。
B端产品设计需要非常重视用户体验。这直接影响到用户的工作效率，转而影响到软件的续约率。 为打造好的用户体验，我们通常从业务层面、交互层面、视觉层面来着手提升用户体验。 很多时候，有些好的交互方案会受到技术框架的限制，导致方案无法实施。
但是为了产品获得更好的用户体验，首要考虑的依然是用户的使用流畅度、易用性，而不是实现的复杂程度、系统现有框架的限制、现有规范的标准。 系统上的难点应当留给内部去解决，把最大的便利性留给用户。这样我们才能获得更好的产品口碑、更高的续约率、更大的市场。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
写在最前
B端界面的元素众多，视窗范围大，布局设计多种多样，为了简化布局思维，我们通常给界面添加三个方向上的轴-X、Y、Z。X轴指水平方向上的轴线，Y轴指竖直方向上的轴线，以及Z轴指在三维空间中垂直于视窗平面的轴线。当设计B端界面时，让元素沿着这三个轴进行布局，既能理清我们的设计思路，页面的元素也能展示得更有逻辑。
本文围绕这三个轴，来看看在B端界面的三维空间里，都有哪些设计规律。
一、X轴的布局与适应
B端界面在PC视窗下展示，范围更大，如常见的分辨率尺寸有1280x1024、1440x900、1920x1080等，且浏览器还支持动态拖拽改变视窗宽度。所以B端界面在X轴上应该更注重内容的延展和适配，合理利用横向增长的空间。根据这一特点，在这一部分中，我们分业务场景来探讨都有哪些典型布局，并针对每一种布局给出合适的适配方式。
B端典型的业务场景，可大致分为表格、图表、表单、卡片、文字详情五大类页面。这几类界面在X轴上排列的方式为单栏型、双栏型、多栏型。如果有侧导航，则在页面最左侧增加侧导航即可，内容区的布局不受影响。
1.单栏型
表格、图表，这类需要较大展示空间的场景，一般一个页面只有一栏，不再在横向空间进行切割。当视窗横向拉伸时，也为了预览更多的内容，表格和图表进行横向拉伸，保持撑满视窗的状态。
2.双栏型
表单、文字详情类的页面，采用双栏结构的概率较大。因为表单页除了表单本身的内容外，往往还有右侧的辅助说明面板，或者是预览面板。文字详情页的右侧也经常出现其它阅读内容的推荐列表。当这两类页面视窗在横向拉伸时，适应的方式通常有两种。
1）主模块宽度拉伸，始终撑满视窗，副模块宽度固定。如果主模块每行内容都比较多，推荐使用这种方式，能更大化地浏览主模块的内容，减少不必要的换行。但缺点是，由于内容本身如表单项、详情文字等在X轴上占用的空间不多，他们所在的模块横向拉伸后，会出现很多留白。
2）各模块保持宽度固定并居中展示，不跟随视窗伸缩而变化。如果主模块每行内容不多，又需要频繁的左右对照，推荐使用这种方式。
3.多栏型
多栏型页面一般用于数据看板、媒体卡片(视频/图片)的展示。因为这类业务场景，卡片数量多，无法简单地将页面进行区块的分割，所以以卡片为单元来填充页面。当视窗横向拉伸时，这里也会出现2种适应的方式。
1）数据看板类页面，每个卡片等比拉伸（也可仅横向拉伸），列数不增加，让图表能展示地更清晰。
2）媒体卡类页面，卡片需要设定一个最佳展示的宽度如w，当视窗拉宽时，卡片等比放大。当页面拉宽到能增加一列宽度为w的卡片时，所有卡片宽度都恢复到w，增加一列。
上述说了这么多适配的规则，当然我们也可以给视窗设定一个统一的适配上限，避免当视窗非常宽时，页面的元素过于左右分离，反而不方便浏览。比如我们可以设置当视窗宽度＞1920px后，页面元素就不再跟随撑满，达到内容区宽度上限值，居中展示在界面中。
二、Y轴的空间利用
B端界面，面对复杂的信息，我们往往会面对两类问题，如何承载大量的信息，如何区分强弱主次。这就涉及到页面Y轴的空间利用了。这里我们提供4个小办法来解决上面的问题。当出现大量信息时，应该注重Y轴空间的扩展，合理搭配翻页、加载等逻辑。当希望对页面元素区分强弱时，可以搭配滚动吸顶、局部折叠等交互，有序展示更多信息。
1.如何承载大量信息
1）替换型对于表格类页面，为了方便快速查找所需信息，采用分页器的方式展示更多的数据内容，即把当前页内容做替换。即页面Y轴的高度是固定的，仅做内容的变更。
2）向下延展型
对于瀑布流类页面，由于数据量大，且没有快速定位的诉求，使用无限加载的方式，向下加载更多的数据，这种类型的页面Y轴可无限延展。
2.如何区分强弱主次
1）强-滚动吸顶当页面滚动到某个位置，需要去强调一些导航性质的内容时，我们可以使用滚动吸顶的交互，即当把这个元素（如标题）滚动至当前视窗的顶部时，发生吸顶事件，始终停留在页面中，该元素所引领的模块在其下方滚动浏览。当把这个模块滚动完，吸顶交互失效。这样即能临时性地强调某些内容，还不会影响其它模块在Y轴上的展示。
2）弱-局部展开对于表单类页面，若在某个选项下还存在二级内容，则在初始展示时，优先突出主选项本身，当选中后再展开二级内容。这样即能节省首屏空间，也能顺应使用者的学习、使用心智，在合适的时机展示细节内容。
三、Z轴的叠加顺序
说完X轴、Y轴的布局设计，我们最后来看看Z轴。这里，我们需要把视角从二维平面转为三维空间，比如吸顶的导航，菜单浮层，模态弹窗这些都属于出现在Z轴上的元素，他们之间可以进行层层叠加和嵌套，于是会出现叠加冲突的场景，导致发生错误的遮挡现象。所以Z轴设计的关键点在于不同元素的叠加排序设计。那么怎样才能有一个贯穿全局的合理排序，让元素们能乖乖排在自己的队列中呢？此处，我们将页面的所有可能出现的元素按照Z轴的特点归类到三大区间里。每个区间内给出相应元素的排序顺序指导，并配合动态计算的逻辑，Z轴上的元素就能整齐地叠加起来啦。
1.基础区间
a.展示类-页面中默认就存在的、不会对其它元素造成遮挡的元素（表单、表格、文字、按钮、图表、图片等）。
b.固定类-固定在页面某处的元素，滑动页面时会对a的元素产生遮挡（如吸顶导航、固定表头/列、锚点、返回顶部按钮等）。
c.浮层类-由a中的元素触发出的、指向该元素的临时浮层元素。会对a以及固定元素产生遮挡。临时浮层之间的z轴层级遵守触发的时间先后顺序，若临时浮层可以同时存在在界面中，则后触发的层级更高（下拉浮层、气泡）。
2.模态区间
d.模态层-由基础区间的元素触发的，覆盖整个视窗的模态元素，当该元素出现后，至于基础区间所有元素层级之上，基础区间的所有功能无法交互(抽屉、对话框和全屏预览等).
e.临时浮层-在模态元素上出现的临时浮层，计算高度时，可把d层想象成基础区间的c层（下拉浮层、气泡等）.
f.第二层模态层-在d出现之后出现的覆盖整个视窗的模态元素。不特指第二层，也可以是第三、或更多。
模态区间内，多个模态层可进行叠加（即上文的f），叠加时一样需要遵守触发时间的先后顺序，后触发的层级更高出现在更上层。但是我们也应注意，模态层不能叠加太多，会导致当前页面覆盖过多内容，一般最多用到两层模态层就能满足大部分场景了。
3.顶层区间
g.全局层-全局的、不被模态元素遮挡的元素。可以常驻在页面中，也可临时出现。
h.临时层-由g触发出的临时浮层
max.最高层-始终动态高于当前页面所有层的元素（比较典型的是Toast组件）。
四、写在最后
到这里，我们就浅谈完关于B端界面的X、Y、Z轴上的设计特点了，虽然是一些高度抽象的内容，真正按照业务需求执行设计的时候，遇到的界面一定比我们这里谈论的更复杂，但是只要我们清楚底层的空间布局、适应方式、扩展手段和叠加逻辑，再复杂的界面无非就是规则的嵌套，希望这篇文章能带给大家一些小小的启发。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
图表的作用在于对数据的合理的诠释而不是美观。所以，在了解图表怎么绘制前，更重要的是了解图表是什么，包含哪些类型。下面就做下相应解释方便大家理解～
在今天，随着大数据和数据分析理念深入人心，图表在 B 端设计的地位越发重要。
那么什么叫图表呢？
图表指的是可以直观展示统计信息属性和数值的图形表格，对于多数人来说第一次接触图表概念都源自中小学计算机课程中的 Office Excel 表格教学。
要理解图表，你就绕不开 Excel 这个软件或其功能形式。我们都知道 Excel 是一个表格工具，可以任意填写表格化的信息内容进去。
但那只是呈现出来的表象，Excel 的真实身份应该是一个数据记录工具，通过这种表格形式记录，比如班级学生成绩、客户联系方式、仓库进销记录等等。每一条记录下的信息都是一条独立的 “数据”。
盯着表格看，我们确实可以看到一些具体的信息、数据、内容。但是，数据的作用只是让我们自己去精确定位想要的内容而已？显然是否定的。
我们统计数据的目的，还包括要从众多的数据条目中获得反映真实情况的 “规律”、“趋势”，如果我们只盯着数据条目一条条的浏览，是很难找出这些信息的。
于是，人类就发明了图表这种可视化工具，帮助我们对数据进行总结，用更直观的视觉方式来认识数据和找出规律和趋势，这也是为什么 Excel 是最强大的图表生产软件的原因之一。
总结：图表是统计学的子学科，它帮助我们更好的找到数据背后的真相，并做出正确的决定。
图表既然由数据内容生成，这个生成和转化的过程当然具备一些基本的规则和条件。要满足图表生成的数据必须要包含两种基础信息 —— ”维度“ 和 ”数值“。
它们是组成绝大多数图表的基石，比如看下面的表格，一次体检中有三个班级的5个同学，他们的身高、体重、体脂率、肌肉含量、视力各不相同。
我们可以从中挑选维度和数值，比如姓名做纬度（X轴），体脂率作为数值（Y轴），那么就可以生成基础柱状图表。
从上面案例可以知道，横向纬度表示的是你图表中要包含多少不同的展示对象，纵向数值则表示你要显示该维度的哪一类数据。
纬度通常指某个具体的人、日期、事件、分类，通常是 不可量化 的内容。而数值则是指包含 可量化 的数据类型，重点要记得数值是指 “数据类型”，而不是指具体的参数值。
再进一步，上方生成的图表，虽然直接反映了我们选择的纬度、数值的情况，但显然对于不了解数据背景的人来说太简陋了，不知道它们代表的意义。所以，一个完整的图表还会包含一些 “解释” 性元素，来让观看者更好的理解图表内容。
所以，一个完整的图表中除了中心图形，还会包含标题、单位、纬度图例、网格、选中提示等内容，用来提升其阅读性。
以上只是最基础的示例，不同图表、内容，对说明信息的要求各有不同，我们会在下方做出一定的解释。一个优秀的设计师要学会如何因地制宜，优化图表的内容构成，并对展示的信息进行取舍。
随着统计学的发展，图表也经历了一系列的增长与创新，除了我们常见的几种图表外，还发展出了大量平常看不到，只存在于各自专业领域的特殊种类。但是，它们对我们的生活和工作也起到产生了重要的影响。
比如在新冠危机中，政府和专业机构对民众开放的数据就大量使用了图表进行解释，让我们可以很清晰的了解事情的走势和真相。
之所以有这么多不同图表，让人眼花缭乱，在于数据所包含的信息和特性不同，导致了它们所总结的规律类型也不同。
业界将图表展示类型分成了四个大类，包含比较、分布、构成、联系，虽然比较简陋，但这是新手认识图表最简单的方式。
我们简单解释下这四个分类代表的作用：
之后我们就会以这个框架，来解释不同分类下的图表，帮助大家建立对图表的正确认识和设计方式。除了这种标准分类以外，我还额外做了一个归类，就是基础和高级图表。
前面提到，一般图表就只反映纬度、数值两个方面的图表类型，很容易理解。但复杂的图表，就会超过这个范围，它可能包含了多个维度、多种数值、甚至第三、第四。
比如下面这个散点图，除了身高（纬度）、体重（数值）外，还表现了个体（圆点）、性别（色彩）。在图表本身的解释性元素中，还包含分布区域、最大最小值标识、体重/身高均值。
这已经超出一个没有接触过统计的新手认知范畴了，是需要具体学习才能学会如何阅读和应用的图表。
这还是比较简单的高级图表，往后还有类似桑基图、K线图（韭菜的自我修养）、和弦图等类型，它们有各自使用的规范、参数，以及应用的场景。
高级图表的复杂度和抽象性，决定了它的使用门槛较高，识别效率较低。而随着数据各行各业数据重要性的提升，对图表的需求已经不再局限在二维抽象图形的应用上，而是提供了视觉效果更精美，制作过程更复杂，阅读门槛更低的可视化数据展示内容。
虽然我们在本篇文章不会拓展到大屏可视化的领域，但是掌握好平面二维的统计图表，提升对统计目的的认识，是深入学习可视化的必要条件。
接下来，我们就要来介绍一下如何绘制图表了。虽然图表之间有比较大的区别，但它们有很多细节是具有统一规范的。优先掌握这些一致的内容，再理解不同图表的具体绘制差异，可以帮助设计师快速上手图表设计工作。
上面我们提了，一个成熟的图表会包含不少解释性信息，怎么放置解释信息和图形元素是我们在设计时的第一个考虑要素。
常见的抽象图表都有一个完整的矩形区域，我们要先确定该图表的具体占比尺寸。然后，对这个区域进行布局的规划，而这个布局的规划就和解释信息的展示有非常大的关系。
比如，你需要在图表中增加标题和图形解释，那一开始把图形做成了上、中、下三栏。有的情况下我们可能还会增加一个默认存在的文本型解释模块，那么还会再右侧再切割出一个区域出来。
除了解释信息外，我们在设计中有时候还不能忽视交互内容，比如要包含分类筛选、时间线控制、开关等控件时，它们准备放在哪里，也要在这个阶段确定出来。
经过前面的切割，其实我们就能确定出中间的图形区域了。在开始绘制前，我们还要对图形具备的信息做进一步的确认，XY 轴坐标是否包含文字解释，饼图类是否包含延长指示线说明。
将这些区域先确定出来，减去它们的空间，就留下了最终要图形展示的区域了。
合理的图表绘制流程变是先布局，确定信息内容，最后才集中处理图形元素。如果对于前端适配有一定了解的同学，也就知道在完成这些步骤以后，图表的适配规则制定就畅通无阻了。
有了图形区域，接着就可以开始动手画图形了。不管是基础还是复杂的图形，你想要让自己输出的作品严谨、质量高，就需要应用专业的绘制方法。
图表图形的绘制类似尺寸作图，需要应用各种参考线、辅助工具来完成。图形本身并不是我们用来做创意的地方，而是要以准确的方式绘制出来。它包含两个重点，分布和比例映射。
以一个柱状图表举例，该图表中维度包含了 7 个对象，即应该出现 7 个柱形。那么首先就要通过等分图形区域，来确定柱形的分布，XY轴文字的对齐对象。
如果你不罗列对象具体数值的话，到这步也就结束了，但如果对象数值是必要显示内容的话，那么就要尽量确保柱状的显示比例和数值是一致的。
假设在上方案例中，Y轴总高是 100px，那么数值中每 1 小时的高度就是 100/16 = 6.25px，我们就要用你写下来的数值 * 6.25，保证柱状图高度比例和你的数值一致。
而类似饼图这样的图形中，只要添加了具体数值内容，那么饼图中不同的扇形角度，也要符合对应的比例。比如占比 10%、20%、30%、40% 的四个对象，它们的角度就分别为 36、72、108、144。
这就是分布和比例映射的基本逻辑，不管是什么图表，只要它根据数值在区域中进行绘制，就一定会受到数值的影响。不管学习什么新的图表，都只要确定这两个步骤就可以轻松准确的完成绘制。
至于具体该怎么实现，用插件还是参考线，就是软件基础的问题了，不在这里展开。
在图表设计中的最后一个问题，就是关于配色的方案了。图表配色的技巧主要关注两点，选色逻辑和搭配方法。
选色逻辑，就是图表用色的一些基本规范。我们知道图表往往非常的复杂，或者页面一屏中会包含大量的图表。
在这个基础上，图表的用色就注定是不能太 “刚猛” 的，饱和度要偏低，明度要适中。在选色面板中，它大概处中部偏上的区域。即使产品主色用的饱和度非常高，图表要和主色统一，也建议在主色基础上做适当调节，在色系上接近即可。
并且，建议新手在绘制图表的过程中千万不要用渐变色。即使在各类飞机稿中，渐变色的展示效果也非常的不理想，没有任何可读性。
有了选色逻辑，多色搭配的思路也就变得而非常简单了，只要重点关注色环的配色模式即可。
配色模式多种多样，包括补色、三角对立、类似、四元、方形、临近等等，不用想的那么复杂，只要牢记根据你的设计风格需要，你是要相邻配色，还是等分配色。
相邻配色，即以一个色系的临近色系为标准的搭配。以 H（色相）、S（饱和度）、B（明度） 配色模式为准，饱和度和明度数值基本不变的情况下，小幅度变更色相。
等分配色，也是保持饱和度、明度的一致，根据需要的色彩数量（大于三个）在色环中按角度等分，获得均匀的色彩过度。
配色的方法很简单，难的是你们如何根据页面的需要、视觉的体验，合理的运用配色的方案，这没有统一的标准。要记得图表配色不是仅仅针对自身，会和页面其它色彩产生联系。
保证相对平缓、不太激进的图表配色思路，是最安全的做法。
首先解释第一类图表 —— 比较。
比较图表的作用，是用来对纬度的数值做对比的图表类型，直观对比不同对象的强弱、排序、趋势。
柱状图，是一个使用柱状图形反映纬度数值的二维坐标轴图表，也是我们最常见的图表类型。
在这个二维坐标轴中，我们可以用纵轴代表数值，也可以用横轴代表数值，另一个轴代表纬度。即在显示的过程中可以使用纵向或者横向的（横向的也被叫成条形图，都是一回事）。
柱状图除了每个对象包含一类数值的做法以外，也允许包含多个数值类型，每个类型使用一种颜色表示，这种图表叫分组柱状。
并且，柱状图作为最基础的图形，衍生了非常多下级的柱状类型。包括：堆叠柱状、子弹图、正负混合、瀑布图、直方图等。但要注意的是，并不是所有柱状类图表，都是作为对比来使用的。后续会有进一步提示。
柱状图通过柱体的长短，可以直接对比不同纬度数值的高低，但使用也有一定的差别。
纬度之间关联性不是太强，或者按时间顺序排列的就适合用横向排列的方式，比如下方记录我随时可能猝死的打工人一周睡眠时间（见左图）。而涉及排名或者时间的数据组，就适合使用纵向排列的，比如 Geekbench 展现不同 Mac 处理器强弱的排行榜（见右图）（os：Pro 居然比 M1 还低？）。
两种图表的选择还和 UI 环境的交互方式有关，在APP中，横向排列的柱状图可以显示的数量非常有限，想放更多纬度就要左右滚动，体验不佳。而使用纵向排列则对空间的要求没那么高。
折线图也是基础图表，通过创建端点并使用直线连接的方式展示出高低不平曲折的线段。折线图在图表形式上和柱状图非常类似，但两者在使用上是有一定区别的。
当我们要选择使用柱状图的时候，往往关注数值的总量，或者维度代表的是不同的对象，比如不同 CPU 之间的跑分对比。但是折线图的使用就没有那么单一，它主要应用在单一对象的单个维度变化对比中。
比如，我们监控 CPU 的占用频率，那么维度使用时间，数值用百分比，这里面产生的数据都是围绕 CPU 的占用频率展开，但如果维度改成了当前时间不同核心的占用数值、温度，那么我们就肯定不会用折线图来表示。
折线图的使用是要通过线段的曲折来反映数值的波动，在应用过程中往往不作为一个静态的图表展示，而是应用于监控的场景，比如监控股市市值、网站在线人数、CPU温度、同一地区降水量等等。
在折线图中，最大的认知误区就是对于曲线线段的应用了。在数之不尽的网上飞机稿中，使用曲线的折线图表 90% 以上都是错误的。
这要回归本质来探讨，折线图也是进行对比的图形，如果没有直观的波动，那么这个图形带来的信息量就非常有限。曲线会因为圆角的缘故而降低波动带来的冲击力，甚至抹平这种对比。
只有在必定会连续出现极大波动的图表中才适合使用曲线，例如围绕在会有一个中间值数值，曲线进行正负两端移动的类型，比如监控呼吸中含氧量（呼和吸一个周期的维度）。
所以，尽量避免曲线的应用，不仅画起来麻烦，而且实际使用效果极差。
作为折线图，在一些数值代表完成、占满、填充的概念时，往往就会觉得单纯的线段表示不够直观，于是就产生了将下方的区域填充色彩的 —— 面积图。只展示一个数值类型不够要加入多个数值和线段的就叫折线堆叠图。
雷达图，相信大家看到最多的地方就是在游戏的角色面板或者武器面板中。雷达图是一种偏向概括性的图表，并不能用来体现大数值和高频变化，是用来对比同一个对象不同维度数值的图表。
雷达图的应用，首先要确认出不低于5个的维度，并且这些维度可以使用相同的数值体系，比如0-10分，0-100%等。并且，这些维度最好是由同一个对象身上拆分出来的，而不是 5 个维度指代不同的对象。
简单来讲，就是我们可以用雷达图来表现一个学生不同科目的水准，这样雷达图可以大致概括这个学生科目掌握情况和相对的强弱。
但是不应该用雷达图来表示不同学生同一科目的水准，那就只是更基础的对比，用柱状图就可以了。
当然，雷达图中的占用内容，也可以添加多个对象，一个雷达图中可以放多个同学不同科目掌握水平的叠加图形，以此对比他们的差异。
雷达图的绘制，也是优先制定说明内容区域，然后再开始图形的设计。
因为在雷达图中，我们对维度的描述，基本只能设计到不同端点外部，那么文字本身的数量、占比，就会对图形的显示产生非常大的影响，并且在雷达图中维度的描述文字是必须的，过度精简还是用其它方式体现都很不直观，所以优先预留足够的文字空间。
然后，根据我们需要的维度数量绘制一个等边的多边形，并设置合理的数值。
之后，才是确定出这个多边形内所包含的数值刻度数量。假设除圆心外总共要显示5级，那么就要画 5 个堆叠的等边形，那么我们就从最大的那个等边形入手，再复制4个出来，对它们分别乘以 80%、60%、40%、20% 即可。
最后，再将每个维度对应数值根据百分比将端点打在维度的直线上，用钢笔工具将每个端点连接起来创建一个完整的不规则多边形，就完成了雷达图的设计。
如果想要在一个雷达图添加多个对象，只要用不同颜色描边绘制对应数量多边形即可，如果要填充这些图形，就一定要使用透明度填充来完成，否则可能遮挡后方的端点，导致图形不全。
阶梯图是一种用来对比前后数值涨跌的图形，它是柱状和折线图的合体。它和折线图的不同之处在于，更关注每个对象增减的份额大小。
不仅仅是关注波动，而是更具体的值。类似关注一只股票全年的股价涨跌情况，每个月涨跌的具体额度，就适合使用阶梯图表现。
漏斗图因为长得像漏斗而闻名。虽然这个图形看起来像一个锥形或者三角形，但本质上漏斗只是条形图（横向柱状图）的变体。
漏斗图是一种对阶段进行分层表现的图形，从上到下的顺序中，数值一定会呈现衰减的趋势（起码不会变大），然后从上到下的柱体就越来越小。
例如，UX 数据分析经常用的漏斗模型，就会建立一个从用户访问主页，到最后完成下单的转化率，每一个步骤都会有一定的用户流失。
在基础漏斗图之上还有进一步拓展，比如对这个转化本身有一个预期，那么可以做对比漏斗图，比较现实和预想中的差距。如果要对比 iOS 和 Android 端的漏斗数据，还有比较漏斗图，对比两侧的长短数据。
第二个解释的图表类型 —— 分布。主要是用来研究数据分布情况的图表，对不同数据的统计分布状况进行描述。
直方图是一个看起来和普通柱状图非常接近的图表类型，是一个用来表示同一个纬度范围中，不同区间频率的图形。
直方图是一个二级图表，是对一级数据的进一步转化。比如看上图案例，散点图（下面会说）本身记录了不同的数据的位置，而直方图就是记录在发生在这个纬度内的次数。
直方图乍一看很像柱状图，但实际应用场景往往使用了非常密集的柱体，让它看上去像折线图。对于设计师来说和直方图打交道是非常普遍的，那就是在 Lightroom 和 Photoshop 中的通道直方图。
当视觉设计师、摄影师在学习处理位图的时候，就必然要学会直方图的读取，它并不是用来让我们学习如何对比前后数据差异的，而是让我们可以快速掌握这张图片中像素点在不同通道的分布量。
直方图是统计学中的 “频率分布” 的视觉表现形式，需要确保使用的场景符合直方图的定义，以及确保用户能理解图表内容。
对于直方图来说，如果维度对象少，只要获得相关的信息和数值，就可以像柱状图一样来绘制。
如果是针对一些比较专业的场景，如上方的通道直方图，那么就要放弃自己完成的目标，一定要借助相关插件，或者使用 Excel 等工具实现后再导入进来。
箱型图也叫盒须图，和直方图类似，它也是一个二级图表，即它不是直观反应原始数据，而是对原始数据的状态进行转译。图表中的每个箱型反应一组数据的分散情况资料，每个箱型包含下面这些信息元素。
箱型图反应的是一种 “大概” 情况，它不是一种用来进行精确数值展示的图形。箱体主要是上四分卫和下四分卫的区间组成，下/上四分卫指的是 “样本中所有数值由小到大排列后的 25%/75% 的数字”。
这里的排列主要通过 “数值大小” 来决定，而不是分布数据。比如一个班上100个同学包含身高 150、160、170、180、190 五种身高，虽然每个身高包含的人数不同，但 160 就是它的下四分卫，180 是它的上四分卫。
那么160-180身高包含的人数就是箱体本身的区域，上四分卫到上边缘是 180-190 的人数，下四分卫到下边缘是 160-150 的人数。
箱型图可以反应的信息是非常丰富的，它可以非常有效的反应不同数据组的虚实、占比、上下限，可以获得非常多有趣的结论。
在箱型图的设计中，对于箱体和触须的表达要依据数据本身的重要性来判断。有些场景对最大最小值更在意，则箱体颜色就浅，线段更瞩目。而要重点关注箱体的话，则可以对触须进行弱化使用虚线。
同时，箱型图的主要识别信息是 Y 轴的长度，一个美观易度的箱型图，箱体宽度尽量控制在一个比较纤细的水平，不要为了填充画面的空白强行做宽。
相信稍微了解过股票还是基金的同学，对K线图那可就一点也不见外了，下阳线、收盘光头阳、小阳线，开口就是老韭……不对，老股民了。
K线图是箱型图的一个变种，也叫蜡烛图，主要应用在股票、币市、期货等市场的交易数据上。一个K线图包含了阳线、阴线两个大类。阳线代表上涨，阴险代表下跌。
每个类型中，同时还表示当日成交中的最低价和最高价，柱体代表的是开盘价和收盘价。在我国股市，上涨用红色，下跌用绿色，在币市则相反。
K线图实际上动手设计它的情况微乎其微（只用开发好的），我们只要了解它的原理即可。
K线图基本只应用在和理财有关的证券行业中，在会出现 K 线图的图表模块中，必然会出现相应的交互操作。如左右滑动、放大缩小，它是一个具备响应模式的图表类型，包含两种状态。
如果空间足够，则使用箱体和虚线的常规设计。如果显示的对象密集，那么就会以一条直线来显示，忽略掉箱体的部分。
同时，不同的场景，对于阴阳线箱体的展示会有一定区别，除了色彩外，还会应用实心和描边的区别。
因为涉及财产、交易，针对K线图的设计，一定要做好前期的业务调研，以及对比不同的竞品，降低设计出错的概率。
散点图是一个使用也非常频繁的图表，它通过在 XY 坐标轴中添加圆点来表示不同对象的分布情况。
常见的散点图就是对普通二维坐标轴进行 “打点” 的图表，每个点代表统计学中的一个 “样本” 或数学概念中的一个 “定量”，下面我们就用样本来称呼每个散点。
每个样本在散点图中必然包含两种以上的信息，一个是纬度值，一个是数值，这样我们才能确定它在坐标轴中的位置。
当然，针对样本并不是只可以包含两种信息，比如表示班级成员身高体重的散点图，我们可以再引入男女的对比，对散点图进行色彩的区分。再者，还可以添加体脂率，用每个点的大小来表示。
散点图是一个很直观的样本分布图表，它是概率论中做回归分析的主要工具。所以往往我们会看到散点图内出现了一个线段，那条线段叫做 “回归线”，他是通过散点分布情况，计算出来的一条均值线段。这个线段不仅可以大致标识数据的趋势，同时可以用来做概率计算和预测。
回归线包含指数、线性、多项式三种，对应绘制出来的回归线是曲线、直线、还是波浪线。
散点图的圆点可以使用软件的 Symbol 功能进行创建，确保后续可以统一修改配色和样式，尤其是在包含多种色彩的散点图中。
散点图的绘制不一定要完美契合数据内容，但是在大致的分布和数量上要和实际情况贴合。如果仅仅是随意的进行分布、均分，那么这个图表就会显得非常的不严谨和随意，比如下图图表。
地图图表，是将抽象的 XY 二维坐标轴替换成地图类图形的图表。本质上它们也包含 XY 轴，所以一样可以将数据内容进行映射。
最常见的，就是地图散点图了。背景由实际的地图完成，坐标则由经纬度体系来记录。这是可视化设计中非常常见的中心图表应用类型。
同时，背景的地图并不是只包含地理信息地图，还可以是球场、商场、网页、建筑表面等内容。
热力图则是地图和散点图的合体，也是在二维坐标体系中显示样本，只是热力图更注重的是这些样本之间的对比。例如区域的降水量、台风风力表现、网页的点击区域等等。
热力图本质上也是将坐标轴切割成了若干小块（样本），每个小块有一个对应的数值，然后通过算法绘制边缘和不同的渐变。
它也是很少直接通过设计软件绘制的图表，需要借助插件导入数据来实现，我们只需要确认色彩样式即可。
构成图表相对其它图表来说是最简单的一种，包含扇形、环形、饼图、堆叠、矩形树等类型。
前面看到的图表大多是遵循我们小学就看过的 XY 轴坐标系（笛卡尔坐标系）建立的，但是饼图并不需要考虑坐标空间的问题。它是一个依靠角度来反映数据的图表类型。
饼图作为一种常见图表，包含两个大类，一般饼图和环形图。如果没有一些特殊的交互或者复杂衍生类别的话，环形图其实就是饼图中间镂空的版本……
饼图绘制的主要依据是需要表现几条维度，以及它们对应的百分比值。饼图的显示有比较大的局限性，那就是显示的维度数不能过多。控制在 2-9 条比较合理，数量过多就会导致图形失去实际的使用意义。
除此以外，南丁格尔图、旭日图，也是饼图的延伸，通过添加额外的维度或者子分类，对饼图中的每个对象进行额外的示意。
饼图作为基础图形，多数情况下也是由设计师自己完成的。但很多新手没有找到要领，导致做出来图形非常的别扭。我提供一个绘制的简单的思路，那就是通过绘制不同的三角形来拼装出一个饼图。
这类图形绘制的要点是确保三角形在圆心中的顶点时一致的，如果对比例的绘制有比较精确的要求，可以通过 Excel 之类的工具生成一个基础图形做背景，贴着它画即可。
南丁格尔图也可以沿用上面的画法，那就是对每个维度的三角形采取不同直径的圆做蒙版，就可以画出不同半径的占比区域了。
这么做的好处，是将图形的每个维度独立成一个单独的矢量图形，方便我们后续进行上色。
堆叠类图表算是一个相对不那么严谨的类别，因为它多数由其它基础图表发展而来。主要包括柱状堆叠图、面积堆叠图、百分比堆叠图。
之所以把它归类到分布而不是其它大类下的图表子项，原因是只要出现堆叠，就意味着这个图表的核心目的是展示构成内容而不是对比或者分布。
在柱状类堆叠图中，通过将每个柱体切割成不同的更小柱体来呈现子分类的占比。面积堆叠图，则是单纯的把折线图进行填充然后叠加的图形。
而百分比堆叠，虽然看起来和面积堆叠和接近。但它是以最上层数据为 100% 标准，往下的每一级对象都根据顶层百分比呈现的分布样式。
堆叠类图形的设计，最难的不是图形，而是色彩的应用上。之所以说堆叠只要应用就比原先图形的作用更大，原因就是堆叠使用不同的色彩表现层级，对于我们的视觉吸引力远远大于图形本身的轮廓。
而将丰富的色彩无缝拼接在一起，是最容易翻车的配色场景。在这种状态下，建议大家只用临近色来实现下级分类的搭配，千万不要使用色相差异过大的色彩。
而对于面积和百分比堆叠图，都建议在配色的过程中，直接使用带有透明度的色彩。因为这些折线并不一定会完美上下覆盖，当中间出现交汇的时候，不至于信息被遮挡。
矩形树图最初是一个设计用来表示磁盘空间占用情况的图形，通过将一块矩形切割成不同的区域来表示不同维度的占比，以及位置。
虽然也表示占比，但它比饼图类图表表示的信息更丰富。第一点是位置信息和并列关系，比如下面的 M1 芯片的示意图，就是矩阵树图的一种直观体现，在矩形中不同位置应用的不同芯片以及其占用的具体面积。
当然上方是最理想的情况，通常矩阵树图是为了对一些更抽象的概念实现矩阵化的排列。而这个排列中，还有个非常关键的要素是其中的 ”树“ 字。
因为矩阵中的每个切割出来的矩形，都可以作为一个独立矩形进行下一级的分割，实现一个类树状图结构的信息收纳。所以，完整的矩阵树图，是可以支持缩放或点击进入下一层级的。
而使用矩阵树图不使用树状图，原因也在于我们需要表现它的占比，而不是单纯的结构。所以如果只是简单表现层级结构，如企业组织架构、知识点拆分之类的，要用树状图而不能使用矩阵树图。
在这类图表在项目中基本不会独立开发出来，因为其复杂度基本都会使用开源代码。
设计师的主要工作，就是根据对应开源图表，指定配色的方案，切割的边缘大小，以及文字的显示规范即可。
联系图表，是用来展示维度之间联系的图表类型，包含桑基、关系、和弦、韦恩图、依赖关系图等。
联系类图表中，多数是非常复杂的图形，已经脱离直接手工绘制的范畴，所以我们只简单介绍其中几个有代表性的图表且给出设计建议了。
桑基图是一个用来描述某维度值 ”流动“ 到其它维度走势的流动图表。
这是一个比较复杂的概念，比如下面的概念，不同国家人口的流动，人还是原来那些人（数值），但他们以不同的数量比例，移动到不同的国家（维度）。
桑基图的应用，关键在对数值迁移流向的关注上，它适合应用的场景在监控产品用户的跳转去向，货物的外贸出口状况，或类似新冠患者流动城区、地点的表示。
桑基图的数值总量通常是不变的，会包含起点和终点的维度，而维度的长短即代表其包含的数值总量（权重）。
它有非常多的变种，只有借助特定的图表生成工具，才能绘制出曲率、比例精准的流线。
关系图是大家比较不会陌生的图表类型，它在各类工具性软件、网站中都有应用。比如天眼查股东关系图、Wolai 页面关系图等。
关系图中包含了大量的节点，节点之间还有对应的关系，同构线段进行链接。常见的关系图有两种类型，一种是力导图，一种是弧长链接图。
力导图这名字也很难理解，源于力学中粒子存在某种互斥又具有引力的规律，粒子在两种力的作用下从初期的随机性会不断位移趋于平衡有序（读书多的好处？）。
力导图通常有一个起点，然后去关联后续的其它节点，如果节点之间还有关联，它也可以对这些节点的关联做出连接。它不仅表现一对多的关系，也表现多对多的关系，甚至在极其复杂的关系网中可以呈现成一定的强关联 ”聚类“ 信息。
而弧长链接图，则是通过弧线对节点进行关联的图表，它既可以是环形，也可以是水平横线的展示。
和弦图是环形关系图和桑基图结合的图表，它表示结构之间的依赖关系和强度，链接的线段不再是粗细统一的而是具有粗细比例的标识，且维度之间的长度也有表示。
这类图表常用于社会学、生物学等学科的研究统计结果绘制上。如果单纯浏览，看上去非常复杂，所以正确的使用形式是可以进行指定维度的展示和隐藏的。
韦恩图，它是所有学 UI、UX 设计的老朋友了，一个用图形层叠相交来表示它们关系的图形。RGB、CMYK 的色彩介绍里韦恩图的身影必不可少。
韦恩图的使用相比起来没有那么严格的数学运算，它只是一种关系表现的方法，可以对各种无法量化的对象进行关系的陈述。比如，UX 设计师应该具备的知识点……
下面是超人的电话亭团队持续整理收集到的可视化组件库工具网站，以供参考：
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
提到B端设计你是否经常听到这样的声音：
刚转B端那段时间，我相信每一个设计师都曾有过这样的困惑。
设计师在实际工作的时候经常会遇到自己的设计方案与业务需求高度融合，由于B端的行业属性，缺乏完善的数据验证，常常到了最后也区分不了设计师真正的能力体现在何处，这就导致团队成员对设计师的价值认识不够全面。
那么我们B端设计的价值又该如何体现？今天本文将从4个方面进行阐述，一起来看一下吧~
B端设计师追求工作中如何体现价值的时候，我们得先明白B端的设计价值是什么。
那么何为B端的设计价值呢？
百度百科中设计价值的含义是：把一种计划、规划、设想通过视觉的形式传达出来的活动过程。今天本文中的B端设计价值分为视觉设计、交互体验以及业务流程优化，通过信息传达的改变，帮助客户降本增效的方式获取收益。
如果将B端整个生命流程进行剖析，我们会更好的理解其设计价值。
B端产品与C端产品不同，它需要市场销售人员利用自身的能力以及资源向目标企业进行销售或者在一些大型展会上对外演示，据有关资料表明人所感知的信息的80%的信息来自视觉，这就需要对产品的功能进行视觉化展示。
因为竞争激烈，经常需要在众多竞争者中进行厮杀。在技术水平趋同的情况下，视觉起到了非常大的作用。特别是在展会期间，假如两家公司技术水平相当，演示的视觉完全碾压对手，让客户有着良好的品牌印象，这将产生快速的口碑影响，而这些将影响用户的最终决定。
这一步需要我们理念进行升华，将视觉视角切换至体验视角。
企业是我们B端设计的重要客户，它是一个具有不同成员角色的群体组织。该组织为了工作管理的效率，会有不同的权限体系。权限的不同关注的信息也有所不同，这需要我们在设计中依据权限，考虑不同信息呈现优先级。
功能繁琐是很多同学对B端的第一印象。因其有着不同角色的参与，每个角色因为岗位职责的不同，所参与公司的业务流程存在差异，这意味着需要将不同的功能在遵循产品体验一致性的基础上汇聚在一起。
业务价值对于B端设计特别重要，这是企业决定购买B端产品的出发点。我们在说业务设计的时候，需围绕企业“降本增效”理念，让用户觉得有用，完成企业的管理需求。
举个例子，比如我们做了一款报销系统产品，帮助用户解决财务报销过程复杂、冗长的问题。通过前期参与用户调研，洞察业务，挖掘需求的突破点，找到当前背景下最优的业务流程解决方案。企业员工使用我们的产品后少填写信息，更快速的拿到了报销费用，平均比传统流程节省了20分钟。假设企业员工平均时薪60元，那么这个100人的企业每周可以节省1.6万的人力支出，而一年可以节省76.8万左右的支出。
在了解了设计价值的体现后，我们知道B端设计的落脚点在业务价值的赋能上。当我们实实在在的解决了业务问题，而不是产品外层视觉与交互的表层需求，才能让我们的设计价值最大化，让设计得到团队其他成员的认可。接下来结合工作经验阐述下设计师可以赋能业务的点。
很多B端设计师都是被动的接到产品经理的低保真，然后根据低保真的需求直接输出设计稿，妥妥的沦为一个画图的美工，这会使得自己在团队内部被定义为一个工具人。
那我们的发力点该是什么？借用Jesse James Garrett的理论用户体验五要素这个专业名称（表现层、框架层、结构层、范围层、战略层）。单纯的视觉设计虽然容易感知，但它却属于五要素的最顶层，价值有限，无法准确传达最底层战略层的含义，我们需要往下突破才能凸显我们的价值。
当我们在收到需求的时候，需要具备系统化思维，从底层战略开始，首先了解业务需求背后的价值，同产品经理对其业务目标后，帮助他梳理业务需求，结合用户目标以及当前的技术能力等多方因素系统性思考最优的设计解决方案。
只有发挥了我们的主观能动性，改变单点视角，具备系统化思考的能力，才能更好出结果，体现我们的价值。
功能复杂繁琐的B端为了最大化的保证设计的一致性、提升开发的效率以及方便产品的迭代优化，组件规范是我们产品必不可少的工具。
那目前市面上的组件规范这么完善，对于我们设计师而言自身的价值是否无法体现了呢？其实它存在2个问题：
1、业务属性不符。虽然市面上存在众多的第三方组件，但由于设计的出发点不同（公司不同影响的业务属性不同），导致市面上的组件不一定与自家产品属性贴合，需要我们结合产品愿景以及业务规划进行重新设计；
2、业务特性不贴合。我们见到的很多组件只能归于基础组件，可以保证基础的设计一致性，但由于业务领域的独特性，在一些专业的场景中有着强烈的业务属性，需要我们对一些基础组件进行组合，进行更专业的沉淀，这样在实际使用的时候会更加高效。例如高级筛选、不同的场景弹框等。
不管B端还是C端的设计目的都是为了解决业务问题（业务目标的达成也是KPI考核的重要目标），我们始终要以业务目标作为我们的关键目标。
我们设计师需要参与整个行业生态的搭建，做到体验结构展示清晰，核心信息简洁明了，降低用户的操作门槛，通过提高体验效率（缩减时间成本），节省企业的人力成本。
对业务需求的赋能其实就是要求我们进行需求的挖掘，发现更多的业务增长点，提供当前背景下最优的解决方案。需要例如我们可以主动的进行XX调研活动，给出XX解决方案，最后给公司带来了XX业务价值。
项目复盘对于我们设计师的能力成长的作用是巨大的。它之所是最快的学习方式，因为它在是实践中的反馈，这种直观的经验沉淀最终会融入自己解决问题的知识体系架构，而这将进一步反辅自己的职业成长。
复盘可以让我们站在第三方角度，重新对项目流程进行全面的回顾与总结。结合不同的反馈，客观的了解当前设计在整个业务目标中的价值，这是对我们设计量化最佳途径。不单单对于个人，团队内部的其他成员也可以通过复盘加深对设计信任感的建立，他们可以看到我们的设计思路，更深层次的了解我们的设计价值。
设计价值的体现建立在一朝一夕的积累上，如果想在B端设计中体现价值，一定要透过现象看本质，站在业务的角度，寻找真正的发力点，让自己参与业务赋能的同时共同成长。
作者：江鸟的设计生活
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在B端产品做设计的时候，第一件事是决定界面的结构布局，导航放在哪成为一件亟需要考虑的事情。典型的，有横向导航与纵向导航之分，拿ant design来举例，如下面2张图所示；
两者看起来都行，但选择哪个，心理会有第一眼的直觉，但光有直觉不行，还得罗列个123出来，这样展示方案的时候，才能服己服人。
横向导航
优点：
通常使用比较少的菜单，简单，容易记忆；
位于页面顶部，不占用横向空间；
由于位于顶部，在视觉上更突出，更容易识别；
菜单选项之间视觉权重的区分更明显，左边最强右边最弱；
缺点：
扩展性有限，不能很好的承载大量和多层级菜单；
占用屏幕高度，特备是当固定于屏幕顶部时；
来回切换菜单选项时，横向移动鼠标的距离更长，操作效率更低；
纵向导航
优点：
能够承载的菜单项数量和层级更多，扩展性强；
不占用屏幕高度且可以收起，为内容提供更多空间；
在菜单间切换时鼠标移动距离短；
能够更好地适应屏幕宽度较小的设备；
缺点：
菜单数量多层级复杂时，不容易记忆；
菜单选项文字不宜过长，可能会截断；
各菜单选项之间的视觉权重差别不明显。
他们都可以在已有的方向上进行扩展，如下图
横向导航扩展
但总体来说，单独的横向导航方式层级不能超过3层，多于3级就不利于用户的阅读和选择。
纵向导航扩展
相对于横向纵向的拓展性强，不管多少级都可以一致往下加，但层级高过于3层，用户对导航的分辨和记忆会明显下降。
当然，有时候单独只有横向或者纵向一种导航不能完全满足我们的需求，他们有那么，根据以上特点，我们也可以有如下组合的形式。
组合导航
很明显，这样的组合导航，适用于一级导航不太多（做好少于5个）且内容权重差别很明显，一级导航之后的导航内容和层级比较多且内容复杂。
另外，如果嫌纵向导航占空间，则可以考虑将纵向导航做成可折叠收起的模式，适用于贴着浏览器的纵向导航。
可折叠的纵向导航
总结一下：
横向导航易记忆、易看，各导航权重区分明显，越靠左越重要，但切换效率慢； 2.纵向导航扩展性强，可折叠，各导航权重区分不明显，切换效率更高；3.如果两者都不能单独满足，可尝试组合的形式。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：Sophia的玲珑阁 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
对B端产品架构而言，一个合理的导航设计对能够解决，对团队内部：堆砌功能开发混乱；对外部用户：找不到功能的问题，所以本篇主要总结一下如何正确选取合适的导航。
从产品结构明确导航分类
B端后台的导航大类从产品架构层面来讲可以分为：全局导航（顶部、侧边、混合）、局部导航（菜单栏、面包屑、选项卡、步骤条、文字链接）、辅助导航、内嵌导航、友好导航和远程导航。
全局导航
表现为产品的一级导航，需要具有良好的稳定性和拓展性。
提示：清晰稳定的路径比起少点击一次更重要！
局部导航
局部导航包括：菜单栏、面包屑、选项卡、步骤条、文字链接。
特点：1、在同一个架构中，可以到这个节点的上下一级的通路；
2、有严格的父子级关系，局部导航与全局导航有层级关系，局部导航帮助用户进入更 加特定的页面。
通俗而言局部导航依附于全局导航，常作为二级导航出现。
辅助导航
提供用户在全局/局部导航不可到达的相关内容的快捷途径。
内嵌导航
也叫上下文导航，常用做对页面中的操作项进行解释；常见的有帮助引导链接等
友好导航
为用户提供便利的前进途径，常见于新手引导和帮助助手的场景，在不需要时可进行隐藏。
远程导航
指并不包含在产品结构中的功能入口；常见于网站地图、OA产品的工作台等。
如何进行合适的导航选择
1. 保证产品结构的稳定性
B端产品通常情况下都是复杂的，对用户来说具备一定的使用门槛和学习成本。所以导航首先要保证产品架构的稳定性，同时也要保证交互操作路径符合用户操作习惯。
重点：不可为了追求少一次点击而随便进行更改！
2. 便于后续扩展
在进行导航选择时需要考虑到后续产品的发展情况，在保证产品结构稳定性的前提下，为后续的功能扩展打好基础。
3. 操作清晰、易懂
在多层级的导航中要保证每一层级导航的视觉反馈清晰、明确。
4. 灵活适应
导航的功能选项可以根据使用场景需求来进行灵活添加，可以为了提升效率，在不同的导航选项下出现相同的功能入口。
5. 保持一致的交互规范
相同类型的导航控件，交互样式要保持一致；例如：飞书在面包屑的文字交互样式和文字链接的交互样式就做出了明显的区分。
6. 可不遵循层级关系
根据导航的定义而言，导航就是对信息进行分类，引导用户完成操作。
我们可以根据用户反馈和数据埋点可以将常用的操作功能进行前置，打破层级约束，实现对用户的操作提效。
根据场景，灵活使用导航
1. 顶部导航
顶部导航常用于官网类结构相对简单的产品
优点：节省空间、视觉干扰小，有沉浸式使用体验；
缺点：结构简单，拓展性低。
2. 侧边导航
侧边导航常用于操作比较复杂，专注操作的后台类产品；例如：SaaS产品等
优点：操作效率高、拓展性强、更容易进行功能收纳；
3. 混合导航
混合导航常用于操作很复杂，一级二级功能条目多的后台产品；例如：云产品（二级导航功能超多）
优点：比较综合
总结：
1. 一级导航需要具备足够的稳定性和拓展性
①、清晰、稳定的路径比少点击一次更重要
②、导航的排序尽量不要改变用户的操作习惯
2. 二、三级导航进行合理的分组收纳
利用分组控制导航的颗粒度。在二级导航只有一个时，无需设计分组
3. 判断功能是否应该作为全局导航
①、选择相对高频的分类，作为全局导航
作者：戴戴戴戴戴虎全
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
②、低频的分类，作为局部导航
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
随着跨设备跨平台的趋势不断显现，比如最近很火的鸿蒙，一部手机就可以完成办公场景到生活娱乐场景的转化，未来B端的管理系统不在局限于pc端，体验将不断向移动化对齐，使B端用户不再受时间和地点限制。
B端各个端口的特性：
在保证使用体验下。pc端、pad端、pc端的功能会是一个下放的过程，屏幕越小功能越简化。
比如有赞的美业工作台，手机端只有宫格功能入口，PAD端除了功能入口外，把工作内容也做了露出，PC端则展示了数据图表、快捷功能，以及其他提升效率的入口，内容交互更加的复杂。三端里，不仅屏幕尺寸不一样，使用场景和角色也完全不同，比如PC端店长使用频次更高，用于管理店铺查看经营状况。PAD端则普通员工频次更高，用于查看具体工作内容，需要接待的客人。手机端更通用，所有角色所有场景都会使用，有可能是在店里、家里、路上所以在设计移动端时要考虑如何在提升操作效率的同时兼容可用性。
B端的典型表单，由数据录入和操作按钮构成，往细拆解的话包含1.标题、2.标签、3.提示信息、4.输入区、5操作按钮。
标题：表单的主题，起到说明表单模块的作用，尤其是在分组的表单中格外重要。
必填提示：用于区分多个表单内容项的必填和非填项，一般使用红色的“*”表示。
标签标签：表单内容项的名称，说明对应表单含义以及向用户说明应该录入信息的类型。
提示：帮助用理解表单，最多见的是引导说明信息和反馈信息。
输入区：表单的核心区域，承载用户主要的交互。
操作按钮：完结表单操作的触发器，用于确认数据或者取消数据，表单越复杂按钮也会越多样。
大部分场景我们希望用户能尽快完成表格。但在有些场景呢又希望用户能放慢速度，使他们能够深思熟虑，比如下面的三个场景：
1.在一些资质审核的页面，希望用户能仔细填写。
2.小屏幕的场景，要求表单纵向或者横向最小化。
3.国际本地化的需求，表单需要适应不同的长度和多种语言。
这张图是医生端注册流程的竞品对比。他们哪种方案能更好的为用户和产品服务呢？接下来我们来看下三种典型的表单，能帮助你更好的理解。
1.左对齐标签
优点：如果用户不熟悉表单要录入的数据，或者是复杂内容，左对齐会更容易些。视觉动线会更符合人们阅读习惯，并能节省纵向的空间。
缺点：长标签会增加标签和输入框的距离，导致延长完成时间。
从马泰奥-彭佐在2006年进行的眼动研究里发现，左对齐标签速度是最慢的，用户眼动定位的次数最多的。如果希望用户能放慢速度，并仔细阅读表单中的每个输入框，左对齐会是一个很好的办法。特别是含有大量的可选输入框，或者陌生数据，比如像资质认证页、金融申请页等。
在左对齐标签里，内容也有右对齐的方案，如下图。这解决了长标签带来的适配问题，使空间能更好地利用。但关联度会降低，增加理解成本。并会导致眼动距离拉长，适合选择类的录入方式，缓解此缺点。
2.顶对齐标签
优点：有较多的横向空间，并且阅读效率快，对于国际化的设计或长标签特别有用。
缺点：会占用较多的纵向空间。
在同一个实验中，标签到输入框只花了50毫秒，比左对齐快了10倍。
以下是B端的典型列表，主要是信息的查看和操作。基本是由1.卡片、2.切换筛选、3.搜索、构成。
卡片：在移动端列表中更多的是以卡片式的形式呈现，卡片利于展示信息的深度和承载更好的交互。在移动app中我们可以大胆的尝试使用卡片式设计，不仅信息能够很好的突出，也能适应多端设备的展示。
筛选：筛选对于整个表单来说是非常重要的，它可以帮助用户在表单茫茫数据中进行快速的数据定位以及划分，缩短用户对于数据的寻找时间；
搜索：将想要查询的信息输入到相应的搜索器中，用户可直达任务目标。
贴近场景的设计可以舒缓数据页面带来的心理压力，拟物元素与表单的结合的呈现形式能够给用户带来愉悦感。
如下图的例子，途牛商旅用了差旅审批单粗细线条元素，医鹿用了病历本上面的钉扣，饿了么商家版模拟小票的设计。
B端典型数据页，他们基本是由1.数据统计、2.可视化卡片、3.筛选、4.数据明细构成。
数据统计：将用户所需关注的重点摘出来，并展示和业务相关的其他数据。通常是主数据+副数据的结构。
可视化卡片：数据分析里有一句话叫“一图胜千言”，当面对海量数据时（右图），利用图表可以帮助用户快速理解数据含义。
而图表是数据页面里的重要组件，经过图形化、通俗化、形象化后的数据可以帮助我们直观的理解数据。
激励性数据设计
2008 年，为了减少电力消耗，有一家电力公司向 35,000 名客户发送了一封带有简单图表的信，向客户展示了他们和邻居的电力消耗情况。
在图表中，可以看到一个条形图，代表 3 个不同组的功耗：节能的邻居、所有邻居和收信人的家庭。这向客户显示他们是否比邻居消耗更多或更少的电力。
最后这些收到信件的客户平均降低了 2% 的功耗 ，虽然就个人电费而言，这似乎很小，但对所有客户而言，这相当于节省了大量电力和百万美元。从那时起，全国其他电力公司都采用了这种方法。而这种方法也叫做激励性的数据设计。
移动端图表
实际执行中，要针对具体场景，选择合适的方案。比如在一个多折图表要选曲线的还是直角的，直角能精准的体现数据而曲线降低认知负担使视觉愉悦。
下图淘特首页设计中，需要在较少的纵向空间里设计可视化图表，可以看出这里简化了y轴的标签以及取值范围，最后反应到图表上会是一个较平滑的曲线。而这种设计方案上更多的是感知价值而不是精准的数据，这跟激励性的数据设计有相同的作用。
工作台是一个帮助用户快速掌握工作进度及进入工作状态的导航页面。也是用户感知产品价值的重要门面；所以首页工作台是体验规范和视觉风格的核心场景。
我们来观察下医蝶谷为什么这样改版。从原型的变化可以发现，这次改版更多的是去满足业务上的变化，我认为有以下几点
业务优化：
1.这样的改版体现了医蝶谷在业务策略上的变化。观察老版本我们发现，极速问诊占了首页的4/10。这个阶段更多是考虑患者订单响应时间，所以接单较慢的新手医生体验较差。
2.将极速问诊的内容进行收起，医生抢单的成本更高，并且将原本tab的问诊整合进了首页。使医生在首屏就可以快速掌握工作进度及进入工作状态。
视觉优化：
1.老版本的快捷工具图标颜色更丰富容易被用户发现，但是在医生常用的工作台里，又显得有些用力过猛，新版本弱化常用功能图标的视觉，让医生关注到更有价值的信息上。
2.在新版的首页里，因为极速问诊改变了位置，我们可以在设计上做一些差异化的改变，去适应新功能的承载。
前面提到了B端的表单、列表、数据页面、工作台的案例。为了表达透彻下面我跟大家分享下我在工作中碰到的案例。
医生这个职业对我们来说熟悉又陌生，在我们生活里每过一段时间几乎都会去和医生打交道。医生一上午可能就有多达几十位患者就诊，平均到每位患者仅有3～4分钟的诊断时长。在这短暂的时间内，要完成病症的诊断处置、病历填写，还要面对来自病患各种问题，难度可想而知。而这种场景映射到互联网上也是同样的，何况大部分还是兼职医生。所以我们要做的是让产品更易用，降低流程的复杂度。
通过医生调研发现，医院排班并不按照周循环，平常临时突发事情多。所以一日的排班里，时间会有一定的跨度。
举个例子，大家去看病时候时候一定遇到一个场景，是医生让你去拿报告，在回来的时候你不是重新排队的状态，医生需要在这时候对你进行干预。
设计应当顺应医生的工作特点，考虑在特殊场景上的使用，我们提出的以下策略。
精简布局，提升屏效
1.在前文B端列表有提到，列表顶对齐的方式用户阅读起来效率是最高的。所以这里将时间标签调整到内容上方，同时调整卡片里任务名称和时间的权重。
2.优化前任务排序结构是按时间规律往下排布，一小时占用一行。因为医生平日事情多突发，排期上无法按照一定的规律。如果需要查看下午、晚上的排期交互步骤则会被增长。所以在设计上将无任务的时间标签进行收缩，这样在首屏也能看到在晚上的排期状况。
利用色彩，少即是多
色彩是最具本质影响力的表现因素，在设计即简单又重要。研究表明，人们只需 90 秒就能对一种产品做出下意识的判断，而其中高达 60%以上的判断仅基于颜色。
排期表借助色彩关系，提高用户查找效率和传递更多的信息。如下图一开始的想法是按照患者端的逻辑，依据业务图标进行区分，但两端统一要考虑的因数比较多，不适合复用。最后考虑采用颜色标签的形式进行区分
优化路径，去繁化简
从前期的调研的结果来看，医生的排班是无规律多突发的，会出现在一天里添加多个不连续时段的场景。所以我们针对医生的排班的设置做了以下优化
优化前添加一个时段需要4步，添加一天不连续的3个时段需要3x4=12步，需要用户判断复杂的逻辑，而优化后添加一个时段需要3步，添加一天不连续3个时段需要4x1=4步，逻辑简单明了
这是医生端其中一个案例，可以看到一个视觉、交互上的优化都是针对医生实际的工作场景去设计的，在医生这个行业，有着很大的行业壁垒，需要我们逐一去调研给出设计方案。这也是B端设计中需要重点关注的地方。
代码框架
B端设计师最常接触的设备就是PC，而要做移动B端基本上也是会通过H5、RN等技术实现。这样方便多平台复用，下面我以web为例子，讲述我们该如何理解前端的页面结构
提升开发效率
设计的过程中，好的工作流程可以帮助开发节约工时。如果公司有交互的基本是能做到提前开发的。没有的话，我们最好有框架思维，先搭好框架，截图给开发参考，开发会根据你提供截图，进行基础模块搭建，最后在根据标注文档进行css上面的调整。
降低服务器成本
我们将切图给予到开发以后，开发会将其传到服务器上面。
用户在访问我们的页面时其实是相当于发送一次请求，将服务器里面的图片下载下来，如果图片的数量太多或者文件太大，会占用大量用户的带宽带来极差的体验。
而服务器的空间也是需要公司付费购买的，所以尽量一张图在多处使用。如果是非常高清的图片，可以将图片里的人物切出来，在不同的场景去复用。实测一张4k的官网banner，人物单独切出进行复用可以减少banner50%的大小。
占位符
在一些需要实现文本换行的效果里，开发很难去通过去写间距，因为会有换行的关系。一般会通过占位符的方式去实现，而在占位符里有分为好几种，下图我列举了最常用的三种占位，分别能实现三种不同的间距。
字重
字重的功能是为了在文本种突出重点强调内容，在文本中常采用3种规格的字重（regular，Medium，Smlbold）。但在h5的环境里，只有字体标准和粗的还原效果。在标注文件里也能发现标准体和粗体在标注文件里都会显示字重为500，而500在前端里的显示和标准体是是没有区别的，我们需要写好规则，和开发约定，以后只要看到medium就写成600字重。
如何推动规范
通常在一个版本我们就算把开发大佬的头搞秃了，都很难吧所有规范改完，因此我们需要将自己作为PM的角色，针对现有的需求进行拆分，并排出优先级、分版本迭代进产品，并同步需求。
另外在推动规范的过程中，有可能会出现上图的情况。这里可以使用表格的方式进行推动上线，可以好的避免以下情况。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：丸子说设计 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
全局导航
1、导航栏可折叠收起菜单。
2、收起时，鼠标悬浮在图标上同时右侧弹出菜单栏，然后触发菜单文字。
1、根据tab的层级来确定位置，最高层级在上，不同流程层级在下。
Tab在上：用户明确自己想要查找的目标在哪个tab并且需要一眼看到所有概况（想要查找数据时，直接到对应的tab下查找）。
Tab在下：需要看到查询的结果在各tab下的分布情况。
1、筛选区包括搜索项、查询、清除查询；如果搜索项超过一行时，需要「展开、收起」按钮。
2、折叠展开设计：默认显示一行将使用频率高、覆盖面广的1-3个显示出来其他的隐藏。（用户频繁使用的筛选条件能一眼找到）。
3、按钮固定在最右侧不变，搜索项可进行自适应。
4、筛选条件：
1、功能性按钮和批量操作（比如新增、导入、导出...）
2、根据使用频率进行排列新增＞导入＞导出；使用频率高的操作采用高亮显示。
3、如果按钮太多可进行操作项分类。
1、在能够概括的情况下，尽量简练、准确，一般可根据上下文关系进行简化，以达到节省表格头部空间和减轻视觉压力的作用，让用户注意力聚焦在数据本身。
2、对于比较复杂的表头，可以跟一个释义标识，鼠标悬停时出现该字段的详细解释。
3、表头筛选、排序功能
提供表头筛选功能，依据用户关注度最高的字段进行排列。
需结合业务场景具体分析，一般来说，编号、时间、价格字段，提供正序、倒序功能。
考虑用户第一次进入列表页的初始化状态，保证用户进入页面时大概率能直接看到自己想要的东西。
表体
包含多选列、数据列、操作列
特殊处理操作的按钮、字段优先级、状态可以前置，方便一目了然。
1、全部展示（缺点：利用滚轴滑动次数太多用户视觉容易疲惫）。
2、较长字段用“…”展示，防止字段重复，对重要字段进行快速区分、对比（优点：每行可显示较多的信息 缺点：想要看全信息，只能鼠标移入字段出现气泡显示完整信息）。
3、换行，保持行高不变，改变文字距单元格的上下间距，最好不要超过3行，多余字段用”…”显示（优点：尽可能显示全部内容 缺点：同2）。
4、字段优先级分类，做折叠展开设计（筛选信息层级较高的字段放在表格栏，次要信息放入二级表格）。
5、数据库中没有该字段，用“-”，数量用“0”后边有小数点、后位数保持上下单位一致。
1、让用户将注意力放在数据信息上，而不是表格底色、边框
2、不使用斑马线设计、分割线样式轻盈、去掉不必要的装饰和颜色
基于业务、基于场景
比如用户以处理订单为主，操作项建议放在第一列，方便用户操作。
如果用户以查看信息为主，操作项一般放在最后一列。
可以采用下拉框设计
1、行高=文字行高+上下间距
2、文字行高可以设定为字号的1.2~1.8倍，上下间距可以设定为字号的1~1.5倍；行高影响每行信息的易读性。
3、一般行高为32-56px
1、采用8px网格作为基础单位，来定义各组件和模块间距，因为目前主流桌面设备屏幕分辨率在垂直和水平方向基本都可以被8整除，使用8px比较普适。
2、最好列数在7±2
3、对齐方式：文本采用左对齐，金额及跟金额相关的百分比、操作项采用右对齐
一页最好能在一屏展示，避免用户来回上下滚动，比如固定为展示10条。
用户特殊使用需求，不适用以上规则，一页可能展示10条/20条，都可以。
作者：YOgire 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~对于B端来说，可能很多UI和前端喜欢直接套用Ant Design或Element ui组件规范；因为之前企业要求并不高，但是随着市场和环境的发展，企业对B端越来越重视，这些模版太类同，显然就太烂大街了。随后字节推出Arco Design、腾讯推出企业级设计体系TDesign、有赞推出Zan Design，很多大厂都推出了适合自己产品的模版和规范，给了我们许多借鉴，能让我们快速作出一个不出错的方案。不过企业、市场的要求显然不止于此，我们的设计追求也不止于此。那么我们如何才能摆脱套模版，提高界面的精致度，提升界面的交互体验呢？
为啥要搭建设计系统？设计系统对我们开发团队中谁有指导作用？
◆ 设计系统可以保证我们产品风格的统一性，降低用户对新产品适应时间和学习成本；对UI设计输出效率有很大的提高，在团队协同中可以大大的减少无效沟通，节约时间成本
◆ 在开发团队中，设计系统对UI、交互、前端、测试等岗位的工作都有一定的指导作用
设计原则是传统智慧的沉淀与未来趋势的结合体，能够帮助我们更好的进行设计活动时代在进步，设计原则也必然需要不断的更新以适应发展新的设计原则要求界面更友好，操作更加人性化。
这里我归纳了8条原则仅供大家借鉴学习:
◆ 可用性：有助于检查用户是否能够轻松地完成任务、产品是否正常运行以及是否完成工作
◆ 易用性：易用是首要考虑的因素，能一步解决的事情绝不两步
◆ 统一性：页面风格、色彩、布局等要保持全局统一，不可为了某一功能的美观而去破坏整体
◆ 亲密性：信息的关联性强，距离就要相应的缩短，让他们看起来是一个视觉单元；反之，则距离要加大，要让用户对信息的区域划分一目了然
◆ 对齐性：在界面中，将元素进行对齐，符合用户的认知，引导视觉流向，让用户更加流畅的阅读信息
◆ 对比性：对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。
◆ 重复性：相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。
◆ 稳定性：没有任何东西比产品的稳定重要，down机再好的产品也是徒劳。会影响到系统稳定的事情不能做
响应式布局，能够适应各种屏幕尺寸及分辨率，确保整体布局的一致性简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。一般采用栅格系统布局，常用栅格一般是16列或24列。
◆ 栅格：是对界面当中元素横向排布的一种模式，主要用于大型区块间距的排列，不适用于图标与文字间隔的小型元素。
◆ 模度：为界面布局的一致性和韵律感，统一设计到开发的布局语言，减少还原损耗，我们网格基数设为8，卡片宽度及间距为8n。常用模度：4 8 16 24 32 40 48 56 64 … 1920
◆ 布局：常用左右布局或上下布局
左右布局以1920页面布局为案例：通常B端产品左侧会有一个导航菜单，假设240px,右侧核心工作区域总宽1632px, 右偏移240px ,列数16列，列宽86px, 间隙16px， 左右边距24px; 左边导航和边距固定不变。
上下布局以1920页面布局为案例：通常左右会有一个留白区域，假设144px,中间核心区域总宽1632px, 右偏移144px ,列数16列，列宽86px, 间隙16px。
设计风格说白了就是用户最直观的感受，“商务、时尚、简约、科技感、沉稳、年轻、高端...”?
决定设计风格的因素有这些：
色彩是UI设计的基石，人脑对于色彩的记忆度要高于形态；除了美学之外，色彩还是是情感和联想的创造者。通过对自然的感知和行为，我们通常对色彩定义品牌色板、功能色板、中性色板，以及衍生色。
◆ 品牌色：是体现产品特性和传播理念最直观的视觉元素之一（例如：我们熟悉的政府蓝/党政红/淘宝橙，他们都能直观或间接的传达产品特征属性）
◆ 功能色：遵守用户对色彩的基本认知，保持一致性，不过多的自定义干扰用户的认知体验，提高用户的阅读理解力，功能色代表了明确的信息以及状态，比如正常、成功、失败、警告、链接等
◆ 中性色：主要应用在界面的文字部分、背景、边框、分割线等场景，根据使用场景，通常将中性色被定义为 3 类：文字、线条、背景
◆ 衍生色：B端产品中颜色的应用场景可能很广泛，要考虑它的延展性，按照一定规则定义完毕主色，便可以自动获得一系列完整的衍生色
设定统一的字体规范，无衬线黑体中宫更为开放，布白更为匀称，显示效果更为舒适，醒目利于阅读，更利于视觉信息的传达，在互联网时代后期在界面设计中字体样式还是会以无衬线体为主。
◆ 字体家族：根据系统区分Mac or Windows，如果用户使用的是Mac系统可以优先使用Mac默认字体渲染 ；如果使用的是Win，字体兼容性选择顺序（有购买版权字体的可优先考虑），例：
◆ 字号：为了提升用户的阅读体验，满足用户的可读性，更为舒适、清晰，也能保证界面的层次感（结合WCAG 2.0标准），将 PC/Web 端主字体从以前的12px改为 14px。
◆ 行高：为上下文之间提供了呼吸的空间，规范的行高，可以使得界面层次清晰、重点突出
◆ 字体颜色：WCAG 2.0 中将颜色对比等级分为 3 种，A级，AA级，AAA级，等级越高意味着颜色的对比度越高，呈现出来的视觉压力越大。字体颜色数量不建议太多，根据文字主次关系定义3-4个为宜（例：主文字、辅助性文字、提示文字、轻提示/禁用文字）
◆ 字重：字重不建议太多种，2-3种为宜（例：Regular、Medium、Light）
图形中有图片、图标、图表，都对整体风格有一定影响，设定统一的图形使用规范，可以使视觉效果更加和谐
交互，即交流互动，也就是说我们自己通过我们的五觉：视觉、听觉、触觉、嗅觉、味觉来感受其他事物并和他们之间产生信息沟通的过程。在互联网中交互对象个体主要是人和机器，所谓人机互动，相互配合，共同达成某种目的。
◆ 交互方式：保持产品的统一性，同类别的交互不可有不同的操作感受。要符合大众的认知习惯，可创新但不可违背潜意识，例：wab端页面鼠标交互操作一般有下拉、上滑、按压、悬停，移动端一般左右上下滑动、下拉、上拉、双指缩放...
◆ 交互状态：按钮状态变化，页面状态变化，组件状态变化...交互内容确实太大了，我个人也只接触到的也只是冰山一角，只能抛砖引玉，勾起大家思维，相互探讨学习
◆ 引导：引导一般常见5 种：新手引导）、步骤引导、帮助/操作引导、新功能引导、空白页引导
什么是组件？组件是抽象概念,对面向过程而言是对数据和方法的简单封装。对面向对象而言是一些符合某种规范的类组合在一起就构成了组件。它可以提供某些特定的功能。组件出现的原因软件工程中重复、反复出现、普遍的、有相似的问题的出现,导致开发过程中有大量的代码需要不断的重新设计,开发周期延长,开发复杂度增加。需要岀现一种模型通过剥离掉各个问题的特性,抽取各个问题之间的共性。从而在保证代码的灵活性下极大的增加代码的可重用性。组件的岀现就是为了解决这些实际问题的。
在前端眼里，组件通常是指页面上的视图单元，可以说，UI组件是组件的子集。组件库大致可以分为这几大类：
◆ 导航：固钉、面包屑、下拉菜单、下拉导航、电梯、菜单、分页器、步骤条
◆ 数据录入：自动完成、级联选择、多选框、日期选择框、表单、输入框、数字输入框、提及、步进器、评分、下拉选择、滑动条、穿梭框、文件上传
◆ 数据展示: 头像、标题、卡片、轮播、折叠面板、表格、拖拽排序、高亮关键词、时间轴、走马灯、空状态、徽标数、树、标签、标签页、图片、气泡...
◆ 反馈: 警告提示、抽屉、全局提示、对话框、通知提醒框、气泡确认框、进度条、结果、加载中..
◆ 其他: 锚点、回到顶部、图标...
设计规范是为了更高效的做设计，但不是一成不变的，它在落地使用的时或多或少都会有问题，需要我们慢慢的去反复检验它的合理性，发现不合理的及时更正，不断迭代，不断沉淀，不断优化，这样才能不断提高产品的用户体验。此次分享借鉴一些前辈的经验，主要是整理归纳学习，如有需要补充或纠正的，欢迎大家相互探讨！
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：小鱼ID 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
以下内容主要分成两大部分，第一是聊聊响应式和自适应的区别和原理，以及我们应该如何去设计响应式界面；第二部分也是比较关键的B端系统设计的核心，B端设计中台完整构建过程的具体步骤，以及应用到的格式塔原则，和命名的一些注意事项，内容较多，大家可以根据上述目录来选择性阅读。
简单概括多端兼容设计的发展史，最早是桌面端，比如桌面的一些应用；后来出现了移动端，针对移动端大家用的都是WAP，指一种无线应用协议，大家在用手机浏览一些网站，会把网站翻译成一种低流量的浏览方式，比如去掉图片大图，只剩全文字，因为当时网络不好，早在3G和2G时代移动端用的都是WAP；在2008年之后出现了响应式，也就是做一套代码可以兼容三端（网页、移动端、iPad）设备，在发展的同时也遇到很多问题，但响应式同时也遇到了很多问题；于是又出现了自适应，指不同的设备打开不同的页面进行自适应，自适应能增加效率，但需要增加工作量；2017年以后直到现在看到最常用的就是渐进式，类似完整的像在使用一个APP。这是多端兼容设计的整体的发展。
可以理解成用户在手机、电脑、ipad打开同一个界面，所呈现的界面是一样的。需要考虑移动端设计和网页端怎么通过一套代码进行兼容。
自动布局算是响应式的一种，但平时看到很多响应式其实并不是真正的响应式，而是自动布局，因为界面在不同的设备用的是不同的模板，当我们用电脑打开呈现的是一套模板，而用手机打开则是另外一套模板，这种看起来是响应式，其实不是。因为当我在开发者模式下调节不同设备展示时，就会发现，其实是换了一个网址来根据不同的设备进行自适应的，而真正的响应式是不需要刷新的，在拖小窗口的时候就会变成手机端的那个样子。
渐进式布局是近几年比较新起的，这种布局设计，很像一个网站或者本身它就是一个网站，但用起来就像一个APP一样，看到这里大家很容易相到，小程序就是渐进式布局得一种，小程序明显是一个网页，但通过技术的一些嵌入和一些接口或者缓存的方式的操作，让用户在使用的时候感觉小程序就是一个APP，但核心技术还是web网页。
响应式的原理是通过定位的方式来做响应式的各种开发，需要在页面中至少标出这十个点：中心点，上下左右点，上左上右点和下左下右点，这几个点其实就代表了做响应式和做布局相应的位置。这样可能大家不容易理解，其实结合figma来看，这些点对应的就是这样（如下图），在figma中的布局点。设计师通过调节图形的布局点，可以做到在页面拉伸时，让想动的元素跟随变化，不动的元素静止不动，这就是响应式的原理。换言之，我们做响应式布局的原理也就是通过figma或者sketch中的布局约束这个功能来实现的。
01、响应式
如下图是响应式的优点和缺点。响应式其实就是只开发一套页面，这个页面兼容三端。虽然做了响应式，但如何响应是需要设计师去设计的。比如我们设计了一个移动端界面，然后全部做好对应的自动布局，再进行页面拉伸，内容随之会发生变化，比如当拉伸到1024*768的时候，也就是iPad的尺寸，就会发现局部在设计上有些不合实际情况，这时就需要设计师在对应尺寸的设计稿上进行内容上的微调，比如按钮不可能那么长，就把按钮设计的短一点。当继续进行拉伸到1440网页的宽度时，然后再酌情针对网页尺寸的呈现样式，局部进行尺寸的调整，比如文字和按钮被拉伸到网页版都需要居中对齐，电脑端的样式就需要设计师重新排版了。
通常在B端系统，设计师需要做响应式设计时，往往是从大往小做设计，这也取决于这个B端产品是否需要进行移动端的设计，《B端设计总概二》中提到过什么情况下进行设计B端移动端。如果需要设计B端移动端，就需要我们将网页改成移动端设计，比如B端的侧边栏导航在拉伸到移动端时，就会变成用一个折叠悬浮的iocn来替代等等这样设计上的改变。在figma中，做三端拉伸时候，可以用断点插件来进行演示，通过对断点插件的设置，就可以完美的看到页面在三端不同情况的适配呈现，断点插件用来做演示非常方便。
02、自适应
如下图是自适应的优点和缺点，其实就是一个项目开发三个页面，分别做定制设计，网页端、移动端和Ipad端。
我们都知道2021年也就是今年是我国新基建的元年，十四五规划2035远景目标里提到重点发展传统企业数字化转型，尤其是今年我们设计师更能深刻体会，C端和B端已经是完全两个不同的行业，C端发展近十年，已经很难再做到创新上的突破，该做的功能和创新都已经做了，而B端这片蓝海才刚刚开始发力，很多企业也都在考虑B端系统的搭建，降本提效率成了很多公司新的指标，因此数字化转型重点在于B端系统探索，B端重点在于中台的搭建！设计师通过设计中台，构建出基本的业务类型，再分类到业务中，构建出不同的业务界面，所以设计中台非常关键，很多公司经常会用这两个系统去构建，Antdesign和Elemnet就是设计中台，我们会发现用Antdesign可以做出很多的系统，那怎么进行设计中台的设计呢？和我们设计师有什么样的关联度呢？带着这个问题，我们深度探索B端设计中台的落地！
概念：中台是互联网的术语，一般应用于大型企业，中国互联网的变革永远是从大型互联网开始，大型互联网公司引发了技术的变革，这也是中台的兴起，一般指搭建一个灵活快速应对变化的架构，快速实现前端提的需求，避免重复建设，达到提高工作效率目的。
作用：降本提效。如果没有组件库，普通设计师一天最多做十个页面，再多就不太可能了，如果有组件化得产生，一天可以做一百个左右的界面。在面对B端系统这样几千个页面的巨大的工作量前，组件库的作用尤为重要。但如果落地，就需要前端工程师的密切配合，因为设计师设计的组件只是一个样式，而前端需要把组件进行代码化，所以组件一定是代码化的，也就是说只有代码化的组件才是真正的组件。所以视觉组件的复用，和前端代码的复用，可以大大提高设计师的工作效率。
基本库指的是一些色彩系统、字体系统、图标系统、栅格系统、间距系统等等，之所以强调系统两个字，有系统就要统一规则和统一规范，然后进行调用应用在系统中的各个地方，比如我们想调用一个颜色，不是去随选用一个颜色，应该严格的从色彩系统中去调用，如果系统组件库里没有这个颜色，我们也绝对不可以使用，可以先用替代色做或者根据业务再进行补充颜色进组件库为了后续的调用，这是一种比较严谨的使用方式。所以在建立组件库的时候我们要考虑全面，组件库中如果没有相应的组件，我们应该试着反推一下，是否要加进组件库中去，来进行系统的调用。在做中台的过程中，我们一直使用Antdesign，我们对组件的名称，组件的分类其实一点都不陌生，其实Antdesign也在借鉴国外的Bootstrap组件库（大家感兴趣可以下载Bootstrap组件库进行查看），所以并不是Antdesign组件库形成了一定的规则，它也是在沿用别人的规则，而这些规则也需要不断的有大公司去继承出来，所以慢慢衍生出来现在这样的组件库，那中台设计，首先要搭建基本库，把基本库里的基础一些系统搭建好后，我们继续去做扩展库。
如下图，扩展库中包含了很多内容，比如分了四类，导航系统，数据录入，数据展示和反馈系统。其中导航系统又包含了，面包屑导航、下拉菜单、导航菜单、顶部导航等等，包括后面的数据录入、数据展示、反馈系统也包含了很多内容。我们做这样的扩展库，也不需要做成像Antdesign的组件库里包含的那么多，或者和新出得字节Arco组件库，因为它们面向的是系统级的解决方案，各行各业都可以用它，它面向的是一个大系统，也许我们只涉及到了其中的20%，因为也没有一个系统能用到它所有的组件，所以我们自己在设计组件库的时候，一定是按照我们自己项目的范围去做组件库，而不是做一个大而全的，大而全的组件库对我们也没有意义。它们做的是公共平台，而我们要做的是一个专属平台。
形成完基本库和扩展库后，第三步是建立方法库。方法库告诉我们的是什么时候用，比如我做了一个多选框，这个多选框应该什么时候用，是不是只要遇见一个选择就去用多选框，肯定不是，应该加以说明什么时候用这个多选框。类似于是组件的设计说明。
最后再做一个案例库，最佳实践库，具体组件什么时候用我们知道了，接着案例库就是在告诉我们应该如何正确的使用，或者说的方法是什么。比如标签的左对齐和右对齐，这种情况都对，什么时候用顶对齐，什么时候用左对齐，什么时候用右对齐呢？那么根据眼动仪实验数据数据来看，并且结合给出一些工作中业务中的最佳实践得案例放进去，给使用的人去做指引。
所以设计师做的事情，不仅仅是应用组件库和创造组价库，还应该指导其他设计师，指导开发人员在去复用每个页面组件的的时候，应该怎么正确的使用，这也是在B端设计中一个关键的环节，同时我们的视觉系统一定也是和业务有关联度的，所以在B端中做设计一定也不会脱离业务去做，我们一定要联系到实际的业务场景中，这个业务场景指的就是业务和视觉的结合，在做C端的时候，业务场景一定不会比B端多，C端的业务场景大多是定制化的业务场景，它要求的是个性化，不要求通用，尽量得个性化，比如图标、按钮、页面，而B端需要统一化，中台组件库的落地，可以大大提高设计师的工作效率和开发人员的协同效率，严谨的调用组件使用组件，可以使得系统页面保持高度的一致。
如图1：可以看出纵列的关系更紧密，因为纵间距小于行间距。
如图2：可以看出行间距大于列间距，它得横向关系更加紧密。通过图中这样的视觉设计为什么会感觉间距更加紧密呢？这属于用户心理学的应用，如果元素相邻的更近，元素之间的关系就会更加的紧密。
如图3：如果元素相邻的关系都是保持一样的，那么它们的关系是相对对等的。
由此可以得出结论，如果相邻的关系越近，它们的关联度就越近，如果相邻的越远，它们的关联度就越远。
应用案例：如图4卡片中得标题和内容，设计中把标题和内容进行区分，所以我们会做大量的留白，这样的留白就会让信息结构具有层次感，层次感就是指它们信息结构的关联度，如果想让它们有关联度，就让它们距离近一点不要做区分，如果不想让它们有关联度，或者关联度出现一个等级的区分，那么就可以加一条线，让它们之间的关联度分隔开。这就是格式塔接近性的应用。
如图5：如果去区分右边的形状，通常我们会根据形状进行区分，因为人的潜意识会认为相似的形状会更有相关的分类性。这就是格式塔中的相似性原则。
应用案例：如果文字的标题大小是保持一致的，包括它有统一的大小，统一的色彩，统一的字号，那系统中的其他同样功能的地方，都应该用统一的文字，这就是格式塔相似性的应用，比如图标也是一样，只有用了相似的图形大小，相似的颜色，在相同的位置，用相同的图标进行表达，图标之间的设计才具有相似性。
如图6：可以看到有一个L，是主体与背景进行了区分，如果在设计的时候让L看的更加明显，我们采用的办法就是将主体的色彩或者形状变的更加独特，或者将背景的颜色变得更加分明，这样就可以做到那个L看的更加明显。这就是主题与背景区分原则。
应用案例：比如警告弹出，可以用色彩去区分，目标就是让用户看的更加得清晰，当警告的时候给用户一个警告的信息，当成功的时候给用户一个成功的信息。还有类似对话框的弹出，采用背景变暗和加阴影的方式，都使用到了格式塔的主体与背景变化关系的原理。因此应用在我们设计系统中，前景和背景进行区分的时候，我们就可以通过色彩进行区分，色彩的区分要保持统一，比如背景色彩透明度50%同时加一些背景模糊，其他的背景也需要保持一致，阴影也是一样，如果把阴影放在一个平面上，距离平面越近，它得阴影越短，距离平面越远，它得阴影越长，这也是阴影的层级关系。
如图7：可以看出这是一个四分之一的圆形。
如图8：这个图可以看出是一个五角星。
封闭性应用案例：当一个形状被另外一个形状或者被另外一个色彩阻断的时候，并不影响人们对这个形状额外得认知，一定会脑补出另外一个形状，这个原则和我们UI的关系是什么呢？比如一个loading，半圆一直在旋转，或者图表中的圆占比，我们就可以判断出谁大谁小，谁多谁少，判断出当前的进程和位置，封闭性原则通常应用在图标的设计，图表的设计和步骤条的设计中。
如图9：可以看出用一些简单得形状来体现，其中三角形具有明显的指向性，三角形箭头指向右边，上面五个是一组，可以看出它们具有连续性；另外一组三角形箭头指向右下角，可以看出它们是连续的一组。不同的形状会有连续性，箭头也特别有指向性，这就是为什么返回和前要进放在不同的位置，当我们的数据需要有连续的时候，我们也要使用相似的形状来表达，这就是连续性原则的应用。
同理如图10：连续性一定是要有连续等阶的变化，从左上角开始，向下和向右我们可以看出有明显的颜色连续等阶变化，通过色彩的透明度也可以做到连续性。
很多公司或者不同公司有不同的命名方式，这个需要和团队开发提前做沟通，主要以方便开发习惯操作为主，如果不命名也不能非得说成是错误的，命名可以理解成是一件锦上添花的事情，因为一切都以效率优先，命名自然会影响工作效率，通常情况，组件的命名可以分成组件的名称、级别、尺寸、状态，这样的命名顺序来进行，这样命名开发使用也比较方便，因为是按照了开发的统一规则来进行命名的。如图所示：
当英文不好的时候，推荐大家记常用组件英文名，以及常用状态名、级别名、内部名、尺寸名和位置名，那这些英文也几乎涵盖了工作中80%的英文词汇，收藏记忆哦~
文章来源：站酷 作者：飞鱼十七
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com