相信很多B端设计师都很关心B端响应式界面设计,所以今天就来分享B端响应式界面设计的一些知识。


B端响应式是什么


响应式是网站为了让内容适配浏览器画布尺寸而使用的技术,即内容的区域会随着浏览器窗口的变更而变更,从而提升用户体验。B端响应式和一般展示型网站的响应式有很多的不同之处。

B 端响应式界面应该怎么做?这篇教程超详细!
普通展示性站点,主要对信息要素进行响应式的呈现,包括图片、文字、背景等内容。而B端不仅展示更加复杂的内容,还包含大量的图表、表单、按钮、组件等。

B端的响应式设计不仅仅是让内容能自动匹配显示而已,还要兼顾操作合理性和用户体验。

B 端响应式界面应该怎么做?这篇教程超详细!
B 端响应式界面应该怎么做?这篇教程超详细!
作为B端设计师,要对该领域知识有一定的了解。


响应式规则解析


解读响应式设计,最好的参考对象,就是AntDesign的布局相关规范了(这个可以到网上查找)。Ant中主要应用左右工作区和上下工作区,响应式规则作用在工作区中的内容区域中。

B 端响应式界面应该怎么做?这篇教程超详细!
在这个区域中,Ant采用了 24 列格线(Coloum)、23 列间隔(Gutter)的删格系统。其中间隔数值是固定的,内容区域减去 23 列间隔后,剩下的部分等分成 24 个格线。
B 端响应式界面应该怎么做?这篇教程超详细!
我们可以制定Gutter ,系统会自动根据实际区域尺寸计算格线的宽度,大致公式如下:列宽 = (区域宽 – 23*间距)/ 24。这个公式中,未知数只有列宽有一个,间距我们制定,在浏览器区域宽也可以自己查看。

栅格系统的基础应用,就是对内容模块分配指定数值的 “列”,比如一个组件的宽包含 3 col、4 col、5 col 或者 12 col。也就是说,在同一行中,总共包含 24 col,随便设计师切割出多少模块出来,只要最后总数相加是 24 即可。

B 端响应式界面应该怎么做?这篇教程超详细!
通过Ant框架完成B端的设计,创建好画布后,在内容区域创建出对应删格系统,并在该删格体系内定义宽高、间距即可,Ant的框架会自动完成响应功能。

例如一开始设计的页面中,创建了1440px的画布,使用左右布局的形式,左侧使用 200px 宽的导航栏,右侧区域宽度为 1192px,间距为 8px,列宽就是 42px。在这之后,内部层次更低的表格、输入框、标签栏等元素也会对应实现响应的效果。

上面的内容可能很多人都不太理解,无论是 Ant 还是任何成熟的 B 端响应式框架,都需要我们了解栅格和前端对应技术。大家如果感兴趣的话可以到Ant 规范中查看设计、组件中的布局部分,尝试去理解它们。

栅格和响应式的共同结合对于前端程序员也有非常高的要求,随着标准化组件的增加,代码会越来越难维护,产生的问题也会越来越多。

B 端响应式界面应该怎么做?这篇教程超详细!
B 端响应式界面应该怎么做?这篇教程超详细!


响应式使用建议


响应式的应用,简单来说是为了让业务内容可以正常的显示。所以尽量提高效率,不要将栅格系统和响应式混合使用。在常规项目中,对响应式功能的应用只需要关注视图拉伸。

“视图”可以是手机客户端开发中的 View,也可以是网页前端中的 Div,文本编辑器中的 Block,即选中设计元素时的外部边框。

B 端响应式界面应该怎么做?这篇教程超详细!
在B端的使用环境中,就是对部分模块、组件的视图区域进行横向拉伸、延展的过程。就像下方图例,浏览器画布放大以后,内容区域延伸,使内部的模块、组件、列也发生变化。
B 端响应式界面应该怎么做?这篇教程超详细!
先来解释内容区域的响应。内容区域的实际宽度,并不是我们手动直接给出的,这和 C 端设计有很大的差异。内容区域的宽是通过定义左右的间距实现的,即距离左侧导航的数值和右侧边缘的数值。
B 端响应式界面应该怎么做?这篇教程超详细!
在这个基础上,如果定义内部的横向模块,也不需要定义具体的宽度像素值,而是把它们用百分比的方式来定义,比如做成 3 等分,就是每个模块宽占内容区域的 33.33%。
B 端响应式界面应该怎么做?这篇教程超详细!
如果内容区域包含间距,那么每个模块的实际宽度 = (内容宽 – 总间距)/3。
B 端响应式界面应该怎么做?这篇教程超详细!
对于每个模块内的元素来说,原则也是类似的。如果在里面添加了标题、副标题,两个文本段落,那么这两个文本视图也可以随着父级元素的变动而变动。
B 端响应式界面应该怎么做?这篇教程超详细!
除了文本以外,还包含输入框、按钮等表单元素,也应用这种思路进行响应。
B 端响应式界面应该怎么做?这篇教程超详细!
在处理表格的时候,也可以将每一列分配对应的宽度比例,保证总和是 100%的情况,这样不管怎么伸缩页面都可以合理显示内容。
B 端响应式界面应该怎么做?这篇教程超详细!
但并不是在响应式过程中,我们设计的每个元素都要具备响应式的特征。比如头像、图标、小按钮、定宽标签等元素,这些不会随着父级元素的变更而变化,这类元素即定宽元素。
B 端响应式界面应该怎么做?这篇教程超详细!
响应式设计,就是用这种方法将宽度一层层定义下去,每个进行响应的元素都根据父级元素的宽来进行间距、比例的换算,而不能响应的元素,确定好它的具体长宽值,确保整个页面的布局可以进行调整
对于一般项目,使用这种基础的响应式方法即可,尽量避免使用 Breakpoint 概念去制作多个响应的布局内容,不仅设计工作大量增加,而且后期维护成本极高。

如果有想要支持手机访问的需求,建议放弃在同一套设计中使用响应式布局适配手机,而是和产品、开发沟通,提供一套独立的手机设计内容。