原型設計離不開組件，如果原型是房子，那么組件就是水泥和磚塊。本文將為您介紹八個最常用的交互組件，現(xiàn)在就打開Mockplus試試吧！

一、彈出菜單

彈出菜單是原型設計中最常用的組件，許多組件的使用方法也與它類似，熟練使用彈出菜單將會給您帶來莫大的幫助。接下來我們從實際案例來看一看如何使用彈出菜單。

1. 隨意拖出一個組件，這里我們以Mockplus中的按鈕組件為例。

2.拖出彈出菜單組件，將按鈕右上角的鏈接點與菜單組件相連。

3.雙擊彈出菜單以編輯菜單位置及內(nèi)容。

二、彈窗

彈窗與彈出面板的操作步驟基本一致，區(qū)別在于彈出菜單的四個菜單項都可再設置交互動作，而彈窗僅有“是”、“否”兩個選項可供設置交互動作，同時，彈窗內(nèi)容的格式也與彈出面板略有區(qū)別。

三、抽屜

抽屜是一個常用的容器型組件，其特點為高度封裝、高度可調(diào)節(jié)性、高度可容納性，換句話說，您無需自行設計抽屜的細節(jié)，只需簡單設置幾下即可的到一個以多種方式滑出、能裝入絕大多數(shù)組件的抽屜。

在將按鈕的鏈接點與抽屜連接后，雙擊抽屜圖標即可添加組件。

四、圖片輪播

圖片輪播組件支持數(shù)張圖片的亂轉展示，同樣操作簡單。先將圖片輪播組件拖入工作區(qū)內(nèi)，雙擊添加圖片即可。

五、面板

面板其實就是一個可供放置組件的容器。

將能容面板拖至需要的地方，調(diào)整大小，雙擊進入編輯模式，拖入需要的組件即可。注意，組件超出面板邊界的地方不會顯示。你會發(fā)現(xiàn)：因為是容器，面板是有邊界的，子組件超過邊界的部分會被“切掉” 。另外有意思的是：和“組”不同，設置交互的時候，可以將面板中的子組件作為交互目標，但“組”不行，只能將整個組設為交互目標，因為組是幾個組件編組而成，編組之后，就被視為一個整體。

六、彈出面板

彈出面板是最為靈活的交互組件。拖入一個彈出面板，雙擊打開，你會發(fā)現(xiàn)它里面什么也沒有，但是利用它，我們完全可以自己制作出需要的彈窗、消息框、提示框等許多交互組件。

七、內(nèi)容面板

內(nèi)容面板主要用來實現(xiàn)內(nèi)容的快速切換。但是它一般不會單獨使用，你可以使用它和菜單欄、列表、選項卡等具有多選性質(zhì)的組件來配合，共同完成內(nèi)容切換。

首先在內(nèi)容面板中設置三個層，分別連接到三個目標頁面上。然后將選項卡上的鏈接一一對應地與三個層相連，內(nèi)容切換就完成了。

八、滾動區(qū)

當屏幕大小不足以容納我們需要展示的內(nèi)容時，我們可以使用滾動區(qū)組件在有限的空間內(nèi)展示更多內(nèi)容。

將滾動區(qū)組件拖入工作區(qū)后，調(diào)整大小，然后雙擊進入編輯模式。在編輯模式中拖入需要加入滾動區(qū)的組件，鼠標點擊“+”來擴展?jié)L動區(qū)大小，點擊“-”來收縮滾動區(qū)大小，如果你同時按下Ctrl鍵，可加速擴展或收縮。

交互是原型設計中非常重要的部分，靈活使用以上八個交互組件，足以滿足你常用的交互設計！除了交互組件，Mockplus中還有近兩百個封裝組件，現(xiàn)在就去試試吧！