超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

如何設(shè)計(jì)優(yōu)秀的登錄框?

2014-2-11    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   m.miumiuwan.com  )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,   請(qǐng)點(diǎn)這里 

登錄框存在已久,對(duì)于用戶來(lái)說(shuō)是必定每天接觸,對(duì)于設(shè)計(jì)師來(lái)說(shuō)也是一個(gè)墨守陳規(guī)的控件,兩個(gè)框加個(gè)按鍵,如果猛然抓個(gè)設(shè)計(jì)師問(wèn)「你覺(jué)得登錄框界面設(shè)計(jì)還有哪 些可以改進(jìn)的點(diǎn)」,得到的回答應(yīng)該是長(zhǎng)時(shí)間的沉默,當(dāng)然也包括我?!笇幙梢凰歼M(jìn),莫在一思?!梗@是一代宗師里的拳理,同樣也是做人做事的道理,思進(jìn)方可 有所為,一思一念間高下已分,體現(xiàn)在互聯(lián)網(wǎng)應(yīng)用及服務(wù)應(yīng)該就更為深刻了。

扯回主題,解決以下任何一個(gè)問(wèn)題的登錄框都是藍(lán)藍(lán)設(shè)計(jì)所認(rèn)為的優(yōu)秀登錄框ui設(shè)計(jì)(個(gè)人認(rèn)為的優(yōu)秀登錄樣式,參考長(zhǎng)文最后部分):

1. 輸入效率問(wèn)題,現(xiàn)階段大多數(shù)用戶登錄均要求用戶使用傳統(tǒng)的鍵盤進(jìn)行輸入,這里就涉及一個(gè)問(wèn)題–擊鍵效率或稱為輸入效率。有許多解決輸入效率的方法,如,

  • 使用統(tǒng)一賬戶,許多互聯(lián)網(wǎng)服務(wù)允許使用OpenID,新浪、騰訊、Facebook、twitter…等等,像知乎允許使用新浪微博的賬號(hào)登錄,這樣就減少了用戶進(jìn)行注冊(cè)或登錄時(shí)的輸入成本。
  • 記住用戶名及密碼,這樣可避免用戶下次再進(jìn)行輸入,但用戶清空cookie或安全級(jí)別要求高的互聯(lián)網(wǎng)服務(wù)就悲劇了。
  • 在輸入過(guò)程中給予用戶幫助,例子:新浪微博使用郵箱做為登錄名(如圖1),用戶在輸入@ 后,將會(huì)出現(xiàn)輸入建議,輸入建議里有常用郵箱的后綴以輔助輸入。

圖1

另外,還有一些細(xì)節(jié),如,在用戶輸入完用戶名或密碼后,焦點(diǎn)重新切換回用戶名或密碼的輸入框,應(yīng)該是全選已輸入內(nèi)容呢還是輸入焦點(diǎn)位于已輸入文字的后面?用戶名及密碼正確,僅驗(yàn)證碼出錯(cuò)的情況下應(yīng)該如何處理?

解決方案:使用OpenID,或使你的賬戶成為OpenID(對(duì)于國(guó)內(nèi)巨頭這是句廢話),允許用戶記住賬戶及密碼(默認(rèn)項(xiàng)給勾上),給予用戶輸入輔 助,記住用戶輸入過(guò)的歷史記錄(可別記密碼)并在適當(dāng)?shù)挠|發(fā)條件下顯示出來(lái)。ps.以上僅為部分,還需要區(qū)域Web端及移動(dòng)端。

2. 輸入模式問(wèn)題,在輸入用戶名時(shí),用戶是否能夠明確自己處于中文模式或英文模式?輸入密碼時(shí),能否明確Caps Lock處于哪種狀態(tài)?輸入模式到目前為至一直是個(gè)令人討厭的問(wèn)題,或者你感覺(jué)不到,認(rèn)為在輸入錯(cuò)誤后僅僅需要按幾次退格就可以修正這個(gè)錯(cuò)誤,假設(shè)用戶在 期望輸入英文時(shí)恰好正處在中文輸入模式里,那用戶需要執(zhí)行的操作就多了,先刪除已輸入的錯(cuò)誤字符,再執(zhí)行Crl+空格,或者用鼠標(biāo)切換至英文模式。另,非 可見密碼狀態(tài)下Caps Lock的開關(guān)影響到整個(gè)登錄操作的成?。ㄈ鐖D2)

圖2

解決方案:中英文輸入模式最終需要輸入法來(lái)進(jìn)行解決,可惜現(xiàn)階段沒(méi)有哪款PC端輸入法考慮到輸入模式對(duì)用戶的影響并加以解決。登錄框內(nèi)可采用類似圖 2在密碼區(qū)域增加Caps Lock狀態(tài)提示,一般無(wú)需特別對(duì)用戶名輸入?yún)^(qū)域增加Caps Lock提示,因大部分用戶名對(duì)大小寫不敏感。另,可考慮優(yōu)雅的明文顯示密碼,如在「移動(dòng)應(yīng)用中注冊(cè)新用戶及用戶登錄的時(shí)候,密碼應(yīng)不應(yīng)該顯示為明文?」一文中所描述。

