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

自定義“復選框”樣式設計步驟

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

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

2. 設置“矩形A”：

- 尺寸大小為90*30；

- 邊框顏色：CCCCCC；

- 圓角半徑：5；

- 選中時，邊框顏色：5FB878。

3. 設置“矩形B”：

- 尺寸大小為60*30；

- 邊框顏色：CCCCCC；

- 填充色：CCCCCC；

- 字體顏色：FFFFFF；

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

- 選中時，邊框顏色：5FB878；

- 選中時，填充色：5FB878；

- 命名為：label4。

4. 另外新建一個“勾選”樣式的圖標，設置如下：

- 尺寸為12*10；

- 填充色：CCCCCC；

- 隱藏；

- 選中時，填充色：5FB878；

- 命名為：tick。

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

交互動作設置

針對“組合：option”，我們需要設置交互動作來增強用戶體驗：

1. “組合：option”的“鼠標移入時”交互：

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

- 動作：顯示“圖形：tick”，動畫無，彈出效果。

2. “組合：option”的“鼠標單擊時”交互：

- case1：

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

- case2：

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

- 動作：觸發(fā)“組合：option”的“鼠標移入時”動作。

以上交互設置看似簡單，實際操作起來可能稍顯繁瑣，但這種細致的設計能夠提升用戶體驗。如果本文對您有所幫助，請不妨投個票或點贊支持一下哦。