2012十大Web设计趋势
本不想取这么俗的标题,
可原文正好推荐了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