本篇文章，作者將從五個(gè)步驟講述如何做產(chǎn)品原型設(shè)計(jì)——以微信小程序?yàn)槔６鲆粋€(gè)產(chǎn)品，不單單僅考慮產(chǎn)品的本身，還需考慮生活日常、市場(chǎng)環(huán)境等因素。接下來(lái)，讓我們跟著作者，一起了解產(chǎn)品設(shè)計(jì)的流程吧~

很多新手在剛?cè)腴T原型設(shè)計(jì)時(shí)，總會(huì)花費(fèi)很多精力在工具的選擇和打磨上，卻忽略了原型設(shè)計(jì)的核心。等真正上起手來(lái)，只能照貓畫(huà)虎，沒(méi)有一個(gè)完整且系統(tǒng)的思路。

因此，我想聊一聊我在設(shè)計(jì)產(chǎn)品原型時(shí)的思考過(guò)程，希望對(duì)新上路的小伙伴們有所幫助。

這是一個(gè)關(guān)于小區(qū)門口蔬果店的故事…

我家小區(qū)樓下有一家蔬果店，叫“七日農(nóng)場(chǎng)”，日常供應(yīng)果蔬、糧油、零食、飲料及一些基本的生活用品。

老板夫婦是安徽人，為人直爽，性格開(kāi)朗，平日里的生意總是供不應(yīng)求。

然而年輕的業(yè)主們卻有些苦惱。

小區(qū)的老人們每天早上8點(diǎn)多就在農(nóng)場(chǎng)門口排隊(duì)搶菜，等到年輕的業(yè)主下班回家后，大部分菜品不是已經(jīng)售罄就是被人挑剩了。

老板為了照顧這些上班族，隨即拉了一個(gè)微信群；業(yè)主將自己需要的蔬菜清單發(fā)到群里，老板提前打包好，等到業(yè)主下班的時(shí)候直接來(lái)付款提貨。

可這又遇到了一些新的問(wèn)題：

• 有些業(yè)主總是忘記自己預(yù)訂了菜品，未能去提貨。
• 大部分人買菜時(shí)并沒(méi)有明確的目標(biāo)，而是什么新鮮、什么優(yōu)惠就買什么。但從微信群預(yù)定的時(shí)候，沒(méi)有菜品清單，也不知道價(jià)格和新鮮程度，業(yè)主也不知道該預(yù)定些什么。
• 預(yù)定的菜品經(jīng)常沒(méi)有庫(kù)存，老板也來(lái)不及一一通知大家。
• 老板每日要處理的微信消息太多太雜，總?cè)菀走z漏。

后來(lái)，我與老板交流：假如有個(gè)線上平臺(tái)，他們每日可以在上面更新店里的商品和庫(kù)存；并且將新品或當(dāng)日優(yōu)惠重點(diǎn)公布出來(lái)，業(yè)主們可以在平臺(tái)上實(shí)時(shí)查看菜品信息，并直接下單購(gòu)買；老板按照訂單和提貨時(shí)間提前打包；等到業(yè)主方便的時(shí)候去店里提貨，這樣就能做到線上線下相結(jié)合。既方便了業(yè)主，也能幫助老板打理生意。

倘若老板委托我來(lái)設(shè)計(jì)這款線上果蔬訂購(gòu)平臺(tái)，我將如何進(jìn)行原型設(shè)計(jì)呢？

首先，要考慮選擇什么樣的平臺(tái)。

為了便于業(yè)主隨時(shí)隨地查看和預(yù)訂商品，很顯然，移動(dòng)端應(yīng)用更符合使用場(chǎng)景。而小程序則更加輕量級(jí)，無(wú)需安裝，綁定微信即可使用。

于是，我打算設(shè)計(jì)一個(gè)小程序版的果蔬在線訂購(gòu)平臺(tái)，名字就叫“七日農(nóng)場(chǎng)”。

接著，可以開(kāi)始著手小程序原型的設(shè)計(jì)了。

我的思考過(guò)程可以用這五步來(lái)概括：

一、梳理業(yè)務(wù)流程

回想一下，你平日里去果蔬店買菜是怎樣一種場(chǎng)景：

