藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專(zhuān)注而深入的界面設(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è)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源：http://www.woshipm.com/pd/280.html

 如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

一．雅黑設(shè)計(jì)理念

雅黑字體是為微軟公司設(shè)計(jì)的屏幕顯示漢字。它具有個(gè)性獨(dú)特、結(jié)體優(yōu)美、識(shí)別性強(qiáng)、塊狀效果好、顯示清晰等優(yōu)點(diǎn)。在當(dāng)今數(shù)字化時(shí)代更是用途廣泛。這副字可以說(shuō)是科技進(jìn)步的產(chǎn)物，是人類(lèi)社會(huì)的需要，在設(shè)計(jì)上也有所突破。

首先打破傳統(tǒng)結(jié)體方式，采用大字面設(shè)計(jì)，字懷放開(kāi)，增大內(nèi)白，使文字方正，布白勻稱(chēng)。由于字體中宮放開(kāi)，使文字的適用性也隨之增強(qiáng)，不但適合小級(jí)數(shù)文字的使用，更適合屏幕顯示。

在筆型塑造上去除“喇叭頭”。為防止文字筆劃缺乏美感、沒(méi)有精神，在撇、捺、點(diǎn)、勾的處理上使其粗細(xì)有略微的變化，使之富有彈性。

在制作上，力求精良，筆劃間盡可能少搭筆，使文字清新、爽朗、易讀。

追求字體的整體形式美，強(qiáng)調(diào)文字設(shè)計(jì)的審美性和文化性，樸實(shí)大方，典雅端莊。

下面從字體設(shè)計(jì)理論方面與實(shí)際字體應(yīng)用的角度來(lái)闡述一下雅黑是用什么方法和字體設(shè)計(jì)技巧來(lái)完成和完善設(shè)計(jì)目標(biāo)的。

二．按用途來(lái)設(shè)計(jì)字體

1．字體設(shè)計(jì)類(lèi)型

字體設(shè)計(jì)可細(xì)分為平面美術(shù)字體設(shè)計(jì)和印刷“活字”設(shè)計(jì)。在這所要談的字體設(shè)計(jì)是指在印刷“活字”范疇內(nèi)的字體設(shè)計(jì)，主要研究字在縮小后的清晰 度、可讀性以及整體效果。在字型的處理上它不能象美術(shù)字和書(shū)法字那樣，可以無(wú)視大小地盡情抒發(fā)情感，而要受到一定規(guī)矩的約束，講究共性和個(gè)性的關(guān)系，來(lái)達(dá) 到一種機(jī)械的美觀。這種設(shè)計(jì)也是一門(mén)比較冷僻的視覺(jué)藝術(shù)。近年來(lái)，隨著科學(xué)技術(shù)的不斷發(fā)展，印刷“活字”設(shè)計(jì)又可分為出版印刷用字設(shè)計(jì)和屏幕顯示用字設(shè)計(jì) 這兩個(gè)大類(lèi)。

雅黑是屬于屏幕顯示用字，設(shè)計(jì)時(shí)更要注重研究字在低分辨率下的清晰度和可讀性，盡可能做到小字號(hào)顯示時(shí)的清晰易讀，要達(dá)到這一目標(biāo)，關(guān)鍵在于設(shè)定字面大小、筆型塑造和嚴(yán)謹(jǐn)合理的結(jié)構(gòu)處理……。

2．字面大小的含義

我們有必要先來(lái)搞清楚兩個(gè)不同的概念：“字面大小和字身字面比”。字體設(shè)計(jì)專(zhuān)用方格都有兩個(gè)方框，外框稱(chēng)字身框，內(nèi)框稱(chēng)字面框。

圖1

字面大?。骸熬褪窃谧置婵虿蛔兊那闆r下，可以把字設(shè)計(jì)成大小不同的字，大字稱(chēng)字面大，小字稱(chēng)字面小?！?/p>

圖2

字身框和字面框之間的距離就是半個(gè)自然字距。能正確地運(yùn)用好他們之間的關(guān)系，是字體設(shè)計(jì)的基礎(chǔ)。

字身字面比：“簡(jiǎn)單說(shuō)就是在字身框不變的情況下，兩者之間的百分比值，比值大字就大，比值小字就小，說(shuō)白了就是把字放大和縮小?！?

圖3

現(xiàn)在有許多用戶，為了能擠排，圖省事，不惜把字縮小，造成字與字距之間的關(guān)系失衡。這樣使用，即使有再好的字體也排不出完美的版面來(lái)，這是非常不科學(xué)的用法，與其這樣，還不如縮小字號(hào)來(lái)用顯得完美。

3. 字面的可測(cè)量大小和視覺(jué)大小

