TechRoomage

Axure:模擬豆瓣電影APP滑動點擊切換主頁

0 1

原標題:Axure:模擬豆瓣電影APP滑動點擊切換主頁

本文作者用Axure模擬豆瓣電影APP滑動點擊切換主頁。enjoy~

Axure:模擬豆瓣電影APP滑動點擊切換主頁

Axure:模擬豆瓣電影APP滑動點擊切換主頁

前期準備:手機截屏兩張主頁圖,Photoshop切圖

截屏不用教了吧,我的是安卓手機 解析度是1080*1680,和iPhone6 plus一樣的解析度,所以在這裡用了iPhones plus的元件當背景。

Photoshop不用怕,先沿著標尺拉上幾條參考輔助線

Axure:模擬豆瓣電影APP滑動點擊切換主頁

放大精確到像素

Axure:模擬豆瓣電影APP滑動點擊切換主頁

OK,這些輔助線是為了等會切圖方便快捷。

Axure:模擬豆瓣電影APP滑動點擊切換主頁

點開切圖工具,沿著輔助線拉矩形,切正在熱映、即將上映、黑色條,黑條下面整個主頁。

點擊文件-導出-儲存為web格式,選擇jpeg格式-確定。

Axure:模擬豆瓣電影APP滑動點擊切換主頁

從文件夾拉第二張截圖拖進第一張截圖上面,確定。

Axure:模擬豆瓣電影APP滑動點擊切換主頁

直接點擊文件-導出-儲存為web格式,選擇jpeg格式-確定。

此時,桌面上應該有個images文件夾,刪除多餘圖片,命名,如圖:

Axure:模擬豆瓣電影APP滑動點擊切換主頁

來Axure

事先創建一個iPhone 6 plus 元件,不懂就Google 百度,或者不用也可以。

調整到合適大小

Axure:模擬豆瓣電影APP滑動點擊切換主頁

Axure:模擬豆瓣電影APP滑動點擊切換主頁

圖片元件覆蓋黑色屏幕,調整圓角,雙擊插入截屏一,像Photoshop那樣沿著標尺拉輔助線

Axure:模擬豆瓣電影APP滑動點擊切換主頁

接下來逐步插入圖片(錄製的GIF文件過大,壓縮后還不行,於是又在播放大段GIF文件時錄製幾個小段GIF

Axure:模擬豆瓣電影APP滑動點擊切換主頁

哭)

首先插入正在熱映黑字

按住ctrl+alt 拖動複製,雙擊插入即將上映灰字

Axure:模擬豆瓣電影APP滑動點擊切換主頁

同理,插入黑色滑塊

Axure:模擬豆瓣電影APP滑動點擊切換主頁

插入一個白色無邊矩形蓋住截屏一那個黑色滑塊,拖到第三層,等會我們的黑色滑塊滑動時就不會看到截屏一的黑色滑塊了。

Axure:模擬豆瓣電影APP滑動點擊切換主頁

首先看截屏一背景的長度,我的這裡是337,點鎖定長寬比,插入正在熱映主頁,改長度為337,就和背景一樣大了,拖動調整。

將所有東西命名更條理,將上面插入的主頁轉為動態面板,取消自動調整為內容尺寸,添加狀態,複製正在熱映主頁,進入狀態2粘貼,然後雙擊插入即將上映主頁。

Axure:模擬豆瓣電影APP滑動點擊切換主頁

命名一下動態面板和狀態

Axure:模擬豆瓣電影APP滑動點擊切換主頁

同理,將正在熱映黑字轉為動態面板,添加狀態,複製粘貼,雙擊插入正在熱映灰字。

Axure:模擬豆瓣電影APP滑動點擊切換主頁

同理將即將上映灰字轉為動態面板,添加狀態,複製粘貼,雙擊插入即將上映黑字。

檢查一下

Axure:模擬豆瓣電影APP滑動點擊切換主頁

開始交互

當主頁向左滑動結束時

先設置條件,只有主頁是正在熱映才能執行這些交互

設置主頁動態面板狀態:即將上映主頁向左滑動

Axure:模擬豆瓣電影APP滑動點擊切換主頁

看黑色滑塊長度為168,設置移動相對位置168,0,線性進入(即沿著橫坐標向正方向移動168)

設置動態面板狀態,逐漸顯示即將上映黑字,正在熱映灰字。

Axure:模擬豆瓣電影APP滑動點擊切換主頁

同理設置向右拖動結束時,條件:只有主頁是即將上映才能執行這些交互

正在熱映主頁向右滑動,黑色滑塊線性移動(-168,0),顯示動態面板:黑字正在熱映,灰字即將上映。

現在設置單擊事件

只有當主頁處於即將上映時,點擊灰字正在熱映,那麼主頁正在熱映向右滑動;

Axure:模擬豆瓣電影APP滑動點擊切換主頁

黑色滑塊相對移動(-168,0),顯示黑字正在熱映,灰字即將上映。

Axure:模擬豆瓣電影APP滑動點擊切換主頁

以此類推,只有當主頁處於正在熱映時,點擊灰字即將上映,那麼主頁即將上映向左滑動,黑色滑塊相對移動(168,0),顯示黑字即將上映,灰字正在熱映。

OK,預覽一下。

幾點說明:

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

Axure是個表現工具,不是實現工具,只要能表現出來就好,就像我用白色矩形遮住截屏黑色滑塊那樣,對一些強迫症來說,這肯定不是最完美的,但是我覺得只要這個交互表現出來就好了。

還有,設置條件主要是為了不讓黑色滑塊移動到手機外面去。

加上我上一篇文章的知識,這個APP的交互就可以搞定一大半了。

謝謝~

本文由 @kevin 原創發佈於人人都是產品經理。未經許可,禁止轉載。

題圖來自 Pixabay,基於 CC0 協議

Leave A Reply

Your email address will not be published.