Web 2.0 的視覺設計

前一陣子維基百科的Web2.0條目包含了一節內容,專門描述Web 2.0的視覺元素,講述了漸變色、絢麗的圖標、反射效果、陰影以及大號字體等等。

但是幾天之後維基人投票決定撤掉“視覺元素”這一部分。推究其原因,可能是Web 2.0的特性不能通過一系列的視覺規則來精確地定義。如果 Web 2.0 被理解爲一種內容生成和發佈的途徑,那就沒必要將其禁錮在視覺效果的框框裏。

儘管如此,事實上大多數 Web 2.0 網站都有某種獨特的藝術風格。也許維基人覺得這不屬於Web 2.0的討論範疇,但我卻認爲這十分必要。讓我們開始 Web 2.0 的視覺之旅,看看所謂“Web 2.0風格”起着怎樣的作用。

請相信我是Web 2.0

完美的 Web 2.0 依靠着訪問者的力量。用戶可以爲Web服務製造內容,通過流行的點對點方式像“病毒”一樣傳播,並依照他們的意願和喜好來提高內容的質量。

但是要讓訪問者爲Web應用程序付出時間和內容,首先需要讓他們相信你。爲獲取人們的信任,絕大多數 Web 2.0 網站都通過絕妙的設計給我們帶來了友好、親切的印象。

春風又綠江南岸

明快的顏色得到了 Web 2.0 網站的青睞。大部分 Web 2.0 網站不約而同地採用了綠色,但是深藍、橙色和粉紅色也十分人氣。濃重的主色調錶明瞭幽默的態度,也有助於人們迅速注意到頁面上的重要元素。

Web 2.0 配色1 Web 2.0 配色2 Web 2.0 配色3 Web 2.0 配色4

圓角革命

新的CSS技術支持圓角,使得圓角風格再次風靡世界。友好的圓角風格奠定了許多 Web 2.0 網站的舒適、通俗的基調。

Web 2.0 圓角1 Web 2.0 圓角2 Web 2.0 圓角3

FontShop有一篇分析 Web 2.0 圖標的精彩文章,表明了圓角字體已成爲流行趨勢。它爲一個公司的視覺形象帶來了十分現代的風格。

Web 2.0 圓角文字1 Web 2.0 圓角文字3 Web 2.0 圓角文字2 Web 2.0 圓角文字4

免費無處不在

如果你已吸引訪問者註冊了你的應用程序,那麼你應當毫不吝惜地送他們免費的賬戶。幾乎所有的 Web 2.0 網站都將主要的經費奉獻給了一條消息——“我們提供免費服務”。若這條信息出現在無處不在的星形標記中就更好了。

Web 2.0 免費1 Web 2.0 免費4 Web 2.0 免費2 Web 2.0 免費3

照片爲大忌

在 Web 2.0 網站上,你找不到任何照片——那是小公司模仿大企業的伎倆。簡潔的圖標和截圖,當這些成爲 Web 2.0 網站的形象時,它們就成了今天的規則。三維圓角按鈕會讓頁面變得高貴優雅,不使用則顯得古板僵硬。

Web 2.0 圖標3 Web 2.0 圖標1 Web 2.0 圖標4 Web 2.0 圖標2

簡單就是美

爲提高用戶體驗,大部分 Web 2.0 應用程序都添加了技術層面或者組織層面,例如用 del.icio.us 管理鏈接,用 flickr 共享照片,或者用 Backpack 組織任務等,我們必須要熟悉這些新技術,並花些時間來管理我們的內容。好的Web 2.0程序應該十分輕快並易於上手,而巧妙的視覺設計和文字有助於減少入門障礙。

巧妙地利用佈局、顏色、輸入和文本可以最大限度地減小訪問者的負擔。

越大越好

談起 Web 2.0 當然是越大越好。這裏指的是大號字體。大號文字省眼,與流利的書寫配合使得信息更容易吸收。如今,網站的可訪問性十分重要,因此有經驗的網頁設計師可以使用超大文字。

Web 2.0 大號字體1 Web 2.0 大號字體2 Web 2.0 大號字體3 Web 2.0 大號字體4

空白的活力

Web 2.0 網站的佈局可以做得很小。巧妙利用空白可以提高頁面的易讀性和易用性。空白可以分離出重要信息,使眼睛得到休息,並給人以冷靜和有秩序的感覺。寬敞的文字佈局也使得文字複製更容易。有些 Web 2.0 佈局小得近乎無法忍受,但如果設計得好,緊湊的頁面也會值得深深品味。

Web 2.0 空白4 Web 2.0 空白1 Web 2.0 空白2

好點子

友好、風趣的書寫可以讓作者和訪問者建立良好的關係。A List Apart使得FlickrPhotojojo脫穎而出,這是個許多Web 2.0網站都應該學習的案例。WebTango不僅僅是免費,它提倡的是“free of additives, cholesterol, ozone-depleting CFCs, and most importantly, free to use(無添加物,無膽固醇,無破壞臭氧層的氯氟烴,最重要的是,免費)”。Tioti不只是擁有標籤和RSS,它擁有的是“tagging and RSS up the yazoo”。FFAQQLY的創立者David Liu不是一個不露面的虛擬任務,而是“你註冊後的第一個朋友”。eSnips的工具條不只是可定製,它是“有一大串超酷用法的工具條”。想個好點子吧。

意猶未盡

Web 2.0 網站有很多視覺設計傾向,乍一看似乎並沒有某種固定的模式,但無一不在追求注意力。“溼桌子”效果(charlee注:反射效果)、“星形”效果、“玻璃”按鈕,造就了衆多的 Web 2.0 的綺麗。

Web 2.0 意猶未盡4 Web 2.0 意猶未盡5 Web 2.0 意猶未盡2 Web 2.0 意猶未盡1

總結

我的 Web 2.0 視覺設計之旅就到此結束了。也許“Web 2.0風格”會在一年後過時,但它一定會爲延長網站壽命做出巨大的貢獻。

 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章