The 21st century: UI/UX

顯示具有 UI/UX 標籤的文章。顯示所有文章

android Fragment

https://sites.google.com/site/chengshixuexipingtai/android/android-fragment

Android 上的界面展示都是通過 Activity 實現的。

但是 Activity 也有它的局限性，同樣的界面在手機上顯示可能很好看，在平板上就未必了，因為平板的屏幕非常大，手機的界面放在平板上可能會有過分被拉長、控件間距過大等情況。這個時候更好的體驗效果是在 Activity 中嵌入「小 Activity」，然後每個「小 Activity」又可以擁有自己的佈局。因此，我們今天的主角 Fragment 登場了。

Fragment初探

為了讓界面可以在平板上更好地展示，Android 在 3.0 版本引入了 Fragment (碎片) 功能，它非常類似於 Activity，可以像 Activity 一樣包含佈局。Fragment 通常是嵌套在 Activity 中使用的，現在想像這種場景：

有兩個 Fragment，
Fragment 1 包含了一個 ListView，每行顯示一本書的標題。
Fragment 2 包含了 TextView 和 ImageView，來顯示書的詳細內容和圖片。

如果現在程序運行豎屏模式的平板或手機上，Fragment 1 可能嵌入在一個 Activity 中，而Fragment 2 可能嵌入在另一個 Activity 中，如下圖所示：

而如果現在程序運行在橫屏模式的平板上，兩個 Fragment 就可以嵌入在同一個 Activity 中了，如下圖所示：

由此可以看出，使用 Fragment 可以讓我們更加充分地利用平板的屏幕空間，下面我們一起來探究下如何使用 Fragment。

首先需要注意，Fragment 是在 3.0 版本引入的，如果你使用的是 3.0 之前的系統，需要先導入android-support-v4 的 jar包才能使用 Fragment 功能。

新建一個項目叫做 Fragments，然後在 layout 文件夾下新建一個名為 fragment1.xml 的佈局文件：

詳請閱 https://sites.google.com/site/chengshixuexipingtai/android/android-fragment

Auto Layout 入門教學

Apple 官方文件：https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html

https://www.appcoda.com.tw/introduction-auto-layout/

Auto Layout 是一個以約束條件為基礎的佈局系統，它可以讓開發者建立一個可以因應不同螢幕尺寸與裝置（device）方向而調整的自適應介面（adaptive interface）

Align – 建立一個對齊的約束條件，例如對齊兩個視圖的左側。
Pin – 建立間距約束條件，例如定義一個UI控制的寬度。
Issues – 解決佈局問題。
Resizing – 指定尺寸調整後影響約束條件的方式為何。

首先，以 Single View Application iOS App 模板來設定一個新的專案。在專案選項的 Device，選擇 iPhone，然後儲存專案，然後打開 Storyboard。你會注意到在右下角區域有一個選單。在選單的按鈕是跟 Auto Layout 有關，你可以用它來處理對齊（alignment），尺寸（sizing）、間距（spaceing）以及約束條件（constraint）問題。

自動佈局是一個很神奇的工具，它能做到以之前的技術連作夢都無法辦到的事情。對於在建立視圖間的交互關聯中其邊緣狀況（edge case）的處理，Auto Layout充分展現了強大的力量。Auto Layout 還能夠與許多 Apple 中最令人興奮的應用程式介面（APIs）相容，其中包括了動畫（animation），移動特效（motion effect）以及 sprite。

我知道有許多討厭 Auto Layout 的開發者，也許是這是一個新的技術，或者第一次使用時感到很難使用。不管你是否相信，倘若你習慣它，它會變成最棒的工具之一，沒有它的話，反而開發不了 App 了。

除了 Auto Layout 外，Apple 讓開發者可以更彈性使用 Control 加上拖曳來設定 Auto Layout，你只要從任何視圖按住 control 鍵不放，然後拖曳來設定相互間的約束條件即可。當你將滑鼠放開，它會呈現一個相關約束條件列表來讓你選取。

在視圖中設定完約束條件之後，約束線（constraint line）不是以橘色就是藍色來呈現。橘色約束線表示目前的約束條件不足，你必須要去修正它。

出現藍色的約束條件，表示你的佈局已經正確的設定，沒有其他模糊不清的情況。

