您的位置:知识库 » Web前端

2010 年 Web 设计风

来源: 锐商企业CMS  发布时间: 2010-05-11 10:24  阅读: 1164 次  推荐: 0   原文链接   [收藏]  

Web 设计是个变幻无常的行业,如今已经成为一个包含了美学体验,功能丰富的富媒体,事实上,当今的 Web正处在黄金时代,我们拥有强大的新工具,唾手可得的丰富资源,庞大的设计社区,以及主流浏览器对 Web 标准的普遍支持。如今的 Web风潮云涌,令人目不暇接。本文讲述了2010年最新 Web 设计风,这是第一部分。

1. 愉悦的设计

Web 设计师的工作是有效的传递思想,引导用户完成他们的任务并赢得他们的信任,我们有很多方法实现这些,如视觉之美,之惊奇,之愉悦,之难忘。令人过目不忘的设计会在你的品牌和用户之间建立起坚固的,可靠的情感纽带。


Brizk design studio 拥有令人目眩的设计,精美的动画,漂亮的字体和干净的布局,将鼠标放到底部的小鸟上时,会浮显出 Twitter 消息。

以下的这些示例站点,尽管名不经传,但它们在努力表达一些东西,试图融入我们的感受,它们拥有美丽的外观,而更重要的是,让人过目难忘。

Bounty Bev : Bounty Bev 是一家软饮料公司,这是一个单页式网站,该站的设计简单,清晰,充满个性。

Analog.coop : Analog为访问者带来很个性化体验,根据的 IP显示你地理位置,并告诉你他们的工作人员中有谁离你最近(不过,根据测试,这个消息似乎并没有什么实际价值,不管访问者来自何地,离他们最近的似乎永远是Alan 和 Jon - 译者)。整站的设计还是充满了乐趣感。

Forrst : 漂亮的设计,吸引人的视觉元素,富有创意的导航系统。

Billy Tamplin : 这是 Billy Tamplin 的博客,记录他生活与工作中的小小得意与荣誉。设计简单,漂亮。

MIX : 这是一个开发与设计社区博客,吸引人的动画与引人注目的效果,设计上保持了视觉上的一贯性,整体注重内容和个人感触。

Blue Sky Resumes : 一个代写简历的小团队,Header 部分的 Flash 动画很好地暗合了公司的名字,值得注意的是,在这段动画加载之前,Header 部分是以简单的图形填补动画加载前的空白的,这种渐进式体验非常体贴。

Mailchimp : 小猴子视觉表征随处可见,使用 ASCII 字符动画显示最新动态。

快捷键导航

现代的 Web,越来越拥有桌面应用的特质,借助 JavaScript,传统的 Web站点变得更富有交互性,键盘快捷键导航开始流行,其中最著名的例子是照片共享站点 Flickr 和 FFFFound。快捷键导航曾一度是Flash 站点的专利,现在越来越多出现在基于 CSS 的站点,Google Reader 是一个最典型的例子,还有更多站点也做得非常好。

They Make Apps : 几个月前,他们有一个键盘导航模式,使用箭头在内容之间穿梭,回车键展示细节内容,Escape 键返回主页面。但不知何故,键盘导航功能现在已经去掉了。


Image source

Mad-ar.ch : 基于 Flash,因此可以实现很高级的导航,按 c 到留言页,按 - 和 + 缩放图片,诸如此类。


9GAG : 一个社会化图片书签站点,按 j 和 k 前进或后退,使用 l 键为当前图片投票。

FFFFound! : 最早的图片书签网站之一,按 h 键返回页面顶部,按 v 改变视图,同样 j 和 k 表示前进和后退。

Feta : 另一个基于 Flash 的站点,使用箭头键在不同项目之间穿梭,下箭头表示选择,上箭头返回。

NY Times: Times Skimmer : 纽约时报的新闻概要页拥有很好的键盘导航功能,使用箭头键在新闻间前进后退,使用 Shift 键缩放,返回顶部按 t,刷新当前内容按 r,选择新闻按 a 和箭头。

