static/picture/45161e6f6091c53a.jpg

前端設計師如何提高UI界面(miàn)中的閱讀性

2021-06-19

        閱讀體驗是ui設計中必不可少的一項, 良好(hǎo)的設計應該都(dōu)是可讀的設計,如果信息都(dōu)無法正常而清晰的傳達,那麼(me)設計就(jiù)失去了意義。 設計的可讀性和排版設計息息相關,這(zhè)也就(jiù)跟設計師的設計功底息息相關。下面(miàn)簡單介紹文字影響UI界面(miàn)閱讀性的幾種(zhǒng)情況。

一、文字大小 

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

        對(duì)字号的選擇如果還(hái)拿捏不準的話,還(hái)選擇一些工具來進(jìn)行輔助選擇,比如 Modular Scale (鏈接打不開(kāi)看這(zhè): http://www.modularscale.com ),可以借鑒下裡(lǐ)面(miàn)的字體比例。 

二、字體的選擇 

        都(dōu)知道(dào)字體有宋體、黑體、楷體、手寫體等多種(zhǒng)字體形式,不同的字體表達的情感訴求是不一樣(yàng)的,這(zhè)些外形不一樣(yàng)的字體也會(huì)造成(chéng)閱讀性的易難程度。字體樣(yàng)式對(duì)易讀性和快速浏覽非常重要,所以我們可以先來了解下ui界面(miàn)下如何選擇字體。 

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

        蘋果官方系列字體以 SF和SF Compact 兩(liǎng)套字體爲主。SF和SF Compact 分别又命名爲Text和Display兩(liǎng)個子字體系列。Text 系列字體用于小文本顯示,而Display 系列字體用于較大的字體顯示。 

2)Android的默認字體是Roboto和Noto系列。 

        Roboto系列字體有6種(zhǒng)字樣(yàng):Thin、Light、Regular、Medium、Bold 和 Black。 

        Noto系列字體有7種(zhǒng)字樣(yàng):Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。 

        知道(dào)了這(zhè)兩(liǎng)個系統的字體,我們在設計界面(miàn)的時(shí)候就(jiù)可以有針對(duì)性的對(duì)文字做更深入的研究和設計,盡可能(néng)的提高界面(miàn)的閱讀性。 

三、文字的字間距 

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

四、文字的行間距 

        行間距需要調整的地方就(jiù)比較多。在整個段落中,每行的字符數對(duì)于整體的可讀性起(qǐ)著(zhe)主要作用。如果文字段 落非常寬,閱讀性則差。文字設計得太密集也不行,會(huì)給讀者的眼睛帶來壓力,造成(chéng)混亂。所以段落的行間距在設計的時(shí)候就(jiù)需要留心。行間距設置可選擇在字體大小的120%到145%之間,這(zhè)個比例是我個人覺得比較合适舒服的,大家可以試試。 

五、文字的段間距 

        段落與段落之間需要有一定的距離,如果段落間距離過(guò)小,同樣(yàng)影響視線的移動,過(guò)大則容易導緻上下文的聯系變得松散。段間距比較常見的設置爲2.0em。 

六、文字的顔色和對(duì)比度 

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