马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > 网站制作 > 网站设计 > 响应式网页设计的基本原则布局

响应式网页设计的基本原则布局

时间:2014-12-11   文章来源:马海祥博客   访问次数:

目前来看,响应式网页设计对于解决多类型屏幕问题来说是个不错方案,但从实际制作的角度来看,其却存在着很多的困难,没有固定的页面尺寸、没有毫米或英寸,没有任何物理限制,让人感到无从下手。

响应式网页设计的基本原则布局-马海祥博客

随着建立网站可用的各种小工具越来越多,像素设计局限于桌面和移动端也已经成为历史,因此,现在就让我们来说明一下如何运用响应式网页设计的各项基本原则来实现,而不是抗拒流畅的网页体验,为了简单起见,我们将着重讲布局。

1、响应式设计VS自适应网页设计

响应式网页设计的基本原则布局-马海祥博客

对于响应式设计和自适应网页设计看似相同实则不然,这两种设计方式彼此相辅相成,所以,说也没有对错之分,具体情况要依内容而定(不明白的博友,可查看一下马海祥博客《什么是响应式网页设计》的相关介绍)。

2、最大值和最小值

响应式网页设计的基本原则布局-马海祥博客

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

3、Web字体VS系统字体

响应式网页设计的基本原则布局-马海祥博客

想让自己的网站拥有炫酷的Futura或Didot效果吗?那就是用web字体吧,尽管web字体看起来很炫酷,但马海祥提醒你要记住,这些字体都需要用户下载,字越多,用户加载页面的时间也就越长。

另一方面,系统字体加载速度则快得多(前提是用户本机就有),但太过普通。

4、内容流

随着屏幕尺寸越来越小,内容所占的垂直空间也越来越多,也就是说,内容会向下方延伸,这就叫做内容流。

响应式网页设计的基本原则布局-马海祥博客

如果你习惯了使用像素和点进行设计,可能会觉得这个有点难掌握,不过没关系,习惯了就很好理解了。

5、位图VS矢量图

响应式网页设计的基本原则布局-马海祥博客

你的图标是否有很多细节,并且应用了很多华丽的效果?如果是,那就用位图;如果不是,考虑使用矢量图。

如果是位图,使用jpg、png或gif;矢量图则最好使用SVG或图标字体,其各有利弊,但你要时刻牢记图标尺寸——未经过优化的图片不能传到网上。

另一方面,矢量图通常比较小,不过部分比较老的浏览器可能不支持矢量图,还有,如果图标有很多曲线,那有可能会比位图还大,所以马海祥建议你要明智取舍。

6、断点

响应式网页设计的基本原则布局-马海祥博客

断点可以让页面布局在预设的点进行变形,也就是说,在台式桌面上显示3栏,在移动设备上仅显示1栏,大多数CSS属性都可以实现断点之间的变形。

断点放置的位置通常取决于内容,比如,如果一句话要换行,你可能就需要加上断点,但断点使用时需要谨慎——如果搞不清内容之间的逻辑关系,很容易弄的一团乱。

7、嵌套对象

响应式网页设计的基本原则布局-马海祥博客

还记得相对位置吗?如果一大堆要素彼此都紧密联系,那么必将难以控制。

因此,将要素放置到容器中就会让它们变得更加好理解,并且简洁明快,这种情况就需要用到像素之类的静态单位了,静态单位对于logo和按钮等不需要扩展的内容来说非常有用。

8、相对单位

响应式网页设计的基本原则布局-马海祥博客

你的设计对象可能是台式桌面,也可能是移动端屏幕或者介于两者之间的任意屏幕类型,像素密度也会彼此不同,所以我们需要使用灵活可变,并且能够适应各种情况的单位。

那么,在这种情况下,百分比等相对单位就派上用场了,使用百分比时,我们说宽度50%就是表示宽度占屏幕大小(或者叫视区,也就是指所打开浏览器窗口的大小)的一半(具体可查看马海祥博客《响应式网页布局的实现方法原理》的相关介绍)。

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

响应式网页设计的基本原则布局-马海祥博客

严格来说,项目从小屏幕入手过渡到大屏幕(移动优先),还是从大屏幕入手过渡到小屏幕(台式桌面优先)区别不大。

但是,从移动端着手可以给你带来一些额外的限制,帮助你进行决策,通常情况下大家会从两方面同时着手,所以,你还是要看哪种方式最适合你。

马海祥博客点评:

如今,Web设计和开发领域发展很快,有时我们会无法跟上设备与分辨率革新的步伐,对于多数网站来说,为每种新设备及分辨率创建其独立的版本根本就是不切实际的,结果就是,我们将会赢得使用某些设备的用户群,而失去那些使用其他设备的用户。

不过,我们可以通过另外一种方式——响应式网页设计,可以帮助我们避免这种情况的发生。

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/wzsj/967.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: 响应式网页   网页布局   响应式设计   网页设计原则  

上一篇:全能型设计师必备的10个技能
下一篇:常见的七种响应式导航设计模式的优点和缺点

