详细解析杂志化的网页设计趋势

2016-02-17 00:30 9 1 收藏

图老师小编精心整理的详细解析杂志化的网页设计趋势希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

【 tulaoshi.com - 平面设计 】

继微软推出win8操作系统后,扁平化和拟物化的讨论就没有停止过。2013年6月11日,WWDC 2013 发布会苹果推出iOS7,颠覆性的界面设计,使扁平化和拟物化再次被推到风口浪尖上。

这篇文章我并不想讨论拟物和扁平哪个好?它们都可能好,也都可能不好。

先来看看几组变化:

详细解析杂志化的网页设计趋势,PS教程,图老师教程网

详细解析杂志化的网页设计趋势,PS教程,图老师教程网

详细解析杂志化的网页设计趋势,PS教程,图老师教程网

详细解析杂志化的网页设计趋势,PS教程,图老师教程网

过去的很长一段时间内,界面设计的风格都处在循序渐进的改变,扁平化的设计却是在短短十几个月的时间内迅速流行起来。从本质上看,这不仅仅是一种视觉风格的改变,而是一种设计语言和思维方式的演化。

就像上个世纪在建筑领域极简主义运动对过度装修的冲击,扁平化设计可能是一个对已经被使用多年的过度设计、或者过于花哨的网站和界面的一个颠覆。

详细解析杂志化的网页设计趋势,PS教程,图老师教程网

扁平化设计意味着在界面与图标中材质、阴影、立体感的消失等等。实际上对于界面设计来说,正如人们对于视觉感官的新鲜需求和疲劳度是与生俱来的。

让界面更加干净,易用,轻薄。而不是在用户沉浸于页面阅读时,对用户产生干扰。把复杂的页面梳理的非常易用。

扁平化 = 杂志化?

先来看看两个页面:

详细解析杂志化的网页设计趋势,PS教程,图老师教程网

(图1) 微软首页

详细解析杂志化的网页设计趋势,PS教程,图老师教程网

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

(图2) 《TIME》

时代周刊是美国影响最大的新闻周刊,有世界史库之称。

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

(图1)是微软的首页,明显的扁平化设计。

(图2)是TIME的网站,确然也呈现扁平化的设计风格,但是却和微软的首页风格不一样。

网页杂志化设计,是扁平化更具体的一种体现,并不是去掉渐变,阴影等繁复的修饰,就可以说是杂志化的网页设计。

一、 字体&排版 :排布打破常规

杂志化设计,建立在整齐而美观的文字排版基础之上,文字排版为内容创建结构和节奏感。用不同的字体,和字体的大小、颜色,进行设计。

平面杂志的官网设计风格都会和杂志的设计风格靠拢,并且比起其他资讯类网站风格更鲜明,有着自己杂志的元素融入在网页设计中。

详细解析杂志化的网页设计趋势,PS教程,图老师教程网

(图3)《ELLE》

著名法国时装品牌ELLE,以时尚导向,是女性化的、现代的、积极向上、亲切的、潮流而又充满生活气息。

二、布局:视觉的引导

扁平化用清晰的图形元素创建最简洁的视觉效果,去掉多余的线和框,仅用内容本身来布局内容,为内容留出呼吸空间。

杂志化的页面,不同的区域,善于用线分割页面,实线,虚线,粗线,细线,不同明度的线,分割巧妙。

详细解析杂志化的网页设计趋势,PS教程,图老师教程网

(图4)《VANITYFAIR》(名利场)

美国著名时尚杂志。报道内容多为明星私生活,同时其新闻、评论、随笔等内容也具有一定深度。

三、功能按钮 :沉浸于内容中

按钮,翻页,滚动条等功能操作沉浸于整体内容之中,不突兀。

详细解析杂志化的网页设计趋势,PS教程,图老师教程网

(图5) 功能按钮沉浸于整体设计中

四、留白的艺术:负空间的设计魅力

留白设计中负空间的重要性与魅力。利用界面空间的留白来增强内容。

留白空间是界面的重要组成部分,留白是内容的一部分,以及内容意境的一种伸展,优秀的留白空间设计,使内容变得更加美好,富有憧憬。

详细解析杂志化的网页设计趋势,PS教程,图老师教程网

(图6)《纽约客》(The New Yorker)

是一份美国知识、文艺类的综合杂志。

无论写实的拟物设计或写意的扁平化设计,如何围绕需求,让人们沉浸在他们喜欢的内容中。

作 为产品人与设计师,要关心的不仅仅是风格与形式,而是更加美好的体验。用户并非仅仅只是用户,他们是心怀希望,梦想美好体验的人。你所打造的产品 是为了帮助人们去实现他们各自的梦想。你该如何看待用户,帮助他们激发自己内在的天赋与价值,你将赢得他们的心。这不就是我们所追求的么。

来源:http://www.tulaoshi.com/n/20160217/1576849.html

延伸阅读
自从Windows8的Metro风格出来后,扁平式的设计风开始成为网页设计和UI设计的年度流行设计趋势,但现在我们不称它为Metro风格了,国外设计师都说是Flat Design(即扁平化设计),或者你很讨厌Metro风格,但你不定讨厌Flat Design,它的设计很有特色,那么什么是扁平化设计呢?国外设计师Carrie Cousins在网站上介绍了扁平化的五个特点,下面看看扁...
App Store和Google Play里的app多如牛毛。很难说未来的趋势是什么,不过显然我们可以轻易选出当下的5种趋势并加以分析。今天十萬個為什麽同学简单归纳了当下的5种移动APP设计趋势,来涨姿势吧。 看看时下的app中的颜色、创意和简单朴素,我们能从中学到一些设计移动app的技巧。 App中的色彩 公认的,色彩始终是设计的一部分。不过,近来很多...
一年一度的LOGO设计趋势报告近日正式在logolounge发布,回顾去年的LOGO设计趋势,我们可以看出,随着手机等移动智能设备的迅速发展,LOGO的设计趋势以扁平化的方向发展。今年的LOGO设计趋势报告作者将从社会、技术以及环境三个因素进行考虑,并分析它将如何何影响我们行业的未来。皮尤研究中心(Pew Research Center)在最近发布的一份报告显示,...
近日Logo Lounge发布了2014年Logo设计趋势报告,列举了15种可能成为热门的LOGO设计风格,童鞋们可以来看一下,有木有哪些启发到你的灵感呢? MONO CREST 利用单一的线条以及采用单色,比如黑色或白色排版出来像插图一样的标志。 LETTER STACKS 英文字体不必用小写,改用大写字体设计,像有点堆积木的结构感觉,这样的视觉效果也许不错。 ...
一篇开拓网页设计思路的文章,虽然有些年代了,但是其中分享的构图技巧到现在依然是非常受用的,如果你能领悟个中精髓,融会贯通。那么今后你设计出来的网站,一定会从格局形势上让客户眼前一亮。 网页给人最直观的感受就是它的页面框架与构造,就像一座大楼的主体框架与形态,你可能记不起东方明珠塔和艾菲尔铁塔是用什么颜色或什么材料涂的...

经验教程

491

收藏

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