iOS界面設計切圖小結

1.基本尺寸

（1）界面

實際設計時按：

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

(2) 圖標：

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

2.圖形部件及字體

（1） 為顯示清晰

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

（2） 為方便用戶點擊

• 所有可點擊的部件需大于88px*88px
• 若圖片本身不夠，可在切圖時補足空白像素 例如：

（3）為減小程序體積

建議盡量使用可平鋪圖案設計界面

（4）蘋果默認字體

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

• 所有字體使用偶數(shù)字號進行設計
• 蘋果麗黑有W3、W6兩種粗細的字體

附下載地址：蘋果麗黑

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

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

（6）導航欄中的文字一般為40點W6

3.切圖提示

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

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

（2）可平鋪部件切圖時可如下圖：

帶圓角按鈕切圖時可如下圖

同理

并在效果圖中標出具體大小

標注軟件推薦：dorado

（3）導航欄和標簽欄下的陰影程序可以自動生成，可不切，如圖：

若不滿意默認陰影效果，可以單獨切2px寬的陰影，如圖：

如有異形陰影如：

需切整條陰影，并與攻城師說明。

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

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

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

4.命名

（1）圖片命名后綴

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

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

（2）命名建議

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

					1

					切圖性質_功能相關描述_圖片描述（可無）_狀態(tài)說明（可無）@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ài)切圖命名后加_pressed

• 另外貼個建議命名備忘

參考

• iOS交互設計指南翻譯
• iOS設計指南·官方
• iconhandbook