中國前沿:2015 Web設計趨勢(譯)

一個外國從業者對中國Web設計趨勢的一些洞察:

原文地址

快速變化的網絡產業和飛速發展的中國總是有很多相似之處:其中一件事就是,你很難把握住它們的脈搏。但是當你把它倆放在一起考慮的時候,你會發現,現在中國的科技產業,變化如此之快以至于保持競爭力的唯一希望就是盡可能的看到更長遠一點的未來,并嘗試去預測將會發生什么,并提前做好迎接它的準備。

毫無疑問:中國的網絡在某些方面和你所熟知的網絡是不同的——主要表現在2-3個至關重要的方面——而且用戶對網絡的期望也是和西方完全不同的。在這篇文章里,我會研究一下所有專業的從業者在進入中國市場之前都應該了解的問題。其中包括手機(只用手機)社交平臺是如何革命性的成為了中國網絡的新的前沿陣地。以及目前在中國做那些優秀的網站的都是哪些人。

一種新形勢

為了能更準確的找到對的方向,我順便拜訪了SaberZou,一個整天在為這個入口工作的人。Saber現在是LogicDesign的創意總監,LogicDesign是一家坐標于北京的交叉學科數碼設計實驗室,目前正在做亞洲動物基金的創意網站設計Exploring Moonbear,視覺上最雄心勃勃的網站之一,也是贏得Awwwards當日最佳網站獎的屈指可數的中國設計的網站之一。

下圖為Saber Zou正在測試Logic Design的官網

“所以,你是怎么看待中國在支持響應式設計方面的進展呢?”

Saber對著我聳了聳肩,就像我問錯了問題一樣。“在中國沒有太多的響應式設計的網站,中國的客戶們更喜歡為不同的設備設立單獨的站點。至于響應式,我們不用那種方式來構建網站,我們不認為桌面版本的網站是一個母體,或者是手機版網站的增大號版本。實際上,絕大多數的中國公司都完全繞過桌面版的體驗了。”

我不知道為什么當所有的證據都擺在我面前的時候我轉變我的西方式的觀點還花了這么長時間。不過Saber的話確實達到效果了。形勢完全轉變了:我們來了,以一種側面包抄的形式帶著一種堅定的移動先行的體驗來了。但是在中國,手機并不是桌面瀏覽器爆炸式增長并自我了結生命后的產后,他們是分開的,他們從一開始就是分開的。如今,電腦版本甚至已經退居三線了,成為了一個備選的平臺。

移動先行?拜托,中國只有移動版好么?

你肯定一直都有聽說,也將繼續聽它個好幾年:中國的手機使用人數簡直逆天。早在2010年的時候Nielsen的報告數據就顯示“中國同時段使用手機接入互聯網的人數已經超過美國”。這個市場只會越來越大。2014年7月的一篇來自NextWeb的文章也加入了大肆報道這種現象的媒體大軍。

到2014年6月,使用移動設備接入互聯網的中國用戶的比例已經達到83.4%,首次超過PC設備的80.9的占比。

“但西方世界每個人都有個智能手機”你會這么想。你也有一個,不是嗎?你可能都不知道誰沒有,所以對你來說很難想象在一個飽和的狀態下繼續增長是什么景象,或者中國用戶和非中國用戶的區別到底具有怎樣深刻的含義。是的,盡管這樣,我想說的兩者的不同不僅僅在于手機用戶的數量而已,我想說的是手機對于兩者的重要性的不同。幾乎沒有數據來支持我的這個觀點,但是還是有一些明顯的證據的,以下提供的是基于我個人經驗的一些論據:

1. 在中國,人們的手機號碼簡直就像美帝人民的社會保險號碼一樣的重要。如果你丟了你的手機號碼,你也就幾乎相當于不能進你電商賬號、數字錢包、社交網絡賬號(這些都是直接與手機號綁定的)等等。正是因為這,人們都特別小心的將自己的手機號與身份證號綁定在一起,以防止身份竊賊,同時也方便在SIM卡丟失或被毀之后找回手機號碼。

