文章專欄

使用者介面設計 (User interface design後續簡稱UI)，在使用者體驗和互動的指導下對電腦、電器、或各種載具應用程式以及網站進行的設計。使用者介面設計的目的是使得使用者在完成自己的任務時與被設計物件之間的互動儘可能地簡單及有效。一個好的使用者介面設計，能夠讓使用者在達成任務時，不需要為設計本身花費不必要的思考與精力。

這邊要探討是網頁設計在Flash消失之後，HTML5技術主宰網頁設計的這段期間，UI設計因為HTML5技術的不斷演進，網站在不同的商業目的下開始有不同變化，HTML5初期許多logo、icon、UI設計，因為圖形複雜，加上 RWD(Responsive Web Design)網頁剛起步，許多設計師仍習慣使用點陣圖讓css 設定圖形縮放，但點陣圖在縮放到某個尺寸後，會產生模糊鋸齒狀況，加上點陣圖檔案偏大，大量點陣圖下載對於初期智慧型手機效能也是一大考驗，至此SVG格式的圖檔才開始被UI設計大量使用。

SVG(Scalable Vector Graphics)初始版在很早的2001年便出現，但直到2009年才開始有少量的SVG圖形出現在網頁上，SVG本身是是由W3C制定的XML(Extensible Markup Language，簡稱：XML)組成，當時網頁圖形剛由純點陣圖轉成開始大量使用動畫影音編輯的Flash 年代，因此SVG格在當時並沒有被大量使用，在第一支智慧型手機iPhone出現，Apple 就沒讓 ios 可以撥放Flash檔案，時至今日行動裝置普及的現在，瀏覽器需在不同載具解析下呈現，SVG具有任意縮放尺寸不影響解析以及檔案非常小的特性，讓它開始大放異彩。

UI設計師採用SVG格式設計具有以下優點:

1. 易於修改和編輯。
2. 與現有技術可以互動融合。例如，SVG檔案可嵌入JavaScript指令碼來控制SVG物件。
3. SVG圖形格式可以方便的建立文字索引，可使用搜尋引擎做圖像搜尋。
4. SVG圖形格式支援多種濾鏡和特殊效果，在不改變圖像內容的前提下可以實現點陣圖格式中多種濾鏡效果。
5. SVG圖形格式可以用來動態生成圖形。例如，可用SVG動態生成具有互動功能的地圖，嵌入網頁中，並顯示給介面使用者操作。

也因為SVG格式的這些優點，UI設計師慢慢地從點陣格式中轉換到SVG格式，並且開始善用SVG格式的優點，搭配javascript程式語言展現出更多的UI互動設計，大家可以在 FWA Website (https://thefwa.com)以及Awwwards(https://www.awwwards.com/)網站上，看到許多在UI設計互動上有優異表現的作品。