中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

最近支付寶進行了一次比較大的版本更新，引起了很多人的關注，無論從視覺還是交互體驗上都有了很大的改變，但是從原型制作來說，其實比之前更加簡單了。

通過臨摹這些知名廠商的產品，是快速進步的一種方式，可以更好的借鑒他們的交互與邏輯，比體驗觀看，更能深刻的理解，從而更好的改進自己的產品。

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

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

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

對于臨摹來說，事先無需過多分析，了解一下大致交互，直接上手就可以。

工具：iH5

材料準備：用手機把新版支付截屏，調到PS用切片把其分為各個模塊，如導航欄，對話框等等。

Step1：頁面切換

描述：底部導航的切換交互，跳轉頁面并且圖標變?yōu)樗{色?？梢杂命c擊事件控制兩種狀態(tài)，一是遮罩的移動，二是頁面的跳轉。

新建時間軸，在其下面新建一個畫布，將藍色與灰色兩個底部導航欄，以及一個與圖標大小的白色矩形，放入其中，在藍色導航圖片的屬性——遮罩，選擇白色矩形。然后在矩形下建立軌跡，四個關鍵幀分別對應四個圖標。

在舞臺上建四個頁面用來存放導航里的內容。

在圖標位置添加透明按鈕，在其下方添加事件，當輕觸時跳轉頁面，以及跳轉到該時間軸的某一幀。

Step2：浮動導航

描述：當頁面滑動一段距離，頂部導航欄發(fā)生變換。通過監(jiān)測時間軸滑動的時間，來觸發(fā)菜單欄的更換。

在頁面一，新建滑動時間軸，所有素材放入其中，將兩個頂部導航疊放在一起，為內容添加軌跡，讓其讓下滑動，一秒時滑動到底部，為初始默認的導航添加兩個事件，當滑動時間軸滑動0.1秒時，置于底層，當時間為0時，至于頂層。

Step3：滑動切換

描述：類似圖片的輪播效果，將未顯示的圖片放在屏幕之外或者隱藏，通過手指的左右滑動來控制圖片的進出。

在頁面二，把準備好三張輪播的圖，帶有三個鏤空圓點的PNG圖片，以及一個大小與圓點差不多的矩形，都放入滑動時間軸下面，新建軌跡，創(chuàng)建三個關鍵幀，通過調整圖片坐標來控制在每一幀上顯示的圖片，當你滑動時，就會出現(xiàn)圖片的輪播效果，如果需要在圖片上加入鏈接，直接在該圖片添加點擊事件，動作設置為跳轉頁面即可。

Step4：彈框

描述：點擊按鈕時彈框出現(xiàn)，然后點擊其周圍彈框消失。為彈框設置好動畫之后，利用事件，來控制其正向與反向播放即可。

在頁面三上，準備一張黑背景圖片以及設計好的彈框，將其放入時間軸下，利用軌跡制作出想要的效果，在背景上的“+”添加一個透明按鈕，增加一個事件，當點擊時讓該時間軸從頭播放，然后在黑色背景下添加同樣的事件，把動作改為反向播放。

其他的一些交互無外乎都是頁面的跳轉，原型制作上并沒有多少壓力。

制作完成之后，就可發(fā)布了，會生成一個網址鏈接與二維碼，可以在線編輯與查看。

總結：

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

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