2. 大部分的中國網站用手機號碼代替郵箱,來做基本的登錄認證和密碼找回服務——這跟郵箱服務在中國不是特別普及有關,但在西方國家卻很普遍。

下圖為淘寶的密碼找回流程,淘寶是中國最大使用率最高的網站之一:“請輸入手機號/會員名/郵箱”

3. 對于中國的某些數字錢包來說,用戶掃描二維碼就可以立即支付任何東西,從一個城市的出租車到一頓豪華晚宴再到一場電影,支付是唯一的一個步驟。他們甚至不需要輸入密碼,就連300元(人民幣)以下的支付都不需要身份驗證(快捷支付)。情況就是這樣,所以丟了手機就跟丟了錢包一樣嚴重。

4. 世界銀行的數據顯示,到2011年,中國每1000人中有69人擁有機動車輛(汽車,卡車,貨車),同時期美國的數據為每768/1000,所以你可以想象有多少沒有車的中國人每天乘坐公共交通工具上下班了——這也意味著有大量的時間片段來盯著手機屏幕了,還可以避免看到坐你對面的女孩挖耳屎的尷尬動作XD~

在這樣一種極致的依賴手機的文化中,就不難理解為什么那么多的公司很心安理得的拋棄PC,轉而創造專為手機而生的用戶體驗了,即使與之對應的PC端的體驗一點都不友好。這種體驗有一個名字——“輕應用”——這種方式很快就變成了與用戶進行親密互動的最流行的方式。

輕應用

網站看起來是那么的2010(過時)。2015年,中國的公司們都在建立輕應用。輕應用是一次性的,不需要下載,通常是用HTML5構建的迷你站點定向超鏈接。噢,當然他們有一個專用的URL,他們也可以在桌面瀏覽器上使用如果你堅持要那么做的話,不過在桌面屏幕上他們會看起來丑點。有些頁面甚至在加載了之后就一點也不能工作了。

輕應用設計出來主要是為了一段時間內的關注度。他們通常是一個單頁面,傳遞一個單一的信息,并且就打算只用一次。換句話說就是,用戶打開一個輕應用,然后瀏覽一下,理想情況下會用手機分享給朋友們,然后就再也不會管它了。

瘋狂擴張的輕應用

LiveAPP(微信)是一個中國的公司,擅長應用程序開發,輕應用的數量之廣也是它業務面鋪的廣的一個證明。

下面是對中國輕應用的一個小小的取樣。有兩個方式可以在你的手機上加載這些輕應用:中國式的是掃一下二維碼,然后自動在手機上加載網址;或者非中國式的,直接輸入URL地址直接鏈接。如果你想在桌面瀏覽器上加載的話,他們可能可以加載出來,但是估計工作不順暢,或者壓根不能工作。我建議你去多嘗試幾次用桌面瀏覽器加載定向的URL,感受一下這些輕應用們有多么的無視桌面瀏覽器的體驗。

品牌可能會創建一個輕應用來分享年度財報,例如這個是來自獵豹移動(掃描二維碼直接進入鏈接):

下面這個是來自移動制造業大佬小米的招聘需求:

有些輕應用是為了慶祝里程碑,像這個是聯想為慶祝30周年而做的:

有些是為了電影提前預熱,像下面這個是一個測試小游戲,測試你對中國導演姜文到底有多了解:

有些是為特定的新聞事件而做的,像這個就是網易新聞客戶端為回顧2014年的航空災難所做的輕應用頁面:

想要更多的中國輕應用?

要記住,因為輕應用總是傾向于短期使用。所以這些網站的鏈接將在一段時間內降低,幸運的是,有很多是上漲的。在微信平臺上看更多輕應用的案例,或者在社交移動風云榜上看(在手機上體驗最好),或者查看這個網站(移動及數字媒體)經常有輕應用的演示。

喚起行動的點是“分享”而不是“購買”

