起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure：模擬豆瓣電影APP滑動點擊切換主頁
本文作者用Axure模擬豆瓣電影APP滑動點擊切換主頁。enjoy~
前期準備：手機截屏兩張主頁圖，Photoshop切圖
截屏不用教了吧，我的是安卓手機 分辨率是1080*1680，和iPhone6 plus一樣的分辨率，所以在這里用了iPhones plus的元件當背景。
Photoshop不用怕，先沿著標尺拉上幾條參考輔助線
放大精確到像素
OK，這些輔助線是為了等會切圖方便快捷。
點開切圖工具，沿著輔助線拉矩形，切正在熱映、即將上映、黑色條，黑條下面整個主頁。
點擊文件-導出-儲存為web格式，選擇jpeg格式-確定。
從文件夾拉第二張截圖拖進第一張截圖上面，確定。
直接點擊文件-導出-儲存為web格式，選擇jpeg格式-確定。
此時，桌面上應該有個images文件夾，刪除多余圖片，命名，如圖：
來Axure
事先創建一個iPhone 6 plus 元件，不懂就Google 百度，或者不用也可以。
調整到合適大小
圖片元件覆蓋黑色屏幕，調整圓角，雙擊插入截屏一，像Photoshop那樣沿著標尺拉輔助線
接下來逐步插入圖片（錄制的GIF文件過大，壓縮后還不行，于是又在播放大段GIF文件時錄制幾個小段GIF ?哭）
首先插入正在熱映黑字
按住ctrl+alt 拖動復制，雙擊插入即將上映灰字
同理，插入黑色滑塊
插入一個白色無邊矩形蓋住截屏一那個黑色滑塊，拖到第三層，等會我們的黑色滑塊滑動時就不會看到截屏一的黑色滑塊了。
首先看截屏一背景的長度，我的這里是337，點鎖定長寬比，插入正在熱映主頁，改長度為337，就和背景一樣大了，拖動調整。
將所有東西命名更條理，將上面插入的主頁轉為動態面板，取消自動調整為內容尺寸，添加狀態，復制正在熱映主頁，進入狀態2粘貼，然后雙擊插入即將上映主頁。
命名一下動態面板和狀態
同理，將正在熱映黑字轉為動態面板，添加狀態，復制粘貼，雙擊插入正在熱映灰字。
同理將即將上映灰字轉為動態面板，添加狀態，復制粘貼，雙擊插入即將上映黑字。
檢查一下
開始交互
當主頁向左滑動結束時
先設置條件，只有主頁是正在熱映才能執行這些交互
設置主頁動態面板狀態：即將上映主頁向左滑動
看黑色滑塊長度為168，設置移動相對位置168，0，線性進入（即沿著橫坐標向正方向移動168）
設置動態面板狀態，逐漸顯示即將上映黑字，正在熱映灰字。
同理設置向右拖動結束時，條件：只有主頁是即將上映才能執行這些交互
正在熱映主頁向右滑動，黑色滑塊線性移動（-168，0），顯示動態面板：黑字正在熱映，灰字即將上映。
現在設置單擊事件
只有當主頁處于即將上映時，點擊灰字正在熱映，那么主頁正在熱映向右滑動；
黑色滑塊相對移動（-168，0），顯示黑字正在熱映，灰字即將上映。
以此類推，只有當主頁處于正在熱映時，點擊灰字即將上映，那么主頁即將上映向左滑動，黑色滑塊相對移動（168，0），顯示黑字即將上映，灰字正在熱映。
OK，預覽一下。
幾點說明：
首先我的方法肯定不是效率最高的。
Axure是個表現工具，不是實現工具，只要能表現出來就好，就像我用白色矩形遮住截屏黑色滑塊那樣，對一些強迫癥來說，這肯定不是最完美的，但是我覺得只要這個交互表現出來就好了。
還有，設置條件主要是為了不讓黑色滑塊移動到手機外面去。
加上我上一篇文章的知識，這個APP的交互就可以搞定一大半了。
謝謝~
本文由 @kevin?原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Pixabay，基于 CC0 協議
- 目前還沒評論，等你發揮！
