這篇文章以名站 Inside 作為實(shí)例，分析了網(wǎng)站里的排版閱讀體驗(yàn)，然后作者給出了一個(gè)改良過的方案，效果的確大不一樣。文章不長，但思路很贊，值得同學(xué)們記錄下來。
@十萬個(gè)為什麼 ：文字層級(jí)經(jīng)常在交互設(shè)計(jì)中被忽視。無論如何，要建立一套成功的用戶流程，在項(xiàng)目流程之初就得將文字納入考慮。
文字層級(jí)在溝通中扮演著重要角色，將用戶引向期望中的結(jié)果，還能改善用戶體驗(yàn)。網(wǎng)頁應(yīng)用總有繁復(fù)的文字層級(jí)，區(qū)分不夠鮮明。各級(jí)文字相互較勁，使用戶不知所措、迷失其中。
新聞?lì)^條應(yīng)用 Inside.com 就是個(gè)很好的例子，反映了不清晰的文字層級(jí)如何影響用戶體驗(yàn)。在“all updates”中，新聞逐條展示。每條包含了7個(gè)文字層級(jí)(下圖)。分類名(1)、標(biāo)題(2)、標(biāo)題鏈接(3)、正文鏈接(4)、正文(5)、網(wǎng)站鏈接(6)、發(fā)布時(shí)間(7)，由于沒有被清晰地區(qū)分開，它們?nèi)荚跔幭辔脩糇⒁狻＿@種模棱兩可的層級(jí)，使每則故事都不易閱讀，阻滯了用戶交互流程。
假如花更多心思在文字層級(jí)上，Inside.com會(huì)受益良多
為了更好地區(qū)分文字的層級(jí)，你需要對(duì)用戶希望如何剖析信息有所了解。在缺乏可用性測試的情況下，我可以假設(shè)用戶第一眼會(huì)看到標(biāo)題，然后閱讀正文，接下來如果他們感興趣，則會(huì)點(diǎn)擊網(wǎng)站鏈接。
很快，我重新設(shè)計(jì)了第一篇文章，優(yōu)化了文字的層級(jí)。增大了標(biāo)題的字號(hào)，將它剝離出正文，把正文改為中灰色，將網(wǎng)站鏈接放在正文下方，并加大了行高，增加易讀性。
快速重設(shè)計(jì)
這些改變有助于區(qū)分文字層級(jí)，隨后便提升了用戶體驗(yàn)。
前后對(duì)比
從結(jié)構(gòu)的角度看，還能使整體層級(jí)更加清晰。記住文字只是一種元素(盡管通常是最重要的)，對(duì)導(dǎo)航條、圖片位置、文章排列進(jìn)行重新設(shè)計(jì)，也能提升用戶體驗(yàn)。