當你看完一個輕應用以后,你通常都只是被“慫恿”進行分享——直接的明顯的變現行為是非常少見的。跟西方用戶的分享功能不同,中國的輕應用通常都是被限制分享到指定好的某個平臺上。中國用戶只是被引導在一個網絡社區里分享:這個頻率在中國的手機網絡社區高達83%,但在西方國家網絡社區上討論的頻率更高一些。

微信:月活躍用戶5億,引導輕應用革命

從CNNIC(中國互聯網絡信息中心)的數據得知,中國有5.27億移動互聯網用戶,其中4.38億都在用微信。這幾乎是Twitter月活躍用戶的兩倍。

你可能經常問你的朋友怎么才能更方便的聯系到他,email、Google+、Twitter、Facebook或者是SMS,但是在中國,這種社交網絡分立的狀態不存在,什么是聯系你的最好方式,在中國不是個問題。這不是說中國只有一個社交網絡,而是盡管有很多其他的平臺和選擇在那,某個社交平臺還是保持絕對的中心地位,就像一張網絡大傘,占據了用戶們的大部分閑余時間,抓住了這個國家的大部分的用戶。

過去的時日,這個社交網絡叫騰訊QQ。然后是新浪微博(中國Twitter)

“但是微博”Saber說,“已經成為了一個人們去閱讀新聞和被動消費信息的地方了,他已經不像以前那么流行了。”

在今天的中國,最當紅的社交網絡是騰訊的WeChat,中國人習慣稱之為微信。微信自2011年推出,是一個只能用于手機的社交網絡,微信的功能有發短信(聲音和文字),群聊,一個跟Facebook一樣的時間線的動態(叫做“朋友圈”),陌生人交友(微信的“附近”功能列出了所有距離上理你很近的人)和一大堆表情。那些對web設計和開發最感興趣的那群人,微信也有一個本地的瀏覽器,甚至為開發者們提供了API接口。

Du HaiHang,他的英文名是Seah,是一名數碼創意設計師和開發者,他主要致力于品牌建設和先進的互動體驗,也是Activation Nodeplus的首席設計師。Activation Nodeplus是一家總部在上海的前沿的設計工作室。就像Saber一樣,Seah致力于創造性的實驗,他也是唯一一個獲得兩屆獨特Awwwards獎的人。做為廣受贊譽的本地及國際設計專家,Seah就是那個創造性的大腦,對來自中國的最具創意的工作保持高度的敏銳和響應。

下圖是Du Haihang最近接受FWA采訪的信息。

3-4年以前,品牌都花費大量預算在Flash做的網站上,但今天不是了,現在他們的預算都轉移到微信上了。這個轉變在Flash消亡和iPhone開始盛行的時候就開始了,web的設計也自然而然就跟隨者這個趨勢了。如果你的站點在微信上看起來很糟糕,那它就根本沒有市場價值。

輕應用和微信

微信是這么的火爆,以至于輕應用們都幾乎只為了微信內置的瀏覽器而做體驗優化,在這些輕應用的界面上唯一的行動指令也是“分享到朋友圈”。

“我看過太多的手機開發者不得不為了各種各樣的瀏覽器做測試的苦逼文章”,微信專家Thomas Graziani說,北京社會營銷公司的創始人,據我所知是第一家為入華外企提供一站式量身定制微信解決方案的公司。“在中國,我們只需要在微信瀏覽器上測試我們的輕應用,如果能正常工作,接下來就容易了。這就是通用平臺。”

雖然騰訊只為微信的管理平臺提供中文的界面,但Thomas的團隊已經為非中文的市場打開了金大門,他們建立了一個多語言的賬號管理界面(目前只支持中文和英文,但不久會增加)可以直接和微信的API對接。Thomas這么說:

