【新手指南】App原型設計:如何快速實現這6種交互效果?

UI設計教程   /  UI教程     

uimaker
UI設計師 / 江蘇 南京

來源:網絡   作者:佚名

App原型設計,那么頁面切換、進度條、頁面滾動、圖片輪播,下拉菜單,搜索框這些交互效果必不可少。如何簡單快速地實現這些效果呢?以下小編根據經驗為大家提供了一些簡單的設計方法,以供參考。

1.頁面跳轉

App原型設計-頁面跳轉效果.gif

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

設計步驟

Step 1: 點擊觸發頁面跳轉的組件。

Step 2: 拖拽(點擊后不放手)組件上的鏈接點,直至右側項目樹中某個頁面上。

Step 3: 交互已經設置完成,即可演示預覽頁面跳轉效果。

2.進度條

App原型設計-進度條效果.gif

做過App原型設計的設計師都知道,在適當的場景中使用進度條可以使產品更“人性化”,從而減少用戶的不確定心理,愿意等待頁面加載。但是對于設計師來說,如何利用原型設計工具來制作進度條?設計過程繁瑣嗎?以下有個設計方法供大家參考。

設計步驟

Step 1:從左側組件庫拖出2個形狀組件,1個按鈕組件。

Step 2:調整兩個形狀組件為相同寬度的長方形,水平相連放置,并去掉組件接觸面的邊框線。

Step 3:將2個形狀組件設置為不同的顏色。

Step 4:設置交互。

a.點擊按鈕,將鏈接點拖至左邊形狀組件做交互。設置觸發方式為點擊,交互為調整尺寸并保持高度不變。在交互面板中加寬至右邊形狀的寬度。

b.同理設置按鈕對右邊形狀組件的交互,注意右邊形狀的加寬設置應為負值。

Step5:設置位移。打開右側交互面板中,左邊形狀組件的尺寸調整方式設 為默認,右邊形狀組件的尺寸調整方式設為向左。

Step 6:交互設置完成,點擊按鈕即可預覽進度條效果。

3.頁面滾動

App原型設計-頁面滾動效果.gif

隨著移動端的快速發展和日益普及,我相信很多人都享受著它帶來的便利。在我們瀏覽這些移動端App時,最多的操作是什么?對,就是滾動頁面。設計師在進行APP原型設計時,如何實現頁面的滾動效果?其實,在一個滾動區里放幾個組件就解決了?不信?不妨讓我們一起看看如何操作吧!

設計步驟

Step 1:從左側組件庫中拖出滾動區組件放置工作區。

Step 2:雙擊滾動區進入滾動區編輯狀態,點擊滾動條右側的 號可拉長滾動區,放置更多的內容。

Step 3:點擊空白區域推出編輯狀態。

Step 4:點擊演示即可預覽頁面滾動效果。

PS:若想實現滾動區外懸浮效果,可以在結束編輯后將需懸浮的組件放置在滾動區外即可。

App原型設計工具Mockplus的滾動區效果.gif


4.圖片輪播

App原型交互設計之圖片輪播效果.gif

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

a. 自動輪播效果

Step 1:從左側組件庫將圖片輪播組件拖至工作區內。

Step 2:雙擊組件進行圖片添加,可選擇一或多張。

Step 3:在右側屬性面板中可設置動畫效果,播放間隔,是否自動播放。

Step 4:設置完成后即可預覽輪播效果。

b.手動輪播效果

Step 1:從庫中拖出滾動區組件至工作區,設置為橫向滾動區雙擊后開始編輯。

Step 2:從組件庫中選擇圖片或文字組件放至滾動區內,自定義內容排版。

Step 3:編輯時若滾動區放不下所展示內容或編輯區過大時,可點擊下方滾動條” ”“-”進行調整。

Step 4:編輯完成后點擊滾動區外部退出,根據演示區域調整滾動區所占區域大小。

Step 5:點擊演示即可預覽圖片輪播效果。

5.下拉菜單

App原型交互設計之下拉菜單效果.gif


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

設計步驟

Step 1:從左側組件庫中選擇面板組件拖放至工作區,具體菜單樣式可自定義。

Step 2:設置交互。

a. 面板1,鏈接到自己,調整大小。鏈接到面板2,位移。鏈接到面板3,位移。

b. 面板2,鏈接到自己,調整的大小。鏈接到面板3,位移。

c. 面板3,鏈接到自己,調整大小。

Step 3:交互設置完成,可演示查看手風琴菜單效果。

6.搜索框

App交互設計之搜索框效果.gif

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

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

a.常規搜索

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

b.即時搜索

過于復雜,建議使用常規搜索即可實現原型原理演示。

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

 收藏
闪电之神电子 微乐辽宁麻将怎么能赢 北京快3 cba辽宁对广厦比分 江苏11选五玩法奖金 今晚开什么特马 开奖直播 股票下跌换手率 下载贵阳微乐麻将 排列三今晚必下胆码 大赢家比分直播 赚钱的网游 大嘴官网是多少 有打福州麻将的群吗 快乐十分 广州站街女一条街 上海时时乐基本走势综合版 德甲联赛球场