對(duì)于各位站長(zhǎng)來(lái)說(shuō)，網(wǎng)站信息的有效傳遞至關(guān)重要。雖然網(wǎng)站中的圖片、圖標(biāo)、按鈕、表單等都元素承載著一定的信息，但其中的"主力軍"還數(shù)網(wǎng)站文本。如何能讓網(wǎng)站文本的信息快速地傳遞給用戶(hù)呢?這就涉及到網(wǎng)站排版設(shè)計(jì)的問(wèn)題了，清晰的網(wǎng)頁(yè)排版有助于提高文本的可讀性，提升可訪(fǎng)問(wèn)性，讓用戶(hù)在閱讀更加愉悅。怎樣才能做好網(wǎng)頁(yè)排版呢?今天這篇文章就總結(jié)了8個(gè)網(wǎng)頁(yè)排版設(shè)計(jì)的小技巧，一起來(lái)看看吧!
1. 控制字體類(lèi)型
一般來(lái)說(shuō)，如果你在網(wǎng)頁(yè)文本中使用3種或3種以上不同類(lèi)型的字體時(shí)，網(wǎng)站結(jié)構(gòu)會(huì)顯得很混亂，這會(huì)極大影響網(wǎng)站內(nèi)容的可讀性。因此我們需要對(duì)網(wǎng)站字體類(lèi)型的數(shù)量加以控制。這有一個(gè)最簡(jiǎn)單的方法，那就是在網(wǎng)站中堅(jiān)持使用一種字體，通常一種字體就可以滿(mǎn)足絕大多數(shù)訪(fǎng)客的瀏覽需求。如果你真的需要在網(wǎng)站中使用兩種不同類(lèi)型的字體時(shí)，那么請(qǐng)確保這兩種字體相互協(xié)調(diào)，可以很好的搭配在一起。以下圖為例，左側(cè)的Geogria和Verdana在字體的大小、寬度上比較接近，比較適合在同個(gè)網(wǎng)頁(yè)中出現(xiàn)。相比而言，右側(cè)的Baskerville和Impact差距太大了，一個(gè)襯線(xiàn)體相當(dāng)突出，一個(gè)很是沉悶厚重，同時(shí)出現(xiàn)會(huì)破壞網(wǎng)頁(yè)的和諧美感。
2. 使用標(biāo)準(zhǔn)字體
諸如Google web fonts 和Typelkit這樣的字體服務(wù)商經(jīng)常會(huì)提供一些有趣的字體，雖然這些字體能夠給用戶(hù)帶來(lái)新鮮的體驗(yàn)，在使用時(shí)也很方便，但鵝鵝鵝還是建議多使用標(biāo)準(zhǔn)字體。這是因?yàn)椴皇敲恳晃辉L(fǎng)客的電腦里都有你想要使用的特殊字體，舉個(gè)栗子來(lái)說(shuō)，windows電腦中的微軟雅黑并不是Mac的標(biāo)配字體，如果你在網(wǎng)頁(yè)中使用了微軟雅黑，它在Mac上會(huì)以蘋(píng)方來(lái)顯示，原本的字體效果無(wú)法很好的展示出來(lái)。所以說(shuō)，為了確保每個(gè)用戶(hù)都能獲取良好的瀏覽體驗(yàn)，我們最好在網(wǎng)頁(yè)中使用標(biāo)準(zhǔn)字體，標(biāo)準(zhǔn)字體的選擇可以根據(jù)目標(biāo)群體的閱讀習(xí)慣、使用設(shè)備等來(lái)確定。
3. 控制每行文本長(zhǎng)度
每行文本的字符數(shù)對(duì)網(wǎng)站內(nèi)容的可讀性有著直接的影響。如果每行文本太短，用戶(hù)需要來(lái)回掃視，這會(huì)打亂閱讀的節(jié)奏;而文本太長(zhǎng)，用戶(hù)又很難持續(xù)保持注意力的集中。這里鵝鵝鵝建議中文字體每行35-45個(gè)字，英文字體每行60個(gè)字符數(shù)(這是針對(duì)于PC端的)。而對(duì)于移動(dòng)端設(shè)備來(lái)說(shuō)，由于屏幕較小，文本長(zhǎng)度應(yīng)更加短一些。下面就是英文網(wǎng)站在手機(jī)端展示的栗子，左側(cè)每行文本使用了50-75個(gè)字符，而右側(cè)文本長(zhǎng)度保持在30-40字符。很明顯，右側(cè)適當(dāng)縮短行長(zhǎng)的展示效果更佳。
4. 選擇合適字體
在移動(dòng)設(shè)備遍地開(kāi)花的這個(gè)時(shí)代，用戶(hù)注定要通過(guò)各種不同的移動(dòng)設(shè)備，在不同的分辨率下瀏覽網(wǎng)站。所以我們需要選擇一款合適的字體， 一款在不同尺寸屏幕上、不同字重情況下都能良好呈現(xiàn)的字體，以確保網(wǎng)站內(nèi)容的可讀性。在這鵝鵝鵝建議中文字體使用微軟雅黑，英文字體使用Calibri、Arial等。
5. 注意控制行高
在網(wǎng)頁(yè)排版中，行高也是一個(gè)非常重要的概念。簡(jiǎn)單來(lái)說(shuō)，行高就是行間距，通常情況下，行間距應(yīng)該是文本高度的30%，這樣才可以保證網(wǎng)站內(nèi)容的清晰易讀。研究發(fā)現(xiàn)，如果每行文本之間的間距控制好了，整個(gè)網(wǎng)站的閱讀效率可以提升20%，用戶(hù)可以更好的消化網(wǎng)站內(nèi)容。下圖的對(duì)比就很好展示了這一點(diǎn)。
6. 確保合理的色彩對(duì)比度
當(dāng)我們?cè)诰W(wǎng)站中使用文本時(shí)，還要注意文本和背景之間的對(duì)比度。只有文本越明顯，用戶(hù)才能快速獲取網(wǎng)站的內(nèi)容。下面是有關(guān)網(wǎng)站內(nèi)容色彩對(duì)比的栗子，上面的圖片中字體和背景的色彩對(duì)比度不夠，用戶(hù)在閱讀時(shí)很有困難，只能模模糊糊看見(jiàn)文字，而下面的圖片中色彩運(yùn)用合理，文字和背景的對(duì)比清晰鮮明，是我們學(xué)習(xí)效仿的對(duì)象。還有，當(dāng)我們確定了網(wǎng)站的配色后，一定要盡可能在多個(gè)設(shè)備上進(jìn)行測(cè)試，確保不同設(shè)備用戶(hù)都能獲取良好的瀏覽效果。
7. 避免使用紅色或綠色文本
在網(wǎng)站中我們有時(shí)會(huì)使用彩色的文本重點(diǎn)突出某個(gè)信息，這時(shí)盡量不要使用紅色或綠色的文本，這時(shí)因?yàn)榧t綠色盲是最常見(jiàn)的視覺(jué)障礙之一，有時(shí)可能影響信息的有效傳遞。如果你真的想要在網(wǎng)站中使用紅、綠色，記得盡量搭配其他的區(qū)分方式，如加粗、斜線(xiàn)、下劃線(xiàn)等。下圖就是一個(gè)實(shí)例：右圖在需要強(qiáng)調(diào)的區(qū)域除了標(biāo)紅，還加上了星號(hào)用來(lái)強(qiáng)調(diào)。
8. 避免使用閃爍文本
一些站長(zhǎng)喜歡在網(wǎng)站中使用閃爍的文本以吸引用戶(hù)的注意力。這是閃爍文本的優(yōu)點(diǎn)，同時(shí)也是它的缺點(diǎn)所在，很多用戶(hù)反映說(shuō)這種文本太令人煩躁、太讓人分心了。所以鵝鵝鵝建議最好避免在網(wǎng)站中使用閃爍文本，畢竟能夠吸引用戶(hù)注意力的方法可不止這一種。
眾所周知，排版設(shè)計(jì)在網(wǎng)站中發(fā)揮著很重要的作用。盡管關(guān)于網(wǎng)頁(yè)排版的潮流趨勢(shì)也一直在變，鵝鵝鵝相信只要靈活掌握上述8個(gè)小技巧，您一定能夠做出令用戶(hù)滿(mǎn)意的排版設(shè)計(jì)。
全國(guó)熱線(xiàn)：0512-65622224 
咨詢(xún)我們
蘇公網(wǎng)安備32050602013336
公司新聞
微信/小程序
建站知識(shí)
網(wǎng)站優(yōu)化
app開(kāi)發(fā)知識(shí)
當(dāng)前位置：
