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

手機(jī)互動(dòng)網(wǎng)頁(yè)項(xiàng)目設(shè)計(jì)總結(jié)(上)

一、硬件背景

二、項(xiàng)目欣賞
1、TGA移動(dòng)游戲官網(wǎng)
2、UP+邀請(qǐng)函
3、天天酷跑里約進(jìn)擊版

三、技術(shù)創(chuàng)意點(diǎn)
1、CSS3動(dòng)畫
2、Sprite動(dòng)畫
3、重力感應(yīng)+視差
4、字體圖標(biāo)
5、自適應(yīng)SVG圖形
6、Loading進(jìn)度條
7、單屏滑動(dòng)
8、游戲
9、地理定位
10、音頻使用
11、手機(jī)重度新官網(wǎng)

一、硬件背景(重要?。?/strong>

易觀智庫(kù)的一個(gè)報(bào)告指出,2013年中國(guó)移動(dòng)互聯(lián)網(wǎng)網(wǎng)民規(guī)模達(dá)6.52億,其中70.1%的用戶使用安卓手機(jī),26.1%的用戶使用蘋果手機(jī)。高收入網(wǎng)民中,有一半以上都是用IOS系統(tǒng),這個(gè)比重在低收入群體中只占17.71%。中低收入網(wǎng)民多使用安卓系統(tǒng)的手機(jī),占比分別為66.67%和76.09%。

先提出中國(guó)移動(dòng)互聯(lián)網(wǎng)網(wǎng)民結(jié)構(gòu)是為了讓大家在開始項(xiàng)目構(gòu)思的時(shí)候,就要清楚面對(duì)的群體是什么,在項(xiàng)目的進(jìn)展中遇到問題時(shí),結(jié)合時(shí)間和效果,能夠有所抉擇。這個(gè)問題很重要,就像我們?cè)赑C網(wǎng)頁(yè)提出并且已經(jīng)被廣泛接受的”優(yōu)雅降級(jí)”原則:在Google Chrome、Firefox、Safari、QQ瀏覽器極速模式等瀏覽器下,利用新技術(shù)(HTML5、CSS3、Javascript等)給用戶創(chuàng)造更多新鮮的體驗(yàn)。但是IE6、IE7、老系統(tǒng)下的QQ瀏覽器兼容模式等瀏覽器,就只能查看到普通的沒特效的網(wǎng)頁(yè)。

這個(gè)問題在移動(dòng)端的展現(xiàn)只有過之而無不及。如果說IE6是PC瀏覽器的蛀蟲,那安卓低端機(jī)就是手機(jī)瀏覽器的蛀蟲。安卓手機(jī)配置和系統(tǒng)可謂千千萬種,CPU跟網(wǎng)頁(yè)展示效果卡不卡息息相關(guān),安卓系統(tǒng)版本跟網(wǎng)頁(yè)基礎(chǔ)呈現(xiàn)也息息相關(guān)(例如安卓2.0不兼容CSS3的圓角屬性border-radius等)。(CPU中文意思是處理器,手機(jī)反應(yīng)快慢,卡不卡,都跟CPU息息相關(guān)。現(xiàn)在市面上低端機(jī)定義是CPU頻率800M以下,800M至1.5G屬于中端機(jī),高端機(jī)就是雙核1G以上的手機(jī)。)

在理解這個(gè)問題的前提下,進(jìn)行手機(jī)移動(dòng)網(wǎng)頁(yè)構(gòu)思及重構(gòu)的時(shí)候,就會(huì)有針對(duì)性的進(jìn)行取舍,使得項(xiàng)目得到最大化的效率。

下面將會(huì)以我們近期制作的比較出色的手機(jī)專題網(wǎng)頁(yè)作為案例,來告訴親愛的大家,我們前端能做什么,希望可以對(duì)今后的創(chuàng)意參考有所幫助。

二、項(xiàng)目欣賞

1、TGA移動(dòng)游戲官網(wǎng)

TGA城市拉力賽

2、UP+邀請(qǐng)函

3、天天酷跑里約進(jìn)擊版

三、技術(shù)創(chuàng)意點(diǎn)

