幾個(gè)排版技巧幫助你更好的做好網(wǎng)頁(yè)設(shè)計(jì)

2021-04-21    分類: 網(wǎng)站建設(shè)

在網(wǎng)頁(yè)設(shè)計(jì)中,排版在網(wǎng)站和用戶之間建立良好的溝通和幫助用戶實(shí)現(xiàn)他們的目標(biāo)方面起著重要的作用。當(dāng)我們談?wù)摼W(wǎng)頁(yè)與用戶建立有效溝通的能力時(shí),我們通常指的是文本布局的作用:

網(wǎng)絡(luò)上超過(guò)95%的信息是文本,好的排版會(huì)讓用戶更容易閱讀,而凌亂的排版會(huì)讓用戶失去繼續(xù)瀏覽的意圖。正如Oliver Reisenstein在他的文章“網(wǎng)頁(yè)設(shè)計(jì)是95%的排版”中所寫的,排版的目的是優(yōu)化可讀性,可訪問(wèn)性,可用性,以及與圖形的平衡

換句話說(shuō),優(yōu)化布局也有助于優(yōu)化界面。在本文中,我們提供了一組規(guī)則,可以幫助您提高文本內(nèi)容的可讀性和可讀性。

1. 不要使用太多字體

建議您在站點(diǎn)布局中使用不超過(guò)三種字體類型,否則您的站點(diǎn)會(huì)看起來(lái)松散和不專業(yè)。不僅過(guò)多的字體會(huì)導(dǎo)致這個(gè)問(wèn)題,而且過(guò)多的字體大小也會(huì)破壞頁(yè)面的布局。

作為一個(gè)通用規(guī)則,保持字體族的數(shù)量最少(兩個(gè)字體是倍數(shù);一種字體通常就足夠了),并在整個(gè)網(wǎng)站中遵循相同的原則。如果使用的字體多于一種,請(qǐng)確保這兩種字體是兼容的。以以下字體組合為例。喬治亞州和懷爾達(dá)那州在相對(duì)和諧中相互補(bǔ)充。與在巴斯克維爾的震驚相反,這里將有一種明顯的沖突感。這種非線性的影響顯然比巴斯克維爾的視覺(jué)沖擊更大。

在進(jìn)行中、英文排版時(shí),建議使用標(biāo)準(zhǔn)中文字體對(duì)應(yīng)英文,標(biāo)準(zhǔn)英文字體對(duì)應(yīng)數(shù)字和字符,標(biāo)準(zhǔn)英文字體對(duì)應(yīng)英文。這里有一個(gè)例子,看看你能否比較美。

2. 用標(biāo)準(zhǔn)字體

在谷歌Web fonts或TypeKit中有很多有趣的字體,在中文“字體庫(kù)”中有字體嵌入服務(wù)。對(duì)于中國(guó)設(shè)計(jì)師來(lái)說(shuō),角色的體驗(yàn)非常重要。一個(gè)字符將移動(dòng)幾兆字節(jié)或10兆字節(jié),這增加了用戶瀏覽網(wǎng)站的加載時(shí)間。相反,在一個(gè)網(wǎng)頁(yè)上使用26個(gè)英文字母和數(shù)百個(gè)K標(biāo)點(diǎn)符號(hào)是很容易的。

選擇一種標(biāo)準(zhǔn)字體。(近年來(lái),網(wǎng)站都使用簡(jiǎn)單的單層粗體字體。對(duì)于英文,使用Arial, Calibri或任何其他類型的粗體以方便在屏幕上閱讀。如果你沒(méi)有一個(gè)特定的概念來(lái)指導(dǎo)你,避免使用襯線字體。

不是每個(gè)用戶都會(huì)在終端上看到相同的字體,這意味著用戶可能看不到您選擇的適當(dāng)字體。

用戶更熟悉標(biāo)準(zhǔn)字體,所以他們可以更快地閱讀它們,可以制作特殊和有限的字體。嵌入在Web中以SVG格式使用的材料,好的字體設(shè)計(jì)可以讓用戶更關(guān)注內(nèi)容,而不是字體的類型。

3.限制文本的行數(shù)

文本可讀性的關(guān)鍵是確保每行字符的數(shù)量。不是設(shè)計(jì)者定義文本的寬度,而是用戶的可讀性。

太寬——會(huì)讓一行文字太長(zhǎng),讓讀者的眼睛很難集中在文字上。在一篇長(zhǎng)文章中很難找到正確的臺(tái)詞,因?yàn)楹苋菀自诤荛L(zhǎng)一段時(shí)間內(nèi)聯(lián)系起來(lái)。

太短——它把讀者的目光帶回到下一行,打破了讀者的節(jié)奏。時(shí)間過(guò)長(zhǎng)會(huì)導(dǎo)致眼睛疲勞。太短也會(huì)讓讀者在閱讀當(dāng)前一行之前就很容易跳到下一行,可能會(huì)錯(cuò)過(guò)潛在的重要單詞和句子。

以谷歌和百度為例:正如我們所見(jiàn),對(duì)于移動(dòng)設(shè)備,每行應(yīng)該是30-40個(gè)字符長(zhǎng)(半個(gè)角),根據(jù)屏幕、文本的寬度和不同分辨率的字體大小顯示準(zhǔn)確的字?jǐn)?shù)。設(shè)計(jì)原則是要保證文字能夠被用戶輕松閱讀,文字不能太小也不能太大。對(duì)于iOS(移動(dòng)),文本的最小字體大小不應(yīng)小于24px,這對(duì)用戶來(lái)說(shuō)太小了,無(wú)法閱讀。例如,可以使用百度作為引用。

4.選擇各種顯示效果好的字體大小

用戶將通過(guò)具有不同屏幕分辨率的終端設(shè)備訪問(wèn)您的站點(diǎn)。大多數(shù)用戶界面需要不同大小的文本(標(biāo)題、字幕、文本、評(píng)論等等)。選擇適合不同屏幕分辨率設(shè)備的字體也很重要,以確保不同大小的字體具有較高的可讀性和可用性。

在過(guò)去的兩年中,流行的粗體和平房字體一直是一個(gè)不錯(cuò)的選擇。當(dāng)然,我認(rèn)為漢藝黑旗在字體族數(shù)量、字體質(zhì)量、屏幕顯示、紙張印刷等方面都不遜于前兩種字體。每個(gè)設(shè)計(jì)師都是這樣的

網(wǎng)站欄目:幾個(gè)排版技巧幫助你更好的做好網(wǎng)頁(yè)設(shè)計(jì)
網(wǎng)站路徑:http://www.muchs.cn/news/109261.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、品牌網(wǎng)站建設(shè)移動(dòng)網(wǎng)站建設(shè)、用戶體驗(yàn)、動(dòng)態(tài)網(wǎng)站、商城網(wǎng)站

廣告

聲明:本網(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)

成都定制網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)