差異處

這裏顯示兩個版本的差異處。

--- 公開:app視覺設計切圖方式 [2014/09/23 11:33]
kent
+++ 公開:app視覺設計切圖方式 [2018/08/16 17:15] (目前版本)
kent
@@ 行 1: / 行 1: @@
+====== 前言 ======
+雖然以下的說明洋洋灑灑，但大多僅是 iOS/Android 兩平台各自的一些規矩，再請您於切圖前做參考應該就不是大問題。
+以現況而言，若是要節省時間的作法，會建議您以 1080P (1080x1920)為全螢幕作為設計的基礎，切圖也是以此為基礎來切圖。
+這樣子會是最簡單，且可以同時提供給 iOS/Android App做整合使用的作法。
+也就是說，假設要切某個 Button 圖出來，您只需要準備兩套:
+  - 1080P為全螢幕時的切圖: 供 iOS 3x 環境，以及 Android xxhdpi 來使用。
+  - 8S(750Wx1334H)的 2x 切圖: 供iPhone 8 or 8S 等機種使用，但因為寬高比例與 1080P 時一樣，所以直接等比例縮小即可。
+P 手機是目前的主流，以此為設計基礎，可以更有效率的完成切圖。
 ====== iOS部分 ======
   * 所有檔案請以PNG格式輸出。
+  * **現階段切圖時，請您僅提供 2x 與 3x 的切圖。**
   * 1x/2x/3x的三種檔案的檔名以及尺寸需有連鎖關係，同一張圖檔:
-  * 1.檔名: abc.png abc@2x.png abc@3x.png **__只能使用英文、數字，且不可以有任意兩個檔案名稱重複。__**
+  * 1.檔名: abc.png abc@2x.png abc@3x.png **__只能使用英文、數字，且不可以有任意兩個檔案名稱重複。__**建議一律採用小寫英文檔名。
   * 2.尺寸: abc.png(50Wx50H) abc@2x.png(100Wx100H) abc@3x.png(150Wx150H)
