App 的設(shè)計從0到1（ios篇）
??????? 一款 App 從無到有：項(xiàng)目立項(xiàng)啟動----設(shè)計產(chǎn)品原型----設(shè)計效果圖----進(jìn)入開發(fā)階段----進(jìn)入測試階段----測試將問題反饋給開發(fā)人員進(jìn)行調(diào)試----多次測試確認(rèn)無bug----提交市場、正式上線。
一、界面設(shè)計篇
1、設(shè)計稿尺寸
?????? 在 iphone 6還沒出的時候都是用 640 x 1136px 來做設(shè)計稿的，自從 iphone 6發(fā)布，所有的設(shè)計稿尺寸都以 750 x 1334px 來進(jìn)行設(shè)計。
iphone 界面尺寸
iphone 界面設(shè)計規(guī)范
以 750 x 1334 作為設(shè)計稿標(biāo)準(zhǔn)尺寸的原由：
1、從中間尺寸向上或向下適配的時候界面調(diào)整的幅度最小，最方便適配；
2、大屏幕時代依然以小屏幕
3、設(shè)計安卓版本時只需做最小的設(shè)計調(diào)整，提升設(shè)計效率
ipad 設(shè)計規(guī)范
2、圖標(biāo)設(shè)計規(guī)范
iPhone 圖標(biāo)尺寸
3、設(shè)計規(guī)范
經(jīng)研究頁面內(nèi)左右距離最好為 24px，當(dāng)然 30px 也可以，并沒有明確的規(guī)定
字體大小
?????? 字體大小范圍：24-36px
?????? 頂部操作欄文字大?。?6px? ?????? 左右兩側(cè)文字大小：32px
?????? 標(biāo)題文字大?。?8-36px
??????? 正文文字大?。?6-30px
??????? Tab bar文字大小：20-22px
二、切圖標(biāo)注篇
1、切圖
2、標(biāo)注工具
?????? PxCook（像素大廚），是一款切圖標(biāo)注設(shè)計工具軟件。自2.0.0版本開始，支持PSD文件的文字，顏色，距離自動智能識別。
?????? 優(yōu)點(diǎn)在于將標(biāo)注、切圖這兩項(xiàng)設(shè)計完稿后集成在一個軟件內(nèi)完成，支持Windows和Mac雙平臺。標(biāo)注功能包括：支持長度，顏色，區(qū)域，文字注釋；從2.0.0版本開始，整體效率有了很大的提高，值得推薦的是自動智能識別標(biāo)注。
?????? Parker 和 cutterman 是同一家的，Parker能夠自動計算尺寸、距離、文字大小、陰影、描邊圓角、行高等信息，并按照你的需要進(jìn)行標(biāo)注, 它極大節(jié)省你標(biāo)注的時間，大幅度提升設(shè)計效率。
但是，parker并不是免費(fèi)的，而是一款付費(fèi)軟件，需要60RMB
3、界面切圖
切圖需要切幾套
??????? 理論上我們需要切三套圖，是為了更好的適配
??????? 實(shí)際工作中 ios 只需要切兩套圖：@2x 和 @3x
切圖需要注意以下幾點(diǎn)
??????? 切圖輸出模式必須要有 png24 位、png8 位和 jpg 三種格式
??????? 同一模塊內(nèi)，切圖大小需保持一致
??????? 切圖輸出大小必須保持為偶數(shù)
??????? 為了減小包的大小，所有切圖盡量壓縮后再給開發(fā)
三、視覺還原篇
??????? 我們都知道，無論設(shè)計師的標(biāo)注稿多精確，開發(fā)出來的產(chǎn)品，多多少少都會有誤差，專業(yè)來說就是視覺效果落地還原度，視覺還原度越高，與設(shè)計稿越接近，APP 就越精細(xì)；反之，就越差。
??????? 所以，就需要我們在這個時候，去配合開發(fā)對 UI 進(jìn)行調(diào)整，來更加的接近我們做的效果圖了。
1、設(shè)計視覺調(diào)整文檔
??????? 視覺調(diào)整優(yōu)化文檔，要一目了然，需要注明和效果圖不一樣的地方是哪里，應(yīng)該改成什么樣，是 iOS 調(diào)整、Android 調(diào)整還是 h5 調(diào)整等，輸出為 png 和 jpg 圖片格式，最好輸出為PDF 格式，開發(fā)看起來也方便，比如你寫了一個顏色值，開發(fā)就可以直接復(fù)制了。
2、規(guī)范的視覺界面設(shè)計
??????? 必須按照各平臺的UI設(shè)計規(guī)范去規(guī)范的設(shè)計界面，用設(shè)計規(guī)范去知道開發(fā)，才是提高視覺還原的的基本前提
3、視覺 UI 控件的規(guī)范輸出
??????? 在絕大多數(shù)情況下，為了趕項(xiàng)目進(jìn)度，都是界面先行，設(shè)計規(guī)范后出，所以要盡可能的保持界面設(shè)計和視覺規(guī)范同步進(jìn)行
??????? 設(shè)計過程中，可以先輸出基礎(chǔ)控件元素規(guī)范，包括（顏色、文字、圖標(biāo)、蒙板、投影、按鈕、輸入框、或個別控件），規(guī)范是一個龐大而繁瑣，極需耐心的工作；過程中注重每一個細(xì)節(jié)的精準(zhǔn)與合理性。
4、規(guī)范的切圖和精確的標(biāo)注
??????? 我們的切圖和標(biāo)注，是否規(guī)范和精確，直接影響視覺效果的還原度，所以切圖和標(biāo)注一定要做的細(xì)致，這樣更加有利于提升還原度
5、多和開發(fā)溝通交流
四、上線準(zhǔn)備篇
??????? 當(dāng)一款 App 開發(fā)完畢，測試通過，這時候就需要準(zhǔn)備提交正式上線了，但是在上線之前，我們設(shè)計師還需要配合，做一些上線前的工作
1、應(yīng)用圖標(biāo)
??????? 因?yàn)樾枰膱D標(biāo)非常多，不可能全部加進(jìn)去，只能選擇最好的尺寸：
??????? 1024×1024???????? ??????????????????? Retina APP Icon for APP Store(高清屏的APP Store)
??????? 512×512?????????????????????????????????? APP Icon for APP Store（普通屏幕的APP Store）
??????? 120×1206???????????????????????????? 以及以下的主屏幕尺寸
??????? 180×180?????????????????????????????? 6 plus的主屏幕圖標(biāo)尺寸
??????? 58×58?????????????????????????????????? Settings on devices with retina display
??????? 87×87?????????????????????????????????????? Settings on iPhone 6 Plus
??????? 80×80?????????????????????????????????? Spotlight on devices with retina display
注意：ios 系統(tǒng)可以自動把圖片裁剪為圓角，所以提交圖標(biāo)的時候，你只需要提交正方的 png 格式即可
??????? 我們來看看蘋果官方的APP icon規(guī)范：
2、啟動頁
??????? 我們需要提供4種尺寸給的開發(fā)工程師：
??????? 640x960px????????????????????????????? iPhone 4/4s
??????? 640x1136px????????????????????????? ?? iPhone 5/5s/5c/SE
??????? 750x1334px???????????????????????????? iPhone 6/6S/7
??????? 1242x2208px?????? ? ? ? ? ? ? ? ??? iPhone 6 plus/6S plus/7 plus
??????? 2208x1242px????????????????????????? iPhone 6 plus/6S plus/7 plus的橫屏尺寸，
?????? 如果我們的APP支持橫屏模式，你就需要做一張橫屏的啟動頁
注意：啟動頁面一定要是 png 格式的，建議給開發(fā)之前將圖片壓縮一下
3、商店頁
??????? 這里就是需要添加商店頁的地方，商店頁最多為5張，格式為 png 或 jpg 文件格式，并且還支持視頻格式
商店頁尺寸要求
???????? ios：750 X 1334px
??????? 安卓：480 X 854px ? ?? ????? 720 X 1280px
參考自：人人都是產(chǎn)品經(jīng)理 - @U妹兒----《一款A(yù)PP設(shè)計的從0到1之：iOS篇（精華版）
