B端-响应式界面原理与设计方法，详细教程！

今天分享一个很多设计师头疼已久的问题，关于网页响应式布局原理和设计方法。文章主要包含三个部分：

• 响应式页面是什么
• 响应式布局的规则
• 响应式的设计流程

所以废话不多说，我们直接进入正题吧！

响应式页面是什么

在过去，网站通常就是为了电脑大屏幕展示而设计，如果用手机访问，只能在巴掌大的屏幕里看缩小版的页面。虽然还有手机专供的 WAP 页面，但因为太简陋也无济于事。

随着智能手机、3G、4G、HTML5 的普及，使用手机访问网站的人越来越多，为了让用户在手机上看到更合适的布局，且兼顾开发的效率，响应式的概念就被提出了。
通俗解释，就是通过一套代码，可以无缝匹配符合电脑、平板、手机预览效果的前端技术。比如下方 Nike 官网，就是应用了响应式设计后在不同客户端、分辨率下的效果。

虽然响应式的应用越来越广泛，但是从零开始去写一个响应式效果的网站对于程序员来讲是非常复杂的，因为当中包含了大量的逻辑、判断、适配内容。
所以，今天市面上看见的响应式网站，多数使用了一些开源的代码或者框架。而应用最广泛的，就数 Bootstrap 了。

之所以提这个，是因为既然开发使用了别人写的框架，那么对于我们的设计稿也就上了紧箍咒，我们需要根据框架的要求来设计界面，这会稍后具体解释。
还有个问题，就是为了实现平板、手机和电脑不同的预览效果，并不是只有响应式布局一种技术，还有另一种技术 —— 自适应。
通俗点说，自适应就是为不同客户端分别提供一套独立的前端代码，和响应式使用一套代码适配多种客户端不同。
响应式适合应用在一些简单的官网、展示类页面，展示的内容大致相同。而自适应适合应用在需要在不同客户端类型有较大差异的网站，这样只使用一套前端代码就完全行不通了。
比如爱奇艺的官网，为了符合用户体验，在移动端网页布局中精简替换了大量的内容，和电脑版已经没有太直接的联系了。

两种做法并没有好坏之分，只有适不适合项目之别。了解了它们的不同，我们就可以进一步学习响应式的规则了。

响应式布局的规则

响应式布局的规则并不是特别复杂，只要注意两个问题：

• 分段响应规则
• 组件宽度适应

1. 分段响应规则
敲黑板，响应式的响应，面向的核心对象是浏览器窗口的宽度，而不是设备类型。所以打开使用响应式的网站，我们通过改变浏览器的宽度，就可以看见不同的展示效果，比如下图的星巴克官网。

我们可以发现，浏览器宽度每达到一个数值（Breakpoint）的时候，页面的排版和样式就会发生明显的变化，而这就是响应式设计最重要的功能 —— 分段展示。

也就是说，响应式规则就是为页面分配不同的宽度区间，每个区间有各自展示的样式，用来应对不同的场景和设备类型，常见的适配区间大致如下：
包含图片截图 320-800 ：移动端收集屏幕 800-1200：平板或上网本屏幕 1200-无穷：一般的电脑显示器
面对分段式的布局、样式变更，我们就要关注到底发生了哪些变化。总结起来，可以简单的归纳成三种组件的调整：内容增减、布局调整、样式调整。
第一种，内容增减。即部分模块在不同的分段内会有显示和隐藏的状态，尤其是一些网页端的内容觉得在小屏幕上展示会太多了，就在小屏幕场景中隐藏掉。

第二种，布局调整。主要是模块的排列和顺序发生变化，常见的就是模块一行的列数发生改变。

第三种，样式变更。即针对不同的分段设计完全不一样的样式，最多应用在导航栏的设计中，会为最小的分段使用 iOS 的 Tabbar 或安卓的 Menu 样式。

所以，归纳起来，就是页面针对不同的分段展示不同的结果，即页面中的组件触发了对应的变化类型。每个组件都可以应用不同的变化类型，而无需进行统一。

2. 组件宽度适应
分段式响应，是响应式布局的第一层逻辑。而在触发关键值（Breakpoint） 之间的区间，我们拖动窗口的宽度，会发现组件的宽度也随之改动，这就是 —— 组件宽度适应。
组件宽度适应在手机 UI 的适配中非常重要，即完成不同屏幕宽的手机适配所应用的逻辑，所下面我们简单讲讲它的规则。
组件的宽度适应模式主要有两种类型，一种是容器宽度适应，一种是容器比例缩放，比如下面的图例。

容器是一个比较抽象的概念，类似设计软件中的编组，它集合了所有下级元素，但本身并没有实际的内容和样式。在响应式规则中，下级元素并不会和这个容器等比变动，出现下面这种错误的效果。

