2016年6月3日 星期五

如何在Axure中讓Radio Button呈現單選的效果呢?

Axure預設元件中的Radio Button

變成這樣就糟糕了,雖然給工程師當作文件應該沒什麼影響,但是心裡不舒服啊啊啊啊啊!

如果直接將Axure預設元件中的Radio Button放置在頁面中,呈現的效果會變成每個單選按鈕都可以選擇,而且選下去之後還無法取消選擇,隨便按了幾下,一個不小心就會把單選按鈕給全選了,這時候該怎麼辦呢?

這個問題我疑惑了滿久的,還嘗試了幾種阿里不答的方式來解決,但效果都不太好,直到有一天,我終於把眼睛睜開好好讀了英文版的使用說明之後,才發現只要一個步驟就可以解決這個問題:設定 Radio Group!


設定 Radio Group

Radio Group的設定功能在右側的工具列中間位置,Widget Properties and style這個設定項目中

只要把同一組的Radio Button都設定同樣的Radio Group,之後Prototype在操作的時候,就會被視為是同一個群組,就能夠漂亮的產生一次只能選擇一個選項的效果囉~

用 Button Shape 也可以做出相同的效果

如果不想用 Radio Button 的話,Button Shape 雖然麻煩一點點,但也可以做出同樣 (但漂亮很多) 的效果喔

Button Shape可以,但HTML Button沒辦法做出這樣的效果

簡單三步驟完成漂亮的選項


  • 跟剛剛的 Radio Group 類似,這次是要設定 Selection Group
  • 利用 Widget Interaction and Notes 這邊的功能,設定點擊後的效果,選其中 Set Selected/Checked 這個選項,value=toggle
    ( value=true 的話,表示點擊之後選擇此項目;value=false 的話,點擊之後取消選擇此項目;value=toggle 的話,就是點一下有,再點一下就取消)

  • 如果按鈕有沒有選擇都長的一樣,就看不出來有沒有被選擇了,因此第三個步驟就是讓點選前後顯示不一樣的樣式囉


完成後的效果就像這樣,是不是很華麗呢~~




2 則留言:

  1. 請問我想要把下拉選單做成動態關聯(ex: 選單一: 1/2/3 選單二: 1.1/1.2/2.1/3.1/3.2 選擇選單一的3時,選單二只會出現3.1/3.2兩個選項)要怎麼做才行呢?

    回覆刪除
    回覆
    1. ㄜ,這個問題要看你的需求了,
      如果你是要跟工程師傳達這個訊息,建議你以Prototype示意+文字描述+選項清單(Excel)+Sample(可參考Y拍PO商品時的分類功能),這樣子就會超級清楚的了~
      如果是老闆或測試者,希望他們可以瞭解效果,那麼建議你捨棄內建的下拉式選單元件,自己用Panel做,那麼要怎麼刷新都可以囉,不過這樣子大約會變成非常多層的Panel,你...自己保重啊 (逃)

      刪除