标签:网页设计趋势

2014年网页设计趋势预测

01. 先进的杂志式布局

来看看2014年网页设计趋势预测

>纽约时报的文章《蓝色圣女果》(www.nytimes.com)向我们证明了一件事情,那就是网络文章的表现形式可以千变万化,只有你想不到的,没有你做不到的。

随着HTML5的问世、CSS3和javascript的进步,网页制作将会越来越精细,并朝着“会讲故事的网页”方向继续发展。

虽然有人进步,但也有人决定将“经典”进行到底,不少出版公司拒绝面对现实,不承认现在是数字化时代,还是沿用旧有的版本。老人常说儿孙自有儿孙福,我认为公司自有公司福,如何发展就看他们的造化吧。

口说无凭,可以来来瞧瞧我们之前的案例《让阅读更时尚!25例杂志风格网页设计》

02. 更多种类的字体

在2014年,博客主们不仅仅会青睐灵活的响应式、杂志布局网页,还会发现或设计更多的字体。如今浏览器中的字体是一天比一天好看,紧凑却不失美感,我们希望2014年能在网页里看到更好的字体,同时也希望设计师能发现字体的新用处。

 

03. 纯代码打造酷炫的视觉效果

来看看2014年网页设计趋势预测

>谷歌网页设计工具,让HTML5动画更简单。选谷歌,没错的。

这一年,大家对前端的探索将继续推动网页设计的发展。 Codepen 就是一个非常好的例子,它让HTML5/CSS与javasript结合变的可能。2014我们希望它们能结合的更好,让各种性能更优越。

04. 扁平化的界面

尽管2013年扁平化界面大热,但是其中不乏一些亮瞎你钛合金狗眼的瑕疵。这些瑕疵还有待改进,不过这种设计的大方向是不会变的,我们有理由相信它会越来越好。

 

05. 视频将会大热

看过视频型主页的盆友请举起你们的双手好吗,我要奖励你们一朵大红花!随着多媒体数字信号编解码器的逐渐强大,视频越来越适应各种设备。在不远的过去,视频是非常强大的可视型说故事工具,在咫尺的将来,它还会继续发光发热!

06. 自然语言和根据环境而变化的交互界面

来看看2014年网页设计趋势预测

>在不同的设备浏览网页仅仅是个开始。

设计师逐渐变成了用户的“贴心小棉袄”,尽最大努力站在你的角度看问题。聪明的公司都知道,2014年根据环境而自动改变的应用将会占领高地。

我相信你可能已经注意到这一点了,因为现在很多网站的亮度都是根据用户所处的环境和电池电量自动改变;导航中的颜色根据白天和夜晚而改变;通过填写你的身份信息和偏好,浏览器能够提供更适合你的服务。这些都是预兆,只有用心领悟,才能灵活运用。

07. 人们的领悟能力更强

有针对性的登陆页面一直是品牌最大的转换载体。在过去,这个页面产生的原因是主页存放的信息过多 —— 数据太多,阅读太多,选择太多。

如今,一切都变得‘最小化’,以减少用户的认知负担。我们的行动更简单,认知更简单,操作更更更简单。此类应用永远占据各大排行的榜首,他们殚精竭虑的为你省力,让你只需轻轻一点,万事大吉。

这种“无摩擦的体验”也有助于提高用户的幸福感,是用来衡量品牌价值的一个关键指标。想想看:你愿意去Best Buy还是苹果商店买苹果的东西呢?我们可以肯定你会去苹果商店,为嘛呢?因为百思买销售的是苹果产品,既然有了苹果商店,我们还需要这个间接的渠道干嘛呢?需要我再解释吗?

08.视差滚动效果和触摸式体验

 Walking Dead

>不知道是否有同志浏览过《行尸走肉》的网站(www.cabletv.com/the-walking-dead),它使用视差滚动效果将人们拉进了一个血腥世界。

有人说,未来不在我们的手中,未来就是我们的手。第一次听这话的时候我愣了半天,想破脑袋终于弄清楚它是什么意思。自七十年代末,终端输入模块进入大家的视野,也决定了我们今后的发展方向。

自ipad问世,很多商家都看到了这种触摸式电脑的商机,于是越来越多的触摸式设备铺天盖地而来,逐渐改变了人们的使用习惯。

09. 内容至上

这个内容至上不是指推特上的陈词滥调,而是让用户看到他们想要的东西,然后让杂乱无章的元素以有序的形式排列,使它们能够提供更好的用户体验。

我们将看到更多以卡为基础的设计,这是一件好事。单纯的显示用户想得到的信息而没有附加内容可以说是所有用户都希望的设计。

《viralnova!成立仅8个月的个人网站如何月收入几十万美金》

10. 永生的JavaScript

来看看2014年网页设计趋势预测

>恩贝尔框架让JavaScript在当今的网页设计中无处不在

Flash曾经是互联网上大家公认的大V,它能制作出令人拍案叫绝的动画,不过光辉日子已经一去不复返了。 现在它能做的JavaScript都可以,甚至能更好。JS的功能已经渗透到前端和后端,它几乎为每一个平台或API提供了普遍可用的桥梁和库。所以我们预测JS将继续流行。

11. 快速

用户的耐心像一滴躺在马路上的水,而且还是大夏天,跐溜一下就蒸发了。所以现在的网页必须快速反应才能留住用户,如果你打算让用户等待,必须保证他们的等待是值得的。所以无论发生什么事,请不要让用户等待十分钟然后看到的是该网站的自我介绍,我相信他一定会把网站拖到黑名单的。




设计师都应该知道的,2013年网页设计最热趋势

01.响应式设计

 RWD