• 場(chǎng)景一：家里沒(méi)余糧了，你要去購(gòu)置2-3天的家常菜。但具體買些什么，你也沒(méi)想好。于是，你進(jìn)入菜店，來(lái)到貨架跟前，大致瀏覽一遍貨架。咦，芹菜還挺新鮮的，你順手拿起來(lái)看了看，再瞅了一眼價(jià)格，然后裝到自己的購(gòu)物袋里。就這樣，你挑選了好一大袋比較新鮮的蔬菜，拎著袋子去門口收銀臺(tái)，老板稱重，計(jì)算價(jià)格，你付款結(jié)算，高興地離開(kāi)了。
• 場(chǎng)景二：今天你想吃個(gè)清蒸鱸魚(yú)。于是你徑直來(lái)到菜店，讓老板幫你現(xiàn)殺一條鱸魚(yú)，并詢問(wèn)老板蔥、姜、分別在哪里，然后抓取適量，結(jié)賬，走人。
• 場(chǎng)景三：老板最近天天搞活動(dòng)，今天土豆、明天西紅柿，優(yōu)惠力度還挺大，何不趁機(jī)多囤一些。于是，你來(lái)到菜店，詢問(wèn)老板今日的特價(jià)商品，老板讓你看貨架上的特價(jià)標(biāo)簽，于是你挑選了若干自己認(rèn)為劃算的商品，心滿意足地結(jié)了賬。

實(shí)際上，無(wú)論你面臨哪種場(chǎng)景，都要經(jīng)過(guò)四個(gè)過(guò)程：從一個(gè)入口進(jìn)入菜店、經(jīng)過(guò)一個(gè)導(dǎo)購(gòu)的過(guò)程、決策是否購(gòu)買和完成交易。

1. 入口

要能包容以上三種購(gòu)物場(chǎng)景：

1. 沒(méi)有明確目的，從貨架中挑選新鮮的蔬菜。
2. 有明確的購(gòu)買目的，只買特定商品。
3. 有模糊的購(gòu)買目的，以省錢為目標(biāo)，愿意購(gòu)買特惠商品。

2. 導(dǎo)購(gòu)

從入口到一個(gè)具體的商品詳情，都可以視為廣義的導(dǎo)購(gòu)過(guò)程。

只不過(guò)，對(duì)于這三種購(gòu)物場(chǎng)景，其導(dǎo)購(gòu)形式有所差異。

1. 對(duì)于沒(méi)有明確目的顧客，老板需要提供類目導(dǎo)航，也就是店里的貨架。
2. 對(duì)于有明確購(gòu)買目的的顧客，需要搜索功能。在店里，通常通過(guò)顧客喊話老板回答的方式來(lái)完成。
3. 對(duì)于有模糊購(gòu)買目的顧客，老板可以提供各種特惠促銷活動(dòng)，薄利多銷。在店里，通常以特惠專區(qū)和特惠價(jià)簽的形式存在。

3. 決策

瀏覽完商品的新鮮程度、價(jià)錢等詳細(xì)情況之后。你就會(huì)做出購(gòu)買決策：要么放棄購(gòu)買，原封不動(dòng)的放回貨架；要么將商品放進(jìn)購(gòu)物袋。

4. 交易

決定購(gòu)買并選完所有商品之后，將進(jìn)入交易過(guò)程，你需要去收銀臺(tái)找老板稱重、支付、并完成提貨。

當(dāng)然在這個(gè)過(guò)程中，你也可能因?yàn)殛?duì)伍太長(zhǎng)等突發(fā)情況臨時(shí)決定放棄購(gòu)買。

對(duì)于已經(jīng)完成結(jié)賬的顧客，老板通常不予退貨。

二、拆分核心頁(yè)面

暫且不考慮常規(guī)的注冊(cè)和登錄，從上面的業(yè)務(wù)流程中，我們很容易拆分出產(chǎn)品的核心頁(yè)面。

1. 入口

即首頁(yè)。首頁(yè)相當(dāng)于蔬果店的大廳，要向顧客展示店鋪中最重要的信息。

因此需要包含三個(gè)部分：導(dǎo)航專區(qū)、搜索專區(qū)、特惠專區(qū)。

