起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure案例解析：不同形式的單選效果
編輯導讀：單選效果在各種APP里都非常常見，比如導航菜單、顏色大小選擇等。本文以網易云音樂APP為例，對不同形式的單選效果展開分析，希望對你有幫助。
“單選效果在APP里到處都是，只是表現形式不同?！?/p>
申明：本文僅僅是探索學習網易云音樂APP的樣式和交互設計，和網易云音樂APP本身無關。
單選效果在各種APP里或者頁面上非常常見，最普遍的效果就是各類導航菜單，還有的是一些關于商品的屬性選擇，例如顏色、大小等等。
來看一下網易云音樂APP安卓版本里哪些是和單選相關的效果，以下是一些截圖示例。
案例1：頂部導航菜單 –?我的、發現、云村、視頻默認狀態：灰色文字，小字。
選中狀態：黑色文字，大字。
案例2：頂部導航菜單另一種形式 –?推薦、官方、精品、華語、流行默認狀態：灰色文字選中狀態：紅色文字，有下邊框。
案例3：商品顏色選擇默認狀態：黑色文字，灰色邊框選中狀態：紅色文字，紅色邊框。
案例4：支付方式選擇默認狀態：灰色邊框的圓選中狀態：紅色填充，中間有選中圖標。
案例5：費用選擇默認狀態：灰色邊框，月份黑色選中狀態：左上角選中狀態的紅色邊框，月份紅色。
案例6：黑膠VIP和音樂包的切換默認狀態：紅色文字，紅色邊框，白色填充，左邊無邊框，右邊半圓形選中狀態：白字文字，紅色邊框，紅色填充，右邊無邊框，左邊半圓形。
這些單選效果在Axure中的樣式設置有四個關鍵點：
- 每一組選項都設置為同一個選項組名稱；
- 設置每個元件選中時的樣式；
- 設置每組選項中的第一個為默認選中狀態；
- 給每一項添加單擊事件，讓當前項處于選中狀態。
再來看一下這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協議
- 目前還沒評論，等你發揮！
