至此，我們完成了app的宏觀定位、系統架構、產品結構圖以及最為重要的2大流程圖（業務、頁面流程圖）。接下來本文將圍繞頁面的原型設計、交互設計展開。
在xxxx目前我們手頭上已經繪製了「職得App」所有業務流程圖，還有一張頁面流程地圖。可以説在心裏基本知道產品的功能，以及每個頁面的功能元素，接下來就是參與需求評審的原型稿和交付給技術同學的設計稿了。
強烈建議先看前面的文章再往下看～否則可能看不懂。
二、原型vs交互vs視覺
很多人對原型稿、交互稿、視覺稿定義不清楚。
無論是大公司還是從0設計App，由業務流程圖還不能直接交付給程序員開發，還需要做出原型需求稿、交互UE稿、UI稿。而三者正好對應是黃金圈法則：Why-How-What。
理想情況，在大公司裏分別由3個人負責，或UED部門負責交互和視覺。但很多中小公司裏產品經理同時身兼交互設計師的身份，更有甚者兼任視覺設計師。作為從0設計App的唯一負責人，我當然是同時身兼原型和交互哈！
另外，原型有人還會分為線框圖、低保真和高保真原型，我用下釐清一下。其實名稱不重要，重要的是不同公司分工不同，按照實際情況應對就好了。
本文着重就原型和交互展開。關於視覺UI設計，下一篇文章來講。
三、原型稿
關於原型，有些產品經理堅持「逼真」、「動態」，尤其是一些乙方公司，如軟件外包公司。我可以很明確的説，即使你花時間把Axure練得很熟，把原型做得很逼真，在甲方公司裏都是性價比極低的做法。
3.1 What：原型稿是什麼？
在實際工作中，直接看原型稿的3大使用場景：
一般來説，我們都是甲方公司的產品經理，只用考慮前2點。
你所做的原型，其實更多就是講清楚，頁面有什麼功能，如何解決需求。前面做了這麼多調研，繪製了流程圖，其實都是在解決用户的需求，通過功能/服務來解決需求，因此在原型環節也是如此，講清楚大概怎麼解決需求即可。
如上圖，如果公司有交互設計師，最終做成這個樣子就可以了。已經能夠説清楚功能是解決什麼需求，剩下的細節交給UE和UI設計就好了。
3.2 How：怎麼做線框稿？
問：用什麼工具做原型？
答：其實Axure、Sketch、磨刀、甚至PPT都能做原型，我推薦Axure。
問：Axure要系統學嗎？
答：我反正沒學過，至今95%的工作裏只用到方框、文本框、按鈕、佔位符、直線這麼幾種夠了。
做出上面途中那樣子的線框稿，基本上已經可以在甲方公司應用了。產品經理不是來畫圖的，否則和設計師有什麼差別？設計師確實要系統學一下Sketch或Axure。
在各大廠中用過很多方法，用來用去，讓我寫經驗，我還是推薦閔偉老師（攜程高級PM）的4步方法，比較簡單易用：
同樣地，回到我們「職得App」中來。
和上次一樣，挑出職得App的一個業務流程做範例——學員看視頻流程。
第一，繪製業務流程圖和頁面流程圖，這在之前的xxxxx文章中我們已經操作過了。
第二，添加元素。
根據上圖，可以看到這個流程涉是「2.職圈-我的職圈tab」——>「2.3職圈-職點課程」——>「2.3.1視頻播放」這3個頁面。同時，這3個頁面每個頁面裏的核心元素也能看到。現在將這些功能元素轉化為頁面上的信息即可。
比如：我的職圈卡片（包括圖片、題目、簡介等）、職圈的介紹（包括圈主姓名、簡介、頭像、背景圖等）、課程章節分層（章節名、課程名、分級操作等）、視頻播放器、作業展示區等。
第三，添加功能和跳轉。
添加連線，點擊哪裏進行頁面的跳轉。
比如：點擊卡片會跳轉到下個頁面，點擊具體課程章節會跳轉到下個頁面，但是點擊圈主頭像並不會進行跳轉。
第四，添加業務判斷。
在業務流程圖裏提及了，看課程視頻前會進行兩次判定，完成作業和是否付費即菱形控件。因此，在功能上可以對已經完成作業的課程勾選icon標記，對未付費課程進行加鎖icon提示。
最終我們就會得到如下的原型圖（草稿線框圖）：
同理，我們根據業務流程圖和頁面流程圖，可以將每個頁面的原型全部繪製出來。如下圖，大概會得到非常多的原型圖：
看到這裏，我想你一定會有很多問好。工作量是否太大了。沒錯，很多產品新人每天被原型圖所折磨，還要改來改去，特別麻煩。
因此我這裏想特別強調，對於線框圖來説：
好吧，我覺得你可能聽不進去，吃兩次教訓就知道了，我也是這樣過來的。
四、交互稿
鑑於是獨立負責「職得App」，因此最終目的是拿出交互稿。然後交付由UI設計師進行設計，所以我還自己獨立作為不專業的交互設計師進行UE交互設計。
就個人從業經驗而言，互聯網UE交互設計：基於人類心理和用户需求的人機交互設計，而交互設計原則或者説心理學知識多如牛毛，需要針對不同場景、不同用户、不同功能目標來敲定。
關於交互，這裏推薦《設計心理學》套裝，唐納德·A·諾曼，豆瓣8.6分。同時再推薦一個系列文章：交互設計師應具備的技能樹（9）| 設計流程的三個階段；交互理論 | 深度解析尼爾森十大交互設計原則在設計中的用法。
簡而言之，根據用户心理，設計出更舒服的功能使用方式。
關於方法，作為產品人我不專業，直接引用起點學院特訓營主講人黃向陽（前網易資深交互專家）的4個關鍵點：
繼續拿上文提到的線框圖舉例子，根據對原型高進行交互設計。
針對頁面上所有可以交互的點，按照功能的實際情況來判定要交代清楚哪些事情給開發同學看。具體的交互應當比我圖中展示的更為詳細，這裏只是取其示意，且並不一定是最好的交互方式。
簡而言之，根據用户心理，設計出更舒服的功能使用方式。並且在交互稿中事無鉅細、沒有遺漏地寫出來。畢竟是寫給技術開發同學的，對於他們來説，只有是非0和1，沒有0.5這種模糊的東西。
同樣地，交互稿的工作量也是巨大的。這裏我就不一一貼圖了，關注公眾號領取。
五、總結
OK，至此，作為產品經理的我們基本已經大功告成。接下來將交互稿交付給UI設計師，最後製作PRD給技術開發同學就可以了！所以，下一篇內容：從0設計App（7）：視覺設計。
由於我也不懂視覺設計，因此請來了阿里巴巴認證設計師來講（有設計需求可找——>站酷&微博：楊錦Vincent），先劇透張圖：
參考學習內容：