随着B端产品的不断发展，设计师在日常工作中也会经常接触到B端的设计需求，如最近在公司做的中台管理系统以及D5组件平台。由于B端产品在布局上的特殊性，如左右布局、左中右布局，所以很少会使用之前设计一般网站用的“版心”的概念，但这也面临了一些问题，比如当电脑的分辨率小于设计的分辨率时，内容就会存在溢出的可能性，从而增加了用户操作的难度以及影响了整个的用户体验。如何让设计的页面能很好的在不同的终端设备呈现，以下是我在之前的工作中总结的一些经验。

文章大纲:

1.什么是响应式布局

2.设计师如何进行响应式设计

3.数据可视化的响应式设计

4.表格的响应式设计

什么是响应式布局

响应式布局的概念，网络上有很多文章介绍，用一句话概括就是：一个网站能够兼容多个终端。而与之相对的是自适应布局，他是为不同的终端设计不同的版本。听起来好像响应式布局更加的省事，不用设计很多的版本，但是，响应式布局的开发成本也会相对较高，所以选择什么样的布局还是要综合考虑不同的业务场景。

   图片来自网络，侵删

举个例子

我们为一家公司设计一个中后台系统，已知该公司的电脑都是统一采购且型号相同，这时候我们其实是为一个终端设计，不需要考虑不同终端间的适配问题，显然选择自适应布局会更加的合理。

设计师如何进行响应式设计

在说如何进行响应式设计之前，我们需要知道响应式的原理是什么。

我们将设计好的页面给到前端，前端在写页面的时候，通常是将页面信息按照一定的规律封装到一个个盒子里，先把每个盒子的位置，间距设置好，再填充里面的内容。盒子的宽高会根据里面的内容设置，当设置固定的值，也就是写死的时候，适配到小分辨率的终端时，就有可能存在信息溢出的可能。所以响应式布局，就是将页面的每个盒子通过占页面百分比的形式展示，这样盒子的宽度是随着分辨率的大小动态改变的，也就解决了信息溢出的问题。

那设计师如何根据响应式布局设计页面呢？

我们知道响应式布局是将页面信息按照百分比的形式展示，但是如何让这个百分比能更直观的表现出来，我们就需要有个载体，通过这个载体的改变，来清楚的知道各个模块比例的改变，这时候我们就引入了B端设计中一种常见的设计方法：栅格布局

有关栅格布局的介绍，知乎、百度等网站都有非常详细的文章，这里就不过多叙述了，我们主要还是来谈谈设计师如何建立栅格以及怎么在设计中运用栅格。

如何建立栅格？

目前市面上主流的UI设计软件主要包括sketch、Adobe XD、Figma等，这里主要以sketch为例。

建立栅格的第一步，就是要根据具体的业务选择合适的项目框架：如一级导航跟二级导航很多的时候，我们就可以选择左右布局，如表格列数很多的时候，我们可以考虑上下布局，减少侧边栏占页面的宽度。

当我们选择好项目的框架及设计尺寸后（以左右布局，1920*1080的设计尺寸为例），我们就可以在sketch上新建画板，来为我们的项目建立一个栅格系统，具体操作为：视图-画布-布局设置我们来解读一下布局面板上的一些参数：总宽，是需要进行栅格的内容区域，也就是页面宽度减去侧边栏宽度的区域；偏置，当不选择居中时，就是侧边栏的宽度，他是来承载我们页面导航的区域；列数，是栅格的数量，一般会选择12，24，主要区别在于24栅格的页面精细度要比12栅格高，具体选择还是要根据业务需求；间距宽度，是指每个列之间的距离；列宽，是根据以上设置的内容自行计算出来的。这样，我们就为画板设置了一个栅格系统，如图：

怎么在设计中运用栅格？

在使用栅格之前，我们还要跟产品经理以及技术人员确定这个栅格的可行性，如侧边栏宽度的设置，是否能够承载导航栏字符的最大值，如果不能承载，是选择换行还是重新定义导航栏的字数。栅格是整个项目布局的基石。会运用到所有的项目页面，是不会轻易改变的，所以就需要前期沟通来规避变动的风险。

那么设计师如何运用栅格做设计呢？

设计师在拿到设计需求后，不用急于就开始往画板里填充内容，而是应该分析整个需求，看看里面的功能模块与层级，并在画板上分配对应的区域，然后观察每个模块在页面的位置以及用户可能的操作路径是否合理，同时因为栅格的存在，我们还可以更直观的看到每个模块之间的关联关系以及占比，能让我们在一个宏观的角度看到需求在页面的呈现，能够对每个模块里的内容进行监测与掌控。

数据可视化的响应式设计

数据可视化，是B端设计中常见的系统，之前也有参与医院数据中心及证券管理平台等数据可视化设计，主要是通过模块化的布局，展示每个模块相关数据的统计、占比以及变化，是栅格布局在实际运用中常见的系统。

同时，数据可视化也是响应式布局中常见的系统，因为数据是实时更新的，用户需要在各个终端都能及时的查看，但是就会出现一个问题，电脑端因为屏幕大，所以一行可以放置多个模块，但是手机端屏幕小，一行只能放置1-2个模块。这时候不仅要考虑模块按照页面占比进行适配，还要考虑模块的排列怎么根据不同的终端进行适配。所以我们就引入了一个概念：断点断点，就是终端分辨率的一个临界值，用于前端判断在什么时候改变页面的布局，从而让内容能更好的进行呈现。因为我们的模块是根据栅格来布局的，所以我们可以通过栅格里的数值在各个分辨率下的变化，来具象的查看每个模块的变化。而这个变化的规则，就需要根据具体的项目，跟前端沟通后产出的，也就是响应策略表而对于设计师而言，除了参与响应策略表的讨论与制定，还需要根据每个分辨率下布局的变化，重新整合模块内容的排版与设计，如字号字数的调整，功能的删减等，已达到各个终端下模块都能有个好的呈现。

表格的响应式设计

表格，也是B端设计中经常出现的功能，用来汇总数据，以及给数据做增删改查的操作。但是经常会面临一些适配的问题，例如单元格的长度，由于不清楚单元格的内容的字符数量，如果设置一个固定的值，则很可能在适配过程中由于表格过长导致出现横向滚动条，影响用户体验；如果根据单元格里的内容适配，则很可能使每个单元格连在一起，影响用户的阅读。那么，表格该如何进行响应式设计呢？

我们先来看看表格的构成，表格主要分为三个部分：序号列（选择列）、内容区域、操作列；一般序号列、操作列因为内容确定，所以能很好的设置宽度，而内容区域，由于里面的内容不确定，所以需要响应以达到好的用户体验。

表格的响应，需要引入两个概念：安全距离与响应距离。安全距离，是每列之间的最小距离，防止分辨率过小时，所有列粘连在一起影响用户的阅读，而响应距离，是随着终端分辨率的变化而变化的，保证表格始终占满屏幕，而不是仅仅占屏幕的一部分，影响整个页面的美观度。

那么设计师如何做表格的响应式设计呢？

设计师在设计表格的时候，也要有安全距离与响应距离的概念，以sketch为例，可以为单元格的内容建立一个组件，使每个内容后面都空出一个安全距离，而安全距离的数值则要根据具体的业务来决定，这样当我们把一行的单元格填写完内容后，通过水平分布，每列之间的距离，也就是该分辨率下表格的响应距离了。

以上，就是我根据自己以往的经验跟查阅的资料，整理的B端响应式设计的内容，可能会有一些思考不够全面的地方，欢迎大家的指正与探讨，也希望能够对大家有一些帮助。

Powered by Froala Editor