您可能还会对以下这些文章感兴趣!

  • 响应式网页设计的排版设计趋势

    假如你研究一个流行的作品集网站,里面展示了当今的网页设计,毫无疑问,你会注意到网页的基本结构千变万化,根本没有固定形态,它可以伸缩变化成任何所需的东西,我认为这是响应式网页设计带来的最棒的副产品,事实上,新的准则,就是根本没有固定准则,我们能观察发现……【查看全文

    阅读:1110关键词: 响应式网页   响应式设计   排版设计   设计趋势   网页设计   日期:2015-04-01
  • 全能型设计师必备的10个技能

    为了成为一个全能的设计师,你必须学会掌握一些技能来有效的应对客户或你的老板,很多情况下,一个设计师需要有良好的审美观和许多年的经验,而将那些“经常被雇佣”的设计师和其他设计师区分开来的就是下面列出来的技能,掌握这些技能,你不仅能在团队中成为更有价值的……【查看全文

    阅读:1049关键词: 设计师   设计技能   日期:2014-11-07
  • 如何设计响应式网页中的图片和图库

    响应式网页设计已经是如今网站当之无愧的标准配置了,我们需要响应式的技术来应对日渐碎片化的屏幕尺寸,网页设计师也力图做好这件事情,而网页中的图片和图库的响应式设计,也是其中的重点难点,它们是网页中最常见,也是最直观可见的元素。打开一个漂亮精致的网站,然……【查看全文

    阅读:1161关键词: 响应式   响应式网页   图片   图库   响应式设计   网页设计   日期:2016-11-18
  • 响应式网页布局的实现方法原理

    昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计?》,我觉的响应式网页设计不仅仅是一种趋势,还更是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平板,手机)相关的设计问题。既然是设计的问题,这里就会涉及到很多……【查看全文

    阅读:52191关键词: 响应式网页   响应式布局   响应式原理   响应式设计   日期:2013-09-17
  • 如何利用“自适应网页设计”实现不同的设备上呈现同样的网页

    据百度官方最近发布的《 2013年中国网站运营发展趋势报告 》中数据表明,2012年,PC端网站增速较大,数量较2011年增加29%;PC无线化速度加快,12年PC网站无线化比例达到40%。网络的普及,也逐步的带动了PC网站的发展。而人们上网的方式也变的多样化了,其中比较值得关注……【查看全文

    阅读:7893关键词: 自适应网页设   网页自动调整   日期:2013-02-17
  • 响应式网站页面的设计需求和设计流程

    根据统计,到2015年,移动互联网的用户数量将会超过桌面用户,除了智能手机之外,使用平板电脑甚至是电视机进行上网的用户也在持续增加,在这种形势下,怎样让我们的网站尽量兼容各种类型的设备,并确保优良的用户体验,这将是越来越重要的问题,通过响应式的设计开发方……【查看全文

    阅读:3888关键词: 响应式   响应式设计   网站设计   日期:2015-12-16
  • 响应式设计时代该如何进行网站设计

    响应式网站设计可以说是一个全新、未知的领域,所以响应式网站设计者需要不一样的设计思路:要针对内容进行设计,一个成功的网站设计源自精雕细琢,但当进行响应式网站设计时候,我们会发现针对普通网站设计的经典方法已无法适用了,我们进行的Web设计均是针对默认的屏幕大小……【查看全文

    阅读:699关键词: 响应式   响应式设计   网站设计   日期:2015-11-22
  • 关于响应式页面重构的一些关键技术点

    单纯的页面重构,所涉及到的工作内容一般是“分析设计稿>切图>写HTML和CSS”,虽然看起来很少,但要做好这份工作,绝非所想的那么容易。原因很简单:工作内容单一,在时间和工作量上必会很苛刻,往往跟设计师的工作时间是3:1,即设计师给三天的时间,制作只给一天的时间……【查看全文

    阅读:644关键词: 响应式   响应式页面   日期:2016-09-25
  • 基于网站色彩设计对用户体验影响的研究

    色彩,对于人类而言,始终属于自然界最神奇的奥妙之一,永远都在激发着我们的好奇心和创造力。在我们生活中无论何时何地,充满着各种多采多姿的色彩,哪里有光,哪里就有颜色。有时我们会认为颜色是独立的:天空是蓝色的、植物是绿色的、而花朵是红色的。但事实上,其实……【查看全文

    阅读:1849关键词: 网站色彩设计   网站设计   用户体验   网站色彩   色彩影响   日期:2013-10-10
  • 现阶段网页设计潮流的趋势和风格

    一个优秀的网站设计师设计出来的网页要能充分吸引访问者的注意力,让访问者产生视觉上的愉悦感。因此在网页创作的时候就必须将网站的整体设计与网页设计的相关原理紧密结合起来。如今随着互联网技术的不断革新,也带动了设计行业的的迅猛发展,这使得设计师和开发者有了……【查看全文

    阅读:1003关键词: 网页设计   网页设计潮流   网页设计趋势   网页设计风格   日期:2013-11-09
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

一个完整的企业网站首页应该具备什么因素? 如何利用极客精神优化网站的网络组件和代码