How to use icon fonts in your mobile apps
在任何APP設計中實現可圖形的向量縮放最完美的方式是使用字型圖示.
移動端的設計變的越來越複雜。原因在於多樣的螢幕尺寸與不同的解析度。 Native版APP幾乎無法提供畫素級別完美的視覺體驗。
當我們設計APP介面中各種圖示時，我們不得不面臨兩方面，好的一面是，使用真實的icons，即使用畫素設計出吸引使用者的互動介面，這樣的互動介面能更好的幫助使用者理解和使用你的APP，不太好的一面就是繁瑣乏味的“重複工作”。一旦你的傑作完成了，你得開始切片、組織、優化、適配等工作，在開發人員將你的視覺設計應用於不同裝置中時，這些工作始終慣穿於每個專案。
基本上我非常愛用畫素圖示，但我最近發現我花太多時間在清理資料夾，尋找不同規格的目標裝置。儘管市面上有眾多的外掛幫你從單個圖片源匯出成多種方案的圖示與圖形，追蹤優化各種解析度、作業系統下圖片的優化是項可以避免的苦差事兒。讓我們看一看基於向量的圖示字型(icon fonts)
利用Fontello網站的圖示字型生成器，我們分分鐘就可以生成一組圖示
Friends with benefits (炮友？)
當在設計產品UI時，我們許多美工都儘量不使用畫素圖片，而更傾向於使用向量圖，是有各種原因的。舉個粟子，在一個需要快速變更需求又要求保質的的團隊中工作。保持檔案大小的可維護，以及讓UI能適應各種尺寸螢幕，這些都是向量圖形應用時的小功能。向量圖形能讓你在一個長期的專案不會抓狂的渡過。
在面對自適應、載入時間或retina屏等問題時，基於向量圖形的解決方案已成為基本解決方案了，就像CSS效果，為不同使用者設計高質量的WEB UI，由於近期瀏覽器在自定義字型上的較好的支援，很多美工甚至將它們的icons做成web fonts，這一樣是基於向量圖形好處理由。
作為一名移動端的美工，花費了太多時間在切割、組織、打包圖形上，我曾好奇是否可以在native的app上應用這項高階的web技術。
希望能夠不再關注解析度、裝置尺寸，真正關注於設計本身的工作,我決心使用圖示字型(icon fonts)來增強IOS和ANDROID APP的UI
在應用屬性列表內載入專案資料夾內使用者自定義字型
對於可縮放的自適應設計來講，Icon fonts是一種驚人的解決方案。
在開發native app時，你應該記住icon fonts技術有多項超過點陣圖的高階特性，這些特性所帶來的好處會影響你的設計工作流，以及產品的最終品質。
可縮放性（Scalability）：
基於字型的icon是與解析度無關並能縮放到任何想要程度的技術。你的圖示看起來毫不關心retina,HDPI,XHDPI等等螢幕，但渲染時會根據目標裝置自動調整，你將有能力應對任何當下，未來，或大多數任意規格的裝置
尺寸（Size ）：
裁剪到正確的比例，icon font的檔案的大小要比起點陣圖小到難以置信的程度，使用icon font時，你不需要根據不同裝置準備不同的圖片，你的APP只需要在啟動時載入一次icon font檔案即可。
可維護性（Maintainability）：
自你的icon打包進一個字型檔案，在專案自始至終你僅需要維護這個單一的字型檔案。
通過管理字型檔案你可以很自然的組織你的icon集合，任意的進行修改或擴充套件
可推廣性（Adoption）：
然而，應用這樣的icon fonts可能會影響你和你同事之間的工作流程，但說服讓他們採用這樣的技術也非常簡單，有數款免費或收費的工具幫你輕鬆達到目的並能看到很好的應用結果，在幾乎任意（手機）移動平臺、瀏覽器或作業系統
靈活性（Flexibility）：
應用icon fonts技術中最有意義的一項能力是可以操縱icon fonts， 改變顏色，大小，僅僅幾行程式碼就可以在瞬間改變外觀
可互動性(Interactivity)：
由於靈活性以及能夠通過程式碼方便的操縱，icon fonts 是獨一無二的在執行時被操縱，通過應用icon fonts技術， 你能輕鬆的在不同狀態顯示對應的不同效果，建立動畫。
雖然icon fonts為設計提供了眾多好處為一些有趣的設計提供可能性，自然地，它也不是全權的解決方案。一旦你的設計中需要的顏色超過一種，實現複雜的視覺設計，icon font就有限制了。無認如何，主流與非主流的icon fonts都能在網際網路上找到，在我們使用之前web設計界已經很流行了，並有很多服務幫你建立夢幻的icon fonts集合
通過xcode中的outlet connection, 在view呈現後，你還能很方便的改變label
Using icon fonts on iOS
在IOS中使用字型圖示
在IOS中應用icon font非常的簡單粗爆。在一開始你最好通過使用Fontello或IcoMoon收集一些圖示並整合進你的APP。另一種方法是你自己花時間自己做出來，但創造性的工作的總要花掉你很多時間。
那麼現在我們僅僅需要將得到的icon整合進我們的APP
你只需要懂得IOS開發基本的檔案結構以及.tff字尾的字型檔案icon font
為了測試icon font技術，我們在Xcode內新建一個Single View Application的工程。工程建完後就把你的字型檔案複製進工程目錄，如果不出什麼意外，你應該在你的Project Navigator中看到對應的字型檔案了
為了讓Xcode理解你將要如何使用匯入的檔案，你得在你的應用程式的Info.plist內建立“連結”。這個plist檔案在Supporting Files資料夾內，表現為meta data即可理解為hash表。為了在編譯app時能包含進你的字型檔案，在list上簡單新建一行（右鍵然後add row）名字選擇為Fonts provided by application，在其下給字型檔案取個名字，名字就是你的應用程式中用來識別你的字型檔案的。在我們這個測試工程中，值為fontello.ttf。現在Xcode知道了我們匯入的檔案能幹什麼，我們能在程式中使用匯入的字型檔案了
把你的app切換到storyboard模式，在view中你喜歡的地方放一個label元件用來顯示icon，在設定完label後，我們需要建立一個outlet。
在storyboard中做這些事情都很簡單，在Assistant Editor Mode模式下
此模式下顯示了你的圖形介面和ViewController介面。現在簡單的按住ctrl鍵，從label元件拖動就會現線條，直接拖線條到ViewController到@interface這行程式碼上放開就會彈出一個小介面，輸入名稱，比如 iconLabel，outlet就建成了，程式碼中你會發現多了下面這樣一行：
@property (weak, nonatomic) IBOutlet UILabel *iconLabel
現在你就能通過程式碼來控制label元件了，通過編輯ViewController（.m字尾的檔案）設定label。在viewDidload方法內加入以下幾行程式碼，就像下面那樣
( void)viewDidLoad{
[super viewDidLoad];
[iconLabel setFont:[UIFont fontWithName:@"fontello" size:130]];
[iconLabel setText:[NSString stringWithUTF8String:"\u2692"]];
}
新增的第一條程式碼用來定義字型應用於label並設定字號，這裡我們設定了130pt
在使用這些命令時要注意字型名稱，這裡要填寫字型的真實名稱，即在字型簿開啟的字型名或任何其它編輯器內能顯示的字型名稱。特別注意這點，因為字型名很可能與字型檔名稱不一樣
在第二行中文字用Unicode字元 Hammer and Pick (2692)編碼。
雖然有點神祕，獲取icon字型的unicode字元編碼還是比較容易的。可以使用字型編輯器，或者直接上傳到Icon Moon這類網站，你可以毫不費力的將icon字型轉換成unicode編碼
你可以通過Android XML 語法來申明任何你想要的UI屬性
Colours, gradients and shadows
現在icon“引用”已經建立，你都搞定了。在我們通過程式碼操作label前，你得先執行看看你的工作成果。最終，這也是你將icon字型合併進app所要做的。從現在開始有趣的事兒才開始。文字的所有操作都由你掌控了，例如：顏色，透明度，漸變，陰影。
例如應用以下幾行程式碼 ，讓icon變成紅色+陰影：
iconLabel.textColor = [UIColor redColor];
iconLabel.shadowColor = [UIColor blackColor];
iconLabel.shadowOffset = CGSizeMake(1.0f, 1.0f);
有許多效果可以使用。一些相對來說比較複雜，但所有文字效果都通用。動畫或任何複雜的操作只要你能想到的都可以做了
Using icon fonts on Android
在Android中應用字型圖示
同樣的，在開發Android應用時也一樣能使用icon fonts就像用在ios上面一樣，能得到一樣的好處。
就應用範圍而言，Android更加有意思更有用。因為Android有著更多不同解析度，不同螢幕的裝置平臺。最重要的是Android預設不支援向量圖形，這對開發者和設計人員面對不同Android裝置時可是一個重大打擊
在開始開發你的新Android應用之前，你僅需要知道一個app最基本的檔案構架，同樣的icon font檔案也是.tff字尾，使用包含了Android ADT的Eclipse IDE，你可以開始新建一個Blank Activity的Android Application Project。在專案設定後，複雜.tff檔案到你的資原始檔目錄內。一旦複製成功，Package Explorer皮膚內應該能看到
接下來，在你的Main Activity View內建立一個TextView。你可以在layout資料夾內找到你的資原始檔。檔名應該是 activity_main.xml。在多數情況下，Android SDK已經將一個文字為“Hello world”的TextView放到了你的View內，我們就能使用這個TextView了。
在定義Icon各屬性後，你能在模擬器內看到你的icon了。
為了操作TextView,我們需要將圖形模式切換到切換到XML View內。現在為TextView新增一個ID，以便接下來UI和程式碼建立引用關係
你的TextView應該看起來像下面這樣
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:id="@+id/iconLabel" />
通過使用ID，我們能夠在APP內任何地方操作TextView。現在你可以切換到MainActivity.java檔案新增一些程式碼來載入icon font了。在MainActivity內有一個方法名為onCreate的方法。載入和應用icon fonts都在此方法內，如下
TextView iconLabel = (TextView) findViewById(R.id.iconLabel);
Typeface font = Typeface.createFromAsset(getAssets(), "fontello.ttf");
iconLabel.setTypeface(font); iconLabel.setText("\u2692");
和上面的IOS例子很像，通過引用到label元件，我們告訴Android應該使用哪個自定義字型到TextView上面。之後幾行使用Unicode字元編碼，這次以JAVA方式而已。執行程式後你就可以看到你的icon在Main Activity的View上了
在應用成功後，你可以根據你的需要操作icon了。Android UI構建通常由interface builder或組織XML檔案來實現，要新增一些效果，只要回到Main Activity的XML部分找到新增了Label ID的地方，新增一些程式碼就可。例如新增以下程式碼會讓你的icon變大，帶點透明的紅色，並伴有陰影。
android:id="@+id/iconLabel"
android:textSize="120dp"
android:textColor="#ccff0000"
android:shadowColor="#99000000"
android:shadowRadius="2" />
有很多的效果可以應用。就像在IOS中一樣，動畫或者複雜的操作都由你掌控了。最大的好處是自定義的icon fonts可以廣泛的適配各類作業系統。任何支援自定義icon fonts的平臺都允許你使用全新的這些效果
使用字型編輯器，你能優化現存的icons或解放你的思想讓你建立出自己的傑作
Wrap up
總結一下
在開發native app時使用icon fonts有著難以置信的好。考慮到icon fonts的可縮放性，在你設計任何移動裝置APP時，你幾乎可以忽略螢幕大小及解析度。最大的好處莫過於，在app中icon fonts的靈活性，在整個app執行過程中中都可以操作，支援實時效果和動畫。此外由於icon fonts較容易的適配，在設計工作和主要管理工作中可以增強整體工作流程事半工倍，無論面對的是何種解析度或螢幕密度。
譯者的話
要應用字型圖示，首要的條件還是要擁抱扁平化的設計
為什麼要扁平化？
- 讓設計從技術實現上更簡單
- 蘋果，谷歌，微軟，都相繼推出扁平化或類似的設計語言
- 在手持裝置或車載裝置上，扁平化的大色塊設計更容易識別與操作
- HTML5實現扁平化的UI效能更好
- 扁平化大色塊的設計，使用PNG圖片擁有更好的壓縮比率，圖片檔案更小
========================================================
英文原文，可能需要翻qiang：
轉載處請註明：部落格園(王二狗,池中物)willian12345@126.com
