編輯導(dǎo)讀：?jiǎn)芜x效果在各種APP里都非常常見(jiàn)，比如導(dǎo)航菜單、顏色大小選擇等。本文以網(wǎng)易云音樂(lè)APP為例，對(duì)不同形式的單選效果展開(kāi)分析，希望對(duì)你有幫助。

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

申明：本文僅僅是探索學(xué)習(xí)網(wǎng)易云音樂(lè)APP的樣式和交互設(shè)計(jì)，和網(wǎng)易云音樂(lè)APP本身無(wú)關(guān)。

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

來(lái)看一下網(wǎng)易云音樂(lè)APP安卓版本里哪些是和單選相關(guān)的效果，以下是一些截圖示例。

點(diǎn)擊這里查看效果

案例1：頂部導(dǎo)航菜單 –?我的、發(fā)現(xiàn)、云村、視頻默認(rèn)狀態(tài)：灰色文字，小字。

選中狀態(tài)：黑色文字，大字。

案例2：頂部導(dǎo)航菜單另一種形式 –?推薦、官方、精品、華語(yǔ)、流行默認(rèn)狀態(tài)：灰色文字選中狀態(tài)：紅色文字，有下邊框。

案例3：商品顏色選擇默認(rèn)狀態(tài)：黑色文字，灰色邊框選中狀態(tài)：紅色文字，紅色邊框。

案例4：支付方式選擇默認(rèn)狀態(tài)：灰色邊框的圓選中狀態(tài)：紅色填充，中間有選中圖標(biāo)。

案例5：費(fèi)用選擇默認(rèn)狀態(tài)：灰色邊框，月份黑色選中狀態(tài)：左上角選中狀態(tài)的紅色邊框，月份紅色。

案例6：黑膠VIP和音樂(lè)包的切換默認(rèn)狀態(tài)：紅色文字，紅色邊框，白色填充，左邊無(wú)邊框，右邊半圓形選中狀態(tài)：白字文字，紅色邊框，紅色填充，右邊無(wú)邊框，左邊半圓形。

這些單選效果在Axure中的樣式設(shè)置有四個(gè)關(guān)鍵點(diǎn)：

1. 每一組選項(xiàng)都設(shè)置為同一個(gè)選項(xiàng)組名稱；
2. 設(shè)置每個(gè)元件選中時(shí)的樣式；
3. 設(shè)置每組選項(xiàng)中的第一個(gè)為默認(rèn)選中狀態(tài)；
4. 給每一項(xiàng)添加單擊事件，讓當(dāng)前項(xiàng)處于選中狀態(tài)。

再來(lái)看一下這6種不同風(fēng)格的單選效果的差異，看如何使用Axure中的樣式來(lái)設(shè)置：

案例1、2、3可以使用單一的矩形框或文本標(biāo)簽元件來(lái)實(shí)現(xiàn)。

案例4使用一個(gè)圖片元件，但使用兩個(gè)圖片來(lái)實(shí)現(xiàn)。

案例5使用多個(gè)元件，需要應(yīng)用元件組合或者動(dòng)態(tài)面板讓它們成為一個(gè)整體。

案例6的單選類似開(kāi)關(guān)按鈕，也是多個(gè)元件。

下面具體來(lái)看一下樣式和交互分別如何設(shè)置。

一、界面布局

案例1：

布局：白色背景矩形框。默認(rèn)樣式：白色背景，無(wú)邊框，灰色字體，字體大小14。

選中樣式：

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

設(shè)置選項(xiàng)組：

右鍵菜單選擇“選項(xiàng)組”，設(shè)置名稱為group1。

復(fù)制元件：

復(fù)制“我的”矩形框三個(gè)，修改文字內(nèi)容分別為“發(fā)現(xiàn)”、“云村”、“視頻”。選中“我的”矩形框，右鍵菜單中選擇“選中”，設(shè)置默認(rèn)選中狀態(tài)。

案例2：

設(shè)置步驟同案例1，樣式設(shè)置如下，左邊是默認(rèn)樣式，右邊是選中時(shí)樣式。

選項(xiàng)組名稱為group2，復(fù)制三個(gè)矩形，第一個(gè)“推薦”右鍵設(shè)置為選中。

案例3：

設(shè)置步驟同案例1，樣式設(shè)置如下，左邊是默認(rèn)樣式，右邊是選中時(shí)樣式。

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

選項(xiàng)組名稱為group3，復(fù)制三個(gè)矩形，第一個(gè)“黑色”右鍵設(shè)置為選中。

案例4：

設(shè)置步驟同案例1，不過(guò)使用的是一個(gè)圖片元件，樣式設(shè)置如下，左邊是默認(rèn)圖片，右邊是選中時(shí)圖片，也是通過(guò)交互樣式的選中狀態(tài)設(shè)置的。

選項(xiàng)組名稱為group4，復(fù)制三個(gè)圖片，第一個(gè)圖片右鍵設(shè)置為選中。

案例5：

從案例5開(kāi)始有點(diǎn)復(fù)雜了，因?yàn)槊恳豁?xiàng)里包括的內(nèi)容比較多。默認(rèn)狀態(tài)是一個(gè)大的矩形框和三個(gè)文本標(biāo)簽，在垂直方向上居中。

默認(rèn)狀態(tài)：灰色矩形邊框，邊框圓角大小為5；第一個(gè)標(biāo)簽黑色文字，第二個(gè)標(biāo)簽紅色，第三個(gè)標(biāo)簽灰色文字，文字大小不同。

選中狀態(tài)：設(shè)置邊框的選中狀態(tài)的邊框?yàn)榧t色，第一個(gè)月份標(biāo)簽的選中樣式文字顏色為紅色，注意這里分別設(shè)置了兩個(gè)元件的選中樣式。

為了設(shè)置整體的樣式，我們將矩形框和三個(gè)標(biāo)簽選中后，轉(zhuǎn)成動(dòng)態(tài)面板，然后再設(shè)置動(dòng)態(tài)面板的選項(xiàng)組名稱為group5。復(fù)制動(dòng)態(tài)面板，修改里面的文字內(nèi)容，設(shè)置第一個(gè)動(dòng)態(tài)面板為默認(rèn)選中狀態(tài)，注意下圖中第一個(gè)默認(rèn)選中時(shí)的月份顏色是紅色的。

案例6：

開(kāi)動(dòng)你的腦筋，看看如何設(shè)置這種開(kāi)關(guān)類型的單選效果？

來(lái)看一下最終案例1~5的各個(gè)單選按鈕的整體樣式效果。

二、交互處理

每一組的單選按鈕的每一項(xiàng)單擊事件處理是一樣的，單擊后讓當(dāng)前元件處于選中狀態(tài)。

以第一個(gè)為例：

把這個(gè)單擊事件復(fù)制到其它元件上，包括前面那個(gè)動(dòng)態(tài)面板。

最后來(lái)預(yù)覽一下效果。

三、小結(jié)

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

本文由 @Axure原型設(shè)計(jì)工場(chǎng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議