UI設(shè)計培訓(xùn)教你文字編排(下篇)
來源:
奇酷教育 發(fā)表于:
今天UI設(shè)計培訓(xùn)老師教你文字編排(下篇),一共分為上篇和下篇。在我們在做設(shè)計中時往往遇到文字該怎么進(jìn)行設(shè)計才好看或者更搭配。每個
今天
UI設(shè)計培訓(xùn)老師教你文字編排(下篇),一共分為上篇和下篇。在我們在做設(shè)計中時往往遇到文字該怎么進(jìn)行設(shè)計才好看或者更搭配。每個
UI設(shè)計者都遇到過這樣的問題,今天咱們就來說說怎么設(shè)計得體。
6.字間距-使用場景(字體)
不同的字體結(jié)構(gòu)也都不同,中文的無襯線體要比襯線體更粗獷占得位置也會更多一些,就導(dǎo)致字與字的距離會小一些,這種情況下就不能過多的減少字間距了,越縮減就越緊湊就會影響閱讀。相反襯線體的周圍間距要顯得大一些,這時可以適當(dāng)縮減一些行間距,給讀者一種舒適的閱讀體驗。
接下來看一下中英字體測試,中文襯線體/無襯線體,英文襯線體/無襯線體,字體、字形和字號的不同字間距也不盡相同。由于中文字體與英文字體結(jié)構(gòu)不同,在處理英文的無襯線體時,粗獷的線條會增加的行的寬度,這時候可以多縮減一些間距,讓它與其他文本之間保持視覺的平衡。
7.了解行長
接下來講下行長。因為受不同語言、字體、字形和字號的影響,行長也會不盡相同,所以就沒有辦法一次涵蓋的講完,只能針對幾種常用字體和字號來進(jìn)行講解。由于篇幅的原因就不能講的非常細(xì)了,主要還是以微軟雅黑來做示例,微軟雅黑也都是頁面中比較常用的字體,理解了行長的基礎(chǔ)規(guī)則 – 不同語言、字體、字形和字號,行長也不盡相同,接下來往下細(xì)講一下。
8.行長規(guī)定(重點知識)
行的長度也是有一定的規(guī)定的,正文的行長在頁面設(shè)計中的最大長度不能超過110個字符,而標(biāo)題的行長在頁面設(shè)計中的最大長度最好保持在60個字符以下。中文一個字占兩個字符,英文一個字占一個字符。但有時候吧由于頁面柵格較寬,行長最大長度也可以不超過120個字符,但像行長占滿一個柵格的寬度,這種情況是不允許的。行長過長易讀性就會變差,讀者閱讀一行時容易串行,換行時由于上一行末尾與下一行開頭之間距離過長就會造成閱讀困難,不易閱讀等難題。
9.中文-微軟雅黑(字號16)
理解了行長的基礎(chǔ)概念和行長的規(guī)定,就要根據(jù)指定字體和字號進(jìn)行講解。行的長度不一定就是整整一行,也會按照需求劃分為不同的段組。像新聞頁啊就需要比較小的段組,頁面過長可以劃分為兩個段組,一般在頁面中較為常見的就是以標(biāo)題加一個段組的形式進(jìn)行排版的。
10.微軟雅黑(字號12)
字號越小行長就越小,中文字體12號字更適用于比較傳統(tǒng)的企業(yè)網(wǎng)站中,柵格控制在1000px以內(nèi),顯示效果最理想。
11.不同字號在柵格中展示
本身是想簡單講一下行間距的,結(jié)果行間距講的有點多了,行長的知識需要其他的知識做鋪墊,不理解柵格的差別沒法講了,但又由于篇幅過長的問題導(dǎo)致現(xiàn)在也沒法講太細(xì)了。我最近工作被迫有些變動打算開網(wǎng)課,這部分知識也會在課程里進(jìn)行詳細(xì)的補(bǔ)充吧。
今天所講到的這些技巧都是
UI設(shè)計培訓(xùn)老師的親身經(jīng)歷,我希望,我寫的這些技巧能夠給大家?guī)硪恍椭?。如果還有什么疑問請聯(lián)系
奇酷老師,我們將竭誠為你解答。