01、錯位切割
將數(shù)字進行切割遮擋，然后按照一定的規(guī)律或節(jié)奏進行錯位擺放，使畫面呈現(xiàn)出動感和空間感，非常簡單實用。
02、重復(fù)線條
使用重復(fù)的線條組成數(shù)字，數(shù)字呈現(xiàn)出一種如水的流動感，在此基礎(chǔ)上可以再加入立體效果，形式感會更強。
03、幾何構(gòu)成
使用基礎(chǔ)的幾何形狀組成數(shù)字，這種方法同樣適用于字母和漢字，理念源于包豪斯時期，至今仍然沒有過時，反而顯得很現(xiàn)代。
04、圖片疊加
使用圖片疊加的方式使數(shù)字呈現(xiàn)出豐富的視覺效果，可以直接用正片疊底的方式將數(shù)字疊加在圖片上，也可以用蒙版的方式將圖片內(nèi)嵌在數(shù)字的形狀中，同時將圖片中的一部分延伸出來，效果會更好。
05、插圖填充
在數(shù)字輪廓內(nèi)，使用符合主題的插圖元素填充，需注意插圖的形狀和擺放要與數(shù)字的形狀相適配，部分元素可放在數(shù)字輪廓之外，使畫面更加的鮮活。
06、虛構(gòu)立體
以點、線、面的方式，虛擬出立體的文字效果，營造出 “平面不平” 的視覺感受，也可以運用矛盾空間的理念，讓文字的立體效果更有趣味性。
07、動靜結(jié)合
把數(shù)字的一部分羽化成動態(tài)元素，如流動的水、飛舞的蝴蝶等，使數(shù)字呈現(xiàn)出動靜結(jié)合的視覺效果。
08、層巒疊嶂
通過層層重疊的手法使數(shù)字產(chǎn)生立體的視覺效果，同時用折疊、錯位的方式讓畫面的效果更加豐富。
09、三維立體
C4D，無疑是當今設(shè)計師的進階必備技能，層出不窮的三維軟件工具，讓數(shù)字的呈現(xiàn)方式有更多的可能性。
來源 | 字美之道 ID:zimeizhidao
]]>
設(shè)計：Raffaele Micillo
]]>
上周我們一起聊了，界面常用的中文字體和英文字體，本期聊聊數(shù)字字體，數(shù)字在設(shè)計中其實占比還是很大，特別是在金融和電商設(shè)計中，數(shù)字字體，一直是情感的傳遞，設(shè)計細節(jié)的體現(xiàn)！那么今天和大家分享下在電商設(shè)計和金融設(shè)計中，常用的數(shù)字字體有哪些！
字體的骨架
結(jié)構(gòu)部分
分享前我們先要了解下字體結(jié)構(gòu)：
頂部：字體中最高字形的基線上方的最大距離
上升：單個字母的基線上方的建議距
下降：單個字母的建議距離低于基線
底部?: 字母中最低字形的基線以下的最大距離
行距：指代字體連行的基線間的距離
基本的英文字體都是由這些單位組成的，所以在了解這些基礎(chǔ)后，才更加方便我們設(shè)計中如何選擇字體。
身體部分
前面那張圖是字體的上下結(jié)構(gòu)關(guān)系，那么這張圖更多是字體本身由那些元素組成：
軀干：也就是數(shù)字本身的橫豎，比較筆直的筆畫
字碗：顧名思議，帶弧形的筆劃
字環(huán)：字體被包裹的空間
字距部分
在字距上，業(yè)內(nèi)兩種做法，一種是每個字體相同的大小，比如我們熟悉的lato，也有一種做法是根據(jù)每個字母本身一個大小，比如1會小一些，9會大一些，這兩種布局方式有好有壞，我個人更推薦前者，每個字母間距采用一樣的！
需要注意的點
▲ 通常我們很多時候，網(wǎng)上去免費找一些數(shù)字字體，或者選擇幾款熱門字體時候，一定需要注意檢查“$”和“％”“￥”符號。
▲ 另外在選擇字體時候，一定需要仔細檢查每個字符，比如數(shù)字中最容易混淆的就是1和7，0和O。
常用數(shù)字字體
那么我們做金融設(shè)計或者電商設(shè)計，數(shù)字字體到底用哪幾個呢？在選擇之前，先來看看互聯(lián)網(wǎng)公司都在使用哪些字體。
▲ 蘋果系統(tǒng)：使用的舊金山字體SanFrancisco，微信：DIN的字體基礎(chǔ)上微調(diào)
▲ 招商銀行：DIN字體；京東金融：DIN的字體，重新進行了設(shè)計
▲ 百度金融：DIN字體基礎(chǔ)上調(diào)整6.9，支付寶：蘋果原生Helvetica Neue
▲ 富途：蘋果原生Helvetica Neue，韓國SSG：蘋果原生Helvetica Neue
所以通過以上簡單調(diào)研，我們不難發(fā)現(xiàn)，現(xiàn)在國內(nèi)外大多數(shù)金融產(chǎn)品數(shù)字字體都是運用蘋果自帶數(shù)字字體，以及Din這個字體基礎(chǔ)上調(diào)整，那么為什么Din這個字體這么受設(shè)計師喜愛呢？
Din故事
DIN 是德國標準協(xié)會，Deutsches Institut für Normung 的首字母縮寫。1975年起，德國政府把DIN作為國家標準體系，DIN 標準在國際和歐洲范圍內(nèi)被廣泛使用。DIN 字體繼承了嚴謹可識別度高，被廣泛運用。
▲ 在德國公路指示牌，以及機場，地圖里面，大多數(shù)運用Din字體作為引導(dǎo)字體。
▲ 在很多雜志包裝中，也可見大量Din字體的運用，德國人的嚴謹在這個字體中體現(xiàn)的淋漓極致。
▲ 缺陷：前面我們說了DIN在公路以及雜志，平面設(shè)計中用的很多，但是直接拿到互聯(lián)網(wǎng)APP設(shè)計中各種復(fù)雜的場景，DIN就沒有那么的完美，如圖中，4的開頭較大，以及5，6字體的圓形不夠一致，7縮小后識別度問題，所以很多公司都會基于這些問題進行二次設(shè)計，這也是前面競品分析里面提到，為什么微信，京東，百度會這個基礎(chǔ)上再設(shè)計的原因。
常用數(shù)字字體
如果只推薦一個數(shù)字字體，我肯定會推薦Din，但是Din并不免費，價格不便宜，如果需要運用每年會有一筆不小的費用，所以如果公司不愿意購買，你可以Din基礎(chǔ)再重新設(shè)計一版本，也可以使用一些其他不錯的數(shù)字字體，接下來給大家推薦一些免費版權(quán)使用的！
1.Gaoel
如果都是用Din其實也容易看膩歪，首先推薦的這個我特別喜歡，整體字體設(shè)計很圓潤，年輕化，可愛非常適合一些偏年輕化的產(chǎn)品，同時字重非常適合金融產(chǎn)品的字重效果！
▲ 在支付寶備用金頁面中，就運用了類似這種比較圓潤有活潑感數(shù)字字體！大家可以嘗試下這個字體在你界面中效果，保證不會失望。
2.Montserrat
谷歌免費字體中很優(yōu)雅的一個字體，用在數(shù)字上或者界面中都非常的優(yōu)雅。
3.Poppins
谷歌免費字體中經(jīng)常被用到的一個字體，除了9稍微顯得有點笨拙以外其他都挺現(xiàn)代的。
4.Bitter
谷歌旗下的同樣廣泛運用到各種設(shè)計中，字體和英文字體都很好用。
5.Fjalla One
Din字體的替代品，很多人一直在尋找的，如果公司不愿意購買Din字體，那么谷歌旗下這個字體非常完美的替代品，使用出來的效果和Din也不會相差很多。
6.Graduate
谷歌旗下免費的，非常英倫風格和學(xué)院風的一款數(shù)字字體，用在海報或者一些個人化活動頁面效果非常好，當然作為英文排版也是很高級。
7.Futura
谷歌旗下免費的，這個字體無論英文還是數(shù)字都非常現(xiàn)代化，非常干凈利索的一款字體，做到PPT里面效果非常好。
8.Proxima Nova
這款不免費，當然收費也非常對得起他這個價格，效果大家可以自己看，非常優(yōu)雅，現(xiàn)代。
9.Gotham
非常適合發(fā)布會，極簡的網(wǎng)站設(shè)計，或者海報，非常現(xiàn)代干凈的一款字體，效果如圖，dribbble上各種好看的設(shè)計里面都跑不了這款字體。
10.Lato
非常現(xiàn)代科技感的一款字體，無數(shù)知名app在用的字體，同樣出自谷歌旗下，保證你不會出錯的一款字體，之前天貓用過，效果非常好。
襯線字體
Playfair Display
如果只讓我推薦一款襯線英文字體，那么必須是Playfair Display莫屬，心頭大愛的字體，古典，現(xiàn)代優(yōu)雅于一體，不知道多少大牌一直用這個字體做設(shè)計。
如果你一直在尋找一款襯線英文字體，那么這個必須首先，效果直接看圖！
關(guān)于界面中字體系列就到這里，基本這些字體覆蓋我們常用的中英文，掌握這兩個就夠了。
最后
希望通過這兩篇的分享，能夠幫助大家在UI設(shè)計中提升字體的運用，以及如何去定義一個界面的字體！
原文地址：我們的設(shè)計日記（公眾號）
作者：sky
