文字可以是優(yōu)美的祷安、簡(jiǎn)單的姥芥、狂放的、有趣的汇鞭、激動(dòng)人心的凉唐,還有很多其他種類庸追。它能激起情緒,幫助用戶理解你所要傳達(dá)的訊息台囱。字體有很多種淡溯,但有一點(diǎn)是共通的——它必須具有可讀性。
文字是一個(gè)產(chǎn)品(網(wǎng)頁(yè)簿训、app)交互的基本元素咱娶,它的可讀性影響產(chǎn)品的用戶體驗(yàn)。每一個(gè)元素强品,都影響著屏幕閱讀的難易程度膘侮。這每一種元素,都是設(shè)計(jì)師能夠操控的的榛。記住琼了,本文中談?wù)摰倪@些元素,是指網(wǎng)站主體部分的文字夫晌,此處文字的可讀性可以說(shuō)是首要考慮因素雕薪。(別處文字的標(biāo)準(zhǔn)相對(duì)寬松許多,只要主體部分高度可讀晓淀。)
一所袁、文字閱讀的因素有哪些?
那什么使得文字能夠閱讀呢要糊?它實(shí)際上是很多因素共同作用的結(jié)果纲熏,包括行長(zhǎng)度、行距锄俄、字體樣式、外邊距和內(nèi)邊距勺拣,還有顏色和對(duì)比度奶赠。
1、行長(zhǎng)度:每行的字符個(gè)數(shù)對(duì)于整體的可讀性起著主要作用药有。如果文字段落非常寬毅戈,那是很嚇人的,難以閱讀愤惰。同理苇经,每行文字太短也不行,會(huì)給讀者的眼睛帶來(lái)壓力宦言,造成混亂扇单。
2、行距:每行文字間的間距也同樣重要奠旺≈├剑看看這篇文章施流,如果每行文字都與上下兩行粘在一起,你就無(wú)法理解這些句子鄙信。
3瞪醋、字體樣式:字體的樣式也會(huì)影響可讀性。簡(jiǎn)潔的襯線字體和無(wú)襯線字體是最具可讀性装诡、最易瀏覽的银受,而那些華麗的手書和新奇字體則最難破譯。
4鸦采、外邊距和內(nèi)邊距:和行距一樣宾巍,元素周邊和之間的空隙也影響著用戶閱讀文字本身。
5赖淤、顏色與對(duì)比度:文字顏色與相應(yīng)背景也至關(guān)重要蜀漆。如果在綠色背景上寫綠色文字,就難以閱讀了咱旱。設(shè)計(jì)師選擇淺色字深色背景确丢,或是深色字淺色背景,都是有原因的吐限。對(duì)比使得字符容易閱讀鲜侥。
二、不同屏幕上的可讀性
那如何創(chuàng)造最易讀的文字诸典?如果是正文文字描函,有一些基本準(zhǔn)則規(guī)定每行的字?jǐn)?shù)——每種設(shè)備不同—— 有助于打造最佳的可讀性。
從何開始呢狐粱?最佳行長(zhǎng)度有助于幫你確定文字段落的大小舀寓。可以這樣:確定正文部分的寬度——通臣◎撸可以假定分成桌面互墓、平板、手機(jī)三種尺寸蒋搜。然后調(diào)整文字大小到理想的單行字?jǐn)?shù)篡撵。
雖然還有其他因素在起作用,這些準(zhǔn)則是很好的入手點(diǎn)豆挽。
桌面:每行55到75個(gè)英文字符育谬,包括空格;理想狀態(tài)是每行65個(gè)字符
移動(dòng)設(shè)備:每行35到50個(gè)字符
將最佳的單行字?jǐn)?shù)與絕佳的行距相結(jié)合帮哈,可以提升可讀性膛檀。通常,行距最好是按照正文字體字號(hào)的百分比來(lái)定義,也可以定義為固定值或是em宿刮。
桌面:字號(hào)的1.5倍
移動(dòng)設(shè)備:字號(hào)的1.75至2倍
三互站、可讀性的其他提示
要打造可讀的排版,正文以外的文字也大有關(guān)聯(lián)僵缺。使用標(biāo)題胡桃、無(wú)序列表、段落間的額外間距和顏色磕潮,也能提升整體可讀性(標(biāo)題則有助于瀏覽整個(gè)網(wǎng)站)翠胰。
考慮使用如下元素增進(jìn)文字層級(jí),創(chuàng)造更完整自脯、更易讀的網(wǎng)頁(yè)設(shè)計(jì)之景。記得要把這些元素“設(shè)計(jì)”成獨(dú)特的字體、字號(hào)和顏色膏潮,并要在正文中保持協(xié)調(diào)锻狗。
標(biāo)題
鏈接
粗體或斜體
字無(wú)序或有序列
表圖像元素,例如照片
說(shuō)明文字
引用文字
在各元素中混合使用襯線字體和無(wú)襯線字體
四焕参、字體的那些事兒
1轻纪、粗與細(xì);2叠纷、曲與直刻帚;3、松散與嚴(yán)謹(jǐn)涩嚣;4崇众、簡(jiǎn)與繁;