iOS介面設計切圖小結

1.基本尺寸（1）介面

實際設計時按：

• iPhone4、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（包括中英文）代替即可，也可以用方正黑體代替

• 所有字型使用偶數字型大小進行設計
• 蘋果麗黑有W3、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螢幕切圖

12345

bg_booksnum_pressed@2x.pngico_arrow_blue@2x.pngbtn_blue_pressed@2x.pngpic_books_blue@2x.pngbg_main-568h@2x.png

• 普通螢幕切圖

12345

bg_booksnum_pressed.png ico_arrow_blue.pngbtn_blue_pressed.pngpic_books_blue.png按下狀態切圖命名後加_pressed

• 另外貼個建議命名備忘

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