網(wǎng)頁設(shè)計(jì)中圖形設(shè)計(jì)生成總結(jié)

為什么需要矢量的圖形解決方案？

　　故事的開始，主要是從移動平臺的完全崛起說起。

　　大概是在iphone4熱賣開始，移動平臺就開始備受關(guān)注，iphone4的視網(wǎng)膜屏幕讓人眼前一亮，也就此正式打開了多平臺的故事。因?yàn)檫h(yuǎn)遠(yuǎn)高于原先的顯示設(shè)備，使得iphone4能顯示更多的內(nèi)容，也能顯示更清晰的圖形(智能手機(jī)屏幕分辨率普遍高于個人電腦)，然而最直接的影響就是使得位圖收到了挑戰(zhàn)。因?yàn)楝F(xiàn)在圖形呈現(xiàn)在設(shè)備上很有可能將不是一個物理像素點(diǎn)對應(yīng)一個px，他有可能是一個物理像素點(diǎn)對應(yīng)幾個px，也可能是幾個物理像素點(diǎn)對應(yīng)一個px。所以像素點(diǎn)的問題在這種情況下被一次次的放大。

　　?如圖 放大后位圖圖形就失真了，但是字體相對還是清晰的

　　而矢量圖形卻不會出現(xiàn)放大縮小后失真的問題，這就是為什么矢量圖形在現(xiàn)在多平臺的情況下被越來越多利用的一個原因。

　　矢量的解決方案有哪些，為什么會選擇圖標(biāo)字體作為解決方案？

　　就現(xiàn)在使用的比較廣泛的矢量圖形格式，除了用代碼在頁面上畫圈圈這一解決方法外，用的比較多的就是頁面上的字體和svg圖形兩種解決方案。

　　先來說說svg吧。

　　svg(Scalable Vector Graphics)是一種古老的技術(shù)(不過字體應(yīng)該更古老)，字面理解為可縮放矢量圖形，是一種基于xml的圖形，所以也可以理解為是開發(fā)者通過代碼繪制的圖形，所以他不受分辨率影響(沒有馬賽克)。值得一提的是svg可以制作交互響應(yīng)的動畫，其功能與flash相似，并且現(xiàn)在的html5都內(nèi)聯(lián)svg文件，可惜的是在移動平臺鼠標(biāo)響應(yīng)事件可能不能被瀏覽器本地化處理，當(dāng)然這是后話。

　　svg的圖像

　　矢量字體，當(dāng)然不必多說，和svg同是矢量圖形，網(wǎng)頁上有文字的地方你就能看到。個人覺得矢量字體最強(qiáng)大的地方就是驚人的承載量。不管你頁面上有多少字，都能輕松加載，當(dāng)然這得益于字體獨(dú)有的編碼管理模式。并且所有的瀏覽器都支持(不支持的話就真的是看毛了)，區(qū)別是是否支持自定義字體。

　　iconfont的圖形字體

　　同是矢量圖形，讓我們來看看兩者的共同之處。

　　1、都可以由ai編輯。這對設(shè)計(jì)師來說是一個很好的消息，作為矢量圖形的霸者，對矢量圖形的處理支持還是比較全面的。

　　2、同不受分辨率限制。怎樣放大縮小都沒有影響。

　　再來比較下兩者的優(yōu)劣。

　　還是先說下svg。

　　優(yōu)點(diǎn)

　　1、最大的優(yōu)勢應(yīng)該就是對于圖形的處理了。svg的圖形縮放和呈現(xiàn)都不會出現(xiàn)“變形的問題”，不會出現(xiàn)邊緣的不順滑，或者說是比較明顯的毛邊。

　　2、可以承載復(fù)雜的圖形。svg應(yīng)該是支持到了大部分的效果，光一個圖形中可以用幾種顏色和漸變，各種效果都可以加上去，但是請小心他的體積。

　　3、容易入手。繪制圖形相對比較簡單，也比較容易修改和生成。

　　劣勢

　　1、 不易管理。這意味著不太容易集中管理，可不要小看這一個特點(diǎn)，在生成和管理中會損耗很多的資源。

　　2、文件為單獨(dú)文件。因?yàn)閟vg文件為單一文件，在頁面的調(diào)用和管理上存在很大缺陷。如果一個頁面上有很多圖形，那很有可能會多次請求，不利于頁面加載。

