【新手指南】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: 若想實現滾動區外懸浮效果，能夠在結束編輯後將需懸浮的組件放置在滾動區外便可。

 

 

 

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原型設計中簡單的交互效果介紹及設計方法，即時是新手設計師，也能輕鬆實現這些交互設計效果了吧！心動不如行動，趕忙開始你的原型設計吧！