編者按：不顯示密碼容易輸錯(cuò)，顯示密碼又會(huì)讓用戶感到不安全，兩者如何權(quán)衡？有什么設(shè)計(jì)方法可以同時(shí)滿足方便+安全的需求？今天@網(wǎng)秦UEC?同學(xué)給出一篇詳實(shí)的分析，一起聊聊這個(gè)細(xì)節(jié) >>>

在2012年，我曾介紹過(guò)為什么要讓大家在登陸應(yīng)用，特別是移動(dòng)設(shè)備應(yīng)用時(shí)能夠看到密碼?，F(xiàn)在，兩年過(guò)去了，很多大規(guī)模的新設(shè)計(jì)也出現(xiàn)了，下面我就來(lái)概括一下顯示密碼的重要意義和方法，以及后續(xù)的發(fā)展趨勢(shì)。

顯示密碼意義何在？

密碼想來(lái)充斥著實(shí)用性的問(wèn)題。由于過(guò)度復(fù)雜的安全性要求（最低字符數(shù)、標(biāo)點(diǎn)等等）以及輸入框的使用不夠簡(jiǎn)便，密碼輸入經(jīng)常會(huì)讓客戶反感甚至走人。

大約有82%的人有過(guò)忘記密碼的經(jīng)歷。企業(yè)內(nèi)部網(wǎng)絡(luò)服務(wù)臺(tái)所最頻繁收到的請(qǐng)求就是恢復(fù)密碼，而在瀏覽電子商務(wù)類(lèi)網(wǎng)站時(shí)，如果需要先恢復(fù)密碼，會(huì)有75%左右的人最后無(wú)法完成購(gòu)買(mǎi)流程。換句話說(shuō)，密碼是個(gè)衰人！而對(duì)于屏幕小、手指按不準(zhǔn)的移動(dòng)設(shè)備來(lái)說(shuō)，情況就更糟了。

遮蔽密碼會(huì)讓本就困難的輸入變得難上加難，同時(shí)對(duì)于提高安全性裨益甚小，特別是在移動(dòng)設(shè)備上，輸入框正下方就是顯眼的鍵盤(pán)，手指按哪個(gè)鍵，哪個(gè)鍵就會(huì)高亮顯示，這樣的觸摸反饋所顯示的密碼字體大小反而比大多數(shù)輸入框所能顯示的更大。所以說(shuō)實(shí)話，遮蔽密碼其實(shí)并不能防止別人的偷窺。另外，如果你真的察覺(jué)有人偷看你的屏幕，那直接把屏幕換個(gè)位置讓他看不見(jiàn)不就完了！

隱藏/顯示密碼

考慮到上述種種和沒(méi)說(shuō)到的種種原因，我們?cè)赑olar的登陸界面上選擇了將密碼顯示為可見(jiàn)文本。同時(shí)我們?cè)诿艽a框旁邊提供了隱藏選項(xiàng)，以便有需要的人選用，這個(gè)選項(xiàng)可以快速將密碼變成一串“????”。

雖然我自信這樣能有有效提高實(shí)用性和操作的簡(jiǎn)便性，但也不無(wú)憂慮，怕大家會(huì)覺(jué)得盡管能選擇遮蔽，但這么赤裸裸地顯示密碼還是不爽。不管怎么說(shuō)，多年以來(lái)的登陸模式已經(jīng)給了人們“遮蔽密碼就等于安全”這一思維定式。

結(jié)果，很多采用可見(jiàn)密碼設(shè)計(jì)軟件并且大獲成功的人給我?guī)?lái)了驚喜的反饋。Steven Hoober告訴我他給20M Sprint客戶去掉了密碼遮蔽，結(jié)果完全沒(méi)產(chǎn)生問(wèn)題。Mike Lee告訴我們Yahoo！默認(rèn)顯示密碼，結(jié)果出現(xiàn)了兩位數(shù)字的增量（當(dāng)然還有其他功能改變的貢獻(xiàn)），沒(méi)有產(chǎn)生任何安全性問(wèn)題。

所以沒(méi)過(guò)多長(zhǎng)時(shí)間，我就把密碼遮蔽看成了一個(gè)過(guò)時(shí)的陳規(guī)。這一設(shè)計(jì)模式已經(jīng)存在了太久，所以從來(lái)沒(méi)人考慮過(guò)它的意義。我們大家在設(shè)計(jì)登陸界面的時(shí)候都會(huì)習(xí)慣性地默認(rèn)添加密碼遮蔽。而隨之而來(lái)的，就是丟掉生意、實(shí)用性出問(wèn)題。

設(shè)計(jì)解決方案

最近，很多公司開(kāi)始深入考量密碼遮蔽的問(wèn)題，并啟動(dòng)了一些不同的解決方案來(lái)應(yīng)對(duì)。PayPal和Foursquare采用了類(lèi)似于Polar的隱藏/顯示文字交互模式。

LinkedIn、Adobe和Twitter則可以讓用戶通過(guò)點(diǎn)擊一個(gè)睜眼/閉眼圖標(biāo)選擇是否因此密碼。雖然這一類(lèi)視覺(jué)符號(hào)可能沒(méi)有文字那么直白，但是對(duì)于在全球范圍內(nèi)經(jīng)營(yíng)的公司來(lái)說(shuō)，這樣就不用翻譯成長(zhǎng)度不等的多國(guó)語(yǔ)言文案了，所以說(shuō)具有本地化方面的好處。

Microsoft在隱藏/顯示密碼模式方面，采用了一個(gè)比較奇怪的方式。在Windows8中，用戶需要按住眼睛圖標(biāo)才能顯示密碼。一旦將手指從圖標(biāo)上移開(kāi)，就會(huì)繼續(xù)遮蔽密碼。只能說(shuō)尷尬了。

Amazon一直在反復(fù)更改其登陸模式。其過(guò)往歷史包括：從無(wú)法查看密碼到允許通過(guò)明確操作（點(diǎn)擊勾選框）顯示密碼；再到默認(rèn)顯示密碼并允許點(diǎn)擊隱藏。

盡管這些設(shè)計(jì)解決方案都有各自的利弊，但更重要的是Microsoft、Adobe、Twitter、LinkedIn、PayPal、Amazon等等公司都開(kāi)始意識(shí)到登陸界面所存在的問(wèn)題，并開(kāi)始相應(yīng)解決。

設(shè)計(jì)在細(xì)節(jié)

不過(guò)，雖然現(xiàn)在已經(jīng)有很多公司允許用戶在登陸時(shí)看見(jiàn)密碼，但這并不是說(shuō)大家都該一擁而上盲目模仿。正是這種一擁而上的思維讓密碼遮蔽，甚至其他很多問(wèn)題很大的設(shè)計(jì)“模式”（比如安全問(wèn)題）盛行這么多年。

相反，我們應(yīng)該花時(shí)間研究最適合的解決方案。要知道，最小的設(shè)計(jì)細(xì)節(jié)有時(shí)候也能影響成敗。為了讓大家聽(tīng)明白，我們來(lái)看看Jack Holmes有關(guān)舍棄密碼遮蔽的一項(xiàng)研究分析。

在Jack的測(cè)試中發(fā)現(xiàn)，在電子商務(wù)類(lèi)網(wǎng)站上如果默認(rèn)以明確文字顯示密碼，有60%受訪者表示會(huì)對(duì)網(wǎng)站心存疑慮，而只有45%的人認(rèn)為不遮蔽密碼有助于提高實(shí)用性。相比之下，如果添加一個(gè)簡(jiǎn)單的復(fù)選框說(shuō)明當(dāng)前開(kāi)啟了顯示密碼設(shè)置，100%的受訪者都會(huì)注意到復(fù)選框的存在，并將顯示密碼視作一項(xiàng)功能。

從60%的人懷疑網(wǎng)站安全，到100%的人將其看作一項(xiàng)實(shí)用功能，區(qū)別只是一個(gè)簡(jiǎn)單的復(fù)選框。設(shè)計(jì)真的就是在于細(xì)節(jié)。所以也難怪Amazon在其登陸界面加上了這個(gè)復(fù)選框。

