五
7
2010
网页设计现状:2010年设计趋势[下]
发布者: seasun新闻来源: Smashing Magazine
Web 设计是个变幻无常的行业,如今已经成为一个包含了美学体验,功能丰富的富媒体,事实上,当今的 Web 正处在黄金时代,我们拥有强大的新工具,唾手可得的丰富资源,庞大的设计社区,以及主流浏览器对 Web 标准的普遍支持。如今的 Web 风潮云涌,令人目不暇接。本文讲述了2010年设计趋势,这是第二部分,如果您在看完本文之后仍意犹未尽,那么请看该文的第一部分。
4.横向主义
曾几何时,Web 易用性规则告诉我们,不要让用户横向滚动内容,因为鼠标的滚动按钮天生是竖向滚动的,然而,新的多点触控技术的出现正在改变这一现状。
Thinking for a Living : 这不仅是一片讨论内容横向滚动和竖向滚动孰优孰劣的文章,本身还是横向滚动的一个绝佳示例。
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/oneway.jpg)
OurType : 一家比利时字体设计公司,内容横向滚动。
Jung v. Matt : 以横向时间线导航,虽然没有横向滚动条,但鼠标的滚轮式横向滚动的。
Your Auxillary : 单页式设计,也是结合横向和竖向导航的示例。
One Twenty Six : 除了左右导航箭头,还可以从下拉选择框中直接选择要访问的内容,并左右滚动定位到那段内容。
Jax Vineyards : 一个有关葡萄酒的网站,非常有效的左右滚动导航,基于 CSS 和 JavaScript 的设计十分精良。
C. L. Holloway : Candice Holloway 的作品展示网站,横向导航很有画廊的感觉。
Yamaha Ginza : 基于 Flash 的全向导航。
Edpeixoto : 很独特的布局
ASOS : 倾斜也是美
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/asos.jpg)
5. Rich, Strong Typography
字体在现代 Web 设计中意义深远,随着 @font-face 与 TypeKit 等技术的发展,我们已经可以在 Web 中使用个性化字体,在 Web 页面上实现平面设计般的感觉。
Kilian Muster : Kilian Muster 在设计中大量使用衬线字体,Palatino, Palatino Linotype, Book Antiqua, Constantia, Times, Times New Roman,Serif。(衬线字体一般常用于书籍印刷品,在 Web 上并不多见(请参阅《字 体的故事之:衬线体的前世今生》) – 译者)
extrapolish : 这家波兰的 Web 设计公司网站的很多文字使用的都是大写,但设计还是很稳定,干净。
DNA to Darwin : 这个站点的字体也全是衬线字体,skolar-1,skolar-2, Georgia, Times, serif。
COG’AOKE : 粗重,平直的字体构成强烈的第一印象.
TRÜF : 这家设计公司的网站使用对比强烈的颜色,加粗重的衬线字体。
Pioneers : 生动的图片,加不很严肃的字体,看上去更像传统的小册子,而不是网站。
Colly : 在细微处见真知,没有夸张的厚重字体,但那些细致的设计拥有很好的美学体验。
The Saint John’s Bible : 这个站点将衬线字体发挥到极处,字体和站点主题与布局很相配。
Brewhouse : 字体与视觉设计的很好结合。
Tick Talk : 那些大胆的粗体大写字
The Sew Weekly : 使用 Typekit 嵌入式字体技术,使用的全是衬线体 skolar-1,skolar-2, Georgia, Times, serif,文字还分栏了,似乎又是一种潮流。
Neiman Group : 将企业色融合到标题,导航文字中,使用的字体很纤细,为页面制造出某种气氛。
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/villanova.jpg)
结语
现代的 Web 设计更优美,更丰富,用户界面也更友好。我们看到了视觉设计和用户体验之间的结合,传统的平面印刷设计思想被引入 Web 设计,从布局到字体,预示着新的 Web 设计时代的到临,在这个新时代,设计者有更好的工具和技术实现他们的设计思想。
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/ourtype.jpg)
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/inno.jpg)
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/many.jpg)
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/126.jpg)
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/wine.jpg)
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/african.jpg)
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/yamaha.jpg)
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/flavors.jpg)
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/kilian.jpg)
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/extra.jpg)
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/dna.jpg)
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/cog.jpg)
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/truf.jpg)
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/pioneer.jpg)
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/simon.jpg)
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/bible.jpg)
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/brewhouse.jpg)
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/tick.jpg)
![网页设计现状:2010年设计趋势[下]](http://i709.photobucket.com/albums/ww92/zsmin/iwanna/Article/201005/sew.jpg)