第一部分：APP界面設(shè)計(jì)流程概要分享，總共11個(gè)步驟。

1. 確定你的創(chuàng)意方向或者圍繞主題展開(kāi)

您的創(chuàng)意是否有人做過(guò)，如果有類(lèi)似的app，那就要多多考慮，爭(zhēng)取超越并且有一些獨(dú)特的優(yōu)化設(shè)計(jì)在其中

2. 定位應(yīng)用和用戶(hù)需求分析

通過(guò)蘋(píng)果的人機(jī)界面指南（Human Interface Guidelines）圖來(lái)定位

?

3. 核心功能確認(rèn)，必須用減法原則

將提出的各種需求進(jìn)行匯總討論，設(shè)計(jì)ADS（Application Definition Statement）對(duì)應(yīng)用定義的一段陳述，也稱(chēng)精簡(jiǎn)的ADS，可以從下面4個(gè)方面著手：

?

1、確定整體產(chǎn)品色彩基調(diào)，色彩基調(diào)可以從產(chǎn)品功能中提取，也可以從產(chǎn)品LOGO中提?。?

2、做出界面原型，包括功能布局、頁(yè)面交互等元素；

3、在界面原型基礎(chǔ)上進(jìn)行色彩添加，進(jìn)一步的細(xì)節(jié)調(diào)整；

4、根據(jù)用戶(hù)使用體驗(yàn)反饋再次修改界面，不斷完善。

4. 產(chǎn)品草圖制作。比如Axure pop等

開(kāi)始根據(jù)前面所整理的資料，進(jìn)行基本的產(chǎn)品各個(gè)功能的設(shè)計(jì)，包含移動(dòng)中使用場(chǎng)景，按鈕，顯示文字等。紙和筆是個(gè)不錯(cuò)的方式

?

5. Walkthrough

在IOS中，各個(gè)界面之前切換方式也是重要的地方，稱(chēng)為APP功能穿越(App Functionality Walkthrough)，設(shè)計(jì)時(shí)需要考慮進(jìn)去。

6. 低保真原型

利用原型制作工具(Axure,Mockup,Visio)，將草圖搬上電腦，盡量使用黑白，粗糙的線條來(lái)進(jìn)行設(shè)計(jì)，不要糾結(jié)于細(xì)節(jié)

?

7. 高保真原型?

在低保真原型確認(rèn)后，可以開(kāi)始糾結(jié)與細(xì)節(jié)了，ios屏幕尺寸有這幾種：960*480，1024*768。具體的查看APP設(shè)計(jì)尺寸規(guī)范大全，APP界面設(shè)計(jì)新手教程。

8. 視覺(jué)UI設(shè)計(jì)，用ps 或AI

在高保真原型完成后，就該給進(jìn)行視覺(jué)設(shè)計(jì)，Apple提倡有質(zhì)感，有仿真度的圖形界面，我們讓app的界面設(shè)計(jì)盡量接近用戶(hù)熟悉或者喜歡的風(fēng)格。在配色和圖標(biāo)上可以下足功夫

9. 根據(jù)自身產(chǎn)品的文化來(lái)完善APP設(shè)計(jì)理念

由于移動(dòng)設(shè)備的關(guān)系，設(shè)計(jì)上盡量保持簡(jiǎn)潔，若非必要就不要放上華麗的圖形或其他的信息去吸引用戶(hù)，我們需要讓信息一目了然，不隱晦，不誤導(dǎo)。

10. 多種應(yīng)用場(chǎng)景的ICON設(shè)計(jì)，1024 512 114等。

ICON將決定APP在Store中的辨識(shí)度，可以先從簡(jiǎn)單的輪廓開(kāi)始，先從核心創(chuàng)意開(kāi)始。除非有必要，你的icon最好不要包含文字，盡量使用跟你的app圖形界面一致的材質(zhì)和漸變。你如果想給用戶(hù)呈現(xiàn)高質(zhì)量的UI設(shè)計(jì)，別忘了把icon設(shè)計(jì)成29×29，72×72，和512×512三種尺寸。

APP圖標(biāo)設(shè)計(jì)參考網(wǎng)站：6個(gè)精品iPhone矢量圖標(biāo)庫(kù)推薦

11. 交付設(shè)計(jì)稿或切圖文件夾

如果你自己不開(kāi)發(fā)app的功能，還需要把清晰的設(shè)計(jì)指南交付給開(kāi)發(fā)人員。我會(huì)把界面和描述集中到一張大圖，并盡可能的把所有可遇見(jiàn)的情況都給開(kāi)發(fā)人員描述清楚。同時(shí)可以對(duì)PSD進(jìn)行尺寸標(biāo)注，說(shuō)明，及存為PNG方便開(kāi)發(fā)。

android切圖教程：

android APPUI設(shè)計(jì)、切圖的常用尺寸大全

如何對(duì)手機(jī)UI進(jìn)行設(shè)計(jì)，切圖

第二部分：APP產(chǎn)品設(shè)計(jì)流程分享，由icojump.in團(tuán)隊(duì)提供

icojump.in團(tuán)隊(duì)分享和總結(jié)的一套「產(chǎn)品設(shè)計(jì)流程」，里面包含了3大模塊，產(chǎn)品前期分析，設(shè)計(jì)環(huán)節(jié)，上線總結(jié)反饋，基本上涵蓋了，從需求到上線的經(jīng)過(guò)的流程，相較于大型UED團(tuán)隊(duì)會(huì)“輕”一些，適合中小型團(tuán)隊(duì)。如果所在公司內(nèi)部還未有設(shè)計(jì)流程，可以參考此流程，也可以拿去在這個(gè)基礎(chǔ)上進(jìn)行改進(jìn)完善?；蛘呶覀兛梢詤⒄者@個(gè)來(lái)。制作我們自己的app產(chǎn)品設(shè)計(jì)流程。

?