2. 導(dǎo)購(gòu)

從首頁(yè)的三個(gè)專區(qū)進(jìn)入，分別需要獨(dú)立的導(dǎo)航 & 商品列表頁(yè)、搜索 & 搜索結(jié)果頁(yè)、商品詳情頁(yè)。

由于店鋪每日的特惠活動(dòng)一般在10個(gè)以內(nèi)，特惠促銷形式也比較單一。因此不必設(shè)計(jì)單獨(dú)的促銷活動(dòng)頁(yè)面，首頁(yè)的特惠專區(qū)就可以展示全部信息。

3. 決策

顧客需要從導(dǎo)航 & 商品列表頁(yè)或商品詳情頁(yè)將商品添加至購(gòu)物車，并在購(gòu)物車中統(tǒng)一結(jié)算，因此需要單獨(dú)的購(gòu)物車頁(yè)面。

4. 交易

具體有以下四步：

1. 顧客從購(gòu)物車中選擇商品并結(jié)算，需要先確認(rèn)訂單的中的商品、數(shù)量等信息，因此需要一個(gè)確認(rèn)訂單頁(yè)。
2. 提交訂單后，需要核對(duì)訂單信息是否正確無(wú)誤，因此需要查看訂單詳情頁(yè)。
3. 訂單信息無(wú)誤，顧客就可以放心支付，因此需要支付頁(yè)。
4. 為了便于顧客查看往期訂單，我們還可以設(shè)計(jì)一個(gè)全部訂單列表頁(yè)面。對(duì)于顧客放棄購(gòu)買的場(chǎng)景，我們可以設(shè)置用戶主動(dòng)取消未支付的訂單，或者為未支付訂單設(shè)置一個(gè)時(shí)間，超過(guò)時(shí)間則自動(dòng)取消，這樣用戶就不需要任何操作了。而這些均可以在全部訂單列表頁(yè)面完成。

就這樣，我們得到了10個(gè)核心頁(yè)面。

需要注意的是，由于篇幅關(guān)系，我們只設(shè)計(jì)了面向顧客的一端。商家管理商品和庫(kù)存的部分并不在其列。

三、梳理每個(gè)頁(yè)面的信息結(jié)構(gòu)

接下來(lái)，我們需要梳理每個(gè)頁(yè)面的信息結(jié)構(gòu)，即頁(yè)面的全部元素及元素之間的邏輯關(guān)系。

以首頁(yè)為例，它是這樣的：

四、繪制原型界面

根據(jù)首頁(yè)的信息結(jié)構(gòu)，我們繪制出首頁(yè)的原型圖：

使用同樣的方法，我們繪制出其余的頁(yè)面：

很遺憾，關(guān)于“原型”，我并沒(méi)有找到一個(gè)權(quán)威的解釋。

在軟件開(kāi)發(fā)過(guò)程中，不同的角色對(duì)“原型”的理解也有所不同。

比如：

• 有些開(kāi)發(fā)人員可能認(rèn)為原型必須以代碼形式生成，并且最終將用作產(chǎn)品代碼。
• 設(shè)計(jì)師可能會(huì)認(rèn)為原型需要在Figma或Sketch等設(shè)計(jì)工具中創(chuàng)建，可以是靜態(tài)原型，也可以是交互原型。
• 業(yè)務(wù)人員可能會(huì)認(rèn)為原型是概念驗(yàn)證（POC），功能完備，可以模擬產(chǎn)品的行為或體驗(yàn)，可用于客戶演示。

在這里，我所指的原型是軟件開(kāi)發(fā)中的常見(jiàn)形式：

“在軟件開(kāi)發(fā)的方案設(shè)計(jì)階段，將產(chǎn)品需求通過(guò)可視化的界面?zhèn)鬟f給團(tuán)隊(duì)及用戶的一種形式。簡(jiǎn)單來(lái)說(shuō)，就是將產(chǎn)品頁(yè)面的模塊、元素、人機(jī)交互形式通過(guò)線框圖的方式生動(dòng)地表達(dá)出來(lái)。它可以是紙面原型，也可以是用專業(yè)產(chǎn)品設(shè)計(jì)工具中的可交互原型”。

