响应式网页设计应该注意的9个原则

2016年06月17日 源自:大神部落

响应式网站越来越受到大家的欢迎,有利也有弊的因素。它没有固定的页面尺寸、没有毫米或英寸,没有任何物理限制,让人感到无从下手。下面就和大家分析如何运用响应式web设计的各项基本原则来实现。为了简单起见,就说说响应式网站的布局。希望对你有所受益。

你可能感兴趣的响应式网站设计素材:

10个优秀的响应式网站设计

【HTML5开发教程下载】HTML5移动应用开发入门

12个强大的Web服务测试工具免费下载

1、Web字体Vs系统字体


想让自己的网站拥有炫酷的Futura或Didot效果吗?那就是用web字体吧。尽管web字体看起来很炫酷,但你要记住,这些字体都需要用户下载,字越多,用户加载页面的时间也就越长。另一方面,系统字体加载速度则快得多(前提是用户本机就有),但太过普通。这里有很多适合制作web的网页字体。

2、移动优先还是台式桌面优先

严格来说,项目从小屏幕入手过渡到大屏幕(移动优先),还是从大屏幕入手过渡到小屏幕(台式桌面优先)区别不大。但是,从移动端着手可以给你带来一些额外的限制,帮助你进行决策。通常情况下大家会从两方面同时着手,所以你还是要看哪种方式最适合你。

响应式网页设计的9项基本原则

响应式网页设计的9项基本原则

 

3、响应式设计Vs自适应网页设计

 

看似相同实则不然。这两种设计方式彼此相辅相成,所以说也没有对错之分。具体情况要依内容而定。

响应式网页设计的9项基本原则

4、内容流

随着屏幕尺寸越来越小,内容所占的垂直空间也越来越多,也就是说,内容会向下方延伸,这就叫做内容流。如果你习惯了使用像素和点进行设计,可能会觉得这个有点难掌握。不过没关系,习惯了就很好理解了。

响应式网页设计的9项基本原则

5、相对单位

你的设计对象可能是台式桌面,也可能是移动端屏幕或者介于两者之间的任意屏幕类型。像素密度也会彼此不同,所以我们需要使用灵活可变,并且能够适应各种情况的单位。那么在这种情况下,百分比等相对单位就派上用场了。使用百分比时,我们说宽度50%就是表示宽度占屏幕大小(或者叫视区,也就是指所打开浏览器窗口的大小)的一半。

响应式网页设计的9项基本原则

6、断点

断点可以让页面布局在预设的点进行变形,也就是说,在台式桌面上显示3栏,在移动设备上仅显示1栏。大多数CSS属性都可以实现断点之间的变形。断点放置的位置通常取决于内容。比如,如果一句话要换行,你可能就需要加上断点。但断点使用时需要谨慎——如果搞不清内容之间的逻辑关系,很容易弄的一团乱。

响应式网页设计的9项基本原则

7、最大和最小值

有时候内容占满整个屏幕宽度(例如在移动设备上)是好事,但如果相同的内容在电视屏幕上也撑得满满的,貌似就不太合理了。这就是为什么要有最大/最小值。例如,如果宽度为100%,最大宽度1000px,那么内容就会以不超过1000px的宽度填充屏幕。

响应式网页设计的9项基本原则

8、嵌套对象

还记得相对位置吗?如果一大堆要素彼此都紧密联系,那么必将难以控制。因此,将要素放置到容器中就会让它们变得更加好理解,并且简洁明快。这种情况就需要用到像素之类的静态单位了。静态单位对于logo和按钮等不需要扩展的内容来说非常有用。

响应式网页设计的9项基本原则

9、位图Vs矢量图

你的图标是否有很多细节,并且应用了很多华丽的效果?如果是,那就用位图。如果不是,考虑使用矢量图。如果是位图,使用jpg、png或gif。矢量图则最好使用SVG或图标字体。其各有利弊。但你要时刻牢记图标尺寸——未经过优化的图片不能传到网上。另一方面,矢量图通常比较小,不过部分比较老的浏览器可能不支持矢量图。还有,如果图标有很多曲线,那有可能会比位图还大,所以要明智取舍。

响应式网页设计的9项基本原则

响应式网站的设计大概就是这几种基本原则。

 

自适应网站建设  深圳响应式网站建设  深圳网站建设   深圳营销型网站建设  深圳市大神部落网络科技有限公司

深圳自适应网站建设 深圳响应式网站建设 大神部落 UI设计 软件界面设计 移动端UI设计 手机端UI设计 交互设计 用户体验 IOS开发 Android(安卓)开发 高端品牌网站建设 商城网站建设 手机网站建设 Html5响应式网站建设 网站推广营销 微信开发 系统开发 营销型网站

扫一扫

关注大神部落

长按二维码

关注大神部落

地址:深圳市龙华新区东环一路天汇大厦B座520室

电话:13530491906

Copyright © 2014 - 2018 大神部落 & 版权所有

粤ICP备15047144号