赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
4.1K 0 0

B端的响应式概念

第一,我们简单讨论一下 B 端响应式什么的问题。

虽然前面有写过页响应式的分析,但是 B 端产的作为一个较特殊的分类,和一般展示的响应式在应上还是有很多同点的。

响应式是网站为让内容适浏览器画尺寸而使用的技术,即内容的区域随着浏览器窗口的变更而变更,从而提升不同用户、不同场的使用需求和验。

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

普通展示站点,主要是对信息要素进行响应式的呈现,包括图、文字、背等内容。而 B 端不仅展示的内容形式更复,还包含大量复的图表、表单、按钮、组件等元素。

B 端的响应式设计不仅仅是让内容能自动匹显示而已,还要兼顾操合理和用户验,并且复的设计内容在开上也有比的技术难点。

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

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

,作为 B 端设计师,如果对该领域知识有基本认识,那么在对应项目中就很难做户满意的设计,及降低项目的推进效率。

响应式规则解析

解读响应式设计,最好的参考对象,就是蚂蚁 AntDesign 的布相规范了。

地址: https://ant.design/docs/spec/layout-cn

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 端响应式框架,都有较的解成本,需要栅格和前端对应技术特征有一定的了解。再解释,我们就要从层的 DIV+CSS 讲起了。

感兴趣的同学以自己在 Ant 规范中查看设计、组件中的局部分,尝试去理它们,果看不明白,就不要花余的时间去查资料,因为欠缺以理他们的基础。

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

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

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

下面,我对何进行 B 端设计给出自己的建议。

响应式使用建议

响应式的应用,是为让业务内容以正常的显示,互操以顺的开展,而不是为适 Ant 类框架而适。

所以,尽量坚持极简、效率至上的则。建议新不要将栅格系统和响应式进行混使用。

在常规项目,我们响应功能应用需要关注唯个要 —— 视图伸。

“视图” 一专业语,可以手机客户端发中的 View,也可以网页端中的 Div,文本编辑器中的 Block,即选中设元素时的外部框。

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

将整响应式规则简化, B 端的使用环境中,就对部分模块、组件的视图区域行横向拉伸、延展的过程。

如方的图例,浏览器画布放大后,容区域实现延伸,从而使得的模、组件、列发生对应的宽变。

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

我们一层一层来解释,首先是容区域的响应。容区域的实际宽,并是我们手直接给的,这和 C 端设计有很大的差异。

它的宽是通定义左右的间距现的,即距离左导航的数值和右边缘的数值。

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

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

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

果内容区域包含间距,么每个模块的际宽度 = (内容宽 – 总间距)/ 3 下方的案例。

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

而对每个模块内的元素来说,原则也是类似的。果我们在里面添加标题、副标题,两个文段落,么两个文视图也以随着父级元素的变动而变动。

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

同理,除文以外,还包含输框、按钮等表单元素,也一样应用种思路进行响应。

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

以及,在处理表的时,我们也以将每一列分对应的宽度比例,证总和是 100%的情况,么无论你怎么伸缩页面以现内容的合理显示。

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

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

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

响应式设计,就是用种击鼓传花的方法将宽度一定义下去,每个进行响应的元素根据父级元素的宽来进行间距、比例的换,而不能响应的元素,我们确定它的具长宽值,确整个页面的局以灵活的进行整。

并且,在上一篇内容中,提过建议使用最适配宽度来展开 B 端的计,因就是因为每一模块内容的显示都有它的最值,所以理论上要在计 B 端界面的过程中,确定该页面适配的最宽度(min-width),当于这个宽度以后,所有页面素将不再缩,使用浏览器进度条进行左右的滚动查内容。

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

对于一项目,使用这种基础的响应式方法即可,尽量避免使用 Breakpoint 概念去制作多个响应的布局内容,不仅计工作大量增加,而且后期维护成本极高。

于想要支持手访问需求来说,我议放弃在套设计使用响应布局适配手,而是和你们品、开发沟,提供套独立手设计内容。

结尾

最近两篇内容是关于 B 端创画布、宽度适应基本讲解。于 B 端响应说明确实需要大量铺垫和基础说明,用图文说明是常吃力。

欢迎关注作者的微信公众:「超人的电话亭」

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

说明: 本文主要面向 B 类业务、简体中文语境,提供实操性指南; 行业内约定俗成的常用语建议沿用,可以不依照这里的建...
B端
由于B端产品的特殊性,也由于各类React组件盛行,设计发挥的空间没有C端那么直接,更多隐藏在使用体验的过程中。面对改版,我...
B端产品
目前我主要深耕于B端设计中,深知B端表格设计与C端有很大的不同,无论是表格的展示形式以及承载内容上都有非常大的差异。而现...
B端产品
在接触设计之初就曾阅读过一本关于整理的书籍,佐藤可士和的“超级整理术”,书中的内容对我深受启发,在往后的工作中我也一直...
B端设计
今天给大家介绍几个 Illustrator 杀手级功能,分享一下如何让图档尽量小,可反复修改且不会破坏对象的作图小技巧,再配合一通...
B端产品
这篇文章是我自己在工作中受到各种摧残、无数次开会讨论总结而来,如果你现在深处B端行业,强烈建议大家一定要看完。 收到很...
B端设计
今年的新冠疫情突发,让企业级协作产品的赛道热闹了起来。前有钉钉,企业微信,后有飞书带刀入场,其他厂商看了眼红,赶紧行...
B端产品
B端浪潮下设计师的「尴尬」 供应链资源整合是企业发展态势。企业对内部多岗位协作、企业与企业间的协作效率有更多诉求。 企...
B端设计