有時候在約束條件建立後，介面建構器大綱（Interface Builder outline）視圖會顯示一個揭示箭頭。這個紅色的箭頭指出還有些衝突或者不清楚的情況。點擊這個揭示箭頭，你會見到一串問題。這些問題是以場景（scene）為基礎來顯示。一般會出現像是約束條件不足，約束條件衝突以及視圖錯位的問題。

在尺寸檢閱器（Size Inspector），你可以見到所有已經加入的約束條件清單，這些約束條件出現在稱作「Constraints」的區塊中。

除了尺寸檢閱器視圖以外，這些約束條件也會出現在介面建構器大綱內的相對應視圖下。

Design Guidelines 設計指南

https://blog.akanelee.me/categories/ui-%e9%9b%9c%e8%ab%87/

UI 設計師要不要懂技術：https://blog.akanelee.me/posts/260026-designers-dont-understand-technology/

企劃＝告訴你為什麼要 PS 照片、動手術的人。
PM＝協調開刀時間、叫各單位做事的人。
設計師＝負責 PS 照片、提出理想（妄想）的人。
RD＝執行醫美手術的醫生，負責把理想變成現實的人。

曾聽過 RD 抱怨：「幹！說時程太趕不蓋 1 樓了，直接蓋 2 樓和 3 樓，是要我綁多少氣球演天外奇蹟！」

怎麼和 RD 配合製作 UI Animation (動畫)：https://blog.akanelee.me/posts/290551-and-rd-tie-how-to-make-ui-animation/

Apple Human Interface Guidelines
https://developer.apple.com/design/human-interface-guidelines/

https://medium.com/@penny40727/925db5b5a595
https://blog.akanelee.me/posts/192859-how-to-read-guidelineios-1/

網頁設計：波浪特效

google『css wave』、『css wave font』

https://codepen.io/tedmcdo/pen/PqxKXg

https://www.cnblogs.com/coco1s/p/7197662.html

移動端 App UI 設計，從哪個螢幕尺寸開始才正確？

https://medium.com/uxabc/artboard-size-5f0d457f7b32

http://www.woshipm.com/rp/579154.html

做圖時掌握兩大原則：

以 iPhone 8 的 375×667 pt 為主開始做

做好後也要用其他螢幕尺寸看看

Android 則是以 360×640 dp 為標準設計

使用 javascript 動態更改 CSS 的各種方式

https://www.jianshu.com/p/0260cddff86a

在很多情况下，都需要对网页上元素的样式进行动态的修改。在JavaScript中提供几种方式动态的修改样式，下面将介绍方法的使用、效果、以及缺陷。

1、使用obj.className来修改样式表的类名。
2、使用obj.style.cssTest来修改嵌入式的css。
3、使用obj.className来修改样式表的类名。
4、使用更改外联的css文件，从而改变元素的css

下面是一段html代码和css代码用来解释上面方法的区别的。

CSS