3. 圖片驗(yàn)證問(wèn)題,現(xiàn)常規(guī)的驗(yàn)證碼也是讓我無(wú)限蛋痛的問(wèn)題之一,為了判斷是否屬于正常登錄而非惡意的侵犯或騷擾,這對(duì)于真正的用戶 來(lái)說(shuō),驗(yàn)證碼沒(méi)有必要出現(xiàn),所以僅在登錄時(shí)觸發(fā)某些條件再顯示驗(yàn)證碼吧(像登錄錯(cuò)誤次數(shù)等)。難以識(shí)別的的驗(yàn)證碼對(duì)于用戶來(lái)說(shuō)是沉重的壓力,像I和l的識(shí) 別難度,還有支付寶原來(lái)的字母O和數(shù)字0的問(wèn)題,無(wú)奈設(shè)置的驗(yàn)證碼一次次將用戶阻擋在服務(wù)之外。

如實(shí)在無(wú)法繞過(guò)驗(yàn)證碼這個(gè)環(huán)節(jié),是否可以考慮為驗(yàn)證碼增加一些實(shí)際意義,像reCAPTCHA: Stop Spam, Read Books 項(xiàng)目(已被google收購(gòu)),利用驗(yàn)證碼技術(shù)來(lái)幫助典籍?dāng)?shù)字化的進(jìn)行,這個(gè)計(jì)劃將由書本掃描下來(lái)無(wú)法準(zhǔn)確的被光學(xué)文字辨識(shí)技術(shù)(OCR)識(shí)別的文字顯示在驗(yàn)證碼問(wèn)題中,讓用戶在回答驗(yàn)證碼時(shí)用人腦加以識(shí)別(如圖3),一舉兩得。

圖3(不過(guò)這驗(yàn)證碼曾讓我想砸電腦 -_-’)

PS. 其實(shí)中文的識(shí)別比英文要難得多,為什么不鬧個(gè)漢字的OCR改進(jìn)計(jì)劃呢?利用用戶輸入驗(yàn)證碼的精度校正漢字的OCR。

解決方案:主要是解決驗(yàn)證碼的識(shí)別問(wèn)題,像End the CAPTCHA Agony利用游戲的方式進(jìn)行驗(yàn)證。或像SolveMedia(Engagement Advertising Technology),在驗(yàn)證碼內(nèi)嵌入容易識(shí)別的廣告。國(guó)內(nèi)已經(jīng)有類似的公司做這樣的事情,相對(duì)于提供免費(fèi)服務(wù)的網(wǎng)站來(lái)說(shuō),這樣做也無(wú)可厚非,如豆瓣可以嘗試在驗(yàn)證碼環(huán)節(jié)加入自己的FM pro廣告,嘿嘿。

4. 反饋,這包括在用戶登錄過(guò)程中所需要的各種反饋,如:

  • 輸入框選中的反饋,明確用戶當(dāng)前所在位置。
  • 輸入過(guò)程中的反饋,上面輸入效率及輸入模式中提到的點(diǎn)。
  • 提交驗(yàn)證過(guò)程反饋,給個(gè)loading效果讓用戶知道目前處于等待狀態(tài),是否允許在提交過(guò)程中取消登錄?
  • 驗(yàn)證出錯(cuò)后的反饋,提示用戶哪個(gè)環(huán)節(jié)出現(xiàn)了錯(cuò)誤,密碼是保留還是清空?

圖4

解決方案:明確登錄過(guò)程中的各種反饋,并將這些反饋進(jìn)行細(xì)化,使之具有意義,方便用戶理解。如,OSx 及 iCloud的登錄框在出錯(cuò)后,都會(huì)抖動(dòng)提示驗(yàn)證出錯(cuò)。恰當(dāng)?shù)膭?dòng)效在這里得到的很好的體現(xiàn),抖動(dòng)的效果與人類搖頭的效果一致。

5. 多賬戶問(wèn)題,某些應(yīng)用及服務(wù)允許多賬戶,如桌面端的QQ、Chrome、Win操作系統(tǒng)等。涉及賬戶的選擇、登錄的時(shí)機(jī)等。舉 個(gè)反例,Mac端的QQ,當(dāng)用戶打開Mac版QQ時(shí),第一時(shí)間顯示的是單個(gè)賬戶,沒(méi)有明確提示用戶選擇其它賬戶或添加其它賬戶的入口,導(dǎo)致很多用戶只能在 不斷試錯(cuò)后才知道點(diǎn)擊頭像進(jìn)行選擇(如圖5左)。ps.MacQQ打開后,默認(rèn)焦點(diǎn)停留在QQ號(hào)碼輸入?yún)^(qū)域并全選,這是想鬧哪樣?如果用戶登錄過(guò)了,默認(rèn) 焦點(diǎn)應(yīng)該在密碼輸入?yún)^(qū)域啊,反饋過(guò)也沒(méi)見改進(jìn)… -_-’

