[設計]Web2.0 的視覺設計
本篇是閱讀 Jonathan 發表於 Pixel Acres 的一篇 The visual design of Web 2.0 (Web2.0 的視覺設計)文章筆記。
自 O’Reilly 提出 Web2.0 這名詞三年後，各式各樣所謂的 Web2.0 網站孕育而出，而網站的視覺設計也慢慢的可以整理出一些規則，Jonathan 的文章就是針對這這方面提出的(Jonathan 說：相信他，因為他就是 Web2.0)。
重點摘錄：
- Green is the new grey (綠色成為新寵)
主旨並不是說 Web2.0 都用綠色，而是說這些新型態的服務網站，喜好用較跳的純色來增強人們的印象。
- Rounded everything (圓角無處不在)
圓角可以提供使用者較舒適與親合的感覺。未來瀏覽器的 CSS 都將支援圓角設計。
- Free, as in beer (免費，象啤酒那樣)
這點比較屬於視覺傳達面，而不是視覺設計面，這是個以免費為基礎的網路時代，所以這點說明強調免費的重要，這點我覺得很保留，因為 Web2.0 較成功的Flickr與del.icio.us根本沒在首頁放一個大大的Free。
- No (stock) photos please (拜託，不要”商用”照片)
主要含意是說不要使用商業圖庫中的圖片，只要一些的圖案、標誌與色塊漸層，就可以豐富整個畫面。(Jonathan 題到使用圖庫是小公司裝大公司的行為，哈~ 哈~)，這點我非常認同，有用過圖庫的朋友，應該會常常在一些別人的作品中看到圖庫的蹤跡吧！這時大部分應該都會笑笑，有時還會相說這圖好像被自己用過(哈)。
- Keep it simple stupid (保持簡單純樸)
大部分 Web2.0 的應用是提供使用者不同層次的需求(管理、分享、社群…)，且不同題材的應用網站很分散，如果太複雜會造成使用者的困擾，當然不同的應用需求層面會不一樣，好的視覺設計就會去屏除這些差異落差，因循舊有好的使用者經驗去開發介面，我想是最安全與低成本的。
- Big is beautiful (大就是美)
說明大尺寸文字使用的趨勢，不管是平面會是網頁設計，往往會把文字尺寸的設定設成小小的，讓版面整體感覺較細緻，但是，進入新的時代如何讓文字容易被吸收，不只是文案的功夫，視覺傳達也是重要的課題，目前很多網站都提供不同尺寸的閱讀文字，讓使用者能有更適合自己的閱讀感覺，這時又有一點非常重要，就是行距。(我內文都是設成 1.5~2 em 文字高)
- Breathing space (呼吸空間)
這點是說明留白(包含行距)的重要性，適當的留白可以突顯主體，但是不適當的留白也可以讓人感到單調乏味。
- Clever copy (高明的文章)
這點是說文案的重要，尤其是入口時的文案，這是網友接觸該網站的第一印象。這跟視覺設計又較沒關係囉！
- Odds and ends (邊角和收尾)
在這段落中點出一些較零散的元素如鏡射的倒影、星型鋸齒邊框、玻璃質感的按鈕…等。
天天觀點：
- 漸層色塊的應用
這是自2000年網路泡沫後，一直被廣泛使用，尤其是之前網頁設計也出現一波韓潮現象。
- Widget 的設計
因應 Blog 的蓬勃發展，各類型的Web2.0網站紛紛推出這些可以放在 Sidebar 的小工具，目前前端以 Flash 及 Javascript 技術為主，我依稀記得我第一個用的 Widget 是Flickr的 badge(須登入)。
- 以CSS為準的網頁設計
以DOM為主的標準化網頁架構，更提升(深化)網頁設計的技術層次。這跟視覺設計較沒直接關係，但是如果要達成某些效果，這就關連上囉！
正如 Jonathan 在總結提到的，抓這些設計訣竅可以讓設計師在設計網頁時事半功倍，當然，隨著時代的演進流行以及技術會物換星移，所以這不是規範，頂多僅是一種感性的統計數據，台灣或是大中化地區不知道有沒有類似的觀察？
我英文不好，所以沒辦法翻譯文章，只提供自己的觀點所以可能會有誤會，下面有原文與大陸朋友翻譯的文章，提供參考。
原文連結：
- The visual design of Web 2.0
- Web2.0 的視覺設計新中英對照 (藍色理想)簡中翻譯