字面大小又可分為可測(cè)量的字面大小和視覺(jué)上的字面大小。已故字體設(shè)計(jì)大師謝培元老師在1962年歸納總結(jié)的“第二中心線”理論已表明，漢字由形 聲組合的字都是可以測(cè)量的，形旁和聲旁這兩個(gè)部件的中心距離越大，字面就越大，反之，字面就越小，我們只要測(cè)量這兩個(gè)部件的中心距離就可以得到相應(yīng)的字面 大小值。同時(shí)，這也是控制整副字大小的有效工具。

圖4

雅黑在保持文字個(gè)性的基礎(chǔ)上，盡可能的擴(kuò)大形聲這兩個(gè)部件的中心距離來(lái)增大字面。同時(shí)，運(yùn)用這種方法使得80%以上的字，大小保持一致。對(duì)于那些不能測(cè)量的字和一些易見(jiàn)小的字，雅黑又是如何處理呢？

從幾何形角度來(lái)看，漢字形狀眾多，最典型的可分為四種類(lèi)型：“方形、圓形、三角形和菱形”，從面積上看方形最大，菱形最小，要想把圖形面積變得一樣大小，就必須按菱形大小走，這樣設(shè)計(jì)出的漢字才能在視覺(jué)上保持一致。

圖5

要想做大字面的字，我們首先要考慮面積最小的菱形，那么，怎樣才能把菱形字做大？很簡(jiǎn)單，只要適當(dāng)調(diào)整改變菱形的形狀，那么，我們就能得到比原來(lái)菱形面積大的形變圖形，用這種方法來(lái)設(shè)計(jì)，就可以得到在視覺(jué)上比原先字面大的字。

圖6

雅黑在設(shè)計(jì)初期就是用視覺(jué)大小這種方法來(lái)定字面大小的。

4. 字面大小和屏幕顯示的關(guān)系

字面大小和屏幕顯示又有什么關(guān)系呢？ 為了說(shuō)明問(wèn)題，用少點(diǎn)陣圖來(lái)比較說(shuō)明。

圖7

從上面兩圖比較中我們可以看出，左圖字面大，占像素多，內(nèi)白均勻舒適、清晰易讀。右圖字面小，占像素少，因此，內(nèi)白不勻稱(chēng)、識(shí)讀效果變差。

雅黑設(shè)計(jì)時(shí)考慮到這一因素，不但采用大字面設(shè)計(jì)，同時(shí)，在字距較合理的范圍內(nèi)調(diào)大了字身字面，多爭(zhēng)取到了每一點(diǎn)寶貴的像素，為小字號(hào)使用的清晰易讀奠定了基礎(chǔ)。

5. 去掉影響屏幕顯示效果的“喇叭”口

現(xiàn)用黑體字的筆鋒過(guò)大，成喇叭狀，我們戲稱(chēng)為“喇叭頭”或“喇叭口”。傳統(tǒng)手寫(xiě)的黑體本應(yīng)沒(méi)有這么大的“喇叭頭”，只稍微有點(diǎn)筆鋒。那么，這 “喇叭頭”又是從何而來(lái)？有兩個(gè)原因，第一，可能是個(gè)別寫(xiě)字人員認(rèn)為喇叭口稍大些精神，故意寫(xiě)大些，第二，在把照相字模版的字翻制成電腦字庫(kù)時(shí)，做字人員 在不明白黑體字應(yīng)有筆型的情況下，把原本制作照相字模版時(shí)，為防止在拍照縮小的過(guò)程中筆劃變得虛弱、變圓走型而裝上的“小辮”給融進(jìn)了筆劃，形成現(xiàn)在這樣 的“喇叭口”。

圖8

過(guò)大的喇叭頭，不但失去了黑體字應(yīng)有的品格，在屏顯時(shí)，“喇叭頭”能在筆劃兩頭多出一塊，如果兩筆離得較近，頭就有可能連上，使筆劃交代不清，可讀性變差。

圖9

雅黑屬無(wú)裝飾風(fēng)格的字體，少了不必要的累贅，自然避免了這類(lèi)問(wèn)題的出現(xiàn)，使文字清晰易讀。

三．雅黑設(shè)計(jì)中的要點(diǎn)

1．雅黑是根據(jù)我在90年代初期設(shè)計(jì)的黑體系列樣張改進(jìn)設(shè)計(jì)的。

圖10

從上述樣張中可以看出，字體符合屏顯字體的基本要求，字面大，無(wú)“喇叭頭”，屬無(wú)裝飾風(fēng)格的字體，可以作為雅黑的設(shè)計(jì)基礎(chǔ)來(lái)改進(jìn)提高。

2．雅黑設(shè)計(jì)上主要改進(jìn)了字的粗細(xì)，“鉤”的僵硬和“八”字點(diǎn)的寫(xiě)法，使其符合規(guī)范要求。同時(shí)，更注重線條的刻畫(huà)，使其柔和挺拔富有彈性。

