iOS界面設(shè)計(jì)切圖小結(jié)

1.基本尺寸

（1）界面

實(shí)際設(shè)計(jì)時(shí)按：

• iPhone4、4s：640px*960px
• iPhone5: 640px*1136px
• iPad：1536px*2048px

(2) 圖標(biāo)：

• 1024px*1024px 圓角180px
• 提交1024px*1024px 方角 png格式圖片

2.圖形部件及字體

（1） 為顯示清晰

• 所有圖形部件尺寸必須為偶數(shù)
• 樣式中陰影、發(fā)光、描邊的數(shù)值也必須為偶數(shù)

（2） 為方便用戶(hù)點(diǎn)擊

• 所有可點(diǎn)擊的部件需大于88px*88px
• 若圖片本身不夠，可在切圖時(shí)補(bǔ)足空白像素 例如：

（3）為減小程序體積

建議盡量使用可平鋪圖案設(shè)計(jì)界面

（4）蘋(píng)果默認(rèn)字體

在pc上沒(méi)有完全一樣的字體，Hiragino Sans GB蘋(píng)果麗黑最相近 一般做效果圖時(shí)，用Hiragino Sans GB（包括中英文）代替即可，也可以用方正黑體代替

• 所有字體使用偶數(shù)字號(hào)進(jìn)行設(shè)計(jì)
• 蘋(píng)果麗黑有W3、W6兩種粗細(xì)的字體

附下載地址：蘋(píng)果麗黑

（5）系統(tǒng)可以做到如下字體效果

即，向特定方向1px（做效果圖時(shí)做2px的效果）投影，需給出字體顏色、陰影顏色。 一般不建議按鈕上的文字做特殊效果。如果必要， 需將字體和按鈕一起切圖。

（6）導(dǎo)航欄中的文字一般為40點(diǎn)W6

3.切圖提示

(1）所有切圖必須為偶數(shù)

先根據(jù)Retina屏幕切圖（即640960/6401136/1536*2048），后將切圖縮為普通屏幕尺寸。 （有特殊圖片需要單獨(dú)制作）

（2）可平鋪部件切圖時(shí)可如下圖：

帶圓角按鈕切圖時(shí)可如下圖

同理

并在效果圖中標(biāo)出具體大小

標(biāo)注軟件推薦：dorado

（3）導(dǎo)航欄和標(biāo)簽欄下的陰影程序可以自動(dòng)生成，可不切，如圖：

若不滿(mǎn)意默認(rèn)陰影效果，可以單獨(dú)切2px寬的陰影，如圖：

如有異形陰影如：

需切整條陰影，并與攻城師說(shuō)明。

（4）所有按鈕需有兩種狀態(tài)——正常狀態(tài)和按下?tīng)顟B(tài)

（6）一般情況下切圖格式為png24

• 若個(gè)別圖片jpg比png小很多，可用jpg
• 但歡迎頁(yè)、icon必須為png，在不影響顯示效果的前提下，可以考慮用png8

4.命名

（1）圖片命名后綴

• 根據(jù)Retina屏幕的切圖文件名后加@2x，普通屏幕尺寸不用加。

• 歡迎頁(yè)、背景等需要對(duì)iPhone5另外切圖的文件名后加-568h@2x

（2）命名建議

建議采用如下方法命名，如：

					1

					切圖性質(zhì)_功能相關(guān)描述_圖片描述（可無(wú)）_狀態(tài)說(shuō)明（可無(wú)）@2x.png

用例:

• Retina屏幕切圖

					1
2
3
4
5

					bg_booksnum_pressed@2x.png
ico_arrow_blue@2x.png
btn_blue_pressed@2x.png
pic_books_blue@2x.png
bg_main-568h@2x.png

• 普通屏幕切圖

					1
2
3
4
5

					?bg_booksnum_pressed.png 
ico_arrow_blue.png
btn_blue_pressed.png
pic_books_blue.png
按下?tīng)顟B(tài)切圖命名后加_pressed

• 另外貼個(gè)建議命名備忘

參考

• iOS交互設(shè)計(jì)指南翻譯
• iOS設(shè)計(jì)指南·官方
• iconhandbook