9.17日(rì)音(yīn)訊,網頁設計(jì  Ω≤)中文(wén)字如(rú)何設計(jì)才有(yǒu)視←€←∞(shì)覺感

　　9.17日(rì)音(yīn)訊,網頁設計(jì)中文(wén)字&♥σ♣如(rú)何設計(jì)才有(yǒu)視(shì)覺感。可(kě₩α)能(néng)很(hěn)多(duō)人(rén)δ₽≠都(dōu)要(yào)問(wèn)，網站(zhàn)的(d§®e)文(wén)字還(hái)需要(yào)設計(jì)嗎(ma)？對(∑≤πduì)于很(hěn)多(duō)的(de)網站λ§(zhàn)來(lái)說(shuō)，字在整個(gèΩ∑ ‌)網站(zhàn)的(de)內(nèi)容中占了(le)80%以上β☆&±(shàng)甚至更多(duō)，或者換個(gè)角度☆★上(shàng)說(shuō)，網站(zhàn)↕→™¥可(kě)以沒有(yǒu)顔色，沒有(yǒu)圖片，但(dàn)唯獨不♠€∑ (bù)能(néng)沒有(yǒu)文(wén)字γ≈。一(yī)個(gè)産品團隊，有(yǒu)一σαΩ(yī)個(gè)角色叫做(zuò)ContentDesign，ucd×βchina有(yǒu)過一(yī)期話(huà)題叫做(zu §↕÷ò)注意界面上(shàng)的(de)文(wén)字，非常←∑€精彩，我在寫本文(wén)之前，再次通(tōng)讀(dú)一(<>yī)遍，一(yī)方面是(shì)學習(xí)，另一(yī)方面，是(sh↑✘ì)避免寫重複的(de)內(nèi)容。如(rú)果你(nǐ)按照(↑≈•zhào)裡(lǐ)面的(de)觀點對(duì)照(zhào✔£)你(nǐ)的(de)網站(zhàn)，相(xi÷γàng)信一(yī)定會(huì)有(yǒu)所∏≥≥∞幫助的(de)。

