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

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

(一) 我是一種延續(xù)——Mobile Web承接Web的視覺體驗

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

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

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

(二)我是一種重生——Mobile Web視覺設(shè)計的創(chuàng)新

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

　　www.yahoo.com 的頁面效果 與m.yahoo.com的頁面效果

　　www.baidu.com的頁面效果與m.baidu.com的頁面效果

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

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

　　www.naver.com的頁面效果與m.naver.com的頁面效果

　　m.naver.com的眾多帶有移動終端特點的視覺設(shè)計

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

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

(三)我是Mobile Web——新的物種

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

　　www.baidu.com 的首頁與m.baidu.com的首頁

　　用戶在使用個人電腦上網(wǎng)與使用移動設(shè)備上網(wǎng)時的需求，因為使用場景，使用時間 ，使用群體等等的不同，以及移動設(shè)備本身的反推可能有著越來越大的差異。所以我們看到在個人電腦端的baidu首頁沒有“小說”鏈接，但在移動終端的baidu首頁上擁有獨立的“小說”頻道。

　　Baidu小說頻道

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

　　www.google.com.hk的首頁與m.google.com.hk首頁

　　Google移動端周邊搜索

(四)我是云端的App—— Mobile Web App視覺設(shè)計

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

　　Naver Mobile Web App

　　Mobile Web 的視覺設(shè)計進入到全面的客戶端化視覺設(shè)計， Mobile Web 與Mobile Web App的視覺設(shè)計真是老虎老鼠傻傻分不清楚。

分享名稱：移動網(wǎng)站設(shè)計的視覺體驗
文章源于：http://redsoil1982.com.cn/news26/170526.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有網(wǎng)站設(shè)計等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)