改善文字的層級關(guān)系
文字層級經(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è)計,也能提升用戶體驗。我們下次會講到……
原文地址:https://medium.com/designed-thought/creating-better-typographic-hierarchy-1148a46b2fc
#專欄作家#
可樂橙,微信公眾號:可樂橙(colachangreen)。人人都是產(chǎn)品經(jīng)理專欄作家,UI/UX設(shè)計師,關(guān)注互聯(lián)網(wǎng),關(guān)注科技?,F(xiàn)居杭州,與小伙伴們正在創(chuàng)業(yè)途中。或許不是一名優(yōu)秀的設(shè)計師,至少是個快樂的設(shè)計師。
轉(zhuǎn)載請保留上述作者信息并附帶本文鏈接
- 目前還沒評論,等你發(fā)揮!