至此，我們完成了app的宏觀定位、系統(tǒng)架構(gòu)、產(chǎn)品結(jié)構(gòu)圖以及最為重要的2大流程圖（業(yè)務(wù)、頁面流程圖）。接下來本文將圍繞頁面的原型設(shè)計(jì)、交互設(shè)計(jì)展開。

在xxxx目前我們手頭上已經(jīng)繪制了「職得App」所有業(yè)務(wù)流程圖，還有一張頁面流程地圖?？梢哉f在心里基本知道產(chǎn)品的功能，以及每個(gè)頁面的功能元素，接下來就是參與需求評(píng)審的原型稿和交付給技術(shù)同學(xué)的設(shè)計(jì)稿了。

強(qiáng)烈建議先看前面的文章再往下看～否則可能看不懂。

二、原型vs交互vs視覺

很多人對(duì)原型稿、交互稿、視覺稿定義不清楚。

無論是大公司還是從0設(shè)計(jì)App，由業(yè)務(wù)流程圖還不能直接交付給程序員開發(fā)，還需要做出原型需求稿、交互UE稿、UI稿。而三者正好對(duì)應(yīng)是黃金圈法則：Why-How-What。

• 原型需求稿：頁面有什么功能（why）
• 交互UE稿：功能如何被用戶使用（how）
• 視覺UI稿：功能長(zhǎng)什么樣子（what）

理想情況，在大公司里分別由3個(gè)人負(fù)責(zé)，或UED部門負(fù)責(zé)交互和視覺。但很多中小公司里產(chǎn)品經(jīng)理同時(shí)身兼交互設(shè)計(jì)師的身份，更有甚者兼任視覺設(shè)計(jì)師。作為從0設(shè)計(jì)App的唯一負(fù)責(zé)人，我當(dāng)然是同時(shí)身兼原型和交互哈！

另外，原型有人還會(huì)分為線框圖、低保真和高保真原型，我用下厘清一下。其實(shí)名稱不重要，重要的是不同公司分工不同，按照實(shí)際情況應(yīng)對(duì)就好了。

本文著重就原型和交互展開。關(guān)于視覺UI設(shè)計(jì)，下一篇文章來講。

三、原型稿

關(guān)于原型，有些產(chǎn)品經(jīng)理堅(jiān)持「逼真」、「動(dòng)態(tài)」，尤其是一些乙方公司，如軟件外包公司。我可以很明確的說，即使你花時(shí)間把Axure練得很熟，把原型做得很逼真，在甲方公司里都是性價(jià)比極低的做法。

3.1 What：原型稿是什么？

在實(shí)際工作中，直接看原型稿的3大使用場(chǎng)景：

1. 描述需求：產(chǎn)品經(jīng)理通過對(duì)需求挖掘，然后解決用戶的需求，原型作為輔助工具形象地描繪出來，以便其他人可直觀理解、快速達(dá)成共識(shí)，解決用戶的需求；
2. 設(shè)計(jì)協(xié)作：需要在進(jìn)入U(xiǎn)I設(shè)計(jì)階段之前將原型稿確認(rèn)，不能讓UI通過你的口述來天馬行空設(shè)計(jì)；
3. 客戶展示：對(duì)于外包服務(wù)型乙方公司，在聽了甲方的需求后，一般會(huì)直接設(shè)計(jì)動(dòng)態(tài)、可交互的原型，目的是更好地解釋給甲方聽，也是為了更快交付簽合同。

一般來說，我們都是甲方公司的產(chǎn)品經(jīng)理，只用考慮前2點(diǎn)。

你所做的原型，其實(shí)更多就是講清楚，頁面有什么功能，如何解決需求。前面做了這么多調(diào)研，繪制了流程圖，其實(shí)都是在解決用戶的需求，通過功能/服務(wù)來解決需求，因此在原型環(huán)節(jié)也是如此，講清楚大概怎么解決需求即可。

如上圖，如果公司有交互設(shè)計(jì)師，最終做成這個(gè)樣子就可以了。已經(jīng)能夠說清楚功能是解決什么需求，剩下的細(xì)節(jié)交給UE和UI設(shè)計(jì)就好了。

3.2 How：怎么做線框稿？

問：用什么工具做原型？

答：其實(shí)Axure、Sketch、磨刀、甚至PPT都能做原型，我推薦Axure。

問：Axure要系統(tǒng)學(xué)嗎？

答：我反正沒學(xué)過，至今95%的工作里只用到方框、文本框、按鈕、占位符、直線這么幾種夠了。

