Axure使用技巧:設(shè)置選項組

2 評論 14877 瀏覽 5 收藏 4 分鐘

編輯導語:選中功能是日常應用中的常見功能,那么,我們可以如何利用Axure來設(shè)置選項組?本篇文章里,作者介紹了利用Axure來設(shè)置選項組的使用技巧,一起來看一下。

今天的內(nèi)容說的是選中功能的實現(xiàn)。效果如下圖:

一共需要三步:

  1. 給元件設(shè)置好選中狀態(tài);
  2. 設(shè)置懸浮狀態(tài)、加陰影文字變色狀態(tài);
  3. 設(shè)置選項組。

具體步驟如下。

一、給元件設(shè)置好選中狀態(tài)

拖出一個帶陰影的大矩形備用。拖出一個相同顏色的小矩形,并在上面寫好你想要的文字標識。

為這個小矩形設(shè)置交互。

在單擊時設(shè)置選中,目標為當前元件。設(shè)置值為真。

這個意思就是,當我們點擊了這個元件以后,我們是真的選中了。

打好底以后,我們開始為這個元件上妝,做效果。

二、設(shè)置懸浮狀態(tài)、加陰影文字變色

在完成上面一步以后,我們可以像在word里設(shè)置文字的樣式一樣,設(shè)置這個元件的樣式。不同的點在于,元件之所以會變換樣式,是因為我們對它發(fā)出交互。

所以簡單來說,就是動作+樣式。

選中元件以后,右擊選擇交互樣式。

交互樣式有“鼠標懸?!?、“鼠標按下”、“選中”、“禁用”、“獲取焦點”五個模式。

我們這次用到的是“選中”和“鼠標懸?!薄?/p>

分別在這兩個欄目下設(shè)置你想要的填充和字體顏色,就完成上妝了。

三、設(shè)置選項組

首先解釋一下為什么要設(shè)置選項組。通過上面的步驟,我們已經(jīng)完成了這次交互80%的工作了,沒有全部按完成的原因,在于僅有上面的設(shè)置,會出現(xiàn)這樣的效果。

而選項組的意義就在于,在一組選項中,它每一次只會選中其中的一項,每個選項之間都是互斥的。

將這些選項全部選中,然后右擊選項組,填入名稱,就可以完成交互了。

其他小技巧:在矩形上加文字,可以采用相同背景色的小矩形疊加,不必使用文本框。

 

本文由 @艾筱說 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 選項組要怎么取消呢

    來自湖南 回復
  2. ??

    來自廣東 回復