閱讀體驗是(shì)ui設計中必不(bù)可少的(de)一(yī / yì ／yí)項， 良好的(de)設計應該都是(shì)可讀的(de)設計，如果信息都無法正常而(ér)清晰的(de)傳達，那麽設計就(jiù)失去了(le／liǎo)意義。 設計的(de)可讀性和(hé / huò)排版設計息息相關，這(zhè)也(yě)就(jiù)跟設計師的(de)設計功底息息相關。下面簡單介紹文字影響UI界面閱讀性的(de)幾種情況。

一(yī / yì ／yí)、文字大(dà)小 

        文字的(de)大(dà)小無論在(zài)ui界面或者網頁當中任何一(yī / yì ／yí)個(gè)地(dì / de)方，都起到(dào)一(yī / yì ／yí)定的(de)作用。而(ér)文字作爲(wéi / wèi)設計的(de)一(yī / yì ／yí)個(gè)組成部分，閱讀性就(jiù)必須得到(dào)保證。 那麽，如何去選擇字體的(de)大(dà)小能達到(dào)比較好的(de)效果呢？ 在(zài)網頁中，我們常見的(de)文字大(dà)小一(yī / yì ／yí)般是(shì)14px、16px，最小的(de)字體一(yī / yì ／yí)般是(shì)12px的(de)。标題類的(de)字體大(dà)小一(yī / yì ／yí)般都在(zài)18px以(yǐ)上(shàng)。 我一(yī / yì ／yí)般給客戶做網站，正文一(yī / yì ／yí)般會選擇14px的(de)字體，标題類的(de)會采用22px加粗的(de)一(yī / yì ／yí)個(gè)字體。有一(yī / yì ／yí)些特殊的(de)界面設計上(shàng)，标題可能要(yào / yāo)求更大(dà)，字體也(yě)要(yào / yāo)細一(yī / yì ／yí)些的(de)，這(zhè)些需要(yào / yāo)單獨做變化。網頁中字體的(de)大(dà)小盡可能的(de)選用偶數，如果是(shì)奇數的(de)話，字體顯示出(chū)來(lái)的(de)邊緣會有一(yī / yì ／yí)些毛邊，不(bù)利于(yú)閱讀。 在(zài)ui界面當中，在(zài)字體大(dà)小的(de)選擇上(shàng)需要(yào / yāo)多斟酌一(yī / yì ／yí)下，正文的(de)自号大(dà)小和(hé / huò)标題的(de)大(dà)小應該有所區分，可以(yǐ)在(zài)黃金比例的(de)字号上(shàng)稍微找尋一(yī / yì ／yí)個(gè)适合閱讀的(de)字号比例。在(zài)蘋果6的(de)界面下，我們常見到(dào)的(de)标題大(dà)都是(shì)34px的(de)，部分的(de)app的(de)界面系統在(zài)部分标題下會使用到(dào)36px。這(zhè)裏再補充一(yī / yì ／yí)點，無論什麽系統，在(zài)UI界面中标題或正文的(de)字體一(yī / yì ／yí)定要(yào / yāo)選用偶數，因爲(wéi / wèi)在(zài)開發界面的(de)時(shí)候，字号大(dà)小換算是(shì)要(yào / yāo)除以(yǐ)二的(de)。 

        對字号的(de)選擇如果還拿捏不(bù)準的(de)話，還選擇一(yī / yì ／yí)些工具來(lái)進行輔助選擇，比如 Modular Scale （鏈接打不(bù)開看這(zhè)： http://www.modularscale.com ），可以(yǐ)借鑒下裏面的(de)字體比例。 

二、字體的(de)選擇 

        都知道(dào)字體有宋體、黑體、楷體、手寫體等多種字體形式，不(bù)同的(de)字體表達的(de)情感訴求是(shì)不(bù)一(yī / yì ／yí)樣的(de)，這(zhè)些外形不(bù)一(yī / yì ／yí)樣的(de)字體也(yě)會造成閱讀性的(de)易難程度。字體樣式對易讀性和(hé / huò)快速浏覽非常重要(yào / yāo)，所以(yǐ)我們可以(yǐ)先來(lái)了(le／liǎo)解下ui界面下如何選擇字體。 

