編者按：這篇文章以名站 Inside 作為實例，分析了網(wǎng)站里的排版閱讀體驗，然后作者給出了一個改良過的方案，效果的確大不一樣。文章不長，但思路很贊，值得同學(xué)們記錄下來。

網(wǎng)站體驗熱文：《網(wǎng)頁設(shè)計新趨勢！你聽說過“幽靈按鈕”嗎？》

@十萬個為什麼?：文字層級經(jīng)常在交互設(shè)計中被忽視。無論如何，要建立一套成功的用戶流程，在項目流程之初就得將文字納入考慮。

文字層級在溝通中扮演著重要角色，將用戶引向期望中的結(jié)果，還能改善用戶體驗。網(wǎng)頁應(yīng)用總有繁復(fù)的文字層級，區(qū)分不夠鮮明。各級文字相互較勁，使用戶不知所措、迷失其中。

新聞頭條應(yīng)用?Inside.com?就是個很好的例子，反映了不清晰的文字層級如何影響用戶體驗。在“all updates”中，新聞逐條展示。每條包含了7個文字層級（下圖）。分類名（1）、標(biāo)題（2）、標(biāo)題鏈接（3）、正文鏈接（4）、正文（5）、網(wǎng)站鏈接（6）、發(fā)布時間（7），由于沒有被清晰地區(qū)分開，它們?nèi)荚跔幭辔脩糇⒁狻＿@種模棱兩可的層級，使每則故事都不易閱讀，阻滯了用戶交互流程。

假如花更多心思在文字層級上，Inside.com會受益良多

為了更好地區(qū)分文字的層級，你需要對用戶希望如何剖析信息有所了解。在缺乏可用性測試的情況下，我可以假設(shè)用戶第一眼會看到標(biāo)題，然后閱讀正文，接下來如果他們感興趣，則會點擊網(wǎng)站鏈接。

很快，我重新設(shè)計了第一篇文章，優(yōu)化了文字的層級。增大了標(biāo)題的字號，將它剝離出正文，把正文改為中灰色，將網(wǎng)站鏈接放在正文下方，并加大了行高，增加易讀性。

快速重設(shè)計

這些改變有助于區(qū)分文字層級，隨后便提升了用戶體驗。

前后對比

從結(jié)構(gòu)的角度看，還能使整體層級更加清晰。記住文字只是一種元素（盡管通常是最重要的），對導(dǎo)航條、圖片位置、文章排列進(jìn)行重新設(shè)計，也能提升用戶體驗。

原文地址：medium
譯文地址：colachan
譯者：@十萬個為什麼

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量72萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：