Web2.0 的視覺(jué)設(shè)計(jì)

其實(shí)自從Web2.0發(fā)展以來(lái)，一群關(guān)注視覺(jué)風(fēng)格趨勢(shì)的設(shè)計(jì)師們都在密切關(guān)注和推動(dòng)著web2.0風(fēng)格的進(jìn)程，之前藍(lán)色也和我談到過(guò)web2.0的視覺(jué)風(fēng)格問(wèn)題，當(dāng)時(shí)我說(shuō)還需要一段時(shí)間來(lái)觀察和歸納，但當(dāng)我看到喬納山(Jonathan)在2006年10月21發(fā)表的“Web2.0的視覺(jué)設(shè)計(jì)”(The visual design of Web 2.0)，在欣喜于全球設(shè)計(jì)師的關(guān)注焦點(diǎn)契合之余，也為文章中一些沒(méi)有寫(xiě)出的東西想做一個(gè)表述，并且對(duì)文章中一些被翻譯成中文后導(dǎo)致的誤導(dǎo)以及對(duì)文章中一些觀點(diǎn)的不同看法和補(bǔ)充做一個(gè)較全面的補(bǔ)充，讓我們所有關(guān)心和關(guān)注web2.0視覺(jué)風(fēng)格的設(shè)計(jì)師一起快速地“進(jìn)化”。

　　在正式分類講述之前，我還是建議大家去讀一下喬納山的原文，如果你愿意的話，我也給你提供一個(gè)我翻譯的版本，我想，這個(gè)應(yīng)該比charlee的中文翻譯要好理解一些。

　　另外我覺(jué)得中國(guó)的設(shè)計(jì)師需要中英對(duì)照的學(xué)習(xí)，提高國(guó)際性，觀念同步，詞匯同步是很重要的，隨后還會(huì)有一篇文章進(jìn)行補(bǔ)充和總結(jié)。

The visual design of Web 2.0
Web2.0 的視覺(jué)設(shè)計(jì)

Posted by Jonathan on October 21st, 2006 in Typography, Graphic Design, Web Design  

　　喬納山 發(fā)表于 2006年10月21日，Quester 中文翻譯于 2007年01月15日， 類別關(guān)鍵字：排版，圖形設(shè)計(jì)，網(wǎng)頁(yè)設(shè)計(jì)
原文鏈接：
http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/

If you didn’t blink, you may have noticed that for a few days recently Wikipedia’s entry for Web 2.0 included a subsection describing the visual elements of Web 2.0. Gradients, colorful icons, reflections, dropshadows, and large text all got a mention.

　　如果你不是太瞎的話，你可能會(huì)注意到前幾天在 維基百科的Web2.0 條目下有一個(gè)子條目是關(guān)于 視覺(jué)元素 的。漸變，艷麗的圖標(biāo)，反射效果，下拉陰影，以及大號(hào)文字等值得一提的內(nèi)容。

A few days later the “visual elements” addition had been removed after a vote by wikipedians. The objection, I suppose, is that no set of visual criteria can accurately define something as being characteristic of Web 2.0 - if Web 2.0 can be understood as an approach to generating and distributing content, then it needn’t be tied to a particular visual style.

　　過(guò)了幾天“視覺(jué)元素”的添加條目就被維基成員投票否決并刪除了。反對(duì)的原因，我估計(jì)是因?yàn)闆](méi)有一套 視覺(jué)標(biāo)準(zhǔn) 能夠準(zhǔn)確的定義一些東西，就像Web2.0的特點(diǎn)――如果Web2.0可以理解為一種 信息內(nèi)容的生成和分發(fā)途徑，那就不必束縛于某一種視覺(jué)風(fēng)格。

Nevertheless, it’s true that many Web 2.0 sites do share a distinctive aesthetic. Wikipedia’s editors may not think it’s a worthy part of the Web 2.0 discussion, but I say bring it on! Let’s take a look at the some of the communication issues facing a Web 2.0 site, and see how the “Web 2.0 look” can help to solve them.

