編輯導讀：單選效果在各種APP里都非常常見，比如導航菜單、顏色大小選擇等。本文以網易云音樂APP為例，對不同形式的單選效果展開分析，希望對你有幫助。

“單選效果在APP里到處都是，只是表現形式不同?！?/p>

申明：本文僅僅是探索學習網易云音樂APP的樣式和交互設計，和網易云音樂APP本身無關。

單選效果在各種APP里或者頁面上非常常見，最普遍的效果就是各類導航菜單，還有的是一些關于商品的屬性選擇，例如顏色、大小等等。

來看一下網易云音樂APP安卓版本里哪些是和單選相關的效果，以下是一些截圖示例。

點擊這里查看效果

案例1：頂部導航菜單 –?我的、發現、云村、視頻默認狀態：灰色文字，小字。

選中狀態：黑色文字，大字。

案例2：頂部導航菜單另一種形式 –?推薦、官方、精品、華語、流行默認狀態：灰色文字選中狀態：紅色文字，有下邊框。

案例3：商品顏色選擇默認狀態：黑色文字，灰色邊框選中狀態：紅色文字，紅色邊框。

案例4：支付方式選擇默認狀態：灰色邊框的圓選中狀態：紅色填充，中間有選中圖標。

案例5：費用選擇默認狀態：灰色邊框，月份黑色選中狀態：左上角選中狀態的紅色邊框，月份紅色。

案例6：黑膠VIP和音樂包的切換默認狀態：紅色文字，紅色邊框，白色填充，左邊無邊框，右邊半圓形選中狀態：白字文字，紅色邊框，紅色填充，右邊無邊框，左邊半圓形。

這些單選效果在Axure中的樣式設置有四個關鍵點：

1. 每一組選項都設置為同一個選項組名稱；
2. 設置每個元件選中時的樣式；
3. 設置每組選項中的第一個為默認選中狀態；
4. 給每一項添加單擊事件，讓當前項處于選中狀態。

再來看一下這6種不同風格的單選效果的差異，看如何使用Axure中的樣式來設置：

案例1、2、3可以使用單一的矩形框或文本標簽元件來實現。

案例4使用一個圖片元件，但使用兩個圖片來實現。

案例5使用多個元件，需要應用元件組合或者動態面板讓它們成為一個整體。

案例6的單選類似開關按鈕，也是多個元件。

下面具體來看一下樣式和交互分別如何設置。

一、界面布局

案例1：

布局：白色背景矩形框。默認樣式：白色背景，無邊框，灰色字體，字體大小14。

選中樣式：

選中矩形框，右鍵彈出菜單中選擇“交互樣式”，設置選中樣式，后續案例的選中樣式設置方法一樣，不贅述。

設置選項組：

右鍵菜單選擇“選項組”，設置名稱為group1。

復制元件：

復制“我的”矩形框三個，修改文字內容分別為“發現”、“云村”、“視頻”。選中“我的”矩形框，右鍵菜單中選擇“選中”，設置默認選中狀態。

案例2：

設置步驟同案例1，樣式設置如下，左邊是默認樣式，右邊是選中時樣式。

選項組名稱為group2，復制三個矩形，第一個“推薦”右鍵設置為選中。

案例3：

設置步驟同案例1，樣式設置如下，左邊是默認樣式，右邊是選中時樣式。

默認有灰色邊框，圓角大小為3，選中樣式修改下文字顏色和邊框顏色。

選項組名稱為group3，復制三個矩形，第一個“黑色”右鍵設置為選中。

案例4：

設置步驟同案例1，不過使用的是一個圖片元件，樣式設置如下，左邊是默認圖片，右邊是選中時圖片，也是通過交互樣式的選中狀態設置的。

選項組名稱為group4，復制三個圖片，第一個圖片右鍵設置為選中。

案例5：

從案例5開始有點復雜了，因為每一項里包括的內容比較多。默認狀態是一個大的矩形框和三個文本標簽，在垂直方向上居中。

默認狀態：灰色矩形邊框，邊框圓角大小為5；第一個標簽黑色文字，第二個標簽紅色，第三個標簽灰色文字，文字大小不同。

選中狀態：設置邊框的選中狀態的邊框為紅色，第一個月份標簽的選中樣式文字顏色為紅色，注意這里分別設置了兩個元件的選中樣式。

為了設置整體的樣式，我們將矩形框和三個標簽選中后，轉成動態面板，然后再設置動態面板的選項組名稱為group5。復制動態面板，修改里面的文字內容，設置第一個動態面板為默認選中狀態，注意下圖中第一個默認選中時的月份顏色是紅色的。

案例6：

開動你的腦筋，看看如何設置這種開關類型的單選效果？

來看一下最終案例1~5的各個單選按鈕的整體樣式效果。

二、交互處理

每一組的單選按鈕的每一項單擊事件處理是一樣的，單擊后讓當前元件處于選中狀態。

以第一個為例：

把這個單擊事件復制到其它元件上，包括前面那個動態面板。

最后來預覽一下效果。

三、小結

單選效果應用真的是非常普遍，它的樣式設置和交互設置的方法也比較通用，一定要掌握哦~

本文由 @Axure原型設計工場 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議