一般在制作強(qiáng)交互、多動(dòng)畫效果的網(wǎng)頁(yè)前,建議產(chǎn)品、設(shè)計(jì)、前端一起開會(huì)探討實(shí)現(xiàn)細(xì)節(jié)。同時(shí)要求設(shè)計(jì)師有很良好的手機(jī)網(wǎng)頁(yè)設(shè)計(jì)習(xí)慣和一定思路的展現(xiàn)效果,以及要求產(chǎn)品有很大的包容心、懂得取舍。

1、技術(shù)點(diǎn):CSS3動(dòng)畫  

適用范圍:相互聯(lián)系又相互獨(dú)立的元素

設(shè)備要求:中高端手機(jī)

會(huì)發(fā)現(xiàn)UP+邀請(qǐng)函里用的最多的就是動(dòng)畫效果了,其實(shí)都是用CSS3寫成的。CSS3動(dòng)畫可以理解為一個(gè)元素的a狀態(tài),讓它以逐幀展示的方式變成b狀態(tài)?;镜淖冃斡衧cale(縮放)、translate(位移)、rotate(旋轉(zhuǎn))、skew(傾斜)等,再加上color(顏色)、opacity(透明度)等,利用transition(轉(zhuǎn)換)和animation(動(dòng)畫)加上延時(shí)效果,動(dòng)畫就出來了。聽著暈吧?看看下面的例子。

① 獨(dú)立元素間的互動(dòng)

這塊動(dòng)畫并不是前期就想好的。在制作過程中,發(fā)現(xiàn)每頁(yè)的元素進(jìn)入動(dòng)畫都差不多,這樣用戶容易感覺無聊而沒有興趣往下翻頁(yè)。為了增加末頁(yè)的觸達(dá)率,需要每翻一頁(yè)都給用戶帶來一個(gè)信息:下面的內(nèi)容會(huì)不一樣的哦,請(qǐng)繼續(xù)往下翻。

“我是玩家”這一屏的小元素都跟游戲有關(guān)系,英雄聯(lián)盟的Q版蓋倫,游戲玩家必備手柄,讓他們互動(dòng)起來。手柄按常規(guī)方式進(jìn)場(chǎng)(旋轉(zhuǎn)+縮放+透明度),蓋倫也按照常規(guī)方式進(jìn)場(chǎng)(位移+透明度),但是讓蓋倫的位移軌跡跟手柄有少許重疊,就造成兩者相撞的效果。手柄被撞需要有反饋,就被彈開了一下(位移)。

② 單元素自我呈現(xiàn)

看到這一屏設(shè)計(jì)稿的時(shí)候,真的不知道從何下手,常規(guī)動(dòng)畫效果上面的頁(yè)面都使用了,這屏的元素還不多,如何不無聊?初期的想法是讓小三角從圓里蹦出來(縮放+位移+透明度),跟首屏呼應(yīng)??墒侵挥幸粋€(gè)小元素蹦出來,略顯單薄。換了個(gè)方向思考,小三角可以自我呈現(xiàn)啊。利用它的形狀和方向,模仿風(fēng)箏或者飛機(jī)的動(dòng)效,給予一個(gè)非直線運(yùn)動(dòng)軌跡,最終呈現(xiàn)效果就出來了(縮放+位移+旋轉(zhuǎn)+透明度)。

③ 3D變換

這個(gè)在最開始討論的時(shí)候產(chǎn)品就說了需要有門被打開的動(dòng)效。實(shí)現(xiàn)方法很多,最常規(guī)的是利用圖片幀的方式,多張不同狀態(tài)的門的圖片進(jìn)行切換,造成門在逐漸打開的效果。優(yōu)點(diǎn)是能制作各種動(dòng)效,缺點(diǎn)是增加圖片的數(shù)量,對(duì)頁(yè)面加載速度造成壓力(更多可以查看下面的sprite動(dòng)畫介紹)。好在這扇門是一個(gè)純色矩形色塊,可以利用CSS3的3D變換(旋轉(zhuǎn)3D),做成門往里面打開的效果。如下圖右一的rotateY,把旋轉(zhuǎn)的中心線定為門的左側(cè)即可。

