各式或華麗，或炫目，或讓人迷惑，或讓人嘆服的Web設(shè)計(jì)已經(jīng)愉悅我們很長(zhǎng)很長(zhǎng)的日子了。 可是，當(dāng)有一天我們發(fā)現(xiàn)了一個(gè)新事物——用手機(jī)上網(wǎng)，在手機(jī)上看網(wǎng)頁(yè)，我們看到了一種不一樣Web，這種網(wǎng)頁(yè)大家通常叫他們Wap頁(yè)面，這種頁(yè)面形式用簡(jiǎn)潔的視覺(jué)效果，清晰的頁(yè)面架構(gòu)和小分量的頁(yè)面體積第一次滿足了我們手機(jī)上網(wǎng)的需求。

但到了人類歷史的某一天，鋪天蓋地的iPhone 某某 和Android誰(shuí)誰(shuí)都出現(xiàn)了，碩大的屏幕尺寸，華麗的界面展現(xiàn)，用手指頭去完成各式的操作，手機(jī)的的歷史使命再也不是打電話發(fā)短信，人們大呼“我們要上網(wǎng)!”我們需要給予用戶手機(jī)上網(wǎng)合理的體驗(yàn)，豐富的內(nèi)容和交互。又由于Html5的“說(shuō)是快，那是及”的出現(xiàn)，時(shí)勢(shì)造英雄移動(dòng)Web 華麗登場(chǎng)了。

(一) 我是一種延續(xù)——移動(dòng)Web承接Web的視覺(jué)體驗(yàn)

以www.deviantart.com為例，她已經(jīng)是無(wú)數(shù)設(shè)計(jì)師生活的一部分，在個(gè)人電腦上我們擁有她，在手機(jī)上我們也需要她。

移動(dòng)Web的任務(wù)很重要的就是要滿足用戶們從個(gè)人電腦到手機(jī)的延續(xù)，用戶在個(gè)人電腦上看，在手機(jī)上也看，對(duì)于像”www.deviantart.com”這樣的有很久時(shí)間積累的產(chǎn)品，她的視覺(jué)風(fēng)格在用戶的腦子里早已形成了一個(gè)具象的畫(huà)面，在移動(dòng)設(shè)備上我們的”m. deviantart.com”同樣需要延續(xù)這樣的品牌視覺(jué)風(fēng)格。

從例子里我們看到好的品牌視覺(jué)延續(xù)，幫助用戶在使用移動(dòng)設(shè)備訪問(wèn)該網(wǎng)站時(shí)立刻建立起親切的視覺(jué)初體驗(yàn)和品牌認(rèn)知。更重要的是，好的視覺(jué)設(shè)計(jì)的延續(xù)可以很好的幫助用戶在使用移動(dòng)Web時(shí)快速的定位自己在個(gè)人電腦上使用Web產(chǎn)品時(shí)已經(jīng)熟悉的各種功能，使得用戶在移動(dòng)Web上快速上手完成自己的交互需求。

(二)我是一種重生——移動(dòng)Web視覺(jué)設(shè)計(jì)的創(chuàng)新

作為移動(dòng)Web的舞臺(tái)，iPhone 某某 和Android誰(shuí)誰(shuí)都有著各自，各式各樣的“規(guī)章制度”，而且各自特立獨(dú)行，我行我素。移動(dòng)Web的舞蹈要與他們渾然天成，就需求穿上他們提供的舞衣才能與君共舞。

www.yahoo.com 的頁(yè)面效果 與m.yahoo.com的頁(yè)面效果

www.baidu.com的頁(yè)面效果與m.baidu.com的頁(yè)面效果

在上圖中我們分別看到門(mén)戶產(chǎn)品yahoo和搜索引擎產(chǎn)品baidu分別在個(gè)人電腦端和移動(dòng)設(shè)備端的Web與移動(dòng)Web的視覺(jué)呈現(xiàn)有很大的差異。