1）iOS系統中用的(de)字體是(shì)蘋果官方字體系列。 

        蘋果官方系列字體以(yǐ) SF和(hé / huò)SF Compact 兩套字體爲(wéi / wèi)主。SF和(hé / huò)SF Compact 分别又命名爲(wéi / wèi)Text和(hé / huò)Display兩個(gè)子(zǐ)字體系列。Text 系列字體用于(yú)小文本顯示，而(ér)Display 系列字體用于(yú)較大(dà)的(de)字體顯示。 

2）Android的(de)默認字體是(shì)Roboto和(hé / huò)Noto系列。 

        Roboto系列字體有6種字樣：Thin、Light、Regular、Medium、Bold 和(hé / huò) Black。 

        Noto系列字體有7種字樣：Thin, Light、DemiLight、Regular、Medium、Bold 和(hé / huò) Black。 

        知道(dào)了(le／liǎo)這(zhè)兩個(gè)系統的(de)字體，我們在(zài)設計界面的(de)時(shí)候就(jiù)可以(yǐ)有針對性的(de)對文字做更深入的(de)研究和(hé / huò)設計，盡可能的(de)提高界面的(de)閱讀性。 

三、文字的(de)字間距 

        調整文字字間距的(de)情況比較少見，但是(shì)特殊情況下是(shì)會做相對應調整的(de)。都知道(dào)，字和(hé / huò)字之(zhī)間是(shì)有間距的(de)，我們打出(chū)來(lái)的(de)字體都是(shì)有默認的(de)固有間距。通常情況下默認的(de)固有間距是(shì)不(bù)需要(yào / yāo)我們去調整的(de)，隻有在(zài)特殊情況下才需要(yào / yāo)對字間距做相對應的(de)調整。大(dà)标題因爲(wéi / wèi)字号比較大(dà)，在(zài)一(yī / yì ／yí)些特定的(de)界面上(shàng)，大(dà)标題的(de)字間距會被縮小。這(zhè)個(gè)調整是(shì)細微的(de)，可能我們都沒察覺。那也(yě)側面說(shuō)明調整過的(de)字間距還是(shì)合适我們眼睛閱讀的(de)。 

四、文字的(de)行間距 

        行間距需要(yào / yāo)調整的(de)地(dì / de)方就(jiù)比較多。在(zài)整個(gè)段落中，每行的(de)字符數對于(yú)整體的(de)可讀性起着主要(yào / yāo)作用。如果文字段 落非常寬，閱讀性則差。文字設計得太密集也(yě)不(bù)行，會給讀者的(de)眼睛帶來(lái)壓力，造成混亂。所以(yǐ)段落的(de)行間距在(zài)設計的(de)時(shí)候就(jiù)需要(yào / yāo)留心。行間距設置可選擇在(zài)字體大(dà)小的(de)120%到(dào)145%之(zhī)間，這(zhè)個(gè)比例是(shì)我個(gè)人(rén)覺得比較合适舒服的(de)，大(dà)家可以(yǐ)試試。 

五、文字的(de)段間距 

        段落與段落之(zhī)間需要(yào / yāo)有一(yī / yì ／yí)定的(de)距離，如果段落間距離過小，同樣影響視線的(de)移動，過大(dà)則容易導緻上(shàng)下文的(de)聯系變得松散。段間距比較常見的(de)設置爲(wéi / wèi)2.0em。 

六、文字的(de)顔色和(hé / huò)對比度 

        文字顔色與相應背景也(yě)至關重要(yào / yāo)。如果在(zài)綠色背景上(shàng)寫綠色文字，就(jiù)難以(yǐ)閱讀了(le／liǎo)。設計師選擇淺色字深色背景，或是(shì)深色字淺色背景，都是(shì)有原因的(de)。對比使得字符容易閱讀。文中提及的(de)關于(yú)文字設計來(lái)提高UI界面的(de)可讀性，說(shuō)白了(le／liǎo)其實不(bù)過是(shì)選擇什麽字體設定什麽參數，但恰恰有可能是(shì)你看似一(yī / yì ／yí)個(gè)不(bù)重要(yào / yāo)的(de)數值，而(ér)導緻整個(gè)界面的(de)閱讀性丢失。當用戶打開閱讀性差的(de)界面，可能不(bù)過幾秒就(jiù)會關閉，這(zhè)對産品來(lái)說(shuō)是(shì)相當大(dà)的(de)損失。所以(yǐ)說(shuō)到(dào)底，前端設計師們在(zài)設計這(zhè)些界面的(de)時(shí)候，一(yī / yì ／yí)樣要(yào / yāo)認真對比，保證界面優美的(de)情況下還能有效的(de)閱讀。