CSS3的變換屬性不算多,但是把不一樣的參數(shù)結(jié)合起來,就成了不一樣的展現(xiàn)效果。如果大家在開始項(xiàng)目前都有這么些概念和認(rèn)識(shí),也許不需要前端參與前期討論都可以很順的把流程走下來,提升效率。

2、技術(shù)點(diǎn):Sprite動(dòng)畫

適用范圍:?jiǎn)为?dú)形象有多幀動(dòng)畫

設(shè)備要求:無

Sprite動(dòng)畫的想法來自傳統(tǒng)的動(dòng)畫行業(yè),多張圖在一定時(shí)間內(nèi)切換,形成視覺上的動(dòng)態(tài)效果。Sprite動(dòng)畫特別適合多細(xì)節(jié)的逐幀動(dòng)畫展示,但是對(duì)圖片的要求很高,需要先生成每幀的圖片,如下圖。這張圖片壓縮之后都還有119K大小,成本是很高的。

本來酷跑里約版幾乎每頁(yè)的小角色都有sprite動(dòng)畫的,文件加起來有1.5M。在PC網(wǎng)頁(yè)里,幾M都是可理解的,但在手機(jī),幾百K都已經(jīng)是致命的了(在中國(guó)國(guó)情下)。所以在上線第二天,緊急處理網(wǎng)頁(yè),只留下審判女王的動(dòng)畫,訪問延時(shí)從16秒直線下降到6秒。所以如果想在項(xiàng)目里應(yīng)用sprite動(dòng)畫,需要仔細(xì)斟酌。

3、技術(shù)點(diǎn):重力感應(yīng)視差

適用范圍:相互獨(dú)立的元素

設(shè)備要求:中高端手機(jī)

PC端的網(wǎng)頁(yè)視差展現(xiàn)靠鼠標(biāo)動(dòng)作(鼠標(biāo)移動(dòng)或者滾輪),手機(jī)端的網(wǎng)頁(yè)視差展現(xiàn)可以依靠設(shè)備特性——重力感應(yīng)。當(dāng)手機(jī)的水平方向改變時(shí),網(wǎng)頁(yè)內(nèi)給予重力感應(yīng)的元素就會(huì)跟著改變位置,并且依據(jù)賦值的深度的不一樣,位移速度也不一樣,這樣就能造成視差的效果。在用戶發(fā)現(xiàn)網(wǎng)頁(yè)跟自己有互動(dòng)時(shí),好感度會(huì)立增。

除了在展示性網(wǎng)頁(yè)使用重力感應(yīng)做成視差效果之外,還可以利用它來制作小游戲,增強(qiáng)互動(dòng)。例如最出名的重力感應(yīng)球游戲。

4、技術(shù)點(diǎn):字體圖標(biāo)

適用范圍:純色矢量圖

設(shè)備要求:中高端手機(jī)

字體有一個(gè)非常好的特性,可以容易設(shè)置顏色大小或者變形,而CSS3的@font-face就是為了結(jié)合字體和圖標(biāo)而生的。以邀請(qǐng)函為例,把頁(yè)面上所有純色矢量圖轉(zhuǎn)化為字體文件之后,節(jié)省97.37%的帶寬(約370k),這對(duì)手機(jī)網(wǎng)頁(yè)加載是非常大的一個(gè)幫助。但是對(duì)生成字體的圖標(biāo)的要求是,只能包含一個(gè)顏色,且為矢量圖。所以在呈現(xiàn)風(fēng)格和文件大小之間的取舍,根據(jù)項(xiàng)目而定。

5、技術(shù)點(diǎn):自適應(yīng)SVG圖形

適用范圍:基礎(chǔ)圖形

設(shè)備要求:中高端手機(jī)

