起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識從0設計App（6）：根據流程圖4步解決原型稿、交互稿
至此，我們完成了app的宏觀定位、系統架構、產品結構圖以及最為重要的2大流程圖（業務、頁面流程圖）。接下來本文將圍繞頁面的原型設計、交互設計展開。
在xxxx目前我們手頭上已經繪制了「職得App」所有業務流程圖，還有一張頁面流程地圖?？梢哉f在心里基本知道產品的功能，以及每個頁面的功能元素，接下來就是參與需求評審的原型稿和交付給技術同學的設計稿了。
強烈建議先看前面的文章再往下看～否則可能看不懂。
二、原型vs交互vs視覺
很多人對原型稿、交互稿、視覺稿定義不清楚。
無論是大公司還是從0設計App，由業務流程圖還不能直接交付給程序員開發，還需要做出原型需求稿、交互UE稿、UI稿。而三者正好對應是黃金圈法則：Why-How-What。
- 原型需求稿：頁面有什么功能（why）
- 交互UE稿：功能如何被用戶使用（how）
- 視覺UI稿：功能長什么樣子（what）
理想情況，在大公司里分別由3個人負責，或UED部門負責交互和視覺。但很多中小公司里產品經理同時身兼交互設計師的身份，更有甚者兼任視覺設計師。作為從0設計App的唯一負責人，我當然是同時身兼原型和交互哈！
另外，原型有人還會分為線框圖、低保真和高保真原型，我用下厘清一下。其實名稱不重要，重要的是不同公司分工不同，按照實際情況應對就好了。
本文著重就原型和交互展開。關于視覺UI設計，下一篇文章來講。
三、原型稿
關于原型，有些產品經理堅持「逼真」、「動態」，尤其是一些乙方公司，如軟件外包公司。我可以很明確的說，即使你花時間把Axure練得很熟，把原型做得很逼真，在甲方公司里都是性價比極低的做法。
3.1 What：原型稿是什么？
在實際工作中，直接看原型稿的3大使用場景：
- 描述需求：產品經理通過對需求挖掘，然后解決用戶的需求，原型作為輔助工具形象地描繪出來，以便其他人可直觀理解、快速達成共識，解決用戶的需求；
- 設計協作：需要在進入UI設計階段之前將原型稿確認，不能讓UI通過你的口述來天馬行空設計；
- 客戶展示：對于外包服務型乙方公司，在聽了甲方的需求后，一般會直接設計動態、可交互的原型，目的是更好地解釋給甲方聽，也是為了更快交付簽合同。
一般來說，我們都是甲方公司的產品經理，只用考慮前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個頁面每個頁面里的核心元素也能看到?，F在將這些功能元素轉化為頁面上的信息即可。
比如：我的職圈卡片（包括圖片、題目、簡介等）、職圈的介紹（包括圈主姓名、簡介、頭像、背景圖等）、課程章節分層（章節名、課程名、分級操作等）、視頻播放器、作業展示區等。
第三，添加功能和跳轉。
添加連線，點擊哪里進行頁面的跳轉。
比如：點擊卡片會跳轉到下個頁面，點擊具體課程章節會跳轉到下個頁面，但是點擊圈主頭像并不會進行跳轉。
第四，添加業務判斷。
在業務流程圖里提及了，看課程視頻前會進行兩次判定，完成作業和是否付費即菱形控件。因此，在功能上可以對已經完成作業的課程勾選icon標記，對未付費課程進行加鎖icon提示。
最終我們就會得到如下的原型圖（草稿線框圖）：
同理，我們根據業務流程圖和頁面流程圖，可以將每個頁面的原型全部繪制出來。如下圖，大概會得到非常多的原型圖：
看到這里，我想你一定會有很多問好。工作量是否太大了。沒錯，很多產品新人每天被原型圖所折磨，還要改來改去，特別麻煩。
因此我這里想特別強調，對于線框圖來說：
- 先畫流程圖，敲定后再畫原型；
- 在動Axure之前，建議手繪！
- 不要上色，不要寫太多注釋。
好吧，我覺得你可能聽不進去，吃兩次教訓就知道了，我也是這樣過來的。
四、交互稿
鑒于是獨立負責「職得App」，因此最終目的是拿出交互稿。然后交付由UI設計師進行設計，所以我還自己獨立作為不專業的交互設計師進行UE交互設計。
就個人從業經驗而言，互聯網UE交互設計：基于人類心理和用戶需求的人機交互設計，而交互設計原則或者說心理學知識多如牛毛，需要針對不同場景、不同用戶、不同功能目標來敲定。
關于交互，這里推薦《設計心理學》套裝，唐納德·A·諾曼，豆瓣8.6分。同時再推薦一個系列文章：交互設計師應具備的技能樹（9）| 設計流程的三個階段；交互理論 | 深度解析尼爾森十大交互設計原則在設計中的用法。
簡而言之，根據用戶心理，設計出更舒服的功能使用方式。
關于方法，作為產品人我不專業，直接引用起點學院特訓營主講人黃向陽（前網易資深交互專家）的4個關鍵點：
- 初始狀態：如新手引導、禁用情況、動畫提示、視覺引導等；
- 中間流程：如動畫效果、操作手勢、交互流程、幫助提示、過渡流程等；
- 結果狀態：如點擊效果、結果提示、二次確認等；
- 異常情況：如錯誤操作提示、可交互邊界、異常情況發生等。
繼續拿上文提到的線框圖舉例子，根據對原型高進行交互設計。
針對頁面上所有可以交互的點，按照功能的實際情況來判定要交代清楚哪些事情給開發同學看。具體的交互應當比我圖中展示的更為詳細，這里只是取其示意，且并不一定是最好的交互方式。
簡而言之，根據用戶心理，設計出更舒服的功能使用方式。并且在交互稿中事無巨細、沒有遺漏地寫出來。畢竟是寫給技術開發同學的，對于他們來說，只有是非0和1，沒有0.5這種模糊的東西。
同樣地，交互稿的工作量也是巨大的。這里我就不一一貼圖了，關注公眾號領取。
五、總結
OK，至此，作為產品經理的我們基本已經大功告成。接下來將交互稿交付給UI設計師，最后制作PRD給技術開發同學就可以了！所以，下一篇內容：從0設計App（7）：視覺設計。
由于我也不懂視覺設計，因此請來了阿里巴巴認證設計師來講（有設計需求可找——>站酷&微博：楊錦Vincent），先劇透張圖：
參考學習內容：
- http://www.aharts.cn/pd/1031272.html
- http://www.aharts.cn/ucd/897458.html
- 起點學院特訓營課程-主講人黃向陽
相關閱讀
從0設計App（2）：競品分析-吃透3款產品看職場在線學習平臺
作者：朱魯斌，公眾號：字字朱心。每周深度思考一個問題，不穩定的世界里找到一份篤定。
本文由@朱魯斌? 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash， 基于CC0協議。
我發現人人都是產品經理真是個寶藏網站 為啥以前沒發現 相見恨晚 作者的文章通俗易懂 不像其他大廠的文章花里胡哨裝x怪
學習了，感謝感謝。
唉，太羨慕了，我們畫原型還得各種瘋狂改效果，交互和頁面設計就得花掉超多時間