值得学习!响应式Web设计的9项基本原则

MegLen · 发布于 2016-05-16 · 字数3997 · 浏览 1178 · 评论 0

今天@网秦UEC 的同学从国外分享了一篇关于响应式的好文,借助动态图列出了传统设计与响应式设计的不同之处,直观易懂不说,提到的9项原则都很实用,值得学习哟。

响应式web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难。没有固定的页面尺寸、没有毫米或英寸,没有任何物理限制,让人感到无从下手。随着建立网站可用的各种小工具越来越多,像素设计局限于桌面和移动端也已经成为历史。因此,现在就让我们来说明一下如何运用响应式web设计的各项基本原则来实现,而不是抗拒流畅的网页体验。为了简单起见,我们将着重讲响应式布局。

1.响应式设计vs适应式设计

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

2. 内容流

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

3. 相对单位

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

4. 断点

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

5. 最大和最小值

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

6. 嵌套对象

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

7. 移动优先还是台式桌面优先

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

8.web字体vs系统字体

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

9. 位图vs矢量图

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


来学习吧,每天进步一点点!

整点有用的!做好扁平化设计的5个实战技巧
超实用!如何打造一个非凡且有趣的响应式设计
经验分享!响应式文字排版中的关键点
网页设计热潮!扁平和简约疯狂来袭
文字设计技巧!如何让文字排版更具易读性

本文系作者 MegLen 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2015-10-08从Material Design文档中总结出的设计感悟
  • 2016-04-28jQuery++扩展jQuery库功能的开源插件
  • 2016-05-16好文必须推荐!如何搞定界面设计之构图篇
  • 2016-05-283种方法实现网页自动刷新重新加载
  • 2016-06-03细数递归与循环的优缺点
  • 2016-06-24Gridpak响应式轻量级Web开发框架
  • 2016-07-05angularAMD使用RequireJS和AngularJS快速构建WebApp
  • 2016-07-06SVN
  • 发布评论

    为您推荐

    问说网 · 发布于 2016-04-16

    jQuery.PercentageLoader加载进度显示插件

    jQuery.PercentageLoader 这个jQuery插件能够产生一种吸引人、更直观醒目的方式显示进度。它采用HTML 5 canvas 生成进度图片…

    问说网 · 发布于 2016-07-05

    刷流量的注意了使用流量宝可能会中毒!

    相信大家都知道刷流量的有很多软件,最著名的就是流量精灵和流量宝,而我一直使用的流量宝,两个软件的使用基本差不多,可是你知道吗?使用流量刷流量可能会中毒,这不是危…

    Vincent · 发布于 2016-07-06

    Java Web的安全验证机制

    部署描述符中的security-constraint元素允许不通过编程就可以限制对某个资源的访问。

    问说网 · 发布于 2016-07-12

    phpStudy让天下没有难配的PHP环境

    该程序包集成最新的Apache+PHP+MySQL+phpMyAdmin+Zend Loader,一次性安装,无须配置即可使用,是非常方便、好用的PHP调试环境…

    Mac的VIM中delete键失效的原因和解决方案
    问说网 · 发布于 2016-08-16

    Mac的VIM中delete键失效的原因和解决方案

    在Mac的键盘上实际是没有backspace这个键的。其实Mac的delete就是Windows的backspace,实现的都是向左删除的功能。Mac上如果要实…

    问说网 · 发布于 2016-08-08

    为什么数组标号是从0开始的

    我们知道大部分编程语言中的数组都是从0开始编号的,即array[0]是数组的第一个元素。这个和我们平时生活中从1开始编号的习惯相比显得很反人类。

    问说网 · 发布于 2016-07-26

    MySQL中timeout相关参数解析和测试

    简单的说 interactive就是交互式的终端,例如在shell里面直接执行mysql,出现形如mysql>的提示符后就是交互式的连接。而mysql -e '…

    问说网 · 发布于 2016-08-01

    Snoopy功能强大的模拟浏览器方法的PHP类

    Snoopy 是一个非常强大的PHP类,可以利用该类模拟浏览器来完成获取网页内容和发送表单的任务。由于本身是PHP一个类,无需扩支持,服务器不支持curl时候的…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    MegLen

    心里酸酸的有些说不出的苦好像每次犯苦犯伤的都是我亲爱的你可知我有多么思念你多想飞到你的身边我不能没有你片刻也不行哪怕只能听到你的声音想像个孩子一样的拥着你你就会守护我不带杂质断断续续纷纷扰扰凄凄惨惨不离不弃若与你相依

    102 文章
    0 评论
    人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 3658

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 3415

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 3687

    图片素材

    关注 图片素材

    文章 29463 · 浏览 2922

    高清图片

    关注 高清图片

    文章 26530 · 浏览 3160

    更多 推荐作者

    关注 秋末残雪

    文章 106 · 评论 0

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    关注 无感觉

    文章 91 · 评论 0

    关注 空城

    文章 107 · 评论 0

    关注 讓風帶走愛

    文章 116 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!