邀請(qǐng)函那條貫穿8個(gè)頁(yè)面的折線是使用SVG畫出來的,優(yōu)點(diǎn)是可以根據(jù)屏幕進(jìn)行自適應(yīng)匹配,且大小能比切成png24的圖片節(jié)省98%的帶寬(約65k)。缺點(diǎn)是自適應(yīng)的圖形之間比較難定位。例如iPhone4s豎屏的情況下折線的角度為60°,橫屏的情況下折線的角度為25°,貫穿的位置可見不一致。但是線條上面還放著其他元素,或者還有其他文字依據(jù)它來定位,這樣就出現(xiàn)問題了。所以我們的處理是選擇一定的屏幕大小進(jìn)行細(xì)微優(yōu)化,但是從概念上就放棄”線條必須從元素正中間貫穿過去”的想法,這只是一種硬解決辦法。

手機(jī)上SVG可以制作出很多圖形、線條的組合體,但是也需要產(chǎn)品階段就清晰哪些能做,哪些能舍棄,然后找出一個(gè)最適合的解決辦法。就像邀請(qǐng)函,選擇做折線,就放棄一定設(shè)備的元素定位問題。如果選擇元素定位第一,則需要更換貫穿線條的設(shè)計(jì)。(其實(shí)我不是很建議用貫穿線條的想法,難實(shí)現(xiàn)。)

6、技術(shù)點(diǎn):Loading進(jìn)度條

適用范圍:比較大的頁(yè)面

設(shè)備要求:無

據(jù) Compuware 的調(diào)查,用戶在使用手機(jī)時(shí),如果遇到加載超過5秒的手機(jī)網(wǎng)站,74%的用戶會(huì)選擇離開。即便用戶對(duì)手機(jī)應(yīng)用相對(duì)有耐心,也只有50%的用戶會(huì)容忍加載超過5秒。之前內(nèi)部的一項(xiàng)網(wǎng)速測(cè)試算出訪問我們專題的手機(jī)平均網(wǎng)速只有70K/s,如果容忍時(shí)間是5秒的話,我們的網(wǎng)頁(yè)加起來需要控制在350K以內(nèi),但有時(shí)候內(nèi)容多了圖片大了加載時(shí)間想控制都沒辦法。有一個(gè)可以稱呼為時(shí)間小偷的辦法,就是給網(wǎng)頁(yè)增加loading進(jìn)度條。loading需要有動(dòng)畫來分散用戶注意力,簡(jiǎn)單的動(dòng)畫可以為網(wǎng)頁(yè)爭(zhēng)取多5秒的時(shí)間,復(fù)雜的動(dòng)畫則可以爭(zhēng)取更多時(shí)間。在loading的時(shí)候就先把前幾屏的圖片加載上,跳轉(zhuǎn)到網(wǎng)頁(yè)后就可以直接呈現(xiàn)出來了。這種方式比讓用戶在空白首頁(yè)干等體驗(yàn)更好。美國(guó)研究生項(xiàng)目資訊網(wǎng)站上有五分之一的人承認(rèn)曾經(jīng)對(duì)”怠慢”自己的人發(fā)火,loading就是告訴我們的用戶,我們?cè)跒樗麄冎耄Mo他們更好的體驗(yàn)。

7、技術(shù)點(diǎn):?jiǎn)纹粱瑒?dòng)顯示

適用范圍:內(nèi)容或者色塊有明顯區(qū)分的

設(shè)備要求:無

PC網(wǎng)頁(yè)一般是直接垂直平鋪內(nèi)容的,取決于鼠標(biāo)和鍵盤的操作方式。不推薦內(nèi)容橫向平鋪,不方便查看,也不符合用戶使用習(xí)慣,除非有對(duì)鼠標(biāo)、鍵盤操作進(jìn)行相應(yīng)的設(shè)置修改,制作成本比較高。手機(jī)網(wǎng)頁(yè)的出現(xiàn)卻打破了這種僵局,豎向滑動(dòng)橫向滑動(dòng),對(duì)手機(jī)用戶來說都是非常習(xí)慣的操作了。但是必須引入單屏滑動(dòng)的概念,一滑一屏。豎向的可測(cè)試UP邀請(qǐng)函,橫向的可測(cè)試TGA官網(wǎng)。單屏滑動(dòng)要求每屏內(nèi)容不可過多,有合理的布局安排,如果內(nèi)容多且要求連貫性,則不適合。像邀請(qǐng)函這樣內(nèi)容不多,每塊的顏色也有明顯區(qū)分的設(shè)計(jì),用單屏滑動(dòng)更能凸顯品質(zhì)。