　　就算是這樣，許多Web 2.0站點(diǎn)有著同樣獨(dú)特的審美情趣卻是事實(shí)。維基百科的編輯也許不認(rèn)為這是Web 2.0的有價(jià)值的部分，但是我卻說(shuō)很必要！讓我們來(lái)看一下面向Web2.0的溝通問(wèn)題，并看看“Web 2.0外觀”如何幫助解決問(wèn)題。

Trust me, I’m Web 2.0
Integral to Web 2.0 is harnessing the input of website visitors. Users can generate content for a web service, promote it in a “viral” peer-to-peer fashion, and improve it’s data quality through their opinions and preferences.

　　相信我，我就是Web2.0
　　對(duì)于web2.0來(lái)說(shuō)，不可或缺的是對(duì)網(wǎng)站訪問(wèn)者輸入的駕馭。用戶能自行創(chuàng)建網(wǎng)站服務(wù)的內(nèi)容，以“病毒”般的點(diǎn)對(duì)點(diǎn)流行方式推廣它，并且按照用戶的意見(jiàn)和喜好來(lái)完善數(shù)據(jù)質(zhì)量。

But to convince a visitor to contribute their time - and data - to a web application, you need to get them to trust you first. Most Web 2.0 sites come across as friendly, approachable and small-scale, using subtle design decisions to gain our trust.

　　但要說(shuō)服訪問(wèn)者為網(wǎng)站程序花費(fèi)時(shí)間和提供數(shù)據(jù), 首先需要贏得他們的信任。多數(shù)Web2.0站點(diǎn)讓我們覺(jué)得友好、平易近人、小規(guī)模，它們運(yùn)用巧妙的設(shè)計(jì)來(lái)贏得大家信賴。

Green is the new grey

Bright, cheerful colors dominate Web 2.0 sites. Green is the unofficial color of web 2.0, but saturated blues, oranges and pinks are also favourites. Bold primary colors suggest a playful, fun attitude and also help to draw attention to important page elements.

　　綠色成為新寵
　　明快而生機(jī)盎然的色彩主宰了Web2.0網(wǎng)站。綠色是web2.0的非官方的色彩，并且高純度的藍(lán)色系，橙色系和粉紅系也同樣倍受青睞。 奔放的主色調(diào)引導(dǎo)了一種嬉戲的，愉快的態(tài)度，并且也有助于將注意力拉回到頁(yè)面的重要元素上。

   

Rounded everything

New CSS techniques for achieving rounded corners have helped make this style hot again. The friendliness of rounded corners is in keeping with the comfortable, informal tone of many web 2.0 sites.

　　圓角無(wú)處不在

　　新的CSS技術(shù)支持圓的倒角使得這一風(fēng)格又熱了起來(lái)。友好的圓角效果讓許多web2.0站點(diǎn)符合舒適的，無(wú)拘無(wú)束的基調(diào)。

  

In a great FontShop article analysing the logos of Web 2.0, it was clear that rounded typefaces are all the rage. This smooth approach to type lends a modern playfulness to a company’s visual identity.

　　在FontShop有一篇分析 Web 2.0 圖標(biāo)的精彩文章，明確表示圓角字體開(kāi)始全面風(fēng)靡。這種字體的柔和方式賦予了 企業(yè)視覺(jué)識(shí)別 一種現(xiàn)代的玩樂(lè)態(tài)度。

   

Free, as in beer

If you’ve got to convince visitors to sign up for your killer app, giving away FREE accounts surely can’t hurt. Most Web 2.0 sites devote prime real estate to the message that they offer a free service. If that message can appear inside of the ubiquitous ’starburst’, all the better.

　　免費(fèi)，象啤酒那樣

