建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
有一個(gè)英語(yǔ)成語(yǔ)叫做一畫(huà)勝千言(A picture is worth a thousand words)，不知道大家有沒(méi)有聽(tīng)過(guò)?它是指的是一張靜態(tài)的圖片就可表達(dá)一個(gè)復(fù)雜的概念或者與一個(gè)主題相關(guān)的圖片有時(shí)比起詳細(xì)的解釋?zhuān)軌蚋行У拿枋鲇嘘P(guān)主題。
目前創(chuàng)新互聯(lián)已為近千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、綿陽(yáng)服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、鎮(zhèn)賚網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
如果我們要用一句話(huà)來(lái)說(shuō)明圖標(biāo)的作用，沒(méi)有比這個(gè)成語(yǔ)更適合的詞了。本篇文章，我們就來(lái)聊聊關(guān)于圖標(biāo)的一些事情。
一個(gè)圖標(biāo)的生命周期(工作流程)
關(guān)于圖標(biāo)的生命周期，在我個(gè)人所經(jīng)歷的開(kāi)發(fā)項(xiàng)目中，有以下兩種：
第一種方式：圖標(biāo)庫(kù)(選擇階段) -> 圖標(biāo)使用(開(kāi)發(fā)階段)
第二種方式：圖標(biāo)設(shè)計(jì)(設(shè)計(jì)階段) -> 圖標(biāo)導(dǎo)出(溝通階段) -> 圖標(biāo)使用(開(kāi)發(fā)階段)
一般來(lái)說(shuō)，小公司或者獨(dú)立開(kāi)發(fā)者會(huì)采用第一種工作流程。而大型組織或公司因?yàn)閾碛懈晟频膱F(tuán)隊(duì)和資源，一般會(huì)采取第二種方式，能夠獲得更多自主權(quán)和建立企業(yè)VI(Visual Identity，企業(yè)視覺(jué)識(shí)別)的能力。
但無(wú)論哪種方式，都包括兩個(gè)角色：設(shè)計(jì)師和Web開(kāi)發(fā)。只是在第一種工作方式中，設(shè)計(jì)師是不可見(jiàn)的。
圖標(biāo)的設(shè)計(jì)和使用
設(shè)計(jì)階段通常是由不了解Web開(kāi)發(fā)的設(shè)計(jì)師們來(lái)完成的，他們會(huì)根據(jù)產(chǎn)品的需要，繪出滿(mǎn)足需求的圖標(biāo)，然后交給Web開(kāi)發(fā)人員使用。
(ThoughtWorks官網(wǎng)“Contact with us”圖標(biāo))
為什么要先介紹圖標(biāo)的使用，而一筆跳過(guò)導(dǎo)出過(guò)程呢?原因很簡(jiǎn)單，因?yàn)槲覀冃枰戎婪?wù)的對(duì)象是誰(shuí)，才知道如何正確的為它服務(wù)。
常見(jiàn)的三種圖標(biāo)的使用方式
1. 使用圖片
直接將設(shè)計(jì)師畫(huà)好的圖標(biāo)，以PNG格式的圖片一個(gè)個(gè)分離導(dǎo)出，這是最直觀的圖標(biāo)打包方式。
(FlatIcon圖標(biāo))
它的優(yōu)點(diǎn)是：
- 能夠使用彩色的圖標(biāo)
- 能夠支持大部分瀏覽器
缺點(diǎn)是：
- 圖標(biāo)大小是固定的(不能根據(jù)場(chǎng)景自由縮放)
- Retina屏幕需要兩倍圖
開(kāi)發(fā)人員拿到這樣的圖標(biāo)，通常需要先將其合成為一張圖片，以方便制作雪碧圖，這個(gè)過(guò)程可以由開(kāi)發(fā)人員自己完成，也可以由設(shè)計(jì)師來(lái)做(設(shè)計(jì)師可以根據(jù)源文件中心導(dǎo)出一張包含所有圖標(biāo)的PNG文件制作)。
制作雪碧圖的工具有很多，我比較常用的在線雪碧圖工具是：Sprite Cow，或者是NodeJS平臺(tái)下的構(gòu)建工具插件，如：webpack-spritesmith。
2. 直接使用svg
使用SVG(可縮放矢量圖形)，W3C標(biāo)準(zhǔn)是最被看好的Web端圖形解決方案。它能提供如裁剪路徑、Alpha通道、濾鏡效果等復(fù)雜渲染能力，具備傳統(tǒng)圖片沒(méi)有的矢量功能，還可以被記事本等閱讀器、搜索引擎訪問(wèn)。
設(shè)計(jì)師可以輕松的在設(shè)計(jì)繪圖軟件(AI，PS)的幫助下導(dǎo)出SVG格式的圖標(biāo)/圖片。
但目前，國(guó)內(nèi)svg還沒(méi)有被非常廣泛的使用，原因在于兼容性不足，不能夠很好的兼容舊的IE版本和一些Android原生瀏覽器。
(Can I use svg?)
上圖為百度對(duì)2017年前三個(gè)月的瀏覽器使用進(jìn)行的統(tǒng)計(jì)，目前國(guó)內(nèi)還有超過(guò)20%的用戶(hù)仍在使用IE8，9甚至是IE7。
3. IconFont
IconFont是目前最為流行的圖標(biāo)解決方案，顧名思義，它就是字體文件，你可以用任何一個(gè)字體編輯工具打開(kāi)它，如果你打開(kāi)某一個(gè)查看，就會(huì)發(fā)現(xiàn)它就是一些路徑，這些路徑可以用AI，PS，Sketch等軟件來(lái)繪制。
IconFont的優(yōu)點(diǎn)在于能夠用CSS控制樣式，無(wú)限縮放而不失真，支持IE7+，兼顧屏幕閱讀器，不過(guò)缺點(diǎn)是不能支持彩色圖標(biāo)(擁有多種顏色的圖標(biāo))。獲得IconFont的方式也很簡(jiǎn)單，設(shè)計(jì)師將圖標(biāo)通過(guò)AI/PS轉(zhuǎn)成SVG文件，然后由開(kāi)發(fā)人員通過(guò)工具(在線或者本地)轉(zhuǎn)換為IconFont，比如：國(guó)外的icomoon.io，國(guó)內(nèi)的iconfont.cn，開(kāi)源構(gòu)建工具插件有g(shù)ulp-iconfont等等。
產(chǎn)生適合Web開(kāi)發(fā)的圖標(biāo)
“產(chǎn)生適合Web開(kāi)發(fā)的圖標(biāo)”是我們本篇文章要關(guān)注的重點(diǎn)。
1. 使用圖片的方式
如果開(kāi)發(fā)人員直接使用圖片，則相對(duì)簡(jiǎn)單，設(shè)計(jì)師只需要針對(duì)普通屏幕和Retina屏幕準(zhǔn)備兩套圖(單倍圖和兩倍圖)。
以國(guó)內(nèi)某著名的中文小說(shuō)閱讀網(wǎng)站為例，會(huì)針對(duì)不同的設(shè)備使用不同倍數(shù)的logo圖片，以保證在如Retina屏幕下的清晰度。
- .logo-wrap .logo a {
- display: block;
- width: 219px;
- height: 52px;
- background: url(/qd/images/logo.dbed5.png) no-repeat;
- }
- @media not all, not all, (-webkit-min-device-pixel-ratio: 1.3), not all, (min-resolution: 1.3dppx) {
- .logo-wrap .logo a {
- background: url(/qd/images/logo3x.fd980.png) no-repeat;
- background-repeat: no-repeat;background-size: 217px;
- }
- }
- )
2. 使用SVG
關(guān)于轉(zhuǎn)換成SVG，這里就要引薦一下Sara Soueidan在Generate London 2015 Conference上的演講《Sara Soueidan: SVG for Web Designers (and Developers)》(YouTube視頻需要翻墻)，如果不方便，Sara Soueidan有一篇博客《Tips for Creating and Exporting Better SVGs for the Web》更詳細(xì)的講解了關(guān)于SVG導(dǎo)出的內(nèi)容，當(dāng)然，還有一篇國(guó)內(nèi)的翻譯文章《創(chuàng)建和導(dǎo)出SVG的技巧》，最后再推薦一篇Adobe工程師michael chaize寫(xiě)的關(guān)于AI導(dǎo)出SVG的文章《Export SVG for the web with Illustrator CC》。
在上述資料中，我覺(jué)得看視頻更直觀，順便領(lǐng)略一下這位優(yōu)秀的阿拉伯女性前端開(kāi)發(fā)工程師(兼自由作家和演講人)的風(fēng)采。
博客和視頻中談到了多個(gè)點(diǎn)導(dǎo)出SVG需要注意的地方，由于篇幅限制，這里簡(jiǎn)單描述三個(gè)tips：
(1) 選擇適合繪畫(huà)的畫(huà)板
你有在網(wǎng)頁(yè)上嵌入過(guò)SVG嗎，給它指定一個(gè)高度和寬度，然后發(fā)現(xiàn)它其實(shí)比你指定的尺寸要小?開(kāi)發(fā)人員常常會(huì)遇到這樣的問(wèn)題。
一般來(lái)說(shuō)，這是因?yàn)镾VG視窗中有一定大小的白色空白空間。視窗是按照樣式表的指定尺寸顯示的，但是它里面有額外的空白——在圖形周?chē)沟媚愕膱D片看起來(lái)好像“縮水”了，因?yàn)檫@塊空白在視窗里面是占空間的。為了避免這種情況，你需要確保你的畫(huà)板是剛剛好能容納里面的圖像的，不要大太多。
畫(huà)板的尺寸就是導(dǎo)出的SVG視窗的尺寸，所有畫(huà)板上的空白最終都會(huì)變成視窗中的白色空白。
對(duì)于沒(méi)有AI工具的開(kāi)發(fā)，可以在下面的SVGO優(yōu)化選項(xiàng)中選擇“Prefer viewBox to width/height”。
(2) 選擇合適的導(dǎo)出選項(xiàng)
上圖展示的選項(xiàng)是推薦的生成適合Web使用的SVG。如果你不想使用Web字體，可以選擇把文本轉(zhuǎn)換成輪廓。
如果SVG中包含大量的文字，這個(gè)選項(xiàng)output fewer tspan elements可以在很大程度上降低svg的大小。
(3) 優(yōu)化SVG
通常是建議在把SVG從圖形編輯器中導(dǎo)出后，再用單獨(dú)的優(yōu)化工具來(lái)進(jìn)行優(yōu)化。比如：刪除無(wú)用Comments和Metadata，簡(jiǎn)化代碼，簡(jiǎn)化單個(gè)路徑等。推薦的第三方工具：NodeJS工具svgomg，AI插件SVG-NOW，Sketch插件Svgo-compressor等，請(qǐng)參考Sara Soueidan的文章《Useful SVGO[ptimization] Tools》。
3. IconFont
前面提到IconFont一般是由SVG通過(guò)工具轉(zhuǎn)換而來(lái)，而如果開(kāi)發(fā)最終需要使用IconFont來(lái)展示圖標(biāo)，那么對(duì)于導(dǎo)出的SVG有一些特殊要求。我在本文的前面一小節(jié)，已經(jīng)介紹了幾款I(lǐng)conFont的轉(zhuǎn)換工具，每一款工具都有詳細(xì)的文檔來(lái)說(shuō)明SVG繪制的規(guī)則，盡管不盡相同，但有一些基本原則是一致的：
- 將文字轉(zhuǎn)換為路徑
- 不可以使用圖片(字體只是路徑)
- 修剪畫(huà)板(trimming to art boundaries)(前面已經(jīng)介紹過(guò))
- 將描邊轉(zhuǎn)化為閉合圖形
- 簡(jiǎn)化無(wú)用的節(jié)點(diǎn)
- ......
更多關(guān)于IconFont的繪畫(huà)規(guī)則，請(qǐng)參考：Iconfont.cn文檔，Icomoon文檔，gulp-iconfont文檔，fontello文檔。
及時(shí)和頻繁的溝通
Sara Soueidan說(shuō)過(guò)一句話(huà)：“設(shè)計(jì)師和開(kāi)發(fā)者應(yīng)該成為好朋友”。
我們今天的話(huà)題正好涉及到這兩個(gè)角色，也許你會(huì)覺(jué)得它們倆似乎有點(diǎn)“八竿子打不著”，但其實(shí)不是。請(qǐng)看下面這張圖，敏捷的開(kāi)發(fā)過(guò)程中不同角色共享職責(zé)，那么設(shè)計(jì)師和開(kāi)發(fā)也不例外。
(敏捷開(kāi)發(fā)中不同角色共享職責(zé))
在ThoughtWorks工作，你會(huì)發(fā)現(xiàn)不少設(shè)計(jì)師懂HTML，CSS，甚至如何用Chrome查看元素，同時(shí)有不少開(kāi)發(fā)對(duì)設(shè)計(jì)也頗有研究和興趣。而我們的設(shè)計(jì)師和開(kāi)發(fā)人員會(huì)坐在同一張桌子上一起完成工作，以保證及時(shí)和頻繁的需求溝通和合作。
至于“設(shè)計(jì)師和開(kāi)發(fā)者應(yīng)該成為好朋友”，作為一名Dev，我就跟好多設(shè)計(jì)師都是朋友(至少我是這么認(rèn)為的)。
而為了更好的做到溝通順暢和職責(zé)共享，還出現(xiàn)了一種新(相對(duì)較新)的角色UI Dev，如下圖。不過(guò)，關(guān)于這個(gè)角色的定義眾說(shuō)紛紜，我們就不在這里細(xì)聊了。
(UI Developer - 參考自Stack Overflow答案)
結(jié)尾
在本篇文章中，我們談了圖標(biāo)的三種使用方式：圖片、SVG、IconFont，而它們也只是圖標(biāo)這個(gè)話(huà)題的冰山一角。雖然篇幅很短，但尤其重要的是，保證團(tuán)隊(duì)中設(shè)計(jì)師和開(kāi)發(fā)人員便捷的協(xié)作工作，一起找到滿(mǎn)足團(tuán)隊(duì)需求的解決方案，才是保證圖標(biāo)質(zhì)量的關(guān)鍵。
【本文是專(zhuān)欄作者“ThoughtWorks”的原創(chuàng)稿件，微信公眾號(hào)：思特沃克，轉(zhuǎn)載請(qǐng)聯(lián)系原作者】
當(dāng)前名稱(chēng)：前端不止：請(qǐng)告訴我，你要什么樣的圖標(biāo)
文章位置：http://m.fisionsoft.com.cn/article/cddgcgj.html