8、技術(shù)點(diǎn):游戲

適用范圍:結(jié)合產(chǎn)品特性給用戶帶來強(qiáng)交互體驗(yàn)

設(shè)備要求:中高端手機(jī)

手機(jī)網(wǎng)頁(yè)因?yàn)樵O(shè)備特性可以創(chuàng)造出很多特別的小游戲,如刮刮樂(canvas)、吹蠟燭(麥克風(fēng)api)、跟手3D圖像(sprite動(dòng)畫+手勢(shì))、接金幣(CSS3動(dòng)畫+Javascript+手勢(shì))等。這些小游戲不僅可以增強(qiáng)產(chǎn)品和用戶間的互動(dòng),還可以展示大公司的技術(shù)研究,帶來好的市場(chǎng)口碑,可謂一箭多雕。但也有缺點(diǎn):開發(fā)時(shí)間長(zhǎng),對(duì)設(shè)備要求也比較高。例如TGA官網(wǎng)前的接金幣小游戲,搭框架需要10天左右的時(shí)間。

對(duì)于游戲這一塊,也是我們TGideas網(wǎng)站重構(gòu)三組在努力探索的方向,相信以后可以給大家?guī)砀酶斓男∮螒颍?qǐng)關(guān)注后期的手機(jī)網(wǎng)頁(yè)小游戲探索。

9、技術(shù)點(diǎn):地理定位

適用范圍:需要結(jié)合地理位置不同展現(xiàn)的網(wǎng)頁(yè)

設(shè)備要求:無

功能跟地理位置息息相關(guān)的應(yīng)用例如大眾點(diǎn)評(píng)、地圖、滴滴打車等,都會(huì)先獲取用戶的位置再進(jìn)行匹配性內(nèi)容展示,網(wǎng)頁(yè)里有時(shí)候也可以利用這個(gè)功能。例如TGA的城市拉力賽里就應(yīng)用了地理定位,幫用戶快速定位到所在城市,而不需要進(jìn)行手動(dòng)選擇,立即給自己的城市加油。

10、技術(shù)點(diǎn):音頻使用

適用范圍:有特殊體驗(yàn)要求的

設(shè)備要求:中高端手機(jī)

聲音可以給用戶帶來更多新鮮體驗(yàn)。PC網(wǎng)頁(yè)對(duì)于聲音的應(yīng)用比較局限是因?yàn)榕_(tái)式機(jī)需要有耳機(jī)或者音響的輔助,手機(jī)網(wǎng)頁(yè)則很容易用聲音來吸引用戶注意。但是音頻壓縮大小和質(zhì)量還有待研究。TGA城市拉力賽里應(yīng)用了音頻作為用戶的驚喜體驗(yàn),期待得到的反饋。

11、手機(jī)強(qiáng)互動(dòng)形式新官網(wǎng)(上述多個(gè)技術(shù)點(diǎn)的綜合應(yīng)用)

適用范圍:每屏內(nèi)容適中,增加少許動(dòng)效提升品質(zhì)

設(shè)備要求:無

官網(wǎng)并不是只能規(guī)矩羅列平鋪直敘的。模塊和模塊之間可以使用單屏滑動(dòng)來銜接,模塊內(nèi)容比較多的情況可以橫向滑動(dòng)延伸。初次進(jìn)入官網(wǎng),首屏內(nèi)的元素利用CSS3動(dòng)畫制作酷炫效果,官網(wǎng)不再單調(diào)!


上面介紹的都只是手機(jī)互動(dòng)網(wǎng)頁(yè)的冰山一角,更多的還需要產(chǎn)品+設(shè)計(jì)+前端一起去探索和研究,掌握了基礎(chǔ)的知識(shí)點(diǎn)之后,相互組合迸發(fā)出的新事物,就是我們用心創(chuàng)造快樂的結(jié)果了。

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/id1997.html
揭秘那些隱藏在背后的交互設(shè)計(jì)
手機(jī)互動(dòng)網(wǎng)頁(yè)項(xiàng)目設(shè)計(jì)總結(jié)(下)
×