前面25學(xué)堂分別跟大家分享了移動(dòng)APP設(shè)計(jì)師進(jìn)階之路【一】：設(shè)計(jì)書(shū)籍與規(guī)范和移動(dòng)APP設(shè)計(jì)師進(jìn)階之路【二】：設(shè)計(jì)原則大全?兩篇入門級(jí)別的APP設(shè)計(jì)學(xué)習(xí)文檔?；蛘哒f(shuō)是APP設(shè)計(jì)學(xué)習(xí)的目錄。

如何從零開(kāi)始學(xué)習(xí)APP界面設(shè)計(jì)？

只要大家按照這樣的步驟來(lái)學(xué)習(xí)，一定會(huì)成為一名資深的APP設(shè)計(jì)大牛的。

當(dāng)我們學(xué)習(xí)閱讀了APP設(shè)計(jì)規(guī)范和原則之后，下一步那就是實(shí)戰(zhàn)操作了。

開(kāi)始制作我們的APP產(chǎn)品設(shè)計(jì)原型圖以及高低保真的交互輸出物。

換句話說(shuō)：理論知識(shí)可以看做是修煉內(nèi)功，實(shí)戰(zhàn)技能則是轉(zhuǎn)化為招式——即 設(shè)計(jì)方案。作為新人，最基礎(chǔ)的是有輸出交互設(shè)計(jì)方案的能力。之后更多的是積累都在于如何提出易用性高、用戶滿意喜歡的設(shè)計(jì)方案。

A、交互設(shè)計(jì)輸出物包含哪些？

互輸出物是設(shè)計(jì)師對(duì)于產(chǎn)品或者需求的思考總結(jié)的一種表現(xiàn)形式。設(shè)計(jì)師將需求方提出的項(xiàng)目需求和已有的數(shù)據(jù)加以整理、分析，經(jīng)過(guò)發(fā)散的創(chuàng)造性思維創(chuàng)新和嚴(yán)謹(jǐn)?shù)倪壿嬚撟C后，得到了逐漸成熟的交互產(chǎn)物。這個(gè)思辨的過(guò)程貫穿于交互設(shè)計(jì)工作流程的每個(gè)環(huán)節(jié)。

1）流程圖?

1、國(guó)外精美的APPUI界面設(shè)計(jì)作品流程圖欣賞

2、UI/UX設(shè)計(jì)師及產(chǎn)品經(jīng)理必備的APP手繪草圖模板

3、一款高校類APP產(chǎn)品設(shè)計(jì)流程完整版|APP設(shè)計(jì)信息圖

4、移動(dòng)商街APP界面設(shè)計(jì)欣賞和移動(dòng)APP設(shè)計(jì)流程

5、APP界面設(shè)計(jì)流程和APP產(chǎn)品設(shè)計(jì)流程知識(shí)匯總

2）線框圖 （Wireframe）

設(shè)計(jì)師或者需求方對(duì)于產(chǎn)品的一種快速的、靜態(tài)的、清晰的表達(dá)手段。用于項(xiàng)目前期的討論和溝通，給項(xiàng)目成員間或者和客戶溝通時(shí)提供一個(gè)大致的概念和討論方向，以便快速的理解和及時(shí)的提出自己的建議。

1、APP原型界面設(shè)計(jì)教程：線框圖的鏈接跳轉(zhuǎn)設(shè)計(jì)

2、2套APP產(chǎn)品原型流程線框圖案例學(xué)習(xí)

3、APP原型線框圖模板PSD下載，移動(dòng)設(shè)計(jì)師必備素材

4、APP產(chǎn)品經(jīng)理必備的APP線框圖工具【Android和iOS】

線框圖輸出最方便的就是手繪。在一張紙上呈現(xiàn)簡(jiǎn)易的界面布局和關(guān)鍵的注釋，在敏捷項(xiàng)目流程中運(yùn)用的比較廣泛。通常在敏捷團(tuán)隊(duì)中，用快速迭代的線框圖和團(tuán)隊(duì)中大量的溝通和討論，產(chǎn)出項(xiàng)目關(guān)鍵的界面方案，視覺(jué)和前端開(kāi)發(fā)即可開(kāi)始下個(gè)階段的工作，交互設(shè)計(jì)師則繼續(xù)完善方案細(xì)節(jié)和狀態(tài)的補(bǔ)充。多種角色齊頭并進(jìn)，這是敏捷設(shè)計(jì)相對(duì)傳統(tǒng)的瀑布式合作方式來(lái)說(shuō)獨(dú)具特色的地方。

當(dāng)然畫(huà)線框圖的工具也很多，常用的有Balsamiq Mockups，Axure，PPT，Sketch等。每個(gè)工具都有各具特色，也各有利弊。不要刻意地糾結(jié)于形式和工具方法，能使用的習(xí)慣和滿足自己設(shè)計(jì)方案的表達(dá)即可。

3）原型(Prototype)

