做App原型設(shè)計，那么頁面切換、進(jìn)度條、頁面滾動、圖片輪播，下拉菜單，搜索框這些交互效果必不可少。如何簡單快速地實現(xiàn)這些效果呢？以下小編根據(jù)經(jīng)驗為大家提供了一些簡單的設(shè)計方法，以供參考。

1.頁面跳轉(zhuǎn)

作為一款App原型設(shè)計，頁面跳轉(zhuǎn)必不可少。如何快速實現(xiàn)頁面間快速跳轉(zhuǎn)的效果？小編最近在使用Mockplus制作原型設(shè)計，以下就以該工具為依托為大家介紹一種簡單的設(shè)計方法。

 設(shè)計步驟

Step 1： 點擊觸發(fā)頁面跳轉(zhuǎn)的組件。

Step 2： 拖拽（點擊后不放手）組件上的鏈接點，直至右側(cè)項目樹中某個頁面上。

Step 3： 交互已經(jīng)設(shè)置完成，即可演示預(yù)覽頁面跳轉(zhuǎn)效果。

2.進(jìn)度條

做過App原型設(shè)計的設(shè)計師都知道，在適當(dāng)?shù)膱鼍爸惺褂?a target="_blank">進(jìn)度條可以使產(chǎn)品更“人性化”，從而減少用戶的不確定心理，愿意等待頁面加載。但是對于設(shè)計師來說，如何利用原型設(shè)計工具來制作進(jìn)度條？設(shè)計過程繁瑣嗎？以下有個設(shè)計方法供大家參考。

設(shè)計步驟

Step 1：從左側(cè)組件庫拖出2個形狀組件，1個按鈕組件。

Step 2：調(diào)整兩個形狀組件為相同寬度的長方形，水平相連放置，并去掉組件接觸面的邊框線。

Step 3：將2個形狀組件設(shè)置為不同的顏色。

Step 4：設(shè)置交互。

• a.點擊按鈕，將鏈接點拖至左邊形狀組件做交互。設(shè)置觸發(fā)方式為點擊，交互為調(diào)整尺寸并保持高度不變。在交互面板中加寬至右邊形狀的寬度。

• b.同理設(shè)置按鈕對右邊形狀組件的交互，注意右邊形狀的加寬設(shè)置應(yīng)為負(fù)值。

 Step5：設(shè)置位移。打開右側(cè)交互面板中，左邊形狀組件的尺寸調(diào)整方式設(shè) 為默認(rèn)，右邊形狀組件的尺寸調(diào)整方式設(shè)為向左。

 Step 6: 交互設(shè)置完成，點擊按鈕即可預(yù)覽進(jìn)度條效果。

3.頁面滾動

隨著移動端的快速發(fā)展和日益普及，我相信很多人都享受著它帶來的便利。在我們?yōu)g覽這些移動端App時，最多的操作是什么？對，就是滾動頁面。設(shè)計師在進(jìn)行APP原型設(shè)計時，如何實現(xiàn)頁面的滾動效果？其實，在一個滾動區(qū)里放幾個組件就解決了？不信？不妨讓我們一起看看如何操作吧！

設(shè)計步驟

Step 1：從左側(cè)組件庫中拖出滾動區(qū)組件放置工作區(qū)。

Step 2：雙擊滾動區(qū)進(jìn)入滾動區(qū)編輯狀態(tài)，點擊滾動條右側(cè)的+號可拉長滾動區(qū)，放置更多的內(nèi)容。

Step 3：點擊空白區(qū)域推出編輯狀態(tài)。

Step 4：點擊演示即可預(yù)覽頁面滾動效果。

PS: 若想實現(xiàn)滾動區(qū)外懸浮效果，可以在結(jié)束編輯后將需懸浮的組件放置在滾動區(qū)外即可。

4.圖片輪播

圖片輪播一般用于App原型設(shè)計的主頁，用來展示網(wǎng)站信息或商品詳情的圖片集合。如何使這些圖片進(jìn)行輪播呢？在Mockplus這款快速原型設(shè)計工具中，它為設(shè)計師直接提供了圖片輪播組件，可以直接拖放到工作區(qū)中進(jìn)行使用。

a. 自動輪播效果

Step 1：從左側(cè)組件庫將圖片輪播組件拖至工作區(qū)內(nèi)。

Step 2：雙擊組件進(jìn)行圖片添加，可選擇一或多張。

Step 3：在右側(cè)屬性面板中可設(shè)置動畫效果，播放間隔，是否自動播放。

Step 4：設(shè)置完成后即可預(yù)覽輪播效果。

b.手動輪播效果

Step 1：從庫中拖出滾動區(qū)組件至工作區(qū)，設(shè)置為橫向滾動區(qū)雙擊后開始編輯。

Step 2：從組件庫中選擇圖片或文字組件放至滾動區(qū)內(nèi)，自定義內(nèi)容排版。

Step 3：編輯時若滾動區(qū)放不下所展示內(nèi)容或編輯區(qū)過大時，可點擊下方滾動條”+”“-”進(jìn)行調(diào)整。

Step 4：編輯完成后點擊滾動區(qū)外部退出，根據(jù)演示區(qū)域調(diào)整滾動區(qū)所占區(qū)域大小。

Step 5：點擊演示即可預(yù)覽圖片輪播效果。

5.下拉菜單

下拉菜單通常適用于在原型設(shè)計中陳列一些需要展示的子頁面，相當(dāng)于一個子導(dǎo)航菜單。這種交互效果一般適用于博客內(nèi)容分類、電商網(wǎng)站商品陳列等情況。下拉菜單的形式多種多樣，但最令設(shè)計師最頭疼的還是手風(fēng)琴菜單效果。即使是利用功能強(qiáng)大的Axure，想實現(xiàn)該效果也比較麻煩。但是利用Mockplus的“面板”組件，可以快速地做一個手風(fēng)琴菜單。

設(shè)計步驟

Step 1：從左側(cè)組件庫中選擇面板組件拖放至工作區(qū)，具體菜單樣式可自定義。

Step 2：設(shè)置交互。

• a. 面板1，鏈接到自己，調(diào)整大小。鏈接到面板2，位移。鏈接到面板3，位移。
• b. 面板2，鏈接到自己，調(diào)整的大小。鏈接到面板3，位移。
• c. 面板3，鏈接到自己，調(diào)整大小。

 Step 3：交互設(shè)置完成，可演示查看手風(fēng)琴菜單效果。

6.搜索框

無論是Web端還是App原型設(shè)計，搜索框都是原型中比較重要的部分。一個好的搜索框和搜索模式可以幫助用戶快速找到所需的東西，從而帶給用戶極棒的體驗。如何利用原型設(shè)計工具制作一款簡潔好用的搜索框呢？

搜索框一般分為以下兩種效果：

a.常規(guī)搜索

Mockplus直接提供的搜索框組件就可以滿足需求，從組件庫中拖出組件即可使用。若想設(shè)計一個有彈出菜單的搜索框，可以參考以下這種設(shè)計方法。

b.即時搜索

過于復(fù)雜，建議使用常規(guī)搜索即可實現(xiàn)原型原理演示。

看完以上App原型設(shè)計中簡單的交互效果介紹及設(shè)計方法，即時是新手設(shè)計師，也能輕松實現(xiàn)這些交互設(shè)計效果了吧！心動不如行動，趕緊開始你的原型設(shè)計吧。