iOS界面設計切圖小結

iOS界面設計切圖小結

APR 12TH, 2013

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）命名建議

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

<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">1</span>

切圖性質_功能相關描述_圖片描述（可無）_狀態說明（可無）@2x.png

用例:

• Retina屏幕切圖

<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">1</span> <span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">2</span> <span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">3</span> <span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">4</span> <span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">5</span>

[email protected] [email protected] [email protected] [email protected] [email protected]

• 普通屏幕切圖

<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">1</span> <span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">2</span> <span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">3</span> <span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">4</span> <span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">5</span>

​bg_booksnum_pressed.png ico_arrow_blue.png btn_blue_pressed.png pic_books_blue.png 按下狀態切圖命名後加_pressed

• 另外貼個建議命名備忘

參考

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

Posted by 徐大雨 Apr 12th, 2013  UI, iOS

原創&整理的文章，版權聲明:自由轉載-非商用&衍生-保持署名 | Creative Commons BY-NC-ND 3.0