如果網(wǎng)站上的文本不可讀或用戶根本不感興趣，則設(shè)計(jì)失敗。文本不僅在網(wǎng)頁(yè)上，還需要合理的布局和樣式才能工作。本文與您分享如何使用適當(dāng)?shù)淖煮w大小改善用戶體驗(yàn)。

在網(wǎng)站中，文本的大小是用戶體驗(yàn)的重要部分。隨著網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)不斷變化，文本大小的設(shè)計(jì)也在不斷變化。

雖然網(wǎng)頁(yè)上的字體大小不受字體等各種客觀因素的影響，但設(shè)計(jì)師似乎可以自由選擇字體大小，但這并不意味著設(shè)計(jì)師可以“任性”，視覺效果和網(wǎng)站用戶體驗(yàn)，還有一些需要注意的基本設(shè)計(jì)原則或規(guī)范。

讓我舉個(gè)例子：

豆瓣是中國(guó)非常著名的社區(qū)。在這個(gè)文學(xué)青年聚集的平臺(tái)上，我們可以從網(wǎng)頁(yè)設(shè)計(jì)中感受到一陣文學(xué)新鮮空氣。

我們來(lái)看看字體大小。頁(yè)面不同部分的標(biāo)題是第24種字體。標(biāo)題下面的分類文本是第14個(gè)，右邊標(biāo)題是第15個(gè)，標(biāo)簽文本是第12個(gè)，頁(yè)面標(biāo)題和內(nèi)容介紹也是第12個(gè)字體。

詳細(xì)信息頁(yè)面標(biāo)題為25，文本為13.

在視覺上，豆瓣網(wǎng)站的整體字體太小。雖然一些用戶的吐文文本太小，但很容易看到大文本，長(zhǎng)期閱讀會(huì)導(dǎo)致眼睛疲勞，但大多數(shù)用戶仍然比較識(shí)別這樣的設(shè)計(jì)。

如果用百度百科全書的第14種字體替換文字，它看起來(lái)會(huì)有一種“愚蠢的大”感覺，而不是豆瓣上的細(xì)膩和細(xì)膩。 （當(dāng)然，我并不是說(shuō)百度百科不是很好。畢竟，不同的網(wǎng)站面向不同的群體，需要有針對(duì)性。）

換句話說(shuō)，豆瓣網(wǎng)站的可讀性相對(duì)較差，但另一方面，這種小字體給人一種整體感和精致感，這是網(wǎng)頁(yè)“文學(xué)迷”的一個(gè)很好的例子。與網(wǎng)站所面臨的群體非常一致，因此網(wǎng)站的整體用戶體驗(yàn)仍然非常好。

這些實(shí)際上是所有設(shè)計(jì)師需要注意的。

接下來(lái)，讓我們繼續(xù)說(shuō)出字體大小規(guī)范。

在當(dāng)前的網(wǎng)頁(yè)設(shè)計(jì)中，盡管文本沒有標(biāo)準(zhǔn)字體，但設(shè)計(jì)者應(yīng)該知道網(wǎng)頁(yè)上的第12和第14種字體非常常見。這也是由于一些客觀因素：

> ? 設(shè)計(jì)軟件。設(shè)計(jì)師使用了設(shè)計(jì)軟件，比如PS等，其中大多數(shù)是偶數(shù)，這是習(xí)慣的延續(xù)。

> ? 瀏覽器。在某些瀏覽器中，奇數(shù)會(huì)自動(dòng)呈現(xiàn)為偶數(shù)，例如IE6。

> ? 美觀度。即使是字符數(shù)，例如12日的“中間”字，也會(huì)消除1個(gè)像素的間距，填充像素的實(shí)際寬度為11px。文本的垂直線均勻分割，平衡且美觀。

> ? 實(shí)際應(yīng)用。Windows的點(diǎn)陣只帶有來(lái)自Vista的三個(gè)，12個(gè)，14個(gè)和16個(gè)像素的點(diǎn)陣。在13,15和17px處，盡管每個(gè)字的空間大1px，但點(diǎn)陣沒有改變。但是，它看起來(lái)很稀疏，顯示效果不佳。

但是，可以認(rèn)為這些因素是適當(dāng)?shù)摹＠纾珼ouban和Zhihuo 網(wǎng)站在13號(hào)和15號(hào)也取得了不錯(cuò)的成績(jī)，但總的來(lái)說(shuō)，偶數(shù)也更“安全”。

此外，著名的網(wǎng)頁(yè)設(shè)計(jì)Smashing Magazine已經(jīng)調(diào)查了50個(gè)流行的網(wǎng)頁(yè)界面，發(fā)現(xiàn)這些網(wǎng)站通常使用的標(biāo)題大小為18-29px，文章的匹配文字大小為12-14px。雖然調(diào)查主要針對(duì)英文字體，但我們也可以估算和比較一些適用于漢字的規(guī)范。

結(jié)合這些不同的原因和我們理想的實(shí)踐經(jīng)驗(yàn)，我們總結(jié)了以下規(guī)范，可以使網(wǎng)頁(yè)設(shè)計(jì)更多：

