2011年Web设计最新潮流

　　在设计和编程之间只有薄薄的一线，当我们进入新的十年时，这条线变得越来越模糊。在Photoshop上绘制漂亮的模型就够了吗？5年以前也许如此。在今天，普通的网络用户要求的更多。所有的东西都很漂亮，但没有实质内容，过段时间人们就会厌烦。

　　如果你唯一的目标是用你漂亮的设计影响圈内其他设计师，你会发现你很快就落伍了。2011年不关心漂亮，而是关心功能。新的一年甚至十年的趋势是交互设计、粘度和虚拟现实。

　　2011年你会如何设计呢？设计师的最终目标是留住用户，而不是让人炫目。所有得到惊讶声和赞叹声的设计师都很容易被忘记。高超的设计师可以创造出一种环境，吸引并迷住用户到不想点击"返回"按钮的地步。几个元素汇聚在一起，组成一个奇妙的幻境：和谐的色彩主题、直观的设计、易用的信息和快速的反应。另外，永远不要低估简洁的力量。当然，情况一直如此，但在2011年，你将不再仅针对电脑桌面和笔记本，还要为智能手机、上网本、Tablet等等设计。你准备好了吗？

　　1、更多的CSS 3+HTML 5

　　多么令人满意啊！在过去几年里，CSS3和HTML5只出现在网页设计那遥远的地平线上。但现在，在2011年，我们看到了它的爆发。设计师们终于开始让Flash走开。你可能感觉到，Flash和一些对你当前和潜在用户有用的最新最热技术，配合的不是很好。在2011年，你会慢慢远离Flash，拥抱被称为HTML 5的魔术。

　　现在已经显示，Flash和HTML 5是不相等的对手。在2011年两者都有大量的应用空间。问题是设计师们在2010年（和之前）滥用了Flash。举一个例子，很少整个网站由Flash组成，特别是这些日子。HTML 5减轻了Flash的一些负担。不过，HTML 5还不能完全取代我们由Flash实现的那些非凡的设计元素。

　　也许更让人兴奋的是，CSS 3在今年可以投入使用了。移开Photoshop（Adobe还是不能休息），CSS 3可以更快实现文本阴影、圆角边框和背景透明。如果你还没有开始，现在就开始钻研了解CSS 3和HTML 5吧。

　　2、简洁的配色方案

　　简洁。没有什么比在安静的背景上显示清晰的消息更安静了。安静可以被解读为几种不同的方式。忘掉黑白和灰度阴影，想想绿色、黄色或甚至红色作为你的主色调。不过，限制你的调色板只有两或三种颜色，试试各种颜色不同的灰度。用少量颜色表现信息是非常了不起的。观察一下：

　　绿色阴影创造了这个Twitter可视的工具。边注：这个网站是用XHTML/CSS和Javascript创建的。

　　如果做的不好，红色很容易产生冲突。这个网站用高对比的易读文字克服了红色本来的特性。

　　3、适用于手机

　　智能手机、iPad、上网本，哦天哪！一个令人眼花缭乱的手机产量在2011年提供给消费者。这意味着你的网页设计必须适应多种窗口。

　　创建一个适用于手机的网站不是简单的从你的设计中去掉那些花哨的东西。这只会产生一个空虚无个性的设计。虽然不太可能，但从你的原始设计中去掉那些魔法，变成简单陈述你的品牌，这非常困难。幸运的是，技术正在快速解决这些麻烦。

　　借助CSS3的帮助，主要是media queries，手机网页设计有一个大的飞跃（以后详说）。最重要的一个进步是，你可以设计一个整站并允许你的编码遵从用户的可视区域。

　　设计一个专门的手机网站可能很有诱惑力，但这可能不再能满足你的观众了。越来越多的手机网站包含了访问原始网站的选项。如果你没有提供这一选项或你的原始网站没有为手机标准优化好，你就没有为2011年做好准备。预测显示，智能手机今年的销量将超过个人电脑。准备好你的设计，满足这一需求。

　　4、视差滚动（Parallax Scrolling）

　　视差滚动：不是指老早的电子游戏。如上所述，2011年这一热门设计趋势是创造一种深度感。还有什么方法比视差滚动更好吗？视差可以影响用户产生一种三维空间的错觉。它可以由一些简单的CSS技巧或jQuery插件如Spritely的帮助实现。视差滚动可以作为设计中最重要的次要元素，例如，在页头、页脚，或背景。把它放在导航可能会迷惑你的访问者。

　　Old Pulteney Row to the Pole网站在背景中使用了由上至下的视差滚动效果。这增加了一种很微妙的深度和许多乐趣。

　　只由CSS和HTML创建的视差滚动，由Roman Cortes创建。

　　5、为触摸屏设计，而不是鼠标