　　3、交互部分一般設(shè)計(jì)師無法獨(dú)立完成。這是因?yàn)閟vg基于xml的原因，他的交互部分是標(biāo)記語言實(shí)現(xiàn)的?，F(xiàn)行沒有十分強(qiáng)大的界面編輯器，所以交互部分可能還是得依靠開發(fā)者。

　　4、IE6不支持。這個是在中國的硬傷了，不解釋。

　　再說下字體的優(yōu)劣

　　優(yōu)點(diǎn)

　　1、管理方便。字體是基于Unicode編碼，每一個字都有獨(dú)特的編碼，整個字體是一個文件，需要時只要調(diào)用編碼，文件是同一個，也方便修改更新和查看。

　　2、頁面承載能力強(qiáng)。和一個頁面幾百個幾千個文字一個原理，對頁面的承載能力非常強(qiáng)。

　　3、自定義效果。雖然文字的樣式有限，但是通過添加各種樣式依舊能達(dá)到一定效果，比如換色，換背景。

　　缺點(diǎn)

　　1、各個瀏覽器和平臺上效果不一。這是一個非常惱人的地方，查看下pc和mac下字體的區(qū)別就知道了(ps：windows下14-12的宋體是特殊處理過的，不在考慮范圍)。主要在于邊緣的渲染處理上。詳細(xì)內(nèi)容在后期的設(shè)計(jì)中會有對比說明。

　　2、圖形表現(xiàn)單一。只能創(chuàng)建一個對象，一個對象只有一種顏色(默認(rèn))。

　　由此可見，兩者的優(yōu)劣都很明顯。最后我們選擇了字體圖形的解決方案，我們是出于這樣的考慮：

　　1、全面支持IE6。我們的用戶仍然有相當(dāng)一部分沉迷于IE6，這使得很多領(lǐng)域難展拳腳，而字體能夠兼容IE6。

　　2、管理維護(hù)成本低。因?yàn)樽煮w的特殊性，使得管理起來非常簡單，因?yàn)閳D形的維護(hù)是經(jīng)常發(fā)生的事，通過開發(fā)搭建起來的整個體系，能讓人幾乎感覺不到維護(hù)的壓力。統(tǒng)一的管理也能防止圖標(biāo)碎片化。

　　3、在移動平臺上基本不存在像素點(diǎn)問題。一般設(shè)備分辨率都高于電腦，尤其視網(wǎng)膜屏幕更加，實(shí)際使用中其圖標(biāo)的物理大小往往都超過16個像素，甚至超過30個像素。

　　4、不需要花哨的圖標(biāo)。這是我們的圖標(biāo)風(fēng)格所確定的，其中也是為了適應(yīng)性，所以相對形狀比較重要。

　　5、自定義樣式。主要是能夠定義圖標(biāo)顏色，這在使用中會經(jīng)常被更改以適應(yīng)當(dāng)前場景，支持的內(nèi)容根據(jù)樣式來定。

　　設(shè)計(jì)

　　?

　　了解了技術(shù)背景，我們就開始組織設(shè)計(jì)圖標(biāo)。

　　現(xiàn)在各平臺多樣化的同時，各大公司也努力的在做平臺的統(tǒng)一化，并逐漸成為主流。平臺統(tǒng)一成為主流的原因在于多樣化不利于統(tǒng)一的品牌形象，相對資源消耗也比較大，不利于后期發(fā)展。這次的圖標(biāo)設(shè)計(jì)，也將以這主流思想為核心。

　　設(shè)計(jì)準(zhǔn)備

　　由于設(shè)計(jì)將在各個平臺產(chǎn)品中使用，各個產(chǎn)品線的設(shè)計(jì)統(tǒng)一就成為基礎(chǔ)。我們不能像原來一樣自產(chǎn)自銷，而是需要做一樣的東西，給所有的人使用。由于生活化概念的不斷引入，一淘各產(chǎn)品線都趨于走生活化的路線，所以生活化理所當(dāng)然成為這次圖標(biāo)設(shè)計(jì)的一個核心理念，那是一種親近，一種隨和，一種人性。我們打算在這次的設(shè)計(jì)中通過形狀的造型要素，把情感融入圖標(biāo)設(shè)計(jì)中。在大理念的前提下，更細(xì)化了其中的設(shè)計(jì)方向，比如我們的圖標(biāo)是飽滿的，有親和力的，自然柔和的，表達(dá)有力的，他不是尖銳的，復(fù)雜的，也不是生硬寫實(shí)的，也不會是表達(dá)模糊的存在。

　　我們的風(fēng)格上，力求給人平和，飽滿的感觸，生動而又清晰。我們也有很多的禁區(qū)，不能讓她變成模糊而表意不清。

　　增加點(diǎn)擊感和工整度。蘋果的圖標(biāo)會成為一個個帶小圓角的矩形的另一個原因是這樣的形式會帶來強(qiáng)烈的點(diǎn)擊感，就如現(xiàn)實(shí)中的按鈕，自帶的高光還把整個形體加以突出，更像是一個微微凸起的小按鈕了。當(dāng)然不是說我們的標(biāo)也是這樣，只是我們在設(shè)計(jì)的時候會需要注意到圖標(biāo)在移動平臺的運(yùn)用，增加點(diǎn)擊感，形體更簡單(為了符合高清屏幕的細(xì)節(jié)統(tǒng)一，同時也便于擴(kuò)展)，色塊飽滿。

　　經(jīng)過討論確定了我們的圖標(biāo)設(shè)計(jì)錐形，于是我們開始一個個落實(shí)了下去，兵分三路，定時對設(shè)計(jì)進(jìn)行匯總。

　　黃金比例

　　在設(shè)計(jì)中，比例主要參考了黃金比例，即黃金分割。黃金分割一直是自然界一非常神奇的分割比例，他把萬物以一定比例劃分，形成傳說中的最優(yōu)比例?，F(xiàn)實(shí)中有非常多的物體都遵循黃金比例，這一比例不僅用在長度，還用在面積，體積，顏色，透明等一系列固有屬性中。

　　常用希臘字母

　　表示黃金比值，用代數(shù)式表達(dá)就是：

　　上圖為黃金比例的示意圖

　　當(dāng)然這些是一些枯燥的理論，在現(xiàn)實(shí)使用中沒有辦法完全硬搬這一理論。雖然在矢量的基礎(chǔ)上可以豪放的使用大小比例來突出最優(yōu)效果，在其他很多的設(shè)計(jì)中仍然在比例上有上下的波動。一般的范圍在0.6-0.63之間。但是在使用黃金分割之前還有一個嚴(yán)肅的問題，就是關(guān)于字體，矢量 – 位圖 的輸出問題。

　　首先我來解釋一下這個情況。眾所周知，字體在頁面渲染中是以矢量的形式渲染出來的，也就是說，當(dāng)你的頁面放大的時候，圖片會出現(xiàn)馬賽克，但是字體仍然清晰，當(dāng)然前提是他真的是文字。

　　這個門字就是類似AI路徑一般的矢量圖形，但是我們不要高興的太早，別忘了我們圖標(biāo)的使用通常大小是16px甚至更低(比如原先廣告的圖標(biāo)最小標(biāo)準(zhǔn)為12px)，我們?nèi)庋劭吹降膱D像仍然是由像素點(diǎn)平湊成的字體。如下圖為直接放大的渲染字體，可以看到渲染后仍然是各種像素點(diǎn)，那圖標(biāo)也會面臨一樣的問題—在一定大小下的清晰度問題。

　　所以最后我們聚在一起，然后經(jīng)過小的討論，決定使用16px的大小作為新圖標(biāo)的大小規(guī)范標(biāo)準(zhǔn)，統(tǒng)一全平臺的圖標(biāo)最小使用規(guī)范。所以最小的圖標(biāo)使用就以16px為基準(zhǔn)設(shè)計(jì)。

　　好吧，其實(shí)我想說的是黃金比例，有點(diǎn)扯遠(yuǎn)了，讓我們拉回來。

　　因?yàn)?6個像素點(diǎn)的限制，掐指一算，分割的一般像素點(diǎn)就是5和8，這樣的比例正好符合?？雌饋硪粋€很直接的比值，在實(shí)際運(yùn)用中就會顯得有些呆板，因?yàn)樗烙眠@種比例不符合生活化的理念(除非你看到的東西都是一樣的比例)，雖然這難免有些誘人。但是我們還是在設(shè)計(jì)中參考了這一傳說中的比值。

　　黃金分割已儼然不是傳說，運(yùn)用上主要有分割比和體積比，以及長度比值。在使用中長度比值會更多一些，因?yàn)榉指罹€往往也有自己的寬度，通常為一個像素。

