Week 23 — Axure筆記 | 單選按鈕(radio button)如何做出單選效果?

Max 麥克斯
4 min readDec 23, 2019

--

當在設計一張表單的介面時,若問題剛好是單選題,就很適合使用「radio button(單選按鈕)」這個元件。在Axure中,只要很簡單的從左邊常用的元件區拉出radio button就好,不用自己辛苦刻出來或畫出來,更棒的是,還有選取的互動效果!

但...但...但...

預覽後,按了radio button怎麼沒有「單選」效果!?(就如下圖的左邊)

原來是沒有設定「Assign Radio Group(單選群組的分配)」,在直接設定Assign Radio Group前,我習慣是先了解原理,因為了解原理後,才知道為什麼要做這個設定,又或者可以了解一些前端程式的概念,因為Axure的一些互動功能,其實跟程式邏輯有些相像,只是大部分都以介面化的方式呈現去做後端設定。

回歸到正題,到底為什麼要設定Assign Radio Group?為什麼Axure沒有一剛開始就幫我做好單選效果啊?

因為它只知道你這幾個選項要用radio button這個元件,但你沒告訴它這幾個選項中,有哪幾個是一國的,又有哪幾個是另一國的,所以你必須設定Assign Radio Group幫它分群組,它才可以幫你做判斷!

舉例:Q1和Q2的問題相似,只是差在「喜歡」和「討厭」而已,但選項卻都長得一模一樣,Axure無法知道原來Q1的3個選項是一國的,而Q2的3個選項是另一國的,所以要幫它們各自指派在不同群組裡

1.在Libraries裡找到radio button(單選按鈕),把它拉出來後,修改文字,再依自己喜好去調整大小或顏色

2.按住「shift」將要分類成同一國的選項統統選取起來後,按右鍵選擇「Assign Radio Group」

3.跳出設定單選群組的小視窗,只要在這個視窗裡命名好就完成囉!這裡的話可以隨意命名,但當有很多群組時不太建議,因為之後如果想再添加選項到目前已有的群組裡會不好找(但其實我有時很懶都亂命名XDDD)

4.最後附上製作的整個過程的影片,以後回憶時會更快!

順帶一提,當自己用Axure做出的互動動畫很難做時,就可以稍微體會前端工程師在做這些互動動畫時有多難做,要做多少的判斷,個人覺得做Axure的互動動畫,其實可以訓練到一些邏輯和培養同理心哦!

沒有設定radio button V.S 有設定radio button(網址)

--

--

Max 麥克斯

UI設計師 | 相信閱讀 | 喜歡有溫度的文字 | 致力於介面設計 | 記錄自學設計的一隅 https://maxinstudio.com/