藍(lán)藍(lán)設(shè)計(jì)( yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源：http://www.58img.com/design/1761

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

文字可以是優(yōu)美的、簡(jiǎn)單的、狂放的、有趣的、激動(dòng)人心的，還有很多其他種類(lèi)。它能激起情緒，幫助用戶(hù)理解你所要傳達(dá)的訊息。字體有很多種，但有一點(diǎn)是共通的——它必須具有可讀性。

這是一個(gè)時(shí)常被遺忘的因素。設(shè)計(jì)師們往太狹小的空間填入太多信息，或是選用了外觀(guān)勝過(guò)可讀性的字體。但重點(diǎn)是：如果字體無(wú)法閱讀，你的設(shè)計(jì)就無(wú)法完全生效。

盡管有些聳人聽(tīng)聞，但它幾乎是普適規(guī)律。你會(huì)問(wèn)：“作為藝術(shù)元素的那些字體怎么說(shuō)？” 不可閱讀的字體在這類(lèi)設(shè)計(jì)中確實(shí)能發(fā)揮作用，但是，僅限于與可讀的文字搭配使用。

在狹窄空間體現(xiàn)可讀性

藍(lán)藍(lán)設(shè)計(jì)

什么使得文字能夠閱讀呢？它實(shí)際上是很多因素共同作用的結(jié)果，包括行長(zhǎng)度、行距、字體樣式、外邊距和內(nèi)邊距，還有顏色和對(duì)比度。每一個(gè)元素，都影響著屏幕閱讀的難易程度。這每一種元素，都是設(shè)計(jì)師能夠操控的。記住，本文中談?wù)摰倪@些元素，是指網(wǎng)站主體部分的文字，此處文字的可讀性可以說(shuō)是首要考慮因素。（別處文字的標(biāo)準(zhǔn)相對(duì)寬松許多，只要主體部分高度可讀。）

• 行長(zhǎng)度：每行的字符個(gè)數(shù)對(duì)于整體的可讀性起著主要作用。如果文字段落非常寬，那是很?chē)樔说?，難以閱讀。同理，每行文字太短也不行，會(huì)給讀者的眼睛帶來(lái)壓力，造成混亂。
• 行距：每行文字間的間距也同樣重要。看看這篇文章，如果每行文字都與上下兩行粘在一起，你就無(wú)法理解這些句子。
• 字體樣式：字體的樣式也會(huì)影響可讀性。簡(jiǎn)潔的襯線(xiàn)字體和無(wú)襯線(xiàn)字體是最具可讀性、最易瀏覽的，而那些華麗的手書(shū)和新奇字體則最難破譯。
• 外邊距和內(nèi)邊距：和行距一樣，元素周邊和之間的空隙也影響著用戶(hù)閱讀文字本身。
• 顏色與對(duì)比度：文字顏色與相應(yīng)背景也至關(guān)重要。如果在綠色背景上寫(xiě)綠色文字，就難以閱讀了。設(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ō)明文字
• 引用文字
• 在各元素中混合使用襯線(xiàn)字體和無(wú)襯線(xiàn)字體

可讀性清單

既然你已經(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ú)序列表、粗體字等）分解大段文字？
• 正文文字是否使用了易讀的字體（建議選用一種襯線(xiàn)或無(wú)襯線(xiàn)字體）？

結(jié)論

可讀性是設(shè)計(jì)中至關(guān)重要的組成部分。如果無(wú)法閱讀和理解頁(yè)面上的內(nèi)容，對(duì)于用戶(hù)而言，它就完全不相關(guān)也不重要。如何在設(shè)計(jì)項(xiàng)目中規(guī)劃可讀性？你有沒(méi)有其他通往成功的技巧？在評(píng)論中與我們分享吧。