　　除黃金比外，在設(shè)計(jì)上還爭取飽滿填充的原則，讓圖標(biāo)變得飽滿，增加生活感，讓圖標(biāo)變得更加有點(diǎn)擊感，而且這一原則讓圖標(biāo)變得更加融合移動設(shè)備的操作上。前面說到蘋果圖標(biāo)有固定的外形框架，更加增加了點(diǎn)擊的趕腳，其實(shí)我們的圖標(biāo)也是類似的原理。尤其在一些接近塊面的圖標(biāo)上顯得更加突出，往往纖細(xì)的結(jié)構(gòu)更適合展示或者指示用。當(dāng)然，圖標(biāo)的使用上沒有太過框架的規(guī)范，在使用中增加外框也是合理的，這看設(shè)計(jì)的場景。

　　矢量還原到位圖

　　一陣忙碌之后就有一部分圖標(biāo)已經(jīng)設(shè)計(jì)出來，當(dāng)然大家都是抽空完成的，非常的辛苦。第一次的匯總也有很多的問題出現(xiàn)，比如設(shè)計(jì)的細(xì)節(jié)調(diào)整，設(shè)計(jì)風(fēng)格迥異，關(guān)于這一點(diǎn)，我們實(shí)習(xí)三人行必有我?guī)煹脑瓌t，由一設(shè)計(jì)師審核主導(dǎo)和把控設(shè)計(jì)風(fēng)格，以防止設(shè)計(jì)迷失。然后開始把修訂過的圖標(biāo)開始生產(chǎn)字體文件，開始往線上推。

　　然后就有新的問題了，當(dāng)然這是很不愿意看到的，不過現(xiàn)實(shí)就是這么的實(shí)際，除了開始說的矢量到位圖所帶來的清晰度問題外，還有位置的偏移問題，細(xì)節(jié)展現(xiàn)問題等一系列問題,好在還沒有完全上線。

　　矢量圖形雖然從原理上來說，放大縮小沒有鋸齒，但是呈現(xiàn)在web上，仍然會被渲染成像素點(diǎn)的位圖，所以在低分辨率的情況下，圖標(biāo)的清晰問題依然出現(xiàn)，所以必須要針對16px大小的圖標(biāo)進(jìn)行優(yōu)化。因?yàn)樽煮w在web瀏覽器中的渲染有些復(fù)雜，各個渲染器渲染效果不一，從IE到safari，從pc，到mac，到ios，再到視網(wǎng)膜屏幕，各個平臺和瀏覽器表現(xiàn)效果差異較大，尤其在pc下面，部分瀏覽器還受到顯卡的影響，所以對圖標(biāo)的優(yōu)化，我們還是選擇了pc平臺，相對于mac平臺，pc上瀏覽器的渲染普遍比較“骨干”，而mac上會相對比較飽滿，這也是蘋果的渲染差異所致。所以在設(shè)計(jì)中要把矢量還原到像素，其實(shí)就是把矢量當(dāng)像素在做，在橫線，豎線對齊像素的基礎(chǔ)上，斜線，圓也要以像素為基準(zhǔn)來制作。

　　所以在渲染我們還是研究了一把，做了幾個簡單的渲染實(shí)驗(yàn)，來瞄下渲染對比吧。

　　總的來說，是在以矢量輸出并渲染為位圖的情況下，如何保持像素對齊的問題。如圖，同一個設(shè)計(jì)稿在不同平臺的渲染效果是不一樣的，因?yàn)樽煮w渲染的區(qū)別主要在于橫向上的渲染溢出，所以我做了一個簡單的測試字體。

　　在最上方的四格中，寬度分別為0.25px，0.5px，0.75px，1px。可以看出在不同環(huán)境下渲染的結(jié)果是完全不同的。首先pc端的渲染左邊有明顯的黃色邊，在達(dá)到0.75像素后，右邊開始有淺藍(lán)色的溢出，而黃色的邊在mac下并不是很明顯，但是藍(lán)色的溢出卻非常明顯?？偟目磥?，在渲染上，mac會顯得比較“豐滿”，這樣在小的間隙上，尤其是對橫向的間隙有較大的影響。兩者的渲染在縱向上都沒有什么影響，基本保持了原來的高度，沒有什么溢出。

　　總結(jié)一下在兩大平臺的渲染效果，一般情況下，pc下基本沒有差別太大，可以嚴(yán)格按照像素的位置進(jìn)行渲染，周圍略有溢出，但是問題不大。但是mac下在圖標(biāo)右邊有比較明顯的溢出。所以在設(shè)計(jì)的時候，圖標(biāo)位置可以略微左移，左移的像素基本控制在0.25px以內(nèi)。

