Axure8原型設(shè)計(jì)實(shí)戰(zhàn)案例:如何實(shí)現(xiàn)登錄功能?
登錄功能是一個(gè)非常常見(jiàn)的功能,幾乎所有的產(chǎn)品都有登錄功能,登錄功能可以很簡(jiǎn)單,也可以非常復(fù)雜。我們?cè)谟胊xure做產(chǎn)品原型設(shè)計(jì)的時(shí)候,都會(huì)涉及到登錄功能,那么,登錄功能是怎么設(shè)計(jì)出來(lái)的呢?
本文和大家分享一個(gè)常用的登錄功能的原型設(shè)計(jì),最終的實(shí)現(xiàn)效果如下所示:
需求分析
我們對(duì)登錄功能的需求進(jìn)行分析,得出功能要實(shí)現(xiàn)的需求如下:
- 賬號(hào)、密碼輸入框要有初始的信息提示;
- 在賬號(hào)、密碼為必輸項(xiàng),如果沒(méi)有輸入,要給出提示并且輸入框邊框變成紅色提示;
- 點(diǎn)擊登錄,判斷賬號(hào)、密碼是否正確,如果錯(cuò)誤就要給出提示并且邊框變成紅色;
- 如果賬號(hào)、密碼正確,就登錄到目標(biāo)頁(yè)面。
設(shè)計(jì)思路
針對(duì)上面的需求,我們實(shí)現(xiàn)的思路如下:
- 輸入框的初始提示信息可以通過(guò)文本框元件實(shí)現(xiàn),文本框元件可以設(shè)置提示文字,并且可以設(shè)置提示文字隱藏的觸發(fā)動(dòng)作;
- 對(duì)于輸入框變紅的效果,因?yàn)槲谋究驔](méi)法設(shè)置邊框的顏色,我們只能通過(guò)一個(gè)變通的方法實(shí)現(xiàn),即在文本框外面套一個(gè)矩形框,文本框的邊框設(shè)置為隱藏,用矩形框的邊框代替文本框的邊框;
- 對(duì)于錯(cuò)誤提示,可以通過(guò)設(shè)置動(dòng)態(tài)面板實(shí)現(xiàn),因?yàn)殄e(cuò)誤提示有很多種,不同的錯(cuò)誤,對(duì)應(yīng)動(dòng)態(tài)面板的不同狀態(tài)。
原型設(shè)計(jì)
(1)賬號(hào)輸入框
拖入一個(gè)矩形框,設(shè)置該矩形框的名稱為【用戶名-背景】,并且設(shè)置該矩形框的獲取焦點(diǎn)以后的顏色是紅色;拖入一個(gè)文本框,設(shè)置該文本框的名稱為【用戶名】,并且設(shè)置該文本框的邊框隱藏。
(2)密碼輸入框
拖入一個(gè)矩形框,設(shè)置該矩形框的名稱為【密碼-背景】,并且設(shè)置該矩形框的獲取焦點(diǎn)以后的顏色是紅色;拖入一個(gè)文本框,設(shè)置該文本框的名稱為【密碼】,設(shè)置該文本框的類型為【密碼】,并且設(shè)置該文本框的邊框隱藏。
(3)錯(cuò)誤提示設(shè)置
- 在賬號(hào)輸入框下面拖入動(dòng)態(tài)面板,設(shè)置動(dòng)態(tài)面板的名稱為【賬號(hào)-提示語(yǔ)】,動(dòng)態(tài)面板增加三個(gè)狀態(tài),stat1、state2、和stat5,分別對(duì)應(yīng)不同的錯(cuò)誤提示;
- 在密碼輸入框下面拖入動(dòng)態(tài)面板,設(shè)置動(dòng)態(tài)面板的名稱為【密碼-提示語(yǔ)】,動(dòng)態(tài)面板增加三個(gè)狀態(tài),stat1、state2、和stat4,分別對(duì)應(yīng)不同的錯(cuò)誤提示;
(4)登錄按鈕
拖入矩形框,作為登錄按鈕;
(5)其他功能
做為登錄功能,除了最基本的賬號(hào)、密碼和登錄按鈕意外,還有用第三方賬號(hào)登錄、記住密碼、忘記密碼、注冊(cè)等功能,本次原型設(shè)計(jì)沒(méi)有涉及這些功能,只是把相關(guān)的元件放上去,并沒(méi)有相關(guān)交互設(shè)計(jì)。
交互設(shè)計(jì)
(1)賬號(hào)輸入框交互設(shè)計(jì)
編輯【用戶名】元件的【失去焦點(diǎn)】事件,當(dāng)【失去焦點(diǎn)】的時(shí)候,做如下判斷:
判斷【用戶名】是否為空,如果為空,設(shè)置【賬號(hào)-提示語(yǔ)】狀態(tài)為stat1,即提示賬號(hào)不為空;
判斷【用戶名】是否為admin,如果不是,設(shè)置【賬號(hào)-提示語(yǔ)】狀態(tài)為stat2,即提示賬戶名不存在,請(qǐng)重新輸入。
(2)密碼輸入框交互設(shè)計(jì)
編輯【密碼】元件的【失去焦點(diǎn)】事件,當(dāng)【失去焦點(diǎn)】的時(shí)候,做如下判斷:
- 判斷【密碼】是否為空,如果為空,設(shè)置【密碼-提示語(yǔ)】狀態(tài)為stat1,即提示請(qǐng)輸入您的登錄密碼;
- 判斷【密碼】是否為123qwe,如果不是,設(shè)置【密碼-提示語(yǔ)】狀態(tài)為stat2,即提示賬戶名與密碼不匹配,請(qǐng)重新輸入。
(3)登錄框的交互設(shè)置
編輯登錄框的【單擊事件】,判斷【用戶名】 和【密碼】輸入框是否為空,是否為admin以及123qwe,如果不是,則給出提示 ,如果是,則打開(kāi)登錄頁(yè)面。
總結(jié)
登錄功能是最基本的功能,需要注意的細(xì)節(jié)很多,產(chǎn)品經(jīng)理在用Axure設(shè)計(jì)原型的時(shí)候,一定要明確的標(biāo)注在登錄功能里面的各種場(chǎng)景。
本文由 @馬白龍 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
http://www.axurestudy.cn/pr/#id=6oms29&p=%E7%9B%AE%E5%BD%95
哈,看完還是不太會(huì)?你可能需要從Axure基礎(chǔ)開(kāi)始學(xué)
這里推薦你加Axure實(shí)戰(zhàn)班的助教小可愛(ài)@CC-起點(diǎn)學(xué)院(微信:qidiancc520),回復(fù)關(guān)鍵詞:大禮包
?? 領(lǐng)取適合產(chǎn)品新人的原型設(shè)計(jì)大禮包哦,cc還會(huì)不定期分享Axure免費(fèi)視頻課程呢!
什么情況下要做如此高保真的原型?
主要看你的原型主要給誰(shuí)看,比如給老板或者給客戶,這時(shí)候原型要盡量貼近最后會(huì)實(shí)現(xiàn)的產(chǎn)品。
如果是給研發(fā),標(biāo)注清楚才是關(guān)鍵。
好的 謝謝~哪一個(gè)產(chǎn)品的原型做到這么高保真,你一般要多久時(shí)間?
看原型的復(fù)雜程度啊以及功能多少,這個(gè)沒(méi)有統(tǒng)一的要求。