正确做法是会定义下级元素针对父容器的响应方法，做到容器变更的同时其自身的显示也是合理的。比如相对容器左右间距一致、对齐方向一致、尺寸固定等设置。

而这种规则的设置，就是 Sketch/Figma/XD 中的响应式设置功能。只要设置得当，就可以获得一样的宽度适应效果。

如果对软件响应式功能了解不全面的同学，就可以自己多搜索一下对应的说明，我就不在这里过多的展开了。
再总结一下，响应式的规则就是页面组件先遵循当前分段展示的布局效果，并在这个区间内支持小范围宽度的变更和适应。

响应式的设计流程

响应式设计是一种源自技术的概念，而不是单纯的设计风格、方法，所以设计响应式设计其实就是 「面向编程设计」。
设计界面要吻合编程的真实方法和需求，而不是根据我们想怎么做就怎么做，所以整个流程不能只站在设计师自身的角度考虑，而要和前端程序员紧密沟通，首先确定响应几个宽度区间，以及它们对应的数值分别是多少。
然后我们就要完成对应数量页面的设计，因为前面我们说过，分段响应规则中会有明显的样式变动，这就要求设计师是一定要给出设计示例的，而不能依靠口头描述或程序员自由发挥。

完成这些设计稿以后，我们再进一步确定同一个区间内，组件的宽度适应规则是什么样的。多数情况下，这个阶段使用口述就可以，如果规则比较多，那么就可以在标注阶段把你要实现的效果记录上去即可。
全部设计稿和规则都沟通完毕以后，才进入切图导出的阶段。要提醒一次，在一些特殊的情况下，响应式的背景切图会和普通页面的背景切法不一样，尽可能让前端程序员检查一遍导出的文件。
只要根据上述的流程，在遇到不确定或者不清楚的情况，就和前端程序员做沟通，那么很快就可以将项目输出出来。

结尾

响应式这个概念虽然高大上，但并不是任何项目都要无脑往上套的。因为框架规则上的限制，导致我们很难在响应式页面中使用一些特别复杂、高级的视觉样式，导致最终呈现的效果往往非常简单或者过度依赖图片的质量。
所以，如果在功能较为复杂或需要复杂视觉支撑的网页中，就可以选择应用固定页面内容宽度的设计来完成。
····················································································································································································

继上一次关于 B 端界面宽度设置的内容以后，现在我们就要谈一谈另一个 B 端设计师都很关心的话题，B 端的响应式应用。
很多新人在这个问题上深感苦恼，严重影响工作的进展，所以下面我们好好展开聊一聊。如果对响应式本身概念不太理解的同学，可以优先看看之前这篇分享：

用一篇文章，帮你看懂网页响应式布局原理

今天分享一个很多设计师头疼已久的问题，关于网页响应式布局原理和设计方法。文章主要包含三个部分： 响应式页面是什么 响应式布局的规则 响应式的设计流程 所以废话不多说，我们直接进入正题吧！

B端的响应式概念

第一步，我们简单讨论一下 B 端响应式是什么的问题。
虽然前面有写过网页响应式的分析，但是 B 端产品的作为一个比较特殊的分类，和一般展示型网站的响应式在应用上还是有很多不同点的。
响应式是网站为了让内容适配浏览器画布尺寸而使用的技术，即内容的区域会随着浏览器窗口的变更而变更，从而提升不同用户、不同场景的使用需求和体验。

普通展示性站点，主要是对信息要素进行响应式的呈现，包括图片、文字、背景等内容。而 B 端不仅展示的内容形式更复杂，还包含大量复杂的图表、表单、按钮、组件等元素。
B 端的响应式设计不仅仅是让内容能自动匹配显示而已，还要兼顾操作合理性和用户体验，并且这些复杂的设计内容在开发上也有比较多的技术难点。


所以，作为 B 端设计师，如果不能对该领域知识有基本认识，那么在对应项目中就很难做出让用户满意的设计，以及降低项目的推进效率。

响应式规则解析

解读响应式设计，最好的参考对象，就是蚂蚁 AntDesign 的布局相关规范了。
地址： https://ant.design/docs/spec/layout-cn
Ant 中，主要应用两种布局形式，左右工作区和上下工作区，响应式规则主要作用在工作区中的内容区域中。

在这个区域中，Ant 采用了 24 列格线（Coloum）、23 列间隔（Gutter）的删格系统。其中间隔数值是固定的，内容区域减去 23 列间隔后，剩下的部分等分成 24 个格线。

这是一个自动计算的体系，Gutter 可以通过我们制定，系统会自动根据实际区域尺寸计算格线的宽度，大致公式如下：
列宽 = （区域宽 – 23*间距）/ 24
这个公式中，未知数只有列宽有一个，间距是我们自己定的，在浏览器中也一定有一个数值，所以最后计算出列宽也就理所应当了。
栅格系统的基础应用，就是对内容模块分配指定数值的 “列”，比如一个组件的宽包含 3 col、4 col、5 col 或者 12 col。也就是说，在同一行中，总共包含 24 col，随便设计师切割出多少模块出来，只要最后总数相加是 24 即可。

