用戶名和密碼帖鸦，就兩個(gè)輸入框芝薇，但是要做到比較好的用戶體驗(yàn)還真是不容易的一件事。因?yàn)檫@里涉及到安全作儿、私密洛二、快捷、方便攻锰、簡(jiǎn)單晾嘶、清晰。我分別從幾個(gè)方面來(lái)總結(jié)一下目前比較常用的幾種用戶名和密碼框的交互設(shè)計(jì)
1娶吞、沒(méi)有輸入內(nèi)容時(shí)文案的設(shè)計(jì)垒迂。用戶名或密碼輸入格式的提示語(yǔ)
大家可以看到在用戶名輸入框里，都有提示用戶名支持的格式妒蛇，這樣就不會(huì)造成困擾机断。尤其是在現(xiàn)在大多數(shù)網(wǎng)站都支持多種登錄形式的情況下。
相反绣夺，像有些根本沒(méi)有任何文字提示的網(wǎng)站就不太好吏奸。咱們的簡(jiǎn)書的登錄窗口也不好用，文案的提示不夠清晰陶耍。
2奋蔚、輸入內(nèi)容后的交互文案設(shè)計(jì)。這里尤其要提一下淘寶的帳戶注冊(cè)時(shí)的交互文案設(shè)計(jì)烈钞，非常清晰旺拉。
淘寶這個(gè)交互設(shè)計(jì)有幾個(gè)細(xì)節(jié)很好：1、用戶名已被占用時(shí)蛾狗，有非常清晰的指示如何進(jìn)行下一步 ? 2晋涣、用戶名被占用時(shí)，推薦其它用戶名 ? 3沉桌、用戶名的輸入字符數(shù)實(shí)時(shí)提醒 ?4谢鹊、輸入正確后，提示用戶名不能修改 ?5留凭、錯(cuò)誤時(shí)佃扼，給出下一步操作的提示
3、輸入錯(cuò)誤的用戶名或密碼時(shí)蔼夜，如何刪除兼耀？相信我們?cè)谑褂玫臅r(shí)候，經(jīng)常碰到會(huì)輸入密碼錯(cuò)誤的時(shí)候求冷，這時(shí)候最常見(jiàn)的就是光標(biāo)定位到密碼框瘤运，然后一個(gè)字符一個(gè)字符的去刪除。其實(shí)有更好的交互設(shè)計(jì)方式匠题。
? ? ? ?3.1 ?直接清空用戶名和密碼
? ? ? ?3.2 ? 只清空密碼框韭山，像QQ郵箱的登錄郁季，如果密碼錯(cuò)誤，會(huì)只清空密碼框钱磅。驗(yàn)證碼填寫時(shí)梦裂，如果長(zhǎng)度不足，會(huì)選中錯(cuò)誤的驗(yàn)證碼盖淡，方便刪除后再次輸入年柠。
? ? ? ?3.3 ?密碼錯(cuò)誤次數(shù)過(guò)多后的處理毅往，iCloud的我認(rèn)為是處理最好的牵咙，如果密碼錯(cuò)誤超過(guò)一定次數(shù)，會(huì)出現(xiàn)找回密碼的提示框攀唯，非常人性化洁桌。
? ? ? ?3.4 ?刪除時(shí)，按一下后退鍵清空所有輸入字符(只對(duì)密碼框有效)
在iOS系統(tǒng)下侯嘀，登錄時(shí)密碼錯(cuò)誤另凌，刪除時(shí)不是一個(gè)字符一個(gè)字符的刪除谱轨，而是一下清空。這個(gè)我在網(wǎng)站上還沒(méi)見(jiàn)過(guò)這樣設(shè)計(jì)的吠谢。只對(duì)密碼框清空土童。
總結(jié)一下：
用戶輸入前：頁(yè)面盡量的簡(jiǎn)潔，但要給清晰的支持的用戶名格式說(shuō)明工坊，尤其是支持的用戶名字類型献汗；
用戶輸入中：錯(cuò)誤時(shí)，給出提示并說(shuō)明如何進(jìn)行下一步王污；正確時(shí)罢吃，給出正確提示；
用戶輸入后：錯(cuò)誤時(shí)昭齐，用戶名和密碼框處理策略不一樣尿招，密碼框可以清空；正確時(shí)阱驾，如果是某功能流程時(shí)的登錄就谜，則登錄成功一定要繼續(xù)登錄前操作流程，否則就跳轉(zhuǎn)回登錄前的頁(yè)面啊易。
