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

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

时间:2015-04-01   文章来源:马海祥博客   访问次数:

近10年来,互联网已经发生了翻天覆地的变化,然而它的网页设计的排版其实一点也没变,如果看看10年前,我们会发现大批网站都有一套通行的排版模式,页头、页脚、侧边栏和内容区域,构成了这种直截了当的布局,这是人们预期中的网页排版。

同时期Macromedia Flash的兴起,引领其他排版方式进入了一个新的时代,布局不必再拘泥于固定格式,当然,随着FLASH的衰退,这种方式也稍稍淡出……,我说稍稍,是因为它如今又卷土重来了。

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

响应式网页设计的排版设计趋势-马海祥博客

综上所述,我们能观察发现几种重大的排版设计趋势,能够代表我所理解的非常规布局,说它们非常规,是因为它们并不严格遵循某种准则或既定体系,但这种趋势的例子,即使没有几百,我也能找出几十个,归入这几类中。

在此,我就借助马海祥博客的平台跟大家分析一下响应式网页设计的排版设计趋势,希望它能给你带来启发,帮助你构思网页设计的基本结构。

1、分割屏幕

在这类中,我们精选的网站都用了垂直分隔线来分割屏幕,可能这么做有很多原因,通过研究大量此类案例,马海祥发现主要有两点。

(1)、有时候在一套设计中,的确存在两个同等重要的主体元素

响应式网页设计的排版设计趋势-马海祥博客

网页设计的通常方法,是按照重要性给内容排序,然后重要性会体现在设计的层次和结构上,但是假如你就是要推广两样东西呢?这种方式,可以让你突出两者,并让用户迅速在其中做出选择。

(2)、有时你要表现出一种重要的两重性

响应式网页设计的排版设计趋势-马海祥博客

以Eight and Four网站为例,他们在此要表达的是,他们的核心竞争力来自植根数字领域,还有多才多艺的员工,这两点成就了他们,通过屏幕分割来表现这一点,是种令人愉快的方式。

2、去界面化

网页设计中的主要元素之一,就是容器元素:方块、边框、形状和所有类型的容器(具体可查看马海祥博客《响应式网页设计的基本原则布局》的相关介绍),用于将内容从页面中分离开,想象一个古板的页头,元素刚好容纳其中,与内容分隔开,如今的一项普遍趋势,就是去除所有这些额外的界面元素。

这是种极简主义的方式,但它更进一步,带来一些有趣的转变。

响应式网页设计的排版设计趋势-马海祥博客

在这个例子中,他们把页头和页尾的概念统统去掉了,反而更像一个交互式杂货摊,从左向右的排列,就基本完成了内容层次的排布,有助于让排版更加直观,用于分隔导航和内容的界面就不需要了,取而代之的是漂亮的产品惊艳全场。

可以发现,移除任何感官上的页头和页尾后,内容得到了极大的强调,你会先看到公司名称,然后是关于他们经营内容(和场所)的清晰描述,而不是先看到页头,之后才是主导航,让用户浏览之前先重点强调品牌,这个方式太棒了,它造就了优美的视觉流程。

有趣的是,当你滚动页面时,页头和界面才出现,美观且有效的排版,这种模式的运用颇具启迪性。

3、基于模块或网格

接下来这些排版方式,建立在模块化或类似网格的结构上,在这些设计中,每个模块都力图根据屏幕尺寸伸缩调整,实际上这并不是什么新的方式,不过响应式网页设计让它变得更加有用,它暗示了一种自适应布局模式,可以像搭积木一样,由各种模块组件创建而成。

响应式网页设计的排版设计趋势-马海祥博客

这个案例完美地诠释了这一点,整个设计都是响应式的,随着屏幕尺寸变化,每个模块都改变尺寸来适应空间,均匀划分屏幕使得设计更易于适应,他们还(在大屏幕尺寸中)引入一些元素来打破模块界限的束缚,这是画龙点睛之笔(具体可查看马海祥博客《基于视觉效果的扁平化设计》的相关介绍)。

响应式网页设计的排版设计趋势-马海祥博客

这个案例更加激进,当然,它也包含了模块化的方式,让他们能够根据需要轻松增减内容,但此处还有一个重要的设计元素在发挥作用,之前的案例是没有的,模块通过尺寸变化,来反映其重要程度和在各层级中的地位。

这类模块化的布局方式存在一种风险,它使每样东西尺寸都相同,这意味着无法强调任何事物,相反,这个案例还是清晰地突出了主要元素。

4、一屏以内

最后,还有一些网站采用这样的方式,让设计完全在一屏内展现,这是响应式设计的一个分支,因为它会适应屏幕尺寸。

响应式网页设计的排版设计趋势-马海祥博客

不过在这个绝佳案例中,整个设计的适应方式完完全全吻合屏幕,没有产生滚动条,没有滚动,意味着内容必须极度聚焦,而且要建立清晰的内容层次,我发现这些网站的聚焦能力和清晰程度,令人耳目一新。

马海祥博客点评:

虽然我把这几种趋势分开讲,但其实他们都表现为积木块的形式,这些积木可以通过很多不同方式组合,事实上,本文中展示的很多案例,都可以放在我们讨论过的其他几个分类中,现代网页的布局如此多样化,而且确实合乎使用,造就了如此激动人心的互联网媒体。

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

相关标签搜索: 网页设计   响应式网页   响应式设计   排版设计   设计趋势  

上一篇:响应式网页设计的现状与难点
下一篇:空白页面设计的思路

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

  • 响应式网站页面的设计需求和设计流程

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

    阅读:3888关键词: 响应式   响应式设计   网站设计   日期:2015-12-16
  • 现阶段网页设计潮流的趋势和风格

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

    阅读:1003关键词: 网页设计   网页设计潮流   网页设计趋势   网页设计风格   日期:2013-11-09
  • 响应式网页设计的排版设计趋势

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

    阅读:1110关键词: 响应式网页   响应式设计   排版设计   设计趋势   网页设计   日期:2015-04-01
  • 基于网站色彩设计对用户体验影响的研究

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

    阅读:1849关键词: 网站色彩设计   网站设计   用户体验   网站色彩   色彩影响   日期:2013-10-10
  • 如何利用“自适应网页设计”实现不同的设备上呈现同样的网页

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

    阅读:7893关键词: 自适应网页设   网页自动调整   日期:2013-02-17
  • 关于响应式页面重构的一些关键技术点

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

    阅读:644关键词: 响应式   响应式页面   日期:2016-09-25
  • 响应式网页布局的实现方法原理

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

    阅读:52191关键词: 响应式网页   响应式布局   响应式原理   响应式设计   日期:2013-09-17
  • 如何设计响应式网页中的图片和图库

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

    阅读:1161关键词: 响应式   响应式网页   图片   图库   响应式设计   网页设计   日期:2016-11-18
  • 全能型设计师必备的10个技能

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

    阅读:1049关键词: 设计师   设计技能   日期:2014-11-07
  • 响应式设计时代该如何进行网站设计

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

    阅读:699关键词: 响应式   响应式设计   网站设计   日期:2015-11-22
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

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