大家都知道ui的前端設(shè)計是非常重要的，因為前端設(shè)計的好壞直接影響著用戶對產(chǎn)品的使用感，不好的設(shè)計甚至可能會造成用戶流失，下面我們跟隨小編一起來了解一下ui前端設(shè)計的相關(guān)資料吧。

ui前端設(shè)計之文字大小

　　文字的大小無論在ui界面或者網(wǎng)頁當(dāng)中任何一個地方，都起到一定的作用。而文字作為設(shè)計的一個組成部分，閱讀性就必須得到保證。那么，如何去選擇字體的大小能達到比較好的效果呢?

　　在網(wǎng)頁中，我們常見的文字大小一般是14px、16px，最小的字體一般是12px的。標(biāo)題類的字體大小一般都在18px以上。正文一般會選擇14px的字體，標(biāo)題類的會采用22px加粗的一個字體。有一些特殊的界面設(shè)計上，標(biāo)題可能要求更大，字體也要細一些的，這些需要單獨做變化。網(wǎng)頁中字體的大小盡可能的選用偶數(shù)，如果是奇數(shù)的話，字體顯示出來的邊緣會有一些毛邊，不利于閱讀。

　　在ui界面設(shè)計當(dāng)中，在字體大小的選擇上需要多斟酌一下，正文的自號大小和標(biāo)題的大小應(yīng)該有所區(qū)分，可以在黃金比例的字號上稍微找尋一個適合閱讀的字號比例。在蘋果6的界面下，我們常見到的標(biāo)題大都是34px的，部分的app的界面系統(tǒng)在部分標(biāo)題下會使用到36px。這里再補充一點，無論什么系統(tǒng)，在ui界面設(shè)計中標(biāo)題或正文的字體一定要選用偶數(shù)，因為在開發(fā)界面的時候，字號大小換算是要除以二的。

（圖片來自網(wǎng)絡(luò)）

　　ui前端設(shè)計之字體的選擇

　　都知道字體有宋體、黑體、楷體、手寫體等多種字體形式，不同的字體表達的情感訴求是不一樣的，這些外形不一樣的字體也會造成閱讀性的易難程度。

　　字體樣式對易讀性和快速瀏覽非常重要，所以我們可以先來了解下ui界面下如何選擇字體。

　　1)iOS系統(tǒng)中用的字體是蘋果官方字體系列。

　　蘋果官方系列字體以SF和SF Compact 兩套字體為主。SF和SF Compact 分別又命名為Text和Display兩個子字體系列。Text 系列字體用于小文本顯示，而Display 系列字體用于較大的字體顯示。

　　2)Android的默認(rèn)字體是Roboto和Noto系列。

　　Roboto系列字體有6種字樣：Thin、Light、Regular、Medium、Bold 和 Black。

　　Noto系列字體有7種字樣：Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。

　　知道了這兩個系統(tǒng)的字體，我們在設(shè)計界面的時候就可以有針對性的對文字做更深入的研究和設(shè)計，盡可能的提高界面的閱讀性。

（圖片來自網(wǎng)絡(luò)）

　　ui前端設(shè)計之文字的字間距

　　調(diào)整文字字間距的情況比較少見，但是特殊情況下是會做相對應(yīng)調(diào)整的。都知道，字和字之間是有間距的，我們打出來的字體都是有默認(rèn)的固有間距。通常情況下默認(rèn)的固有間距是不需要我們?nèi)フ{(diào)整的，只有在特殊情況下才需要對字間距做相對應(yīng)的調(diào)整。

　　大標(biāo)題因為字號比較大，在一些特定的界面上，大標(biāo)題的字間距會被縮小。這個調(diào)整是細微的，可能我們都沒察覺。那也側(cè)面說明調(diào)整過的字間距還是合適我們眼睛閱讀的。

　　ui前端設(shè)計之文字的行間距

　　行間距需要調(diào)整的地方就比較多。在整個段落中，每行的字符數(shù)對于整體的可讀性起著主要作用。如果文字段落非常寬，閱讀性則差。文字設(shè)計得太密集也不行，會給讀者的眼睛帶來壓力，造成混亂。所以段落的行間距在設(shè)計的時候就需要留心。

　　行間距設(shè)置可選擇在字體大小的120%到145%之間，這個比例是小編個人覺得比較合適舒服的，大家可以試試。

　　ui前端設(shè)計之文字的段間距

　　段落與段落之間需要有一定的距離，如果段落間距離過小，同樣影響視線的移動，過大則容易導(dǎo)致上下文的聯(lián)系變得松散。段間距比較常見的設(shè)置為2.0em。

（圖片來自網(wǎng)絡(luò)）

　　ui前端設(shè)計之文字的顏色和對比度

　　文字顏色與相應(yīng)背景也至關(guān)重要。如果在綠色背景上寫綠色文字，就難以閱讀了。設(shè)計師選擇淺色字深色背景，或是深色字淺色背景，都是有原因的。對比使得字符容易閱讀。

　　其實小編覺得只要掌握了它的方法技巧和規(guī)則以后，ui前端設(shè)計并沒有大家想象中的那么復(fù)雜，所以大家不要給自己太大的心理壓力哦!