2014-06-29 分類: 網(wǎng)站建設(shè)
清晰可讀的網(wǎng)頁(yè)設(shè)計(jì)文字,對(duì)于你的文字卻出現(xiàn)在網(wǎng)頁(yè)上? 文字是另一個(gè)視覺元素在您的網(wǎng)站上,就像你的圖像,顏色,和模板。
就像其他的視覺元素,文本需要設(shè)置樣式的方式,明確并訪問您網(wǎng)站的用戶訪問,網(wǎng)站的文本,應(yīng)該是“可讀性,可讀性,可讀性。”
重點(diǎn)對(duì)文本的可讀性
“可讀性”基本上是人們認(rèn)識(shí)單詞,句子衡量它是多么容易,和段落??紤]到人們?nèi)绾慰焖贋g覽你的網(wǎng)站, 可讀性成為一個(gè)關(guān)鍵因素在多久他們會(huì)花上你的網(wǎng)頁(yè),他們是否會(huì)試圖理解你所說的。
在屏幕上閱讀是艱難的。不同的研究發(fā)現(xiàn)人們閱讀速度慢,不準(zhǔn)確,記得少了什么,他們?cè)陂喿x時(shí),它顯示在屏幕上。根據(jù)一些估計(jì),網(wǎng)站訪問者僅僅閱讀正文25%在您的網(wǎng)站上。
任何障礙,可讀性文本太小,字體顏色很難讀,或不規(guī)則的線的長(zhǎng)度會(huì)降低這一比例更。
所以你可以保持你的文本的可讀性,更快樂的你的訪客會(huì)和他們更有可能會(huì)想堅(jiān)持一會(huì)兒。
你如何設(shè)計(jì)文本,并抓住讀者的眼睛?這里是看一些因素:
1。線的長(zhǎng)度
我們可能已經(jīng)從8.5 x 11張紙的閱讀,但在屏幕上閱讀,線的長(zhǎng)度要短的多,人的眼睛必須一邊照顧所有的話,并努力保持你從一行到下一,用相同的文字和字體(16號(hào)字體Noto Sans)
許多網(wǎng)站模板有全寬內(nèi)容領(lǐng)域,使他們理想的顯示大圖片或照片,當(dāng)涉及到著陸頁(yè)的文本,不要讓你的線橫跨整個(gè)寬度。嘗試使用列元素和照片元素為了打破文本創(chuàng)建較短的線。
2。對(duì)比
背景和文字之間的顏色對(duì)比度更好,更好的可讀性。
為您的網(wǎng)站,確保你的背景顏色和文字顏色,文字是清晰的足夠的差異。即使是非常不同的顏色沖突嚴(yán)重時(shí),放在一起(如紅色和藍(lán)色的例子,下面)。
選擇正確的顏色
3。白色的空間
線高度問題的例子
在你的網(wǎng)站上,有沒有需要的人群。給你的文字舒適的“白色空間”(空)的周圍,這將是閱讀和掃描更容易。
想想如果你打開網(wǎng)頁(yè),就看到一個(gè)大的文本塊,你可能不會(huì)讀過它。但如果你看到文本分解成更小的,更易于管理的部分,你可能會(huì)給它至少一眼。
添加空間和分手的段落
以創(chuàng)造更多的白色空間在您的網(wǎng)站上,嘗試使用間隔元件與水平線元素之間添加文本元素更多的緩沖。
你也可以分解成更小的段落文本,或添加項(xiàng)目符號(hào)或編號(hào)列表。
調(diào)整行的高度
使用樣式編輯器來(lái)增加你的身體文本行的高度(這調(diào)整文本行之間的空格數(shù)量)。沒有規(guī)則你的線高度應(yīng)你需要調(diào)整基于什么看的字體和字體大小你使用。
在下面的例子中的網(wǎng)站,無(wú)論是圖片和文字有一個(gè)很好的量空他們周圍的空間。這將創(chuàng)建一個(gè)和諧的感覺和視覺層次(你知道怎么看,先讀)。
注意設(shè)計(jì)師在右邊的文本行的高度增加,使較小的字體容易閱讀。
4。對(duì)準(zhǔn)“棱角”
在文本的元素,你會(huì)發(fā)現(xiàn)你有使文本左對(duì)齊,右對(duì)齊選項(xiàng),中心或。
左對(duì)齊的文本是相當(dāng)多的金標(biāo)準(zhǔn)。引導(dǎo)擺脫中心或正文文本右對(duì)齊。而中心的文本可以為標(biāo)題和標(biāo)題的工作,這是 要多讀幾行艱難 。這是因?yàn)殚_始的地方每行文本的每一行的變化,意味著讀者必須找到每一行的開始。
為你的文字可以很整齊,統(tǒng)一的段落。但是根據(jù)你的文字,有時(shí)說的話會(huì)出現(xiàn)拉伸或看起來(lái)不自然。
5。字體大小
如果你有很好的視力,一會(huì)兒拍拍自己的背,然后馬上去檢查你的網(wǎng)站的字體大小。一些看起來(lái)完全正常的你可能會(huì)有很多讀者得撓頭。
一個(gè)典型的經(jīng)驗(yàn)法則,你會(huì)在網(wǎng)頁(yè)上看到的是保持你的身體文本至少16pt。這是一個(gè)很好的開始,但是記住,號(hào)碼是完全取決于你用什么字體。
6。字體風(fēng)格
超過600的谷歌Web字體選擇,你如何選擇合適的字體?這是一個(gè)基本的食譜:
標(biāo)題:選擇一個(gè)程式化的“有趣”的字體。因?yàn)闃?biāo)題是大的,短的,和少用,你可以把字體有點(diǎn)難讀,但增加視覺趣味。
段/正文: 選擇一個(gè)普通的無(wú)襯線字體。這是設(shè)計(jì)來(lái)閱讀屏幕上的所以他們會(huì)提供一個(gè)光滑,易于閱讀的經(jīng)驗(yàn)在段落和更小的尺寸。好的選擇打開手機(jī),SANS,Ubuntu,廣義,和諾托SANS(這些例子中使用的字體)。
導(dǎo)航菜單:你可以用你的第一個(gè)字體,或選擇三分之一,補(bǔ)充了其他兩個(gè)。導(dǎo)航菜單必須容易閱讀,所以選擇一些有個(gè)性,但轉(zhuǎn)向擺脫手寫或裝飾字體。
將擺脫所有大寫字母如果你寫幾句話。大寫字母是偉大的導(dǎo)航條和短詞,但很難讀的句子。
看看我們的文章 上谷歌網(wǎng)頁(yè)字體更多的建議。
你可讀性清單
你把很多想進(jìn)入你的網(wǎng)站的文本,一旦你完成寫作內(nèi)容,下一步是要確保你把它在盡可能清楚的方式?;仡?,這里有一個(gè)清單的可讀性因素考慮為你建立你的網(wǎng)站:
線的長(zhǎng)度:使用列和圖片讓你的文字在你的著陸頁(yè)面少于70個(gè)字符。博客文本可以更長(zhǎng)一些。
對(duì)比:確保有足夠的差異,你的背景和文本顏色。
白色的空間:使用它!簡(jiǎn)短的段落,項(xiàng)目符號(hào)列表,和元素的間距是一個(gè)好的開始。
對(duì)齊:使用左對(duì)齊文本和花時(shí)間整理了段落的右手邊。
字體大小:不是所有的字體大小相同,所以即使你用你的16pt段落文本,它仍然是太小了。檢查的人誰(shuí)不有20 / 20的愿景,一定要閱讀它的舒適。
字體風(fēng)格:當(dāng)有疑問時(shí),使用無(wú)襯線字體段落文本。他們的設(shè)計(jì)工作在屏幕上。如果你不想用黑色,棕色,灰色或嘗試海軍,另一個(gè)黑暗的顏色。
遵循這些建議,你可以創(chuàng)建有吸引力的,誘人的,容易在沒有時(shí)間閱讀的網(wǎng)站,這將讓你的實(shí)際消息閃耀。
網(wǎng)站題目:清晰可讀的網(wǎng)頁(yè)設(shè)計(jì)文字
文章源于:http://redsoil1982.com.cn/news/20084.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)建站、網(wǎng)站改版、移動(dòng)網(wǎng)站建設(shè)、域名注冊(cè)、靜態(tài)網(wǎng)站、定制開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容