• 百圖網免費素材千人群

百圖網 > 設計教程 > 設計技巧 > 5分鐘掌握8個常用交互組件,輕松進階原型設計

5分鐘掌握8個常用交互組件,輕松進階原型設計

2017-08-03

評論 0

瀏覽

收藏

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

 

一、彈出菜單

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

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

 

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

 

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

 

二、彈窗

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

 

三、抽屜

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

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

 

四、圖片輪播

圖片輪播組件支持數張圖片的亂轉展示,同樣操作簡單。先將圖片輪播組件拖入工作區內,雙擊添加圖片即可。

 

五、面板

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

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

 

六、彈出面板

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

 

七、內容面板

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

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

 

八、滾動區

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

將滾動區組件拖入工作區后,調整大小,然后雙擊進入編輯模式。在編輯模式中拖入需要加入滾動區的組件,鼠標點擊“ ”來擴展滾動區大小,點擊“-”來收縮滾動區大小,如果你同時按下Ctrl鍵,可加速擴展或收縮。

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

 

原文地址:Mockplus

作者:Devin

美式足球比分迅盈