[設計]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 較成功的Flickrdel.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 是Flickrbadge(須登入)。

  • CSS為準的網頁設計

    DOM為主的標準化網頁架構,更提升(深化)網頁設計的技術層次。這跟視覺設計較沒直接關係,但是如果要達成某些效果,這就關連上囉!

正如 Jonathan 在總結提到的,抓這些設計訣竅可以讓設計師在設計網頁時事半功倍,當然,隨著時代的演進流行以及技術會物換星移,所以這不是規範,頂多僅是一種感性的統計數據,台灣或是大中化地區不知道有沒有類似的觀察?

我英文不好,所以沒辦法翻譯文章,只提供自己的觀點所以可能會有誤會,下面有原文與大陸朋友翻譯的文章,提供參考。

原文連結:

發表迴響