如何提高網(wǎng)頁設(shè)計(jì)中的文本可讀性
網(wǎng)頁的文本,是網(wǎng)頁設(shè)計(jì)中的一個重要元素,文案設(shè)計(jì)的好壞決定著網(wǎng)頁的成敗。網(wǎng)頁文本可以是美麗的、簡單的、狂野的、引人入勝的、令人興奮的以及許多其他充滿未知的東西。它可以吸引到用戶的注意力,讓用戶快速的了解他想要的信息,激起用戶情感并幫助用戶理解你網(wǎng)站所要表達(dá)傳達(dá)的信息。文本的類型可以是五花八門,千變?nèi)f化,但有一點(diǎn)是常見的——它必須是可讀性很強(qiáng)的。
這是一個有時被遺忘的重要因素。設(shè)計(jì)師努力將太多信息放入狹小的空間里面,或者選擇看起來比閱讀更好的東西。但要點(diǎn)是:如果你的字體設(shè)計(jì)如果辨識度不高,主次性不強(qiáng),那么你的設(shè)計(jì)就不會完全有效,因?yàn)槲淖挚勺x性不強(qiáng),沒有給用戶留下深刻的印象。 簡而言之,什么是可讀性 那么是什么讓類型可讀呢?它實(shí)際上是許多因素的組合,包括行長、行距、字體樣式、邊距和填充以及顏色和對比度。 每個單獨(dú)的元素都會影響在屏幕上閱讀內(nèi)容的難易程度。這些元素中的每一個都是設(shè)計(jì)師可以控制的。請注意,當(dāng)我們在整篇文章中討論這些元素時,我們指的是網(wǎng)站的主體文本,其中可讀性可以說是最大的問題。(只要正文具有高度可讀性,其中許多準(zhǔn)則對于其他文本元素就寬松得多。)
行長:一行文本中的字符數(shù)在很大程度上影響整體可讀性。如果文本非常寬,則可能會令人生畏且難以閱讀。太短的文本行也是如此,這會給讀者的眼睛帶來壓力并造成混亂。
前導(dǎo):文本行之間的空間量同樣重要??紤]這篇文章,如果每一行類型都觸及它上面和下面的行,你將無法理解這些詞。
字體樣式:字體樣式也會影響可讀性。簡單的襯線和無襯線字體是最易讀和可掃描的,而華麗的樣式、腳本和新奇字體最難破譯。 邊距和填充:與前導(dǎo)一樣,對象周圍和對象之間的空間量會影響用戶閱讀實(shí)際單詞的能力。
顏色和對比度:文本相對于相應(yīng)背景的顏色也很重要。如果您將綠色字體放在綠色背景上,則可能難以閱讀。大多數(shù)設(shè)計(jì)師在淺色背景上選擇深色背景上的淺色文字是有原因的。對比使字體易于閱讀。
不同屏幕上的顯示形式 那么如何創(chuàng)建最易讀的類型呢?對于正文文本,有一些關(guān)于每行和每種設(shè)備類型的字符數(shù)的基本準(zhǔn)則,這有助于實(shí)現(xiàn)最佳可讀性。 那么你怎么知道從哪里開始呢?最佳行長可以幫助您確定文本大小。
方法如下: 確定正文文本框的寬度——您通??梢詫⑵浼俣樽烂妗⒈砀窕蛞苿釉O(shè)備大小。并調(diào)整字體大小以落入理想的字符數(shù)范圍內(nèi)。
雖然還有其他因素在起作用,但這些指南是一個很好的起點(diǎn)。
桌面:每行55到75個字符,包括空格;理想的是每行接近 65 個字符
移動設(shè)備:每行 35 到 50 個字符 將每行的最佳字符數(shù)與較大的行間距(或行距)相結(jié)合以提高可讀性。行距通常最好定義為正文大小的百分比,并且可以定義為硬數(shù)字或使用 em。
臺式機(jī):字體大小的 1.5 倍 移動設(shè)備:類型大小的 1.75 到 2 倍 如果您正在尋找一種出色的工具來幫助簡化所有這些數(shù)學(xué)運(yùn)算,請嘗試使用黃金比例排版計(jì)算器。
其他可讀性提示 創(chuàng)建可讀的排版與不是主體文本的類型也有很大關(guān)系。使用標(biāo)題、項(xiàng)目符號列表、段落之間的額外間距和顏色也可以增加整體可讀性(以及讀者瀏覽網(wǎng)站的能力)。 考慮使用這些元素添加文本層次結(jié)構(gòu),以創(chuàng)建更完整且可讀性更高的網(wǎng)站設(shè)計(jì)。并記住使用與主體文本相協(xié)調(diào)的特定字體、大小和顏色來“設(shè)計(jì)”這些元素中的每一個。 既然您認(rèn)為自己對下一個設(shè)計(jì)項(xiàng)目要使用的字體和風(fēng)格有了一個很好的了解,您確定您已經(jīng)以完全可讀的方式將所有內(nèi)容組合在一起了嗎?這是一個快速清單,可幫助您規(guī)劃字體設(shè)計(jì)。
主體型夠大嗎?它是否落在每個設(shè)備尺寸的最佳線長范圍內(nèi)? 每行文本之間是否有足夠的間距? 文本和頁面邊緣以及其他設(shè)計(jì)元素之間是否有足夠的空間? 背景和正文之間的對比度是否足夠? 每個新段落之間是否有額外的空間? 標(biāo)題和其他文本元素是否與主體文本不同? 您是否使用其他元素(項(xiàng)目符號列表、粗體等)來分解大塊文本? 您是否為主體使用了可讀字體(最好是簡單的襯線或無襯線)?
結(jié)論:可讀性是設(shè)計(jì)的重要組成部分。如果您無法閱讀和理解頁面上的內(nèi)容,則它對用戶而言永遠(yuǎn)不會相關(guān)且重要。你如何規(guī)劃設(shè)計(jì)項(xiàng)目的可讀性?您還有其他成功秘訣嗎?歡迎與我們分享。
-
2021/12/28
-
2021/12/23
-
2021/12/17
- 愛華仕斬獲“2021年度中國廚衛(wèi)行業(yè)年度智能
- 回首2021,迎戰(zhàn)2022 彩虹線開啟新征程!
- 福臨板材|福滿2021,圓夢2022
- 美特照明:2022年照明新趨勢,經(jīng)銷商如何做大
- 會自己“洗澡”的集成灶,帥康自動清洗集成灶
- 帶你設(shè)計(jì)一款功能多變,簡單實(shí)用的休閑露臺陽
- 世紀(jì)豪門吊頂:破防了!原來顏值+實(shí)力=H20
- 裝修木門選的好,噪音統(tǒng)統(tǒng)沒煩惱
- 寒潮來了,有淋浴房洗澡更保暖舒服
- 元旦特輯:歐意電器述說生活的點(diǎn)滴與美好
- “中國十大品牌”獲獎名單出爐,賽戈水漆榮耀
- 2021值得消費(fèi)大賞 凱迪仕智能鎖榮摘兩項(xiàng)桂冠
- 益恩家居:新年新氣象,愛自己從好好睡覺開始
- 元旦伊始:健康新生活,從精格管道直飲水開始
- 喜迎元旦|新年新燈飾 箔晶智能照明讓酒店暖
- 吉美幫的2021 “專精特新” 深耕屋面防水體
- Aqara攜手京東成立燈光設(shè)計(jì)聯(lián)盟 打造燈飾照
- 年底廚房煥新顏,如何選擇廚電?好太太智能來
- 全鋁家具全屋莫蘭迪色系,這款美式輕奢范贏鄰
- 順趨勢·筑鳳巢·贏未來 鳳梧居門窗2021年會隆