高保真的登錄狀態(tài)判斷,如何用全局變量實現(xiàn)?

本文作者介紹了一種新的方式,能夠?qū)崿F(xiàn)高保真的交互效果,希望對你有用~enjoy~
在原型設(shè)計的過程中,我們會經(jīng)常遇到這樣一種情況:同一個操作,由于當(dāng)前條件的不同,從而執(zhí)行不同的動作。舉個例子:好多的產(chǎn)品的一些功能,需要登錄以后才可以操作。但這些功能在未登錄時也是可以被看到的,點(diǎn)擊時,會出現(xiàn)彈窗,引導(dǎo)用戶去登錄或注冊。
面對這樣的邏輯,最簡單的實現(xiàn)方式是下圖這樣:為同一動作添加多個用例。預(yù)覽原型時,選擇不同的用例執(zhí)行相應(yīng)操作。
本文介紹一種新的方式,能夠?qū)崿F(xiàn)高保真的交互效果。
具體效果見鏈接:(http://176.122.184.172/登錄狀態(tài)判斷/#g=1)
該原型中,在”功能“頁面點(diǎn)擊“關(guān)注”按鈕,未登錄時會出現(xiàn)“登錄”彈窗,點(diǎn)擊”去登錄“按鈕,跳轉(zhuǎn)到”登錄“頁面,點(diǎn)擊”登錄“,跳轉(zhuǎn)到”功能“頁面,此時再次點(diǎn)擊”關(guān)注“按鈕,則會變?yōu)椤瓣P(guān)注中”。
如何設(shè)置
1、添加全局變量,變量名為account,默認(rèn)值為0.(“全局變量”在“項目”菜單“內(nèi))
2、為”登錄“頁面的”登錄“按鈕設(shè)置用例
3、為“關(guān)注”按鈕設(shè)置兩個狀態(tài):“已登錄”和“未登錄”
4、為“關(guān)注”按鈕設(shè)置用例
5、彈窗的設(shè)計我們略去不說,有需要的參考我的這篇文章(http://zhangjingwei.cn/rp/902419.html)
如何使用
1、參考第1步,在你自己的項目中添加全局變量。例如登錄狀態(tài)可以使用0和1,0表示未登錄,1表示已登錄。初始值設(shè)置為0。
2、凡是會受到登錄狀態(tài)影響的元件,都轉(zhuǎn)化為動態(tài)面板,添加兩個狀態(tài),一個為“未登錄”,一個為“已登錄”,然后參考第4步設(shè)置用例。
3、參考第2步,為“登錄”頁面的“登錄”按鈕設(shè)置用例.
4、經(jīng)過這樣的設(shè)置后,即可實現(xiàn)想要的效果。
知識點(diǎn)解析
1、全局變量
Axure里的變量依據(jù)作用范圍可以分為三種:局部變量、頁面變量、全局變量。局部變量在同一個用例內(nèi)生效,頁面變量在同一頁面內(nèi)生效,全局變量在整個原型中生效。所以說,全局變量是跨頁面的,在頁面切換時全局變量始終保持。但我們可以通過用例動作修改全局變量。一般的產(chǎn)品中,登錄狀態(tài)、VIP表示等內(nèi)容,適合用全局變量來儲存。
2、動態(tài)面板的“載入時”
元件在載入過程中,可以進(jìn)行一些操作。配合上條件和全局變量,可以模擬實現(xiàn)不同的情況執(zhí)行不同的操作。本文中的關(guān)注按鈕在“載入時”,對登錄狀態(tài)進(jìn)行了判斷,根據(jù)登錄狀態(tài)的值從而展示不同的內(nèi)容,從而觸發(fā)不同的操作邏輯。
好了,本文的內(nèi)容就全部講解完畢。有興趣的同學(xué)可以下載原型自行體驗。
(原型下載:https://pan.baidu.com/s/1qZCTTWK)
值得注意的一點(diǎn)時,這樣的設(shè)計會使原型加載速度變慢、原型文件變大,也會給開發(fā)造成一定的困擾。開發(fā)同學(xué)可能沒有觸發(fā)你的登錄操作,從而未留意到你的這些設(shè)計細(xì)節(jié),這是很常見的事情。所以,在原型設(shè)計中不建議使用此種方式。除非你是給老板或者客戶做演示用,這樣的效果會讓體驗者感覺很棒。
全局變量的作用不止于此,本文只探討了一種場景。大家可以自行開腦洞,有新想法可以留言,我們一起交流。
本文由 @流風(fēng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于 CC0 協(xié)議
玩兒的很溜