11个网页设计趋势热点 持续联系响应设计

  设计与开发之间本有一线界限,但当时代步入又一个十年,这个线变得更加模糊甚至感觉不到它的存在。

  使用PS设计网页版面,足矣?或许五年前是吧!现在的互联网用户要求越来越多。没有内涵的华丽很快就会被丢弃。如果你追求华而不实的设计,那么相信你很快会被时代遗弃。

  2011年不再属于单纯的华丽而是注重功能。新的一年或者未来十年的设计趋势是响应设计(responsive design)、持续联系(constant connection)和虚拟现实(virtual reality)。

  作为设计师的你,2011年会作神马打算?真正的设计师设计的东西不是为了哗众取宠而是在艺术和功能上做到两全其美。。

  肤浅的赞赏易得肤浅的设计也易被遗忘。出色的设计师犹如造梦师,给用户创造一个梦境,让用户感觉到如此真实而不知道自己是在梦中。这样的梦需要几个元素:优秀的配色,直观的设计,良好的交互性和快的响应速度。

  “此外,永远不要低估简约的力量。2011年,你的设计不但要考虑笔记本、台式电脑,还要考虑智能手机、上网本和平板电脑等设备。你都准备好了吗?”

  2011年网页设计趋势有何变化?一起关注11个网页设计趋势热点:

  1、更多的CSS3 + HTML5

  这是期待已久的事情。在过去的几年设计师已经开始关注和使用CSS3+HTML5,但在2011年CSS3+HTML5将会得到更广泛的应用。网页 设计师最终会抛弃Flash。Flash不再是昔日的王者,新技术(指CSS3+HTML5)将会取而代之。2011年,Flash渐行渐远,魔术师 “HTML5”成为舞台的主角:


  当然,说HTML5代替Flash为时还早。从上面的两幅截图你可以知道Flash和HTML5还是有差距的。因此,2011年两者会各自保持属于自己的位置。

  不过2010年以前网页设计师滥用Flash的现象会慢慢减少。现在很少设计师会整个网站都是用Flash设计,他们会在一些可用的地方使用 HTML5替代Flash,使网站变得简单运行更快速。然而,目前HTML5还不能够取代Flash,Flash的某些效果HTML5暂时还不能够实现。

  然而最值得人兴奋的是CSS3的应用越来越广,在某些地方甚至超越PS(Adobe表示有鸭梨),因为利用CSS3来实现文字阴影、图片圆角和图片透明实在是easy job。如果你还不会,是时候去了解CSS3和HTML5。

  2、简单的配色方案

  没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式。不要老是黑白灰神马的,太不给力了。多点考虑绿、黄或者红作为你的网页主色调。当然,颜色最好保持使用2到3种。调整颜色的透明度,或许会给你意想不到的效果。比如:


  只是简单的绿色,通过调节透明度设计出如此美观的Twitter可视化工具。可要知道:这个网页只是用了XHTML/CSS和Javascript,给力吧!


  红色绝对经典,如果配色做得好给人的视觉冲击就更……。上面的网站独特的红色和易友好的文字设计让人不得不为之折服

  3、移动互联网时代的到来

  智能手机,ipad和上网本随处可见,OMG,2011年这个现在将会更加明显。这意味着你的设计需要考虑更多的设备。

  创建适合移动设备的网站不是简单地在原有的设计去掉华丽的元素,那将会是没有灵魂的设计。尽管在原有的设计再设计一个支持移动设备网站是件痛苦的事情。幸运的是,新的技术让一切变得更简单。

  在使用CSS3的情况下,设计移动网页方便多了。最重要的是你可以修改一个CSS文件完成整个网站修改以符合用户使用不同设备进行浏览网页。

  你也可以设计一个移动设备专属的网站,但相信那个网站不久还是要改版的,以现在科技产品的发展速度来看。越来越多的移动网站包括原始网站的浏览选项。

  如果你不提供这个选项或者你的原始网站没有针对移动网络标准优化,那你并未准备好迎接移动互联网时代的到来。据相关预测,智能手机销量将会超越个人PC。赶快准备好,迎接移动设备大军的来临。

  4、Parallax Scrolling

  先来解释下Parallax Scrolling,Parallax scrolling 是让多层背景以不同的速度移动,形成运动视差 3D 效果,虽然纯属视觉效果,但在内容滚动时形成的视觉体验仍然非常出色。

  2011年的网页设计趋势热点就是要创造这样的深度视觉效果。Parallax Scrolling可以通过一些简单的CSS技巧或jQuery插件来实现(示范站点:站点1 站点2)。

  Parallax scrolling运用于网页设计的次要元素中可以起到很好的效果:如header、footer或者背景。不过最好不要运用于网站导航,那显得有点不伦不类。


  Old Pulteney Row to the Pole 在网站背景使用了Parallax Scrolling特效,打开该网站然后往下拉即可看到效果。

  5、设计需考虑更多的触屏设备

  触屏技术应用越来越广泛,触屏设备随处可见。这意味着,你的导航设计不再只是鼠标导航,你必须要要考虑你的设计适合触屏设备。请问你的设计做到指尖导航了吗?

  作为设计师,我们更喜欢鼠标。当鼠标悬停的时候链接会变得高亮,然而触屏没有所谓的悬停。你将会在设计中如何向触屏设备访客展示链接?

  同样,如何才能做到方便你的游客仔细阅读您的网站?这可能在浏览器标准上存在争议,或者水平滚动触屏可能更加合适。将网站设计类似于杂志的布局更有利于游客浏览你的网站。

  最后,你必须考虑在你的网页设计中使用流体布局(liquid layouts)。2011年,你需要处理的重点不再是屏幕分辨率问题,而是如何做到使访客从垂直到水平阅读你的网站都会清晰。你的设计必须做到灵活以应付任何的挑战。否则你将会成为过去式。


  Baby sees the iPad Magic, Copyright Steve Paine, Flickr

  6、深度判析

  深度判析是关于在网页设计使用维数,这样可以使你的网页变得更加真实。如果运用得恰当,那将会是一个虚拟的3D效果,就像3D电影阿凡达那样。尽管3D技术还没有去到网站设计,你仍然尝试使用维数进行设计。


  Plántate提供了一个可旋转的3D地球,灵活利用阴影和层等手段。


  Jordon活动页,3D元素清晰简单,设计非常醒目。(貌似已经撤掉)

  7、大背景图

  大背景图的网页设计应用在2011年将会更加明显。这些背景图像一般是高分辨率,覆盖这个网站。高清照片是一个迅速抓住你的读者的好方式,可以产生极具冲击力的视觉效果-游客的视线会不自觉地落在宽大的背景上。

  当然背景图的色彩、内容等都十分讲究,任何情况下都不要破坏用户的体验,不然再漂亮的照片也是枉然。图片类型趋向于一些比较柔和、略带透明的一类,不要影响到网站文字的阅读,讲究协调,易于阅读。


  上面的网站使用了高分辨率的图片作为网站的背景,网站主色调是黄色。


  This site adds playful animation with its grand scale imagery. Warning: auto-play music.

  8、不拘谨于顶级域名

  严格意义上这一点与网页设计无关,但这一点也是发展的趋势,将出现更多创造性的域名。.com域名的吸引力越来越少,主要是你很难再找到一个比较短的.com域名。2011年人们开始将视线慢慢转移到.me、.co和.cc等身上。想想域名的发展,抢先一步,不然你很可能再次错失先机。


  .me 用在个人展品陈列页、博客是非常不错的。


  另一个.me域名的示范

  9. QR: Quick Response

  如果你注意现在越来越多的名片、杂志或者其他地方出现方形条形码,证明你已经看到2011年的这个趋势热门。但它跟网页设计何干呢?实在匪夷所思。

  这个方形的条形码被称为QR,全称为Quick Response(在“QR Code读取器QuickMark” 介绍过)。

  使用你的手机拍摄一张唯一的条形码的照片,像魔术一样,手机上读取QR的软件就会打开条形码相关的网站。最美妙的事情是你可以将QR应用到很多地方。

  应用QR到你的网站,目的是让浏览者拥有一个你的移动网页的快捷方式。你还可以通过在您的网址上放置一个特殊的推介代码QR追踪你的访客。

  你完全可以使用QR作为你的头像,然后到别人的网站留言、评论。2011年的移动媒体优势更加凸显,而利用这点优势的网页设计是最明智的选择也是将来的发展趋势。


  上面是软矿博客的QR。如果你也想创建一个,猛点击这里。

  10、缩略图设计(Thumbnail Design)

  Google已经向浏览用户推出它们的浏览预览技术。过去我们只能通过点击链接才能看到网页的内容,现在你只需点击放大镜然后将鼠标悬停在链接上就可以预览该链接的网页内容。

  如果你的设计是基于Flash,会存在这样的一个问题,预览将无法显示你的设计元素。

  2011年的一般互联网用户变得更加精明,他们更希望看到更多人性化的导航设计。


  11、持续联系/ Life Stream

  Lifestreaming,一种在线记录个人日常活动的网络应用,包括直接通过视频feed或通过聚焦一个人的网络在线内容,比如博客日志,在社会性网络上面的更新,在线相册,聊天内容甚至只是一些喜欢的网站的链接等等。

  最后一点,不是最不重要的一点,是网页设计更加注重人与人之间持续联系,如Life Stream。互联网本身是原始的,枯燥无味的,是人类通过这个开放的平台分享他们的一切才变得多姿多彩。

  将来人们还会而且加强如 lifestreaming的形式进行人与人之间的交流互动。作为网页设计师,你必须了解这个趋势和应对这个趋势。

  2011年,个人博客在Twitter feeds更活跃(不只是连接到Twitter页面的链接),人们会通过Foursquare互相传递即时信息,where are u and what are u doing。毋庸置疑,2011年将会带我们走进一个更交心的互联网时代。


  个人网站,使用了lifestreaming。


  一个商业网站,在一个页面上综合大量信息。

  文章来源:优旁博客