公司們對這種專門經營建設微信上的體驗很開心,因為他們這樣能得來比其他平臺多得多的用戶數據。當一個用戶從他的微信瀏覽器訪問了你的站點,你就看到了他的微信ID,如果他在溫馨上關注你了,你就能看到關于他的7點信息了:微信ID、昵稱、頭像、地點、基礎語言、性別,以及他們從何時開始關注你的。這就使得企業可以做精準營銷了,特別是基于性別和地理變量。最值得一提的是,“微信注冊”支持HTML5游戲開發商為用用戶的昵稱和頭像為他們定制體驗。

無處在的二維碼

二維碼:10分鐘熱度,然后就會開始消亡?有些地方可能吧,但是對于中國數碼來說,二維碼就是小羅伯特·唐尼:他們最開始是有些站不穩腳跟,但現在他們從可口可樂上走下來了,并且活的很好。印刷品上到處可見他們的身影,桌面站點和電視廣告上也經常出現,用戶可以直接用他們的智能手機掃描二維碼,像這個輕應用一樣(Seah設計的游戲)。

下圖:掃描二維碼探索圣誕卡片的游戲。

掃描桌面屏幕可能聽起來有些奇怪,但在中國這是個再正常不過的行為了。重申一遍,因為微信在中國太普遍了,一般的二維碼都鏈接到一個微信公眾賬號,這樣你可以直接關注;或者鏈接進一個輕應用,這樣直接用微信內置瀏覽器打開。二維碼提供了一個廣泛的微信入口,所以可以存在于紙媒、印刷廣告、商業卡片和站點的頁腳等。

很難不過分強調微信在中國二維碼崛起中的作用。微信一開始就內置了一個二維碼掃描的功能,而且二維碼可以借掃描的功能跟微信發生各種各樣的互動——連接到輕應用,用戶賬號,直接用內置瀏覽器打開網頁,支付系統使用戶可以直接通過微信錢包互相轉錢,還有無窮無盡的其他的應用。廣告們再也不用展示復雜的URL地址了——直接簡單的放上二維碼供用戶掃描,直接就可以登錄公司網頁了。

需要給頁面來一些裝飾?

下圖:淘寶網頁頂部的二維碼“手機逛淘寶”

下圖:一個中國設計社區的網站,二維碼直接對應到他們的微信公眾號

下圖:桌面版的支付寶,中國的Paypal,總共有5個二維碼,一個是在登錄界面,其他是在四個滾動的宣傳圖里。

下圖是中國最大的保險公司,平安,有兩個二維碼:一個是手機站點,一個是微博賬號。

下圖是中國海油的二維碼,在頁面底部

要列舉這些我們可以花上一整天。

將這些都整合在一起:二維碼—微信—輕應用造就的就餐體驗

在一家叫“很久以前只是家串店”的很受歡迎的BBQ餐廳里(一家混搭原始人裝飾風格和電子搖滾裝飾風格為一體的餐廳),最開始,用餐者在下單之前會被要求掃描菜單上的二維碼并關注本店的微信公眾賬號。隨后服務生會要求看就餐者的會員卡,這個會員卡是在關注了本店的公眾號之后發到手機的。會員卡可以讓就餐者立即在餐后享受一定的折扣,當他們一買單,馬上就會從微信上收到一份詳細的收據。如果需要等位很長時間,也有其他的APP來管理等位列表:顧客來餐廳時只要掃一下二維碼,然后就可以先四處逛逛了,當有位子的時候,輕應用會給他們的微信發一個提醒消息的。Thomas解釋說:

微信公眾服務號每月向追隨者推送的消息的數量是有限制的,如果一個追隨者主動跟這個公眾號在過去的48小時內互動,服務號會立即發送一條服務消息給這個追隨著。隨著微信錢包的開通,用戶也可以通過錢包立即給公眾號付錢了。

下圖為很久以前在我離開后發給我的賬單副本:

下圖是我的微信會員卡(很久以前)

所有這些并不是說電腦已經完全過時了,我相信中國的桌面網站會有他獨特的價值,桌面網站會用那塊大屏幕通過一些獨特的功能和獨特的美贏利。

中國的網頁排版依舊很前沿

