作者：網站建設公司 來源：佛山網站建設日期：2020-11-11 瀏覽： 次
如果網站上的文字無法閱讀或者用戶根本沒有興趣，這個設計就是失敗的。而文字并不是僅僅放在網頁上就可以了，還需要合理的布局和樣式搭配才能起作用，本文和大家分享如何用合適字號提升用戶體驗。
在一個網站中，文字的大小是用戶體驗的一個重要部分。隨著網頁設計潮流的不斷變化，文字大小上的設計也在不斷改變。
雖然網頁上字號不像字體那樣受到多種客觀因素制約，看起來似乎設計師可以自由選擇字號，但這并不意味著設計師可以“任性”了，出于視覺效果和網站用戶體驗考慮，仍然有一些基本的設計原則或規范是需要注意的。
咱先舉個例子說明：
豆瓣是國內一個非常出名的社區，在這個文藝青年聚集的平臺上，我們從網頁設計就可以感受到一陣文藝清新風撲面而來。
我們從字號上觀察一下，頁不同板塊標題采用24號字體，標題下面的分類文字14號，右側標題15號，標簽文字12號，頁文章標題和內容簡介也是12號字體。
而詳情頁標題25號，正文13號。
從視覺上看，豆瓣網站的整體字號偏小，雖然看到一些網友吐槽正文內容的文字太小，大段文字很容易眼花，而且長時間的閱讀會讓眼睛產生疲勞，不過大多數用戶還是比較認可這樣的設計。
如果正文文字換成百度百科這種14號字體，就會顯得有種“傻大個兒”的感覺，在豆瓣上不夠精致細膩。（當然我不是說百度百科不好，畢竟不同網站面對不同群體，需要有針對性。）
也就是說，豆瓣網站在可讀性上相對比較差，但從另一方面來說，這種小字號讓人有一種整體感和精致感，很好襯托出網頁的一種“文藝范兒”，非常符合網站所面對的群體，因此網站整體用戶體驗仍然很不錯。
這些實際上都是需要設計師們注意的。
接下來咱再繼續說字號規范吧。
在目前網頁設計中，雖然沒有明文規定文字的標準字號，但設計師應該都知道網頁上12號和14號字體非常常見。這也是由于一些客觀因素的制約：
> 設計軟件。設計師使用的設計軟件，比如PS等，大多數是偶數，這是一種習慣的延續。
> 瀏覽器。 在某些瀏覽器上，奇數字號會被自動渲染成偶數，比如IE6。
> 美觀度。 偶數字號的文字，比如12號的“中”字，去掉1像素的間距，填充了像素的實際寬是11px，文字的中豎線左右是平分的，顯得均衡，具有美感。
> 實際應用。Windows自帶的點陣宋體從Vista開始只提供12、14、16px三個大小的點陣，在13、15、17px下，雖然每個字的空間大了1px，點陣卻沒變，但視覺上顯得稀疏，顯示效果不佳。
不過這些因素都可以酌情考慮。比如豆瓣和知乎等網站采用13號、15號也達到很好的效果，不過總的來說，偶數字號更“安全”。
另外，網頁設計上著名的Smashing Magazine曾調查了50個流行的網頁界面，發現這些網站通常都是采用標題大小18—29px，與此匹配的文章主體文字大小采用12—14px。雖然調查主要針對的是英文字體，不過我們也可以從中估算和對比出一些中文字號適用的規范。
綜合以上種種原因和我們的理想實踐經驗，我們總結了以下幾條規范，它們可以讓網頁設計更：
1.文字的字號盡量選擇12、14、16等偶數字號，文字小不能小于12號。
2.導航文字及頭部底部文字的字號：Header導航文字12號或14號；Menu導航文字14—18號；Sidebar文字12號或14號，一級菜單使用14號、二級菜單使用12號，或一級菜單使用12號加粗、二級菜單使用12號；Footer文字12號或14號。
比如，AnyForWeb為樂扣樂扣設計的區網上官方商城就完全符合這些規范。
尤其是在導航上，Header導航12號，導航16號，文字大小層級也按照16—14—12號依次排列，這里的文字設計還用了不同顏色讓層次區分更加明顯。
通過文字字號傳達出清晰的網站結構，這種視覺差異讓用戶可以非常快速找到想要的商品，而不是花費太多時間用在研究導航上,能有效提升網站用戶體驗。
3.正文：大標題文字24—32號；標題文字16或18號；正文文字12號或14號。可根據實際情況加粗。
上海自然博物館官網是一個主要以展示為主的網站。
我們可以看到以下網頁的字號設計基本上全部符合上面的規范，尤其是下面版塊中的文字字號搭配，版塊文字18號、標題文字16號加粗、正文文字14號，層次分明又有效突出重點，看上去很舒適。
Banner中的大號文字則屬于特別情況，每張圖上的文字都是根據圖片中元素進行設計的，圖文結合很有整體感，在視覺上非常吸引人。
4.按鈕文字：比如登錄、注冊頁面按鈕或其他按鈕，文字14—16號，可根據實際情況調整大小或加粗。
比如，英特爾的按鈕字號設計：
5.廣告語及特別情況則需根據文字的實際情況設計字號。
好知網是一個知識分享社區，Banner圖里面的文字采用了大號文字設計，在打開網頁時時間抓住用戶的眼球，快速傳遞重要的企業信息或產品價值。
6.同一層級的字號搭配應該保持一致。比如，同一層級的版塊中標題文字和內容文字大小的一致性。
上面分享的規范只是我們根據長期項目總結的理想實戰經驗，在實際網頁設計中，還需要設計師們根據網站特征和具體情況靈活設計。
此外，隨著網頁設計開始流行大號文字設計風格，一些品牌網站、科技網站、活動網站，以及一些網站產品展示欄目的文字字號給人非常棒的視覺體驗。
在蘋果官網中，產品展示文字以64號和32號搭配，文字內容簡短有力，可讀性強，同時非常具有視覺沖擊力，突出顯示了品牌特征。
在奔馳的活動網站中，文字同樣以不同大小文字搭配的方式展示，這些文字根據實際圖片設計了適當的字號，瀏覽過程中的動畫效果將奔馳的大氣和科技感地展現出來。
這些網站一般采用大圖大號文字搭配，凸顯品牌傳遞的價值，強烈的視覺沖擊力也能給人留下比較深刻的印象，并在瀏覽過程中實現好的用戶體驗。
本文先分享到這里，當然咯，還有很多的優秀網站可以讓設計師們去學習實踐，接下來就看大家的了。
零度飛易提供品牌
一體化IT網站價格規劃書
教育網站設計方案建材網站設計方案機械網站設計方案廣告網站設計方案家居照明網站設計方案環保設備網站設計方案五金網站設計方案電器網站設計方案家具網站設計方案機械網站設計方案
零度飛易網絡科技是國內企業網絡運營服務商，旗下有“零度飛易”建站品牌，“微度”微信平臺開發系統及互聯網網絡推廣，三大業務是零度飛易戰略發展服務；零度是新網、阿里云（原萬網）、360建站等公司的戰略合作伙伴。零度飛易三大品牌產品為500+家廣東中小企業提供過互聯網網絡服務方案。在深圳-鄭州_成都-上海-北京-合肥-佛山-廣州-東莞-江門地區企業提供網站建設、網絡營銷、微信小程序開發、APP開發和域名注冊等網站建設服務。
有一個互聯網項目想和我們談談嗎？您可以填寫右邊的表格，讓我們了解您的項目需求，這是一個良好的開始，我們將會盡快與你取得聯系。當然也歡迎您給我們寫信或是打電話，讓我們聽到你的聲音！
地址：佛山市順德區大良鳳翔商業廣場二座670
業務QQ：378780108
策劃專線：13715431176
E-mail：sale@fslingdu.com
零度飛易是一家專業網站設計,網站制作、seo優化,網站推廣,網站建設的佛山網絡運營公司。零度飛易在