手机APP会员 登录|注册
当前位置:首页 > 新闻资讯

2015最流行的网页布局设计趋势

文章来源:天空云软件商城   点击次数:3635   时间: 2015-02-08 18:02:46
 

【PConline 设计】在过去的十年中,我们所看到的网页产生了巨大的变化,但同时有些“传统”的设计方式仍然在使用着。如果回看这十年,我们会发现大部分的网页都遵循着一种非常常见的布局模式。这种布局模式主要包括页眉、页脚、边栏和正文,这种模式是大部分网友预期中的网页排版。与此同时,Macromedia Flash的广泛应用,正加速着网页设计技术的新旧替换。当然,技术总是不断被更新,Flash的闪现目前略有减退,但仍有卷土重来的可能。

  如果浏览最受欢迎网站排行榜上的网页,你会发现网页排版布局可谓千变万化,完全没有一个固定标准。网页能使出七十二变,变成我们需要的样子。在笔者看来,这就是响应式网页设计产生的最佳影响结果。这些新规则似乎完全没有固定的模式可以遵循。

  现在,大家会看到网页设计中存在一些高水平的排版布局趋势,当然这些都属于不同寻常的布局。这些排版布局看上去似乎毫无规则,完全没有遵循固定的框架或我们预想中的架设,但当我们看过成千上百个网页设计后,还是可以从中总结归纳出一些网页设计排版布局的趋势走向。

  在本期国外精品翻译教程中,我们就将跟大家分享2015年最流行的网页布局设计趋势。这些网页布局设计趋势相当别致有趣,甚至能激发浏览者对网页设计的新灵感。一起来看看吧:

  一、页面分割设计

  在这组设计中,我们找到一系列采用垂直分割页面来设计的网页。这样设计的原因有很多,而据笔者观察,很多网页这样设计的原因主要有两个。第一,在设计中存在两个同等重要的元素。网页设计的常用方法是元素的重要性进行优先级排序。这种重要性体现在网页的层次和结构设计中。但当有两样元素需要处理的时候,页面分割设计可以让用户马上注意到它们,然后在它们之间做出选择。

  第二,笔者发现有时候需要表达的两个元素是同等重要。就如下面的例子,他们想表达他们的核心竞争力是数字化办公和充满潜力的优秀员工,这就给用户定义出公司的竞争力。页面分割设计就是用这种可爱的方式去呈现,而利用“&”结合两种元素更显得有爱。

  Eightandfour

2015年抢鲜学习!4种网页布局设计趋势
图01

  Carelpiethein

2015年抢鲜学习!4种网页布局设计趋势
图02

  Deweyspizza

2015年抢鲜学习!4种网页布局设计趋势
图03

  Fian.my.id

2015年抢鲜学习!4种网页布局设计趋势
图04

  Pomopizzeria

2015年抢鲜学习!4种网页布局设计趋势
图05

 

 二、无边界设计

  网页设计中,框架、边界、方块和所有类型的容器都用于分割页面内容。就如典型的头条设计,设计元素被巧妙地包含在内,且与内容分开。现在,常见的趋势是将这些额外窗口都去除掉。

  这是一种极简主义的设计方法,并且随着发展带来有趣的变化。

  Br-time

2015年抢鲜学习!4种网页布局设计趋势
图06

  如例子所示,网页中已经不存在页眉和页脚的概念。相反,页面看上去感觉更加像一个交互式展摊。页面内容层次由左到右地依次组织,这样使得页面布局更加直观。这样的设计几乎不需将内容分离从导航中。相反,更能显示出产品的美感。

  Foreword

2015年抢鲜学习!4种网页布局设计趋势
图07

  页眉页脚去掉后,我们会发现页面的主体内容显得额外显眼。相比平常先看到页头,你会先留意到公司名称和有关公司业务和办公地点等信息,然后才是主导航。这样会令用户在留意导航内容之前,首先注意到公司品牌,这对于公司网站是非常重要的,同时提供非常舒服的浏览体验。并且有趣的是,当你滚动页面时,页头和相关界面才会随之出现。应用这种漂亮有效的页面布局,可以很快会引起用户的兴趣。

  Harvardartmuseums

2015年抢鲜学习!4种网页布局设计趋势
图08

  Voiceshavepower

2015年抢鲜学习!4种网页布局设计趋势
图09

  Drurybuildings

2015年抢鲜学习!4种网页布局设计趋势
图10
 

 三、模块化设计

  下面,我们看看模块化或网格结构的布局设计。这是为了适应屏幕的大小而伸缩的模块化设计。其实这种设计方法并不新颖,但响应式网页设计让这种设计方法变得非常有用。这意味着,适应式布局设计可以像积木一样由插件等组建起来。

  Teambadcompanyrowing

2015年抢鲜学习!4种网页布局设计趋势
图11

  这个例子完全展现了适应式网页设计。网页完全采用响应式设计。随着屏幕大小的变化,每个模块都跟随空间而调整适应。通过将空间均匀划分,模块设计的调整就变得更加容易。并且,在大屏幕中引入其他元素来打破模块之间的僵化联系,这样的做法也是非常值得称道的。

  Madagascar.dreamworks

2015年抢鲜学习!4种网页布局设计趋势
图12

  这个例子可以说是非常具有代表性的。网页中采用模块化设计,可根据需要简易地变换内容。但网页存在上面例子中没有的重要设计元素:在层次结构中,通过模块的大小来反映它的优先级和位置。模块化设计容易带来元素均等化的问题,这意味着你没有在强调任何东西,用户也找不到网页的重点。因此,这个例子就为强调重点或主题带来了解决方案。

  Plfixtures

2015年抢鲜学习!4种网页布局设计趋势
图13

  Guide.residence-mixte

2015年抢鲜学习!4种网页布局设计趋势
图14

  Tevko

2015年抢鲜学习!4种网页布局设计趋势
图15

四、全屏式设计

  最后,我们来看看全屏式设计,网页填满整个屏幕。随屏幕变化自动适应是响应式网页设计的方法之一。在这种设计方法下,网页将会填充满整个屏幕,而不会存在滚动条。没有滚动条,意味着内容要非常集中,而且内容结构要清晰。你会发现这些网站的聚焦和清晰程度令人感到清爽。

  Hatchcollective

2015年抢鲜学习!4种网页布局设计趋势
图16

  Shamballajewels

2015年抢鲜学习!4种网页布局设计趋势
图17

  Erikfischer

2015年抢鲜学习!4种网页布局设计趋势
图18

  Twinpics

2015年抢鲜学习!4种网页布局设计趋势
图19

  Nikolaylechev

2015年抢鲜学习!4种网页布局设计趋势
图20

  小结

  本文中虽然将2015年最流行的几种网页布局设计趋势各自进行了解说,但事实上现在很少会有网页只采用其中一种单一的排版布局方式,更多采用的还是几者的排列组合。实际上,本文中展示的许多案例,也都体现了这一点。如今网页设计排版布局方式多样,只要应用恰当,就能带给人惊喜。有兴趣的网友不妨一试。

  原文地址:4 ESSENTIAL LAYOUT TRENDS FOR 2015

分享到:

 

你可能感兴趣的软件:

查看详情
miniSIPSer...
¥6500.00