矢量圖形對(duì)于從事設(shè)計(jì)的我們來說并不陌生，大多設(shè)計(jì)師都不同程度的接觸過illustrator、CorelDRAW等矢量繪圖軟件，但在網(wǎng)頁(yè)應(yīng)用中很少被觸及，如果非要說有的話應(yīng)該算Flash的swf矢量動(dòng)畫。我們?cè)谶^去圖形應(yīng)用中更多接觸的是位圖格式的圖形，但在過去的幾年里，隨著硬件和技術(shù)等外部因素的影響，位圖應(yīng)用給設(shè)計(jì)師的效率和開發(fā)成本帶來了挑戰(zhàn)，舉個(gè)例子： 一個(gè)圖標(biāo)要適配pc端、移動(dòng)端或retina屏幕的話上就要設(shè)計(jì)兩份或者更多，前端開發(fā)的時(shí)候也要判斷設(shè)備再做出決定調(diào)用哪張圖片。如果圖片發(fā)生變化對(duì)前后者來說都是噩夢(mèng)啊。 所以矢量圖形的特性及應(yīng)用前景就成為了設(shè)計(jì)師和前端們迫切希望去了解的內(nèi)容。這篇文章是阿里媽媽MUX團(tuán)隊(duì)通過兩年的技術(shù)實(shí)踐，從技術(shù)、設(shè)計(jì)潮流、硬件、應(yīng)用環(huán)境等角度向大家解析矢量圖形的應(yīng)用前景。

扁平化趨勢(shì)

不可否認(rèn)扁平化簡(jiǎn)約設(shè)計(jì)已是當(dāng)下最流行的設(shè)計(jì)風(fēng)格，個(gè)人認(rèn)為扁平化設(shè)計(jì)為矢量化圖形應(yīng)用開啟了一扇大門。扁平化簡(jiǎn)約設(shè)計(jì)推崇的圖形設(shè)計(jì)不再是那么寫實(shí)；高光、紋理之類的元素被去除，這和矢量圖形能否被實(shí)際應(yīng)用是非常關(guān)鍵的。首先高光和紋理之類元素對(duì)矢量圖形的制作來說簡(jiǎn)直是噩夢(mèng)，設(shè)計(jì)師需要在矢量繪圖軟件中花費(fèi)很多時(shí)間來實(shí)現(xiàn)這些效果才能被應(yīng)用到實(shí)際產(chǎn)品中，效率遠(yuǎn)遠(yuǎn)沒有在位圖軟件上實(shí)現(xiàn)來的快捷，再者高光、紋理之類的元素會(huì)使矢量文件變得更大，嚴(yán)格來說一個(gè)在AI中增加了投影、紋理、高光效果的圖形文件會(huì)比扁平純色的圖形文件大幾十倍，這是不可被接受的；所以扁平化設(shè)計(jì)對(duì)現(xiàn)階段技術(shù)背景下的矢量技術(shù)應(yīng)用起到了非常重要的推動(dòng)作用。   顯示技術(shù)的革新 從長(zhǎng)遠(yuǎn)的角度看扁平化設(shè)計(jì)的流行、再到矢量技術(shù)被應(yīng)用都是為匹配顯示設(shè)備快速升級(jí)更替而做的準(zhǔn)備。 現(xiàn)下應(yīng)該是顯示設(shè)備最混亂的時(shí)候，從普通液晶顯示器（96ppi）到apple的retina屏（iphone326ppi）再到最近開始熱起來的4k電視機(jī)，這些設(shè)備之間存在巨大的ppi跨度，而在現(xiàn)今跨平臺(tái)設(shè)計(jì)，多屏設(shè)計(jì)的理念已成為主流，設(shè)計(jì)師不可能還像以前一樣只關(guān)注網(wǎng)頁(yè)端。矢量圖形技術(shù)恰好是解決多終端顯示的最優(yōu)方案，能很好的保持圖形的清晰度。   效率優(yōu)先 前面也介紹到了跨平臺(tái)應(yīng)用的問題，矢量技術(shù)可以解決設(shè)計(jì)師在不同顯示設(shè)備下圖形清晰問題，不用再為不同設(shè)備設(shè)計(jì)不同尺寸的圖片，這樣就節(jié)省設(shè)計(jì)師很多工作量。 同時(shí)前端也能從矢量技術(shù)中獲得效率提升；前端工程師現(xiàn)在切圖更多采用的是CSS Sprites（雪碧圖）形式，在制作雪碧圖的時(shí)候涉及在photoshop里切圖(前端不擅長(zhǎng)使用ps等圖形等工具)，在應(yīng)用的時(shí)候還要查找雪碧圖中圖片坐標(biāo)信息。這個(gè)過程本身工作量就比較大，如果遇到圖片或圖標(biāo)的修改那前端就需要再走一遍上述流程，雪碧圖相對(duì)于矢量圖形來說就顯得非常不靈活。矢量圖形優(yōu)勢(shì)是可以通過代碼的形式控制圖形大小、色彩或一些特殊的效果，如：浮雕、漸變等（當(dāng)然不建議這樣做）。 響應(yīng)式設(shè)計(jì) 響應(yīng)式設(shè)計(jì)被認(rèn)為是中小型網(wǎng)站的最佳跨平臺(tái)解決方案，在國(guó)內(nèi)外已經(jīng)廣泛被設(shè)計(jì)師所推崇。響應(yīng)式的流行對(duì)矢量圖形也起到了推動(dòng)作用； 豐富的動(dòng)畫及互動(dòng)體驗(yàn) 在pc端已開始有全站式svg應(yīng)用，為用戶提供豐富的交互和動(dòng)畫體驗(yàn)。
圖表在矢量技術(shù)應(yīng)用成面已非常成熟，且svg、canvas畫圖技術(shù)已基本替換flash技術(shù)。 應(yīng)用環(huán)境和技術(shù)的改善 以前矢量圖形（iconfont）在IE低版本瀏覽器下渲染總是那么不盡人意，且一些更高級(jí)的矢量格式（SVG）根本無法在IE6~IE7下展現(xiàn)。又考慮到低版本瀏覽器的市場(chǎng)份額在國(guó)內(nèi)外的占有分量很大，瀏覽器的性能一直是矢量圖形在實(shí)際應(yīng)用中設(shè)計(jì)師最關(guān)心的一個(gè)問題。但隨著高級(jí)瀏覽器對(duì)矢量格式的支持不斷加強(qiáng)，且市場(chǎng)份額也不斷增大蠶食了IE低版本瀏覽器的市場(chǎng)份額，慢慢消除了瀏覽器性能對(duì)矢量技術(shù)應(yīng)用推廣的的阻絆。我們來看一組瀏覽器統(tǒng)計(jì)數(shù)據(jù)；（國(guó)內(nèi)某大型網(wǎng)站首頁(yè)用戶瀏覽器版本分布） 從數(shù)據(jù)中我們看出，IE6+IE7的市場(chǎng)份額已經(jīng)非常低了，只占6.4%;且這部分用戶是否真的很關(guān)注矢量圖形的顯示效果也是值得我們調(diào)研的。   大型網(wǎng)站起了示范作用 對(duì)于矢量技術(shù)在產(chǎn)品中應(yīng)用慢慢開始變得普遍開來，twitter、微軟、阿里、新浪、騰訊等國(guó)內(nèi)外著名網(wǎng)站已開始在自己的網(wǎng)站和應(yīng)用中不同程度的嘗試了矢量技術(shù)。這對(duì)矢量技術(shù)在行業(yè)內(nèi)產(chǎn)生影響是很好的風(fēng)向標(biāo)