相信很多人都在開發設計APP時會遇到很多界面上的問題，要以多大尺寸來設計？分辨率是多少？該怎么切圖給開發......

下面的文字就給出一點點技巧總結，但也要給合團隊在開發時的習慣。每個工程師們所使用的控件，書寫布局習慣來實際移交的圖是不一樣的，但八九不離十，都是遵循一個原則，便捷開發、自適應強的開發模式。

iOS篇

一、尺寸及分辨率

設計圖單位：像素72dpi。在設計的時候并不是每個尺寸都要做一套，尺寸按自己的手機來設計，比較方便預覽效果，一般用640*960或者640*1136的尺寸來設計，現在iPhone 6和Plus出來后有很多人會使用6屏幕尺寸來設計。

如果是我來做的話，我會使用640×1136，對Plus做單獨的修改適配，因為Plus的屏幕實在是大了，遵循屏大顯示更多內容的原則這里本應該是需要修的了，有更好辦法的話希望大家可以分享一下。

Ps：作圖的時候盡可能確保都是用形狀工具(快捷鍵 U)畫的，這樣更方便后期的切圖或者尺寸變更。

二、界面基本組成元素

iPhone的app界面一般由四個元素組成，分別是：狀態欄(status bar)、導航欄(navigation)、主菜單欄(submenu)、內容區域(content)。

PS：在最新的iOS7的風格中，蘋果已經開始慢慢弱化狀態欄的存在，將狀態欄和導航欄合在了一起，但是再怎么變，尺寸高度也還是沒有變的，只不過大家在設計iOS7風格的界面的時候多多注意下~

三、圖標尺寸

四、字體大小

iPhone 上的字體英文為： HelveticaNeue 至于中文，Mac下用的是黑體-簡，Windows下則為華文黑體，所有字體要用雙數字號。

下圖是百度移動用戶體驗部（MUX）做過的一個小調查，可以看出用戶在iOS app中可接受的文字大小。

五、切圖

切圖是APP設計中的一個重要過程，關系到APP的界面實現，及各種適配性還有各種性能

蘋果在沒6 Plus前，我們只需要提供兩種圖，普通圖及視網膜屏幕圖。

以640×1136（640×960是一樣的）做的設計圖的話就會好辦一點。直接出設計圖上的原大小圖標，比如我們命名一個圖片叫 img-line.png，我們給開發的圖就要改變這個名字叫 img-line@2x.png 就是在后綴名前加上@2x表示視網膜屏的圖，iPhone4的還需要把這個圖尺寸按比例縮小50%，得到正真的img-line.png。然后把這兩個圖移交給開發，iPhone6的圖在規范里是與5s使用的是一樣的，也是@2x圖。有些UI則需要做適當的適配，比如拉長，拉高，這個開發會去做。

對于iPhone 6 plus的話范里給出的是@3x相信大家也知道是怎么回事，但如果要使用PS放大的話，大家做圖的時候就需要使用形狀工具來做，放大后還需要仔細微調，這里就不多做講解

PS： 在出可按的圖片切圖時需要注意圖片的可按區域大小，有時圖標很小，實際切出來的放在上面，用手指是按不到的，我們就需要對圖片單獨處理，拓寬圖片的有效區域，這里是拓寬非放大，就是改變畫布大小使圖片尺寸面積擴大，使圖片四周拓寬多余的透明區域 ，從而改變可按大小。

六、顏色值問題

iOS顏色值取 RGB各顏色的值比如某個色值，給予IOS開發的色值為 R:12 G:34 B:56 給出的值就是 12,34,56(有時也要根據開發的習慣，有時也用十六進制)

七、內部設計

1、所有能點擊的圖片不得小于44px（Retina需要88px）

2、單獨存在的部件必須是雙數尺寸

3、兩倍圖以@2x作為命名后綴

4、充分考慮每個控制按鈕在4中狀態下的樣式，如圖：

Android篇

一、尺寸及分辨率

Android界面尺寸：480*800、720*1280、1080*1920

Android比iPhone的寸尺多了很多套，建議取用720*1280這個尺寸，這個尺寸720*1280中顯示完美，在1080*1920中看起來比較清晰，切圖后的圖片文件大小也適中，應用的內存消耗也不會過高。

二、界面基本組成元素

Android的app界面和iPhone的基本相同：狀態欄、導航欄、主菜單、內容區域。

Android中我們取用的720*1280的尺寸設計，那我們就說說在這個尺寸下這些元素的尺寸。

狀態欄高度為：50px

導航欄高度為：96px

主菜單欄高度為：96px

內容區域高度為：1038px (1280-50-96-96=1038)

Android最近出的手機都幾乎去掉了實體鍵，把功能鍵移到了屏幕中，當然高度也是和菜單欄一樣的：96px

Android為了在界面上區別于iOS，Android 4.0開始提出的一套HOLO的UI風格，一些app的最新版本都采用了這一風格，這一風格最明顯的變化就是將下方的主菜單移到了導航欄下面，這樣的方式解決了現在很多手機去除實體鍵后再屏幕中顯示而出現的雙底欄的尷尬情景。

三、圖標尺寸

Android設計規范中， 使用的單位是dp， dp在安卓機上不同的密度轉換后的px是不一樣的。

四、字體大小

Android 上的字體為：Droid sans fallback，是谷歌自己的字體，與微軟雅黑很像。

同樣，百度移動用戶體驗部（MUX）的調查中，可以看出用戶可接受的文字相應問題。?

具體大小，還是那句話，找自己喜歡的app界面，手機截圖后放進PS自己對比調節字體大小，切記，一定是高清截圖。

五、切圖

Android設計規范中單位是dp，dp在安卓機上不同的密度轉換后的px 是不一樣的，所以按照設計圖的px轉換成dp也是不一樣的，這個可以使用轉換工具轉換，開發一般會有，也有些開發會使用px做單位，因為做了前期的轉換工作。

六、顏色值問題

Android顏色值取值為十六進制的值 比如一綠色的值， 給開發的值為 #5bc43e