APP開關功能怎么用Axure畫出來
開關用來控制某些功能的開啟和關閉。那么APP開關功能怎么用Axure畫出來呢?
常用場景有“是否允許新消息通知”“加我為好友是否需要驗證”“是否允許APP給我推薦通訊錄好友”等。
一、原型畫法(無交互)
開關功能通常包含標題、關閉按鈕、開啟按鈕。
1.先畫標題
從默認元件庫拖動“矩形1”到工作區(qū),修改尺寸為375*40px,然后雙擊輸入文字“標題”,修改左填充15px,居中。
2.再畫關閉按鈕
從默認元件庫拖動“圖片”到工作區(qū),然后從阿里巴巴矢量圖標庫網(wǎng)站http://www.iconfont.cn/collections/index搜索“開關”,找到合適的圖標下載png格式,然后雙擊圖片導入Axure??s放到40*40px,移動它們到合適位置。代表開關功能的關閉狀態(tài)。
3.查看原型
生成原型HTML并在瀏覽器中查看效果。
二、原型畫法(有交互)
開關功能的常見交互效果:點擊開啟按鈕變成關閉狀態(tài)。再次點擊恢復原狀態(tài)。
1.選中“關閉按鈕”元件, 設置“交互樣式-選中”,導入代表開啟狀態(tài)的圖片,請?zhí)崆皬陌⒗锇桶褪噶繄D標庫網(wǎng)站找到合適的。
2.點擊“關閉”按鈕,設置鼠標單擊時事件,添加動作“切換選中狀態(tài)”,組織動作“選擇當前元件”。
3.生成原型HTML并在瀏覽器中查看效果。
三、添加到APP元件庫
不同場景下的開關功能,標題不一樣,樣式相對固定。
根據(jù)多年PM經(jīng)驗,總結出2種常用的“開關”,添加到APP元件庫,供后續(xù)調(diào)用。
1.開關(關)
2.開關(開)
四、注意事項
開關功能同一時間只有一個狀態(tài),要么是開啟要么是關閉。
開關功能可以設計多種樣式,另外單選也可充當開關功能。
百度網(wǎng)盤下載地址:https://pan.baidu.com/s/1U6_VwLIgYgoD6MaioflRuA
相關閱讀
#專欄作家#
浪子,公眾號:langzisay,人人都是產(chǎn)品經(jīng)理專欄作家。業(yè)務型PM。
本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉載。
題圖來自 Pexels ,基于 CC0 協(xié)議
一個動態(tài)面板解決的事,干嘛弄這么麻煩
用動態(tài)面板確實可以實現(xiàn)選中的交互效果。
但是需要畫原型的PM最好明白,類似于開關這樣的功能最適合模擬其原型的還是Axure專門為選中狀態(tài)而設計的選中樣式+選中交互事件。
Axure軟件的設計者將通用的選中效果做成單獨的功能供大家使用,這才是最合適的方法。
感謝大神分享! ??
多謝分享
看完這篇文章,心里莫名的難受
我直接用模板,哈哈哈,方便快捷,除了懶就是懶 ??
還可以改進,通過兩個熱區(qū),背景+按鈕 移動和改變色彩 來完成,效果更佳
抱歉,你的理解有誤。
雖然畫原型可以用各種方法描述其交互,但是開關功能的本質是切換2種狀態(tài),最適合用交互事件選中和交互樣式選中來做。
該原理適用于開關、單選、復選、分段控件等APP常見功能。
——
多啰嗦幾句,你這個方法我也寫過,另外還有就是用動態(tài)面板狀態(tài)來模擬開關效果。
他的意思是,可以用更好看的方式來做
做法好看不好看,真不重要。
如果說是高度模擬交互效果,其實這個方法可以認為是對的。