繪制原型的工具很多、方法很多、保真度也有很多，可以綜合自己的時(shí)間、工具的熟練程度、畫(huà)圖的功底來(lái)選擇。

• 假如你是一位手繪很厲害的大神，不妨先用草稿紙繪制出界面的基本結(jié)構(gòu)。手繪的速度很快，但精細(xì)程度不夠，適用于快速展示自己對(duì)產(chǎn)品的構(gòu)想。
• 假如你有比較充裕的時(shí)間，且對(duì)設(shè)計(jì)軟件有一定的基礎(chǔ)，建議直接使用軟件，這對(duì)日后升級(jí)保真度大有裨益。當(dāng)然，如果你尚不具備視覺(jué)設(shè)計(jì)師一樣的軟件設(shè)計(jì)能力，大可使用線框圖，只要能表達(dá)清楚頁(yè)面、頁(yè)面元素、及元素間的邏輯關(guān)系即可。過(guò)程中，如果你不知道如何圖形化地表達(dá)一些具體的元素（比如時(shí)間選擇器），可以參考ant design上的組件庫(kù)，它會(huì)為您提供多種思路。
• 假如你本人就是一位視覺(jué)設(shè)計(jì)師。那么，使用設(shè)計(jì)軟件，一次完成低保真或中保真將是絕佳選擇。

五、添加交互，完成原型設(shè)計(jì)

實(shí)際上，如果你有機(jī)會(huì)與客戶面對(duì)面講解設(shè)計(jì)方案，那么到第四步，完成靜態(tài)原型頁(yè)面就足夠了。

不過(guò)有些時(shí)候，我們的客戶并不懂得設(shè)計(jì)知識(shí)，他們希望我們的原型設(shè)計(jì)能夠像一個(gè)可工作的軟件一樣，不僅體現(xiàn)出APP的基本框架，還能體現(xiàn)出其外觀和運(yùn)作方式。以便他們的銷售人員能夠去向自己的客戶展示，用以驗(yàn)證方案的可用性。

如此一來(lái)，我們就需要完成最后一步，為原型界面添加交互。

大部分軟件都支持為原型添加交互的功能。

以MasterGo為例，它支持三種模式：

1. 設(shè)計(jì)模式：你可以在其中繪制原型界面。
2. 原型模式：為原型界面中的組件添加交互事件，如點(diǎn)擊、拖拽、懸停等。以此來(lái)使你的原型更加接近真實(shí)的軟件。
3. 標(biāo)注模式：可以幫助開(kāi)發(fā)人員測(cè)試元素與元素之間的距離，復(fù)制元素的屬性值或者直接生成代碼。這個(gè)功能大多在進(jìn)入開(kāi)發(fā)階段后，使用高保真設(shè)計(jì)時(shí)才會(huì)用到。

在這里，我們使用“原型模式”為其添加了一個(gè)交互流程。

如圖中藍(lán)色線條所示：

最后，你可以在MasterGo中直接預(yù)覽交互體驗(yàn)，或者copy鏈接到網(wǎng)頁(yè)或設(shè)備中體驗(yàn)。

六、最后

七日農(nóng)場(chǎng)小程序的原型設(shè)計(jì)完了?？蓪?shí)際上，老板并沒(méi)有委托。

我找老板了解過(guò)，他說(shuō)大部分的顧客還是愿意親自到店里選購(gòu)，因?yàn)閾?dān)心老板給配好的菜品質(zhì)良莠不齊。

所以你看，一個(gè)產(chǎn)品被設(shè)計(jì)出來(lái)，一定要得到市場(chǎng)的驗(yàn)證，才能說(shuō)明產(chǎn)品的成功與否。

驗(yàn)證可以有很多道環(huán)節(jié)。原型設(shè)計(jì)是第一道，高保真設(shè)計(jì)可以是第二道，最終發(fā)布的軟件才是第三道。

不過(guò)作為日常練習(xí)的案例，這種看似不一定成功的點(diǎn)子并不妨礙你精進(jìn)技術(shù)，反而會(huì)增強(qiáng)你的洞察力。

不妨從現(xiàn)在開(kāi)始找個(gè)點(diǎn)子練起來(lái)吧~