最近想花點(diǎn)時間去總結(jié)整理一下做設(shè)計(jì)這幾年的一些經(jīng)驗(yàn)技巧或是踩過的坑姜骡，也不知道從哪開始导坟，就先從《一款A(yù)PP設(shè)計(jì)的從0到1》開始吧，這是一篇自己工作經(jīng)歷總結(jié)圈澈，希望可以給你一定的幫助吧~

一、項(xiàng)目確定（和產(chǎn)品過prd理邏輯需求尘惧，預(yù)估項(xiàng)目時間）

二康栈、界面設(shè)計(jì)（開始著手整個界面視覺風(fēng)格思考啦）

三、切圖標(biāo)注（按照你用的軟件還有程序猿哥哥的要求來）

四喷橙、視覺還原（也就是找茬啥么，看看程序猿哥哥的視覺還原度怎么樣）

五、上線準(zhǔn)備（準(zhǔn)備上線需要的各種資料）

-----------------------------------------------------------------------------------------------------------------------------------------------------

一贰逾、項(xiàng)目確定

熟悉了解整個產(chǎn)品邏輯：這個過程一般公司應(yīng)該都是在產(chǎn)品原型已經(jīng)出來后悬荣，我們UI設(shè)計(jì)開始參與討論prd的一系列邏輯和交互，這個過程最重要的就是我們設(shè)計(jì)師一定要把整個產(chǎn)品的邏輯理清楚疙剑，這樣才能保證我們之后出的視覺稿邏輯是沒有問題的氯迂。這個過程是很重要的，因?yàn)橐话愎井a(chǎn)品在原型出來之前言缤，我們UI設(shè)計(jì)師幾乎是接觸不到嚼蚀，也不會參與什么邏輯討論的部分，所以在這段時間對于我們熟悉產(chǎn)品特別重要管挟，在對產(chǎn)品充分熟悉了解后轿曙，會更有助于我們下面的界面風(fēng)格確定，更好地把控整個產(chǎn)品的全局僻孝。

在了解熟悉整個產(chǎn)品之后导帝，下面可能就需要我們UI設(shè)計(jì)師來預(yù)估項(xiàng)目時間了，這時候可能boss和產(chǎn)品會問你多久圖能出完穿铆，先別著急答復(fù)您单，你需要再審視一下所有的頁面（他們會沒完沒了的催你，因?yàn)樗麄冎鄙暇€悴务，搶占市場睹限，恨不得讓你天天加班作圖，然后搞上線讯檐；催你不要管羡疗，讓他們盡情催去吧）

預(yù)估項(xiàng)目時間：預(yù)估時間首先要確定重要頁面，在如今看顏值的時代别洪，所以一款A(yù)PP的首頁視覺就相當(dāng)重要了叨恨，還有很多主要的一級頁面也是重要頁面，一般這些可能會需要2天時間左右（這2天你需要確定主色挖垛、設(shè)計(jì)風(fēng)格痒钝、icon設(shè)計(jì)秉颗，以及還要預(yù)留可能要修改設(shè)計(jì)風(fēng)格或者設(shè)計(jì)細(xì)節(jié)的時間），首頁確定之后送矩，整個APP風(fēng)格也就確定了蚕甥，其他的頁面做起來也就相對輕松一點(diǎn)了

其次可以看下大概有多少個重復(fù)頁面，一個App去掉框架布局重復(fù)的栋荸，也就差不多去掉一半的頁面了菇怀，（比如一個項(xiàng)目有80個頁面左右，去掉重復(fù)框架布局的頁面晌块，差不多就還剩40個左右頁面）爱沟，然后再按照各自預(yù)估大概多久時間可以完成，一般需要多留出點(diǎn)充足的時間（在實(shí)際預(yù)估時間上多30%—50%左右匆背，以應(yīng)付突如其來的其他工作狀況）

這樣就可以預(yù)估一下整個項(xiàng)目大概需要多久時間完成了呼伸，就可以直接去和boss或者產(chǎn)品匯報完稿時間了（如果他們要嫌你慢，你可以直接回懟：一味的追求速度钝尸，出了問題誰負(fù)責(zé)括享？質(zhì)量和時間是成正比的咧，吧啦吧啦~）

二蝶怔、界面設(shè)計(jì)

目前在行業(yè)里奶浦，關(guān)于APP界面設(shè)計(jì)規(guī)范也是參差不齊，但是最常用的也就是iphone 7和iOS 10踢星，界面尺寸：750*1334

設(shè)計(jì)工具：

