前端設(shè)計(jì)師如何提高UI界面中的閱讀性
閱讀體驗(yàn)是ui設(shè)計(jì)中必不可少的一項(xiàng)， 良好的設(shè)計(jì)應(yīng)該都是可讀的設(shè)計(jì)，如果信息都無法正常而清晰的傳達(dá)，那么設(shè)計(jì)就失去了意義。 設(shè)計(jì)的可讀性和排版設(shè)計(jì)息息相關(guān)，這也就跟設(shè)計(jì)師的設(shè)計(jì)功底息息相關(guān)。下面簡單介紹文字影響UI界面閱讀性的幾種情況。
一、文字大小
文字的大小無論在ui界面或者網(wǎng)頁當(dāng)中任何一個(gè)地方，都起到一定的作用。而文字作為設(shè)計(jì)的一個(gè)組成部分，閱讀性就必須得到保證。 那么，如何去選擇字體的大小能達(dá)到比較好的效果呢？ 在網(wǎng)頁中，我們常見的文字大小一般是14px、16px，最小的字體一般是12px的。標(biāo)題類的字體大小一般都在18px以上。 我一般給客戶做網(wǎng)站，正文一般會(huì)選擇14px的字體，標(biāo)題類的會(huì)采用22px加粗的一個(gè)字體。有一些特殊的界面設(shè)計(jì)上，標(biāo)題可能要求更大，字體也要細(xì)一些的，這些需要單獨(dú)做變化。網(wǎng)頁中字體的大小盡可能的選用偶數(shù)，如果是奇數(shù)的話，字體顯示出來的邊緣會(huì)有一些毛邊，不利于閱讀。 在ui界面當(dāng)中，在字體大小的選擇上需要多斟酌一下，正文的自號(hào)大小和標(biāo)題的大小應(yīng)該有所區(qū)分，可以在黃金比例的字號(hào)上稍微找尋一個(gè)適合閱讀的字號(hào)比例。在蘋果6的界面下，我們常見到的標(biāo)題大都是34px的，部分的app的界面系統(tǒng)在部分標(biāo)題下會(huì)使用到36px。這里再補(bǔ)充一點(diǎn)，無論什么系統(tǒng)，在UI界面中標(biāo)題或正文的字體一定要選用偶數(shù)，因?yàn)樵陂_發(fā)界面的時(shí)候，字號(hào)大小換算是要除以二的。
對字號(hào)的選擇如果還拿捏不準(zhǔn)的話，還選擇一些工具來進(jìn)行輔助選擇，比如 Modular Scale （鏈接打不開看這： http://www.modularscale.com ），可以借鑒下里面的字體比例。
二、字體的選擇
都知道字體有宋體、黑體、楷體、手寫體等多種字體形式，不同的字體表達(dá)的情感訴求是不一樣的，這些外形不一樣的字體也會(huì)造成閱讀性的易難程度。字體樣式對易讀性和快速瀏覽非常重要，所以我們可以先來了解下ui界面下如何選擇字體。
1）iOS系統(tǒng)中用的字體是蘋果官方字體系列。
蘋果官方系列字體以 SF和SF Compact 兩套字體為主。SF和SF Compact 分別又命名為Text和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)的字體，我們在設(shè)計(jì)界面的時(shí)候就可以有針對性的對文字做更深入的研究和設(shè)計(jì)，盡可能的提高界面的閱讀性。
三、文字的字間距
調(diào)整文字字間距的情況比較少見，但是特殊情況下是會(huì)做相對應(yīng)調(diào)整的。都知道，字和字之間是有間距的，我們打出來的字體都是有默認(rèn)的固有間距。通常情況下默認(rèn)的固有間距是不需要我們?nèi)フ{(diào)整的，只有在特殊情況下才需要對字間距做相對應(yīng)的調(diào)整。大標(biāo)題因?yàn)樽痔?hào)比較大，在一些特定的界面上，大標(biāo)題的字間距會(huì)被縮小。這個(gè)調(diào)整是細(xì)微的，可能我們都沒察覺。那也側(cè)面說明調(diào)整過的字間距還是合適我們眼睛閱讀的。
四、文字的行間距
行間距需要調(diào)整的地方就比較多。在整個(gè)段落中，每行的字符數(shù)對于整體的可讀性起著主要作用。如果文字段 落非常寬，閱讀性則差。文字設(shè)計(jì)得太密集也不行，會(huì)給讀者的眼睛帶來壓力，造成混亂。所以段落的行間距在設(shè)計(jì)的時(shí)候就需要留心。行間距設(shè)置可選擇在字體大小的120%到145%之間，這個(gè)比例是我個(gè)人覺得比較合適舒服的，大家可以試試。
五、文字的段間距
段落與段落之間需要有一定的距離，如果段落間距離過小，同樣影響視線的移動(dòng)，過大則容易導(dǎo)致上下文的聯(lián)系變得松散。段間距比較常見的設(shè)置為2.0em。
六、文字的顏色和對比度
文字顏色與相應(yīng)背景也至關(guān)重要。如果在綠色背景上寫綠色文字，就難以閱讀了。設(shè)計(jì)師選擇淺色字深色背景，或是深色字淺色背景，都是有原因的。對比使得字符容易閱讀。文中提及的關(guān)于文字設(shè)計(jì)來提高UI界面的可讀性，說白了其實(shí)不過是選擇什么字體設(shè)定什么參數(shù)，但恰恰有可能是你看似一個(gè)不重要的數(shù)值，而導(dǎo)致整個(gè)界面的閱讀性丟失。當(dāng)用戶打開閱讀性差的界面，可能不過幾秒就會(huì)關(guān)閉，這對產(chǎn)品來說是相當(dāng)大的損失。所以說到底，前端設(shè)計(jì)師們在設(shè)計(jì)這些界面的時(shí)候，一樣要認(rèn)真對比，保證界面優(yōu)美的情況下還能有效的閱讀。