文本設(shè)計(jì)的小訣竅

2021-9-6    seo達(dá)人


01.文本寬度不要超過(guò)800px

在進(jìn)行長(zhǎng)篇幅文本設(shè)計(jì)時(shí),要注意本文寬度不要過(guò)長(zhǎng),千萬(wàn)不能鋪滿整個(gè)屏幕。

微信公眾號(hào)的文本寬度660px,知乎的文本寬度654px,google搜索結(jié)果頁(yè)的本文寬度600px,百度搜索結(jié)果頁(yè)寬度560px,百度百科的文本寬度790px。

總之,成熟產(chǎn)品的文本寬度幾乎都不超過(guò)800px,其中600~700之間最為合適。

圖片

02.左對(duì)齊長(zhǎng)文本

當(dāng)文本超過(guò)3行或4行時(shí),慎重使用文本居中對(duì)齊。

因?yàn)槲谋揪又袑?duì)齊時(shí),不可避免地存在兩側(cè)參差不齊,這會(huì)導(dǎo)致用戶在閱讀兩側(cè)內(nèi)容和換行時(shí),導(dǎo)致額外的眼球運(yùn)動(dòng),這會(huì)造成眼睛疲勞,閱讀困難。

左對(duì)齊的長(zhǎng)文本就在一側(cè)形成看不見(jiàn)的直線,引導(dǎo)用戶閱讀,具有更好的可讀性,因此書(shū)籍、網(wǎng)站等都在使用左對(duì)齊。

圖片

《寫(xiě)給大家看的設(shè)計(jì)書(shū)》中提到,居中對(duì)齊會(huì)創(chuàng)建一種更正式、更穩(wěn)重的外觀,這種外觀顯得更為中規(guī)中矩,但通常也很乏味。我敢保證,大多數(shù)看起來(lái)精巧的設(shè)計(jì),都沒(méi)有采用居中對(duì)齊。

圖片

03.標(biāo)題或短文本使用居中對(duì)齊

如果標(biāo)題和文本都比較短,例如一行到兩行,可以使用居中對(duì)齊。再多的話,可以嘗試左對(duì)齊是否更有利于閱讀。

圖片

04.借助元素區(qū)分文本層級(jí)

當(dāng)我們需要區(qū)分不同權(quán)重的文本時(shí),除了采用字體大小、字重等調(diào)整外,還可以嘗試借助目標(biāo)、項(xiàng)目符號(hào)或引號(hào)等其他元素建立清晰的視覺(jué)層次。

圖片

05.充分利用空白間距

我個(gè)人在進(jìn)行文本排版時(shí)會(huì)盡量避免使用線條或背景顏色,因?yàn)樵诖蟛糠謭?chǎng)景下,利用空白間距便可以將層次劃分清晰,并且可以使整個(gè)界面保持干凈整潔。

圖片

原文地址:栗子設(shè)計(jì)喵 (公眾號(hào))

作者:栗子

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》文本設(shè)計(jì)的小訣竅

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



分享本文至:

日歷

鏈接

個(gè)人資料

存檔