　　如果你已吸引訪問(wèn)者注冊(cè)了你的終極程序，送給他們免費(fèi)的賬戶而不要心疼。大多數(shù)Web 2.0站點(diǎn)花費(fèi)主要資產(chǎn)來(lái)傳達(dá)一個(gè)信息，那就是：他們提供免費(fèi)服務(wù)。如果這個(gè)信息能顯示在一個(gè)隨處可見(jiàn)的光芒四射的 星型圖案 里就再好不過(guò)了。

   

No (stock) photos please

You won’t find any stock photography of smiling support staff on a Web 2.0 site - that’s a tactic favored by small companies trying to mimic large corporations. Simple icons and screenshots are the order of the day when it comes to imagery on Web 2.0 sites. 3D and beveled icons can lend elegance and polish to a page design that is otherwise fairly stark.

　　拜托，不要（商用）照片
　　在web2.0網(wǎng)站，你不會(huì)找到任何一個(gè)微笑服務(wù)員工的商用版權(quán)相片。那是小公司假扮大公司形象慣用伎倆。當(dāng)簡(jiǎn)單的圖標(biāo)和截屏圖片作為Web2.0圖像組成的一部分時(shí)，它成為我們今日的需求。使用立體而有斜邊的圖標(biāo)能帶給頁(yè)面光潔優(yōu)雅的氣質(zhì)，否則就會(huì)顯得僵硬古板。

（Quester注：這一段尤其重要，在charlee的中文翻譯中，將這段理解為“不要照片”，這是很不對(duì)的誤導(dǎo)，原作者只是在強(qiáng)調(diào)對(duì)商業(yè)圖庫(kù)照片的使用說(shuō)不，而不是所有圖片，從Web2.0的參與性中可以理解這一點(diǎn)。）

   

Keep it simple stupid

Most Web 2.0 applications add an additional technological or organizational layer to the user’s web experience. Be it managing links with del.icio.us, sharing photos with flickr, or organizing tasks with Backpack, we have to familiarize ourselves with a new technological process and devote time to managing our content. A good Web 2.0 app ought to be lightweight and easy for users to grasp, and clever visual design and copywriting can help remove barriers to entry.

　　保持簡(jiǎn)單純樸
　　大多數(shù)Web 2.0應(yīng)用程序都會(huì)給用戶體驗(yàn)中添加技術(shù)層面或者管理層面。如用del.icio.us來(lái)管理鏈接，用flickr來(lái)分享照片，或用backpack來(lái)安 排任務(wù)，我們必須要熟悉這些新技術(shù)，并花些時(shí)間來(lái)管理我們的內(nèi)容。一個(gè)好的Web 2.0程序應(yīng)該短小精干并易于上手，而高明的視覺(jué)設(shè)計(jì)和文本能幫助我們?nèi)コ腴T的屏障。

Smart use of layout, color, type and copy can go a long way towards easing the pain.

　　巧妙地運(yùn)用排版，色彩，字體和文本能使用戶長(zhǎng)時(shí)間地保持舒適而減輕痛苦。

Big is beautiful
As far as Web 2.0 is concerned, bigger is definitely better. Bigger text, that is. Large text is easy on the eye, and coupled with snappy copywriting makes information easy to absorb. And now that accessibility is cool, it’s possible to be a hotshot web designer and use enormous type. Admittedly this craze for giant text strays too far into Jacob Nielsen territory for my taste - when a web page’s body text is set at larger than 13 point it looks like a “l(fā)earning to read” book to me!

　　大就是美
　　對(duì)于Web2.0來(lái)講，越大肯定是越好。大的文字就是。大的文字看起來(lái)不累，配合流暢的文字內(nèi)容使得信息容易被吸收。我們現(xiàn)在強(qiáng)調(diào) “無(wú)障礙”溝通才是最酷的，做一個(gè)自命不凡的網(wǎng)頁(yè)設(shè)計(jì)師是可能的，來(lái)用碩大的文字吧！確實(shí)這種用大字體的狂熱跑得太遠(yuǎn)太離譜已經(jīng)不合我的品味――當(dāng)一個(gè)頁(yè) 面得正文字號(hào)大得超過(guò)13磅時(shí)，對(duì)我來(lái)講看起來(lái)象一本低幼識(shí)字課本！

