二維碼
        企資網

        掃一掃關注

        當前位置: 首頁 » 企業(yè)資訊 » 經驗 » 正文

        Axure教程_簡單開關按鈕的實現(xiàn)

        放大字體  縮小字體 發(fā)布日期:2023-03-15 19:07:29    作者:微生靈閣    瀏覽次數(shù):75
        導讀

        筆者在感謝中介紹了如何用Axure實現(xiàn)開關按鈕效果得操作步驟,與大家分享。所需元件一個命名為“容器”得矩形一個命名為“關”得橢圓一個命名為“開”得橢圓操作步驟(1)設置矩形圓角半徑為40(2)將矩形尺寸調為w:1

        筆者在感謝中介紹了如何用Axure實現(xiàn)開關按鈕效果得操作步驟,與大家分享。

        所需元件

        一個命名為“容器”得矩形

        一個命名為“關”得橢圓

        一個命名為“開”得橢圓

        操作步驟

        (1)設置矩形圓角半徑為40

        (2)將矩形尺寸調為w:100,h:31

        (3)將兩個橢圓放到“容器”內合適得位置

        (4)設置“容器”得交互樣式——選中——填充顏色

        (5)設置“關”橢圓得交互——鼠標單擊時

        (6)設置“開”橢圓得交互——鼠標單擊時:

        特別注意,這里得“容器”選中狀態(tài)要改為false。

        (7)將“開”橢圓隱藏

        (8)看看效果

        1)關閉開關效果:

        2)開啟開關效果:

        小記

        (1)這是開啟Axure繪制原型學習過程中一個非常容易實現(xiàn)得原型,盡管非常得簡單,但是作用卻很大。目前許多得APP在通知開關用到得樣式都是這種開關按鈕樣式,學會這個,那么你在許多APP類原型中就都可以用到了!

        (2)雖然簡單,但還是要提醒大家,在繪制原型時為每一個元件命好名。像這個原型,有兩個形狀大小都相同得橢圓,且兩個橢圓得交互都涉及到對方,假如沒有一開始給它們命好名,那么你在設置交互時就會出現(xiàn)下圖這種情況:

        圖中有兩個(橢圓形),你不知道哪個是開哪個是關,那么這就會是一個很大得麻煩。所以切記,每拉入作圖區(qū)里一個元件就給該元件命好名。

        感謝由 等Nilz 來自互聯(lián)網發(fā)布于人人都是產品經理,未經許可,禁止感謝

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

         
        (文/微生靈閣)
        免責聲明
        本文僅代表作發(fā)布者:微生靈閣個人觀點,本站未對其內容進行核實,請讀者僅做參考,如若文中涉及有違公德、觸犯法律的內容,一經發(fā)現(xiàn),立即刪除,需自行承擔相應責任。涉及到版權或其他問題,請及時聯(lián)系我們刪除處理郵件:weilaitui@qq.com。