Web2.0 的視覺設計

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

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

　　另外我覺得中國的設計師需要中英對照的學習，提高國際性，觀念同步，詞匯同步是很重要的，隨后還會有一篇文章進行補充和總結。

The visual design of Web 2.0
Web2.0 的視覺設計

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

　　喬納山 發表于 2006年10月21日，Quester 中文翻譯于 2007年01月15日， 類別關鍵字：排版，圖形設計，網頁設計
原文鏈接：
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.

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

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.

　　過了幾天“視覺元素”的添加條目就被維基成員投票否決并刪除了。反對的原因，我估計是因為沒有一套 視覺標準 能夠準確的定義一些東西，就像Web2.0的特點――如果Web2.0可以理解為一種 信息內容的生成和分發途徑，那就不必束縛于某一種視覺風格。

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站點有著同樣獨特的審美情趣卻是事實。維基百科的編輯也許不認為這是Web 2.0的有價值的部分，但是我卻說很必要！讓我們來看一下面向Web2.0的溝通問題，并看看“Web 2.0外觀”如何幫助解決問題。

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
　　對于web2.0來說，不可或缺的是對網站訪問者輸入的駕馭。用戶能自行創建網站服務的內容，以“病毒”般的點對點流行方式推廣它，并且按照用戶的意見和喜好來完善數據質量。

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.

　　但要說服訪問者為網站程序花費時間和提供數據, 首先需要贏得他們的信任。多數Web2.0站點讓我們覺得友好、平易近人、小規模，它們運用巧妙的設計來贏得大家信賴。

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.

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

   

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.

　　圓角無處不在

　　新的CSS技術支持圓的倒角使得這一風格又熱了起來。友好的圓角效果讓許多web2.0站點符合舒適的，無拘無束的基調。

  

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 圖標的精彩文章，明確表示圓角字體開始全面風靡。這種字體的柔和方式賦予了 企業視覺識別 一種現代的玩樂態度。

   

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.

　　免費，象啤酒那樣

　　如果你已吸引訪問者注冊了你的終極程序，送給他們免費的賬戶而不要心疼。大多數Web 2.0站點花費主要資產來傳達一個信息，那就是：他們提供免費服務。如果這個信息能顯示在一個隨處可見的光芒四射的 星型圖案 里就再好不過了。

   

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網站，你不會找到任何一個微笑服務員工的商用版權相片。那是小公司假扮大公司形象慣用伎倆。當簡單的圖標和截屏圖片作為Web2.0圖像組成的一部分時，它成為我們今日的需求。使用立體而有斜邊的圖標能帶給頁面光潔優雅的氣質，否則就會顯得僵硬古板。

（Quester注：這一段尤其重要，在charlee的中文翻譯中，將這段理解為“不要照片”，這是很不對的誤導，原作者只是在強調對商業圖庫照片的使用說不，而不是所有圖片，從Web2.0的參與性中可以理解這一點。）

   

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.

　　保持簡單純樸
　　大多數Web 2.0應用程序都會給用戶體驗中添加技術層面或者管理層面。如用del.icio.us來管理鏈接，用flickr來分享照片，或用backpack來安 排任務，我們必須要熟悉這些新技術，并花些時間來管理我們的內容。一個好的Web 2.0程序應該短小精干并易于上手，而高明的視覺設計和文本能幫助我們去除入門的屏障。

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

　　巧妙地運用排版，色彩，字體和文本能使用戶長時間地保持舒適而減輕痛苦。

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 “learning to read” book to me!

　　大就是美
　　對于Web2.0來講，越大肯定是越好。大的文字就是。大的文字看起來不累，配合流暢的文字內容使得信息容易被吸收。我們現在強調 “無障礙”溝通才是最酷的，做一個自命不凡的網頁設計師是可能的，來用碩大的文字吧！確實這種用大字體的狂熱跑得太遠太離譜已經不合我的品味――當一個頁 面得正文字號大得超過13磅時，對我來講看起來象一本低幼識字課本！

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

   

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網站的排版布局(難度)可說是微乎其微。利用好空白可以使重點突出，易讀，易用。空白能讓重要信息凸顯，讓眼睛得以休息，并給予一種安定和秩序的感 覺。寬松的行間距也讓視線易于跟隨文本流動。一些Web 2.0網站的布局簡單到令人感到無聊的地步，但若設計上出色的話，一個四平八穩的頁面也能成為絕頂的美味大餐。

  

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.

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

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.

　　邊角和收尾

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

    

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.

　　結論

　　這就是我對Web2.0的視覺設計的快速旅行。誰知道呢，也許“Web 2.0外觀”從現在算起一年后就會過時，但是我認為它提供了關于 網站特效設計 的一些好課程，這方面值得擁有更長的生命力。