2012十大Web设计趋势

December 15, 2011

...

本不想取这么俗的标题, 可原文正好推荐了10个.
这回就不翻译原文, 记点自己的看法.

1. 响应式Web设计(Responsive Web Design)

简单的说就是动态适应当前各种分辨率及设备(电脑, Pad, 手机, ...)的页面方案.
常用的有弹性布局. 另, "弹性图片"是个很有意思的东西.
什么是响应式Web设计?怎样进行?
绝对是将来的方向, 但考虑到技术和设计的实现复杂度, 暂时还是用定宽网格吧.

2. 固定导航条(Fixed-Position Navigation)

如果不是ie6不支持position:fixed,
估计每个网站都会放几个固定元素.
常见的有: 顶部导航条, 底部工具条, "回到顶部".

3. 圆(Circles)

圆圆的东西总能戳中人们的萌点,
比如: columnfivemedia.com
网站用了两种方式实现圆:
顶部的两个圈圈用的是透明背景的png图, 中部并排的四个圈圈通过圆角实现 (只需将圆角设定大于宽/高的一半即可).

这个网站有意思的还有将鼠标指到圈圈上时,图片会动起来.
实现方法也非常简单,利用了CSS spirit.
将一张静态图和一张动态图拼接成git图, 再通过CSS实现显示部分.
(不用两张图是为了能同时加载, 以避免鼠标指上去时第二张图还没有加载.) {% jsfiddle zr4ac result,html,css light 230px 420px %}

4. 大矢量图(Big Vector Art)

5. 多列菜单(Multi-Column Menus)

6. jQuery/CSS3/HTML5动画(Animation)

7. 缎带&横幅(Ribbons & Banner Graphics)

一秒钟网页立体化, 元素变卡片.
可与固定位置配合使用(如:RoR教程, 见右上角的"edge").
你应该在某处已经看过了, 放几张图片例子: {% img http://www.webpagescreenshot.info/img/184189-1216201135658am.png %} {% img http://www.webpagescreenshot.info/img/491988-1216201135455am.png %}

8. 自定义字体风格(Custom Font Faces)

这点就先不看了。人家只有26个字母,算上大小写也才52个。

9. 信息可视化(Infographics)

没技术含量, 就不写了. 数据之美:Infographics 终极探索

10. 专注于简约(Focus on Simplicity)

11. 视差滚动(Parallax Scrolling)

这个是我自己加的,因为实在太炫了。
据说这是最经典的视差滚动:Nike Better World
每页都有很多创意元素:某汽车网站
从开发角度讲难度并不高,可能会有点点繁琐,
我想它没排进前十的原因大约是对设计者要求太高。
来份教程:Behind The Scenes Of Nike Better World

参考

原文:Web Design Trends in 2012