淺談矢量圖形前景

 

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

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

　　所以矢量圖形的特性及應用前景就成為了設計師和前端們迫切希望去了解的內容。這篇文章是阿裡媽媽MUX團隊通過兩年的技術實踐，從技術、設計潮流、硬件、應用環境等角度向大家解析矢量圖形的應用前景。

　　扁平化趨勢

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

　　顯示技術的革新

　　從長遠的角度看扁平化設計的流行、再到矢量技術被應用都是為匹配顯示設備快速升級更替而做的准備。

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

　　效率優先

　　前面也介紹到了跨平台應用的問題，矢量技術可以解決設計師在不同顯示設備下圖形清晰問題，不用再為不同設備設計不同尺寸的圖片，這樣就節省設計師很多工作量。

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

　　響應式設計

　　響應式設計被認為是中小型網站的最佳跨平台解決方案，在國內外已經廣泛被設計師所推崇。響應式的流行對矢量圖形也起到了推動作用;

　　豐富的動畫及互動體驗

　　在pc端已開始有全站式svg應用，為用戶提供豐富的交互和動畫體驗。

　　圖表在矢量技術應用成面已非常成熟，且svg、canvas畫圖技術已基本替換flash技術。

　　應用環境和技術的改善

　　以前矢量圖形(iconfont)在IE低版本浏覽器下渲染總是那麼不盡人意，且一些更高級的矢量格式(SVG)根本無法在IE6~IE7下展現。又考慮到低版本浏覽器的市場份額在國內外的占有分量很大，浏覽器的性能一直是矢量圖形在實際應用中設計師最關心的一個問題。但隨著高級浏覽器對矢量格式的支持不斷加強，且市場份額也不斷增大蠶食了IE低版本浏覽器的市場份額，慢慢消除了浏覽器性能對矢量技術應用推廣的的阻絆。我們來看一組浏覽器統計數據;(國內某大型網站首頁用戶浏覽器版本分布)

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

　　大型網站起了示范作用

　　對於矢量技術在產品中應用慢慢開始變得普遍開來，twitter、微軟、阿裡、新浪、騰訊等國內外著名網站已開始在自己的網站和應用中不同程度的嘗試了矢量技術。這對矢量技術在行業內產生影響是很好的風向標