时间: 2024-08-30 17:37:09

11个网页设计趋势热点 持续联系响应设计的相关文章

2011年关注11个网页设计趋势热点

文章描述:2011年网页设计趋势分析与预测. 设计与开发之间本有一线界限,但当时代步入又一个十年,这个线变得更加模糊甚至感觉不到它的存在.使用PS设计网页版面,足矣?或许五年前是吧!现在的互联网用户要求越来越多.没有内涵的华丽很快就会被丢弃.如果你追求华而不实的设计,那么相信你很快会被时代遗弃.2011年不再属于单纯的华丽而是注重功能.新的一年或者未来十年的设计趋势是响应设计(responsive design).持续联系(constant connection)和虚拟现实(virtual re

一起关注11个网页设计趋势热点

1.更多的CSS3 + HTML5 这是期待已久的事情.在过去的几年设计师已经开始关注和使用CSS3+HTML5,但在2011年CSS3+HTML5将会得到更广泛的应用.网页 设计师最终会抛弃Flash.Flash不再是昔日的王者,新技术(指CSS3+HTML5)将会取而代之.2011年,Flash渐行渐远,魔术师"HTML5"成为舞台的主角: 当然,说HTML5代替Flash为时还早.从上面的两幅截图你可以知道Flash和HTML5还是有差距的.因此,2011年两者会各自保持属于自己

web设计趋势使用大背景图像增加设计吸引力

网页制作Webjx文章简介:使用大背景图片的网页设计案例. 有一项web设计趋势已经流行一段时间了,但似乎势头依然不减,这便是使用大背景图像.这是一种增加设计吸引力简单有效的方法,用一张图片或插图就可奠定网站的整体色调.不过,这样做也有些孤注一掷,你创建的网站可能会显得太繁杂.因此,在背景与其他设计元素之间寻找平衡,就是一件十分重要的事情.为了给你一些启发,下面提供了30个高效运用此项技术的网站范例. Stephan Siegrist Noah Stokes – Es Bueno 大峡谷空中通道

Web2.0网页设计趋势:为表达信息而设计

自从web2.0之后,网页设计开始走向实用设计的阶段,越来越多的设计师注意到"为表达信息而设计". 着迷于前段时间黑白灰老师给大家介绍的"infographic"这里为感兴趣的同学推荐一些有用资源."infographic"由最初的概念变成一个新的专有名词,越来越多的专家研究并推崇这种令复杂信息更容易理解的设计手段.一部分可视化设计聚焦在传达精确的数据及统计信息,另一部分则聚焦在传达抽象的概念上. 很可惜"infographic&quo

2016 年最值得关注的16个网页设计趋势

  设计趋势每年都在改变,出于各种原因,有的设计趋势在演进中逐渐消失,有的则在大家的熟练运用过程中渐入佳境,甚至逐步蜕变成为主流.作为一个专注于网页和平面设计的设计机构,我们对所有相关的技术和设计趋势都极度敏感.通过过去一年的观察,我们总结出了以下16大设计趋势. 1. 可用性设计 2016年,设计的大方向将继续向着用户倾斜.用户体验在整个设计中的权重将继续加大.如果你的设计在可用性上不足的话,再炫酷也不会有人问津. 如果不能专注地做好用户体验设计,在即将到来的2016年,你是无法持久地吸引用户

2016年最值得关注的16个网页设计趋势

  设计趋势每年都在改变,出于各种原因,有的设计趋势在演进中逐渐消失,有的则在大家的熟练运用过程中渐入佳境,甚至逐步褪变成为主流.作为一个专注于网和平面设计的设计机构,我们对于所有相关的技术和设计趋势都极度敏感.通过过去一年的观察,我们可以总结出下面16大设计趋势. 1. 可用性设计 2016年,设计的大方向将继续向着用户倾斜.用户体验在整个设计中的权重将继续加大.如果你的设计在可用性上不足的话,再炫酷也不会有人问津. 如果不能专注地做好用户体验设计,在即将到来的2016年,你是无法持久地吸引用

再战明年!2016年最值得关注的16个网页设计趋势

设计趋势每年都在改变,出于各种原因,有的设计趋势在演进中逐渐消失,有的则在大家的熟练运用过程中渐入佳境,甚至逐步褪变成为主 流.作为一个专注于网和平面设计的设计机构,我们对于所有相关的技术和设计趋势都极度敏感.通过过去一年的观察,我们可以总结出下面16大设计趋势. 1. 可用性设计 2016年,设计的大方向将继续向着用户倾斜.用户体验在整个设计中的权重将继续加大.如果你的设计在可用性上不足的话,再炫酷也不会有人问津. 如果不能专注地做好用户体验设计,在即将到来的2016年,你是无法持久地吸引用户

聊聊2015年流行的网页设计趋势

  给明年的自己增加筹码!这一年快结束了,年底特别忙,但也别只顾工作,忘了给自己充电呦,今天特意分享一篇好文,聊聊明年将流行的设计趋势,希望能给那些奋战之余不忘充实自己的设计师们一点有价值的参考,每点趋势后都有相关文章帮你理解,不担心跟不上咯. 1. 响应式在继续 OK,也许你不打算打道回府.也许你有一个很好的理由不用响应式网页设计?在过去的几年里,响应设计快速巩固了自己作为网页设计的新标准.当然,也有争论,但是没人说,"让我们摆脱响应式设计吧".实际上,越来越多的网站选择响应式的方向

2013网页设计趋势:滚动视差网站设计

文章描述:网页特效:滚动视差设计指南. 作为未来网页设计的热点趋势之一的"滚动视差"在近年来被越来越多网站所采用,特殊新颖的展示模式也让许多用户眼前一亮.网络上也如雨后春笋一般出 现了很多像<30个让人兴奋的视差滚动网站>.<60个视差滚动网站赏析>--等一系列的视差滚动的文章,不过赏析的居多,真正指导设计师如何去设计,如 何去实现的实用型文章却很少.于是萌发了自己写一篇的想法,与感兴趣的人共同交流下滚动视察设计时的一些心得. 什么是滚动视差?视差滚动(Para