　　這是一個基本的調(diào)整方案，但是實(shí)用與否還得看效果。上圖中左下角紅框內(nèi)為實(shí)際渲染的效果圖，右側(cè)為放大比較的圖形。這次的圖形都做了0.25像素的調(diào)整，可以看出兩種渲染結(jié)果又不一樣，這次在pc下產(chǎn)生了比較大的影響，甚至有時候會出現(xiàn)像素亂入的情況，而mac下得到了一定優(yōu)化。

　　不過話說回來，大家應(yīng)該知道m(xù)ac下渲染的圖形會比較圓潤，所以最終的結(jié)果是：我們要優(yōu)化有縱向間隙的圖標(biāo)，以爭取在mac下不會出現(xiàn)“抱團(tuán)”的效果，主要依然針對PC平臺像素優(yōu)化，這也是主要的用戶群體所決定的。

　　移動平臺由于像素密度比較高，圖標(biāo)沒有明顯的溢出(幾乎是完全沒有)，所以不存在這些問題。而且在移動上，尤其是手機(jī)，用到16px圖標(biāo)的情況比較少，因?yàn)?6px占地面積太小，也起不到指示作用，同時也難以點(diǎn)擊。

　　在新一輪的設(shè)計(jì)中不僅僅是注重了渲染效果，在原本設(shè)計(jì)稿中也更注重像素的精確問題，畢竟走好每一步才是關(guān)鍵。

　　在設(shè)計(jì)中解決像素問題。

　　在設(shè)計(jì)中經(jīng)常要對齊網(wǎng)格，因?yàn)樽杂衫L制的時候會出現(xiàn)虛邊，降低了圖標(biāo)質(zhì)量，對齊網(wǎng)格繪制可以解決圖形模糊的問題，圖標(biāo)細(xì)節(jié)精度可以達(dá)到像素級，讓設(shè)計(jì)師將精力更多的集中在創(chuàng)意表達(dá)層面，不必因?yàn)閾?dān)心模糊而謹(jǐn)慎的去操作，從而提高工作效率。

　　圖中可見定點(diǎn)占一個像素明顯會比較尖銳清晰，夾雜在兩個像素之間就會相對模糊。其次，斜線的位置也會影響清晰度，基本上斜線的位置和像素相切，圖形會略微清晰，同時，大小也回略有所別，因?yàn)樗闹艿木€位置不同，形成的體積會略有區(qū)別。所以針對不同的情況，應(yīng)選擇盡量清晰的解決方案，在保證清晰的基礎(chǔ)上，也要保持原有的形狀。

　　其他的設(shè)計(jì)細(xì)節(jié)

　　在長期的設(shè)計(jì)中，漸漸形成了一些體系，最明顯就是外圓角的半徑大小。

　　圓角：鑒于圖標(biāo)使用的場景可大可小，外圓角的大小基本維持在兩個像素，內(nèi)圓角基本是半個像素或者半個像素以內(nèi)。圖形并不采用全部的圓角，內(nèi)部原則上保留部分圓角，同時用到不少直角甚至角度更小的角。

　　線條：線條粗細(xì)中，主要線條基本維持在兩個像素，部分細(xì)節(jié)的切割會采用單像素的寬度。

　　體積：當(dāng)很多圖標(biāo)聚集在一起，或者排列在一起的時候，大小的重要性就被凸顯出來了。圖標(biāo)本身不能用強(qiáng)制的大小數(shù)據(jù)來判定大小的區(qū)別，因?yàn)椴皇撬械膱D標(biāo)都外形一致，都易于歸納形體。在幾次的總結(jié)上，大小基本總結(jié)為像素容量，即以像素點(diǎn)為單位的圖標(biāo)容量來衡量。這可以理解為像素和空白比，不過基于像素點(diǎn)更為直接。

　　和一般制作不同，圖標(biāo)字體的生成需要準(zhǔn)確的像素點(diǎn)位置，因?yàn)樵谟?jì)算位置的時候會把控制點(diǎn)以及控制桿計(jì)算在圖標(biāo)大小范圍之內(nèi)，防止出現(xiàn)位置不準(zhǔn)確的現(xiàn)象。

　　如圖，如果控制桿方向不對，會造成大小調(diào)整時大小不準(zhǔn)確，這時調(diào)整大小就需要借助輔助線，因?yàn)樯蓤D標(biāo)字體需要一個相對比較長的流程，輔助線在軟件中位置一般不夠精準(zhǔn)，在調(diào)整輔助線上浪費(fèi)比較多的時間會延長字體的制作和生成時間，消耗多余的成本，所以在制作的時候，需要解決控制桿的問題

