tft每日頭條

 > 生活

 > axure隐藏功能怎麼設置

axure隐藏功能怎麼設置

生活 更新时间:2024-12-04 13:08:58

我們平時注冊或者登錄時,輸入密碼的時候,通常都會有密碼的可見與不可見切換設置,看起來簡單又常見的交互效果,做起來卻沒有想象中那麼簡單,我們一起來看看怎麼做吧~

axure隐藏功能怎麼設置(密碼可見與不可見的切換設置)1

國際慣例,看了效果圖再說哈哈

起初,密碼可見,點擊不可見的眼睛按鈕,密碼轉為不可見(現實操作中,一般都是由密碼不可見切換到可見,方法都是一樣的,隻是創建面闆狀态時,把不可見放在首位就可以了。)

axure隐藏功能怎麼設置(密碼可見與不可見的切換設置)2

教程來襲

(1)創建一個動态面闆。

axure隐藏功能怎麼設置(密碼可見與不可見的切換設置)3

(2)創建動态面闆的2個狀态并進行編輯。

axure隐藏功能怎麼設置(密碼可見與不可見的切換設置)4

(3)創建密碼不可見狀态的基本元件:文本框以及密碼可見的眼睛按鈕,并對文本框進行設置。

axure隐藏功能怎麼設置(密碼可見與不可見的切換設置)5

(4)創建密碼可見狀态的基本元件:文本框以及密碼不可見按鈕,選擇文本框類型為text以及對文本框進行命名。

axure隐藏功能怎麼設置(密碼可見與不可見的切換設置)6

(5)對密碼可見按鈕進行交互設計,同時設置hide文本框中的文本内容與unhide文本框的相同:點擊密碼可見按鈕動态面闆轉到密碼可見狀态;hide文本内容=unhide文本内容。

axure隐藏功能怎麼設置(密碼可見與不可見的切換設置)7

axure隐藏功能怎麼設置(密碼可見與不可見的切換設置)8

(6)對密碼不可見按鈕進行交互設計,同時設置unhide文本框中的文本内容與hide文本框的相同:點擊密碼不可見按鈕動态面闆轉到密碼不可見狀态;unhide文本内容=hide文本内容。

axure隐藏功能怎麼設置(密碼可見與不可見的切換設置)9

axure隐藏功能怎麼設置(密碼可見與不可見的切換設置)10

(7)現在已經設置好了按鈕交互,兩文本框的内容也設置相同了,點擊預覽來測試吧,是不是做成功了?

希望你可以為你自己感到驕傲啦~~

本文由 @萍萍仔 原創發布于人人都是産品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved