用戶體驗(yàn)的10大排版規(guī)則

對(duì)于網(wǎng)頁(yè)和APP而言，良好的排版不僅僅是擺上漂亮的字體就可以搞定的，高度的可讀性和可識(shí)別性并不是簡(jiǎn)單的要求，視覺設(shè)計(jì)和內(nèi)容風(fēng)格也應(yīng)當(dāng)做好一致性。

雖然這些要求看起來(lái)和“高大上”的需求一樣空泛，但是找準(zhǔn)方向稍加訓(xùn)練，并不難做到。

所以，今天的文章我們將為你奉上10條可以幫你提升用戶體驗(yàn)的排版規(guī)則，每條規(guī)則都附上實(shí)際案例助你理解和運(yùn)用。

可讀性原則

網(wǎng)頁(yè)必須使用非襯線體字體這種想法已經(jīng)過(guò)時(shí)了，但是這種說(shuō)法背后的核心思想并不過(guò)時(shí)：文本必須是易于閱讀的。

想要挑選易于閱讀的字體，手寫字體、哥特字體和過(guò)于新穎的字體應(yīng)當(dāng)盡量避免使用。當(dāng)然，如果是需要藝術(shù)性字體來(lái)做裝飾的場(chǎng)景就另當(dāng)別論了。

可讀性優(yōu)秀的字體在可識(shí)別性上也不錯(cuò)，并且他們通常不會(huì)特別的“顯眼”。這些字體應(yīng)該是“透明”的，這樣可以讓用戶無(wú)障礙、下意識(shí)地接受，這就是他們的工作原理。

確保行間距足夠?qū)?br />
行間距是影響用戶閱讀體驗(yàn)的關(guān)鍵因素之一，太過(guò)致密會(huì)令人閱讀困難，有呼吸感的行間距則會(huì)令人著迷。尤其是如今大量用戶在手機(jī)和平板上閱讀，相對(duì)寬一點(diǎn)的行間距對(duì)于緩解閱讀大量?jī)?nèi)容有相當(dāng)?shù)木徑庾饔谩?br />
而要控制好行間距需要牽涉到好幾個(gè)變量：

·字體尺寸 ·段落長(zhǎng)度 ·字體樣式 ·屏幕寬度

而非常遺憾的一點(diǎn)在于，并不存在一個(gè)固定的換算公式可以幫你搞定這一切，不過(guò)可以這么做：

·對(duì)于絕大多數(shù)網(wǎng)站而言，最佳行間距應(yīng)該是字體高度的125% ·對(duì)于絕大多數(shù)移動(dòng)端設(shè)備而言，最佳行間距是字體高度的150% ·寬松的行間距（比如直接空一行作為行間距）能讓內(nèi)容更易于被識(shí)別和掃描 ·控制行間距的松緊，用雙眼來(lái)瀏覽段落進(jìn)行測(cè)試，基于感覺來(lái)進(jìn)行調(diào)整

選擇有字母含有大圓角的字體

對(duì)于西文字體，含有較大圓角和內(nèi)空的字體更易于閱讀。明顯的圓角弧度讓B和R這樣的字體易于被識(shí)別，而內(nèi)空則是O和Q這樣字母的標(biāo)志。

緊湊和致密的字體讓眼睛難于辨識(shí)，而曾經(jīng)在紙媒上流行過(guò)的較寬的標(biāo)題字體，識(shí)別度就相當(dāng)不錯(cuò)，因?yàn)楫?dāng)字體拉寬之后，不同字母的差異就越發(fā)明顯。圓角弧度更大的字體看起來(lái)更接近于給孩子們?cè)O(shè)計(jì)的字體，而幼年時(shí)期對(duì)于字體所構(gòu)建起的美學(xué)認(rèn)知，是會(huì)伴隨人的一生的。

讓字體更大一點(diǎn)

毫無(wú)疑問，字體適當(dāng)?shù)姆糯髸?huì)讓人感覺更舒服。當(dāng)然，字體的大小通常取決于你的實(shí)際需求，而在處理大段文字的時(shí)候，就需要注意了。

雖然不同的設(shè)計(jì)師在文字的處理上有著不同的想法，但是通常大家會(huì)認(rèn)為每行的字符數(shù)量應(yīng)當(dāng)控制在45~60個(gè)之間（中文也有一個(gè)約定俗成的數(shù)量），而在移動(dòng)端上，這個(gè)數(shù)量通常需要減半看起來(lái)才足夠舒適。

找x高度較高的字體

和中文字體不同，西文字體有上伸區(qū)和下降區(qū)，小寫字母x的高度是這套字體的x高度。小寫字母的整體比例會(huì)直接影響到閱讀的體驗(yàn)。

x高度相對(duì)比例更大的字體更易于閱讀，換句話來(lái)說(shuō)，就是小寫字母的高度更接近大寫字母的高度。最理想的情況是，字體的x高度處于大寫字母高度的三分之二到四分之三之間。