在超越四個基礎字體和運用更美觀的字體@font-face上的困難把中國網頁的美化進程給慢慢的拖累了。當你看到到處都活躍著這么性感的中文博客大標題的時候,你會覺得依賴這么有限的范圍來做選擇簡直是一種可怕的恥辱。你可以讀這篇文章my blah-blahs on this,如果你想看完全一點的版本的話,但是中文字體最基本的問題是體積太大了,包括成千上萬字符(大概20000個字和符號)的文件包,一般都3M-7M大小,這很難嵌入到頁面中去,因為加載速度會被明顯的拖慢。所以,直到最近中文字體系還很憋屈,就像西方文字一直都很傲視群雄一樣。

隨著“有字庫”(臺灣網站)的出現,一種動態中文字體的解決方案誕生了。有字庫提取字體的輪廓信息然后將它發送給服務器或本地的腳本,然后渲染它們并返回結果。

我有幸參與了有字庫的系統的實驗測試,還是挺好用的,用鼠標選擇非標準的中文字體就像用手觸摸一架全新的輕型巡航艦一樣。這項技術目前還是很新的,下面是我遇到的三個障礙:

1. 細線中文字體渲染的效果不是很好,在chrome里看起來很難看,如果是特細的字體的話,甚至連邊緣線都殘缺不全。對于粗一些的字體來說就沒有這個問題(至少是以我的經驗來說),對Firefox瀏覽器來說也不是什么問題,不過這仍是一個值得修復的缺憾。

下圖是通過有字庫渲染的字體在Chrome中的情形:

2. 經常在加載頁面和加載字體間有點延遲,所以你會看到頁面像個口吃一樣先吐出內容,然后加載渲染字體。

3. 有字庫目前只有中文版,比如在安裝說明頁面,另一個競爭對手Justfont把他的字庫展示頁面和注冊說明頁面設置為英文了,不過它的字庫選擇范圍就不如有字庫了。

“為了保險起見,特殊字體我們還是使用的PNG圖片”Saber說。“我們對于可以在網頁上使用多種字體還是很興奮的,但是目前來說,像有字庫這樣的使用字體的方式還是處在實驗階段的。

Seah也同意這種說法。“大家都知道,中文字體包含了海量的文字,所以很難把他們嵌到網頁里。在我們這,我們用圖片或者SVG文件來處理靜態文字,但是動態文字我們還是用的標準字體。

一些漂亮的桌面網站

ACNPL\WGL

Seah為Activation Nodeplus創建的將實時在線圖形技術融合在一起的平臺,這個網站贏得了Awwward獎。

這個公司成立于2012年早期,是Welson Tu建立的,他是一個臺灣數字營銷先鋒...經過了兩年的高速發展,在2014年5月被Activation集團收購,作為了自己的數字部門。

我三年前主要是做互動設計和Flash開發,那時候我就想開始做一些關于實時圖形技術的前沿的試驗,HTML5畫布和WebGL在當時是國際級別的,互動設計水平遠超同期的中國。Welson當時很感興趣也很支持這個想法,而且他的公司也給我提供了一個完全自由的空間去追求它。所以,我辭掉了我之前在一家創新機構的工作,然后2013年初同他成為了搭檔,我的工作重心也從Flash腳本轉移到新的web技術上來。我們的合作就是這么開始和繼續的:我設計,開發和實驗所有我感興趣的東西,同

SIXPENCE

當Seah準備好向他心愛的妻子求婚的時候,他為她開發了一個只能由她來打開的定制化建議的iPhone app。當她的服裝設計公司準備好向他敞開大門的時候,Seah就把他全部的精力都投入到為她開發和設計一個完全具備競賽水平的網站上去了。

這是為我老婆的公司設計的網站。六便士(他老婆公司的名稱)的兩個創始人想要讓這個網站帶上一種有態度的標簽。他們手工制作的限量版的服裝只通過預定來購買,所以,這個網站的就要傳遞出品牌的這種獨立的態度,提供給客戶一種獨特、現代和與眾不同的瀏覽體驗。在構建網站的時候沒有一個明確的商業目標。

