赞助商
立即赞助

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端浪潮下设计师的「尴尬」 供应链资源整合是企业发展态势。企业对内部多岗位协作、企业与企业间的协作效率有更多诉求。 企...
B端设计
B端基础控件的认识 控件一词,直译的话可以翻译成 “用来控制的元件”,是我们对 B 端系统进行信息录入、更改、操作的元素。让...
B端
回顾之前的一些 B 端的项目,主要通过“组件库搭建”和“日常项目”来举例,分享关于 B 端设计师在日常工作中可抓的价值点。 篇首...
B端
前文已经提到:对于特别复杂的B端表单,「简化」只是提升其易用性的方法之一。遇到数据量大,层级深,数据之间有交叉或嵌套关...
B端产品
在前两篇文章中,我们主要讲到 B 端产品最为重要的信息展示组件表格的设计思路,根据不同的场景对表格进行了答疑,同时部分读...
B端
文字的基本属性 字体属性包含的内容很多,我们可以根据 Sketch 或 Figma 的文字属性栏为例,分别进行解释。 1. 字体选择 F...
B端
最近好多朋友加我微信,向我“咨询”一二(咨询真是不敢当,充其量就是一起探讨),基本上集中在 B 端的产品设计上,略加整理,...
B端产品