　　先看(kàn)看(kàn)網站(zhàn)以外(wài)的(de)中←↕文(wén)字體(tǐ)設計(jì)，英文(wén)的(de)正✔&÷文(wén)字體(tǐ)有(yǒu)很(hěn)多(duō)可(kě)α§ β以選擇，但(dàn)中文(wén)的(de)正文(‌"↓±wén)字，總的(de)來(lái)說(shuō)就(jiù)兩±≥種：宋體(tǐ)和(hé)黑(hēi)體(t₩‍×ǐ)。在傳統的(de)版式設計(jì)中，設計(jì)師(←₹>shī)們都(dōu)喜歡做(zuò)英文(wén)的(de)排♣✔λ↑版，為(wèi)什(shén)麽？從(cóng)∏×£視(shì)覺上(shàng)來(lái)看(kàn≤←↕)，英文(wén)的(de)組合很(hěn)容易★σ 形成線和(hé)面的(de)關系，而且字§≥母有(yǒu)節奏感，比如(rú)aby這(zhè)三個(gè)字母放(γ<‍fàng)一(yī)起有(yǒu)高(gāo)矮區(qε ū)别。中文(wén)字相(xiàng)對♠±‍(duì)來(lái)說(shuō)，單 ≈調、孤立、不(bù)流暢。回到(dào)網站(zhàn)中文(wén)字的(dε©e)設計(jì)，設計(jì)師(shī)基本上(shàng)不(bù)用δ​☆↕(yòng)考慮在字體(tǐ)上(shàng)做(zuò)選擇→↕π€，隻有(yǒu)宋體(tǐ)。前文(wén)說(shuō)：單個(gè)字成點≈₹，一(yī)行(xíng)字成線，一(yī)段字成面​∑。這(zhè)是(shì)版式設計(jì)最基本的¶γπ(de)原理(lǐ)，我們需要(yào)做(zu→>≤•ò)的(de)就(jiù)是(shì)強化(huà)這(zhè)樣的(de)感β∏>​覺。

　　網站(zhàn)建設字體(tǐ)有(yǒu)很(h ₽≠ěn)多(duō)，拿(ná)微(wēi)軟雅黑(hēi)和(hé)宋®‌體(tǐ)來(lái)舉例子(zǐ)，本人(rén)非常喜歡微(wēi)軟σ ☆★雅黑(hēi)的(de)設計(jì)。将12号的×≥<×(de)宋體(tǐ)和(hé)雅黑(hēi)放(fàng)大(dà)♠γ©≤，注意以下(xià)細節：

　　1、雅黑(hēi)要(yào)比宋體(tǐ)寬一(yī)∑×像素

　　2、雅黑(hēi)讓每個(gè)筆(bǐ)畫Ω£Ω(huà)往四周撐，比如(rú)“是(shì)”上(s∏α★hàng)面的(de)“日( €​'rì)”，雅黑(hēi)顯得(de)就(jiù)™≤ ∏要(yào)飽滿這(zhè)麽做(zuò)的(de)目的(de)隻有​↔₹(yǒu)一(yī)個(gè)，讓中文(wén)≥>字體(tǐ)更容易形成線，從(cóng)而讀(dúα☆)起來(lái)更流暢。我們可(kě)以看(kànΩ♣)到(dào)，盡管雅黑(hēi)不(bù)是(shì)真±δ正的(de)正方形，但(dàn)它看(kàn)起來(lái)要(yào)>≤δ​比宋體(tǐ)方一(yī)些(xiē)。看(kàn)完上(shàng£±)面這(zhè)個(gè)例子(zǐ)，我的(de)觀點也(yě)就(jiù↕★ ©)出來(lái)了(le)：别把你(nǐ)的(¶​•de)文(wén)字看(kàn)成字，而是(shì)看(kàn)成點，文(↑≤₩♥wén)字的(de)視(shì)覺設計(♠↑₩πjì)其實就(jiù)是(shì)處理(lǐ)點線面的(de)關系。

　　下(xià)面是(shì)具體(tǐ)設計(jì)方面的(de)點： ¶↑♥

　　1、字體(tǐ)的(de)單位用(yòng)px而不(b↕φ€ù)用(yòng)em，盡管12px和(hé)0.8em大(dà)小(x₹σiǎo)差不(bù)多(duō)。這(zhè)點寫之前是(shì)我想♠♣•∑當然了(le)，沒有(yǒu)深入理(lǐ)解em單位。隻看(kàn)到(dà₩♦¥‌o)很(hěn)多(duō)用(yòng)em的(de)視(shì)±π≥覺效果不(bù)好(hǎo)看(kàn)，&¥✔<現(xiàn)在明(míng)白(bái)了(le)，是(shì)因為(wè↔↔i)沒有(yǒu)把em單位和(hé)px對($↕¶∏duì)上(shàng)号。結論是(shì)應該¶α±→用(yòng)em而不(bù)是(shì)px，但☆σ•‍(dàn)需要(yào)把em的(de)值設置好(hǎo)。

　　2、在css文(wén)件(jiàn)body中的(de)font- <family裡(lǐ)面保證“宋體(tǐ)”前₩₹≠✘面有(yǒu)Arial或者verdana，個(gè)人(rén)推薦ε≤這(zhè)麽寫：

　　font-family:Helvetica,Georgia,Ar©‌ial,sans-serif，宋體(tǐ)。這≈₽​®(zhè)樣能(néng)保證你(nǐ)界∏©₽面中的(de)字母、數(shù)字、符号看↓≈λ≤(kàn)上(shàng)去(qù)美(měi)觀一(yī)些(xiē)，更≤♠ε 重要(yào)的(de)是(shì)更加易讀(dú)。

　　3、12号宋體(tǐ)時(shí)α↔®，我們一(yī)般使用(yòng)18-20像素的(d✘βe)行(xíng)距。14号宋體(tǐ)通(tōng)常使用(yòng)2♥₹2-24像素的(de)行(xíng)距。很(hěn)贊同，這(zhè)☆α‌π個(gè)行(xíng)距大(dà)小(xiǎo)φ★随著(zhe)單行(xíng)字數(shù)的(de)β₹多(duō)少(shǎo)而上(shàng)下(xià)浮動。我認為(wè∏£i)12px字如(rú)果單行(xíng)字數(shù)δ₹Ω少(shǎo)的(de)話(huà)，17也(yě)是(£ ♣shì)可(kě)以接受的(de)。

　　4、正文(wén)一(yī)行(xíng)字數∞≤₽ε(shù)最好(hǎo)不(bù)超過50，首頁的(de)标題文(wén)字σ↓♣★以8-20字為(wèi)佳。

　　5、12和(hé)14px字相(xiàn€₹₹g)對(duì)來(lái)說(shuō)最精緻，13px在需要(yào)的(δ™de)時(shí)候可(kě)以做(zuò)正文(wén)字÷↑₹™，word裡(lǐ)面默認的(de)字的(de)大(dà)小♠∏(xiǎo)相(xiàng)當于網頁的(de)13p≈♠σx字。

　　6、對(duì)于一(yī)段文(wén)字，☆¶ε尤其是(shì)正文(wén)部分(fēn)，保證左右至少(shǎo←"•)有(yǒu)15px的(de)留白(bái)，便于用>♥(yòng)戶換行(xíng)時(shí)不(bλ ×Ωù)受到(dào)幹擾。

　　7、文(wén)字和(hé)背景對(duì)比要(yào)足夠明σ÷∞(míng)顯，保證最弱文(wén)字的(de)可(kě)讀(dú)∑¶↕性。