　　如圖控制桿如果方向位置都對的話就會簡單很多，在整個大小的控制就會精確不少，對于圖形的定位就要方便很多。

　　繼續(xù)努力

　　以上是一淘ux圖標(biāo)委員會的圖標(biāo)設(shè)計(jì)經(jīng)驗(yàn)總結(jié)，這是一次工程浩大的全平臺斗爭，我們會繼續(xù)努力，解決新的問題，與新技術(shù)一起與時俱進(jìn)。

　　生成

　　在設(shè)計(jì)結(jié)束后，我們就運(yùn)用工具來實(shí)現(xiàn)我們的設(shè)計(jì)。

　　Fontlab就是一個能夠生成矢量圖形，并且在頁面中被當(dāng)做字體載入的軟件。

　　FontLab是一個專業(yè)級的字體編輯軟件，廣泛應(yīng)用于字體設(shè)計(jì)人員和排版印刷業(yè)等專業(yè)場合。它能夠?qū)σ延械淖煮w進(jìn)行修改，也可以完全按照要求重新設(shè)計(jì)需要的字體。

　　本文就基于一淘本次的圖標(biāo)字體化設(shè)計(jì)經(jīng)驗(yàn)來分享下在使用fontlab下制作圖標(biāo)字體的個人經(jīng)驗(yàn)總結(jié)，故適合使用fontlab來設(shè)計(jì)生成圖標(biāo)的同學(xué)查看參考，其中我們的設(shè)計(jì)在ai中完成，也可以用ps制作路徑，但是必須從ai中把路徑粘貼過去，字體在fontlab中生成。本文中的部分內(nèi)容會影響到設(shè)計(jì)。

　　好了，了解了字體格式的大背景和出現(xiàn)的原因，就開始下一步吧。使用fontlab來實(shí)現(xiàn)設(shè)計(jì)。

　　在此之前，先申明使用環(huán)境：

　　所有圖形都是從ai中粘貼過來，如果ps先行制作，可以從ps粘貼到ai先。

　　1 圖形的大小

　　這里指的大小不是設(shè)計(jì)的大小，而是導(dǎo)入(粘貼)到fontlab里的圖形大小。在生成中，這是第一步，同時也是很重要的一布。

　　在想象中，大小也許不是什么關(guān)鍵的問題，不是說矢量的么，矢量不就是可以大可以小，但是事實(shí)并不是這樣。作為第一步，圖形的大小非常重要。首先是兩者單位不同，其次可能和fontlab錄入格式文件的精細(xì)度有關(guān)，fontlab的細(xì)節(jié)承載度有限，細(xì)微的細(xì)節(jié)在外部導(dǎo)入這樣的模式中，沒有達(dá)到一定彎曲的形狀將被忽略，結(jié)果就好像ai的臨摹一樣。

　　可以看出在10倍大小的時候，部分細(xì)節(jié)仍然有點(diǎn)缺失。原圖是一個16px的圖標(biāo)，可以說是變形的有點(diǎn)慘不忍睹。

　　放大后的原圖(16px大小直接粘貼進(jìn)去的樣子)

　　所以結(jié)論就很簡單了，必須要先放大原圖，放大的值在一定倍數(shù)以上，倍數(shù)的多少取決于圖形細(xì)節(jié)的多少。一般來說放大的倍數(shù)至少要在20以上。不過保險(xiǎn)起見，可以過百。代價(jià)就是放大的圖形會使文件一定程度的增大(相差一般是會在1k內(nèi))，然后再粘貼到fontlab(fontlab統(tǒng)一縮放不夠方便，建議在ai中統(tǒng)一操作)。所以我們要盡量保證在設(shè)計(jì)的最后階段，把圖形放大到一個絕對可以承載圖標(biāo)細(xì)節(jié)的大小。

　　話外音：Fontlab 采用 UPM (Units Per eM/元素單位)來測量字體，兩者存在一定的差值。但是因?yàn)槲覀冏龅氖菆D標(biāo)，所以不用對于高度要求過于苛刻(如ascender，baseline等，都可以在文字信息(Font Info)中的Metrics and Dimensions ,key dimensions選項(xiàng)卡中設(shè)置，如果是設(shè)計(jì)字體，則需要嚴(yán)格參考這里的設(shè)置)。