一個(gè)優(yōu)秀的移動(dòng)Web設(shè)計(jì)在延續(xù)了自身品牌的一致性后，與移動(dòng)設(shè)備本身的品牌視覺(jué)特性相結(jié)合是成功的重要因素之一。一致性能幫助用戶得到與設(shè)備本身和諧的流暢體驗(yàn)。

在上圖中我們分別看到門(mén)戶產(chǎn)品yahoo和搜索引擎產(chǎn)品baidu分別在個(gè)人電腦端和移動(dòng)設(shè)備端的Web與移動(dòng)Web的視覺(jué)呈現(xiàn)有很大的差異。一個(gè)優(yōu)秀的移動(dòng)Web設(shè)計(jì)在延續(xù)了自身品牌的一致性后，與移動(dòng)設(shè)備本身的品牌視覺(jué)特性相結(jié)合是成功的重要因素之一。一致性能幫助用戶得到與設(shè)備本身和諧的流暢體驗(yàn)。

www.naver.com的頁(yè)面效果與m.naver.com的頁(yè)面效果

m.naver.com的眾多帶有移動(dòng)終端特點(diǎn)的視覺(jué)設(shè)計(jì)

在naver的移動(dòng)Web視覺(jué)設(shè)計(jì)中使用了大量移動(dòng)終端本身的視覺(jué)特點(diǎn)，如產(chǎn)品的鏈接采用app icon的方式，各級(jí)頁(yè)面中導(dǎo)航的設(shè)計(jì)等等。

我們可以發(fā)現(xiàn)好的品牌再設(shè)計(jì)，也會(huì)給品牌本身帶來(lái)更多的視覺(jué)展現(xiàn)的可能，也迎來(lái)了味道更純正的移動(dòng)Web，真的為Mobile 而設(shè)計(jì)——“為了用戶感受的一致而不一致的去做設(shè)計(jì)”。

(三)我是移動(dòng)Web——新的物種

曾經(jīng)我是 Web的一個(gè)化身，但我在Mobile 的星球生活，我開(kāi)始變化，我有了自己更多的特性，有一天我終于意識(shí)到我成為一種新的物種。

www.baidu.com 的首頁(yè)與m.baidu.com的首頁(yè)

用戶在使用個(gè)人電腦上網(wǎng)與使用移動(dòng)設(shè)備上網(wǎng)時(shí)的需求，因?yàn)槭褂脠?chǎng)景，使用時(shí)間 ，使用群體等等的不同，以及移動(dòng)設(shè)備本身的反推可能有著越來(lái)越大的差異。所以我們看到在個(gè)人電腦端的baidu首頁(yè)沒(méi)有“小時(shí)”鏈接，但在移動(dòng)終端的baidu首頁(yè)上擁有獨(dú)立的“小說(shuō)”頻道。

Baidu小說(shuō)頻道

這樣的差異衍生出一批批移動(dòng)Web自有產(chǎn)品，這樣的產(chǎn)品為滿足用戶在移動(dòng)設(shè)備上的強(qiáng)需求而設(shè)計(jì)，這樣的設(shè)計(jì)不再有過(guò)去為人們所熟悉的個(gè)人電腦Web設(shè)計(jì)的影子，成為真正的移動(dòng)Web。

www.google.com.hk的首頁(yè)與m.google.com.hk首頁(yè)

谷歌移動(dòng)端周邊搜索

(四)我是云端的App—— 移動(dòng)Web App視覺(jué)設(shè)計(jì)

隨著網(wǎng)絡(luò)的不斷發(fā)展，移動(dòng)Web又迎來(lái)了移動(dòng)Web App，不需要下載，將我添加到桌面，就成了一個(gè)App應(yīng)用。

Naver Mobile Web App

移動(dòng)Web 的視覺(jué)設(shè)計(jì)進(jìn)入到全面的客戶端化視覺(jué)設(shè)計(jì)， 移動(dòng)Web 與移動(dòng)Web App的視覺(jué)設(shè)計(jì)真是老虎老鼠傻傻分不清楚。

移動(dòng)Web 的序幕剛剛拉開(kāi)，我們都搶座等著慢慢看下去。