原型比線框圖更接近產(chǎn)品最終的形態(tài)，它用作對(duì)用戶進(jìn)行可用性測(cè)試和項(xiàng)目的設(shè)計(jì)輸出。項(xiàng)目早期的原型測(cè)試能夠及時(shí)的發(fā)現(xiàn)問(wèn)題和漏洞，節(jié)省后續(xù)的開(kāi)發(fā)投入成本。原型是可交互的，并且盡可能接近最終的產(chǎn)品界面的高保真設(shè)計(jì)稿。

1、1天搞定的網(wǎng)站首頁(yè)Axure原型圖設(shè)計(jì)思路總結(jié)

2、小議Axure制作APP原型尺寸規(guī)范和注意事項(xiàng)

3、APP原型設(shè)計(jì)精品視頻教程—inVision原創(chuàng)出品

4、快速做出逼真的移動(dòng)交互APP原型工具—乎之原型

5、最好用的在線App原型設(shè)計(jì)工具推薦-墨刀

6、用Axure制作APP交互原型的視頻教程【共6節(jié)課】

4）交互說(shuō)明文檔

1、如何寫一份交互說(shuō)明文檔（作者：heidixie）

2、如何編寫交互設(shè)計(jì)詳細(xì)說(shuō)明文檔（作者：heidixie）

3、如何制作實(shí)用美觀的設(shè)計(jì)文檔（作者：yoyo）

B、APP交互工具推薦

工具的作用是用來(lái)表達(dá)自己的設(shè)計(jì)方案，初期討論、溝通想法時(shí)用紙幣來(lái)的最快最方便。軟件的好處則是利于存檔、多人協(xié)作、傳遞。

1、Axure

雖然交互設(shè)計(jì)工具幾年來(lái)層出不窮，但是實(shí)用性最強(qiáng)的個(gè)人覺(jué)得還是Axure ，學(xué)習(xí)成本低、簡(jiǎn)單好用、多平臺(tái)通用。對(duì)于新手，前期可從排版開(kāi)始練習(xí)畫(huà)線框圖，不用沉迷于做復(fù)雜的交互效果，因?yàn)楣ぷ髦锌赡軟](méi)有時(shí)間做非常細(xì)膩的交互動(dòng)效。當(dāng)然，如果是給大領(lǐng)導(dǎo)演示方案，一些點(diǎn)擊跳轉(zhuǎn)還是有必要做的。

繪制高、低保真網(wǎng)頁(yè)原型圖;可作為產(chǎn)品、交互文檔輸出工具。

2、產(chǎn)品經(jīng)理的APP設(shè)計(jì)工具：mockplus、墨刀和justinmind

3、Sketch

完全針對(duì)移動(dòng)端設(shè)計(jì)而生的軟件。界面干凈直觀，分層的概念符合設(shè)計(jì)師工作習(xí)慣，當(dāng)界面復(fù)雜時(shí)明確的圖層與分組使元素控件管理起來(lái)非常方便。Artboard、Symbol和Text style 的運(yùn)用簡(jiǎn)化了重復(fù)內(nèi)容調(diào)用的工作也減輕了后續(xù)修改工作，圖配文的文檔輸出管理好過(guò)Axure。第三方插件的開(kāi)發(fā)和控件庫(kù)資源使設(shè)計(jì)更方便，還有很多其他的小功能，比如Share(用其他電腦可以實(shí)時(shí)觀看設(shè)計(jì)進(jìn)度)，自己還要邊使用邊發(fā)現(xiàn)。與Axure對(duì)比，前者更適合網(wǎng)頁(yè)原型設(shè)計(jì)而后者更傾向于移動(dòng)端產(chǎn)品。

繪制高、低保真移動(dòng)端原型圖;繪制圖標(biāo)、視覺(jué)設(shè)計(jì)稿;可切圖輸出;可作為交互文檔和視覺(jué)設(shè)計(jì)說(shuō)明文檔的輸出工具。

4、Pixate和Quartz Composer-Origami

兩者都是交互原型制作工具，可生成模擬器或者mirror到手機(jī)上，更直觀地推敲設(shè)計(jì)交互原型。前者被Google收購(gòu)已經(jīng)免費(fèi)。

最大的特點(diǎn)是運(yùn)用了圖層概念，將交互手勢(shì)、動(dòng)畫(huà)直接添加到圖層上，并用base on將頁(yè)面聯(lián)系起來(lái)。后者是Facebook在蘋果原生Quartz Composer動(dòng)畫(huà)設(shè)計(jì)軟件上的插件，大大降低了設(shè)計(jì)使用門檻。特點(diǎn)是模塊化，用編程的邏輯制作動(dòng)畫(huà)。不同的交互手勢(shì)和動(dòng)效樣式有各自的一個(gè)模塊，用線將模塊聯(lián)系起來(lái)，軟件的動(dòng)效調(diào)用基本源于FB的Pop Animation庫(kù)。兩者學(xué)習(xí)成本很高，尤其后者，頁(yè)面多、交互多時(shí)制作面板非常復(fù)雜，但做出的動(dòng)效精確優(yōu)美?？蛇m用于個(gè)別頁(yè)面中少數(shù)重要、精確的交互原型制作。

制作精準(zhǔn)的交互動(dòng)效原型。