大家在進(jìn)入一個(gè)APP的時(shí)候都會(huì)碰到登錄界面，那么你知道html怎么做用戶(hù)登錄界面設(shè)計(jì)的嗎?html怎么做用戶(hù)登錄界面設(shè)計(jì)步驟有哪些，看看登錄界面設(shè)計(jì)怎么做最符合客戶(hù)需求呢?

　　html怎么做用戶(hù)登錄界面設(shè)計(jì)的步驟：

步驟1、首先，下載html5開(kāi)發(fā)軟件Intellij IDEA，這個(gè)直接在百度搜索框中搜索即可。

　　步驟2、打開(kāi)軟件，點(diǎn)擊file，選擇New project，在彈出的對(duì)話框中，選擇static web選項(xiàng)中的html5，點(diǎn)擊next，在新對(duì)話框中，輸入項(xiàng)目名稱(chēng)，點(diǎn)擊finish

　　步驟3、在body標(biāo)簽中，引入form標(biāo)簽

　　步驟4、設(shè)置用戶(hù)名和密碼，利用input的text屬性

　　步驟5、添加一個(gè)登錄按鈕，利用input的button屬性

　　步驟6、為了用戶(hù)名和密碼可以對(duì)齊，增加了一個(gè)空格，用到了實(shí)體，空格=

　　步驟7、對(duì)整個(gè)頁(yè)面，進(jìn)行css樣式排版

　　步驟8、點(diǎn)擊run，預(yù)覽效果

（圖片來(lái)自網(wǎng)絡(luò)）

　　怎么樣的登錄界面設(shè)計(jì)是最好的

　　1.路徑清晰

　　登錄頁(yè)面通常包含多個(gè)入口：注冊(cè)、登錄方式A、登錄方式B、第三方賬號(hào)登錄等，我們無(wú)法準(zhǔn)確預(yù)測(cè)用戶(hù)會(huì)究竟要選擇哪一個(gè)，因此，各個(gè)路徑必須一目了然。

　　2.主次分明

　　貪心是全人類(lèi)的通病，設(shè)計(jì)師要壓制好自己和產(chǎn)品經(jīng)理的欲望。手機(jī)號(hào)快速登錄逐漸成為主流，但某些產(chǎn)品依然不愿放棄傳統(tǒng)登錄，魚(yú)與熊掌不可兼得，取舍不夠決絕會(huì)導(dǎo)致功能主次不分。設(shè)計(jì)之前請(qǐng)選好一種主推的登錄方式，哪種是當(dāng)前最急需的?哪種是符合業(yè)務(wù)長(zhǎng)遠(yuǎn)利益的?分清優(yōu)先級(jí)的同時(shí)也要在界面上體現(xiàn)。對(duì)比大眾點(diǎn)評(píng)和美團(tuán)：大眾點(diǎn)評(píng)已經(jīng)把賬密登錄方式弱化成一個(gè)二級(jí)入口，而美團(tuán)依然想保持兩種登錄方式直接切換的便利性(也許是數(shù)據(jù)上暫時(shí)沒(méi)有明顯的偏向，產(chǎn)品經(jīng)理無(wú)法拍板pa bei guo)。突出一種登錄方式，其他該弱化的弱化，該拋棄的拋棄。

　　3.專(zhuān)注眼前

　　既然做了選擇，就不要三心二意。用戶(hù)選擇了一種登錄方式后，其他的方式可以大膽放一邊去了。然而某些設(shè)計(jì)師(或PM)一直把用戶(hù)當(dāng)成是購(gòu)物中的選擇困難癥女性，“登錄方式要切換方便，萬(wàn)一用戶(hù)要更換。萬(wàn)一用戶(hù)選錯(cuò)怎么辦?”。也許有5%的用戶(hù)會(huì)選錯(cuò)，為此就要降低剩下95%的用戶(hù)的體驗(yàn)?假如遵循好上述的兩個(gè)觀點(diǎn)，所謂的萬(wàn)一會(huì)更加少。調(diào)起鍵盤(pán)輸入并隱去第三方賬號(hào)登錄。

（圖片來(lái)自網(wǎng)絡(luò)）

　　4.輸出

　　綜合上述觀點(diǎn)，以下是我設(shè)計(jì)的登錄界面(交互圖，非效果圖)。默認(rèn)登錄界面僅保留登錄入口、切換登錄方式、注冊(cè)入口和第三方賬號(hào)登錄，盡可能保持路徑清晰。賬密登錄僅作為次要登錄方式弱化成跳轉(zhuǎn)入口，主次分明。調(diào)起鍵盤(pán)后(確認(rèn)登錄方式)才顯示驗(yàn)證碼、登錄按鈕等控件，同時(shí)第三方賬號(hào)登錄下滑隱去，專(zhuān)注當(dāng)前任務(wù)。

　　5.分場(chǎng)景

　　登錄及注冊(cè)界面，其流程該是一次性展現(xiàn)還是按任線性務(wù)流一步步展現(xiàn)?線性任務(wù)流的好處是：分別對(duì)每個(gè)提交的信息檢測(cè)并反饋，用戶(hù)理解起來(lái)清晰安全，屬于“can’t go wrong” 的設(shè)計(jì)，但其一步步的跳轉(zhuǎn)容易給用戶(hù)一種漫長(zhǎng)的感覺(jué)。

　　6.取舍

　　線性任務(wù)流和集成任務(wù)究竟如何取舍，取決設(shè)計(jì)師如何平衡清晰度和便捷性。我的理解是：登錄是留給老用戶(hù)的，用戶(hù)對(duì)應(yīng)用有一定的熟悉度，另外結(jié)合場(chǎng)景分析，無(wú)論是主動(dòng)觸發(fā)或是在購(gòu)買(mǎi)商品時(shí)被動(dòng)觸發(fā)登錄，用戶(hù)總是不耐煩的希望盡快結(jié)束此流程，因此登錄流程約簡(jiǎn)短越好，選用集成任務(wù);注冊(cè)面對(duì)的是新用戶(hù)，用戶(hù)此刻更需要的是安全感，明確的說(shuō)明和清晰的步驟比操作便捷更重要，因此選用線性任務(wù)流。

（圖片來(lái)自網(wǎng)絡(luò)）

　　以上就是小編給大家分析的html怎么做用戶(hù)登錄界面設(shè)計(jì)的步驟以及登錄界面設(shè)計(jì)的一些設(shè)計(jì)思路了，更多相關(guān)知識(shí)請(qǐng)關(guān)注我們官網(wǎng)哦~