小屏，你好！—移動(dòng)端網(wǎng)站賞析

2015-12-03

2632

移動(dòng)互聯(lián)網(wǎng)時(shí)代的悄然襲來(lái)改變著我們的生活方式，同時(shí)也有大批的設(shè)計(jì)力量涌入移動(dòng)端設(shè)計(jì)領(lǐng)域。在web2.0時(shí)代背景下孕育成長(zhǎng)起來(lái)的設(shè)計(jì)師們，在進(jìn)入這樣一個(gè)新鮮的領(lǐng)域時(shí)多少有些“水土不服”。希望通過(guò)本文能給大家?guī)?lái)一些新的探索方向及嘗試。

網(wǎng)絡(luò)環(huán)境研究

根據(jù) CNNIC 第 32 次互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r調(diào)查,截至2013 年 6 月,中國(guó)手機(jī)網(wǎng)民的總規(guī)模達(dá) 4.64 億。其中,手機(jī)瀏覽器用戶規(guī)模為3.69億，同比增長(zhǎng)21.0%,在手機(jī)網(wǎng)民中的滲透率為79.5%。用戶使用手機(jī)瀏覽器的頻率穩(wěn)步提升，75.6%的用戶每天都使用，其中63.3%的用戶每天使用多次。同時(shí)，從使用時(shí)長(zhǎng)上看，手機(jī)上網(wǎng)開(kāi)始擠占電腦上網(wǎng)時(shí)間，成為我國(guó)網(wǎng)民的一種主流上網(wǎng)方式。手機(jī)瀏覽器作為移動(dòng)互聯(lián)網(wǎng)的入口地位將進(jìn)一步穩(wěn)定提升同時(shí)也成為網(wǎng)民接入移動(dòng)互聯(lián)網(wǎng)的首要入口。在這樣的局勢(shì)下面僅在PC端建立網(wǎng)站已經(jīng)開(kāi)始無(wú)法滿足用戶的需求。移動(dòng)端網(wǎng)站建立的必要性十分凸顯。

如圖所示，3G4G網(wǎng)絡(luò)的普及率以及WIFI覆蓋率正快速增長(zhǎng)，而相對(duì)占比也不斷的提升。良好的網(wǎng)絡(luò)環(huán)境將為移動(dòng)端網(wǎng)站設(shè)計(jì)開(kāi)拓更大的空間。這為網(wǎng)站的視覺(jué)展示以及流暢體驗(yàn)帶來(lái)更多可能性，同時(shí)因?yàn)榈退倬W(wǎng)絡(luò)仍有比較大的占比，所以網(wǎng)站的性能優(yōu)化仍然是每位設(shè)計(jì)師需要迫切關(guān)注的要點(diǎn)。

平臺(tái)支持

瀏覽器作為網(wǎng)站的承載基礎(chǔ)，上圖數(shù)據(jù)體現(xiàn)智能移動(dòng)設(shè)備的市場(chǎng)占有量十分高，而普遍智能移動(dòng)設(shè)備系統(tǒng)的自帶瀏覽器以及第三方瀏覽器基本都是采用webkit內(nèi)核，對(duì)網(wǎng)站都有較高的兼容度，這為設(shè)計(jì)帶來(lái)更多可控性。（相較于IE6用戶使用率仍高達(dá)24% 的PC端【2013年6月微軟數(shù)據(jù)：IE6最新市場(chǎng)份額，中國(guó)大陸】，webkit內(nèi)核瀏覽器對(duì)ccs3以及html5的網(wǎng)站支持率達(dá)到的93.5%以上。）

交互差異性

不同的終端有著不同的交互方式。PC與移動(dòng)設(shè)備的交互方式有著天壤之別，在PC上良好的頁(yè)面交互方式放到移動(dòng)端頁(yè)面已然不完全合適。移動(dòng)端有著更豐富的交互方式，比如利用手機(jī)陀螺儀的重力感應(yīng)來(lái)實(shí)現(xiàn)一些交互（如利用重力感應(yīng)實(shí)現(xiàn)視差的js特效、旋轉(zhuǎn)屏幕進(jìn)行轉(zhuǎn)跳、“搖一搖”實(shí)現(xiàn)頁(yè)面切換等等），比如長(zhǎng)按保存圖片……同時(shí)移動(dòng)端交互已經(jīng)慢慢有一套完善成熟的交互體系。設(shè)計(jì)師在這方面可以更多的去學(xué)習(xí)借鑒移動(dòng)產(chǎn)品的優(yōu)秀交互方式應(yīng)用到移動(dòng)端網(wǎng)站設(shè)計(jì)中去，也應(yīng)多緯度去溝通了解其在網(wǎng)頁(yè)上實(shí)現(xiàn)的可行性。此處推薦一篇文章：《交互體驗(yàn)優(yōu)化：4步讓移動(dòng)網(wǎng)站看起來(lái)像本地應(yīng)用》—— AlloyTeam TAT.sheran

