2015年至关重要的四种排版趋势

   近十年来,互联网已经发生了翻天覆地的变化,然而它其实一点也没变。如果看看10年前,我们会发现大批网站都有一套通行的排版模式。页头、页脚、侧边栏和内容区域,构成了这种直截了当的布局。这是人们预期中的网页排版。同时期Macromedia Flash的兴起,引领其他排版方式进入了一个新的时代。布局不必再拘泥于固定格式。当然,随着FLASH的衰退,这种方式也稍稍淡出……我说稍稍,是因为它如今又卷土重来了。

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

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

  本文中,你会看到有趣的非常规排版趋势大杂烩,希望它能给你带来启发,帮助你构思网页设计的基本结构。我们这就深入了解一下……

  分割屏幕

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

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

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

  Eightandfour


  Carelpiethein


  Deweyspizza


  Fian.my.id


  Pomopizzeria


  去界面化!

  网页设计中的主要元素之一,就是容器元素:方块、边框、形状和所有类型的容器,用于将内容从页面中分离开。想象一个古板的页头,元素刚好容纳其中,与内容分隔开。如今的一项普遍趋势,就是去除所有这些额外的界面元素。

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

  Br-time


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

  Foreword


  可以发现,移除任何感官上的页头和页尾后,内容得到了极大的强调。你会先看到公司名称,然后是关于他们经营内容(和场所)的清晰描述,而不是先看到页头。之后才是主导航。让用户浏览之前先重点强调品牌,这个方式太棒了!它造就了优美的视觉流程。有趣的是,当你滚动页面时,页头和界面才出现。美观且有效的排版,这种模式的运用颇具启迪性。

  Harvardartmuseums


  Voiceshavepower


  Drurybuildings


  基于模块或网格

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

  Teambadcompanyrowing


  这个案例完美地诠释了这一点。整个设计都是响应式的。随着屏幕尺寸变化,每个模块都改变尺寸来适应空间。均匀划分屏幕使得设计更易于适应。他们还(在大屏幕尺寸中)引入一些元素来打破模块界限的束缚,这是画龙点睛之笔。

  Madagascar.dreamworks


  这个案例更加激进。当然,它也包含了模块化的方式,让他们能够根据需要轻松增减内容。但此处还有一个重要的设计元素在发挥作用,之前的案例是没有的。模块通过尺寸变化,来反映其重要程度和在各层级中的地位。这类模块化的布局方式存在一种风险,它使每样东西尺寸都相同,这意味着无法强调任何事物。相反,这个案例还是清晰地突出了主要元素。

  Plfixtures


  Guide.residence-mixte


  Tevko


  一屏以内

  最后,还有一些网站采用这样的方式,让设计完全在一屏内展现。这是响应式设计的一个分支,因为它会适应屏幕尺寸。不过在这个绝佳案例中,整个设计的适应方式完完全全吻合屏幕,没有产生滚动条。没有滚动,意味着内容必须极度聚焦,而且要建立清晰的内容层次。我发现这些网站的聚焦能力和清晰程度,令人耳目一新。

  Hatchcollective


  Shamballajewels


  Erikfischer


  Twinpics


  Nikolaylechev


  结论

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

时间: 2024-10-26 01:55:20

2015年至关重要的四种排版趋势的相关文章

黑客攻击方式的四种最新趋势_安全相关

   从1988年开始,位于美国卡内基梅隆大学的CERT CC(计算机紧急响应小组协调中心)就开始调查入侵者的活动.CERT CC给出一些关于最新入侵者攻击方式的趋势.  趋势一:攻击过程的自动化与攻击工具的快速更新  攻击工具的自动化程度继续不断增强.自动化攻击涉及到的四个阶段都发生了变化.  1.扫描潜在的受害者.从1997年起开始出现大量的扫描活动.目前,新的扫描工具利用更先进的扫描技术,变得更加有威力,并且提高了速度.  2.入侵具有漏洞的系统.以前,对具有漏洞的系统的攻击是发生在大范围

黑客入侵攻击方式的 四种最新趋势_网络冲浪

从1988年开始,位于美国卡内基梅隆大学的CERT CC(计算机紧急响应小组协调中心)就开始调查入侵者的活动.CERT CC给出一些关于最新入侵者攻击方式的趋势. 趋势一:攻击过程的自动化与攻击工具的快速更新 攻击工具的自动化程度继续不断增强.自动化攻击涉及到的四个阶段都发生了变化. 1. 扫描潜在的受害者.从1997年起开始出现大量的扫描活动.目前,新的扫描工具利用更先进的扫描技术,变得更加有威力,并且提高了速度. 2. 入侵具有漏洞的系统.以前,对具有漏洞的系统的攻击是发生在大范围的扫描之后

