亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

在Web端輸入密碼時，我們通常會看到一個個小圓點作為掩碼，用以隱藏用戶輸入的內(nèi)容。如下圖這樣：

我發(fā)現(xiàn)，為了實現(xiàn)這些圓點的特定大小，往往需要進行切圖，這種方法大大增加了開發(fā)的工作量。因此，我開始探索是否可以使用字體中的特殊字符來代替，以此來節(jié)省開發(fā)時間。

在網(wǎng)上搜索后，我發(fā)現(xiàn)有三種大小的圓點特殊符號，·•●從左到右依次稱作小圓、中圓、大圓，小圓通常對應(yīng)中文輸入法中的“·” ；而中圓和大圓的大小則不那么固定，它們會隨著不同的字體和字重變化。在Web端，由于Mac和Windows系統(tǒng)使用的字體不同，我們需要考慮這些差異。

相同字號，在蘋方字體和Mcrosoft Yahei UI字體下，三個圓點的大小表現(xiàn)如下圖

通過對比不同字體下的圓點大小，我發(fā)現(xiàn)在蘋方字體下，中圓和大圓相對較大（大圓的差異更為顯著），而字重對圓點大小沒有影響。相反，在Microsoft Yahei UI字體下，中圓和大圓顯得較小，特別是在加粗樣式下，小圓的大小幾乎與中圓相同。這解釋了為什么在不同設(shè)備和字體下，我們觀察到的密碼掩碼大小會有差異。

在設(shè)計中，我選擇了16px的字號。實驗表明，在Microsoft Yahei UI字體下，中圓略顯小，而大圓則恰到好處；而在蘋方字體下，大圓視覺上過大，中圓又稍顯小。這表明，要在兩個主要的操作系統(tǒng)上實現(xiàn)一致的設(shè)計效果，最好是使用同一種字體。然而，僅僅為了一個圓點就引入新的字體資源似乎并不經(jīng)濟。

幸運的是，我發(fā)現(xiàn)兩個系統(tǒng)有一些共通的英文字體，共有12種：Arial、Comic Sans MS、Courier New、Georgia、Impact、Lucida Console、Palatino Linotype / Palatino、Tahoma、Times New Roman、Trebuchet MS、Verdana和Symbol。經(jīng)過一系列的對比測試，我最終選擇了廣泛使用的Arial字體。（見下圖）

優(yōu)化后的設(shè)計效果如下圖所示。請注意，只有在隱藏密碼時才使用了Arial字體，而在顯示密碼時，仍然使用了蘋方或Microsoft Yahei UI字體。這樣的設(shè)計不會增加開發(fā)難度。如果輸入框中的內(nèi)容不包含漢字，完全采用Arial字體也是可行的；但我認為，蘋方和Microsoft Yahei UI在顯示效果上優(yōu)于Arial，因此即使不包含中文，我還是選擇了不同的字體。

此外，如果輸入的文字不加粗，視覺上傾向于使用較小的圓點，那么可以選擇中圓，這是目前主流網(wǎng)站的做法。中圓在三種字體下的表現(xiàn)各有不同，見下圖

Mac系統(tǒng)中的蘋方字體表現(xiàn)最佳，而Arial字體下的則相對較弱。此時，應(yīng)注意，更小的圓點應(yīng)配以更大的字間距，以降低視覺疲勞，特別是在沒有顯示密碼功能時。

最后，值得一提的是，在移動端，掩碼設(shè)計通常更大，這可能是因為在移動端自定義大小的實現(xiàn)相對容易。在過往的項目中，我通常將圓點進行切圖，開發(fā)過程也相對順暢，這表明在移動端實現(xiàn)自定義大小的掩碼設(shè)計應(yīng)該會更為便捷。

（WX關(guān)注 “小桔設(shè)計”，解鎖）

Powered by Froala Editor