　　在這里，將介紹一個非常重要的參數(shù)，Metrics and Dimensions。理解為尺寸設(shè)置即可，這個值很重要的原因是，當(dāng)你不滿足你的圖形大小的時候，通過調(diào)整這個值，可以適當(dāng)優(yōu)化圖形體積大小。選一個復(fù)雜的圖形，然后就可以開始嘗試了。說的簡單一點(diǎn)，就是通過這個換算，來轉(zhuǎn)換圖形大小，具體嘗試一下就清楚了。

　　如圖兩者的圖形大小沒有改變，而輸出的圖形大小則改變了，所以這個值就是一個大小的換算值，原來圖的大小除以這個UPM size(只是一個大致的關(guān)系，不是精確的換算)，得出最后輸出的圖形大小。

　　通過這種換算，可以有效的減小圖形的體積，當(dāng)然也不能太小，你懂得。

　　如圖還可以設(shè)置字高等細(xì)節(jié)參數(shù)。

　　2 腰圍有多粗-圖形的寬度

　　圖標(biāo)的高度是不受限制的，在fontlab中，只對寬度做設(shè)定(確切的說是有影響)，整個圖形以中點(diǎn)為中心擴(kuò)散。雖然理論上可以做無限大的圖標(biāo)，但是實(shí)際上過大的圖形仍然會造成一些未知錯誤。恩，還是來說說這個寬度的原理。因?yàn)槭亲煮w生成工具，定義的內(nèi)容自然就是字寬，字寬直接影響字間距。把字體換成圖形，影響的也一樣是相互之間的距離，如果圖形超出距離的限定，則很有可能出現(xiàn)左右重合的現(xiàn)象，同理過高也可能出現(xiàn)上下重合，不過上下重合的概率不是很高。

　　究竟寬度的影響在哪里?寬度的影響就是：

　　1、決定你的作品是否等寬。顯然這個問題在閱讀文章的時候更被關(guān)注，但是想想你的圖形將被放在哪里，通過怎樣的技術(shù)，你就會知道該用怎樣方式。

　　2、變形或者選中狀態(tài)下可能會不完整。超出寬度的部分在頁面的渲染上會有一定的問題，比如放大的時候，超出的部分可能會不能渲染，或者在其他動態(tài)的時候，也會莫名的消失。

　　如圖右邊的邊界線截掉了圖形的一部分，所以實(shí)現(xiàn)以后被截掉的部分容易丟失

　　3 沒有多余的觸須-界定框大小的控制

　　界定框，就是對圖形進(jìn)行調(diào)整的大框，在ps里按下Ctrl+T就能看到該尊容(fontlab中是Ctrl+9)。通過使用界定框來移動和縮放對象，以便于準(zhǔn)確的擺放圖形。本來界定框的大小并不難確定，但是在fontlab里卻不一樣，多余的觸須(操作手柄)也會影響到界定框大小。我會把他單獨(dú)拿出來說是因?yàn)檫@很值得注意，尤其是一些帶圓形的圖形，有時候?yàn)榱耸∈掳褜ο笕啃D(zhuǎn)(實(shí)際只需旋轉(zhuǎn)圓以外的內(nèi)容，但是看起來圓被旋轉(zhuǎn)后也看不出變化)了，然后在fontlab里你就會發(fā)現(xiàn)，界定框很有可能會因?yàn)槟阈D(zhuǎn)了多余的對象而改變了原本的大小，甚至偏離。最直接的影響就是使中心(圓心)變得不再準(zhǔn)確，邊界變得模糊(對齊的時候，沒有那么方便了，誰試誰知道)。

　　如圖，控制桿的大小會影響界定框的大小，從而動搖中心點(diǎn)。

　　4 沒有線條的世界-封閉的圖形

　　和ai不太一樣的是，fontlab里沒有線條，也沒有復(fù)合圖形，雖然他也可以復(fù)合。通過粘貼進(jìn)來的圖形必須是單個的圖形，同時也必須是封閉的圖形，你就不用指望把一條纖細(xì)的線條拖進(jìn)來享用了。復(fù)合的圖形你必須要經(jīng)過合并，可以用fontlab來合并，當(dāng)然如果你能把復(fù)合的圖形粘貼進(jìn)來的話，因?yàn)檎迟N對復(fù)合圖形無效。說到這里，復(fù)制粘貼的方法對于沒有填充顏色的圖形也無效，這是個很有意思的特點(diǎn)，所以粘貼之前要擴(kuò)展或者合并為一個單一的圖形，并且記得上色。

