国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

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

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

點擊這里查看效果

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

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

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

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

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

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

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

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

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

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

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

案例4使用一個圖片元件，但使用兩個圖片來實現(xiàn)。

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

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

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

一、界面布局

案例1：

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

選中樣式：

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

設(shè)置選項組：

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

復(fù)制元件：

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

案例2：

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

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

案例3：

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

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

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

案例4：

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

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

案例5：

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

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

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

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

案例6：

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

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

二、交互處理

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

以第一個為例：

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

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

三、小結(jié)

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

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

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