[設計]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 的視覺設計新中英對照 (藍色理想)簡中翻譯