圖11  部分筆劃筆型圖

3．為了使正文字的閱讀效果更好，對(duì)所有的口和帶框的部件加“腳”，也就是口下面出頭，其目的是為了給眼睛以適量的刺激，來(lái)提高閱讀速度，這是正文用雅黑設(shè)計(jì)的一次新嘗試。

圖12  口和帶框的部件加“腳”

4. 為適合屏幕顯示用，在字結(jié)構(gòu)的處理上“計(jì)白當(dāng)黑”，嚴(yán)格控制“白”在各部位所占的比例，使其舒朗勻稱(chēng)。

圖13  黑白處理示意圖

這種處理方式不但使字穩(wěn)重大方，而且使字撇捺舒展、飄逸瀟灑、富有姿態(tài)。

5. 采用獨(dú)創(chuàng)的手法對(duì)筆劃進(jìn)行特殊處理，減少交錯(cuò)連筆處的黑度，使字的整體灰度更好，更清晰，更適合屏顯。

圖14  特殊筆劃處理示意圖

6．避免筆劃交代不清，粘連過(guò)多

圖15

這些字筆劃交代不清，粘連過(guò)多，既降低了識(shí)、讀的速度，又有錯(cuò)字嫌疑 。雅黑在設(shè)計(jì)時(shí)就盡量避免這種問(wèn)題的發(fā)生。

圖16

四．筆劃粗細(xì)與結(jié)構(gòu)、留白、重心之間的關(guān)系

這是活字設(shè)計(jì)中的一個(gè)綜合問(wèn)題，并非一朝一夕就能掌握的，它不但對(duì)字的個(gè)性要有深刻的理解，而且還要具有非常敏銳的觀察力。做字的過(guò)程其實(shí)就是練眼的過(guò)程，眼睛練“兇”了，字自然越做越好。

下面通過(guò)調(diào)整統(tǒng)一字體的粗細(xì)，來(lái)了解筆劃粗細(xì)與結(jié)構(gòu)、留白、重心之間的關(guān)系。為了更好的說(shuō)明問(wèn)題，便于理解，選用多筆劃和少筆劃的粗體字為例。

圖17

1 調(diào)整字的粗細(xì)，使之成為一個(gè)整體

這兩個(gè)字一粗一細(xì)，視覺(jué)上看是兩款字，粗細(xì)調(diào)整不當(dāng)。首先，把細(xì)的“體”字加粗，使兩個(gè)字的視覺(jué)粗細(xì)一致。

圖18

2 字的內(nèi)白影響字的重心

“體”字在加粗后，雖然在粗細(xì)上合適了，但是，看著還不舒服，仔細(xì)分析一下原因，問(wèn)題在于內(nèi)白，各部件的重心位置欠妥，骨字重心偏高，曲、豆重心偏低，使得互相間的呼應(yīng)性、協(xié)調(diào)力變差。那么，我們只要調(diào)整“體”字的內(nèi)白，改變重心位置就行。

圖19

3 調(diào)整字的局部粗細(xì)來(lái)改善字的結(jié)構(gòu)，提高字的品位

現(xiàn)在我們來(lái)調(diào)整“粗”字，先分析一下粗字的那些地方需要改進(jìn)，米字過(guò)大過(guò)黑，形象欠佳并壓迫且字，從而使結(jié)合部太緊，整字見(jiàn)窄。改進(jìn)的方法是： 縮小米字，放大且字，減細(xì)米字上方的八字點(diǎn)，改善橫眉豎眼的“兇”相并使點(diǎn)見(jiàn)長(zhǎng)，加長(zhǎng)撇梢，使其舒展，分清下點(diǎn)使其交代清楚。通過(guò)這些調(diào)整，粗字變得面貌 一新，提高了品位。

圖20

“粗體”兩字通過(guò)調(diào)整粗細(xì)、內(nèi)白，改變重心與結(jié)構(gòu)，使“粗體”兩字變得更完美。

圖21

從上面的幾次調(diào)整中可以看出，筆劃粗細(xì)與結(jié)構(gòu)、留白、重心之間是相互相成的關(guān)系，是一個(gè)不可分割的整體，只要協(xié)調(diào)好它們之間的關(guān)系，就能提升字的品格，并有良好的排版效果。

雅黑在設(shè)計(jì)制作過(guò)程中就是運(yùn)用這種設(shè)計(jì)技巧使字既有品位，又整齊劃一，灰度良好。

五．文字的形象、表情與氣質(zhì)

