本文作者用Axure模擬豆瓣電影APP滑動(dòng)點(diǎn)擊切換主頁。enjoy~

前期準(zhǔn)備：手機(jī)截屏兩張主頁圖，Photoshop切圖

截屏不用教了吧，我的是安卓手機(jī) 分辨率是1080*1680，和iPhone6 plus一樣的分辨率，所以在這里用了iPhones plus的元件當(dāng)背景。

Photoshop不用怕，先沿著標(biāo)尺拉上幾條參考輔助線

放大精確到像素

OK，這些輔助線是為了等會(huì)切圖方便快捷。

點(diǎn)開切圖工具，沿著輔助線拉矩形，切正在熱映、即將上映、黑色條，黑條下面整個(gè)主頁。

點(diǎn)擊文件-導(dǎo)出-儲(chǔ)存為web格式，選擇jpeg格式-確定。

從文件夾拉第二張截圖拖進(jìn)第一張截圖上面，確定。

直接點(diǎn)擊文件-導(dǎo)出-儲(chǔ)存為web格式，選擇jpeg格式-確定。

此時(shí)，桌面上應(yīng)該有個(gè)images文件夾，刪除多余圖片，命名，如圖：

來Axure

事先創(chuàng)建一個(gè)iPhone 6 plus 元件，不懂就Google 百度，或者不用也可以。

調(diào)整到合適大小

圖片元件覆蓋黑色屏幕，調(diào)整圓角，雙擊插入截屏一，像Photoshop那樣沿著標(biāo)尺拉輔助線

接下來逐步插入圖片（錄制的GIF文件過大，壓縮后還不行，于是又在播放大段GIF文件時(shí)錄制幾個(gè)小段GIF ?哭）

首先插入正在熱映黑字

按住ctrl+alt 拖動(dòng)復(fù)制，雙擊插入即將上映灰字

同理，插入黑色滑塊

插入一個(gè)白色無邊矩形蓋住截屏一那個(gè)黑色滑塊，拖到第三層，等會(huì)我們的黑色滑塊滑動(dòng)時(shí)就不會(huì)看到截屏一的黑色滑塊了。

首先看截屏一背景的長度，我的這里是337，點(diǎn)鎖定長寬比，插入正在熱映主頁，改長度為337，就和背景一樣大了，拖動(dòng)調(diào)整。

將所有東西命名更條理，將上面插入的主頁轉(zhuǎn)為動(dòng)態(tài)面板，取消自動(dòng)調(diào)整為內(nèi)容尺寸，添加狀態(tài)，復(fù)制正在熱映主頁，進(jìn)入狀態(tài)2粘貼，然后雙擊插入即將上映主頁。

命名一下動(dòng)態(tài)面板和狀態(tài)

同理，將正在熱映黑字轉(zhuǎn)為動(dòng)態(tài)面板，添加狀態(tài)，復(fù)制粘貼，雙擊插入正在熱映灰字。

同理將即將上映灰字轉(zhuǎn)為動(dòng)態(tài)面板，添加狀態(tài)，復(fù)制粘貼，雙擊插入即將上映黑字。

檢查一下

開始交互

當(dāng)主頁向左滑動(dòng)結(jié)束時(shí)

先設(shè)置條件，只有主頁是正在熱映才能執(zhí)行這些交互

設(shè)置主頁動(dòng)態(tài)面板狀態(tài)：即將上映主頁向左滑動(dòng)

看黑色滑塊長度為168，設(shè)置移動(dòng)相對(duì)位置168，0，線性進(jìn)入（即沿著橫坐標(biāo)向正方向移動(dòng)168）

設(shè)置動(dòng)態(tài)面板狀態(tài)，逐漸顯示即將上映黑字，正在熱映灰字。

同理設(shè)置向右拖動(dòng)結(jié)束時(shí)，條件：只有主頁是即將上映才能執(zhí)行這些交互

正在熱映主頁向右滑動(dòng)，黑色滑塊線性移動(dòng)（-168，0），顯示動(dòng)態(tài)面板：黑字正在熱映，灰字即將上映。

現(xiàn)在設(shè)置單擊事件

只有當(dāng)主頁處于即將上映時(shí)，點(diǎn)擊灰字正在熱映，那么主頁正在熱映向右滑動(dòng)；

黑色滑塊相對(duì)移動(dòng)（-168，0），顯示黑字正在熱映，灰字即將上映。

以此類推，只有當(dāng)主頁處于正在熱映時(shí)，點(diǎn)擊灰字即將上映，那么主頁即將上映向左滑動(dòng)，黑色滑塊相對(duì)移動(dòng)（168，0），顯示黑字即將上映，灰字正在熱映。

OK，預(yù)覽一下。

幾點(diǎn)說明：

首先我的方法肯定不是效率最高的。

Axure是個(gè)表現(xiàn)工具，不是實(shí)現(xiàn)工具，只要能表現(xiàn)出來就好，就像我用白色矩形遮住截屏黑色滑塊那樣，對(duì)一些強(qiáng)迫癥來說，這肯定不是最完美的，但是我覺得只要這個(gè)交互表現(xiàn)出來就好了。

還有，設(shè)置條件主要是為了不讓黑色滑塊移動(dòng)到手機(jī)外面去。

加上我上一篇文章的知識(shí)，這個(gè)APP的交互就可以搞定一大半了。

謝謝~

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

題圖來自 Pixabay，基于 CC0 協(xié)議