相信很多B端设计师都很关心B端响应式界面设计,所以今天就来分享B端响应式界面设计的一些知识。
B端响应式是什么
响应式是网站为了让内容适配浏览器画布尺寸而使用的技术,即内容的区域会随着浏览器窗口的变更而变更,从而提升用户体验。B端响应式和一般展示型网站的响应式有很多的不同之处。
B端的响应式设计不仅仅是让内容能自动匹配显示而已,还要兼顾操作合理性和用户体验。
响应式规则解析
解读响应式设计,最好的参考对象,就是AntDesign的布局相关规范了(这个可以到网上查找)。Ant中主要应用左右工作区和上下工作区,响应式规则作用在工作区中的内容区域中。
栅格系统的基础应用,就是对内容模块分配指定数值的 “列”,比如一个组件的宽包含 3 col、4 col、5 col 或者 12 col。也就是说,在同一行中,总共包含 24 col,随便设计师切割出多少模块出来,只要最后总数相加是 24 即可。
例如一开始设计的页面中,创建了1440px的画布,使用左右布局的形式,左侧使用 200px 宽的导航栏,右侧区域宽度为 1192px,间距为 8px,列宽就是 42px。在这之后,内部层次更低的表格、输入框、标签栏等元素也会对应实现响应的效果。
上面的内容可能很多人都不太理解,无论是 Ant 还是任何成熟的 B 端响应式框架,都需要我们了解栅格和前端对应技术。大家如果感兴趣的话可以到Ant 规范中查看设计、组件中的布局部分,尝试去理解它们。
栅格和响应式的共同结合对于前端程序员也有非常高的要求,随着标准化组件的增加,代码会越来越难维护,产生的问题也会越来越多。
响应式使用建议
响应式的应用,简单来说是为了让业务内容可以正常的显示。所以尽量提高效率,不要将栅格系统和响应式混合使用。在常规项目中,对响应式功能的应用只需要关注视图拉伸。
“视图”可以是手机客户端开发中的 View,也可以是网页前端中的 Div,文本编辑器中的 Block,即选中设计元素时的外部边框。
对于一般项目,使用这种基础的响应式方法即可,尽量避免使用 Breakpoint 概念去制作多个响应的布局内容,不仅设计工作大量增加,而且后期维护成本极高。
如果有想要支持手机访问的需求,建议放弃在同一套设计中使用响应式布局适配手机,而是和产品、开发沟通,提供一套独立的手机设计内容。