1.文字的字號(hào)盡量選擇12、14、16等偶數(shù)字號(hào)，文字小不能小于12號(hào)。

2.導(dǎo)航文字及頭部底部文字的字號(hào)：第12號(hào)或第14號(hào)標(biāo)題導(dǎo)航文本;菜單導(dǎo)航文字14-18;側(cè)欄文本編號(hào)12或14，第一級(jí)菜單使用第14級(jí)，第二級(jí)菜單使用第12級(jí)，或第一級(jí)菜單使用第12級(jí)粗調(diào)和次級(jí)菜單使用第12級(jí);頁(yè)腳文本是12或14.

例如，AnyForWeb的Locks and Bucks官方在線商店完全符合這些規(guī)范。

特別是在導(dǎo)航中，標(biāo)題導(dǎo)航No.12，導(dǎo)航No.16和文本大小級(jí)別也按照16-14-12的順序排列。這里的文字設(shè)計(jì)也使用不同的顏色，使圖層區(qū)別更加明顯。

清晰的網(wǎng)站結(jié)構(gòu)由文本大小傳達(dá)。這種視覺差異允許用戶非常快速地找到所需產(chǎn)品，而不是在研究導(dǎo)航上花費(fèi)太多時(shí)間，這可以有效地改善網(wǎng)站用戶體驗(yàn)。

3.正文：標(biāo)題文字24-32;標(biāo)題文字16或18;正文12或14.可根據(jù)實(shí)際情況加厚。

上海自然博物館的官方網(wǎng)站是一個(gè)面向主要顯示器的網(wǎng)站。

我們可以看到以下頁(yè)面的字體大小設(shè)計(jì)基本符合上述規(guī)格，特別是以下章節(jié)中的文字大小組合，章節(jié)文字18，標(biāo)題文字16粗體，正文14，層次清晰，有效凸顯關(guān)鍵點(diǎn)看起來(lái)很舒服。

橫幅中的大文字是一個(gè)特例。每張圖片上的文字都是根據(jù)圖片中的元素設(shè)計(jì)的。圖片和文字的結(jié)合非常整體，視覺上吸引人。

4.按鈕文字：例如，登錄，注冊(cè)頁(yè)面按鈕或其他按鈕，文本14-16，可以根據(jù)實(shí)際情況調(diào)整大小或加粗。

例如，英特爾的按鈕字體設(shè)計(jì)：

5.廣告語(yǔ)及特別情況則需根據(jù)文字的實(shí)際情況設(shè)計(jì)字號(hào)。

Haozhi.com是一個(gè)知識(shí)共享社區(qū)。橫幅地圖中的文本使用大型文本設(shè)計(jì)來(lái)捕獲用戶在打開網(wǎng)頁(yè)時(shí)的眼睛，并快速提供重要的公司信息或產(chǎn)品價(jià)值。

6.同一層級(jí)的字號(hào)搭配應(yīng)該保持一致。例如，標(biāo)題文本和內(nèi)容文本大小在該部分的同一級(jí)別中的一致性。

上面分享的規(guī)范只是我們基于長(zhǎng)期項(xiàng)目總結(jié)的理想實(shí)踐經(jīng)驗(yàn)。在實(shí)際的網(wǎng)頁(yè)設(shè)計(jì)中，設(shè)計(jì)師還需要根據(jù)網(wǎng)站的特性和具體情況靈活設(shè)計(jì)。

此外，隨著網(wǎng)頁(yè)設(shè)計(jì)開始普及大型文本設(shè)計(jì)風(fēng)格，一些品牌網(wǎng)站，技術(shù)網(wǎng)站，活動(dòng)網(wǎng)站和一些網(wǎng)站產(chǎn)品顯示文字字體給出了很好的視覺體驗(yàn)。

在Apple官方網(wǎng)站上，產(chǎn)品顯示文本與64和32匹配。文本內(nèi)容簡(jiǎn)短，功能強(qiáng)大，可讀性強(qiáng)。同時(shí)，它具有視覺沖擊力，突出了品牌特征。

在梅賽德斯 - 奔馳的活動(dòng)網(wǎng)站中，文本也以不同大小的文本顯示。這些單詞根據(jù)實(shí)際圖片設(shè)計(jì)了適當(dāng)?shù)淖煮w大小。瀏覽過(guò)程中的動(dòng)畫效果將展示梅賽德斯的氛圍和技術(shù)。

這些網(wǎng)站一般采用大文字和大文字匹配，突出品牌傳播的價(jià)值，強(qiáng)烈的視覺沖擊也可以留下深刻的印象，并在瀏覽過(guò)程中實(shí)現(xiàn)良好的用戶體驗(yàn)。

這篇文章首先在這里分享，當(dāng)然，還有很多優(yōu)秀的網(wǎng)站供設(shè)計(jì)師學(xué)習(xí)和實(shí)踐，然后看看每個(gè)人。