Pictory : 照片故事杂志,同样使用 j 和 k 在不同图片之间浏览。

CrushLovely : 一个单页式站点,使用箭头键在不同部分之间浏览。

Thinking for a Living : 使用左右箭头键导航。

Picnic Extraterrestre : 一个非常不同的设计,模仿图文电视风格,所有导航内容都可以通过数字键实现。

Web的平面设计风

现代 Web 设计,还追求平面设计般的精致与创意,以下这些示例站点,拥有杂志和海报般的设计风格,醒目的题头,多栏,缩进,图片包围,旁注与脚注,诸如此类。


Design Informer: Grid-Based Web Design, Simplified 拥有两栏式结构,将文字和图片清晰地左右分开。

A Lesson on How to Be a Villain : 一个拥有出色设计和独特布局的站点,CSS 加 Table 布局,有时候,这是 Web 平面设计化的必要技术。

Evan Dinsmore: 21 : 海报式设计,使用生动的图片替代文字,不好的一面是,用户界面不够有好。(Web 平面设计化的固有问题 - 译者)

The Bold Italic: Dr. Feel Good : 杂志式布局,多栏,如果将页面打印出来,你也许不相信这是个 Web 页面。

A Way Back: Revised Font Stack : 非常精细的设计,大型图片横跨整个页面。

Chris Coyier: The Safari Challenge : 一个微妙的设计,大面积留白,多栏文字,从美学上看,更像一页书。

Kyle Fielder: Keeping Curious : 多像那些旧杂志的画面。

Sleepover: A Critical Analysis of my Shoes : 简单的网格布局,文字左右对齐,图片也漂亮,不过左右对齐式文字在 Web 上似乎不怎么行得通。

Yaron Schoen: Too Many Buttons : 平面设计化的 Web 页面需要更多东西,背景图片与配色,CSS 式样,这个示例说明了这些。

The Bold Italic: Keep Off the Grass : 另一个多栏式设计示例。

The Bold Italic: Cinderella Story : 受平面设计影响

Travis Neilson: Default Switch : 一个冷静的,简洁的设计

 

4.横向主义

曾几何时,Web 易用性规则告诉我们,不要让用户横向滚动内容,因为鼠标的滚动按钮天生是竖向滚动的,然而,新的多点触控技术的出现正在改变这一现状。

Thinking for a Living : 这不仅是一片讨论内容横向滚动和竖向滚动孰优孰劣的文章,本身还是横向滚动的一个绝佳示例。

OurType : 一家比利时字体设计公司,内容横向滚动。

Jung v. Matt : 以横向时间线导航,虽然没有横向滚动条,但鼠标的滚轮式横向滚动的。

Your Auxillary : 单页式设计,也是结合横向和竖向导航的示例。

One Twenty Six : 除了左右导航箭头,还可以从下拉选择框中直接选择要访问的内容,并左右滚动定位到那段内容。

Jax Vineyards : 一个有关葡萄酒的网站,非常有效的左右滚动导航,基于 CSS 和 JavaScript 的设计十分精良。

C. L. Holloway : Candice Holloway 的作品展示网站,横向导航很有画廊的感觉。

Yamaha Ginza : 基于 Flash 的全向导航。

Edpeixoto : 很独特的布局

ASOS : 倾斜也是美

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 : 将企业色融合到标题,导航文字中,使用的字体很纤细,为页面制造出某种气氛。

结语

现代的 Web 设计更优美,更丰富,用户界面也更友好。我们看到了视觉设计和用户体验之间的结合,传统的平面印刷设计思想被引入 Web 设计,从布局到字体,预示着新的 Web 设计时代的到临,在这个新时代,设计者有更好的工具和技术实现他们的设计思想。

本文国际来源:Smashing Magazine The Current State of Web Design: Trends 2010 (原文作者:Vitaly Friedman

0
0
标签:Web

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