筆型是構(gòu)成文字筆畫(huà)、風(fēng)格的基本元素，筆畫(huà)制作的完成度會(huì)影響到成字后字的品質(zhì)，而字的結(jié)構(gòu)就好比人體的比例、五官的位置，它直接能體現(xiàn)文字的 形象、表情與氣質(zhì)。因此，對(duì)于字體設(shè)計(jì)制作來(lái)說(shuō)，每一環(huán)節(jié)都是至關(guān)重要的。我們?cè)O(shè)計(jì)黑體字，要表達(dá)出黑體字本身具有的莊重、典雅的特性，就必須先把筆劃做 好，把字寫(xiě)端正。

圖22

從上面這些字我們可以看到，這些字就沒(méi)有寫(xiě)端正，筆劃生硬，制作粗糙，部件之間的位置安排欠妥。大頭小頭縮頭，重心有高有低，結(jié)構(gòu)松散，整體形象不好，給人以不整齊、不穩(wěn)重的印象，缺乏正氣感。下面雅黑的感覺(jué)就比較整齊舒適。

圖23

我們?cè)賮?lái)具體的對(duì)比分析一些字的常見(jiàn)病例。

1. 筆劃僵硬，制作粗糙，嚴(yán)重影響字的品質(zhì)。

圖24

2. 撇捺不舒展，使字失去應(yīng)有的姿態(tài)。

圖25

3. 縮頭

圖26

點(diǎn)劃的頭已伸不出去，還要斜，既不美觀，又破壞形象。在頭見(jiàn)短，伸不出去的情況下，還是做的稍平些比較妥當(dāng)，頭也長(zhǎng)了，字也顯得正氣。

圖27

4. 短腿

圖28

節(jié)、帝兩字下半部的外框做的太長(zhǎng)，使主筆中豎見(jiàn)短，就象人的兩只手長(zhǎng)到腳背上，比例失調(diào)。

圖29

5. 鉤短

圖30

鉤短，有鉤不出的感覺(jué)，使字顯得拘謹(jǐn)、局促、小氣，缺乏氣度。

圖31

我們常說(shuō)的一句話：“字的姿態(tài)要像仙鶴的舞姿，引項(xiàng)高歌”，也就是說(shuō)要想把字做得正氣漂亮，必須“有頭有腳有腰身，撇捺舒展有姿態(tài)”。

一個(gè)字的含義，并不一定只有字典上的意義，而有感情上的另一種心理感覺(jué)，他不但有表情，而且能直觀地體現(xiàn)出字本身的氣質(zhì)來(lái)。

例一

圖32

這些字東倒西歪，毫無(wú)莊嚴(yán)的正氣感。

圖33

主要問(wèn)題出在字的結(jié)構(gòu)和重心上，給人的感覺(jué)是：自卑，沒(méi)自信，唯命是從，低頭哈腰，沒(méi)有高雅莊嚴(yán)的氣度，它的潛臺(tái)詞是：“叔叔阿姨行行好”。

圖34

例二

圖35

八字點(diǎn)猶如人的雙眼，富有表情，不同的角度、形狀都能使人產(chǎn)生不同的聯(lián)想。上面這些字的問(wèn)題在于八字點(diǎn)上，有的內(nèi)八字點(diǎn)變成外八字點(diǎn)，有的過(guò)大過(guò)小，像人倒掛著雙眼，呆滯的眼神，帶有悲苦哀傷的表情，沒(méi)有朝氣……。

圖36

例三

圖37

走之底腳短且軟弱，向左傾斜，就像建房時(shí)地基沒(méi)打好，不堪重負(fù)，搖搖欲墜。同時(shí)，也像一個(gè)人沒(méi)有肩負(fù)重任，獨(dú)自擎天的氣概。

圖38

從上面所舉的這些例子中我們可以看出，字要設(shè)計(jì)得既莊重高雅，又有豪華富貴的氣質(zhì)，是最難能可貴的。雅黑在設(shè)計(jì)時(shí)就注重字的內(nèi)涵，對(duì)文字的表情與氣質(zhì)進(jìn)行了研究。>

六．雅黑最初的設(shè)計(jì)樣張

圖39  雅黑細(xì)體

圖40  雅黑粗體

文字既是一個(gè)文明傳承的載體，又代表了中國(guó)人的審美觀。 因此，我們?cè)谠O(shè)計(jì)時(shí)嚴(yán)格地把好每一關(guān)，盡最大的努力做好每一個(gè)字，追求字體的整體形式美，力求表現(xiàn)出對(duì)比、和諧、均衡、韻律等藝術(shù)特征。強(qiáng)調(diào)文字設(shè)計(jì)的審美性和文化性，真正做到給讀者以關(guān)愛(ài)。

附：雅黑是屏顯專(zhuān)用字體，用于印刷還有缺陷，我們經(jīng)過(guò)精心修整，并逐步擴(kuò)充其系列字體的款數(shù)，現(xiàn)已有多款字體上市，方便用戶使用。衷心希望用戶能把意見(jiàn)反饋給我們，讓我們把字做得更好。

蘭亭黑系列字體設(shè)計(jì)樣張