【Android】減少App icon容量的方法 (二)

接續 【Android】減少App icon容量的方法

在使用Third Party Library (Android-Iconics)

去分析Apk後發現

明明只選了上百個icon中的7、8個icon，但fonts是把全部的icon font包進去，這樣對apk來說光fonts就佔全部的8.3%。但實際上   只使用了其中的 0.1% ~ 0.2 %。
不行，還要簡化。

所以，下一步

只把有用到的svg/vector image才包裝成ttf檔(字型檔)

• 之前貼的https://icomoon.io/https://icomoon.io/app/#/select
• 優點  操作簡單  有很多其他空間沒有的圖示
• 缺點  圖示雖然多  大部分要$，一些基本的google material free icon上面都沒有提供  
• http://fontello.com/ 目前測試使用中
• 優點  免註冊即可上傳  客製化的SVG icon  還有包含FontAwesome圖示
• 目前測試 隨便上傳3個SVG icon 產生出的客製化ttf文字檔，也才6KB而已。
• 對照上圖發現 fonts容量至少可以再壓縮80%以上。

【轉載】10 Rules for Creating a Mobile Look and Feel

ref：
https://medium.com/outsystems-experts/10-rules-for-creating-a-mobile-look-and-feel-dc81341660e4#.s6ly6utln

【Android】減少App icon容量的方法

ref:
http://developer.android.com/intl/zh-tw/tools/help/vector-asset-studio.html

Icon 下載(建議存成.svg檔，why? 為了後面步驟)

• https://thenounproject.com/
  
• https://www.iconfinder.com/

• https://icomoon.io/

SVG轉 Vector xml(以向量圖呈現xml檔)

• Android SVG to VectorDrawable http://inloop.github.io/svg2android/
• 或是使用Android Studio內建的工具

1.res -> right click -> New -> Vector Assert

2-1.可透過"Choose"選擇內建的PNG檔。
2-2.或是點選Local SVG file，指定PNG檔。

3.在這以指定的PNG檔作示範

4.就會在/drawable下產生，向量圖。
5.<!-- intrinsic size of the drawable -->

android:width="24dp"
android:height="24dp"

6. <!-- size of the virtual canvas -->

android:viewportHeight="16.0"

android:viewportWidth="16.0"

7.<!-- fill color -->

android:fillColor="#FF000000"

或是將多個svg/vector image包裝成ttf檔(字型檔)

使用上述工具https://icomoon.io/，可將多筆svg檔轉成icon font的ttf檔，可以做成同樣的效果。

原因：可參考Android — 讓APK裡的切圖容量減少95%的好方法

依照wiki上描述向量圖具有

• 儲存最少的資訊，檔案大小比位圖要小，並且檔案大小與物體的大小無關
• 在圖像處理軟體中，任意放大向量圖形，不會遺失細節或影響清晰度，因為向量圖形是與解析度無關的。無限地放大這個圓，它仍然保持平滑；用多邊形表示的曲線將會顯現出不是真正的曲線
• 在放大的時候，直線與曲線都不會成比例地變粗，它只會保持不變或者要小於縮放比例；為了看起來比較平滑，使用簡單幾何形狀表示的不規則曲線將會成比例地變粗，並且看起來不再像這些幾何形狀
• 儲存的物體參數可以在後面修改。這也就是說物體的運動、縮放、旋轉、填充等都不會降低繪製的精度。

...等優點。

或是使用Third Party Library (Android-Iconics)

這個套件內含五種圖庫（或稱字型）：

• FontAwesome：著名的網頁圖庫
• Google Material Design Icons：Google官方推出的Material Design Icon
• Meteocons：天氣圖庫
• Octicons：GitHub官方推出的圖庫
• Community Material Icons：社群版的Material Design圖庫

此library包裝了不少icon的字型，可直接使用，省去自己加工包裝的時間。

詳細介紹，可參考[Android] Android-Iconics 圖形套件。

【Mobile】UI Patterns(Android IPhone)

ref:
Best Practices for User Interface ( Android )

http://www.mobile-patterns.com/detail-views
http://android.inspired-ui.com/
https://stories.uplabs.com/the-material-design-countdown-for-2015-7c9e4d4e88fb#.hrkw9clid
http://www.android-app-patterns.com/

【UI】談談App UI

ref:
[翻譯] 如何修正壞 UI