本文以Bootstrap举例,简述响应式布局的设计方法-设计前沿

清大环艺设计培训机构 > 清大BLOG > 设计前沿 > 本文以Bootstrap举例,简述响应式布局的设计方法

手机扫码查看、收藏

本文以Bootstrap举例,简述响应式布局的设计方法

发布时间:2018年09月27日 17:49:12 手机版

软装设计

景观设计培训2 尽量不要使用5列正如前面介绍网格系统时说到过,网格系统一般采用12列、16列、24列等可以均分为多个数的2倍数列。当你想设计5均分列、7均分列、9均分列、11均分列等列数时会发现,这些网格系统并不




























景观设计培训











2.尽量不要使用5列

正如前面介绍网格系统时说到过,网格系统一般采用12列、16列、24列等可以均分为多个数的2倍数列。当你想设计5均分列、7均分列、9均分列、11均分列等列数时会发现,这些网格系统并不能满足所需。一旦设计这样的列数,就意味着开发人员需要自己写这个等分样式或者修改框架的网格系统,降低其效率降低。

并且,这些列数将比较难和现有的网格系统交互使用,使得响应式的设计收到影响,开发也同时受到这些影响。

3.减少模块的增减

即便CSS3提供了媒体查询和元素的显示隐藏功能,但是我们依然还是尽量的减少通过隐藏模块的方式来向下兼容低分辨率的显示器。

因为这样做虽然可以增加用户体验,但是对于流量和代码复杂度都没有任何帮助。

特别对于受众面广的门户网站来说,可以说寸流量寸金,这样的响应式布局,即便你把移动端的页面设计得非常非常简洁,那些隐藏起来的部分也仅仅只是隐藏起来了,它依然会被下载到你的移动设备上。

现阶段来说,更好的解决方案,依然是给移动端单独设计一套页面,单独开发一套代码。这样做除了节省流量外,也能更好的针对移动端的操作习惯进行设计,而不用为了兼容更多的终端而牺牲了一些体验。

4.样式统一

同一个模块在不同终端上尽量做到统一样式。毕竟视觉效果更统一的话,品牌感会比较强。对于设计师的你来说,视觉规范更容易写,更容易维护。

而开发人员也会感激你的,因为他不用为不同的样式去编写、去维护更多的样式表。

而代码越少,加载越快,用户体验也越好。

5.移动优先

有没有发现,许多优秀的响应式网站,设计总是那么的简洁大方,对手机等小屏设备的支持总是那么的完美,用户体验好到飞起。

因为他们采用的是移动优先的设计原则。移动优先这个词是伴随着响应式而出现的,主要是因为移动端的布局和功能总是比更大的设备简单。

而从简单到复杂的过程总是比从复杂到简单的过程容易。

而在大屏设备上观看简洁的内容也总是比在小屏设备上观看复杂的内容来得舒服。

于是,当我们设计响应式网页的时候,应该考虑从移动端开始,先设计移动端的页面,然后再设计更大的屏幕,往其中增加更复杂的布局和内容,最终实现从移动端到超大屏幕的渐进增强。


六、什么时候选择响应式设计

响应式设计的诞生是为了解决不同分辨率的终端的适配问题,那么它是网页设计的最佳方案吗?它可以解决所有网页设计的问题吗?

答案是否定的。时至今日,响应式的研究已经日趋成熟,然而,它仍然只能适用于一部分场景。如果你的项目符合以下几点,那么响应式设计会是个不错的选择:


1.需要更强的兼容性

响应式诞生的目的就是为了解决不同终端的兼容问题,所以如果你的项目需要兼容多种不同的设备,那么可以考虑响应式设计。


2.节约维护成本

响应式布局虽然相较于静态布局开发难度大,但是维护成本更低。

相对于多个终端多个版本的页面来说,无论是修改代码还是运维都只需要对一个内容进行操作,而无需对每个端口单独维护。


3.以展示为主的站点

如果你的网站是功能型的,而且非常复杂的话,不要考虑响应式,因为响应式的页面代码冗余很大,不利于复杂网站的开发。

相反如果你的室内环境设计网站是以内容展示为主的话,会比较适合使用响应式布局。


4.不考虑旧的浏览器

由于响应式布局的很多实现手段是基于CSS3的,对于某些较老的浏览器,会出现兼容问题。(“IE”我说的就是你,别东张西望!)

所以,如果需要考虑一些旧浏览器的兼容问题的话,那还是乖乖的做静态布局吧。


...


附件是一份用于演示本文所提到的各种响应式的实现效果的Html,请打开目录下的index.html 体验。不要使用低版本的IE打开。





百度地图


上一篇:运行一个成功的设计冲刺有几个技巧

下一篇:本文将深入浅出的讲解图层混合模式的基础知识


本文标题:本文以Bootstrap举例,简述响应式布局的设计方法

本文链接:https://www.eadedu.com/shejiqianyan_20391.html


软装素材下载

草图大师视频教程下载

实用3D材质库下载

软装素材

清大环艺设计培训机构
设计论坛 实践基地 实践导师 国际认证 游学课程 专业课程 首页
010-62780886
在线咨询 QQ 咨询 010-62780886