四种定制类型

四种定制类型 王大勇将定制电影分为四种类型. 第一种是企业文化传播, 公司2008年出品的电影 <志愿者> 就是典型代表. 安利公司希望借电影 <志愿者> 塑造公司积极参与志愿活动的公益形象, 以提升公众对公司的好感度, 扭转直销企业的负面形象. 作品所涉题材本身不够市场化, 一般很少有影视公司会开发这类项目, 即便有公司涉及, 也未必能完全满足安利在产品. 志愿者理念. 作品的思想性等方面的特殊要求, 因此只有定制形式的电影才能满足企业特殊的宣传需求. 第二种定制电影则专为企业产

计算广告的四种形式:谁在弄潮?

在互联网人探索计算道路的时候,意外发现了数据的价值,并将之发扬光大. 前言:你以为你在买东西时,是真的喜欢这个品牌吗?恐怕更多的原因,是你在互联网上见这个品牌见得更多而已.这也提醒我们互联网人,在追求技术卓越的同时,也要主动思考背后资本的力量,因为很多时候技术是由业务驱动的,而非技术本身. 本期文章是我们为读者带来的[计算广告小窥]专题的第一部分.大数据文摘会在接下来的两天中,为大家分享第二部分和第三部分的文章内容,供有兴趣的读者感受.学习. 全文目录如下: 广告=>互联网广告:"您好,了

英特尔推动技术创新 普适计算驱动四种技术

5月26日,由ZDNet至顶网主办.英特尔协办.VMware和戴尔支持的行业信息化意见领袖峰会在京举行.本届峰会围绕着"云时代,构建服务性政府"的主题展开讨论.来自英特尔和VMware的专家分享了其各自在政务信息化中的实践案例,着重讨论了云计算时代,用户信息化的新趋势以及云计算如何助力构建服务型政府.在本届峰会上,27位电子政务和政府信息化项目采购.规划应用者,针对目前其各自所在领域的业务发展情况提出了新的IT需求.对于云计算的发展,各位专家都表示了一致肯定,同时也对云计算厂商提出了诸

CSS特点及加入网页的四种方法

css|网页 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一.使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,大大减少了重复劳动的工作量.尤其是当你面对的是有数百个网页的站点时,CSS简直象是神对我们的恩赐! 前言 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具

初学网页制作:CSS特点及加入网页的四种方法

css|初学|网页 今天给初学者介绍一下CSS特点及如何在网页中使用已经设置的CSS.希望大家支持网页教学网,网站有什么问题及时与我联系! CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一.使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,大大减少了重复劳动的工作量.尤其是当你面对的是有数百个网页的站点时,CSS简直象是神对我们的恩赐! 前言 CSS(Cascad

网站推广四种外链形式分析

作为一个SEO-er是不得不接触到外链建设这一重要环节,同时外链建设对于网站整体的优化也是必不可少的,拥有一个好的链接策略是快速提高网站曝光度和转化率的最佳途径.当然谈到外链的建设,我们不得不想起网站推广四种外链形式. 一.纯文本链接形式 纯文本链接,用户不能通过直接点击的方式进入到URL地址所指向的页面,即http://www.****.org/这类形式.当然这类的形式是不很利于用户体验的,同等情况下,相比而言链接价值并不是很高. 但无可厚非的是,搜索引擎同样会通过蜘蛛的爬行和抓取来跟踪纯文本

热门不可怕:细谈热门关键词的四种优势

在做SEO的过程中,看到很多朋友越来越倾向长尾关键词,越来越意识到了长尾关键词的力量,我本人也是如此,但是这并不代表做站需要丢弃热门关键词.热门关键词作为流量的主要入口,依旧有非常重要的意义.今天和大家谈谈我的体会,细谈热门关键词的四种优势. 热门关键词总体的特点是检索量高.优化难度大.转化率低并需较多资源.所以摆在个人站长面前,热门关键词显得有些棘手.很多索性放弃热门词,主攻长尾和利基市场.但从另外一个方面来说,这些看似是劣势的特点也正是它们的优势所在.本文就从几个方面一一细谈,如有不对,请多