網(wǎng)站中文字怎么規(guī)劃有視覺感 |
發(fā)布時(shí)間:2020-07-23 文章來源:本站 瀏覽次數(shù):2682 |
或許許多人都要問,網(wǎng)站的文字還需要規(guī)劃嗎? 關(guān)于許多的網(wǎng)站來說,字在整個(gè)網(wǎng)站的內(nèi)容中占了80%以上乃至更多,或許換個(gè)角度上說,網(wǎng)站能夠沒有顏色,沒有圖片,但唯獨(dú)不能沒有文字。 一個(gè)產(chǎn)品團(tuán)隊(duì),有一個(gè)人物叫做Content Design,ucdchina有過一期話題叫做留意界面上的文字,十分精彩。假如你依照里邊的觀念對(duì)照你的網(wǎng)站,信任一定會(huì)有所幫助的。 先看看網(wǎng)站以外的中文字體規(guī)劃,英文的正文字體有許多能夠選擇,但中文的正文字,總的來說就兩種:宋體和黑體。在傳統(tǒng)的版式規(guī)劃中,規(guī)劃師們都喜歡做英文的排版,為什么?從視覺上來看,英文的組合很簡(jiǎn)單構(gòu)成線和面的關(guān)系,并且字母有節(jié)奏感,比方aby這三個(gè)字母放一同有高矮差異。中文字相對(duì)來說,單調(diào)、孤立、不流暢。 回到網(wǎng)站中文字的規(guī)劃,規(guī)劃師基本上不必考慮在字體上做選擇,只要宋體。前文說:?jiǎn)蝹(gè)字成點(diǎn),一行字成線,一段字成面。這是版式規(guī)劃最基本的原理,我們需要做的就是強(qiáng)化這樣的感覺。 拿微軟雅黑和宋體來舉比如,自己十分喜歡微軟雅黑的規(guī)劃。 將12號(hào)的宋體和雅黑擴(kuò)大,留意以下細(xì)節(jié): 1 、雅黑要比宋體寬一像素 2、雅黑讓每個(gè)筆畫往四周撐,比方“是”上面的“日”,雅黑顯得就要飽滿 這么做的目的只要一個(gè),讓中文字體更簡(jiǎn)單構(gòu)成線,然后讀起來更流暢。我們能夠看到,雖然雅黑不是真正的正方形,但它看起來要比宋體方一些。 看完上面這個(gè)比如,我的觀念也就出來了:別把你的文字當(dāng)作字,而是當(dāng)作點(diǎn),文字的視覺規(guī)劃其實(shí)就是處理點(diǎn)線面的關(guān)系。 下面是具體規(guī)劃方面的點(diǎn): 1、字體的單位用px而不必em,雖然12px和0.8em巨細(xì)差不多。這點(diǎn)寫之前是我想當(dāng)然了,沒有深化理解em單位。只看到許多用em的視覺效果不好看,現(xiàn)在理解了,是因?yàn)闆]有把em單位和px對(duì)上號(hào)。結(jié)論是應(yīng)該用em而不是px,但需要把em的值設(shè)置好。 2、在css文件body中的font-family里邊確!八误w”前面有Arial或許verdana,個(gè)人推薦這么寫: 3、12號(hào)宋體時(shí),我們一般使用18-20像素的行距。14號(hào)宋體一般使用22-24像素的行距。很附和,這個(gè)行距巨細(xì)隨著單行字?jǐn)?shù)的多少而上下浮動(dòng)。我以為12px字假如單行字?jǐn)?shù)少的話,17也是能夠接受的。 4、正文一行字?jǐn)?shù)最好不超過50,首頁的標(biāo)題文字以8-20字為佳。 5、12和14px字相對(duì)來說最精美,13px在需要的時(shí)分能夠做正文字,word里邊默認(rèn)的字的巨細(xì)相當(dāng)于網(wǎng)頁的13px字。 6、關(guān)于一段文字,尤其是正文部分,確保左右至少有15px的留白,便于用戶換行時(shí)不受到攪擾。 7、文字和背景對(duì)比要滿足顯著,確保最弱文字的可讀性。 |
|