所以通过 Ant 的框架来完成 B 端的设计，就是创建好画布以后，在内容区域创建出对应删格系统，然后在该删格体系内定义宽高、间距即可，Ant 的框架会自动帮助我们完成响应的功能。

比如
一开始设计的页面中，创建了 1440px 的画布，使用左右布局的形式，左侧使用 200px 宽的导航栏，右侧区域宽度为 1192px，间距为 8px，列宽就是 42px。

在这之后，内部层次更低的表格、输入框、标签栏等元素也会对应实现响应的效果……
讲到这里晕了嘛？
晕就对了，再写下去我也晕（狗头）。
因为无论是 Ant 还是任何成熟的 B 端响应式框架，都有比较高的理解成本，需要栅格和前端对应技术特征有一定的了解。再解释下去，我们就要从底层的 DIV+CSS 讲起了。
感兴趣的同学可以自己在 Ant 规范中查看设计、组件中的布局部分，尝试去理解它们，如果看不明白，就不要再花多余的时间去查资料了，因为欠缺足以理解他们的基础。
同时，栅格和响应式的共同结合对于前端程序员也有非常高的要求，随着标准化组件的增加，代码会越来越难维护，产生的问题也会越来越多。


下面，我会对如何进行 B 端设计给出自己的建议。

响应式使用建议

响应式的应用，是为了让业务内容可以正常的显示，交互操作可以顺利的开展，而不是为了适配 Ant 这类框架而适配。
所以，尽量坚持极简、效率至上的原则。建议新手不要将栅格系统和响应式进行混合使用。
在常规项目中，我们对响应式功能的应用只需要关注唯一一个要点 —— 视图拉伸。
“视图” 是一个专业术语，可以是手机客户端开发中的 View，也可以是网页前端中的 Div，文本编辑器中的 Block，即选中设计元素时的外部边框。

将整个响应式规则简化，在 B 端的使用环境中，就是对部分模块、组件的视图区域进行横向拉伸、延展的过程。
比如下方的图例，浏览器画布放大以后，内容区域实现延伸，从而使得内部的模块、组件、列也发生对应的宽度变化。

我们一层一层来解释，首先是内容区域的响应。内容区域的实际宽度，并不是我们手动直接给出的，这和 C 端设计有很大的差异。
它的宽是通过定义左右的间距实现的，即距离左侧导航的数值和右侧边缘的数值。

在这个基础上，如果我们定义内部的横向模块，也不需要定义它具体的宽度像素值，而是把它们用百分比的方式来定义，比如做成 3 等分，就是每个模块宽占内容区域的 33.33%。

如果内容区域包含间距，那么每个模块的实际宽度 = （内容宽 – 总间距）/ 3 如下方的案例。

而对于每个模块内的元素来说，原则也是类似的。如果我们在里面添加了标题、副标题，两个文本段落，那么这两个文本视图也可以随着父级元素的变动而变动。

同理，除了文本以外，还包含输入框、按钮等表单元素，也一样应用这种思路进行响应。

以及，在处理表格的时候，我们也可以将每一列分配对应的宽度比例，保证总和是 100%的情况，那么无论你怎么伸缩页面都可以实现内容的合理显示。

但是，并不是在响应式过程中，我们设计的每个元素都要具备响应式的特征。比如头像、图标、小按钮、定宽标签等元素，并不会随着父级元素的变更而变化自己的尺寸，这类元素即定宽元素。

响应式设计，就是用这种击鼓传花的方法将宽度一层层定义下去，每个进行响应的元素都根据父级元素的宽来进行间距、比例的换算，而不能响应的元素，我们确定好它的具体长宽值，确保整个页面的布局可以灵活的进行调整。
并且，在上一篇内容中，我们提过建议使用最小适配宽度来展开 B 端的设计，原因就是因为每一模块内容的显示都有它的最小值，所以理论上我们要在设计 B 端界面的过程中，确定该页面适配的最小宽度（min-width），当小于这个宽度以后，所有页面元素将不再缩小，使用浏览器进度条进行左右的滚动查看内容。

对于一般项目，使用这种基础的响应式方法即可，尽量避免使用 Breakpoint 概念去制作多个响应的布局内容，不仅设计工作大量增加，而且后期维护成本极高。
对于想要支持手机访问的需求来说，我只建议放弃在同一套设计中使用响应式布局适配手机，而是和你们的产品、开发沟通，提供一套独立的手机设计内容。

结尾

最近两篇内容就是关于 B 端创建画布、宽度适应的基本讲解。对于 B 端响应式的说明确实需要大量的铺垫和基础说明，用图文的说明方式还是非常的吃力。
欢迎关注作者的微信公众号：「超人的电话亭」