顯示字體的字距調(diào)整

細(xì)致到位的字距調(diào)整能創(chuàng)造好的排版。

正文的內(nèi)容如此之多，仔細(xì)調(diào)整所有的字母間的字距當(dāng)然是不現(xiàn)實(shí)的，而且也沒有這個(gè)必要。但是對(duì)于標(biāo)題字體和展示字體，字距的調(diào)整就相當(dāng)有必要了。不同字母的筆畫角度都不盡相同，每對(duì)字母之間的距離進(jìn)行適當(dāng)調(diào)整，讓它們看起來(lái)像是天生一對(duì)那樣。這樣的細(xì)節(jié)能讓你的設(shè)計(jì)在諸多網(wǎng)站設(shè)計(jì)中脫穎而出。

其實(shí)中文和日文的字體排版中也同樣用到了字距調(diào)整的技巧，使用平假名和片假名尤其多的日本，在標(biāo)題和展示字體的排版上經(jīng)常會(huì)用到字距調(diào)整，來(lái)確保整體的視覺體驗(yàn)。

仔細(xì)思考比例

當(dāng)你在為一個(gè)項(xiàng)目挑選字體樣式的時(shí)候，將不同部分的尺寸比例想清楚對(duì)于后續(xù)的設(shè)計(jì)相當(dāng)有幫助?？赡苈犉饋?lái)好像有許多計(jì)算工作要做，但是并不一定麻煩，并且會(huì)對(duì)你的整個(gè)項(xiàng)目有極大的幫助。

我們之前所提到的行間距的設(shè)定，就是需要考慮的比例之一。除此之外，標(biāo)題、副標(biāo)題和正文的字體大小比例應(yīng)當(dāng)如何設(shè)定，怎么樣設(shè)定尺寸大小才能營(yíng)造出視覺的和諧感。剛剛開始把控比例的時(shí)候可能還不是太跟手，但是Tut Plus 有一個(gè)不錯(cuò)的教程，可以幫你理解這件事。

筆畫統(tǒng)一的字體最理想

再看字體筆畫樣式，筆畫的寬度無(wú)疑是最重要的事情。超細(xì)的筆畫由于缺乏對(duì)比度大多難于識(shí)別，而筆畫太過(guò)于粗壯的字體可能存在同樣的問題，閱讀起來(lái)也相當(dāng)?shù)馁M(fèi)眼睛。如果字體的粗細(xì)部分對(duì)比過(guò)于強(qiáng)烈、過(guò)于突然也可能帶來(lái)一定的顯示問題。

其實(shí)解決方案也不難，挑選字母筆畫粗細(xì)適中，且筆畫相對(duì)比較一致的字體就好了。這類字體可以兼容更多的背景，在可讀性和適用性上相對(duì)更強(qiáng)。

克制地使用字體

只用兩種字體。再?gòu)?qiáng)調(diào)一次，只能用兩種字體。

控制字體類型的數(shù)量應(yīng)該是每一個(gè)項(xiàng)目的目標(biāo)。太多用戶喜歡在一個(gè)界面當(dāng)中瘋狂地塞進(jìn)各種不同類型的字體，這對(duì)于眼睛是災(zāi)難性的，閱讀困難，甚至招致用戶厭倦。

你可以挑選兩個(gè)字體族作為常用字體——最多再挑選一款藝術(shù)字體用作展示之用——然后堅(jiān)持使用這幾種字體。想清楚每個(gè)字體在什么時(shí)候使用，在什么地方使用，這其中應(yīng)當(dāng)涉及到字體的顏色、大小和位置。另外，在不同的頁(yè)面、不同設(shè)備上，字體的使用應(yīng)該是一致的。

提升對(duì)比度

有許多時(shí)尚的網(wǎng)頁(yè)設(shè)計(jì)會(huì)讓背景和文字之間的對(duì)比度降低，營(yíng)造出炫酷和融合的效果，但是內(nèi)容的識(shí)別度就很低了，對(duì)于用戶而言并不友好。

你的內(nèi)容是網(wǎng)站的核心之一，所以重要性是毋庸置疑的。將內(nèi)容和背景之間的對(duì)比度提升起來(lái)，讓每個(gè)詞都能在屏幕上清晰的識(shí)別出來(lái)，讓用戶輕松地獲取信息。

網(wǎng)站所包含的文字內(nèi)容越多，排版設(shè)計(jì)的重要性就越突出。排版結(jié)構(gòu)舒適穩(wěn)定、對(duì)比度明顯和諧、安全用色都是你必須做到的事情。

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

當(dāng)前標(biāo)題：用戶體驗(yàn)的10大排版規(guī)則
網(wǎng)頁(yè)URL：http://www.bm7419.com/news48/319648.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、用戶體驗(yàn)、營(yíng)銷型網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站導(dǎo)航、

廣告

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