響應(yīng)式設(shè)計(jì)

而說(shuō)到移動(dòng)端網(wǎng)站不得不提響應(yīng)式設(shè)計(jì)。什么是響應(yīng)式？簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。面對(duì)繁雜的移動(dòng)設(shè)備分辨率，這聽(tīng)起來(lái)非常美好，我們接下來(lái)了通過(guò)一個(gè)案例來(lái)了解一下。

案例：NEWTON RUNNING

點(diǎn)擊標(biāo)題或者掃描二維碼瀏覽（此網(wǎng)站在PC與移動(dòng)端皆可體驗(yàn)）

通過(guò)案例我們能清晰了解到在各種移動(dòng)終端層出不窮的今天，響應(yīng)式設(shè)計(jì)的強(qiáng)大兼容性得到了巨大的體現(xiàn)。同時(shí)建立在強(qiáng)大的兼容性基礎(chǔ)上，由于全終端共用一個(gè)網(wǎng)站，那么在開(kāi)發(fā)、運(yùn)營(yíng)和維護(hù)上會(huì)更節(jié)省成本，而在網(wǎng)站建設(shè)前期會(huì)給設(shè)計(jì)以及重構(gòu)加重任務(wù)；對(duì)于產(chǎn)品包裝而言在不同終端會(huì)有更一致更完整的品牌形象。而在實(shí)際使用過(guò)程中發(fā)現(xiàn)，響應(yīng)式設(shè)計(jì)在不同移動(dòng)終端上能獲得兼容度較高的視覺(jué)呈現(xiàn)同時(shí)會(huì)有部分功能性不夠完善（如按鈕點(diǎn)擊區(qū)域過(guò)?。?；而在PC端部分瀏覽器會(huì)出現(xiàn)錯(cuò)位等不兼容情況；我們還發(fā)現(xiàn)在硬件性能較差的終端下，網(wǎng)站的流暢程度并不高（動(dòng)態(tài)展示特效會(huì)出現(xiàn)卡頓）；而在移動(dòng)終端上網(wǎng)站的載入過(guò)程受到網(wǎng)速的很大影響。所以使用響應(yīng)式設(shè)計(jì)的同時(shí)對(duì)設(shè)計(jì)師在交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)，性能優(yōu)化和重構(gòu)方面會(huì)有更高的要求。

盡管此去任重道遠(yuǎn)，但是在國(guó)內(nèi)外眾多設(shè)計(jì)師的努力下依舊涌現(xiàn)許許多多的優(yōu)秀案例。

案例賞析

案例：霍比特人

點(diǎn)擊標(biāo)題或者掃描二維碼瀏覽（此網(wǎng)站在PC與移動(dòng)端皆可體驗(yàn)，PC端推薦chrome瀏覽）

該站針對(duì)PC端與移動(dòng)端做不同的細(xì)致優(yōu)化，出色的視覺(jué)呈現(xiàn)以及順暢的交互體驗(yàn)讓其有著濃烈的帶入氛圍與渾厚的史詩(shī)感，同時(shí)清晰的用戶引導(dǎo)，有趣的深入探索以及巧妙的互動(dòng)小游戲讓其成為一個(gè)難得的佳作。由于承載的內(nèi)容十分豐富，所以消耗網(wǎng)絡(luò)資源較為巨大，載入時(shí)間略長(zhǎng)。

案例：maker your money

點(diǎn)擊連接或者掃描二維碼瀏覽（此網(wǎng)站在PC與移動(dòng)端皆可體驗(yàn)）

該站有著喜人的矢量插畫(huà)設(shè)計(jì)風(fēng)格，清晰的用戶引導(dǎo)，生動(dòng)流暢的動(dòng)態(tài)展示，使得枯燥的介紹也變得讓人容易接受起來(lái)，這不也正體現(xiàn)了設(shè)計(jì)的價(jià)值嗎？

案例：騰訊互動(dòng)娛樂(lè)UP2014 發(fā)布會(huì)邀請(qǐng)函