上周在做一個(gè)APP項(xiàng)目開(kāi)始進(jìn)行到設(shè)計(jì)部分了，以前也設(shè)計(jì)過(guò)不少的APP界面，下面重慶APP設(shè)計(jì)公司整理了一下關(guān)于APP設(shè)計(jì)的流程。

關(guān)于APP的設(shè)計(jì)流程
產(chǎn)品需求 》 設(shè)計(jì)效果 》 切圖 》 時(shí)間設(shè)計(jì)規(guī)范 》 開(kāi)發(fā)

APPftWEB幵發(fā)在設(shè)計(jì)流程上也有所區(qū)別：

1、WEB的設(shè)計(jì)和切圖，可由2個(gè)人完成，一般是UI設(shè)計(jì)師+前端工程師?

2、APP的路個(gè)設(shè)計(jì)*好由一個(gè)人芫成，APP的設(shè)twa石較多，精確到像素，只有設(shè)計(jì)師自己對(duì)每個(gè)控件的設(shè)計(jì)樣式，以及PSD文檔的結(jié)構(gòu)峨了解，換成其他人員參與，往往不會(huì)J啦工作效率，反而會(huì)增加返工的幾率。

3、此切圖非彼切圖：
WEB的產(chǎn)出物是DIV+CSS,
APP的產(chǎn)出物是JPG或者PNG (包括.9)圖片

4、APP增加了標(biāo)注的流程
因便于客戶端開(kāi)發(fā)人員對(duì)應(yīng)用的每個(gè)控件在頁(yè)面中的位置逬行精確控制，以確保效果圖和成品的高度契合，所以增加了標(biāo)注.WEB是沒(méi)有此項(xiàng)標(biāo)注工作的.

關(guān)于APP的尺寸
對(duì)于尺寸，我只按最大的尺寸設(shè)計(jì)，這樣調(diào)整小尺寸會(huì)比較方便。

1、IOS版本，設(shè)計(jì)尺寸應(yīng)定為：640xll36px分辨率：72px/inch
2、 Android版本，設(shè)計(jì)尺寸應(yīng)定為：720xl280px分辨率：72px/inch

備注：注意下圖的狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄,設(shè)計(jì)中可參考

關(guān)于APP的圖標(biāo)
對(duì)于圖標(biāo)的形狀，我沒(méi)有特別的喜好，方的，圓的，我都愛(ài)！
IOS版本1024xl024px (圓角：160px )
Android 版本96x96px (圓角：6px )

關(guān)于APP的切圖

android平臺(tái)有多種不同的分辨率，很多控件的切圖文件在被放大拉伸后，邊角會(huì)橫糊失真。"點(diǎn)九"是andriod平臺(tái)的應(yīng)用軟件開(kāi)發(fā)里的一種特殊的圖片形式，文件擴(kuò)展名為：.9.png

使用點(diǎn)九PNG技術(shù)，可以將圖片橫向和縱向同時(shí)進(jìn)行拉伸，以實(shí)現(xiàn)在多分辨率下的完美顯示效果。

為什么叫M點(diǎn)九PNG",其實(shí)相當(dāng)于把一張圖分成了9個(gè)部分(九宮格），如下圖所示，分別為4個(gè)角，4條邊，以及一個(gè)中間區(qū)域，4個(gè)角是不做拉升的，所以還能一直保持圓角的漓晰狀態(tài)，而2條水平邊和垂直邊分別只做水平和垂直拉伸，所以不會(huì)出現(xiàn)邊會(huì)被拉粗的情況，圖片也不會(huì)走樣。

關(guān)于APP的標(biāo)注

提起這個(gè)是一件很痛苦的事情，第一次做好效果圖發(fā)開(kāi)發(fā)，開(kāi)發(fā)讓我做標(biāo)注?花了一天時(shí)間做了所有的標(biāo)注，可手和脖子也不是自己了，有這樣的問(wèn)題，有沒(méi)有一個(gè)軟件便的做標(biāo)注呢？

以前設(shè)計(jì)網(wǎng)頁(yè)我最軎歡給前端發(fā)一個(gè)軟件，好色鬼，其實(shí)這個(gè)軟件對(duì)設(shè)計(jì)和前端都^常的好用

APP設(shè)計(jì)前溝通
設(shè)計(jì)前努必要要跟產(chǎn)品及開(kāi)發(fā)溝通以下細(xì)節(jié)，否則很容易造成返工。

1. 要做幾個(gè)平臺(tái)？安卓還是IOS ? IOS是否還有pad ?安卓的最大尺寸？
2. 和客戶端開(kāi)發(fā)團(tuán)隊(duì)溝通具體切圖方式。是否采用.9切圖？
3. 和產(chǎn)品及運(yùn)營(yíng)明確目標(biāo)用戶，確定設(shè)計(jì)風(fēng)格。
4. 在客戶端開(kāi)發(fā)之前，務(wù)必參該項(xiàng)目的需求評(píng)審，明確頁(yè)面及頁(yè)面之間的邏輯，如產(chǎn)品規(guī)劃時(shí)就已經(jīng)缺失，需要及時(shí)補(bǔ)充說(shuō)明，否則開(kāi)發(fā)完成再去梳理，勢(shì)必返工并造成工期延誤。


對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師，大幅的活動(dòng)效果圖做起來(lái)很酷很玄，小尺寸的APP因?yàn)榭臻g小，東西過(guò)，空間排列需要更加重視，形式服從功能，設(shè)計(jì)的最本質(zhì)?，F(xiàn)在愈來(lái)愈習(xí)慣在方寸之地大展拳腳，這樣的事才有真正的挑戰(zhàn)性。