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

　　根據(jù) CNNIC 第 32 次互聯(lián)網(wǎng)絡(luò)發(fā)展狀況調(diào)查,截至2013 年 6 月,中國手機網(wǎng)民的總規(guī)模達 4.64 億。其中,手機瀏覽器用戶規(guī)模為3.69億，同比增長21.0%,在手機網(wǎng)民中的滲透率為79.5%。

　　用戶使用手機瀏覽器的頻率穩(wěn)步提升，75.6%的用戶每天都使用，其中63.3%的用戶每天使用多次。同時，從使用時長上看，手機上網(wǎng)開始擠占電腦上網(wǎng)時間，成為我國網(wǎng)民的一種主流上網(wǎng)方式。

　　手機瀏覽器作為移動互聯(lián)網(wǎng)的入口地位將進一步穩(wěn)定提升同時也成為網(wǎng)民接入移動互聯(lián)網(wǎng)的首要入口。在這樣的局勢下面僅在PC端建立網(wǎng)站已經(jīng)開始無法滿足用戶的需求。移動端網(wǎng)站建立的必要性十分凸顯。

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

　　平臺支持

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

　　交互差異性

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

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

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

　　NEWTON RUNNING

　　點擊標題或者掃描二維碼瀏覽(此網(wǎng)站在PC與移動端皆可體驗)

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

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

　　霍比特人

　　點擊標題或者掃描二維碼瀏覽(此網(wǎng)站在PC與移動端皆可體驗，PC端推薦chrome瀏覽)

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

　　Maker your money

　　點擊連接或者掃描二維碼瀏覽(此網(wǎng)站在PC與移動端皆可體驗)

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

　　騰訊互動娛樂UP2014 發(fā)布會邀請函

　　點擊連接或者掃描二維碼瀏覽(手機瀏覽為佳)

　　Html5動畫設(shè)計，Svg格式文件優(yōu)化，更簡約新潮的視覺展示，更流暢的用戶體驗，讓一個內(nèi)容簡約的頁面立馬上流了起來~!

　　騰訊移動游戲大獎賽

　　點擊連接或者掃描二維碼瀏覽(手機瀏覽為佳)

　　流暢的動畫效果，簡單有趣的小游戲，清晰的用戶引導(dǎo)。好用、好看和有趣三個都有了~!

　　陳赫個人移動網(wǎng)站

　　點擊連接或者掃描二維碼瀏覽(手機瀏覽為佳)

　　以微信公眾號為入口的輕度的擬APP設(shè)計的網(wǎng)站，功能按鈕設(shè)計合理，跳轉(zhuǎn)順暢，日程、簽到等互動內(nèi)容使用流暢。

　　前海公館移動站

　　點擊連接或者掃描二維碼瀏覽(手機瀏覽為佳)

　　企業(yè)型網(wǎng)站，制作嚴謹，專題有創(chuàng)意，但對導(dǎo)航的設(shè)計不統(tǒng)一略顯遺憾，跳轉(zhuǎn)不順暢也導(dǎo)致用戶體驗較差。

　　宜家PS 2014 新品發(fā)布移動站

　　點擊連接或者掃描二維碼瀏覽(手機瀏覽為佳)

　　情感化場景設(shè)計，針對用戶群的痛點表達到位，但產(chǎn)品展示不夠清晰，未開通在線購買功能十分可惜。

　　小米移動商城

　　點擊連接或者掃描二維碼瀏覽(手機瀏覽為佳)

　　脫胎于PC的平臺站，布局合理，展示清晰，體驗流暢，同時也較平淡規(guī)矩。

　　優(yōu)衣庫牛仔系列頁面

　　點擊連接或者掃描二維碼瀏覽(此網(wǎng)站在PC與移動端皆可體驗)

　　視覺上延續(xù)優(yōu)衣庫一貫的簡約，響應(yīng)式設(shè)計在多個終端上獲得了比較完整的視覺效果。不足的是在手機端上，按鈕過小，給操作帶來一定困難。

　　總結(jié)

　　看完案例回歸到實際的項目中我們會發(fā)現(xiàn)：設(shè)計師在執(zhí)行前期的各緯度溝通十分重要，特別是和重構(gòu)工程師的提前溝通，對于頁面的還原度以及用戶體驗會有很大的幫助;由于有著兼容度較高的瀏覽器為基礎(chǔ)，嘗試一些新穎動畫特效會讓你的網(wǎng)站看起來更生動新潮;

　　跳開PC端頁面設(shè)計的固定思維，更多的運用移動端特有的交互方式，會帶來更酷用戶體驗，比如對重力感應(yīng)的應(yīng)用等。本文粗淺的分析希望給設(shè)計師們帶來一些思考和幫助，有不足之處歡迎指正，也與諸君共勉。

        注：更多精彩教程請關(guān)注三聯(lián)網(wǎng)頁設(shè)計教程 欄目，