Web | I'mISV

The Visual Design of Web 2.0

来自：http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/

明快的颜色

流行的颜色有绿色、深蓝、橙色和粉色。

圆角和圆的一切

利用新的CSS技巧可以很容易实现

圆角字体也很受欢迎

免费，全都免费

别依赖商业图库

KISS

突出应用的重点，del.icio.us管理链接，flickr管理照片。

合理运用排版颜色字体，让软件更易于使用，减少用户遇到的问题和障碍。

大就是美

大字体易读易用

擅用留白

空白可以：

突出重点
不会给用户的眼睛太多“压力”
隐含着放松和秩序
引导浏览路线和用户动作

讨人喜欢的行文方式

Friendly, informal copywriting allows a more personal relationship with website visitors. A List Apart singled out Flickr and Photojojo for an honorable mention in this department, and it’s a lesson that many Web 2.0 sites put into practice. WebTango isn’t just free, it’s “free of additives, cholesterol, ozone-depleting CFCs, and most importantly, free to use”. Tioti doesn’t just have tagging and RSS, it has “tagging and RSS up the yazoo”. FAQQLY founder David Liu isn’t a isn’t a faceless entity, Dave is “your first friend once you register”. And the toolbar on eSnips isn’t just flexible, it’s “a toolbar you can use in a bunch of cool ways”. You get the idea.

Eye Candy

Web 2.0 how-to design guide

See http://www.webdesignfromscratch.com/web-2.0-design-style-guide.php

简单

网站有明确的目的，每个页面也是如此。
用户的注意力是有限的资源
设计师要帮助用户找到用户所需
屏幕上的“东西”别太多

中央布局

减少栏数

2栏很常见，3栏最多

正确：

错误：

分离的顶部区域

明确清楚够大的品牌和导航区域

用颜色条分隔页面头部和页面内容区：

头部区域和页面内容区域完全分开，颜色不同，没有导航栏：

实在的内容区域

最简单的突出主要内容部分的办法是用强烈的颜色：

白色也可以：

简单的导航

导航元素通常是字体大、加粗、清晰而且明确；带链接的文字和普通文字通常有明显的区别：

导航系统要让用户知道：

你在哪里
你还可以去到什么其他地方
你做一件事情的时候有哪些选项

通常应该让导航链接：

和其他内容在位置上分离开
用颜色和图形是导航元素与众不同
用明确的文字说明来避免歧义

所以导航元素应该清楚明白地和非导航元素分开：

粗大的Logo

Logo应该：

能和内容在视觉上相衬，而且可以用于别处（比如印在TShirt上）
能够被识别和区别
第一眼就能表达出你品牌的特质和质量

这里是一些不错的logo： http://www.webdesignfromscratch.com/great-web-logos-for-creative-inspiration.php

大字体

大字体突出重点、易于识别

粗体介绍

使用粗体标题来作为介绍文字

强烈的色彩

明快强烈的色彩能吸引眼球，善用颜色来分隔区域、突出重点。

颜色可以用来表达品牌价值：

当色彩元素应用于（或者环绕）主要内容时，需要小心:

丰富的表面效果

真实的表面效果（例如投影、渐变色和反射）让用户感觉表面更真实。

参见3D效果的例子:http://www.webdesignfromscratch.com/3d-effects.php

渐变

渐变效果可以让原来平板的色彩和表面更柔和。

渐变通常用在页面顶端的背景

反射

一：光亮表面的反射效果，参见Aqua界面效果。

二：shiny table效果

参见：Here’s how to do it (from photoshoplab.com)

可爱的图标

现在应该使用更少更好的图标来表达更丰富的含义。Web 2.0的设计师仅仅把图标用在更有价值的地方。

星标

一页最多用一个：

Graphic Design Skills for Web Page Design

See http://webdesignfromscratch.com/graphic-design.php

【未完成】

Usability

See http://webdesignfromscratch.com/usability.php

【未完成】

Current style in graphic design for the web

From:http://webdesignfromscratch.com/current-style.php

使用3D效果，但要谨慎

反光和渐变的效果很常用，投射阴影则要注意使用频度

圆形的标识到处都是

使用柔和而自然的背景色

简单的白色和灰度渐变的背景给人cool、自然和柔和的感觉，加上前景强烈的颜色，很容易吸引用户的眼光。

小心使用强烈的颜色

用强烈的颜色抓住用户的眼球

适当地应用漂亮的图标

别在同一个页面使用过多的引人注目的元素

留白要充分

留白可以分隔页面元素，辅助用户阅读

大字

让最重要的文字比普通文本更大。但是如果所有的字都大，那么等于没有任何大字——仅仅突出那些重点。

The Logos of Web 2.0

See http://fontfeed.com/archives/the-logos-of-web-20/

