提升UI設計的字體運用 分享常用的數(shù)字字體

資訊頻道 - 設計技 來源:我們的設計日記 作者:cdo 2019-09-10

數(shù)字在設計中其實占比還是很大,特別是在金融和電商設計中,數(shù)字字體,一直是情感的傳遞,設計細節(jié)的體現(xiàn)!那么今天和大家分享下在電商設計和金融設計中,常用的數(shù)字字體有哪些!

字體的骨架 

結構部分

    分享前我們先要了解下字體結構:

    頂部:字體中最高字形的基線上方的最大距離

    上升:單個字母的基線上方的建議距

    下降:單個字母的建議距離低于基線

    底部:  字母中最低字形的基線以下的最大距離

    行距:指代字體連行的基線間的距離

    基本的英文字體都是由這些單位組成的,所以在了解這些基礎后,才更加方便我們設計中如何選擇字體。

 

身體部分

    前面那張圖是字體的上下結構關系,那么這張圖更多是字體本身由那些元素組成:

    軀干:也就是數(shù)字本身的橫豎,比較筆直的筆畫

    字碗:顧名思議,帶弧形的筆劃

    字環(huán):字體被包裹的空間

 

字距部分

在字距上,業(yè)內(nèi)兩種做法,一種是每個字體相同的大小,比如我們熟悉的lato,也有一種做法是根據(jù)每個字母本身一個大小,比如1會小一些,9會大一些,這兩種布局方式有好有壞,我個人更推薦前者,每個字母間距采用一樣的! 

需要注意的點  

▲ 通常我們很多時候,網(wǎng)上去免費找一些數(shù)字字體,或者選擇幾款熱門字體時候,一定需要注意檢查“$”和“%”“¥”符號。

▲ 另外在選擇字體時候,一定需要仔細檢查每個字符,比如數(shù)字中最容易混淆的就是1和7,0和O。 

常用數(shù)字字體  

那么我們做金融設計或者電商設計,數(shù)字字體到底用哪幾個呢?在選擇之前,先來看看互聯(lián)網(wǎng)公司都在使用哪些字體。

▲ 蘋果系統(tǒng):使用的舊金山字體SanFrancisco,微信:DIN的字體基礎上微調(diào) 

▲ 招商銀行:DIN字體;京東金融:DIN的字體,重新進行了設計 

▲ 百度金融:DIN字體基礎上調(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這個字體基礎上調(diào)整,那么為什么Din這個字體這么受設計師喜愛呢?

 Din故事 

DIN 是德國標準協(xié)會,Deutsches Institut für Normung 的首字母縮寫。1975年起,德國政府把DIN作為國家標準體系,DIN 標準在國際和歐洲范圍內(nèi)被廣泛使用。DIN 字體繼承了嚴謹可識別度高,被廣泛運用。 

▲ 在德國公路指示牌,以及機場,地圖里面,大多數(shù)運用Din字體作為引導字體。 

▲ 在很多雜志包裝中,也可見大量Din字體的運用,德國人的嚴謹在這個字體中體現(xiàn)的淋漓極致。

缺陷

前面我們說了DIN在公路以及雜志,平面設計中用的很多,但是直接拿到互聯(lián)網(wǎng)APP設計中各種復雜的場景,DIN就沒有那么的完美,如圖中,4的開頭較大,以及5,6字體的圓形不夠一致,7縮小后識別度問題,所以很多公司都會基于這些問題進行二次設計,這也是前面競品分析里面提到,為什么微信,京東,百度會這個基礎上再設計的原因。 

常用數(shù)字字體 

如果只推薦一個數(shù)字字體,我肯定會推薦Din,但是Din并不免費,價格不便宜,如果需要運用每年會有一筆不小的費用,所以如果公司不愿意購買,你可以Din基礎再重新設計一版本,也可以使用一些其他不錯的數(shù)字字體,接下來給大家推薦一些免費版權使用的!

1.Gaoel

如果都是用Din其實也容易看膩歪,首先推薦的這個我特別喜歡,整體字體設計很圓潤,年輕化,可愛非常適合一些偏年輕化的產(chǎn)品,同時字重非常適合金融產(chǎn)品的字重效果! 

▲ 在支付寶備用金頁面中,就運用了類似這種比較圓潤有活潑感數(shù)字字體!大家可以嘗試下這個字體在你界面中效果,保證不會失望。 

2.Montserrat

谷歌免費字體中很優(yōu)雅的一個字體,用在數(shù)字上或者界面中都非常的優(yōu)雅。

3.Poppins

谷歌免費字體中經(jīng)常被用到的一個字體,除了9稍微顯得有點笨拙以外其他都挺現(xiàn)代的。

4.Bitter

谷歌旗下的同樣廣泛運用到各種設計中,字體和英文字體都很好用。

5.Fjalla One

 Din字體的替代品,很多人一直在尋找的,如果公司不愿意購買Din字體,那么谷歌旗下這個字體非常完美的替代品,使用出來的效果和Din也不會相差很多。

6.Graduate

谷歌旗下免費的,非常英倫風格和學院風的一款數(shù)字字體,用在海報或者一些個人化活動頁面效果非常好,當然作為英文排版也是很高級。 

7.Futura

谷歌旗下免費的,這個字體無論英文還是數(shù)字都非,F(xiàn)代化,非常干凈利索的一款字體,做到PPT里面效果非常好。 

8.Proxima Nova

這款不免費,當然收費也非常對得起他這個價格,效果大家可以自己看,非常優(yōu)雅,現(xiàn)代。

9.Gotham

非常適合發(fā)布會,極簡的網(wǎng)站設計,或者海報,非,F(xiàn)代干凈的一款字體,效果如圖,dribbble上各種好看的設計里面都跑不了這款字體。

10.Lato

非,F(xiàn)代科技感的一款字體,無數(shù)知名app在用的字體,同樣出自谷歌旗下,保證你不會出錯的一款字體,之前天貓用過,效果非常好。 

襯線字體 

Playfair Display

如果只讓我推薦一款襯線英文字體,那么必須是Playfair Display莫屬,心頭大愛的字體,古典,現(xiàn)代優(yōu)雅于一體,不知道多少大牌一直用這個字體做設計

如果你一直在尋找一款襯線英文字體,那么這個必須首先,效果直接看圖!

關于界面中字體系列就到這里,基本這些字體覆蓋我們常用的中英文,掌握這兩個就夠了。 

最后 

希望通過這兩篇的分享,能夠幫助大家在UI設計中提升字體的運用,以及如何去定義一個界面的字體!

 

來源:我們的設計日記(公眾號)

作者:sky


聲明:站內(nèi)網(wǎng)友所發(fā)表的所有內(nèi)容及言論僅代表其本人,并不反映任何網(wǎng)站意見及觀點。

全部評論

暫無相關推薦