看完小米設計師這篇分析,才知道界面細節能做得這麼極致

數字是金服業務中最為重要的設計要素之一,這是因為在金服業務中,有大量的諸如電商、支付、財富管理等場景需要數字來直接表達。而當前現狀是我們在整個大品牌體系下的諸如小米蘭亭這種通用字體,但唯獨缺少針對金服業務這種特殊需求的特定數字字體以及數字的表達規範。因此需要總結出一套適合我們業務的數字的功能設計需求。

一、瞭解金服業務場景特徵

那麼在金服業務中的數字字體與其它業務的數字字體有哪些特殊之處?可以先以業務為導向,從小米金服現有業務的產品方案中例舉場景:

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

從現有的業務中可以篩選出如下金服數字不同應用場景下的功能和特點:

1. 三位以上大額金額含小數的表達,即大於999.99元

電商大額價格標籤,保險額度,貸、還款金額以及理財本金金額等。

2. 三位以內小額金額含小數的表達,即小於等於999.99元

小額訂單和收銀臺金額,現金和米幣餘額,公交卡和 MiPay 金額,投保金額,理財收益與貸款利息等。

3. 十位以上長整數的表達

銀行號,身份證號,訂單號、手機號等。

4. 十位以內含十位短整數的表達

信用分,車牌號,積分等。

5. 其它

利率,百分比,匯率與金融符號等。

二、基於人們現實生活場景的習慣和認知

通過例舉現實生活場景,發現與金服業務相交集的實際數字的具體應用之處:

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

在這些實際場景中總結出數字應用的相關共性:整數與小數、可識別性、環境關係以及組合與等寬。

三、整數與小數

通過對現實中的超市小額價籤、股市數據展示等等收集整理,可以得到一些價格標識的基本共性:商品價籤,年報數字,股市數字,電子錶計時數字,票據數字等。

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

1. 一般小額金額的兩種標識方式:有小數點的表達與不帶小數點的表達

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

2. 大額金額的標識方式

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

3. 金額的簡化標識方式

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

四、可識別性

通過對現實中的注重數字功能性表達的產品和場景的收集整理,這些產品和場景包括諸如計時設備、計算設備、交通導向指示、交通工具儀表顯示、貨幣、汽車牌照等等,可以得到一些數字字體在可識別性上的基本共性。

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

對這些收集的圖片素材進行字體提煉,得出12種常用的數字字體:

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

可識別性測試方法是通過對字體進行靜態的高斯模糊以及動態模糊來大致判斷字體在極限情況下數字之間差異性程度,例如對 DIN Pro 字體進行高斯模糊:

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

對 DIN Pro 字體進行動態模糊:由於是基於移動設備來進行界面的視覺設計,因此需要考慮數字字體在各個方向上受到動態殘影的識別影響:

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

從而我們得出 DIN Pro 數字字體可能存在的可識別性問題:

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

同樣諸如其他字體也可能存在的可識別性問題:

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

由此獲得一些影響數字字體間可識別性的基本共性,而其中 Highway Gothic、Frutiger、LuzSans、Kint Extended、UKIJ Ekran 這4種字體的在極限情況下識別性較好,經過對比和分析得到一些簡答結論:

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

五、環境關係

通過對現實中的數字在陰暗、偏轉方向等極端條件下的不同粗細體、間距等案例的收集整理,這些產品和場景包括諸如深海潛水錶、登月表、命令行、檯球,雙色球數字等等,可以得到一些數字字體在可區分性上的基本共性對現。

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

數字的粗細體在黑白環境下的對比:

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

很明顯,由於人的視錯覺關係,同樣粗細和磅值下,深底淺字粗細感比淺底深字要更顯粗:

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

數字的形狀與間距關係在黑白環境下的對比:

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

人們的閱讀習慣與環境關係:

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

六、組合與等寬

數字要具有金融屬性,最重要的一點就是需要和各種貨幣符號或數學符號相組合才能體現,因此通過對現實中的數字在價籤等場景展示的收集整理,另外還可收集一些現實中數字的靜態和動態變化的場景諸如股市、財報、汽車儀表和中控等來分析數字等寬和非等寬的實際應用:

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

數字與符號的組合的不同情況與分析:

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

等寬字體在縱向排版的靜態場景中可讀性更高:

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

而非等寬字體在單組橫向數據上的視覺感官更舒適:

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

而在數字的動態變化中,等寬字體能夠避免字段的橫向變動,可讀體驗更好:

看完小米設計師這篇分析,才知道界面細節能做得這麼極致

七、追求形式與功能之間的平衡

隨著目前手機全面屏的普及,移動設備的屏佔比將會越來越大,意味著內容的顯示區域也可能越來越大。另一方面,為了達到更好的圖形圖像顯示效果,移動設備的 PPI 也有可能越來越高。 這些趨勢將有可能導致人們對於內容字體在排版、細節上的要求越來越高。

基於以上對於數字在功能設計上的分析與結論,數字字體設計形式上應與現有的移動設備系統的主流中英文字體能夠匹配,同時也能夠適應於不同的應用場景需求,體現統一的字面大小、行距、字重、中宮、重心等,但又不必過於刻板,感官上體現年輕正向最宜。 功能上能夠儘量滿足我們對於數字設計在互聯網金融服務上的共性和特性的理解,體現金融服務數字的安全嚴謹。

作者:小米金服用戶體驗

鏈接:https://www.uisdc.com/mi-designer-interface-details

今天就分享到這裡啦~~

如果有任何關於設計的問題

都可以私聊站長喲

站長微頭條 不定時更新好東西喲!


分享到:


相關文章: