整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          我用HTML5工具,做了一個(gè)支付寶9.9版的原型

          具的選擇不是越多人用越好。像Axure這類專業(yè)的原型制作軟件,在標(biāo)尺、對(duì)齊上面,是iH5遠(yuǎn)比不上的。但后者在與人溝通以及查看時(shí)有著優(yōu)勢(shì)。

          最近支付寶進(jìn)行了一次比較大的版本更新,引起了很多人的關(guān)注,無(wú)論從視覺(jué)還是交互體驗(yàn)上都有了很大的改變,但是從原型制作來(lái)說(shuō),其實(shí)比之前更加簡(jiǎn)單了。

          通過(guò)臨摹這些知名廠商的產(chǎn)品,是快速進(jìn)步的一種方式,可以更好的借鑒他們的交互與邏輯,比體驗(yàn)觀看,更能深刻的理解,從而更好的改進(jìn)自己的產(chǎn)品。

          說(shuō)到原型,很多人就會(huì)想到Axure,這類常用的原型工具,他們使用的都是HTML規(guī)范,動(dòng)效以及交互大部分引入的jQuery庫(kù)或者封裝的JS庫(kù),其效果可以在軟件預(yù)覽以及導(dǎo)出HTML文件在瀏覽器預(yù)覽,同樣類別的還有Justinmind等等。

          與其原理類似的也有很多,如定位于開發(fā)工具的Animate,其動(dòng)畫效果比Axure要強(qiáng)大的多,以及谷歌的web design,還有向國(guó)內(nèi)線上制作平臺(tái)的iH5,他們面向的是基礎(chǔ)交互,可自由編輯度高,不僅可以做出H5實(shí)例,同樣也可以用于原型。

          這些工具可以分為線上與離線兩種制作方式,我個(gè)人偏向使用線上的制作工具,因?yàn)殡x線工具生成的原型不方便發(fā)給別人那看,而且制作嚴(yán)重依賴于軟件安裝,不便與即時(shí)查看與他人溝通。

          對(duì)于臨摹來(lái)說(shuō),事先無(wú)需過(guò)多分析,了解一下大致交互,直接上手就可以。

          工具:iH5

          材料準(zhǔn)備:用手機(jī)把新版支付截屏,調(diào)到PS用切片把其分為各個(gè)模塊,如導(dǎo)航欄,對(duì)話框等等。

          Step1:頁(yè)面切換

          描述:底部導(dǎo)航的切換交互,跳轉(zhuǎn)頁(yè)面并且圖標(biāo)變?yōu)樗{(lán)色。可以用點(diǎn)擊事件控制兩種狀態(tài),一是遮罩的移動(dòng),二是頁(yè)面的跳轉(zhuǎn)。

          新建時(shí)間軸,在其下面新建一個(gè)畫布,將藍(lán)色與灰色兩個(gè)底部導(dǎo)航欄,以及一個(gè)與圖標(biāo)大小的白色矩形,放入其中,在藍(lán)色導(dǎo)航圖片的屬性——遮罩,選擇白色矩形。然后在矩形下建立軌跡,四個(gè)關(guān)鍵幀分別對(duì)應(yīng)四個(gè)圖標(biāo)。

          在舞臺(tái)上建四個(gè)頁(yè)面用來(lái)存放導(dǎo)航里的內(nèi)容。

          在圖標(biāo)位置添加透明按鈕,在其下方添加事件,當(dāng)輕觸時(shí)跳轉(zhuǎn)頁(yè)面,以及跳轉(zhuǎn)到該時(shí)間軸的某一幀。

          Step2:浮動(dòng)導(dǎo)航

          描述:當(dāng)頁(yè)面滑動(dòng)一段距離,頂部導(dǎo)航欄發(fā)生變換。通過(guò)監(jiān)測(cè)時(shí)間軸滑動(dòng)的時(shí)間,來(lái)觸發(fā)菜單欄的更換。

          在頁(yè)面一,新建滑動(dòng)時(shí)間軸,所有素材放入其中,將兩個(gè)頂部導(dǎo)航疊放在一起,為內(nèi)容添加軌跡,讓其讓下滑動(dòng),一秒時(shí)滑動(dòng)到底部,為初始默認(rèn)的導(dǎo)航添加兩個(gè)事件,當(dāng)滑動(dòng)時(shí)間軸滑動(dòng)0.1秒時(shí),置于底層,當(dāng)時(shí)間為0時(shí),至于頂層。

          Step3:滑動(dòng)切換

          描述:類似圖片的輪播效果,將未顯示的圖片放在屏幕之外或者隱藏,通過(guò)手指的左右滑動(dòng)來(lái)控制圖片的進(jìn)出。

          在頁(yè)面二,把準(zhǔn)備好三張輪播的圖,帶有三個(gè)鏤空?qǐng)A點(diǎn)的PNG圖片,以及一個(gè)大小與圓點(diǎn)差不多的矩形,都放入滑動(dòng)時(shí)間軸下面,新建軌跡,創(chuàng)建三個(gè)關(guān)鍵幀,通過(guò)調(diào)整圖片坐標(biāo)來(lái)控制在每一幀上顯示的圖片,當(dāng)你滑動(dòng)時(shí),就會(huì)出現(xiàn)圖片的輪播效果,如果需要在圖片上加入鏈接,直接在該圖片添加點(diǎn)擊事件,動(dòng)作設(shè)置為跳轉(zhuǎn)頁(yè)面即可。

          Step4:彈框

          描述:點(diǎn)擊按鈕時(shí)彈框出現(xiàn),然后點(diǎn)擊其周圍彈框消失。為彈框設(shè)置好動(dòng)畫之后,利用事件,來(lái)控制其正向與反向播放即可。

          在頁(yè)面三上,準(zhǔn)備一張黑背景圖片以及設(shè)計(jì)好的彈框,將其放入時(shí)間軸下,利用軌跡制作出想要的效果,在背景上的“+”添加一個(gè)透明按鈕,增加一個(gè)事件,當(dāng)點(diǎn)擊時(shí)讓該時(shí)間軸從頭播放,然后在黑色背景下添加同樣的事件,把動(dòng)作改為反向播放。

          其他的一些交互無(wú)外乎都是頁(yè)面的跳轉(zhuǎn),原型制作上并沒(méi)有多少壓力。

          制作完成之后,就可發(fā)布了,會(huì)生成一個(gè)網(wǎng)址鏈接與二維碼,可以在線編輯與查看。

          總結(jié):

          工欲善其事,必先利其器,工具的選擇不是越多人用越好。像Axure這類專業(yè)的原型制作軟件,在標(biāo)尺、對(duì)齊上面,是上面所使用的iH5遠(yuǎn)比不上的(后者得通過(guò)x|y坐標(biāo)等精確控制),而且其還擁有眾多有手機(jī)圖標(biāo)等模板,可以大大加快原型制作,但后者在與人溝通以及查看時(shí)有著優(yōu)勢(shì),并且隨著H5營(yíng)銷的流行,其也可以快速制作出相關(guān)的營(yíng)銷案例,并迅速在網(wǎng)上傳播,不用再依靠別人,或者重新學(xué)習(xí)其他制作工具,擁有更多的可操作性。

          本文由 @iood 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

          TML5在國(guó)內(nèi)一般稱為H5,指的是HTML5網(wǎng)頁(yè),比如前兩年大火的小游戲《圍住神經(jīng)貓,就是H5網(wǎng)頁(yè)的一種。近期比較出名還有看看新聞通過(guò)www.ih5.cn制作的H5《和宋仲基結(jié)婚合成器》,一天內(nèi)瀏覽量破250萬(wàn)。

          如果細(xì)心地觀察那些閱讀轉(zhuǎn)發(fā)破萬(wàn)的H5,它們除了本身極具特色的創(chuàng)意之外,排版與動(dòng)效功能的應(yīng)用也是恰到好處。

          所以今天我們就分別從【動(dòng)效】來(lái)給大家闡釋,如何讓自己創(chuàng)作的H5更具傳播性。

          ·

          如今的消費(fèi)者幾乎手機(jī)不離身,手機(jī)移動(dòng)端H5對(duì)公司宣傳的影響愈加明顯,可移動(dòng)端相對(duì)于PC端與紙媒等其他渠道而言,具有以下幾點(diǎn)特性:

          為了大大降低這些特征對(duì)H5內(nèi)容閱讀吸引力的影響,針對(duì)不同的問(wèn)題,我們可以在H5內(nèi)容中添加相對(duì)應(yīng)的動(dòng)效,以達(dá)到優(yōu)化的作用:

          1、動(dòng)效的作用

          總結(jié)而言,動(dòng)效對(duì)H5頁(yè)面的作用主要體現(xiàn)在兩個(gè)方面,分別為功能性以及趣味性

          功能性:

          (1)引導(dǎo)用戶進(jìn)行點(diǎn)擊、翻頁(yè)等動(dòng)作

          (2)吸引用戶并讓其做長(zhǎng)時(shí)間的視覺(jué)停留;

          趣味性:通過(guò)一些充滿趣味的特效,讓用戶的體驗(yàn)變得真正愉快以及難忘。

          2、動(dòng)效的類型

          在H5內(nèi)容展示中常見(jiàn)的動(dòng)效有:移位、旋轉(zhuǎn)、翻轉(zhuǎn)、縮放、逐楨、淡入淡出、粒子效果、3D等,而我們能大致地將這些動(dòng)效分為基礎(chǔ)特效、招牌特效以及高難度特效三種類別。

          (1)基礎(chǔ)動(dòng)效

          基礎(chǔ)動(dòng)效分為指向性動(dòng)效和空間展示動(dòng)效,具體表現(xiàn)在:

          指向性動(dòng)效——H5元素的出現(xiàn)、滑動(dòng)、彈出等

          空間展示動(dòng)效——頁(yè)面的切換、翻動(dòng)和放大。

          基礎(chǔ)動(dòng)效最重要的目的是要讓用戶感到毫無(wú)負(fù)擔(dān),順應(yīng)自然規(guī)律,此類動(dòng)效無(wú)需做到奪人眼球,而是要讓動(dòng)效舒服流暢。

          為了能讓大家更直觀地理解基礎(chǔ)特效的效果,不妨來(lái)看看下面這些關(guān)于動(dòng)效設(shè)計(jì)中的物理關(guān)系。

          首先,我們要理解“顏色是有重量的”,如下圖所示,隨著明度和飽和度的升高,顏色的重量在下降:

          此外,物理規(guī)律也是動(dòng)效考慮的關(guān)鍵因素。看起來(lái)舒服的動(dòng)效,一定是符合真實(shí)物理運(yùn)動(dòng)規(guī)律的,比如小球從上往下掉,加速運(yùn)動(dòng)要比勻速運(yùn)動(dòng)更符合人眼的認(rèn)知。

          (2)招牌動(dòng)效

          招牌動(dòng)效是基于基本動(dòng)作有選擇性的差異化展現(xiàn),就像一個(gè)個(gè)有個(gè)性的Pose,讓用戶眼前一亮,建立對(duì)界面的獨(dú)特印象。

          這類動(dòng)效目的是主要為了加深用戶印象,但需要注意夸張個(gè)性化的表現(xiàn),以及對(duì)于動(dòng)效節(jié)奏的把控。

          (3)高難度動(dòng)效

          高難度動(dòng)效主要的目的是為了加深用戶印象。如果運(yùn)用在H5中會(huì)很酷很炫,可以讓用戶做長(zhǎng)時(shí)間的視覺(jué)停留,但是也是起到錦上添花、畫龍點(diǎn)睛的作用,需要根據(jù)切實(shí)需要來(lái)進(jìn)行設(shè)計(jì)。

          有時(shí)候大家會(huì)覺(jué)得這些酷炫的動(dòng)效很難實(shí)現(xiàn),其實(shí)如果你仔細(xì)分析,會(huì)發(fā)現(xiàn)他們都是基礎(chǔ)動(dòng)效的排列組合。比如下面這兩個(gè)動(dòng)效,只要拆分成不同的層,就能發(fā)現(xiàn)其中只是不同層之間平移和縮放的組合。

          以上,僅是一些制作經(jīng)驗(yàn)和思路分享,不過(guò)具體的情況還得具體分析,排版與動(dòng)效的表現(xiàn)形式錯(cuò)綜復(fù)雜,只有找到合適自己創(chuàng)作風(fēng)格的才能打動(dòng)讀者。

          【附:HTML5制作,建議使用www.ih5.cn,國(guó)內(nèi)唯一提供可視化物理引擎、微信付費(fèi)點(diǎn)、微信紅包等功能的H5頁(yè)面制作云服務(wù)平臺(tái)。】


          者: 卡特

          轉(zhuǎn)發(fā)鏈接:https://mp.weixin.qq.com/s/7g6hajYAvPBUQvGnPR3aag


          主站蜘蛛池模板: 无码乱人伦一区二区亚洲| 日本韩国一区二区三区| 亚洲一区二区三区乱码在线欧洲| 无码人妻精品一区二区三区久久久| 国产成人AV区一区二区三| 99国产精品一区二区| 无码国产精品久久一区免费| 日本不卡一区二区视频a| 国产一区二区三区免费在线观看| 日韩精品乱码AV一区二区| 少妇人妻偷人精品一区二区| 美女视频黄a视频全免费网站一区| 台湾无码一区二区| 久久亚洲国产精品一区二区| 婷婷国产成人精品一区二| 国精产品一区一区三区MBA下载| 91视频一区二区| 蜜桃臀无码内射一区二区三区| 一区二区三区美女视频| 精品一区二区三区视频在线观看 | 亚洲乱码国产一区三区| 日本一道一区二区免费看| 无码少妇一区二区浪潮免费| 无码播放一区二区三区| 日韩一区二区超清视频| 中文字幕av人妻少妇一区二区| 精品人妻AV一区二区三区 | 日韩一区二区电影| 中文字幕精品一区二区三区视频| 人成精品视频三区二区一区| 精品在线视频一区| 爆乳熟妇一区二区三区霸乳| 中文字幕一区二区人妻| 无码人妻一区二区三区免费看| 亚洲一区二区三区高清| 亚洲综合无码一区二区痴汉| 性色av无码免费一区二区三区| 国产成人高清亚洲一区久久| 国产福利电影一区二区三区久久老子无码午夜伦不 | 波多野结衣一区二区三区aV高清| 搜日本一区二区三区免费高清视频 |