中國是個擁有5000年文明史的多民族國家，地域與文化延伸亞洲大部，漢風(fēng)與漢字多被日本，韓國，越南等鄰國采用。中國曾經(jīng)興衰，如今大門重開，接納來自世界的風(fēng)潮，概念與技術(shù)，也包括Web技術(shù)。本文采訪了6位中國知名設(shè)計師，講述了中國Web設(shè)計業(yè)從模仿到創(chuàng)新的歷程。

中國Web設(shè)計現(xiàn)狀

我們采訪了6位來自四個大城市的中國設(shè)計師，他們講述了國內(nèi) Web 設(shè)計的現(xiàn)狀與趨勢：

• 郭宇
  百度前首席設(shè)計師，現(xiàn)居北京
• 白鴉
  UCDChina 合伙創(chuàng)始人，支付寶產(chǎn)品設(shè)計師，現(xiàn)居杭州
• 吳雋辰
  UCDChina 合伙創(chuàng)始人，途牛旅游網(wǎng)的產(chǎn)品主管，現(xiàn)居南京
• 周陟
  美術(shù)設(shè)計師，CK Telecom 的 UI 設(shè)計主管，《UI進化論-移動設(shè)備人機界面設(shè)計》的作者，現(xiàn)居深圳。
• John Woo
  Google 中國的用戶體驗團隊主管，現(xiàn)居北京。
• Rex Song
  UCDChina 合伙創(chuàng)始人，互聯(lián)網(wǎng)產(chǎn)品設(shè)計與架構(gòu)師，現(xiàn)居北京。

訪談通過電話，Skype 和 Google Talk 進行，采訪內(nèi)容事先已發(fā)給他們，但實際采訪中有部分隨機問題，為了讓他們暢所欲言，我們的問題并不僅限于 “Web 設(shè)計”，除了美工，CSS，前端設(shè)計外，還涉及后臺設(shè)計，架構(gòu)，設(shè)計理論，文化元素，用戶體驗等。

問題: 如何看待國內(nèi) Web 設(shè)計現(xiàn)狀?

郭宇:

中國的網(wǎng)民30歲以下的大約占70%，他們年輕，開放，容易接受新生事物。他們喜歡在線玩游戲，娛樂，因此，你會在很多國內(nèi)網(wǎng)站上看到吸引視線的東西，來迎合這一類型的用戶。

白鴉:

大約兩年前，我們見識了國內(nèi)大量模仿韓國 Flash 網(wǎng)站的風(fēng)氣，花里胡哨的設(shè)計曾一度成為風(fēng)潮。但隨著 Web 2.0 的到來，國內(nèi)網(wǎng)站開始改善。用戶更注重內(nèi)容而不是單純的視覺效果，視覺效果已經(jīng)不能取悅國內(nèi)的用戶，他們要的是有用的內(nèi)容，同時，也希望提供自己的內(nèi)容。

吳雋辰:

事情在改善，變得越來越好，但是一種螺旋上升。從 Web 知識和技術(shù)來講，國內(nèi)的設(shè)計師和國外的處于同一水平，但他們并沒有真正用好這些知識，比如，用戶調(diào)查，很多設(shè)計師知道卻很少在實際設(shè)計中做，他們知道易用性測試，卻幾乎不做。

周陟:

有兩點，第一，國內(nèi)的 Web 設(shè)計市場中預(yù)算緊張問題很普遍，結(jié)果就是，Web 設(shè)計最終靠視覺效果吸引人，第一眼可能好看，但信息結(jié)構(gòu)沒有很好地組織，易用性很差；第二，國內(nèi)的 Web 設(shè)計非常本土化，也應(yīng)該這樣。

比如，支付寶的成功是因為考慮到了國內(nèi)用戶的心理和購買習(xí)慣，中國是個大國，有些網(wǎng)站成功是因為它們迎合了某個特定的地域，這個問題的另一面就是中國的網(wǎng)站不是很國際化。中國是個非常大的市場，即使不開拓國際市場也能生存，你可以看到，UCDChina.com 以及很多國內(nèi)站點并沒有英文版，甚至在導(dǎo)航中都沒有。

John Woo:

國內(nèi)還沒有形成一種獨特的 Web 設(shè)計風(fēng)格，因為中國很大，中國用戶在很多方面都非常復(fù)雜，國外看國內(nèi)的 Web 設(shè)計會覺得很永久，很花哨，但我覺得這是實踐。當(dāng) Flash 設(shè)計時髦的時候，很多設(shè)計師（以及他們的老板）希望用 Flash 讓他們的網(wǎng)站吸引人，當(dāng)社會網(wǎng)絡(luò)在美國興起的時候，很快就引入了中國，包括 Facebook，Twitter 等的設(shè)計風(fēng)格。當(dāng)一種東西很實用的時候，很多中國人就會借這個概念把它做下去，百度，QQ，淘寶就是這樣取勝的。

Rex Song:

