10款时尚Metro风格的网页设计欣赏

2016-02-16 19:14 56 1 收藏

有了下面这个10款时尚Metro风格的网页设计欣赏设计作品,不懂10款时尚Metro风格的网页设计欣赏的也能装懂了,赶紧get起来装逼一下吧!

【 tulaoshi.com - 平面设计 】

Win8系统中的Metro界面曾一度受到用户体验不佳的反馈,但这并不影响Metro在网页设计师心目中的地位。随着扁平化设计的日益兴起,Metro的利用率也因此大大的提高了,不可否认,Metro与扁平化的融合称得上恰到好处。

Metro也被亲切的称为方块元素设计,这一称呼也正体现了它最明显的特点。Metro的设计风格能凸显出网页的个性化,但在整体布局上却更加井井有条。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

AnyForWeb为大家精心挑选了10个Metro风的网页设计案例,供大家欣赏评论。

1.这个网站中的Metro风格再明显不过了,不同的方块尺寸和颜色,让整体看起来不仅没有杂乱无章的感觉,还有一种整洁的感觉。这也是Metro风的另一种精髓所在。其实在小模块的搭配中,设计师也花了很多心思,图案、照片、颜色、文字,每一处细节都需要有准备的把握,最终令网站看起来随性但不随便。

10款时尚Metro风格的网页设计欣赏,PS教程,图老师教程网

2.通常情况下,Metro风格的界面也会相应的选用五彩缤纷的色彩,甚至使用撞色效果也不为过,而下面这个案例是比较少有的单一色系Metro网页设计。全局使用了黑色作为主色调,不由的渲染出一种诡异惊悚的氛围。

10款时尚Metro风格的网页设计欣赏,PS教程,图老师教程网

3.Very make up school是一个源自于日本的化妆学校,网站上半部分采用了粉嫩马卡龙色系的Metro风格设计。根据不同系列的妆容案例搭配相应的色彩,让网站洋溢着青春活力的气息。

10款时尚Metro风格的网页设计欣赏,PS教程,图老师教程网

4.John Jacob Designs是一个比较特别的Metro风格网站,在一个页面中呈现了两种截然不同的Metro界面。按钮模块利用了单一低调的黑色来衬托网页要体现的主要内容,让两个Metro部分显得毫不冲突。

10款时尚Metro风格的网页设计欣赏,PS教程,图老师教程网

5.这个案例从严格意义上来说,其实并不属于Metro的范畴之中,只能说是由Metro的元素构成的网页。但如果要评定Metro中的用户体验,这个网站就值得一提了。每个导航和按钮都很清楚,让用户能够及时的找到自己所需要的分类。清新的颜色和扁平化手绘风格的图示也都很符合浏览的视觉习惯。

10款时尚Metro风格的网页设计欣赏,PS教程,图老师教程网

6.Blocklevel的网站采用了单页式的设计手法,特别之处是网站全局都使用了Metro的风格设计。普通情况下,Metro的使用只是局限于一个网页或是一个小范围,这个网站很大胆的将Metro设计充满了整个网页,看起来别有一番风味。

10款时尚Metro风格的网页设计欣赏,PS教程,图老师教程网

7.PROTEST的网站对于Metro的使用,采取了较为保守的方法。图片和色块属同一个色系,纯色块与照片之间形成了融洽的合作。在矩阵的数量上也基本达到了简洁主义的要求,让浏览者的视觉重点都落在了图片上。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

10款时尚Metro风格的网页设计欣赏,PS教程,图老师教程网

8.Think Basic是个充满创意的日本女装网站。商家提炼出不同的单品,把上装和下装用Metro的风格设计合并在一起,达到既合理搭配又mix的效果,真正实现商品宣传和美化网站两不误。

10款时尚Metro风格的网页设计欣赏,PS教程,图老师教程网

9.下面这个案例充满了现代感,每一个矩阵中的图像看似各有各的位置,其实这之间有着密切的关联。每一张图片之间的连贯性成就了一段小故事,至于情节内容就要靠你自己来发挥想象了。

10款时尚Metro风格的网页设计欣赏,PS教程,图老师教程网

10.有色彩的部分被集中在页面中部,其余的范围都用了黑白的Metro风格,意义在于突出彩色的重点部分,但如果其他的地方留白优惠显得很空洞,因此,这样的设计在Metro中也具有一定的创新意义。

10款时尚Metro风格的网页设计欣赏,PS教程,图老师教程网

因为有清晰明了的布局,矩阵中的内容才能任你尽情发挥。从色彩到效果,甚至模块之间的间隔大小,The choice is yours!

来源:http://www.tulaoshi.com/n/20160216/1571893.html

延伸阅读
如果在网页上合理地使用大片的绿色,不仅能营造出清爽,自然的界面,还能让访问者感到轻松自在,增加网站的亲切感。事实上绿色有很多的色调,这形成了一个非常灵活的色彩,它可以在色盘的黄绿色端显得很温暖,又可以在蓝绿和碧绿方向显得有些冷。一个柠檬绿可以让一个设计很潮,橄榄绿则更显平和,而淡绿色可以给人一种清爽的春天的感觉。 用...
网页首屏是一个网页中最出彩的地方,这600px的区域会直接决定用户是否在你的网站继续待下去,抓人眼球的首屏可以瞬间捕获每一位浏览者的心。 那么首屏要怎么设计呢?别着急,来看看这些优秀的网页设计范例。同时要留心思考,为什么他们的设计好?是巧妙的元素借用?还是留白?或者与整体完美搭配,希望大家在看此类赏析集的时候,一定要深入思考,...
一个企业网站想要在众多竞争对手中脱颖而出,最好的方式就是在设计界面上表现,比如从布局排版、配色方案上着手。今天主要分享25个迷人的暗调风格网页设计作品,喜欢深色、黑色风格的同学,可以看看这组网页设计,从中获取一些设计灵感,特别是文字排版和配色方案,这些都可以借鉴哦。 DUNCKELFELD Electrik Company Q Ideas LOUI...
我有特别的网页对比技巧,如果你想突出网页上的某个内容,最简单有效的方法就是让暗色包裹整个界面,然后利用从优设学来的配色技巧,让你的重点变得一眼可见,光说不练假把式,今天我们精选了20个巧妙利用亮色突出内容的黑色背景网站,保证让你点赞。 Q Ideas LOUIS XIV Energy Bay Street Biergarten Visage FLIPP Circl...
这里有15个单页网页设计的例子。这两个概念可以算作今天最热的网页设计的趋势,这不是令人惊讶的看到设计师结合两个概念。通过这些例子,我必须说这是一个很好的方式来显示一个网站。最令人惊讶的事情是网站,他们来自设计师和机构以及保险等传统企业。这显示了强大的概念正在举行甚至传统公司使用他们的网站。 尽情享受! #1: Moving Things De...

经验教程

221

收藏

48
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部