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

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

　　故事的開(kāi)始，主要是從移動(dòng)平臺(tái)的完全崛起說(shuō)起。

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

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

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

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

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

　　先來(lái)說(shuō)說(shuō)svg吧。

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

　　svg的圖像

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

　　iconfont的圖形字體

　　同是矢量圖形，讓我們來(lái)看看兩者的共同之處。

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

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

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

　　還是先說(shuō)下svg。

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

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

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

　　3、容易入手。繪制圖形相對(duì)比較簡(jiǎn)單，也比較容易修改和生成。

　　劣勢(shì)

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

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

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

　　4、IE6不支持。這個(gè)是在中國(guó)的硬傷了，不解釋。

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

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

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

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

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

　　缺點(diǎn)

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

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

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

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

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

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

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

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

　　設(shè)計(jì)

　　?

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

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

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

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

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

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

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

　　黃金比例

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

　　常用希臘字母

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

　　上圖為黃金比例的示意圖

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

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

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

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

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

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

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

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

　　矢量還原到位圖

　　一陣忙碌之后就有一部分圖標(biāo)已經(jīng)設(shè)計(jì)出來(lái)，當(dāng)然大家都是抽空完成的，非常的辛苦。第一次的匯總也有很多的問(wèn)題出現(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ì)迷失。然后開(kāi)始把修訂過(guò)的圖標(biāo)開(kāi)始生產(chǎn)字體文件，開(kāi)始往線(xiàn)上推。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　如圖控制桿如果方向位置都對(duì)的話(huà)就會(huì)簡(jiǎn)單很多，在整個(gè)大小的控制就會(huì)精確不少，對(duì)于圖形的定位就要方便很多。

　　繼續(xù)努力

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

　　生成

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

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

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

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

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

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

　　所有圖形都是從ai中粘貼過(guò)來(lái)，如果ps先行制作，可以從ps粘貼到ai先。

　　1 圖形的大小

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　3 沒(méi)有多余的觸須-界定框大小的控制

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

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

　　4 沒(méi)有線(xiàn)條的世界-封閉的圖形

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

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

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

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

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

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

　　雖然支持幾個(gè)圖形的合并，不過(guò)依然建議是圖形越少越好。

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

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

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

　　輔助線(xiàn)的簡(jiǎn)易說(shuō)明

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

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

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

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

　　實(shí)際效果

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

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

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