開關(guān)用來控制某些功能的開啟和關(guān)閉。那么APP開關(guān)功能怎么用Axure畫出來呢？

常用場景有“是否允許新消息通知”“加我為好友是否需要驗證”“是否允許APP給我推薦通訊錄好友”等。

一、原型畫法(無交互)

開關(guān)功能通常包含標(biāo)題、關(guān)閉按鈕、開啟按鈕。

1．先畫標(biāo)題

從默認(rèn)元件庫拖動“矩形1”到工作區(qū)，修改尺寸為375*40px，然后雙擊輸入文字“標(biāo)題”，修改左填充15px，居中。

2．再畫關(guān)閉按鈕

從默認(rèn)元件庫拖動“圖片”到工作區(qū)，然后從阿里巴巴矢量圖標(biāo)庫網(wǎng)站http://www.iconfont.cn/collections/index搜索“開關(guān)”，找到合適的圖標(biāo)下載png格式，然后雙擊圖片導(dǎo)入Axure?？s放到40*40px，移動它們到合適位置。代表開關(guān)功能的關(guān)閉狀態(tài)。

3．查看原型

生成原型HTML并在瀏覽器中查看效果。

二、原型畫法(有交互)

開關(guān)功能的常見交互效果：點(diǎn)擊開啟按鈕變成關(guān)閉狀態(tài)。再次點(diǎn)擊恢復(fù)原狀態(tài)。

1．選中“關(guān)閉按鈕”元件， 設(shè)置“交互樣式-選中”，導(dǎo)入代表開啟狀態(tài)的圖片，請?zhí)崆皬陌⒗锇桶褪噶繄D標(biāo)庫網(wǎng)站找到合適的。

2．點(diǎn)擊“關(guān)閉”按鈕，設(shè)置鼠標(biāo)單擊時事件，添加動作“切換選中狀態(tài)”，組織動作“選擇當(dāng)前元件”。

3．生成原型HTML并在瀏覽器中查看效果。

三、添加到APP元件庫

不同場景下的開關(guān)功能，標(biāo)題不一樣，樣式相對固定。

根據(jù)多年P(guān)M經(jīng)驗，總結(jié)出2種常用的“開關(guān)”，添加到APP元件庫，供后續(xù)調(diào)用。

１．開關(guān)(關(guān))

２．開關(guān)(開)

四、注意事項

開關(guān)功能同一時間只有一個狀態(tài)，要么是開啟要么是關(guān)閉。

開關(guān)功能可以設(shè)計多種樣式，另外單選也可充當(dāng)開關(guān)功能。

百度網(wǎng)盤下載地址：https://pan.baidu.com/s/1U6_VwLIgYgoD6MaioflRuA

相關(guān)閱讀

APP上導(dǎo)航如何用Axure畫出來

APP下導(dǎo)航如何通過Axure畫出來

常見的列表頁如何用Axure畫出來

#專欄作家#

浪子，公眾號：langzisay，人人都是產(chǎn)品經(jīng)理專欄作家。業(yè)務(wù)型PM。

本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

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