關於置版
- 如果是共用同樣的UI,先做 Android 再做 IOS
- 起始製作畫布用2@:
- Android:720x1134
- IOS:640x1136
- 所有單位,全部用偶數
- 将垂直面和水平面都设置为8dp变量
單位:px
Android
|
IOS
| |||||
螢幕W x H
|
nav bg H
|
切圖bg
(不含狀態列)
|
螢幕W x H
|
nav bg H
|
切圖bg
(包含狀態列)
| |
1@
|
360x615
|
48
|
360x567
|
320x480
|
64
|
同螢幕高
|
2@
|
720x1230
|
96
|
720x1134
|
640x960
750x1334
|
128
|
同螢幕高
|
3@
|
1080x1845
|
144
|
1080x1701
|
960x1440
|
192
|
同螢幕高
|
4@
|
1242x2208
(iphone 6plus)
|
192
|
同螢幕高
|
Photoshop做圖置圖注意事項
- 起始製作畫布用2@:
- Android:720x1134(不含狀態列)
- IOS:640x1136 (包含狀態列)
- 所有單位,全部用8的倍數
- 用混合效果產生的陰影、框線,必須為2的倍數
- 點陣圖必須化為智慧型物件
- 形狀
- 必須採用向量,並勾選『對齊邊緣』
- 為8的倍數
- 圖層命名方式:
- 全部採用英文
- 一個頁面,一個資料夾,資料夾前加 - (減號)
- 底線區隔
- 全部小寫
- 屬性_頁面_功能_序號_狀態.png(jpg)
- 例:btn_index_music_00_normal.png
屬性
|
頁面/共用區塊
|
功能
|
序號
|
狀態
| |
範例
|
btn
|
index
|
music
|
00
|
normal
|
說明
|
|
|
music
play
pause
|
|
- 按鈕命名方式有2種
按鈕按下時有變化,要製作兩張圖
|
按鈕只要製作一張圖
|
Android
|
IOS
| |
PSD解析度
|
72
|
72
|
起始製作畫布
|
720x1230(扣除上方.狀態列的高度)
|
640x1136(含狀態列的高度)
→ 先做android → 再用延展背景的方式拉大到750x1334
→ 等比縮放到 640 x 1136
→ 調整物件相對位置
|
各單元高度
| ||
物間起算點(x,y)
|
|
包含狀態列
|
背景圖高度
|
不含:
|
全螢幕,包含:
|
輸出圖檔命名方式
|
|
|
PS外掛
cut and slice me
輸出起始值
|
1個步驟:
|
2個步驟:
|
使用字體
|
只使用
24 pt, 28 pt, 32 pt, 40 pt, 68pt
google 建議避免使用bold
|
苹果字体规格:
A:导航栏标题:medium 34px;
B:按钮和表头:light 34px
C:表格标签:Regular 28px;
D:Tab页图标标签:Regular 20px
|
Y軸起始點
|
從 Navigation Bar 開始
|
從 The Status Bar 開始
|
按鈕允許的做法
|
o 分成文字、背景,2層
o 按下時,改文字樣式
x 按下時,改背景樣式
|
o 分成文字、背景,2層
o 按下時,改文字樣式
o 按下時,改背景樣式
|
相關配套(宣傳)圖片
- Android圖片資源、螢幕擷取畫面和影片 https://support.google.com/googleplay/android-developer/answer/1078870?hl=zh-Hant
- IOS圖片資源、螢幕擷取畫面和影片
iOS Human Interface Guidelines > Icon and Image Design
- 列表說明
說明
|
Android尺寸(px)
|
IOS尺寸(px)
|
格式
|
google play宣傳圖
|
1024 x 500
|
無
|
jpg、png
|
手機開啟APP時的loading頁
|
無
|
640 x 960
750 x 1334
960 x 1440
1242 x 2208(iphone 6plus)
|
jpg
|
APP在手機上的icon
|
接受各種形狀,圓角要自己做
512 x 512→google_play
192 x 192→xxxdpi
144 x 144→xxdpi
96 x 96 →xhdpi
72 x 72 →hdpi
48 x 48 →mdpi
|
只有正方形,圓角不要做
1024 x 1024→IOS商店用
512 x 512
180 x 180
152 x 152
120 x 120
76 x 76
|
png
|
APP操作畫面配貼,數張
|
1080 x 1845
|
960 x 1440
|
jpg
|