中國人口眾多，多多益善也適合 Web 設(shè)計領(lǐng)域，你可以看到，很多國內(nèi)的網(wǎng)站非常擁擠，設(shè)計者希望把所有東西都堆到一個頁面。另一方面，中國多數(shù)網(wǎng)民上網(wǎng)的目的是娛樂，因此，國內(nèi)的設(shè)計者喜歡將他們的網(wǎng)站搞得很好玩，很社會化，很有視覺吸引力，就像2004年前后我們紛紛模仿韓國 Flash 網(wǎng)站一樣。

國內(nèi) Web 設(shè)計概覽

對國內(nèi)的 Web 設(shè)計現(xiàn)狀，我們從訪談中也可以總結(jié)出幾個要點。

1. 大量 Flash：生于模仿

Flash 設(shè)計多年來一直受到爭議，事實上，一些設(shè)計師主要是因為 Flash 不便 SEO 而棄用。然而，訪談中，F(xiàn)lash 再次被頻繁的提到，回到2004年，當(dāng)韓國網(wǎng)站一色都是 Flash 的時候，中國的設(shè)計師和客戶認(rèn)為 Flash 很時尚，Rex Song 提到，在 Flash 大紅大紫的年代，你甚至可以花一點錢直接下載完整的 Flash 網(wǎng)站模板。

Google 以簡潔著稱，但比較一下?Google China 和 Google US 就能看多一些細微的差別：

Google 中國的設(shè)計比 Google 美國更活潑一些，加入了動畫效果，順便說一下，這個效果最先是用在 Google 韓國和日本網(wǎng)站的，不過后來都換成了那種靜態(tài)頁面。

盡管對 Flash 的應(yīng)用源于模仿，但現(xiàn)在，它被越來越多得用在工作室和個人的作品展示網(wǎng)站，新品發(fā)布網(wǎng)站，以及那些以年輕人為主的產(chǎn)品的網(wǎng)站上。

Shanghai Vive 是一個老上?；瘖y品品牌，現(xiàn)在被重新挖掘出來用于高端化妝品，該站點大量使用 Flash 以展示優(yōu)雅和高尚的生活。

Cool Bear Hi, 長城汽車的一個產(chǎn)品線，用 Flash 網(wǎng)站促銷新車型。

考慮到那些低速上網(wǎng)的用戶，該網(wǎng)站在加載 Flash 的時候，進度顯示做得很好。

在 Flash 加載過程中，在不同的進度，顯示不同的消息來安撫用戶的等待，上面是加載過程截圖。

Mian Dian Fang, 一家即食早餐公司，其公司網(wǎng)站也大量使用 Flash。動畫中，饅頭包子一起做早操，以顯示該公司的健康食品理念。

下面是該網(wǎng)站 Flash 加載進度截圖：

動畫加載進程模仿酵母發(fā)酵，面團越來越大，直到整個網(wǎng)站出來。

Shoebox, 國內(nèi)的一個年輕人鞋品牌，整站使用 Flash 以彰顯時尚感。素描圖案，舊報紙背景構(gòu)成 Shoebox 理念，生活的品位，簡單，運動，時尚。

Lenovo Mobile O1 借 Flash 展示聯(lián)想 O1 的功能與特色。

Artlans, 是一個交互設(shè)計工作室，主要是菜單按鈕，點擊按鈕，以及語種轉(zhuǎn)換按鈕。設(shè)計工作室一般不愿整站使用 Flash，而是在某些主要的位置，借 Flash 顯示他們 Flash 技巧。

Idea Design, 一個設(shè)計的設(shè)計工作室，全部使用 Flash。

2. 為娛樂而設(shè)計

我們喜歡這種一對一的訪談，可以從每個人聽到不同故事，也可以從多個人聽到同一個故事，比如，白鴉，周陟，郭宇以及 Rex 都提到了國內(nèi) Web 設(shè)計中的娛樂化傾向，白鴉說，當(dāng)社會網(wǎng)絡(luò)進入中國，它必定成為一個游戲站點。

一個很好的例子就是開心網(wǎng)的偷菜功能，開心在導(dǎo)航以及用戶交互方面從 Facebook 借鑒了很多東西，但不同是，它允許你經(jīng)營開心農(nóng)場，建房子，種菜，并從你朋友那里偷菜。有些玩家甚至用 Excel 表格記錄他的好友的收獲季節(jié)以便及時去偷，這個游戲和普通游戲沒有兩樣，但內(nèi)嵌在一個社會網(wǎng)絡(luò)網(wǎng)站中，可以很更多人一起玩。偷菜在國內(nèi)如此流行甚至驚動了文化部，迫于壓力，這個游戲現(xiàn)在改名摘菜菜，摘菜在中國文化中顯得不那么刺耳，但玩家們?nèi)韵矚g那個更貼切的名字，偷菜。

開心農(nóng)場

開心牧場

開心果園

最近，這個程序被添加到 Facebook，但目前只用于中文用戶。

Lipton Milk Tea 推出一個“連連抱”活動，通過另一個社會網(wǎng)絡(luò)人人的帳戶，向你的朋友傳遞擁抱并贏得擁抱點數(shù)。

一旦積累到一定點數(shù)，可以用在線購買禮物:

M&M China 也使用了一個類似的在線傳遞游戲鼓勵用戶前來訪問。

I Love G3, 中國移動的一個促銷3G 網(wǎng)絡(luò)和3G 手機的站點，使用 Flash 動畫游戲讓用戶參與

當(dāng)你回答完一系列諸如“你在火車上如何消磨時光”之類的問題，系統(tǒng)會分析出你的性格并推薦適合你的3G手機。

3. 為點擊而設(shè)計

和拉丁以及德語系不同，中文是象形文字，在字母鍵盤上打漢字很慢，尤其對中老年用戶，所以，你會看到國內(nèi)的很多網(wǎng)站非常擁擠，圖文鏈接到處都是，就像Rex Song 所說的多多益善。這些網(wǎng)站是為點擊而設(shè)計的，不同于為搜索而設(shè)計（盡管關(guān)鍵詞搜索對任何信息類站點來說都是必要的）。

Yoho, 一個面向年輕人的在線購物站點，頁面上密密麻麻都是促銷產(chǎn)品。雖然右上角也有搜索框，但既然有這么多東西，干脆還是一路點擊吧。

同樣，China Visual, 一個視覺設(shè)計門戶站點，首頁充滿各個欄目的文字與圖片鏈接，讓你快速瀏覽網(wǎng)站的內(nèi)容。

NetEase (就是 163.com), 國內(nèi)四大門戶之一，把中國式 Web 瀏覽風(fēng)格發(fā)揮到極處，到處都是鏈接。

上圖是網(wǎng)易的首頁截圖，這篇文章撰寫期間正逢中國春節(jié)的臨近，可以看到，網(wǎng)站使用了紅色作為背景，網(wǎng)頁中充滿了新聞標(biāo)題與廣告，你可以在頂部搜索，但看完全頁，你大概已經(jīng)知道今天發(fā)生了什么，如果對某條新聞感興趣，點下去就是。John Woo 說，如今，很多網(wǎng)站正在重新整理他們的版面，加大字體，加寬行距以改善閱讀，新浪自1990年代以來一直注重改版，他們在這方面做得越來越好。

4. 為文化而設(shè)計

當(dāng)被問及世界可以從中國 Web 設(shè)計中學(xué)到什么的時候，周陟不假思索地說，“文化。中國崇尚道家思想，我們有自己的一套價值和習(xí)慣，面向中國市場的 Web 設(shè)計應(yīng)該遵從中國用戶的在線習(xí)慣和審美。比如，我們的文化符號，書法以及節(jié)日，都可以用用到 Web 設(shè)計中，一個湖泊不過如此，但加上神話故事就不一樣了?！?/p>

確實如果在一個湖泊中加入神話故事和人的感觸，人們對它的印象就會改變。

在講到文化差異時，Pizza Hut China 是我喜歡用到的一個例子，整站體現(xiàn)濃濃的中國味，從配色，到家庭主題。暖紅加黃是中國節(jié)慶的顏色，而家庭餐在中國很受重視。

相反，Pizza Hut US 則強調(diào)快餐和在線訂購，紅色仍然是必勝客的主題色，但相比中國的暖紅，顯得更硬，更暗，更冷。

McDonald’s China 網(wǎng)站也是，主導(dǎo)航中就包含“歡樂家庭聚餐”。

Tong2 Studio，使用傳統(tǒng)中國花色做背景，顯得很特別。

Six Station, 主頁使用中國水墨畫風(fēng)格的 Flash，向客戶傳達創(chuàng)意與創(chuàng)新。

Dongpai Design, 一個交互設(shè)計工作室，他們有一個小站點，用三國故事來傳達他們的設(shè)計理念。

盡管 John Woo 指出在設(shè)計中借用中國元素并不只限于 Web 設(shè)計，但他承認(rèn)中國 Web 設(shè)計中的實踐性，設(shè)計師們將他們認(rèn)為有用的任何東西都借用到設(shè)計中。

未完待續(xù)

本文作者

本文由 Kejun Xu 和 Hendry Lee 撰寫

Kejun Xu, 信息架構(gòu)師，致力于用戶體驗研究；一位用戶研究者，研究以用戶為中心的設(shè)計；Web 易用性工程師，翻譯，樂于跨文化交流。她為用戶而設(shè)計，讓她的用戶更輕松。她偶爾寫寫博客，關(guān)于?UXRnD，或者記記有關(guān)車零件，以及裸鉆的雜事。

Henry Lee 幫助人們解決博客經(jīng)營中的難題，他的博客中有關(guān)于博客，網(wǎng)站建設(shè)，策略，主機，社會媒體，Web 寫作，設(shè)計等話題，他們的團隊還可以幫助個人或公司創(chuàng)建網(wǎng)站，你也可以在?Twiiter 上遇到他。

本文國際來源：http://www.smashingmagazine.com/2010/03/15/showcase-of-web-design-in-china-from-imitation-to-innovation-and-user-centered-design/

中文授權(quán)翻譯來源：銳商企業(yè)CMS 網(wǎng)站內(nèi)容管理系統(tǒng) 官方網(wǎng)站