Web Vs 本機(jī)?

正如上面的例子所示，很多公司現(xiàn)在都可以讓用戶在登陸移動(dòng)應(yīng)用的時(shí)候看見(jiàn)密碼。同時(shí)也有一小部分公司在Web上實(shí)現(xiàn)了同樣的功能。登陸本機(jī)應(yīng)用的人舒服省事了，那在Web瀏覽器中使用服務(wù)的用戶為什么不行呢？

這個(gè)問(wèn)題再一次提到了安全性的高度。詳細(xì)來(lái)說(shuō)，如果：

1.?? 有人拿到了我的設(shè)備

2.?? 并且能解鎖

3.?? 再導(dǎo)航到了某個(gè)網(wǎng)站

4.?? 而我在瀏覽器里自動(dòng)保存了這個(gè)網(wǎng)站的密碼

5.?? 而這個(gè)網(wǎng)站又允許在登陸界面查看密碼

6.?? 這樣，這個(gè)人就能看見(jiàn)我的密碼了

瀏覽器的密碼保存功能、自動(dòng)填單功能和密碼可見(jiàn)功能的混合就這樣造成了嚴(yán)重的安全性問(wèn)題。有一個(gè)能夠緩解這個(gè)問(wèn)題的方法，就是在瀏覽器自動(dòng)填寫(xiě)密碼時(shí)，隱藏密碼框。這樣一來(lái)，假如有人想查看密碼，瀏覽器就會(huì)刪除密碼框內(nèi)的內(nèi)容，并要求重新輸入。

遺憾的是，考慮到實(shí)施這一解決方案所需要的設(shè)計(jì)和開(kāi)發(fā)工作，這一辦法略顯得有些得不償失，還不如把這些精力放到如何從整體上簡(jiǎn)化登錄問(wèn)題上去。

超越密碼

Amazon在其最新發(fā)布的iOS版本中仍在繼續(xù)更新移動(dòng)端登陸界面，它們干脆直接不要求用戶輸入密碼。用戶需要登陸帳戶時(shí)，可以直接觸摸手機(jī)主按鈕，通過(guò)Apple的Touch ID驗(yàn)證指紋。

而Uber的代步服務(wù)則更上一層樓。用戶不需要注冊(cè)賬戶、創(chuàng)建密碼和輸入付款信息，只需要將手指放到手機(jī)Touch ID傳感器上就能完成車(chē)輛下單支付的全部流程。不需要填寫(xiě)任何表單和密碼。

雖然說(shuō)Touch ID功能僅限于Apple的最新iOS設(shè)備，但是這個(gè)解決方案將繁復(fù)的流程簡(jiǎn)化成了簡(jiǎn)單的一次觸摸，為登錄流程的設(shè)計(jì)開(kāi)創(chuàng)了新前景。如果有的選，大家會(huì)選擇怎么樣的方式來(lái)登陸登出呢？是通過(guò)復(fù)雜的表單和麻煩的密碼？還是簡(jiǎn)單的一次觸摸呢？

從這個(gè)角度來(lái)看...登錄表單和密碼框的未來(lái)已經(jīng)很清晰了。

【不懼潮流！短期快速提高設(shè)計(jì)能力三部曲】

Step 1：設(shè)計(jì)第一步！版式設(shè)計(jì)基礎(chǔ)原則學(xué)起來(lái)！
《設(shè)計(jì)基礎(chǔ)功！幫你徹底掌握設(shè)計(jì)四大原則中的對(duì)比原則》

Step 2：設(shè)計(jì)第二步！配色好整個(gè)界面都高端了！
《秒變配色高手！怎么都不會(huì)錯(cuò)的6條網(wǎng)頁(yè)設(shè)計(jì)配色原則》

Step 3：最后一步！來(lái)個(gè)實(shí)戰(zhàn)文你就全懂了！
《設(shè)計(jì)易容術(shù)！如何設(shè)計(jì)一張高品位高水準(zhǔn)的海報(bào)？》

原文地址：lukew
譯文地址：uec.nq
譯者：蔣燦

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量92萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：