差異處
這裏顯示兩個版本的差異處。
Both sides previous revision 前次修改 下次修改 | 前次修改 | ||
公開:app視覺設計切圖方式 [2017/03/10 18:08] 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 時一樣,所以直接等比例縮小即可。 | ||
+ | 1080P 手機是目前的主流,以此為設計基礎,可以更有效率的完成切圖。 | ||
+ | |||
====== iOS部分 ====== | ====== iOS部分 ====== | ||
* 所有檔案請以PNG格式輸出。 | * 所有檔案請以PNG格式輸出。 | ||
+ | * **現階段切圖時,請您僅提供 2x 與 3x 的切圖。** | ||
* 1x/2x/3x的三種檔案的檔名以及尺寸需有連鎖關係,同一張圖檔: | * 1x/2x/3x的三種檔案的檔名以及尺寸需有連鎖關係,同一張圖檔: | ||
* 1.檔名: abc.png abc@2x.png abc@3x.png **__只能使用英文、數字,且不可以有任意兩個檔案名稱重複。__**建議一律採用小寫英文檔名。 | * 1.檔名: abc.png abc@2x.png abc@3x.png **__只能使用英文、數字,且不可以有任意兩個檔案名稱重複。__**建議一律採用小寫英文檔名。 | ||
行 37: | 行 48: | ||
* 設計iOS7的Navigation bar時可不包含Status bar,這時候只需**44H**(1x)的圖就好,整個版面部分也可以算成延長20H。 | * 設計iOS7的Navigation bar時可不包含Status bar,這時候只需**44H**(1x)的圖就好,整個版面部分也可以算成延長20H。 | ||
* 參考文章:[[http://www.iosres.com/|iOS Device Sizes]] | * 參考文章:[[http://www.iosres.com/|iOS Device Sizes]] | ||
- | ===== Android ===== | + | ====== Android 部分 ====== |
- Android上是以dpi(dots per inch)為單位計算螢幕大小, 依照dpi可分為幾種尺寸 | - Android上是以dpi(dots per inch)為單位計算螢幕大小, 依照dpi可分為幾種尺寸 | ||
行 54: | 行 65: | ||
* xxhdpi (extra-extra-high) - 1080x1920 pixels | * xxhdpi (extra-extra-high) - 1080x1920 pixels | ||
+ | - **現階段切圖時,請您優先依照 xxhdpi 來切圖,其餘格式有需要再補充即可。** | ||
- 有序列表項目在Android內coding時採用dp(Density Independent Pixels)此種虛擬的解析度單位來方便dpi和pixels之間的換算,當螢幕為mdpi的時候, 1px = 1dp, 所以用mdpi的160dpi為基準, 則換算公式為: | - 有序列表項目在Android內coding時採用dp(Density Independent Pixels)此種虛擬的解析度單位來方便dpi和pixels之間的換算,當螢幕為mdpi的時候, 1px = 1dp, 所以用mdpi的160dpi為基準, 則換算公式為: | ||