前端設計師如何提高UI界面中的閱讀性

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


文字大小

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

在網頁中,我們常見的文字大小一般是14px、16px,最小的字體一般是12px的。標題類的字體大小一般都在18px以上。我一般給客戶做網站,正文一般會選擇14px的字體,標題類的會採用22px加粗的一個字體。有一些特殊的界面設計上,標題可能要求更大,字體也要細一些的,這些需要單獨做變化。網頁中字體的大小儘可能的選用偶數,如果是奇數的話,字體顯示出來的邊緣會有一些毛邊,不利於閱讀。

在ui界面當中,在字體大小的選擇上需要多斟酌一下,正文的自號大小和標題的大小應該有所區分,可以在黃金比例的字號上稍微找尋一個適合閱讀的字號比例。在蘋果6的界面下,我們常見到的標題大都是34px的,部分的app的界面系統在部分標題下會使用到36px。這裏再補充一點,無論什麼系統,在UI界面中標題或正文的字體一定要選用偶數,因爲在開發界面的時候,字號大小換算是要除以二的。



對字號的選擇如果還拿捏不準的話,還選擇一些工具來進行輔助選擇,比如Modular Scale(鏈接打不開看這:http://www.modularscale.com),可以借鑑下里面的字體比例。


字體的選擇

都知道字體有宋體、黑體、楷體、手寫體等多種字體形式,不同的字體表達的情感訴求是不一樣的,這些外形不一樣的字體也會造成閱讀性的易難程度。
字體樣式對易讀性和快速瀏覽非常重要,所以我們可以先來了解下ui界面下如何選擇字體。

1)iOS系統中用的字體是蘋果官方字體系列。
蘋果官方系列字體以SF和SF Compact 兩套字體爲主。SF和SF Compact 分別又命名爲Text和Display兩個子字體系列。Text 系列字體用於小文本顯示,而Display 系列字體用於較大的字體顯示。


2)Android的默認字體是Roboto和Noto系列。
Roboto系列字體有6種字樣:Thin、Light、Regular、Medium、Bold 和 Black。
Noto系列字體有7種字樣:Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。


 知道了這兩個系統的字體,我們在設計界面的時候就可以有針對性的對文字做更深入的研究和設計,儘可能的提高界面的閱讀性。

 

文字的字間距

調整文字字間距的情況比較少見,但是特殊情況下是會做相對應調整的。都知道,字和字之間是有間距的,我們打出來的字體都是有默認的固有間距。通常情況下默認的固有間距是不需要我們去調整的,只有在特殊情況下才需要對字間距做相對應的調整。

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

 

文字的行間距

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

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

 

文字的段間距


段落與段落之間需要有一定的距離,如果段落間距離過小,同樣影響視線的移動,過大則容易導致上下文的聯繫變得鬆散。段間距比較常見的設置爲2.0em。

 

文字的顏色和對比度


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


文中提及的關於文字設計來提高UI界面的可讀性,說白了其實不過是選擇什麼字體設定什麼參數,但恰恰有可能是你看似一個不重要的數值,而導致整個界面的閱讀性丟失。當用戶打開閱讀性差的界面,可能不過幾秒就會關閉,這對產品來說是相當大的損失。所以說到底,前端設計師們在設計這些界面的時候,一樣要認真對比,保證界面優美的情況下還能有效的閱讀。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章