矢量圖形對于從 事設(shè)計(jì)的我們來說并不陌生，大多設(shè)計(jì)師都不同程度的接觸過illustrator、CorelDRAW等矢量繪圖軟件，但在網(wǎng)頁應(yīng)用中很少被觸及，如果非 要說有的話應(yīng)該算Flash的swf矢量動畫。我們在過去圖形應(yīng)用中更多接觸的是位圖格式的圖形，但在過去的幾年里，隨著硬件和技術(shù)等外部因素的影響，位 圖應(yīng)用給設(shè)計(jì)師的效率和開發(fā)成本帶來了挑戰(zhàn)，舉個例子：

一個圖標(biāo)要適配pc端、移動端或retina屏幕的話上就要設(shè)計(jì)兩份或者更多，前端開發(fā)的時候也要判斷設(shè)備再做出決定調(diào)用哪張圖片。如果圖片發(fā)生變化對前后者來說都是噩夢啊。

所以矢量圖形的特性及應(yīng)用前景就成為了設(shè)計(jì)師和前端們迫切希望去了解的內(nèi)容。這篇文章是阿里媽媽MUX團(tuán)隊(duì)通過兩年的技術(shù)實(shí)踐，從技術(shù)、設(shè)計(jì)潮流、硬件、應(yīng)用環(huán)境等角度向大家解析矢量圖形的應(yīng)用前景。
扁平化趨勢

不可否認(rèn)扁平化簡約設(shè)計(jì)已是當(dāng)下最流行的設(shè)計(jì)風(fēng)格，個人認(rèn)為扁平化設(shè)計(jì)為矢量化圖形應(yīng)用開啟了一扇大門。扁平化簡約設(shè)計(jì)推崇的圖形設(shè)計(jì)不再是那么寫實(shí)； 高光、紋理之類的元素被去除，這和矢量圖形能否被實(shí)際應(yīng)用是非常關(guān)鍵的。首先高光和紋理之類元素對矢量圖形的制作來說簡直是噩夢，設(shè)計(jì)師需要在矢量繪圖軟 件中花費(fèi)很多時間來實(shí)現(xiàn)這些效果才能被應(yīng)用到實(shí)際產(chǎn)品中，效率遠(yuǎn)遠(yuǎn)沒有在位圖軟件上實(shí)現(xiàn)來的快捷，再者高光、紋理之類的元素會使矢量文件變得更大，嚴(yán)格來 說一個在AI中增加了投影、紋理、高光效果的圖形文件會比扁平純色的圖形文件大幾十倍，這是不可被接受的；所以扁平化設(shè)計(jì)對現(xiàn)階段技術(shù)背景下的矢量技術(shù)應(yīng) 用起到了非常重要的推動作用。

《扁平化和簡約來襲》為設(shè)計(jì)師解析了為什么扁平化設(shè)計(jì)會成為當(dāng)下最流程的話題，推薦對扁平化設(shè)計(jì)感興趣的小伙可以讀一下。

顯示技術(shù)的革新

從長遠(yuǎn)的角度看扁平化設(shè)計(jì)的流行、再到矢量技術(shù)被應(yīng)用都是為匹配顯示設(shè)備快速升級更替而做的準(zhǔn)備。

現(xiàn)下應(yīng)該是顯示設(shè)備最混亂的時候，從普通液晶顯示器（96ppi）到apple的retina屏（iphone326ppi）再到最近開始熱起來的4k 電視機(jī)，這些設(shè)備之間存在巨大的ppi跨度，而在現(xiàn)今跨平臺設(shè)計(jì)，多屏設(shè)計(jì)的理念已成為主流，設(shè)計(jì)師不可能還像以前一樣只關(guān)注網(wǎng)頁端。矢量圖形技術(shù)恰好是 解決多終端顯示的最優(yōu)方案，能很好的保持圖形的清晰度。

效率優(yōu)先

前面也介紹到了跨平臺應(yīng)用的問題，矢量技術(shù)可以解決設(shè)計(jì)師在不同顯示設(shè)備下圖形清晰問題，不用再為不同設(shè)備設(shè)計(jì)不同尺寸的圖片，這樣就節(jié)省設(shè)計(jì)師很多工作量。

同時前端也能從矢量技術(shù)中獲得效率提升；前端工程師現(xiàn)在切圖更多采用的是CSS Sprites（雪碧圖）形 式，在制作雪碧圖的時候涉及在photoshop里切圖(前端不擅長使用ps等圖形等工具)，在應(yīng)用的時候還要查找雪碧圖中圖片坐標(biāo)信息。這個過程本身工 作量就比較大，如果遇到圖片或圖標(biāo)的修改那前端就需要再走一遍上述流程，雪碧圖相對于矢量圖形來說就顯得非常不靈活。矢量圖形優(yōu)勢是可以通過代碼的形式控 制圖形大小、色彩或一些特殊的效果，如：浮雕、漸變等（當(dāng)然不建議這樣做）。

響應(yīng)式設(shè)計(jì)

響應(yīng)式設(shè)計(jì)被認(rèn)為是中小型網(wǎng)站的最佳跨平臺解決方案，在國內(nèi)外已經(jīng)廣泛被設(shè)計(jì)師所推崇。響應(yīng)式的流行對矢量圖形也起到了推動作用；

豐富的動畫及互動體驗(yàn)

在pc端已開始有全站式svg應(yīng)用，為用戶提供豐富的交互和動畫體驗(yàn)。
圖表在矢量技術(shù)應(yīng)用成面已非常成熟，且svg、canvas畫圖技術(shù)已基本替換flash技術(shù)。

應(yīng)用環(huán)境和技術(shù)的改善

以前矢量圖形（iconfont）在IE低版本瀏覽器下渲染總是那么不盡人意，且一些更高級的矢量格式（SVG）根本無法在IE6~IE7下展現(xiàn)。又考 慮到低版本瀏覽器的市場份額在國內(nèi)外的占有分量很大，瀏覽器的性能一直是矢量圖形在實(shí)際應(yīng)用中設(shè)計(jì)師最關(guān)心的一個問題。但隨著高級瀏覽器對矢量格式的支持 不斷加強(qiáng)，且市場份額也不斷增大蠶食了IE低版本瀏覽器的市場份額，慢慢消除了瀏覽器性能對矢量技術(shù)應(yīng)用推廣的的阻絆。我們來看一組瀏覽器統(tǒng)計(jì)數(shù)據(jù)；

（國內(nèi)某大型網(wǎng)站首頁用戶瀏覽器版本分布）

從數(shù)據(jù)中我們看出，IE6+IE7的市場份額已經(jīng)非常低了，只占6.4%;且這部分用戶是否真的很關(guān)注矢量圖形的顯示效果也是值得我們調(diào)研的。

大型網(wǎng)站起了示范作用

對于矢量技術(shù)在產(chǎn)品中應(yīng)用慢慢開始變得普遍開來，twitter、微軟、阿里、新浪、騰訊等國內(nèi)外著名網(wǎng)站已開始在自己的網(wǎng)站和應(yīng)用中不同程度的嘗試了矢量技術(shù)。這對矢量技術(shù)在行業(yè)內(nèi)產(chǎn)生影響是很好的風(fēng)向標(biāo)

原文來自： 阿里媽媽MUX