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

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

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

相關(guān)推薦：
《信息圖好幫手！一組矢量信息圖元素免費下載》
《設(shè)計師必備！13個超贊的矢量素材下載站》
《超贊！35例運用矢量插畫的網(wǎng)頁設(shè)計》

扁平化趨勢

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

顯示技術(shù)的革新

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

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

效率優(yōu)先

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

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

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

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

豐富的動畫及互動體驗

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

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

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

 
原文地址：ux.etao

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】
 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量66萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：