在正式分類講述之前，我還是建議大家去讀一下喬納山的原文，如果你愿意的話，我也給你提供一個我翻譯的版本，我想，這個應(yīng)該比charlee的中文翻譯要好理解一些。
另外我覺得中國的設(shè)計師需要中英對照的學(xué)習(xí)，提高國際性，觀念同步，詞匯同步是很重要的，隨后還會有一篇文章進(jìn)行補充和總結(jié)。
The visual design of Web 2.0
Web2.0 的視覺設(shè)計
Posted by Jonathan on October 21st, 2006 in Typography, Graphic Design, Web Design
喬納山 發(fā)表于 2006年10月21日，Quester 中文翻譯于 2007年01月15日， 類別關(guān)鍵字：排版，圖形設(shè)計，網(wǎng)頁設(shè)計
原文鏈接：
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 條目下有一個子條目是關(guān)于 視覺元素 的。漸變，艷麗的圖標(biā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.
過了幾天“視覺元素”的添加條目就被維基成員投票否決并刪除了。反對的原因，我估計是因為沒有一套 視覺標(biāo)準(zhǔn) 能夠準(zhǔn)確的定義一些東西，就像Web2.0的特點――如果Web2.0可以理解為一種 信息內(nèi)容的生成和分發(fā)途徑，那就不必束縛于某一種視覺風(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站點有著同樣獨特的審美情趣卻是事實。維基百科的編輯也許不認(rèn)為這是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來說，不可或缺的是對網(wǎng)站訪問者輸入的駕馭。用戶能自行創(chuàng)建網(wǎng)站服務(wù)的內(nè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.
但要說服訪問者為網(wǎng)站程序花費時間和提供數(shù)據(jù), 首先需要贏得他們的信任。多數(shù)Web2.0站點讓我們覺得友好、平易近人、小規(guī)模，它們運用巧妙的設(shè)計來贏得大家信賴。
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網(wǎng)站。綠色是web2.0的非官方的色彩，并且高純度的藍(lán)色系，橙色系和粉紅系也同樣倍受青睞。 奔放的主色調(diào)引導(dǎo)了一種嬉戲的，愉快的態(tài)度，并且也有助于將注意力拉回到頁面的重要元素上。
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技術(shù)支持圓的倒角使得這一風(fēng)格又熱了起來。友好的圓角效果讓許多web2.0站點符合舒適的，無拘無束的基調(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)的精彩文章，明確表示圓角字體開始全面風(fēng)靡。這種字體的柔和方式賦予了 企業(yè)視覺識別 一種現(xiàn)代的玩樂態(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.
免費，象啤酒那樣
如果你已吸引訪問者注冊了你的終極程序，送給他們免費的賬戶而不要心疼。大多數(shù)Web 2.0站點花費主要資產(chǎn)來傳達(dá)一個信息，那就是：他們提供免費服務(wù)。如果這個信息能顯示在一個隨處可見的光芒四射的 星型圖案 里就再好不過了。
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)站，你不會找到任何一個微笑服務(wù)員工的商用版權(quán)相片。那是小公司假扮大公司形象慣用伎倆。當(dāng)簡單的圖標(biāo)和截屏圖片作為Web2.0圖像組成的一部分時，它成為我們今日的需求。使用立體而有斜邊的圖標(biāo)能帶給頁面光潔優(yōu)雅的氣質(zhì)，否則就會顯得僵硬古板。
（Quester注：這一段尤其重要，在charlee的中文翻譯中，將這段理解為“不要照片”，這是很不對的誤導(dǎo)，原作者只是在強調(diào)對商業(yè)圖庫照片的使用說不，而不是所有圖片，從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.
保持簡單純樸
大多數(shù)Web 2.0應(yīng)用程序都會給用戶體驗中添加技術(shù)層面或者管理層面。如用del.icio.us來管理鏈接，用flickr來分享照片，或用backpack來安 排任務(wù)，我們必須要熟悉這些新技術(shù)，并花些時間來管理我們的內(nèi)容。一個好的Web 2.0程序應(yīng)該短小精干并易于上手，而高明的視覺設(shè)計和文本能幫助我們?nèi)コ腴T的屏障。
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 “l(fā)earning to read” book to me!
大就是美
對于Web2.0來講，越大肯定是越好。大的文字就是。大的文字看起來不累，配合流暢的文字內(nèi)容使得信息容易被吸收。我們現(xiàn)在強調(diào) “無障礙”溝通才是最酷的，做一個自命不凡的網(wǎng)頁設(shè)計師是可能的，來用碩大的文字吧！確實這種用大字體的狂熱跑得太遠(yuǎn)太離譜已經(jīng)不合我的品味――當(dāng)一個頁 面得正文字號大得超過13磅時，對我來講看起來象一本低幼識字課本！
（Quester注：在charlee的中文翻譯中，缺乏后面這段描述，因此會讓人認(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)站的排版布局(難度)可說是微乎其微。利用好空白可以使重點突出，易讀，易用?？瞻啄茏屩匾畔⑼癸@，讓眼睛得以休息，并給予一種安定和秩序的感 覺。寬松的行間距也讓視線易于跟隨文本流動。一些Web 2.0網(wǎng)站的布局簡單到令人感到無聊的地步，但若設(shè)計上出色的話，一個四平八穩(wěn)的頁面也能成為絕頂?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.
高明的文章
友好，活潑的行文方式會使作者與訪問者建立更多良好的關(guān)系。A List Apart 功能讓 Flickr 和 Photojojo脫穎而出就是這方面的一個好例證，這也是許多web2.0網(wǎng)站付諸實施的很好一課。WebTango 并不僅是免費，它是“無添加物，無膽固醇，無破壞臭氧層的氟利昂，還有最重要的就是，無收費使用”。Tioti不只是有標(biāo)簽和RSS，他有“標(biāo)簽和RSS 奔涌如河流”。 FAQQLY的創(chuàng)始人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.
邊角和收尾
有大量的視覺風(fēng)格存在于Web2.0中，它們看起來并不能解答某一個特別的設(shè)計問題，盡管如此還是值得一提?！皾褡烂妗蓖庥^，“星形圖案”（或稱 “星光閃耀”或“入侵者”），還有“玻璃”按鈕，成就了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.
結(jié)論
這就是我對Web2.0的視覺設(shè)計的快速旅行。誰知道呢，也許“Web 2.0外觀”從現(xiàn)在算起一年后就會過時，但是我認(rèn)為它提供了關(guān)于 網(wǎng)站特效設(shè)計 的一些好課程，這方面值得擁有更長的生命力。
]]>顏色的變化跟人類的智慧一樣,是無窮的,每個階段都會有流行的色彩,有屬于一個時代的顏色!WEB2.0是一個概念,它宣揚,定位了一些東西,以用戶為中心,群體智慧,分享等等,等等.同時順應(yīng)這些需求,一些頂尖的設(shè)計師和開發(fā)者賦予并領(lǐng)導(dǎo)了一些色彩流行趨勢.我憑感覺做了部分歸納和收集,心理沒大有底,把能想到的列出來希望跟大家一起探討>>再做補充吧!
★淡淡的淺色系及延伸應(yīng)用
此類顏色似乎最早被應(yīng)用在一些文檔處理軟件比如word,和操作系統(tǒng)里(比如MacOSX)用于分類歸檔,標(biāo)記,或者突出顯示使用.此類顏色給人的感覺很環(huán)保,不傷眼睛,而且對比度恰到好處,既可以有效區(qū)分,又不會顯的太過突兀.
google,Yahoo更為成熟的運用了這些顏色.MSN在新版網(wǎng)站中也設(shè)置了Simple White主題選擇,并且新的LIVE系列產(chǎn)品更是對那種淡淡的蘭色與1PX線條情有獨忠~另外一些新興的WEB-base辦公軟件也大量選用了此類顏色!事實證明,這些顏色的運用取得了大部分用戶的認(rèn)可并領(lǐng)導(dǎo)了趨勢!
例子：GMail,yahoo360,live.com,start.com,netvibes,rember the milk
★柔軟舒適的過度色
BR>
此類顏色不知道跟WEB標(biāo)準(zhǔn)的流行有沒有關(guān),包括一些優(yōu)秀的CSS陳列館網(wǎng)站,還有著名的simplebit的設(shè)計作品,都大量運用了這種柔軟的過度色,包括blog的一些優(yōu)秀THEME 也會經(jīng)?？吹?這讓人想到蘋果水晶效果的轉(zhuǎn)變,從最新的TIGER系統(tǒng)中我們可以發(fā)現(xiàn),蘋果在逐漸弱化那種清澈通明的水晶和金屬拉絲效果,而向更直觀硬朗的過度色做轉(zhuǎn)變!說白了就是越來越simple而不是玩那么多花樣.
例子：rollyo odeo