【筆記】APP UI 製作流程規範

關於置版

1. 如果是共用同樣的UI，先做 Android 再做 IOS
2. 起始製作畫布用2@：
1. Android：720x1134
2. IOS：640x1136
3. 所有單位，全部用偶數
4. 将垂直面和水平面都设置为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	同螢幕高

https://apple.stackexchange.com/questions/242614/ios-background-image-height-width-in-xcode-for-1x-2x-3x

https://www.zhihu.com/question/25288571

http://www.ui.cn/detail/25876.html

Photoshop做圖置圖注意事項

1. 起始製作畫布用2@：
1. Android：720x1134(不含狀態列)
2. IOS：640x1136 (包含狀態列)
2. 所有單位，全部用8的倍數
3. 用混合效果產生的陰影、框線，必須為2的倍數

4. 點陣圖必須化為智慧型物件
5. 形狀
1. 必須採用向量，並勾選『對齊邊緣』
2. 為8的倍數

6. 圖層命名方式：
1. 全部採用英文
2. 一個頁面，一個資料夾，資料夾前加 -  (減號)
3. 底線區隔
4. 全部小寫
5. 屬性_頁面_功能_序號_狀態.png(jpg)
6. 例：btn_index_music_00_normal.png

	屬性	頁面/共用區塊	功能	序號	狀態
範例	btn	index	music	00	normal
說明	btn ...按鈕 bg  ...背景 nav...上方選單 pic ...圖片	nav...Navigation Bar tool...tool bar header... 刊頭 footer … 頁尾 index...首頁	music play pause		normal  ...一般 pressed...壓下時 delete

7. 按鈕命名方式有2種

按鈕按下時有變化，要製作兩張圖	按鈕只要製作一張圖

7. 
   

	Android	IOS
PSD解析度	72	72
起始製作畫布	720x1230(扣除上方.狀態列的高度)	640x1136(含狀態列的高度) → 先做android → 再用延展背景的方式拉大到750x1334 → 等比縮放到 640 x 1136 → 調整物件相對位置
各單元高度
物間起算點(x,y)	不含狀態列	包含狀態列
背景圖高度	不含： 狀態列 nav	全螢幕，包含： 狀態列 nav
輸出圖檔命名方式	在同一個資料夾 檔名上增加倍數標示 以背景為例：	4個資料加 檔名相同 以背景為例：
PS外掛 cut and slice me 輸出起始值	1個步驟： 1080直接輸出	2個步驟： 640→1 + 2@ 960→2@→改名3@
使用字體	只使用 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 按下時，改背景樣式

5. 
   

相關配套(宣傳)圖片

1. Android圖片資源、螢幕擷取畫面和影片 https://support.google.com/googleplay/android-developer/answer/1078870?hl=zh-Hant

2. IOS圖片資源、螢幕擷取畫面和影片

iOS Human Interface Guidelines > Icon and Image Design

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1

3. 列表說明

說明	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

4.