您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)欣賞 >> 瀏覽設(shè)計(jì)教程

10大移動(dòng)端網(wǎng)站案例激情賞析

移動(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)一些新的探索方向及嘗試。

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)。

交互差異性

不同的終端有著不同的交互方式。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ī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

復(fù)制網(wǎng)址http://runbetter.newtonrunning.com/%20%20或者掃描二維碼瀏覽(此網(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ò)?。欢赑C端部分瀏覽器會(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)秀案例。

 

 

案例賞析

案例:霍比特人

復(fù)制網(wǎng)址http://middle-earth.thehobbit.com/或者掃描二維碼瀏覽(此網(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

復(fù)制網(wǎng)址http://makeyourmoneymatter.org/或者掃描二維碼瀏覽(此網(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)函

復(fù)制網(wǎng)址http://up.qq.com/或者掃描二維碼瀏覽(手機(jī)瀏覽為佳)

Html5動(dòng)畫(huà)設(shè)計(jì),Svg格式文件優(yōu)化,更簡(jiǎn)約新潮的視覺(jué)展示,更流暢的用戶體驗(yàn),讓一個(gè)內(nèi)容簡(jiǎn)約的頁(yè)面立馬上流了起來(lái)~!

 

 

案例:騰訊移動(dòng)游戲大獎(jiǎng)賽

復(fù)制網(wǎng)址http://sy.qq.com/tga/2014/game/game.htm?from=timeline&isappinstalled=0或者掃描二維碼瀏覽(手機(jī)瀏覽為佳)

流暢的動(dòng)畫(huà)效果,簡(jiǎn)單有趣的小游戲,清晰的用戶引導(dǎo)。好用、好看和有趣三個(gè)都有了~!

 

 

案例:陳赫個(gè)人移動(dòng)網(wǎng)站

復(fù)制網(wǎng)址http://chenhe.bazaarstar.cn/?from=message&isappinstalled=0或者掃描二維碼瀏覽(手機(jī)瀏覽為佳)

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

 

案例:前海公館移動(dòng)站

復(fù)制網(wǎng)址http://app.aimapp.net/res/static/sz-qhgg/valuable.html或者掃描二維碼瀏覽(手機(jī)瀏覽為佳)

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

 

案例:宜家PS 2014 新品發(fā)布移動(dòng)站

復(fù)制網(wǎng)址http://community.ikea.cn/PS2014.html?from=message&isappinstalled=0或者掃描二維碼瀏覽(手機(jī)瀏覽為佳)

情感化場(chǎng)景設(shè)計(jì),針對(duì)用戶群的痛點(diǎn)表達(dá)到位,但產(chǎn)品展示不夠清晰,未開(kāi)通在線購(gòu)買(mǎi)功能十分可惜。

 

案例:小米移動(dòng)商城

復(fù)制網(wǎng)址http://p.www.xiaomi.com/m/product/4279/index.html?from=message&isappinstalled=0或者掃描二維碼瀏覽(手機(jī)瀏覽為佳)

脫胎于PC的平臺(tái)站,布局合理,展示清晰,體驗(yàn)流暢,同時(shí)也較平淡規(guī)矩。

 

 

案例:優(yōu)衣庫(kù)牛仔系列頁(yè)面

復(fù)制網(wǎng)址http://event.uniqlo.cn/ujeans/index.php?from=groupmessage&isappinstalled=0或者掃描二維碼瀏覽(此網(wǎng)站在PC與移動(dòng)端皆可體驗(yàn))

視覺(jué)上延續(xù)優(yōu)衣庫(kù)一貫的簡(jiǎn)約,響應(yīng)式設(shè)計(jì)在多個(gè)終端上獲得了比較完整的視覺(jué)效果。不足的是在手機(jī)端上,按鈕過(guò)小,給操作帶來(lái)一定困難。

 

 

總結(jié)

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

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

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/de1986.html
十五個(gè)具有國(guó)際范的留白網(wǎng)頁(yè)設(shè)計(jì)欣賞
30個(gè)優(yōu)秀的網(wǎng)站導(dǎo)航欄設(shè)計(jì)欣賞
圖趣網(wǎng)微信
建議反饋
×