2013年,浏览器的建设中大量使用CSS3,这就加速了响应式设计的发展,所以“响应式设计”频频登上各大设计网站的头版,成为2013年网页设计最火热的趋势。小编掐指一算,这个趋势十有八九会延续到2014年,到时候你的顾客可能就会用专业的语气告诉你,哥要一个响应式网页!
响应式设计的原理是网页图层会根据屏幕的尺寸来重编页码,追踪设备型号以及不断增多的用户描述等。

Also read: 13 really useful responsive design tutorials

02.扁平化设计

 flat

2013年几乎人人都使用过扁平化设计的系统,不过,你是否觉得有点厌倦了呢?
自从浏览器开始支持CSS3的文字阴影和图像阴影功能后,拟物化设计就成为了设计师们的心头好,同时,这种高于扁平化又低于3D的仿真效果也受到了广大人民的一致好评。
不过这一切在2013发生了翻天覆地的变化,率先改变这种设计方式的是著名的苹果公司。在2013年他们设计的ios7系统在炎热的夏天给我们带来了一阵清爽的凉风。Ios7界面看上去非常之简洁,完全的扁平化设计。
不过不可否认的是,扁平化在很早以前就被作为一种趋势去研究了,苹果公司也只能算后来者居上的典型例子,毕竟老乔给公司打下了坚实的基础。不管怎样,扁平化设计肯定是2013年最热网页趋势之一。

Also read: 10 examples of flat design

03.静态页眉

 static headers

随着“固定”这一概念的迅速传播,静态页眉也成为了一大趋势。什么是静态页眉?即当用户滚动网页时,页眉保持在原位不动,提供持久稳固的导航作用及品牌宣传作用。这一特殊的趋势已经受到了广泛的应用,因为设计师们终于可以使用CSS2.1中的“固定”功能了,这一功能非常的可靠,不用担心浏览器支持与否这个问题。
04. 视差
 parallax

2013最火趋势中,视差效果也得分了一杯羹。对于不太了解形势的人来说,视差效果指的是通过不同角度看设备,你能得到不一样的效果,且物体接近你的速度似乎比你想象中要快。曾经在屏幕上这是一种技术,广泛应用于游戏中,而今被带到了网页设计里。
作为一种显示深度和3D的方法,视差用不同的速度来控制不同元素的移动,如果制作好的话,这将是一个灰常优秀的网页~

Also read: Build a parallax scrolling website: 10 pro tips

05.无限滚动网站

 infinite scrolling

滚动,滚动,滚动,使鼠标滚轮滚动……
我相信今天你一定见到过这种网页,它们只有一个页面,不过内容异常丰富,特点就是似乎永远在滚动。这种网站摒弃了传统的多网页展示的方式,而选择在同一个页面展示不同的内容,垂直放置内容,从而避免了用户需要等待新页面加载或不断刷新访问内容这一状况。
我觉得这是一个很好的讲故事的方式,也可以展示产品,又或者仅仅是呈现一个公司所有信息的页面。这种页面通常会和视差滚动效果相结合。

Also read: Why the long page?

06. 支持HIDPI(视网膜)显示

 Retina

这一趋势发展直接反映了当下不断升级的硬件市场。在ipad使用视网膜显示屏后,iphone视网膜显示屏的推出就显得不可避免了。在苹果公司率先推出这一硬件后,其他制造商纷纷效仿,越来越多的产品开始使用HiDPI显示器。
现在,网页设计师也已经适应了这种新硬件,并且对其加以利用,增加了应用的分辨率,提供不同版本的图像服务,这样一来,可以让商品看起来更加清爽、完美!
07.字体设计

 Type-led designs

在今年的网页中,字体也占了不少版面。这些设计得益于Twitter的引导框架,在这个引导框架中,系统提供了几种布局模块及类型,大多都会突出网页字体,然后是正文以及少量的图像。
这一趋势也反映出了今后网络的走向,因为这种设计方式能让我们轻松的布局,所以短时间内人们对它的热情只增不减。

Also read: The secrets of great web typography

08.圆形设计元素

 circular elements

在2013年,我们看到了一些非常酷的圆形元素,这在很大程度上要归功于CSS3的圆角边框属性。
这种设计通常在网页蓬勃发展时期出现,所以也是一边变相的证明,说明了2013年尊的是网页设计的本命年~
09. CSS3动画效果

 CSS3 animations

在2000年初,Flash是复杂动画效果国的国王,因为它是唯一、可靠且可行制作动画的工具。不过随着技术的发展,JavaScript等工具取代Flash,成为了动画设计师的另一个制作工具。
螳螂捕蝉黄雀在后,2013年我们见证了CSS3替换JavaScript作为主要工具实现常见的动画效果全过程,这在很大程度上与浏览器采用的关键帧和转换属性有关。
10.超大型按钮
 big buttons

2013年最后一个超热门趋势就是——超大型的按钮!不过这里我要替超大型按钮正一下名,这里的超大不是指那个超大,你懂的…它只是比传统的按钮要大,但是还是符合网页布局的比例。这是一个非常实用的方法,能让你注意到一个特定的文字或动作。
今年的年终总结到这里就结束啦,期待明年还能与你在这里相见,圣诞快乐,新年快乐~

翻译小组:优设网SDC

原文地址:creativebloq




20个2013年最值得关注的网页设计趋势

在过去的一年中,我们都看到了网页设计趋势在日益增长。或许有些朋友还记得我早些时候的一些文章关于网页设计,有兴趣的可以点击来查看,现在我们可以看到其中许多想法已经实现了,甚至有些采用了一些更高层次的新奇想法。在今天这篇文章中,我将与大家分享2013年里20多种网页设计的全新趋势走向。