做出上面途中那樣子的線框稿，基本上已經(jīng)可以在甲方公司應(yīng)用了。產(chǎn)品經(jīng)理不是來畫圖的，否則和設(shè)計(jì)師有什么差別？設(shè)計(jì)師確實(shí)要系統(tǒng)學(xué)一下Sketch或Axure。

在各大廠中用過很多方法，用來用去，讓我寫經(jīng)驗(yàn)，我還是推薦閔偉老師（攜程高級(jí)PM）的4步方法，比較簡(jiǎn)單易用：

1. 繪制業(yè)務(wù)流程圖和頁面流程圖；
2. 添加頁面基本元素；
3. 添加功能，滿足業(yè)務(wù)流程和頁面跳轉(zhuǎn)；
4. 添加判斷，滿足流轉(zhuǎn)。

同樣地，回到我們「職得App」中來。

和上次一樣，挑出職得App的一個(gè)業(yè)務(wù)流程做范例——學(xué)員看視頻流程。

第一，繪制業(yè)務(wù)流程圖和頁面流程圖，這在之前的xxxxx文章中我們已經(jīng)操作過了。

第二，添加元素。

根據(jù)上圖，可以看到這個(gè)流程涉是「2.職圈-我的職圈tab」——>「2.3職圈-職點(diǎn)課程」——>「2.3.1視頻播放」這3個(gè)頁面。同時(shí)，這3個(gè)頁面每個(gè)頁面里的核心元素也能看到。現(xiàn)在將這些功能元素轉(zhuǎn)化為頁面上的信息即可。

比如：我的職圈卡片（包括圖片、題目、簡(jiǎn)介等）、職圈的介紹（包括圈主姓名、簡(jiǎn)介、頭像、背景圖等）、課程章節(jié)分層（章節(jié)名、課程名、分級(jí)操作等）、視頻播放器、作業(yè)展示區(qū)等。

第三，添加功能和跳轉(zhuǎn)。

添加連線，點(diǎn)擊哪里進(jìn)行頁面的跳轉(zhuǎn)。

比如：點(diǎn)擊卡片會(huì)跳轉(zhuǎn)到下個(gè)頁面，點(diǎn)擊具體課程章節(jié)會(huì)跳轉(zhuǎn)到下個(gè)頁面，但是點(diǎn)擊圈主頭像并不會(huì)進(jìn)行跳轉(zhuǎn)。

第四，添加業(yè)務(wù)判斷。

在業(yè)務(wù)流程圖里提及了，看課程視頻前會(huì)進(jìn)行兩次判定，完成作業(yè)和是否付費(fèi)即菱形控件。因此，在功能上可以對(duì)已經(jīng)完成作業(yè)的課程勾選icon標(biāo)記，對(duì)未付費(fèi)課程進(jìn)行加鎖icon提示。

最終我們就會(huì)得到如下的原型圖（草稿線框圖）：

同理，我們根據(jù)業(yè)務(wù)流程圖和頁面流程圖，可以將每個(gè)頁面的原型全部繪制出來。如下圖，大概會(huì)得到非常多的原型圖：

看到這里，我想你一定會(huì)有很多問好。工作量是否太大了。沒錯(cuò)，很多產(chǎn)品新人每天被原型圖所折磨，還要改來改去，特別麻煩。

因此我這里想特別強(qiáng)調(diào)，對(duì)于線框圖來說：

• 先畫流程圖，敲定后再畫原型；
• 在動(dòng)Axure之前，建議手繪！
• 不要上色，不要寫太多注釋。

好吧，我覺得你可能聽不進(jìn)去，吃兩次教訓(xùn)就知道了，我也是這樣過來的。

四、交互稿

鑒于是獨(dú)立負(fù)責(zé)「職得App」，因此最終目的是拿出交互稿。然后交付由UI設(shè)計(jì)師進(jìn)行設(shè)計(jì)，所以我還自己獨(dú)立作為不專業(yè)的交互設(shè)計(jì)師進(jìn)行UE交互設(shè)計(jì)。

就個(gè)人從業(yè)經(jīng)驗(yàn)而言，互聯(lián)網(wǎng)UE交互設(shè)計(jì)：基于人類心理和用戶需求的人機(jī)交互設(shè)計(jì)，而交互設(shè)計(jì)原則或者說心理學(xué)知識(shí)多如牛毛，需要針對(duì)不同場(chǎng)景、不同用戶、不同功能目標(biāo)來敲定。

