|
可能很多人都要問，網(wǎng)站的文字還需要設(shè)計嗎？
對于很多的網(wǎng)站來說，字在整個網(wǎng)站的內(nèi)容中占了80%以上甚至更多，或者換個角度上說，網(wǎng)站可以沒有顏色，沒有圖片，但唯獨不能沒有文字。
一個產(chǎn)品團(tuán)隊，有一個角色叫做Content Design，ucdchina有過一期話題叫做 注意界面上的文字 ，非常精彩，我在寫本文之前，再次通讀一遍，一方面是學(xué)習(xí)，另一方面，是避免寫重復(fù)的內(nèi)容。如果你按照里面的觀點對照你的網(wǎng)站，相信一定會有所幫助的。
那期話題只有 瀟瀟重點說的是文字的視覺方面 ，那篇文章非常精彩，也是該期話題的“瀏覽冠軍”，本文是延續(xù)性的一些想法。
先看看網(wǎng)站以外的中文字體設(shè)計，英文的正文字體有很多可以選擇，但中文的正文字，總的來說就兩種：宋體和黑體。在傳統(tǒng)的版式設(shè)計中，設(shè)計師們都喜歡做英文的排版，為什么？從視覺上來看，英文的組合很容易形成線和面的關(guān)系，而且字母有節(jié)奏感，比如aby這三個字母放一起有高矮區(qū)別。中文字相對來說，單調(diào)、孤立、不流暢。
回到網(wǎng)站中文字的設(shè)計，設(shè)計師基本上不用考慮在字體上做選擇，只有宋體。前文說：單個字成點，一行字成線，一段字成面。這是版式設(shè)計最基本的原理，我們需要做的就是強化這樣的感覺。拿微軟雅黑和宋體來舉例子，本人非常喜歡微軟雅黑的設(shè)計。
將12號的宋體和雅黑放大，注意以下細(xì)節(jié)：
- 雅黑要比宋體寬一像素
- 雅黑讓每個筆畫往四周撐，比如“是”上面的“日”，雅黑顯得就要飽滿
這么做的目的只有一個，讓中文字體更容易形成線，從而讀起來更流暢。我們可以看到，盡管雅黑不是真正的正方形，但它看起來要比宋體方一些。
看完上面這個例子，我的觀點也就出來了：別把你的文字看成字，而是看成點，文字的視覺設(shè)計其實就是處理點線面的關(guān)系。
下面是具體設(shè)計方面的點：
- 字體的單位用em而不用px，盡管12px和0.8em大小差不多。
updete:感謝網(wǎng)友 Dreamcolor 推薦文章 95%的中國網(wǎng)站需要重寫CSS ，該文很詳細(xì)的解釋了px和em的差別和原理。這點寫之前是我想當(dāng)然了，沒有深入理解em單位。只看到很多用em的視覺效果不好看，現(xiàn)在明白了，是因為沒有把em單位和px對上號。結(jié)論是應(yīng)該用em而不是px，但需要把em的值設(shè)置好。
- 在css文件body中的font-family里面保證”宋體”前面有Arial或者verdana，個人推薦這么寫：font-family:Helvetica,Georgia,Arial,sans-serif，宋體。這樣能保證你界面中的字母、數(shù)字、符號看上去美觀一些，更重要的是更加易讀。
- 子條 說：12號宋體時，我們一般使用18-20像素的行距。14號宋體通常使用22-24像素的行距。
很贊同，這個行距大小隨著單行字?jǐn)?shù)的多少而上下浮動。我認(rèn)為12px字如果單行字?jǐn)?shù)少的話，17也是可以接受的。
- 正文一行字?jǐn)?shù)最好不超過50，首頁的標(biāo)題文字以8-20字為佳。
- 12和14px字相對來說最精致，13px在需要的時候可以做正文字，word里面默認(rèn)的字的大小相當(dāng)于網(wǎng)頁的13px字。
- 對于一段文字，尤其是正文部分，保證左右至少有15px的留白，便于用戶換行時不受到干擾。
- 文字和背景對比要足夠明顯，保證最弱文字的可讀性。
PS1：給 Denis 的 可愛的女兒晨晨設(shè)計的wordpress主題 今天出爐了，細(xì)節(jié)方面還需要再調(diào)。那丫頭著實地可愛！
PS2：有一些朋友給我來郵件讓我給貴站提建議，我在寫完這系列視覺設(shè)計的文章之后，統(tǒng)一給予回復(fù)。我覺得可以從文章觀點中，是否能得到一些幫助呢？尤其是可以看看ucdchina的話題。
本文鏈接：http://www.95time.cn/design/doc/2008/5699.asp 
出處：懶得設(shè)計
責(zé)任編輯：bluehearts
|