　　技术已经越来越变得触觉化。可用性正从抽象转向具体。这意味着，不是操作你的鼠标去远程连接，你的目的地就在你的手指尖。Tablet、大多数智能手机和一些台式机都使用触摸屏。你的设计可以容纳用手指导航吗？

　　你的多少设计是以鼠标为导向的？作为设计师，我们尊敬鼠标。当鼠标悬停的时候，我们的链接正在发亮。然而在触摸屏中没有悬停这回事。你的设计如何向访问者显示链接呢？下拉菜单怎么办呢？在触摸屏设计中这也是不行的。

　　同样的，访问者将如何细读你的网站呢？有争议的是，网站可能是为标准网页浏览器创建的，而在触摸屏中，水平滚动可能更适合。很好的适应这一情形的是杂志一样的布局，访问者几乎可以翻阅你的网站。

　　最后，考虑一下，将流动布局作为交互设计义务的一部分。在2011年，你不再应付屏幕分辨率的大小。访问者会从垂直的浏览方向改变到水平的浏览方向。你的设计必须是灵活的，能适应任何挑战，否则你将停留在2010年。

　　婴儿在看iPad的魔术（版权属于Steve Paine，Flickr）。

　　6、网页设计中的深度知觉

　　不，我不是在说"我能在你的网站看到你的咖啡杯和键盘"那种两年以前的设计。深度知觉是指在网页设计中创造一种维度，让你的网站的某部分看起来更靠近浏览者。如果做的好，能让人想起一种虚拟的3D效果。还记得在看3D电影大片时的感觉吗？像阿凡达？毫不夸张的说，里面的元素简直要跳出屏幕了。

　　虽然3D技术还没有普及到网页设计，你仍然可以在设计中复制这种深度。

　　这个好玩的网站提供了一个可旋转的3D地球，用良好的阴影和层次创造了一种深度。

　　醒目，聪明，这个庆祝Jordan（不管是男人或鞋）的主题网站非常具有娱乐性。3D元素如此清晰简单，使人大吃一惊。

　　7、大图背景

　　大尺寸背景在2011年将会激增。这些图片会是高分辨率、并覆盖整个网站的。大照片可以瞬间抓住你的观众——他们无法不看到它并对它有一个印象。背景图片必须适应内容，只是简单放一张漂亮的图片而没有上下环境会破坏用户的体验。趋势表明，柔和的和轻微透明的背景不会盖住你的内容，而是与之协调一致。

　　这个网站使用率一张高分辨率的照片，整个主色调是黄色的。

　　这个网站在大尺寸背景上增加了一些好玩的动画。警告：自动播放的音乐。

　　8、大胆的域名&组合

　　虽然严格意义上这不是网页设计的问题，还是期待看到更有创意的域名。一度令人垂涎的.com域名已经失去了许多吸引力——主要原因是你必须在注册域名时想一些别人没有想过的词语。2011年将会看到越来越多的企业不用.com而选择更稀奇古怪的域名如.me或.us。想想这种可能性，在还没有普及之前选好一个吧。

　　9、QR：快速反应

　　如果你在名片、杂志或其他地方看过那种弹出的方形条码，你可能已经知道这是一种2011年的热门趋势。融入到网页设计中会如何呢？令人惊讶的好，真的。

　　这种条码被称为QR，更短的快速反应。用你的照相手机给条码简单照张相，像变魔术一样，你的手机就会连接与条码有关联的网站。更美妙的事是你可以有无数多的方式使用它。在你的网站上放上你的QR，访问者就能更快的访问你的手机网站。你也通过在url放置与QR关联的代码，追踪你的访问者。当你在网站评论时，使用QR作为你的头像。

　　10、缩略图设计

　　不断进取的google已经向普通用户介绍了预览浏览。通过点击查看网站内容的日子已经过去了。今天，你只需点击那个放大镜并悬停（假设你没有用触摸屏），之后你就能奇妙的在另一端看看出现什么。

　　如果你的设计是基于Flash的，这肯定会是一个问题。预览不会显示你设计中的那些元素。

　　在2011年一般的互联网用户会更懂得上网，期待看到更多的人通过这些方式浏览。用缩略图判断一个网站实在是太有诱惑力了。

　　11、粘度/生活流程

　　最后，但不是最不重要的，是在网页设计中注重粘度。互联网本来是个荒凉的环境，我们通过在开放论坛上分享我们的生活使之更人性化。希望通过生活流程的形式看到更多隐私。个人博客和作品在2011年将会更明显的出现在Twitter的feed上（而不仅是Twitter页面上的一个链接）。人们会通过Foursquare让你知道他们每时每刻都去了哪里。实际上，希望通过某人的线上活动看到他专门的生活流程。2011年绝对会引出我们内心可怕的尾行者，毫无疑问。