UI 設計師在給 iOS 或 Android 開發者提供資源圖的時候需要注意哪些細節?

01-11

目的是讓開發使用資源圖的時候更加順手簡單
也可以談一下自己見過的一些非常清晰明了的優秀範例

移動平台上只做過 iOS 開發。

關於尺寸和坐標：

在實際的工程中用多大尺寸，就出多大尺寸的圖，絕對不要讓工程師去 resize 圖片！（當然 @2x 轉非 retina 解析度除外，他們有腳本可以幫他們。）設計師最好開一個與屏幕解析度相同的 psd 文件用來調整大小出圖。
@2x 的圖要給偶數解析度，大小應當是整數（@Bill Cheng 在有些情況下視圖設置成浮點數的 frame 會導致自定義字體發虛）。
同類資源（比如一排按鈕圖標）的大小要相同，因為工程師很可能會用循環創建那些視圖。可能有人會問為什麼大小會不一樣？最常見的是因為陰影等原因導致有幾個像素的偏差。還有些時候我也不知道為什麼，但是碰上不專業的美工就是會把同一個按鈕出的每次都不一樣大。
同類元素的資源，不管大小相不相同，那麼它們的內容相對於 (0, 0) 點也要是對齊的。比如——圓的圓心對齊，人物的腳要在同一水平線上。至於 (0, 0) 點是左下還是左上，不同的操作系統規定得不一樣，在 iOS 中是左上。

關於留白：

讓圖片儘可能小。
但不要截斷陰影、外發光等。不要用眼睛判斷，多用 PS 的「按透明像素裁切」功能。
有些具有對稱中心的元素，當四周的內容不對稱時，應該加多餘的留白讓元素的中心位於畫布中心。這並不是一句廢話，有時你的按鈕向右、向下投影，當按透明像素裁切後，按鈕的中心就會相對與畫布中心偏左、偏上。一般情況下不用這麼嚴格，但是如果你想給按鈕加個選中光暈，這張光暈的圖肯定比按鈕的圖要大，按鈕再不是中心對齊的話，程序員會十分痛苦。

關於切圖：

用來播動畫的幀圖片，導出時運動圖層和靜止背景分開，減少運行時系統資源的耗費。
可變尺寸的，或是大尺寸、四角特殊但四邊簡單的資源——比如微信的消息氣泡，可以導出最小可用的大小，工程師利用 iOS 的 resizableImageWithCapInsets: API 來生成所需大小的圖。參見 http://geeklu.com/2012/06/image-slicing-for-ios-app/ 。
有些資源不應出整張圖，而要根據工程師的需要切散，比如 Tab 背景圖不能帶著當前激活的 Tab 出圖，雖然它們很可能是被一起畫出來的。當你覺得工程師使用這張資源可能會有潛在的麻煩時，與他們溝通。

關於透明度：

簡單地說，該透明的地方透明，不該透明的地方不要透明。有時設計師為了得到一些減淡了的顏色或者混合色而在 PS 中設置了填充的透明度，之後忘記了，等到出圖時也看不出區別。但是在實際程序中，這些半透明的地方可能會表現出怪異的行為。對於一個填充到底應不應該是半透明的，取決於設計師所要模擬的真實物體是不是半透明的。比如，現實中的陰影往往認為是不透明的。如果你給工程師一張具有半透明陰影的圖，並且兩個視圖都使用了這張圖，一旦它們重疊，那麼重疊部分的陰影就會加深。

關於文件名：

如果文檔里包括組件的命名，就按文檔來。
否則，自己起文件名時注意邏輯分層、語義正交、適當的前綴後綴。
是否使用單詞縮寫、多級文件名正序還是倒序等問題，多了解工程師的個人喜好。
不要用拼音！
多級文件名的不同部分之間使用「-」還是「_」連接，會影響到程序員的自動補全和一些操作（比如"btn-cancel-highlighted.png"中的每個詞可以單獨雙擊選中以便修改，但"btn_cancel_highlighted.png"雙擊則會選中整個詞，大家可以試試看）。

我是iOS程序員，下面主要是iPhone的相關的：

lauchimage啟動圖片

lauchimage主要是3.5寸，4.0寸，4.7寸，5.5寸對應的不同大小，

可以參考老項目的#iPhone6與iPhone6Plus適配#LaunchImage適配。

icon大小

icon的大小有很多種，這裡要注意的是需要做一張1024*1024的icon會在上傳appstore的時候用到。

老項目的#iPhone6與iPhone6Plus適配#Icon適配。

自從iPhone 6 Plus從來之後，iOS所有的圖片都對應著三種，1x，2x，3x。

所以做圖片一般情況下都需要做三套。

iOS開發中常用到tabbar，navgationbar等系統按鈕，你可以去了解一下，他們的大小是固定的，你可以參考這個網址，他們都是1倍的大小。

iPhone開發中經常用到的控制項尺寸大集合

對於其他的切圖只要做好三種切圖就好。

在上傳appstore的時候

你需要你需要做不同尺寸的屏幕快照用於在appstore展示，每種不多於5張，

分別是3.5英寸（640*960），4英寸（640*1136），4.7英寸（750*1134），5.5英寸（1242*2208）。

現在我們做iOS應用，美術基本都忽略非Retina的iPhone了，還用iPhone3GS的用戶已經比較少了，單獨切普通圖也許從人力和安裝包大小上都會不划算。

Android：

如果開發者比較牛，最好請提供矢量圖，矢量UI圖哦

如果美工比較牛，最好請提供9patch的png

如果不追求全屏幕尺寸匹配的話，請給需要適配的解析度一樣準備一張UI，資源圖元素分離，按照適配屏幕像素，要是能提供每個尺寸下每個元素的位置px就更好了

iOS：

iOS有5種解析度——iPhone 480，iPhone 960，iPhone 1136，iPad 768，iPad 1536——要做幾個，記得提供幾個的UI圖

全部圖的坐標做好都是按照非Retina算（可以使用Float值）

資源圖需要準備普通的和Retina的圖

通用：

所有資源圖最好標註層次，應為都是PNG所以透明部分也要特殊標註出來

再一個就是交互設計和美工要把界面切換時候的順序標註出來

還有一個就是字體，如果是特殊字體，元素圖最好就把字給嵌上去，程序為了幾個字加字體資源很浪費空間的，再一個版權的問題……

最後一個就是如果有動畫的話，最好提供Gif參考，或者其他動畫參考，方便最後程序檢查實現效果

========體內酒精含量：0.4%==========

以上都是我在開發的時候和美工各種交流之後得出的要點，不過我的項目都不大，可能各位做開發的時候還會碰上別的問題

碰上了別說我沒提到……只是我沒碰到而已……

最後打個廣告：《Hacker Pulse》隆重登陸App Store，歡迎各位下載使用。

PS：瀉藥

從程序猿的角度說說吧，僅限於Android，不做iOS開發已經4年了，實在是說不出來什麼

1.能給.9格式的，就別給固定大小的。

2.目前來講，最好是以1280x720為基準切圖，其他解析度的讓程序猿自己去適配就好了，他們需要什麼會跟你說的

3.所有的icon圖標，都要固定大小的，每個解析度的單獨切

保證清晰度的情況下儘可能的小，ios可能需要兩套圖，安卓真要做適配的話需要5套左右，所以一般安卓只適配主流機型屏幕

學習中。現在手頭工作裡面就需要這些細節性的經驗性的指導。

720*1280的一套app界面怎麼切圖來適配iOS640*960，750*1334的，望大神賜教，剛進軍這個行業，要用這個怎麼切成ios的