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

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

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

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

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

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

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

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

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

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

　　蘋(píng)果官方系列字體以SF和SF Compact 兩套字體為主。SF和SF Compact 分別又命名為T(mén)ext和Display兩個(gè)子字體系列。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。

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

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

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

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

　　大標(biāo)題因?yàn)樽痔?hào)比較大，在一些特定的界面上，大標(biāo)題的字間距會(huì)被縮小。這個(gè)調(diào)整是細(xì)微的，可能我們都沒(méi)察覺(jué)。那也側(cè)面說(shuō)明調(diào)整過(guò)的字間距還是合適我們眼睛閱讀的。

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

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

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

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

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

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

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

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

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