做界面設(shè)計(jì)一般會用到PS澳叉、AI、Sketch沐悦，如果你是windows電腦成洗，那你一定用PS最多，如果你是mac電腦藏否，那你肯定會用到sketch瓶殃。使用PS做圖的話一般用二倍圖設(shè)計(jì)，使用Sketch做圖大部分采用一倍圖（當(dāng)然也可以用二倍圖）副签。UI設(shè)計(jì)師使用一倍圖為基準(zhǔn)進(jìn)行界面設(shè)計(jì)遥椿，主要是因?yàn)榉奖悖阌诶斫庀ⅰ﹂_發(fā)來講也不需要進(jìn)行二次換算冠场，效率也會得到提高。因?yàn)槲冶容^喜歡直接用2@圖設(shè)計(jì)本砰，所以sketch也是用的2@圖來做設(shè)計(jì)的碴裙。但是sketch用2@圖設(shè)計(jì)一定要保證每個切圖、間距都得是偶數(shù)，這樣開發(fā)哥哥才能用哦~

設(shè)計(jì)標(biāo)準(zhǔn)尺寸：

在iPhone 6還沒出的時候舔株，都是用640x1136 px來做設(shè)計(jì)稿的莺琳，自從6的發(fā)布，所有的設(shè)計(jì)稿尺寸以750x1334 px來做設(shè)計(jì)稿尺寸载慈，（現(xiàn)在不管是ios還是安卓都可以用同一套750*1334的設(shè)計(jì)圖來上下適配惭等，不過不同公司程序猿哥哥的要求也不一樣，需要和程序猿哥哥溝通好办铡，避免被程序猿哥哥打哦~）

下面是iPhone屏幕的一些界面尺寸蕾域，還不是很清楚的同學(xué)可以看一下滞欠，用小本本記一下哦~

設(shè)計(jì)規(guī)范：

基于750*1334界面尺寸辩撑，下面這些設(shè)計(jì)規(guī)范一定要熟記哦~

頂部狀態(tài)欄高：40px

導(dǎo)航欄最小高度：88px

導(dǎo)航欄下滑動tab高度：80px

底部tab高度：98px

在了解了上面這些就可以開始你的設(shè)計(jì)啦~

三蝌诡、切圖標(biāo)注

理論狀態(tài)下升筏，為了兼顧到目前還存在的各個機(jī)型旁振，應(yīng)該為不同的機(jī)型尺寸提供不同尺寸大小的切圖论悴。但這無疑提升了巨大的工作量方椎，而且還可能浪費(fèi)很大的資源空間孔厉，實(shí)際上拯钻，很多機(jī)型已經(jīng)不占有主流市場了，也就沒必要去考慮適配撰豺，所以具體輸出幾套需要看公司的產(chǎn)品需求而定粪般。（一般輸出2@、3@的就可以了）

切圖工具：

Cutterman污桦，一款PS的插件亩歹，切圖非常方便，目前cutterman最新版為3.6.0版本凡橱。

Assistor PS也是一款PS的切圖標(biāo)注插件小作，也被譽(yù)為神器；這款我自己電腦里沒有安裝稼钩，從別人的使用評價上看說它切圖和標(biāo)注上體驗(yàn)不高顾稀，但是它的其他輔助功能還是很不錯的，比如參考線輔助坝撑，圓角大小静秆，磁鐵功能。有興趣的同學(xué)可以去試一下~

Sketch Measure 是一款Sketch最佳自動標(biāo)注切圖插件巡李，非常強(qiáng)大好用抚笔。切圖標(biāo)注一建生成~

下載地址：https://oursketch.com/plugin/sketch-measure

畫板上切刀切好，規(guī)范導(dǎo)出击儡，一鍵自動生成 HTML 頁面塔沃，離線下檢查所有設(shè)計(jì)細(xì)節(jié)，包括 CSS 樣式。

在線演示:?http://utom.design/news/

標(biāo)注工具：

Mark Man蛀柴，也是一款高效的設(shè)計(jì)稿標(biāo)注工具螃概，支持 Win / Mac, 可免費(fèi)使用基礎(chǔ)功能，基礎(chǔ)功能不能保存編輯的內(nèi)容鸽疾，只能導(dǎo)出png圖片吊洼，導(dǎo)出后不能修改，不過畢竟是免費(fèi)的制肮，要求也不能太高冒窍；如果需要高級功能也是需要付費(fèi)的60RMB/年。

PxCook（像素大廚）豺鼻，是一款切圖標(biāo)注設(shè)計(jì)工具軟件综液。自2.0.0版本開始，支持PSD文件的文字儒飒，顏色谬莹，距離自動智能識別。

