Axure教程:輸入框控制多選下拉列表
在產品設計中,多選下拉列表是頻繁使用的場景之一。這篇文章,我們學一下在Axure中如何制作可交互的多選下拉列表,供大家參考。
多選下拉列表是一種常見的用戶界面組件,通常用于需要讓用戶從一組選項中選擇多個項的場景。它結合了下拉菜單的簡潔性和多選功能的靈活性。
今天我們就來學習,怎么在Axure中制作多選下拉列表,并且通過輸入框來動態控制多選列表里的選項。
一、效果展示
1、點擊下拉框,可以彈窗選項列表
2、點擊選項對應的多選按鈕可以選中或取消選中對應的選項,已選中的選項會在下拉框中顯示對應的標簽,并且下拉框會根據選項的多少,自動調整尺寸。
3、點擊標簽的刪除按鈕,可以取消選中該選項。
4、在輸入框里填寫提示文字,點擊更新按鈕后可以更新多選下拉列表默認的提示文本
5、在多行輸入框里填寫選項,每行對應一個選項,填寫完成后點擊更新按鈕,可以將選項值更新到多選下拉列表里
二、制作教程
我們主要分為右側的多選下拉列表,以及左側輸入框及按鈕兩個模板
1. 多選下拉列表
多選下拉列表我們主要分為下拉框和彈出列表
1.1 彈出列表
彈出列表我們是通過中繼器制作一個多選列表,結合背景矩形而成的,中繼器里面包括多選按鈕和文本標簽和矩形,如下圖所示擺放
里面的多選按鈕,我們沒有用系統自帶的多選按鈕,因為想樣式更美觀,我們將它分成兩個圖標,一個是選中狀態,一個是未選中的狀態,將他們分別放入一個動態面板的兩個狀態頁中。
中繼器表格我們新增兩列,text列用于填寫選項文字,xuanzhong列控制是否選中。
然后我們將text列的值設置到文本標簽里,axure10或以上的話,點擊表格里的鏈接按鈕,選擇文本標簽元件即可;如果是axure9或以下的版本,就要在中繼器每項加載時,用設置文本的交互來實現。
我們要通過中繼器表格xuanzhong列里的值控制是否選中,所以我們定義,如果選中列的值等于1,那我們就選中,在這里相當于是顯示動態面板的選中頁,所以我們用設置面板狀態的交互,將動態面板設置到選中的狀態即可。
如果點擊未選中的按鈕,相當于要變成選中,所以我們用更新行的交互,將當前行xuanzhong列的值更新為1即可;同樣道理,如果點擊選中按鈕,相當于要變成未選中,所以我們用更新行的交互,將xuanzhogn列的值更新為0。
如果選項較多時,可以通過轉為動態面板,調出垂直滾動條的方式,控制列表的高度
1.2 下拉框
下拉框我們用矩形、箭頭以及中繼器制作,中繼器主要用于制作標簽,包括矩形,文本標簽和刪除按鈕,如下圖所示擺放
中繼器表格我們使用默認的column0列即可,用于顯示標簽文字
表格默認為0行,后續會通過交互,將選中的選項添加到這里。
然后我們將column0列的值設置到文本標簽里,axure10或以上的話,點擊表格里的鏈接按鈕,選擇文本標簽元件即可;如果是axure9或以下的版本,就要在中繼器每項加載時,用設置文本的交互來實現。另外如果文字太長,我們也可以將文本標簽轉為動態面板,通過面板控制文本顯示的長度,例如只顯示前面5個字等。
將矩形、箭頭以及中繼器組合,形狀下拉組合,鼠標單擊下拉組合時,我們用顯示的交互,將彈出列表顯示,這里我們添加一個彈出效果,這樣點擊其他空白位置,下拉列表就可以自動收起來
在彈出列表顯示時,我們也可以通過交互美化原型,例如顯示上箭頭,隱藏下箭頭,或者通過交互樣式,讓下拉框變色……這些都可以根據自身需要設置。
1.3 彈出列表和標簽的聯動
在下拉列表選項選中時,我們用添加行的交互,將選項文字添加到標簽中繼器里;
這里我們還要做一個默認還原,就是在選項列表中繼器每項加載時,如果加載的是第一行的數據,我們要先把標簽中繼器里的值清空,我們可以用標記行先標記所有行,然后用刪除行的交互,把所有行刪除,這樣就可以避免重復添加。
標簽中繼器里刪除按鈕點擊時,相當于要取消選中,因為標簽中繼器是通過彈出列表中繼器控制的,所以我們要用更新行的交互,更新彈出中繼器,和該標簽文字相同的行,將xuanzhogn列的值更新為0
這樣基本上就實現了兩個中繼器的聯動
最后如果標簽的下拉框需要自適應大小,我們就要記錄選中數,然后根據選中的數量,用設置尺寸的交互設置下拉框的大小,然后再通過移動的交互,將彈窗列表移動到下拉框的下方。
如果選中數為0,就設置為默認的尺寸和位置,并且將默認提示文字設置到下拉框里,如果不為0,下拉框的高度就相當于標簽中繼器的高度+間距,然后在移動彈出列表到下拉框的下方,最后清空提示文字。
2. 左側輸入框和按鈕
包括文本標簽、輸入框、多行輸入框和按鈕構成,如下圖所示擺放
單行輸入框,我們填寫下拉框的提示文字,多行輸入框我們輸入選項的文字,一行代表一個選項。
鼠標單擊更新按鈕時,我們用設置文本的交互,將提示文字輸入框里的文本設置到下拉框里就可以了;但是選項文字的話,我們需要進行切割處理,首先要把選項列表里所有行內容刪除,相當于做一個清空還原。
然后在對多行輸入框的的文本進行切割處理,先把第一行的文本提取出來,然后用添加行的交互,將提取出來的文本添加到選項列表中繼器里,然后重復這個循環,多行文本輸入框里的每一行的文本都添加到選項列表中繼器里。
這樣我們就完成輸入框控制多選下拉列表的原型模板了,后續使用也很方便,默認的選項和提示文字只需要左側輸入框里填寫,預覽后即可自動生成對應的效果。
那以上就是本期教程的全部內容,感興趣的同學們可以動手試試哦,感謝您的閱讀,我們下期見。
本文由 @AI產品人 原創發布于人人都是產品經理,未經許可,禁止轉載
題圖來自 Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發揮!