iOS界面設計切圖小結

1.基本尺寸

（1）界面

實際設計時按：

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

(2) 圖標：

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

2.圖形部件及字體

（1） 爲顯示清晰

• 全部圖形部件尺寸必須爲偶數
• 樣式中陰影、發光、描邊的數值也必須爲偶數

（2） 爲方便用戶點擊

• 全部可點擊的部件需大於88px*88px
• 若圖片自己不夠，可在切圖時補足空白像素 例如：

（3）爲減少程序體積

建議儘可能使用可平鋪圖案設計界面

（4）蘋果默認字體

在pc上沒有徹底同樣的字體，Hiragino Sans GB蘋果麗黑最相近 通常作效果圖時，用Hiragino Sans GB（包括中英文）代替便可，也能夠用方正黑體代替

• 全部字體使用偶數字號進行設計
• 蘋果麗黑有W三、W6兩種粗細的字體

附下載地址：蘋果麗黑

（5）系統能夠作到以下字體效果

即，向特定方向1px（作效果圖時作2px的效果）投影，需給出字體顏色、陰影顏色。 通常不建議按鈕上的文字作特殊效果。若是必要， 需將字體和按鈕一塊兒切圖。

（6）導航欄中的文字通常爲40點W6

3.切圖提示

(1）全部切圖必須爲偶數

先根據Retina屏幕切圖（即640960/6401136/1536*2048），後將切圖縮爲普通屏幕尺寸。 （有特殊圖片須要單獨製做）

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

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

同理

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

標註軟件推薦：dorado

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

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

若有異形陰影如：

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

（4）全部按鈕需有兩種狀態——正常狀態和按下狀態

（6）通常狀況下切圖格式爲png24

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

4.命名

（1）圖片命名後綴

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

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

（2）命名建議

建議採用以下方法命名，如：

1	切圖性質_功能相關描述_圖片描述（可無）_狀態說明（可無）@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 按下狀態切圖命名後加_pressed

• 另外貼個建議命名備忘

轉載：http://danielxu.github.io/blog/2013/04/12/ios-ui-design/