（Quester注：在charlee的中文翻譯中，缺乏后面這段描述，因此會(huì)讓人認(rèn)為真的是“越大越好”）

   

Breathing space

The layout of Web 2.0 sites might be described as minimal. With a focus on legibility and ease of use, good use is made of white space. White space allows important information to stand apart, provides rest for the eye, and imparts a sense of calm and order. Generous leading also makes text copy easier for the eye to follow. Some Web 2.0 layouts are so minimal that they verge on boring, but designed well, an uncluttered page can be incredibly tasteful.

　　呼吸空間
　　Web 2.0網(wǎng)站的排版布局(難度)可說(shuō)是微乎其微。利用好空白可以使重點(diǎn)突出，易讀，易用。空白能讓重要信息凸顯，讓眼睛得以休息，并給予一種安定和秩序的感 覺(jué)。寬松的行間距也讓視線易于跟隨文本流動(dòng)。一些Web 2.0網(wǎng)站的布局簡(jiǎn)單到令人感到無(wú)聊的地步，但若設(shè)計(jì)上出色的話，一個(gè)四平八穩(wěn)的頁(yè)面也能成為絕頂?shù)拿牢洞蟛汀?/P>

  

Clever copy

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.

　　高明的文章
　　友好，活潑的行文方式會(huì)使作者與訪問(wèn)者建立更多良好的關(guān)系。A List Apart 功能讓 Flickr 和 Photojojo脫穎而出就是這方面的一個(gè)好例證，這也是許多web2.0網(wǎng)站付諸實(shí)施的很好一課。WebTango 并不僅是免費(fèi)，它是“無(wú)添加物，無(wú)膽固醇，無(wú)破壞臭氧層的氟利昂，還有最重要的就是，無(wú)收費(fèi)使用”。Tioti不只是有標(biāo)簽和RSS，他有“標(biāo)簽和RSS 奔涌如河流”。 FAQQLY的創(chuàng)始人David Liu不會(huì)不是一個(gè)可以面對(duì)的實(shí)體，他是“你成為注冊(cè)用戶后的第一個(gè)朋友”。還有，工具條在eSnips不只是“靈活”，它是“你能有一大堆超酷用法的工 具條”。你有點(diǎn)子了。

Odds and ends

There are a couple of visual tendencies amongst Web 2.0 sites that don’t seem to answer a particular design problem, but deserve a mention nonetheless. The ‘wet table’ look, ’starbursts’ (also known as ‘flashes’ or ‘violators’), and ‘glass’ buttons, provide a lot of Web 2.0’s eye candy. Apple’s marketing department sure has a lot to answer for.

　　邊角和收尾

　　有大量的視覺(jué)風(fēng)格存在于Web2.0中，它們看起來(lái)并不能解答某一個(gè)特別的設(shè)計(jì)問(wèn)題，盡管如此還是值得一提。“濕桌面”外觀，“星形圖案”（或稱 “星光閃耀”或“入侵者”），還有“玻璃”按鈕，成就了Web2.0的大量“眼睛糖果”（愉悅眼球的玩意）。蘋(píng)果的市場(chǎng)部肯定對(duì)此有許多答案。

    

Conclusion

So that’s my quick tour of the visual design of Web 2.0. Who knows, the “Web 2.0 look” may be out of vogue a year from now, but I think it offers good lessons about effective design for the web that deserve to have a much longer lifespan.

　　結(jié)論

　　這就是我對(duì)Web2.0的視覺(jué)設(shè)計(jì)的快速旅行。誰(shuí)知道呢，也許“Web 2.0外觀”從現(xiàn)在算起一年后就會(huì)過(guò)時(shí)，但是我認(rèn)為它提供了關(guān)于 網(wǎng)站特效設(shè)計(jì) 的一些好課程，這方面值得擁有更長(zhǎng)的生命力。