5分鐘掌握8個經常使用交互組件，輕鬆進階原型設計

原型設計離不開組件，若是原型是房子，那麼組件就是水泥和磚塊。本文將爲您介紹八個最經常使用的交互組件，如今就打開Mockplus試試吧！

1、彈出菜單

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

1. 隨意拖出一個組件，這裏咱們以Mockplus中的按鈕組件爲例。

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

3.雙擊彈出菜單以編輯菜單位置及內容。

2、彈窗

彈窗與彈出面板的操做步驟基本一致，區別在於彈出菜單的四個菜單項均可再設置交互動做，而彈窗僅有「是」、「否」兩個選項可供設置交互動做，同時，彈窗內容的格式也與彈出面板略有區別。

3、抽屜

抽屜是一個經常使用的容器型組件，其特色爲高度封裝、高度可調節性、高度可容納性，換句話說，您無需自行設計抽屜的細節，只需簡單設置幾下便可的到一個以多種方式滑出、能裝入絕大多數組件的抽屜。

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

4、圖片輪播

圖片輪播組件支持數張圖片的亂轉展現，一樣操做簡單。先將圖片輪播組件拖入工做區內，雙擊添加圖片便可。

5、面板

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

將能容面板拖至須要的地方，調整大小，雙擊進入編輯模式，拖入須要的組件便可。注意，組件超出面板邊界的地方不會顯示。你會發現：由於是容器，面板是有邊界的，子組件超過邊界的部分會被「切掉」 。另外有意思的是：和「組」不一樣，設置交互的時候，能夠將面板中的子組件做爲交互目標，但「組」不行，只能將整個組設爲交互目標，由於組是幾個組件編組而成，編組以後，就被視爲一個總體。

6、彈出面板

彈出面板是最爲靈活的交互組件。拖入一個彈出面板，雙擊打開，你會發現它裏面什麼也沒有，可是利用它，咱們徹底能夠本身製做出須要的彈窗、消息框、提示框等許多交互組件。

7、內容面板

內容面板主要用來實現內容的快速切換。可是它通常不會單獨使用，你可使用它和菜單欄、列表、選項卡等具備多選性質的組件來配合，共同完成內容切換。

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

8、滾動區

當屏幕大小不足以容納咱們須要展現的內容時，咱們可使用滾動區組件在有限的空間內展現更多內容。

將滾動區組件拖入工做區後，調整大小，而後雙擊進入編輯模式。在編輯模式中拖入須要加入滾動區的組件，鼠標點擊「+」來擴展滾動區大小，點擊「-」來收縮滾動區大小，若是你同時按下Ctrl鍵，可加速擴展或收縮。

交互是原型設計中很是重要的部分，靈活使用以上八個交互組件，足以知足你經常使用的交互設計！除了交互組件，Mockplus中還有近兩百個封裝組件，如今就去試試吧！