柔和的（Softies）

字体多用圆角柔和的，如VAG Rounded、Helvetica Rounded、Arial Roundeed、Bryant还有FF Cocon。

最近下面字体也很常用：Foco、Tondo、FF Netto、Estilo Text和FF Unit Rounded。

ClipShack Logo

Clip Shack — video sharing
Font: VAG Rounded and Light obliqued

Zimbra Logo

Zimbra — collaborative calendar
Font: VAG Rounded Light

Wayfaring Logo

Way far ing — custom Google Maps
Font: VAG Rounded (fat tened with added stroke)

Kajeet Logo

Kajeet — mobile phone service
Font: VAG Rounded (custom ‘j’)

Pando Logo

Pando — file sharing
Font: sim i lar to Bryant Medium Alt

Zopa Logo

Zopa — lending exchange
Font: sim i lar to Frank furter Medium or Bryant Bold Alt

MySpace Logo

MySpace — socialnet working
Font: Arial Rounded Bold andBell Gothic Black

Track sLife — per sonal data base
Font: Arial Rounded Bold

Eventful Logo

Event ful — collaborative calendar
Font: Arial Rounded Bold (slightly smooshed)

Spongecell Logo

Sponge cell — collaborative calendar
Font: Arial Rounded Extra Bold

Skype — internet telephony
Font: Hel vetica Rounded Bold

ShoZu Logo

ShoZu — photo sharing
Font: FF Cocon Bold

Tabblog

Tabblo and Tabblog — photo sharing
Font: FF Cocon Bold

预言家（Futurists）

点阵图，直边和简单的构图

字体：FS Sin clair, FSAlvar, FF Cube, FF Netto, Sys, Notes Style, Purista, Stra tum, Neu traliser, ITCTetra, Stain less, Atrament

Last.fm Logo
Last.fm — musi cal social network
Font: ITC Ronda (cus tomized)
Alter nate: Aver nus

Photobucket Logo
Pho to bucket — photo host ing
Font: Dig i tal Sans Medium

Plazes Logo
Plazes — geo graph i cal net working
Font: Base 9 Reg u lar SC

NewsGator Logo
News Ga tor — RSS aggre ga tor
Font: ITC Bauhaus Medium

ReminderFeed Logo
Reminder Feed — reminders via RSS
Font: FF Dot Matrix Two Reg lar

Technorati Logo
Tech no rati — weblog search tool
Font: Neo Sans Medium

Tag World — social net work ing
Font: Handel Gothic Bold

Shoutwire Logo
Shoutwire — news shar ing
Font: Agency Bold

经典型

保守地使用下面的字形：Trade and News Gothic, Frutiger, Avenir, Inter state, FF Meta,FF DIN, Helvetica

下面这些替代用字型可以让你的logo看起来与众不同：

Trade Gothic → Spiegel, Benton Sans, Brown Gothic
Frutiger → Loca tor, FF Transit, Vialog
Futura → FF Super Grotesk, Neuzeit Grotesk, Nobel
FF DIN → Malmö Sans, Magion, Sophisto, Antagometrica, FF Good
Helvetica → see Alternatives to Helvetica

Xanga Logo
Xanga — weblog community
Font: Trade Gothic No. 2 Bold and Light

FeedBurner Logo
Feed Burner — RSS optimization and tracking
Font: Trade Gothic Bold

Newsvine Logo
Newsvine — news sharing
Font: FF Meta Bold and Book

StandPoint Logo
Stand Point — belief sharing
Font: FF DIN Medium

DropSend — file sharing
Font: Frutiger Bold

Flickr — photo sharing
Font: Frutiger Black

PureVolume Logo
PureVolume — music promotion
Font: Avenir Book and Medium

Sutterfly Logo
Shutterfly — photo service
Font: Avenir Heavy (customized)

9rules Logo
9rules — web design ne work
Font: Helvetica Bold

PODZINGER Logo
PODZINGER — podcast search
Font: Interstate Black

Campfire Logo
Camp fire — group chat
Font: Interstate Regular

YouTube — video sharing
Font: Alternate Gothic No. Two

Bloglines Logo
Blog lines — news aggregator
Font: ITC Officina Bold

Weblogs, Inc Logo
Weblogs, Inc. — blog network
Font: Syntax Bold

Wikipedia Logo
Wikipedia — collaborative reference
Font: Hoefler Text

新古典

Social text — enter prise wiki
Font: Lisboa Sans

Face book — social networking
Font: Klavika (customized)
Also: cards with Vista Sans

Joyent Proxima
Joyent — small business server
Font: Proxima Nova (alt ‘a’)
Not a logo, but we love Joyent’s use of Proxima — a new face that feels familiar but has its own character.