從模仿到創新:Web 設計中的中國風(上)

0 評論 8351 瀏覽 0 收藏 18 分鐘

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

中國Web設計現狀

我們采訪了6位來自四個大城市的中國設計師,他們講述了國內 Web 設計的現狀與趨勢:

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

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

問題: 如何看待國內 Web 設計現狀?

郭宇:

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

白鴉:

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

吳雋辰:

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

周陟:

有兩點,第一,國內的 Web 設計市場中預算緊張問題很普遍,結果就是,Web 設計最終靠視覺效果吸引人,第一眼可能好看,但信息結構沒有很好地組織,易用性很差;第二,國內的 Web 設計非常本土化,也應該這樣。

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

John Woo:

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

Rex Song:

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

國內 Web 設計概覽

對國內的 Web 設計現狀,我們從訪談中也可以總結出幾個要點。

1. 大量 Flash:生于模仿

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

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

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

盡管對 Flash 的應用源于模仿,但現在,它被越來越多得用在工作室和個人的作品展示網站,新品發布網站,以及那些以年輕人為主的產品的網站上。

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

Cool Bear Hi, 長城汽車的一個產品線,用 Flash 網站促銷新車型。

Image-coolbear in Showcase Of Web Design In China: From Imitation To Innovation

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

Image-coolbear-progress in Showcase Of Web Design In China: From Imitation To Innovation

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

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

下面是該網站 Flash 加載進度截圖:

Image-mian-dian-fang-progress in Showcase Of Web Design In China: From Imitation To Innovation

動畫加載進程模仿酵母發酵,面團越來越大,直到整個網站出來。

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

Lenovo Mobile O1 借 Flash 展示聯想 O1 的功能與特色。

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

Idea Design, 一個設計的設計工作室,全部使用 Flash。

2. 為娛樂而設計

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

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

開心農場
Image-kaixin2 in Showcase Of Web Design In China: From Imitation To Innovation

開心牧場
Image-kaixin3 in Showcase Of Web Design In China: From Imitation To Innovation

開心果園
Image-kaixin4 in Showcase Of Web Design In China: From Imitation To Innovation

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

Lipton Milk Tea 推出一個“連連抱”活動,通過另一個社會網絡人人的帳戶,向你的朋友傳遞擁抱并贏得擁抱點數。

Image-lipton in Showcase Of Web Design In China: From Imitation To Innovation

一旦積累到一定點數,可以用在線購買禮物:

Image-lipton2 in Showcase Of Web Design In China: From Imitation To Innovation

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

Image-mm in Showcase Of Web Design In China: From Imitation To Innovation

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

Image-ilove3g in Showcase Of Web Design In China: From Imitation To Innovation

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

Image-ilove3g2 in Showcase Of Web Design In China: From Imitation To Innovation

3. 為點擊而設計

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

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

Image-yoho in Showcase Of Web Design In China: From Imitation To Innovation

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

Image-chinavisual in Showcase Of Web Design In China: From Imitation To Innovation

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

Image-netease in Showcase Of Web Design In China: From Imitation To Innovation

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

4. 為文化而設計

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

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

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

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

Image-pizzahut-us in Showcase Of Web Design In China: From Imitation To Innovation

McDonald’s China 網站也是,主導航中就包含“歡樂家庭聚餐”。

Image-mcdonalds in Showcase Of Web Design In China: From Imitation To Innovation

Tong2 Studio,使用傳統中國花色做背景,顯得很特別。

Image-tong2studio in Showcase Of Web Design In China: From Imitation To Innovation

Six Station, 主頁使用中國水墨畫風格的 Flash,向客戶傳達創意與創新。

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

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

未完待續

本文作者

本文由 Kejun Xu 和 Hendry Lee 撰寫

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

Henry Lee 幫助人們解決博客經營中的難題,他的博客中有關于博客,網站建設,策略,主機,社會媒體,Web 寫作,設計等話題,他們的團隊還可以幫助個人或公司創建網站,你也可以在?Twiiter 上遇到他。

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

中文授權翻譯來源:銳商企業CMS 網站內容管理系統 官方網站

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!