優(yōu)點(diǎn)在于將標(biāo)注桩了、切圖這兩項(xiàng)設(shè)計(jì)完稿后集成在一個軟件內(nèi)完成附帽，支持Windows和Mac雙平臺。標(biāo)注功能包括：支持長度井誉，顏色蕉扮，區(qū)域，文字注釋颗圣；從2.0.0版本開始喳钟，整體效率有了很大的提高，值得推薦的是自動智能識別標(biāo)注欠啤。

Parker荚藻，和cutterman是同一家的，Parker能夠自動計(jì)算尺寸洁段、距離应狱、文字大小、陰影祠丝、描邊圓角疾呻、行高等信息，并按照你的需要進(jìn)行標(biāo)注, 它極大節(jié)省你標(biāo)注的時間写半，大幅度提升設(shè)計(jì)效率岸蜗。但是parker不是免費(fèi)的，而是一款付費(fèi)軟件叠蝇，需要60RMB璃岳。

以上工具各有優(yōu)點(diǎn)和缺點(diǎn)，在選擇上主要還是看個人的習(xí)慣，哪個用著順手就選擇哪個铃慷。個人感覺還是Sketch Measure最方便快捷单芜，有mac的小伙伴可以試試~

?

?四、視覺還原

視覺還原也就是找茬犁柜，看看程序猿哥哥的視覺還原度怎么樣洲鸠，一般很多程序猿哥哥都會很隨意，他們有時候都是跟著感覺走馋缅，幾乎會忽略你給他的標(biāo)注扒腕，所以這個時候我們就要仔細(xì)檢查了，也是發(fā)揮我們像素眼的時候了萤悴，不過還是得溫柔的和程序猿哥哥提這些修改瘾腰。可以整理一個設(shè)計(jì)視覺調(diào)整文檔給到程序猿哥哥們覆履，像我們公司就是會抽點(diǎn)時間給設(shè)計(jì)居灯，讓我們有一個為程序猿哥哥面對面找茬的機(jī)會（這個時候作為設(shè)計(jì)的你我他一定、一定内狗、一定要理智，溫柔對待义锥，萬一把程序猿哥哥惹火了柳沙，那可就慘啦，哈哈哈~）

遇到問題及時面對面協(xié)商解決拌倍、達(dá)成共識赂鲤、修改、敲定柱恤、解決数初。溝通是解決問題的最有效方法，所以多和開發(fā)哥哥接觸溝通交流吧~

五梗顺、上線準(zhǔn)備

應(yīng)用圖標(biāo)（APP Icon）

因?yàn)樾枰膱D標(biāo)非常多泡孩，不可能全部加進(jìn)去，只能選擇最好的尺寸寺谤，我們公司的開發(fā)哥哥要求我提供以下圖標(biāo)尺寸：

1. iOS icon：

注意：這里需要注意一下仑鸥，iOS系統(tǒng)可以自動把圖片裁剪為圓角，所以提交圖標(biāo)的時候变屁，你只需要提交正方形的PNG格式即可眼俊。

2.Android icon：

安卓的圖標(biāo)相對iOS來說較少，我們只需提供以下幾個尺寸就可以了粟关，但是安卓的需要圓角哦~

啟動頁（LaunchImage）

1疮胖、IOS：

640x960px? ? ? ?iPhone 4/4s

640x1136px? ? ??iPhone5/5s/5c/SE

750x1334px? ? ??iPhone6/6S/7

1242x2208px? ? iPhone 6plus/6S plus/7 plus

1125x2436px? ? iPhone X/XS

注意：啟動頁面一定要是PNG格式的，建議給開發(fā)之前講圖片全部壓縮一下。

2澎灸、Android：

安卓的屏幕尺寸比較多院塞，所以我們的程序猿哥哥一般會要求我們啟動圖設(shè)計(jì)成750*1334尺寸的，直接切2@击孩、3@的圖和標(biāo)注給他們（不同公司程序猿哥哥的要求也不一樣迫悠，要和開發(fā)同學(xué)協(xié)商好）

應(yīng)用商店圖：

APPstore：商店頁最多為5張，格式為png或jpg文件格式巩梢，并且還支持視頻格式创泄，現(xiàn)在APPstore商店頁只需做一套尺寸：750x1334px

安卓應(yīng)用市場：安卓應(yīng)用市場有很多，但總體來來說相對比較一致括蝠，安卓的商店頁我們是需要提供2套就可以了（480x854px鞠抑、720x1280px）

關(guān)于《一款A(yù)PP設(shè)計(jì)的從0到1》就全部講完了，希望可以給各位同學(xué)帶來幫助忌警，之后有時間會陸續(xù)出一系列的經(jīng)驗(yàn)總結(jié)和各位同學(xué)一起分享搁拙，不足之處也希望大家指正~