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

中國 Web 設(shè)計(jì): Dongpai

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

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

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

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

MFM Moliyo, 一個(gè)游戲網(wǎng)站

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

　　郭宇:

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

　　白鴉:

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

　　吳雋辰:

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

　　周陟:

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

國內(nèi) Web 設(shè)計(jì): Midea Microwave Oven

　　比如，支付寶的成功是因?yàn)榭紤]到了國內(nèi)用戶的心理和購買習(xí)慣，中國是個(gè)大國，有些網(wǎng)站成功是因?yàn)樗鼈冇狭四硞€(gè)特定的地域，這個(gè)問題的另一面就是中國的網(wǎng)站不是很國際化。中國是個(gè)非常大的市場，即使不開拓國際市場也能生存，你可以看到，UCDChina.com 以及很多國內(nèi)站點(diǎn)并沒有英文版，甚至在導(dǎo)航中都沒有。

　　John Woo:

　　國內(nèi)還沒有形成一種獨(dú)特的 Web 設(shè)計(jì)風(fēng)格，因?yàn)橹袊艽螅袊脩粼诤芏喾矫娑挤浅?fù)雜，國外看國內(nèi)的 Web 設(shè)計(jì)會覺得很永久，很花哨，但我覺得這是實(shí)踐。當(dāng) Flash 設(shè)計(jì)時(shí)髦的時(shí)候，很多設(shè)計(jì)師（以及他們的老板）希望用 Flash 讓他們的網(wǎng)站吸引人，當(dāng)社會網(wǎng)絡(luò)在美國興起的時(shí)候，很快就引入了中國，包括 Facebook，Twitter 等的設(shè)計(jì)風(fēng)格。當(dāng)一種東西很實(shí)用的時(shí)候，很多中國人就會借這個(gè)概念把它做下去，百度，QQ，淘寶就是這樣取勝的。

　　Rex Song:

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

Shoebox

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

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

1. 大量 Flash：生于模仿

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　開心農(nóng)場：

　　開心牧場：

　　開心果園：

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

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

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

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

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

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

3. 為點(diǎn)擊而設(shè)計(jì)

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

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

　　同樣，China Visual, 一個(gè)視覺設(shè)計(jì)門戶站點(diǎn)，首頁充滿各個(gè)欄目的文字與圖片鏈接，讓你快速瀏覽網(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ā)生了什么，如果對某條新聞感興趣，點(diǎn)下去就是。John Woo 說，如今，很多網(wǎng)站正在重新整理他們的版面，加大字體，加寬行距以改善閱讀，新浪自1990年代以來一直注重改版，他們在這方面做得越來越好。

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

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

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

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

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

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

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

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

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

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

　　未完待續(xù)

本文作者

　　本文由 Kejun Xu 和 Hendry Lee 撰寫。

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

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

　　本文國際來源：Showcase Of Web Design In China: From Imitation To Innovation

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

it知識庫：從模仿到創(chuàng)新：Web 設(shè)計(jì)中的中國風(fēng)(上)，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。