設(shè)計(jì)師如何迅速改善網(wǎng)頁(yè)文字的可讀性
文字可以是優(yōu)美的、簡(jiǎn)單的、狂放的、有趣的、激動(dòng)人心的,還有很多其他種類。它能激起情緒,幫助用戶理解你所要傳達(dá)的訊息。字體有很多種,但有一點(diǎn)是共通的——它必須具有可讀性。
這是一個(gè)時(shí)常被遺忘的因素。設(shè)計(jì)師們往太狹小的空間填入太多信息,或是選用了外觀勝過(guò)可讀性的字體。但重點(diǎn)是:如果字體無(wú)法閱讀,你的設(shè)計(jì)就無(wú)法完全生效。
盡管有些聳人聽(tīng)聞,但它幾乎是普適規(guī)律。你會(huì)問(wèn):“作為藝術(shù)元素的那些字體怎么說(shuō)?” 不可閱讀的字體在這類設(shè)計(jì)中確實(shí)能發(fā)揮作用,但是,僅限于與可讀的文字搭配使用。
在狹窄空間體現(xiàn)可讀性
Fastcompany
Typographica
Medium
什么使得文字能夠閱讀呢?它實(shí)際上是很多因素共同作用的結(jié)果,包括行長(zhǎng)度、行距、字體樣式、外邊距和內(nèi)邊距,還有顏色和對(duì)比度。
每一個(gè)元素,都影響著屏幕閱讀的難易程度。這每一種元素,都是設(shè)計(jì)師能夠操控的。記住,本文中談?wù)摰倪@些元素,是指網(wǎng)站主體部分的文字,此處文字的可讀性可以說(shuō)是首要考慮因素。(別處文字的標(biāo)準(zhǔn)相對(duì)寬松許多,只要主體部分高度可讀。)
行長(zhǎng)度:每行的字符個(gè)數(shù)對(duì)于整體的可讀性起著主要作用。如果文字段落非常寬,那是很嚇人的,難以閱讀。同理,每行文字太短也不行,會(huì)給讀者的眼睛帶來(lái)壓力,造成混亂。
行距:每行文字間的間距也同樣重要??纯催@篇文章,如果每行文字都與上下兩行粘在一起,你就無(wú)法理解這些句子。
字體樣式:字體的樣式也會(huì)影響可讀性。簡(jiǎn)潔的襯線字體和無(wú)襯線字體是最具可讀性、最易瀏覽的,而那些華麗的手書(shū)和新奇字體則最難破譯。
外邊距和內(nèi)邊距:和行距一樣,元素周邊和之間的空隙也影響著用戶閱讀文字本身。
顏色與對(duì)比度:文字顏色與相應(yīng)背景也至關(guān)重要。如果在綠色背景上寫綠色文字,就難以閱讀了。設(shè)計(jì)師選擇淺色字深色背景,或是深色字淺色背景,都是有原因的。對(duì)比使得字符容易閱讀。
不同屏幕上的可讀性
那如何創(chuàng)造最易讀的文字?如果是正文文字,有一些基本準(zhǔn)則規(guī)定每行的字?jǐn)?shù)——每種設(shè)備不同—— 有助于打造最佳的可讀性。
從何開(kāi)始呢?最佳行長(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倍
如果你想找個(gè)工具來(lái)簡(jiǎn)化所有這些工作,試試黃金比例文字計(jì)數(shù)器 。
可讀性的其他提示
要打造可讀的排版,正文以外的文字也大有關(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ú)襯線字體
10種易讀的字體
沒(méi)有一篇討論可讀性的文章不推薦字體的。下面有10種高度可讀——并且相當(dāng)流行——的字體供你選擇建立網(wǎng)站。(自備梯子)
無(wú)襯線字體
Open Sans
Lato
Exo
Nobile
Droid Sans
襯線字體
Arvo
Old Standard TT
Abril Fatface
Vollkorn
Josefin Slab
可讀性清單
既然你已經(jīng)有了好點(diǎn)子,決定下個(gè)設(shè)計(jì)項(xiàng)目中要使用什么字體和樣式,你確定能以一種完全可讀的方式將它們組合起來(lái)嗎?下面是一列清單,供你規(guī)劃字體的設(shè)計(jì)。
主體部分字號(hào)夠大嗎?在每種設(shè)備上,它是否達(dá)到最佳的行長(zhǎng)度?
每行文字間是否有足夠的間距?
文字與頁(yè)面邊界和其他元素之間有沒(méi)有足夠的空間?
正文文字顏色與背景對(duì)比反差夠強(qiáng)烈嗎?
每個(gè)新段落之間是否有額外的空隙?
標(biāo)題和其他元素與正文文字不同嗎?
有沒(méi)有使用其他元素(無(wú)序列表、粗體字等)分解大段文字?
正文文字是否使用了易讀的字體(建議選用一種襯線或無(wú)襯線字體)?
結(jié)論
可讀性是設(shè)計(jì)中至關(guān)重要的組成部分。如果無(wú)法閱讀和理解頁(yè)面上的內(nèi)容,對(duì)于用戶而言,它就完全不相關(guān)也不重要。
如何在設(shè)計(jì)項(xiàng)目中規(guī)劃可讀性?你有沒(méi)有其他通往成功的技巧?在評(píng)論中與我們分享吧。
想用好字體?你得先讀懂它的性格!
本文地址:http://m.likemindfilms.com/tutorial/di2172.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