.style1{margin:10px auto ;background-color:#9999FF; display:block;color:White; border:1px solid white; padding:10px 25px; font-size:18px; }

.style1:hover{ background-color:#66B3FF; cursor:pointer;}

.style2{margin:10px auto ;background-color:gray; display:block;color:black; border:1px solid white; padding:10px 25px; font-size:18px; }

.style2:hover{ background-color:black; color:White; cursor:pointer}

HTML

<div>
<input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
<div id="tool">
<input type="button" value="【obj.style.className】更改样式" onclick="changeBackgroundColor()"/>
<input type="button" value="【obj.style.cssText】更改样式" onclick="changeFontSize()" />
<input type="button" value="【obj.className】更改样式" onclick="addRadius()" />
<input type="button" value="更改外联css样式" onclick="recover()" />
</div>
</div>

一、使用obj.className来修改样式表的类名

从下面的代码可以看出ob.style.cssTest是如何来btnB的样式的。

function changeStyle1() {
var obj = document.getElementById("btnB");
obj.style.backgroundColor= "black";

}

该段代码修改btB的文字的颜色，在浏览器中打开调试工具，可以发现btB标签中多了一个属性【style="background-color:black"】，从而改变btB的样式。

缺陷：
在修改btB的背景色之后用鼠标放到btB上可以发现，btB的伪类hover里面的css根本不起作用。原来是当你修改了这个这样样式之后。在btB的内联样式中多了background-color属性了，在css的应用中也是有级别的，嵌入式>内联式>外联式。而btB的hove伪类的background-color样式写在内联式中，所以嵌入式的background-color覆盖了伪类中，这就使得鼠标放入btB上感觉不到背景颜色的变化。

二、使用obj.style.cssTest来修改嵌入式的css

直接上JavaScript代码：

function changeStyle2() {
var obj = document.getElementById("btnB");
obj.style.cssText = "background-color:black; display:block;color:White;

}

该段代码和【一】中的效果是一样的，缺陷也是一样。

三、使用obj.className来修改样式表的类名

使用代码来修改btB引用样式的类名，如下段代码：

function changeStyle3() {
var obj = document.getElementById("btnB");
//obj.className = "style2";
obj.setAttribute("class", "style2");
}

通过更改btB的css的类名的方式来更改样式，更改样式类名有两种方式。1、obj.className = "style2"; 2、 obj.setAttribute("class", "style2");都是一样的效果。

用这种方式来修改css比上面的效果要好很多。

四、使用更改外联的css文件，从而改变元素的css

通过更改外联的css文件引用从而来更改btB的样式，操作很简单。代码如下：

首先得引用外联的css文件，代码如下：

<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>

function changeStyle4() {
var obj = document.getElementById("css");
obj.setAttribute("href","css2.css");
}

这样也能方便的更改btB的样式，个人觉得这种方式是最好用的。是实现整体页面换肤的最佳方案。

CSS Fonts - 系統內建字體的相關設定

詳閱 https://www.w3schools.com/css/css_font.asp

SVG 動畫範例

打勾勾、打叉叉：https://codepen.io/elevaunt/pen/JYRBzJ
波浪、微笑曲線：https://codepen.io/thebabydino/pen/CxkHm

Alert、confirm 及 prompt 對話盒

http://www.takka.com.hk/jstutor/ch3/ch3.htm

在實務應用上，Javascript 原生的對話盒外貌與 OS系統的警告視窗太過相似，會帶給網站訪客/用戶心理上不好的感受，所以僅可參考其邏輯流程，並重新設計與自身網站美術設計渾然一體的動態 Dialog 與 UX。

CSS 排版兩大利器：Flexbox vs Grid

网页布局（layout）是 CSS 的一个重点应用。

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

CSS 终极之战：Grid VS Flexbox

Flexbox 是为一维布局设计的，而 Grid 是为二维布局设计。

https://zhuanlan.zhihu.com/p/31952490
https://itw01.com/2HBQEPH.html

內容優先 vs 佈局優先

Flexbox 以內容為基礎， Grid 以佈局為基礎。

Flexbox 以內容為基礎，為一維布局而設計

https://eden-liu.com/frontend/css3-flexbox-key-points/
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
https://www.oxxostudio.tw/articles/201501/css-flexbox.html
https://wcc723.github.io/css/2017/07/21/css-flex/

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

CSS3 Flexbox，是一種優於傳統 float 僅能水平流動的排版，更能做到置中、垂直與等距等等。

軸線觀念

主軸：
- justify-content
- 可對其主軸的起點、終點或等距排列
交錯軸：
- align-items
- 可對其交錯軸的起點、終點或置中
flex-direction，可改變主軸的方向性 (預設主軸是由左至右)
- 水平
- 垂直
- 反轉

外層屬性

display：必備屬性
flex-flow
- flex-direction：決定 flex 軸線
- flex-wrap：決定換行的屬性
justify-content：主軸的對齊
align-items：交錯軸的對齊

內層屬性

flex
- flex-grow：伸展比
- flex-shrink：收縮比
- flex-basis：絕對值
order：排序
align-self：單一物件的交錯軸對齊

接著來看一下細部的屬性介紹

flex-direction

對齊方法

row (default)
row-reverse
column
column-reverse

justify-content

主軸對齊 (外層) ，依據主軸的軸線決定物件之間的間隔方法

以下是 justify-content 所有屬性：

flex-start
flex-end
center
space-between
space-around

節錄：MSDN

align-items

交錯軸對齊 (外層)，垂直於主軸的對齊方法

flex-start
flex-end
center
strech：拉滿整個軸線
baseline：與文字的行高有關係，以文字基準線來排列

節錄：MSDN

align-self

交錯軸對齊 (內層)，內元件本身垂直於主軸的對齊方法

flex-start
flex-end
center
strech：拉滿整個軸線
baseline：與文字的行高有關係，以文字基準線來排列

以骰子布局為例子，實作所有基礎寫法範例：
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

看看Flex如何实现，从1个点到9个点的布局。有 codepen 可以查看Demo。
詳閱該文章有完整說明。

Grid 以佈局為基礎，為二維布局而設計

http://muki.tw/tech/css-grid-note/
https://blog.techbridge.cc/2017/02/03/css-grid-intro/

幾年前出現的 FlexBox 宛如神兵利器，讓我們可以擺脫這些困擾，快速進行排版，而隨著 CSS Grid 規範的出現，我們即將有更好的武器了！

CSS Grid 不是要來取代 Flexbox，他們是相輔相成的角色，flex 可以看作是 one-dimensional layout solution，CSS Grid 則是 two-dimentional layout solution，用來解決我們所有先前需要各種 hack 才能完成的頁面佈局。

不過包括 IE 在內的舊瀏覽器仍是無法支援 CSS Grid 的。

IE exist. Use Grid?
https://www.youtube.com/watch?v=7msERxu7ivg

想從設計走到前端？先了解前端在幹嘛吧！

想從設計走到前端？先了解前端在幹嘛吧！
http://muki.tw/diary/front-end-introduce/

設計的工作流程

身為一個過來人，應該說我也還正在這條路上行走，有一些心得想跟大家分享。我是從設計起家的。設計的領域又可粗分為圖示設計跟排版設計…等等，而我是屬於排版這一塊。做網頁的流程大致是：

打開 PhotoShop / Sketch 從一張空白的圖層開始做出一個網站
進切版(用 PhotoShop / Sketch 切出需要的 icon) 以及 Layout (用 HTML + CSS 做出網站)
會碰到 JS 的互動時，我能找套件就先幫忙做好，不行就放著給後端
丟給後端套程式。

如果你不是純視覺，我想你的工作流程可能跟我差不多。那，這樣不算是前端嗎？

前端的工作流程

事實上，前端沒有大家想的那麼簡單歐，不過還是有個簡易版的工作流程(俗稱「看得到」)，流程大致為：

收到視覺給的設計稿(通常是 PSD 存成的 JPG 圖片檔)，跟視覺討論一下了解動線
開始切版(用 PhotoShop 切出需要的 icon，可由視覺提供，也可能自己要會一點 PhotoShop) 以及 Layout (用 HTML + CSS 做出網站)
開始做出 JavaScript 互動，不管是用套件還是自己刻
跟後端配合串資料，將後端提供的資料(通常是 API) 接到網頁上，使其能順利呈現資料

(按：「看得到」意指瀏覽網頁時看到的樣子，包含網頁長相 (HTML + CSS)，用滑鼠或鍵盤點選的互動 (JavaScript)，我們通常也可稱之為 Prototype )

前端與設計的工作流程差異

比對一下設計的工作流程，主要的差別在於：

前端不產視覺 (廢話)
前端跟設計都要會 HTML + CSS 做出靜態網頁 (除非你是純視覺設計)
前端要比設計懂 JS，不只會套會用，還要會寫，厲害一點的人還會自己寫 plugin
前端要懂一些後端的東西，包含如何互丟、接資料，簡單來說就是要懂得如何處理 Client 端 & Server 端的訊息

(按：「純視覺設計」一職通常是大公司才會開這樣的缺，有想了解其中差異的，可以留言告訴我你想看，這樣我才有動力再寫一篇XD)

有沒有開始覺得前端很令人抖抖？光是要會刻 JavaScript，應該就有很多設計卻步了吧！更別說還要跟後端串啊～！

畢竟從以前的觀念就是，做設計的畫面比較強(右腦發達)、寫程式的人邏輯比較強(左腦發達)，除非很有才，否則很難左右腦都開發的完完整整。
但也別灰心，邏輯這東西是可以被訓練的喔！也許一開始寫的很差，只會土法煉鋼；但我相信寫久了、多看別人的 code，或是有好的主管帶領你，絕對可以慢慢進步！一起加油吧。

前端要做的工作

看到這，有沒有燃起了濃濃的信心！不過前面這些還只是前端「看得到」的工作，接下來，來告訴大家什麼是前端「看不到」的工作吧。
請先看這張流傳已久、強大的前端架構圖：

哈哈，有沒有驚了一下，所謂「看得到」的部份才只是冰山一角罷了。剛剛升起的自信心是不是又被打擊了呢！

假設你只是吞了一下口水，卻還是對前端很嚮往、很有愛，還是想轉前端試試看，我最後跟大家分享一下，你可以從哪些部份開始學起。(老話重提一萬遍：這是我自己的經驗，不是每個人都適用，所以大家可以參考看看，有喜歡的就吸收，沒喜歡的也別吐嘈，但歡迎討論)

從設計走到前端，推薦的學習流程

Step.1 結構化、模組化你的 HTML/ CSS code

我覺得設計跟前端寫出來的程式碼，最大的差別就在這。前端的邏輯性很重，他們會把自己寫程式的經驗往回套到 HTML / CSS 裡，並且以模組化和用 slim, scss 等工具為樂(尤其看到 HTML / CSS 可以使用 function 或是變數，眼睛就整個亮起來 XD)。

當然，我們這群轉職者不需要強迫自己眼睛亮起來，也不需要為了跟風而去用這些工具，就我所知還是有很多前端界的大老是不用 slim, scss 取代原本的 HTML / CSS，除非你真的從裡頭找到對你有幫助的點，否則工具只是輔助，你也還是要懂 HTML / CSS 的本質流程，才能寫出好的 code。

為了友好的跟其他前端人員 co-work，以及和後端人員溝通，你要先嘗試修改自己的 HTML / CSS code 發想思維，這部份很博大精深、也很看經驗，不過還是有幾篇文章可以給大家參考：
1. 成為 CSS 團隊的一員：CSS 團隊開發的最佳實踐 / MSDN Magazine
2. CSS-Guidelines ：編寫易於管理及維護的 CSS 的指導綱要

至於 HTML 的 markup 同樣也是很多眉角可以拿出來討論，加上每個人都有自己的想法，討論個三天三夜大概也說不完。如果你不知道要聽誰的意見好，那請以「你工作團隊的意見」為優先考量，畢竟你是要跟他們一起工作，而不是跟外面的那些討論者。多討論彼此能接受的寫法，並且嘗試將其他人的寫法吸收納入，等到以後你變成有決定權的人，就可以訂套 Guildline 出來啦(好像扯太遠了XD)

Step.2 JavaScript 不得不練，一定要練！

我想這沒什麼好說的了，這就是前端吃飯的工具阿 XD，你能不練嗎？如果真的學不起來 JS，或對 JS 沒興趣，那..你可以考慮往圖示設計或純視覺前進！？

前陣子在 JSDC，Even Wu 有個演講：如何教設計師前端技術。他在裏面提到：「不要丟一本工具書給設計」，設計是視覺的動物，你要先給他看網頁特效，如果他覺得有趣，他就會自己去學、去找。

大致來說是這樣沒錯，學做網頁本來就是要有興趣 XD。但有興趣只是領進門的必要條件，打好基礎才是能學到東西的重點。所以我認為，還是要給設計一本工具書，如果你想直接看網站文件也可以啦 XD。

工具書的重點是在打基礎，沒有這些基礎，你看到有趣的特效還是只會套用。但如果你真的想走前端，至少要懂得怎麼套用、怎麼改點 function、怎麼調用變數 … 等等吧！

雖然 Even Wu 演講的時候提到的例子是以 CSS3 為例，不過不管是 HTML / CSS / JavaScript…任何程式語言，「基礎」永遠是最重要的喔！，地基不先打穩，房子倒了都不知道是什麼問題呢 XD

Step.3 學會用 Developers tools 進行網頁除錯

Developers tools (開發者工具) 這也是一定要會的！有在寫 HTML / CSS 的人對他應該都不陌生了，利用開發者工具進行網頁除錯，應該是每個人必備的技能。

而如果要往前端邁進，必須將開發者工具的使用範圍擴大，除了「Elements」之外，你要開始學習「Network」、「Timeline」、「Console」…等這些面板的運用，假設你是使用 Google Chrome，Google 有提供一系列的相關入門教學，請大家好好認真研讀！！！

就連我自己也要認真研讀呢(握拳
如果很會用開發者工具進行除錯，對於網站的製作絕對可以省時省力(想想你們以前在用「Elements」的那種愉快之心吧 XD)

Step.4 你要開始在乎網頁效能

以往身為一個設計，只要把 layout 後的網頁檔丟出去就沒你的事情了(除非套程式的時候跑版 XD)，但身為一個前端，你要開始注重網頁的效能，包含網頁讀取時間、網頁大小、連線數、元件載入的時間順序…等等阿裡不達所有關於「時間」的議題；甚至也要關心網站在 mobile / PAD 的效能喔。

其實說到這我一直很疑惑，以往 56k 逼逼逼數據機連線的時代，大家網頁動輒讀取 30 秒以上都在可忍受範圍，現在頻寬愈來愈大，大家卻連 1 秒都不願意等，這反差實在讓我百思不解(個人碎碎念請忽略)

至於哪些元件會影響網頁效能呢？舉凡所有網頁檔案都會喔，每個檔案都是一個連線數，所以這也是為什麼我們要用 css sprite, lazy loading, coding optimize 等技術，就是為了讓效能變好。這裡有一篇 20 個線上測試網站速度的工具給大家做參考，我自己首推 Pingdom Tools。

以上這些，是我自己的前端入門，所以我也推薦給各位，如果你覺得跟你的狀況雷同，不妨參考。

至於前端串後端，我倒是覺得可以慢慢來，因為反過來思考，後端也是要懂如何串前端，假使一開始不熟，可以先請教後端再慢慢補強。其他的前端工作也是一樣，都可以透過學習再慢慢加強，但我認為首重還是前面這幾點。

從設計轉前端，是一條強大且漫長的路，跨過去了就是你的；跨不過也不要氣餒，純視覺設計也是一條強大且漫長的路喔，大家一起加油吧：)

從 CSS sprite 進化到 SVG sprite

從 CSS sprite 進化到 SVG sprite：
http://muki.tw/tech/css-to-svg-sprite/

Web Icon Font (簡稱 icon font)：
https://www.oxxostudio.tw/articles/201406/css-icon-font.html

未来必热：SVG Sprite技术介绍
https://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/

SVG 的使用細節：
http://www.ruanyifeng.com/blog/2018/08/svg.html
https://zhuanlan.zhihu.com/p/25016633
https://github.com/YIXUNFE/blog/issues/31
https://www.oxxostudio.tw/articles/201410/svg-tutorial.html

CSS Sprite：

可以有效減少 HTTP 需求，但他終究是圖片，只要把網站等比放大，圖片就可能會失真。在現今螢幕解析度提高，以及 RWD 網站盛行的環境下，用 CSS sprite 要面對的可能就是這種失真的小瑕疵。

另外一個比較惱人的困擾，就是要把所有的 icon 排在同一張圖片，再自己算出定位，其實很麻煩。雖然可以使用 compass 這樣的 CSS 預處理器幫忙，但也不是所有人都用 compass 啊。

Web Icon Font：

好處是解決了「失真」的困擾，因為即使放大縮小，它的本質還是文字，文字放大縮小是不會失真的，可以保持它原有的清晰度。

但困擾來了，正因為他是文字，所以必須乖乖遵守文字的規範，我們常碰到的問題就是在「鋸齒」與「抗拒齒」之間徘徊，通常瀏覽器都會替文字進行抗拒齒的優化，以免放大閱讀文字時，會有凹凸不平的鋸齒狀，有的時候，某些圖標我們需要這些鋸齒，但另外一些圖片我們需要抗鋸齒，線段類的圖案、圓弧狀的圖案 … 等等，會依照不同的樣式有不同的需求。

Icon font 還有其他不方便的地方，例如受到 font-size, line-height 等等字型屬性的限制。一次要載入上百張 Icon font 的字型檔，但實際上用到的只是那幾張小圖，浪費了讀取的時間。最後還有一點是各家的 Icon font 整合不易。

補充資料：
Icon Font 導入 SVG 後，開始支援彩色圖標，通過一些技巧，支持像字體那樣，可以通過 font size 或 color 來微調。

IcoMoon，他是一個整合眾家 Icon font 的網站，此外也支援 SVG 匯出。

SVG sprite：

在講 SVG sprite 之前，需要先簡單講一下什麼是 SVG。SVG 簡單講就是用程式碼畫圖，這句話傳達了兩個意思：一、你必須要寫程式碼；二、他是不會失真的向量圖。

SVG 圖片所有的線段(<path>)都是寫在 HTML 裡面，然後再利用 CSS 屬性去修改它的顏色、大小等樣式。

每一張圖片都有一個自己的 <path> 或者 <circle> 等屬性，通常會寫在網頁的最上方，再利用<use xlink:href="#icon-video-camera"></use>呼叫。

雖然使用 SVG 可以有效解決解析度、鋸齒等等問題，但如果要載入多張不同的圖片，程式碼會拖得很長。為了解決這個問題，我們可以改用 SVG sprite，也就是將所有圖片存在 SVG 檔案，再從 HTML 呼叫他。

SVG sprite 實作

以 IcoMoon 網站為例，先選好你要的圖片，在匯出 SVG 之前勾選 Include Tiles (CSS Sprite)

解壓縮之後，找到sprite/目錄，裡面有一個sprite.svg，原理就跟 sprite.png 一樣，會把所有圖案排列整齊，差別在於它是向量圖，放大縮小都不會失真。

接下來只要在 HTML 載入這張 SVG 檔案，並且透過ID去呼叫對應的 icon 就可以了。

<svg class="icon" xmlns="http://www.w3.org/2000/svg">
 <use xlink:href="sprite.svg#icon-facebook"></use>
</svg>
<svg class="icon" xmlns="http://www.w3.org/2000/svg">
 <use xlink:href="sprite.svg#icon-feed"></use>
</svg>

在 xlink:href 的地方，輸入這個 svg 檔案的相對路徑，後面再寫 ID 即可，跟 CSS sprite 相比是不是簡單許多呢。我們不需要再寫 background-position 去調整他的位子，往後要新增其他的 icon，直接打開 sprite.svg 編輯就可以了！

使用 IcoMoon 的 SVG sprite 注意事項：

IcoMoon 可以直接提供我們 SVG 的 path 程式碼，而且可以個別匯出，但如果想用 IcoMoon 做 SVG sprite，需要特別注意一件事情，就是可能需要自行修改它的 SVG 檔案。

什麼意思呢？因為 IcoMoon 把 icon 的顏色、大小都寫死在 SVG 檔案裡，這恐怕不是很好的管理方式。

以icon-facebook為例，IcoMoon 是這樣寫的：

<svg id="icon-facebook" width="32" height="32" viewBox="0 0 32 32" x="48" y="0">
<path fill="#444444" d="M26.667 0h-21.334c-2.945 0-5.333 2.388-5.333 5.334v21.332c0 2.946 2.387 5.334 5.333 5.334h10.667v-14h-4v-4h4v-3c0-2.761 2.239-5 5-5h5v4h-5c-0.552 0-1 0.448-1 1v3h5.5l-1 4h-4.5v14h6.667c2.945 0 5.333-2.388 5.333-5.334v-21.332c0-2.946-2.387-5.334-5.333-5.334z"></path>
</svg>

以下則是建議修改後的版本：

<svg>
 <symbol id="icon-facebook" viewBox="0 0 32 32">
  <path d="M26.667 0h-21.334c-2.945 0-5.333 2.388-5.333 5.334v21.332c0 2.946 2.387 5.334 5.333 5.334h10.667v-14h-4v-4h4v-3c0-2.761 2.239-5 5-5h5v4h-5c-0.552 0-1 0.448-1 1v3h5.5l-1 4h-4.5v14h6.667c2.945 0 5.333-2.388 5.333-5.334v-21.332c0-2.946-2.387-5.334-5.333-5.334z"></path>
 </symbol>
</svg>

可以發現改用 <symbol> 管理 icon，並且移除了他們固定的樣式，當然要更加結構化，可以再加上<title>或<def>等標籤。

重點在於，如果不把 IcoMoon 寫的樣式移除，我們將無法用 CSS 控制這些樣式，所以請特別記住這一點！

筆者將 IcoMoon 跟修改後的 SVG 檔案放在網站上，可以自行打開原始碼比對。

IcoMoon：http://muki.tw/blog-demo/svg-sprite/sprite-icomoon.svg
MUKI edit：http://muki.tw/blog-demo/svg-sprite/sprite.svg

訂閱：文章 (Atom)

The 21st century