關(guān)于交互，這里推薦《設(shè)計(jì)心理學(xué)》套裝，唐納德·A·諾曼，豆瓣8.6分。同時(shí)再推薦一個(gè)系列文章：交互設(shè)計(jì)師應(yīng)具備的技能樹（9）| 設(shè)計(jì)流程的三個(gè)階段；交互理論 | 深度解析尼爾森十大交互設(shè)計(jì)原則在設(shè)計(jì)中的用法。

簡(jiǎn)而言之，根據(jù)用戶心理，設(shè)計(jì)出更舒服的功能使用方式。

關(guān)于方法，作為產(chǎn)品人我不專業(yè)，直接引用起點(diǎn)學(xué)院特訓(xùn)營(yíng)主講人黃向陽（前網(wǎng)易資深交互專家）的4個(gè)關(guān)鍵點(diǎn)：

1. 初始狀態(tài)：如新手引導(dǎo)、禁用情況、動(dòng)畫提示、視覺引導(dǎo)等；
2. 中間流程：如動(dòng)畫效果、操作手勢(shì)、交互流程、幫助提示、過渡流程等；
3. 結(jié)果狀態(tài)：如點(diǎn)擊效果、結(jié)果提示、二次確認(rèn)等；
4. 異常情況：如錯(cuò)誤操作提示、可交互邊界、異常情況發(fā)生等。

繼續(xù)拿上文提到的線框圖舉例子，根據(jù)對(duì)原型高進(jìn)行交互設(shè)計(jì)。

針對(duì)頁面上所有可以交互的點(diǎn)，按照功能的實(shí)際情況來判定要交代清楚哪些事情給開發(fā)同學(xué)看。具體的交互應(yīng)當(dāng)比我圖中展示的更為詳細(xì)，這里只是取其示意，且并不一定是最好的交互方式。

簡(jiǎn)而言之，根據(jù)用戶心理，設(shè)計(jì)出更舒服的功能使用方式。并且在交互稿中事無巨細(xì)、沒有遺漏地寫出來。畢竟是寫給技術(shù)開發(fā)同學(xué)的，對(duì)于他們來說，只有是非0和1，沒有0.5這種模糊的東西。

同樣地，交互稿的工作量也是巨大的。這里我就不一一貼圖了，關(guān)注公眾號(hào)領(lǐng)取。

五、總結(jié)

OK，至此，作為產(chǎn)品經(jīng)理的我們基本已經(jīng)大功告成。接下來將交互稿交付給UI設(shè)計(jì)師，最后制作PRD給技術(shù)開發(fā)同學(xué)就可以了！所以，下一篇內(nèi)容：從0設(shè)計(jì)App（7）：視覺設(shè)計(jì)。

由于我也不懂視覺設(shè)計(jì)，因此請(qǐng)來了阿里巴巴認(rèn)證設(shè)計(jì)師來講（有設(shè)計(jì)需求可找——>站酷&微博：楊錦Vincent），先劇透張圖：

參考學(xué)習(xí)內(nèi)容：

1. http://theventurebank.com/pd/1031272.html
2. http://theventurebank.com/ucd/897458.html
3. 起點(diǎn)學(xué)院特訓(xùn)營(yíng)課程-主講人黃向陽

相關(guān)閱讀

從0設(shè)計(jì)App（1）：市場(chǎng)分析-知識(shí)短視頻行業(yè)（上）

從0設(shè)計(jì)App（1）：市場(chǎng)分析-職場(chǎng)技能教育市場(chǎng)（下）

從0設(shè)計(jì)App（2）：競(jìng)品分析-吃透3款產(chǎn)品看職場(chǎng)在線學(xué)習(xí)平臺(tái)

從0設(shè)計(jì)App（3）：如何用問卷看透人心 (上)

從0設(shè)計(jì)App（3）：用戶訪談造就產(chǎn)品靈魂（下）

從0設(shè)計(jì)App（4）：用4步管理一切需求，做到心中有數(shù)

從0設(shè)計(jì)App（5）：2個(gè)維度構(gòu)建產(chǎn)品之“道”（上）

從0設(shè)計(jì)App（5）：如何搭建系統(tǒng)架構(gòu)和產(chǎn)品結(jié)構(gòu)（中）

從0設(shè)計(jì)App（5）：2套方法繪制業(yè)務(wù)、頁面流程圖（下）

作者：朱魯斌，公眾號(hào)：字字朱心。每周深度思考一個(gè)問題，不穩(wěn)定的世界里找到一份篤定。

本文由@朱魯斌? 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash， 基于CC0協(xié)議。