圖5

解決方案:系統(tǒng)支持多賬戶,給出足夠明顯的提示,方便用戶切換賬戶(圖5右),并盡可能以選擇代替輸入,成本較低,注意一下選擇賬戶后光標(biāo)的默認(rèn)位置(這里可能還涉及記住密碼的問(wèn)題)。

6. 遺忘密碼問(wèn)題,這也是因?yàn)楦鞣N應(yīng)用及服務(wù)太多,而且大都需要用戶進(jìn)行注冊(cè),用戶也難免會(huì)遺忘(使用統(tǒng)一的OpenID可解決很大一部分問(wèn)題)。遺忘密碼可在登錄區(qū)域明顯的放置,也可采用一些巧妙的方式進(jìn)行提示(圖6)。

圖6

解決方案:這里提一下忘記密碼流程上需要注意的點(diǎn)吧,盡量少使用安全問(wèn)答,不安全,現(xiàn)階段個(gè)人信息在網(wǎng)上近乎透明;用戶遺忘密碼時(shí)不要強(qiáng)行給用戶設(shè)置一個(gè)新密碼;通過(guò)郵件讓用戶自行重置密碼;對(duì)于安全級(jí)別要求高的服務(wù)采用多種方式重置密碼,如,手機(jī)+郵件+U盾+人工等。

7. Accessibility,登錄區(qū)域是否滿足了無(wú)障礙性的需求?用戶名及密碼的輸入是否有其它的方式?驗(yàn)證碼的設(shè)計(jì)是否合理?大部份的研究指出,大概有20%的人口有某種程度的殘障,當(dāng)然并不是所有殘障人士都有讓他們使用互聯(lián)網(wǎng)困難的殘疾,可是在人口比例上還是很重要的。

中國(guó)是全世界盲人最多的國(guó)家之一,眼部疾病在中國(guó)也是一個(gè)主要的公共衛(wèi)生問(wèn)題。中國(guó)約有盲人600-700萬(wàn),占世界盲人總數(shù)的18%,另有雙眼低視力患者1200萬(wàn)。我國(guó)盲人數(shù)量早已超過(guò)諸如丹麥、芬蘭、挪威等國(guó)家的人口數(shù)。

  • 網(wǎng)銀登錄驗(yàn)證碼被指歧視盲人 493人聯(lián)名要求糾正

有興趣可到這里詳細(xì)了解:WebAIM: Introduction to Web Accessibility

解決方案:堅(jiān)持可用性設(shè)計(jì)理念,利用現(xiàn)有技術(shù)及交互手段:語(yǔ)音輸入;語(yǔ)音識(shí)別;臉部識(shí)別;手勢(shì)識(shí)別;語(yǔ)音驗(yàn)證(File:中文語(yǔ)音Captcha.ogg)等等……

8. 安全問(wèn)題,數(shù)字證書、密保卡、U盾等,對(duì)應(yīng)不同的安全級(jí)別,各有利弊。另,登錄區(qū)域記住密碼功能,cookie需要著重設(shè)計(jì)。該層面很多涉及底層技術(shù),設(shè)計(jì)人員在這里就不胡說(shuō)八道了。個(gè)人傾向于利用移動(dòng)設(shè)備解決安全問(wèn)題。

上面啰嗦了一大堆,下面說(shuō)說(shuō)自己比較喜歡的登錄方式:

1. 利用二維碼掃描登錄,幾乎規(guī)避了上面大部分問(wèn)題,并在安全性上有一定的保證,使用用戶的手機(jī)進(jìn)行驗(yàn)證,不需要用戶的額外輸入, 也不存在密碼或遺忘密碼問(wèn)題。當(dāng)然也存在一些其它的問(wèn)題,如,成本,用戶移動(dòng)設(shè)備需要支持掃描功能,需要移動(dòng)端與Web端或桌面端相結(jié)合,登錄時(shí)需要執(zhí)行 某些特定操作,打開APP,進(jìn)入某功能等(這也可帶動(dòng)移動(dòng)端APP的日活,玩笑)。

圖7

2. 利用特定的交互方式,像Bump連接Web端(圖8),通過(guò)手機(jī)的重力感應(yīng)感知到「bump」,然后將地理位置與碰撞時(shí)間等信 息上傳到服務(wù)器,服務(wù)器根據(jù)最接近的時(shí)間點(diǎn)和地點(diǎn)判斷出手機(jī)或者電腦的IP地址,為它們建立通信配對(duì)。雖然也可用來(lái)進(jìn)行用戶登錄,但安全性較差,真要采用 這種方式,可就要改進(jìn)一下相關(guān)的流程。

圖8

以上當(dāng)然無(wú)法完全替代傳統(tǒng)登錄方式,但可做為補(bǔ)充及增益。
歡迎補(bǔ)全!謝謝

分享本文至:

日歷

鏈接

個(gè)人資料

存檔