自定義“復(fù)選框”樣式設(shè)計(jì)步驟Axure自帶的復(fù)選框組件雖然功能簡單，但外觀平庸。在完成了對(duì)“單選按鈕”的自定義設(shè)計(jì)后，我們可以仿制一款更具個(gè)性化的“復(fù)選框”樣式，并分享給大家。以下是設(shè)計(jì)步驟：1.

自定義“復(fù)選框”樣式設(shè)計(jì)步驟

Axure自帶的復(fù)選框組件雖然功能簡單，但外觀平庸。在完成了對(duì)“單選按鈕”的自定義設(shè)計(jì)后，我們可以仿制一款更具個(gè)性化的“復(fù)選框”樣式，并分享給大家。以下是設(shè)計(jì)步驟：

1. 新建兩個(gè)矩形，分別命名為“矩形A”和“矩形B”。

2. 設(shè)置“矩形A”：

- 尺寸大小為90*30；

- 邊框顏色：CCCCCC；

- 圓角半徑：5；

- 選中時(shí)，邊框顏色：5FB878。

3. 設(shè)置“矩形B”：

- 尺寸大小為60*30；

- 邊框顏色：CCCCCC；

- 填充色：CCCCCC；

- 字體顏色：FFFFFF；

- 圓角半徑：5（僅左上角和左下角）；

- 選中時(shí)，邊框顏色：5FB878；

- 選中時(shí)，填充色：5FB878；

- 命名為：label4。

4. 另外新建一個(gè)“勾選”樣式的圖標(biāo)，設(shè)置如下：

- 尺寸為12*10；

- 填充色：CCCCCC；

- 隱藏；

- 選中時(shí)，填充色：5FB878；

- 命名為：tick。

5. 按照布局方式將“矩形”和“圖標(biāo)”放置在一起，并組合成一個(gè)整體，命名為“option”。

交互動(dòng)作設(shè)置

針對(duì)“組合：option”，我們需要設(shè)置交互動(dòng)作來增強(qiáng)用戶體驗(yàn)：

1. “組合：option”的“鼠標(biāo)移入時(shí)”交互：

- 判定條件：當(dāng)“矩形：label”不是“選中”狀態(tài)時(shí)；

- 動(dòng)作：顯示“圖形：tick”，動(dòng)畫無，彈出效果。

2. “組合：option”的“鼠標(biāo)單擊時(shí)”交互：

- case1：

- 動(dòng)作：設(shè)置“組合：option”的選中狀態(tài)為“切換”方式，顯示“圖形：tick”。

- case2：

- 判定條件：當(dāng)“矩形：label”不是“選中”狀態(tài)時(shí)；

- 動(dòng)作：觸發(fā)“組合：option”的“鼠標(biāo)移入時(shí)”動(dòng)作。

以上交互設(shè)置看似簡單，實(shí)際操作起來可能稍顯繁瑣，但這種細(xì)致的設(shè)計(jì)能夠提升用戶體驗(yàn)。如果本文對(duì)您有所幫助，請(qǐng)不妨投個(gè)票或點(diǎn)贊支持一下哦。