有時候我會覺得在中國做這種前沿一些的工作很難,因為很多用戶依然在用比較舊的技術,你必須在失去部分用戶和花很多時間為比較老的瀏覽器做向下適配的版本之間做出選擇。很多客戶不愿意支持這樣的實驗性工作。

EXPLORING MOONBEAR(月熊志)

這是一個美麗的網站,有著美麗的目標。兩個目標:月熊志是為亞洲動物基金會創建的網站,提高人們對于月熊膽汁產業(熊膽汁被用于中藥)的殘忍性的認識。這個網站也是個制作精巧的游戲規則變革者,這個網站是在IE 11的能力范圍內進行設計的。Saber分享了其中的一些過程:

IE實際上是將編碼的部門交給了另一家公司,然后給他們設定時間點。那家公司名字是Vision Soar。我們也想到了一個點子,我們自己來做所有的架構、內容、設計和原型的部分,然后編碼的部門交給他們。

我們的視覺靈感是來自于我們在成都 AAF救護中心的一段經歷之后。我們拍了很多照片,因為我的目標之一就是在網站上建立一個3D元素,我們做了很多的視覺風格調研,在當時,低多邊形的風格很受歡迎,所以我們就借鑒了一些這種設計元素。在開始做實際的設計之前,我們通常都會創建一個情緒板,情緒板上收集了各種不同類型的視覺風格,然后我們總結出一個設計方向出來。我們會收集屏幕截圖,在網上瀏覽,或者直接出去拍照。

建立3D熊模型是我們面對的最大的技術困難。我們需要創建一個栩栩如生的,并且可以互動的熊。而且,需要在所有支持WebGL(是一種3D繪圖標準)的主流的瀏覽器上都能表現的很好。最后我們用了3個JS和Unity文件。在工作的過程中,和各種各樣的利益相關者的交流溝通是我們面臨的最大的挑戰。

WORDS CAN BE WEAPONS(語言也可以是武器)

奧美為沈陽亞洲心理學研究中心設計的網站,語言也可以是武器是想讓人們直觀的了解到傷人的語言對孩子的心理造成的傷害。將濫用言語和青少年犯罪率的上升直接關聯起來。網站的設計直觀的展示了粗魯傷人的語言將會轉化為槍炮、刀劍、和其他暴力器械。更多的信息點擊這里查看。

30ML

這是一個為中國創意機構30ml設計的網站,獲得了FWA(全稱Favourite Website Awards,是一個世界著名的互動多媒體網站收錄平臺,于2000年5月建立,目的是展示世界上最優秀、最前沿的網絡媒體藝術設計作品。)的獎項。

ADIDAS ORIGINALS

Adidas Originals網站是一個證明,在如今,中國設計工作室為國際品牌做了大量的優秀的設計。

DASHILAR(大柵欄)

G_Lab為北京大柵欄片兒區的復興而創立了這個網站。這是一個合作的項目,政府、設計師、建筑師、投資者、居民共同努力想要給這片快要消亡的歷史街區一個新的生命。

總結

我為一些想進入中國市場的外國公司做一些UI方面的咨詢工作,我發現我最近總在說一件事情:想做中國的本地化,不僅僅意味著將你的網站中文化。這聽起來似乎很殘酷,但這是我要給你的建議:要做就做正確的中國本地化,要不就不做。如果你做個半成品,很明顯的,你不僅會損失錢還是損失信譽。了解你要服務的對象,了解他們是如何使用Web的,然后打開他們期待的交流的通道(微信、輕應用、二維碼),這樣更容易跟你的用戶之間建立有意義的交流。

所以,伙計們,我們學到了什么?

1. 輕應用是中國Web的新前沿陣地。

2. 如果你的網站不能再微信內置瀏覽器很好的顯示的話,那說明你跟中國市場還八竿子打不著呢。

3. 二維碼在中國廣泛使用。

4. 中國的網絡字體技術才剛剛起步。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容