提高網(wǎng)站設(shè)計(jì)可讀性的技巧
我們都知道網(wǎng)站內(nèi)容的重要性。如果內(nèi)容經(jīng)過(guò)優(yōu)化,編寫(xiě)良好并在編寫(xiě)之前經(jīng)過(guò)深入研究,那么好的內(nèi)容將是一個(gè)很好的營(yíng)銷工具。但是,內(nèi)容只有在讀者可以閱讀并且作者可以傳達(dá)觀點(diǎn)的情況下才有用,因?yàn)樽罱K,我們?yōu)樽x者(而不只是搜索引擎和機(jī)器人)編寫(xiě)內(nèi)容。網(wǎng)站設(shè)計(jì)必須清晰易懂,這一點(diǎn)很重要。
好的內(nèi)容不只是說(shuō)明重點(diǎn)的文字,也是易于在不同屏幕尺寸和分辨率下閱讀的文本。用戶通常會(huì)消費(fèi)具有美觀外觀和結(jié)構(gòu)良好的內(nèi)容。讓我們看看影響外觀和可讀性的因素。
1-字體選擇:
任何內(nèi)容最基本的選擇都是字體選擇,正確選擇字體對(duì)網(wǎng)站設(shè)計(jì)的可讀性有很大的影響。在此之前,我們?cè)谧煮w樣式中沒(méi)有太多的選擇,因此不可能選擇錯(cuò)誤的字體樣式。但是在這個(gè)時(shí)代,我們有很多字體樣式的選擇。那么,如何選擇正確的字體呢?
您可以選擇大的、粗體的字體來(lái)突出標(biāo)題。對(duì)于其余的內(nèi)容,字體樣式應(yīng)該根據(jù)內(nèi)容的結(jié)構(gòu)來(lái)選擇,并且對(duì)于其余的內(nèi)容應(yīng)該保持不變。例如,如果主標(biāo)題包含5個(gè)子標(biāo)題,那么所有這5個(gè)子標(biāo)題都應(yīng)該具有類似的字體樣式。
2-字體大小:
字體太大或太小,對(duì)于經(jīng)常忽略不同屏幕大小的內(nèi)容的讀者來(lái)說(shuō)是很可怕的。專為桌面設(shè)備設(shè)計(jì)的固定字體大小似乎太大,不適合移動(dòng)電話或平板電腦屏幕。太小的字體大小可能是一個(gè)問(wèn)題,老年人試圖閱讀您的內(nèi)容。而且太大的尺寸可能不適合所有的屏幕。因此,字體大小應(yīng)該是最優(yōu)的,這在不同的屏幕大小上很容易閱讀。
最初,字體大小是根據(jù)像素的數(shù)量來(lái)選擇的。但現(xiàn)在,作者和設(shè)計(jì)師使用百分比,根據(jù)設(shè)備的瀏覽器設(shè)置調(diào)整字體大小。
3-顏色對(duì)比:
在討論了字體樣式和大小之后,讓我們看看開(kāi)發(fā)人員使用的顏色對(duì)比。一般的想法是用深色的字體來(lái)保持一個(gè)淺色的背景,這樣讀者就可以很容易地閱讀內(nèi)容而不需要瞇著眼睛。這是一個(gè)良好的網(wǎng)站設(shè)計(jì)易讀性的特征。淺色的背景和深色的字體形成了一種心理,讀者的眼睛被強(qiáng)迫去看和閱讀他們面前的內(nèi)容。
但是,如果背景是鮮艷的靛藍(lán)色,字體的顏色是黃色、黑色、紅色或綠色,它會(huì)把讀者趕走,因?yàn)闆](méi)有人想看這種顏色對(duì)比。
4-線長(zhǎng)度:
行長(zhǎng)度是在句子分解并將內(nèi)容放入下一行之前填充在一行中的單詞/字符數(shù)。一般的傳統(tǒng)是每行寫(xiě)50-60個(gè)字符,以保證網(wǎng)站設(shè)計(jì)的可讀性。但是,如果行長(zhǎng)度太長(zhǎng),讀者可能會(huì)在內(nèi)容的句子之間迷失方向,可能會(huì)發(fā)現(xiàn)很難正確閱讀下一行。
有機(jī)會(huì),他們可能不得不滾動(dòng)左右來(lái)閱讀你的內(nèi)容,這不是很友好。因此,行長(zhǎng)度不應(yīng)該太短或太長(zhǎng)。它應(yīng)該根據(jù)你的目標(biāo)受眾使用的所有設(shè)備。
5-緊湊的段落:
內(nèi)容的段落應(yīng)該簡(jiǎn)短。這使得網(wǎng)站設(shè)計(jì)的可讀性得到了提高。今天的讀者習(xí)慣于通過(guò)簡(jiǎn)短的段落來(lái)瀏覽內(nèi)容,以找到有用的信息片段。較長(zhǎng)的段落可能會(huì)讓用戶滾動(dòng)整個(gè)內(nèi)容,最終用戶可能會(huì)離開(kāi)頁(yè)面。因此,建議在內(nèi)容中使用3-4行的段落,使其對(duì)讀者更友好。
6-內(nèi)容概要:
內(nèi)容應(yīng)該圍繞主題,不要拐彎抹角。對(duì)這個(gè)話題喋喋不休可能會(huì)使讀者失去興趣,因?yàn)樽x者習(xí)慣于瀏覽內(nèi)容以找到他們需要的任何東西。因此,談?wù)摯_切事情的內(nèi)容通常比大千字的內(nèi)容更受歡迎。
7-最小化的術(shù)語(yǔ):
寫(xiě)內(nèi)容的目的是幫助讀者理解你想要傳達(dá)的信息。沉重的技術(shù)術(shù)語(yǔ)和難以理解的內(nèi)容語(yǔ)言,讓用戶感到愚蠢。因此,對(duì)讀者友好的內(nèi)容是幫助讀者理解你已經(jīng)完全理解的概念的內(nèi)容。
8-內(nèi)容的格式和結(jié)構(gòu):
正確格式的文本能夠成功地將讀者的注意力吸引到正確的地方和焦點(diǎn)上。焦點(diǎn)是讀者需要閱讀的重要內(nèi)容,它包含了內(nèi)容的基本含義。它有助于網(wǎng)站設(shè)計(jì)的易讀性。
文本應(yīng)該有正確的白間距,以迫使用戶閱讀內(nèi)容。文本的一致性應(yīng)該始終保持。例如,項(xiàng)目符號(hào)列表應(yīng)該具有類似的字體樣式和大小;標(biāo)題應(yīng)具有相同的字體顏色、樣式和大小;如果第一個(gè)子標(biāo)頭是斜體的,那么所有的子標(biāo)頭都應(yīng)該是斜體的。這有助于維護(hù)流和內(nèi)容上下文。
9-文本密度:
文本密度是指在頁(yè)面區(qū)域的某一點(diǎn)上排列的單詞數(shù)量——特定區(qū)域內(nèi)的單詞數(shù)量越多,文本的可讀性就越差。文本密度由行高、字體大小、字符間距和行間距等因素決定。這些因素決定了文本的密度,最終決定了內(nèi)容的外觀。而且整個(gè)頁(yè)面的文本密度應(yīng)該保持一致。
通常,作者使用文本突出顯示來(lái)吸引讀者對(duì)特定點(diǎn)或術(shù)語(yǔ)的注意力。他們通過(guò)斜體顯示文本,用不同的顏色顯示,或者簡(jiǎn)單地在雙引號(hào)下面引用它們。除了重要的單詞、短語(yǔ)或習(xí)語(yǔ)外,并不是所有的東西都應(yīng)該突出顯示,以增強(qiáng)和引起注意。
10-內(nèi)容結(jié)構(gòu):
即使考慮了以上所有因素,如果內(nèi)容沒(méi)有很好地組織或放置在某個(gè)層次結(jié)構(gòu)中,那么它就是沒(méi)有意義的。結(jié)構(gòu)化的內(nèi)容看起來(lái)很有條理,可讀性也很好。使用圖表來(lái)顯示統(tǒng)計(jì)數(shù)據(jù)、圖像或圖片來(lái)描述特定的點(diǎn),用項(xiàng)目符號(hào)列表來(lái)列出重要的點(diǎn),使內(nèi)容更易于閱讀和導(dǎo)航。
11-實(shí)現(xiàn)圖形:
任何Web頁(yè)面上的Web內(nèi)容都需要某種圖形表示。圖形可能包括靜態(tài)地圖、圖像、視頻、音頻、圖標(biāo)等。但是它們應(yīng)該安排得干凈、清晰,以免打斷內(nèi)容的流動(dòng)。
任何圖形表示,如圖像、圖形、地圖或視頻,都應(yīng)該放在邊框中,以便系統(tǒng)地將文本內(nèi)容與圖形區(qū)分開(kāi)。需要注意的是,它的圖形大小不是很大,而且在慢速互聯(lián)網(wǎng)設(shè)備上加載不需要太多時(shí)間。
還應(yīng)該注意的是,圖像不會(huì)溢出邊界或屏幕大小。有時(shí),圖形會(huì)占用太多的空間,以至于它會(huì)從可見(jiàn)的屏幕空間中流出來(lái)。這導(dǎo)致讀者不得不上下滾動(dòng)或橫向滾動(dòng)。
12-分隔符:
文本應(yīng)該被分成不同的部分,以增強(qiáng)用戶的可讀性。它還應(yīng)該區(qū)分一組文本與另一組文本。因此,必須使用分隔符來(lái)根據(jù)不同的參數(shù)構(gòu)造內(nèi)容。
劃分和構(gòu)造內(nèi)容的最簡(jiǎn)單方法是通過(guò)行。可以垂直或水平地使用線條來(lái)劃分文本元素并繪制內(nèi)容的層次結(jié)構(gòu)。線條應(yīng)該簡(jiǎn)單而微妙。
另一種分隔文本的方法是使用方框。方框或文本框可用于根據(jù)內(nèi)容的節(jié)和子節(jié)劃分內(nèi)容。它們可以很好地安排,讓讀者的眼睛來(lái)衡量頁(yè)面上的內(nèi)容流。
13-利潤(rùn):
邊距是空白域的關(guān)鍵元素之一。在頁(yè)邊空白處包含文本有助于讀者將注意力集中在文章的核心內(nèi)容上。
頁(yè)邊距還有助于區(qū)分內(nèi)容和頁(yè)面布局的其余部分。應(yīng)該確保文本不會(huì)滲入頁(yè)面的布局和頁(yè)面的其他元素。
14-排版樣式:
一般來(lái)說(shuō),文本在一個(gè)簡(jiǎn)單的,單色的背景下工作得最好,并已成為一個(gè)傳統(tǒng)的很長(zhǎng)一段時(shí)間。但是,如果文本字體在給定的屏幕大小下不失去可讀性,那么偶爾在花哨的背景上擺弄花哨的文本并不會(huì)造成損害。有很多方法可以實(shí)現(xiàn)奇特的文本并進(jìn)行試驗(yàn)。
15-的文本表示:
所有的內(nèi)容用相同的字體風(fēng)格可能會(huì)有點(diǎn)單調(diào),特別是如果文章很長(zhǎng)。因此,為某些類型的內(nèi)容添加一些不同的字體樣式可以增加內(nèi)容的活力,使其對(duì)讀者具有審美吸引力。
例如,以不同的字體樣式放置標(biāo)題可以為內(nèi)容添加有趣的元素。我們還可以根據(jù)字體的選擇來(lái)區(qū)分標(biāo)題和子標(biāo)題。但是,使用花式字體樣式的唯一條件是,使用不會(huì)降低或消除文章內(nèi)容可讀性的字體樣式。
16-使用凸版印刷樣式:
凸版印刷是用來(lái)給頁(yè)面上的某些內(nèi)容增加深度的。它提供了一種內(nèi)容的外觀,在凸版印刷中,文本看起來(lái)就像被壓印過(guò)一樣。這看起來(lái)就像文字被推入了寫(xiě)作空間,并留下了深刻的印象。
它看起來(lái)很干凈,并根據(jù)凸版的使用來(lái)幫助調(diào)整內(nèi)容的流動(dòng)。例如,添加一些著名作家的名言,凸版可以用來(lái)強(qiáng)調(diào)格言的重要性,并吸引讀者的注意力。
17-背景樣式:
如果背景設(shè)計(jì)得很好,文本的可讀性就會(huì)增強(qiáng)。良好的背景可以使文章看起來(lái)很好。它也增加了網(wǎng)站設(shè)計(jì)的可讀性。背景應(yīng)該不是很明亮。否則,讀者將不得不瞇著眼睛通過(guò)移動(dòng)屏幕閱讀內(nèi)容。
在文本可讀的地方,背景可以使用一些柔和的顏色。它也可以是一個(gè)柔和色調(diào)的紋理背景,讀者的焦點(diǎn)仍然在文本上。唯一的條件是,背景的色調(diào)和字體顏色的選擇要保持兩者之間的對(duì)比。
18-超鏈接樣式:
當(dāng)文章太長(zhǎng),用戶無(wú)法閱讀時(shí),文章內(nèi)容中的鏈接就會(huì)被刪除。因此,要使文章中的超鏈接脫穎而出,也可以設(shè)置它們的樣式。如果超鏈接位于內(nèi)容的中間,則可以將其加粗或斜體或下劃線。
但是,如果這個(gè)超鏈接是給一個(gè)孤獨(dú)的文本,遠(yuǎn)離擁擠的內(nèi)容,那么這個(gè)超鏈接就可以放到樣式化的字體中。超鏈接字體的顏色也可以根據(jù)它們的性能進(jìn)行修改。例如,如果鏈接還沒(méi)有被點(diǎn)擊,它應(yīng)該以紅色字體顯示出來(lái)。而且,如果該鏈接已經(jīng)被訪問(wèn)過(guò),那么該鏈接應(yīng)該將其顏色從紅色更改為(比方說(shuō))紫色或深灰色,這表示該鏈接已經(jīng)被訪問(wèn)過(guò)一次。您還可以為鏈接使用著色的背景,以增強(qiáng)可讀性和美觀外觀。
在了解了以上幾點(diǎn)之后,很明顯,網(wǎng)站設(shè)計(jì)中不管內(nèi)容寫(xiě)得多么好,或者優(yōu)化得多么完美,如果它對(duì)讀者來(lái)說(shuō)是不可讀的,那么它就沒(méi)有什么價(jià)值了。
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問(wèn):網(wǎng)站技術(shù)
本文來(lái)源:http://gagu89.com/seodongtai/8370.html