　　而未封閉的圖形么，在fontlab中是無法顯示的，不過在編輯頁面，fontlab會很小心的標(biāo)出你圖形的未封閉節(jié)點(diǎn)的位置。

　　如圖圓形的下方有一個叉，表示圖形沒有封閉，所以右側(cè)的字體窗口無法顯示該圖形

　　兩個圖形默認(rèn)的組合

　　fontlab也可以處理簡單的合并，組合圖形的形式可以在菜單上設(shè)置，ai中不做闡述

　　可以進(jìn)行不同形式的合并

　　雖然支持幾個圖形的合并，不過依然建議是圖形越少越好。

　　5 調(diào)整的最大幫手-輔助線的使用

　　輔助線依然是非常重要的，因?yàn)闆Q定了對齊，而對齊則與很多重要的屬性聯(lián)系在一起，比如對齊，清晰度，

　　在fontlab里很麻煩的一點(diǎn)是，界限和輔助線的區(qū)別不是很明顯，但是長時間的使用和批量的操作實(shí)在是離不開輔助線這個東西。創(chuàng)造輔助線的形式和ps以及AI一樣，所以上手非常簡單。一般來說剛剛創(chuàng)造的輔助線是藍(lán)色的，這個時候是叫做本地輔助線(local)，主要是針對本地，也就是當(dāng)前圖形的輔助操作。這時的輔助線不會在其他圖形中出現(xiàn)，但是有時候這并不是我們想要的。簡單來說，比如我們用輔助線創(chuàng)造的是一個統(tǒng)一的高度，或者統(tǒng)一的寬度，那他就需要在所有的圖形中顯示出來。要把輔助線轉(zhuǎn)換到全局也很簡單，直接右擊輔助線，選擇Global就可以。這時候輔助線會變成紅色，并且可以在其他圖層看到。但是在經(jīng)常使用之后就會發(fā)現(xiàn)還有一個問題，就是在使用中有時候誤操作移動了該輔助線，然后所有圖層的輔助線全部被移動了。這時候就需要一個鎖定的功能，這也不難，在試圖(View)中的鎖定圖層中鎖定輔助線就可以了。然后所有的輔助線(除了標(biāo)注寬度的，那線從一開始就是灰色)都鎖定了。當(dāng)然，需要修改輔助線的話需要解鎖，不過鎖定狀態(tài)仍然能創(chuàng)建輔助線，只是不能修改。

　　輔助線的簡易說明

　　6 檢查作業(yè)-圖形的復(fù)查

　　到底圖形現(xiàn)在是什么樣子的，fontlab可以直接查看已經(jīng)制作的圖形，不過fontlab在渲染的時候顯然沒有把圖形當(dāng)做字體，其效果就好像是在ai中查看的感覺。如果這個時候你自我感覺良好的話，那就對不起了，在頁面上很有可能會是另一個她。因?yàn)閣eb瀏覽器可不會把他當(dāng)ai文件來渲染，對瀏覽器來說，他就是字體。甚至是mac平臺上，也會不同程度的出現(xiàn)雜邊的情況。

　　也有一種理論是，根據(jù)渲染的效果，來改變設(shè)計(jì)的樣式。聽上去不錯，展現(xiàn)出來的效果是最好的就行了。但是這樣的結(jié)果最直接引發(fā)的問題就是設(shè)計(jì)稿和實(shí)現(xiàn)的不統(tǒng)一，也就難以管理。

　　制作時的預(yù)覽，這是其中的一種預(yù)覽形式

　　實(shí)際效果

　　上圖為設(shè)計(jì)效果細(xì)節(jié)和實(shí)現(xiàn)細(xì)節(jié)對比，左邊為生成是的樣子，右邊為瀏覽器渲染(使用中的狀態(tài))，可以看到邊緣是不一樣的渲染結(jié)果。

　　其實(shí)我想說設(shè)計(jì)和實(shí)現(xiàn)在這個環(huán)節(jié)是不可調(diào)和的矛盾，總會有些差距。就現(xiàn)在來說，具體影響的條件有：瀏覽器，系統(tǒng)甚至硬件(有點(diǎn)匪夷所思，但是確實(shí)有些瀏覽器對硬件很敏感)。在這里不一一闡述之間的巨大差別，不過之前在設(shè)計(jì)總結(jié)中曾經(jīng)粗略的探討過這個問題，總之結(jié)論是：小心像素點(diǎn)，注意斜線。

另一篇圖標(biāo)字體設(shè)計(jì)的文章中已有闡述 http://ux.etao.com/posts/399