-  * 主程式Icon: 需為PNG 1024Wx1024H的格式，且**沒有Alpha或者透明層**。
+  * 主程式Icon: 需為PNG 1024Wx1024H的格式，且**__沒有Alpha或者透明層__**以及**__不用切圓角__**。
+  * 主程式Icon: 也可以參考這個網址介紹的Template來產出：[[http://anyateng.blogspot.tw/2014/12/app-icon-template.html|App Icon Template]]
   * 歡迎頁(Launch Image): 即裝置的全螢幕尺寸，有多種款式，請參考[[https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1|Apple官方說明]]
+  * 若同一顆按鈕，有多種狀態時，請採用以下的命名方式:
+<file>
+abc@2x.png		Default
+abc_d@2x.png		Disable
+abc_f@2x.png		Focused
+abc_h@2x.png		Highlighted
+abc_s@2x.png		Selected
+</file>
   * 所有檔案請依照1x、2x、3x、示意圖、主程式Icon分成四個大目錄，底下再包含個功能的分類子目錄，以下圖為範例:
-{{:一般共用資訊:螢幕快照_2014-09-23_上午11.10.46.png|}}
+{{公開:螢幕快照_2014-09-23_上午11.10.46.png|}}
   * 格式的補充資料: [[https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1|Apple官方文件:Icon and Image Sizes]]
   * 若是有底圖的按鈕，請切出底圖即可，但是請提示上方的文字Size以及字型。
   * 歡迎頁上面若有多種元素，不用分別切開，直接提供一整張跟示意圖一樣的圖檔即可。
+  * 切圖時，圖片周圍的透空色區域越小越好。
+  * 除非特殊情況，所使用的字型務必使用iOS所支援的字型:
+  * [[http://support.apple.com/kb/HT5878?viewlocale=zh_TW&locale=zh_HK|iOS7的字型支援]]
+  * [[http://support.apple.com/kb/HT5484?viewlocale=zh_TW|iOS6的字型支援]]
+  * iOS Device Size：
+iPhone：
+{{公開:fourphones.jpg?600|}}{{公開:iphone_portrait_dimensions.png?300|}}
+iPad：
+{{公開:ipad_portrait_dimensions.jpg?300|}}
+  * navigation bar(上圖綠色部分)與status bar(上圖紅色部分)部分，在iOS6是無法更換status bar的background image，只能改變顏色(需要色碼)。但在iOS7之後，navigation bar與status bar是連為一體的，故可以放置background image。因此在設計iOS7的navigation bar background image時需注意尺寸為44+20=**64H**(1x)，而設計iOS6之前的navigation bar background image時只需要**44H**(1x)就好。
+  * navigation bar上的標題是可以不放文字放圖片的，但不論iOS7或iOS6均須符合**44H**的限制。
+  * 設計iOS7的Navigation bar時可不包含Status bar，這時候只需**44H**(1x)的圖就好，整個版面部分也可以算成延長20H。
+  * 參考文章：[[http://www.iosres.com/|iOS Device Sizes]]
+====== Android 部分 ======
+  -   Android上是以dpi(dots per inch)為單位計算螢幕大小, 依照dpi可分為幾種尺寸
+  *   ldpi (low) ~120dpi
+  *   mdpi (medium) ~160dpi
+  *   hdpi (high) ~240dpi
+  *   xhdpi (extra-high) ~320dpi
+  *   xxhdpi (extra-extra-high) ~480dpi
+  - 目前市面上常見的尺寸為
+  *   ldpi (low) - 240x320 pixels
+  *   mdpi (medium) - 320x480 pixels
+  *   hdpi (high) - 480x800 pixels
+  *   xhdpi (extra-high) - 720x1280 pixels
+  *   xxhdpi (extra-extra-high) - 1080x1920 pixels
+  - **現階段切圖時，請您優先依照 xxhdpi 來切圖，其餘格式有需要再補充即可。**
+  - 有序列表項目在Android內coding時採用dp(Density Independent Pixels)此種虛擬的解析度單位來方便dpi和pixels之間的換算,當螢幕為mdpi的時候, 1px = 1dp, 所以用mdpi的160dpi為基準, 則換算公式為：
+<file>
+px = dp * (dpi / 160)
+</file>
+以此計算倍率為下圖, 而xxhdpi為3.0x
+{{公開:screens-densities.png?200|}}
+所以建議的做法是, 先在mdip上確定了圖片的位置大小和效果都是你所想要的, 在用倍率乘上去就可以算出各種不同解析度所要的圖片大小,
+例如圖片的啓動icon：
+  * 36x36 (0.75x) for low-density
+  * 48x48 (1.0x baseline) for medium-density
+  * 72x72 (1.5x) for high-density
+  * 96x96 (2.0x) for extra-high-density
+  * 144x144 (3.0x) for extra-extra-high-density
+  * 192x192 (4.0x) for extra-extra-extra-high-density (launcher icon only; see note above)
+  - 除了 App Icon 之外，依照 Android 的規範，推播通知會需要另外一個 icon 它的相關規格說明如下:
+[[https://developer.android.com/guide/topics/ui/notifiers/notifications.html?hl=zh-tw|通知]]
+[[https://material.io/guidelines/patterns/notifications.html?hl=zh-tw#|Notifications]]
+以這個範例為例:
+{{公開:螢幕快照_2017-01-11_下午3.06.27.jpg|}}
+大張方形的部分的會放app icon，小張圓圈圈內會放一個小icon，一定要是全白的，這個icon他會出現在上方status bar上面的（電量，時間，網路這條）圓圈圈可以指定背景顏色，以下為一個設計範例。
+{{公開:pushicon.zip|}}
+  - 檔案命名規則：
+小寫a-z, 0-9, 不能包含特殊符號($%#^等等), 空白, 建議命名規則：ic_launcher
+  - 設計稿(示意圖)設計的提醒: 繪製示意圖請考量status bar 25dp(上方時間電量), navigation bar 48dp(下方back, home key)，有些元件比較多的頁面可能會因此調整UI。
+  - 若某個圖檔需要在使用時做延展的話，請採用 9patch 的格式，詳情請參考:[[https://developer.android.com/studio/write/draw9patch.html|Create Resizable Bitmaps (9-Patch files)]]
+  - 參考網址：
+[[http://developer.android.com/guide/practices/screens_support.html|外部連結]]
+[[http://jasonandroid.blogspot.tw/2013/10/android-pixel-dp.html|外部連結]]
+===== 其他工具 =====
+無損失PNG壓縮: https://itunes.apple.com/tw/app/wu-sun-tu-pian-shou-shenlossless/id704083918?l=zh&mt=12