APP開關功能怎么用Axure畫出來

10 評論 17030 瀏覽 84 收藏 5 分鐘

開關用來控制某些功能的開啟和關閉。那么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

相關閱讀

APP上導航如何用Axure畫出來

APP下導航如何通過Axure畫出來

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

#專欄作家#

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

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

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

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 一個動態(tài)面板解決的事,干嘛弄這么麻煩

    回復
    1. 用動態(tài)面板確實可以實現(xiàn)選中的交互效果。
      但是需要畫原型的PM最好明白,類似于開關這樣的功能最適合模擬其原型的還是Axure專門為選中狀態(tài)而設計的選中樣式+選中交互事件。
      Axure軟件的設計者將通用的選中效果做成單獨的功能供大家使用,這才是最合適的方法。

      來自香港 回復
  2. 感謝大神分享! ??

    來自江蘇 回復
  3. 多謝分享

    來自北京 回復
  4. 看完這篇文章,心里莫名的難受

    來自福建 回復
  5. 我直接用模板,哈哈哈,方便快捷,除了懶就是懶 ??

    來自重慶 回復
  6. 還可以改進,通過兩個熱區(qū),背景+按鈕 移動和改變色彩 來完成,效果更佳

    來自廣東 回復
    1. 抱歉,你的理解有誤。
      雖然畫原型可以用各種方法描述其交互,但是開關功能的本質是切換2種狀態(tài),最適合用交互事件選中和交互樣式選中來做。
      該原理適用于開關、單選、復選、分段控件等APP常見功能。
      ——
      多啰嗦幾句,你這個方法我也寫過,另外還有就是用動態(tài)面板狀態(tài)來模擬開關效果。

      來自上海 回復
    2. 他的意思是,可以用更好看的方式來做

      來自廣東 回復
    3. 做法好看不好看,真不重要。
      如果說是高度模擬交互效果,其實這個方法可以認為是對的。

      回復