【新手指南】App原型設計：如何快速實現這6種互動效果？
做 App原型設計 ，那麼頁面切換、進度條、頁面滾動、圖片輪播，下拉選單，搜尋框這些互動效果必不可少。如何簡單快速地實現這些效果呢？以下小編根據經驗為大家提供了一些簡單的設計方法，以供參考。
這裡沒有顯示動態圖，可在 原文 中檢視所有動態圖效果。
1.
頁面跳轉
頁面跳轉
作為一款 App原型設計 ， 頁面跳轉 必不可少。如何快速實現頁面間快速跳轉的效果？小編最近在使用Mockplus製作原型設計，以下就以該工具為依託為大家介紹一種簡單的設計方法。
設計步驟
Step 1： 點選觸發頁面跳轉的元件。
Step 2： 拖拽（點選後不放手）元件上的連結點，直至右側專案樹中某個頁面上。
Step 3： 互動已經設定完成，即可演示預覽頁面跳轉效果。
2.
進度條
進度條
做過App原型設計的設計師都知道，在適當的場景中使用 進度條 可以使產品更“人性化”，從而減少使用者的不確定心理，願意等待頁面載入。但是對於設計師來說，如何利用原型設計工具來製作進度條？設計過程繁瑣嗎？以下有個設計方法供大家參考。
設計步驟
Step 1： 從左側元件庫拖出2個形狀元件，1個按鈕元件。
Step 2： 調整兩個形狀元件為相同寬度的長方形，水平相連放置，並去掉元件接觸面的邊框線。
Step 3： 將2個形狀元件設定為不同的顏色。
Step 4： 設定互動。
a.點選按鈕，將連結點拖至左邊形狀元件做互動。設定觸發方式為點選，互動為調整尺寸並保持高度不變。在互動面板中加寬至右邊形狀的寬度。
b. 同理設定按鈕對右邊形狀元件的互動，注意右邊形狀的加寬設定應為負值。
Step5： 設定位移。開啟右側互動面板中，左邊形狀元件的尺寸調整方式設 為預設，右邊形狀元件的尺寸調整方式設為向左。
Step 6: 互動設定完成，點選按鈕即可預覽進度條效果。
3.
頁面滾動
頁面滾動
隨著移動端的快速發展和日益普及，我相信很多人都享受著它帶來的便利。在我們瀏覽這些移動端App時，最多的操作是什麼？對，就是滾動頁面。設計師在進行APP原型設計時，如何實現 頁面的滾動效果 ？其實，在一個滾動區裡放幾個元件就解決了？不信？不妨讓我們一起看看如何操作吧！
設計步驟
Step 1： 從左側元件庫中拖出滾動區元件放置工作區。
Step 2： 雙擊滾動區進入滾動區編輯狀態，點選滾動條右側的+號可拉長滾動區，放置更多的內容。
Step 3： 點選空白區域推出編輯狀態。
Step 4： 點選演示即可預覽頁面滾動效果。
PS: 若想實現滾動區外懸浮效果，可以在結束編輯後將需懸浮的元件放置在滾動區外即可。
Mockplus做原型
4.
圖片輪播
圖片輪播
圖片輪播一般用於App原型設計的主頁，用來展示網站資訊或商品詳情的圖片集合。如何使這些圖片進行輪播呢？在Mockplus這款快速 原型設計工具 中，它為設計師直接提供了圖片輪播元件，可以直接拖放到工作區中進行使用。
a. 自動輪播效果
Step 1： 從左側元件庫將圖片輪播元件拖至工作區內。
Step 2： 雙擊元件進行圖片新增，可選擇一或多張。
Step 3： 在右側屬性面板中可設定動畫效果，播放間隔，是否自動播放。
Step 4： 設定完成後即可預覽輪播效果。
b.手動輪播效果
Step 1： 從庫中拖出滾動區元件至工作區，設定為橫向滾動區雙擊後開始編輯。
Step 2： 從元件庫中選擇圖片或文字元件放至滾動區內，自定義內容排版。
Step 3： 編輯時若滾動區放不下所展示內容或編輯區過大時，可點選下方滾動條”+”“-”進行調整。
Step 4： 編輯完成後點選滾動區外部退出，根據演示區域調整滾動區所佔區域大小。
Step 5： 點選演示即可預覽圖片輪播效果。
5.
下拉選單
下拉選單通常適用於在原型設計中陳列一些需要展示的子頁面，相當於一個子導航選單。這種互動效果一般適用於部落格內容分類、電商網站商品陳列等情況。下拉選單的形式多種多樣，但最令設計師最頭疼的還是手風琴選單效果。即使是利用功能強大的Axure，想實現該效果也比較麻煩。但是利用Mockplus的“面板”元件，可以快速地做一個 手風琴選單 。
設計步驟
Step 1： 從左側元件庫中選擇面板元件拖放至工作區，具體選單樣式可自定義。
Step 2： 設定互動。
a. 面板1，連結到自己，調整大小。連結到面板2，位移。連結到面板3，位移。
b. 面板2，連結到自己，調整的大小。連結到面板3，位移。
c. 面板3，連結到自己，調整大小。
Step 3： 互動設定完成，可演示檢視手風琴選單效果。
6.
搜尋框
搜尋框
無論是Web端還是App原型設計，搜尋框都是原型中比較重要的部分。一個好的搜尋框和 搜尋模式 可以幫助使用者快速找到所需的東西，從而帶給使用者極棒的體驗。如何利用原型設計工具製作一款簡潔好用的搜尋框呢？
搜尋框一般分為以下兩種效果：
a.常規搜尋
Mockplus直接提供的搜尋框元件就可以滿足需求，從元件庫中拖出元件即可使用。若想設計一個有彈出選單的搜尋框，可以參考以下這種設計方法。
b.即時搜尋
過於複雜，建議使用常規搜尋即可實現原型原理演示。
看完以上App原型設計中簡單的互動效果介紹及設計方法，即時是新手設計師，也能輕鬆實現這些 互動設計 效果了吧！心動不如行動，趕緊開始你的原型設計吧！