第一,我们简单讨论一下 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 端响应说明确实需要大量铺垫和基础说明,用图文说明是常吃力。
欢迎关注作者的微信公众:「超人的电话亭」