很多初學(xué)者在最初開始原型設(shè)計(jì)的時(shí)候總是在工具的選擇和打磨上花費(fèi)很多精力，但忽略了原型設(shè)計(jì)的核心。(莎士比亞，模板，原型，原型，原型，原型，原型，原型，原型。

等真正上起手來，只能照貓畫虎，沒有一個(gè)完整且系統(tǒng)的思路。因此，我想聊一聊我在設(shè)計(jì)產(chǎn)品原型時(shí)的思考過程，希望對(duì)新上路的小伙伴們有所幫助。

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

我家小區(qū)樓下有一家蔬果店，叫“七日農(nóng)場(chǎng)”，日常供應(yīng)果蔬、糧油、零食、飲料及一些基本的生活用品。老板夫婦是安徽人，為人直爽，性格開朗，平日里的生意總是供不應(yīng)求。然而年輕的業(yè)主們卻有些苦惱。

小區(qū)的老人們每天早上8點(diǎn)多就在農(nóng)場(chǎng)門口排隊(duì)搶菜，等到年輕的業(yè)主下班回家后，大部分菜品不是已經(jīng)售罄就是被人挑剩了。老板為了照顧這些上班族，隨即拉了一個(gè)微信群，業(yè)主將自己需要的蔬菜清單發(fā)到群里，老板提前打包好，等到業(yè)主下班的時(shí)候直接來付款提貨。可這又遇到了一些新的問題：

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

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

首先，要考慮選擇什么樣的平臺(tái)。為了便于業(yè)主隨時(shí)隨地查看和預(yù)訂商品，很顯然，移動(dòng)端應(yīng)用更符合使用場(chǎng)景。而小程序則更加輕量級(jí)，無需安裝，綁定微信即可使用。于是，我打算設(shè)計(jì)一個(gè)小程序版的果蔬在線訂購平臺(tái)，名字就叫“七日農(nóng)場(chǎng)”。接著，可以開始著手小程序原型的設(shè)計(jì)了。我的思考過程可以用這五步來概括：

步驟1：梳理業(yè)務(wù)流程

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

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

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

• 入口：要能包容以上三種購物場(chǎng)景；
• 沒有明確目的，從貨架中挑選新鮮的蔬菜；
• 有明確的購買目的，只買特定商品；
• 有模糊的購買目的，以省錢為目標(biāo)，愿意購買特惠商品；
• 導(dǎo)購：從入口到一個(gè)具體的商品詳情，都可以視為廣義的導(dǎo)購過程。只不過，對(duì)于這三種購物場(chǎng)景，其導(dǎo)購形式有所差異；
• 對(duì)于沒有明確目的顧客，老板需要提供類目導(dǎo)航，也就是店里的貨架；
• 對(duì)于有明確購買目的的顧客，需要搜索功能。在店里，通常通過顧客喊話老板回答的方式來完成；
• 對(duì)于有模糊購買目的顧客，老板可以提供各種特惠促銷活動(dòng)，薄利多銷。在店里，通常以特惠專區(qū)和特惠價(jià)簽的形式存在；
• 決策：瀏覽完商品的新鮮程度、價(jià)錢等詳細(xì)情況之后，你就會(huì)做出購買決策，要么放棄購買，原封不動(dòng)的放回貨架，要么將商品放進(jìn)購物袋；
• 交易：決定購買并選完所有商品之后，將進(jìn)入交易過程，你需要去收銀臺(tái)找老板稱重、支付、并完成提貨。當(dāng)然在這個(gè)過程中，你也可能因?yàn)殛?duì)伍太長(zhǎng)等突發(fā)情況臨時(shí)決定放棄購買。對(duì)于已經(jīng)完成結(jié)賬的顧客，老板通常不予退貨。

步驟2：拆分核心頁面

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

• 入口：即首頁。首頁相當(dāng)于蔬果店的大廳，要向顧客展示店鋪中最重要的信息。因此需要包含三個(gè)部分：導(dǎo)航專區(qū)、搜索專區(qū)、特惠專區(qū)。
• 導(dǎo)購：從首頁的三個(gè)專區(qū)進(jìn)入，分別需要獨(dú)立的導(dǎo)航&商品列表頁、搜索&搜索結(jié)果頁、商品詳情頁。由于店鋪每日的特惠活動(dòng)一般在10個(gè)以內(nèi)，特惠促銷形式也比較單一，因此不必設(shè)計(jì)單獨(dú)的促銷活動(dòng)頁面，首頁的特惠專區(qū)就可以展示全部信息。
• 決策：顧客需要從導(dǎo)航&商品列表頁或商品詳情頁將商品添加至購物車，并在購物車中統(tǒng)一結(jié)算，因此需要單獨(dú)的購物車頁面。
• 交易：顧客從購物車中選擇商品并結(jié)算，需要先確認(rèn)訂單的中的商品、數(shù)量等信息，因此需要一個(gè)確認(rèn)訂單頁；提交訂單后，需要核對(duì)訂單信息是否正確無誤，因此需要查看訂單詳情頁；訂單信息無誤，顧客就可以放心支付啦，因此需要支付頁；為了便于顧客查看往期訂單，我們還可以設(shè)計(jì)一個(gè)全部訂單列表頁面。對(duì)于顧客放棄購買的場(chǎng)景，我們可以設(shè)置用戶主動(dòng)取消未支付的訂單，或者為未支付訂單設(shè)置一個(gè)時(shí)間，超過時(shí)間則自動(dòng)取消，這樣用戶就不需要任何操作了。而這些均可以在全部訂單列表頁面完成。

就這樣，我們得到了10個(gè)核心頁面。需要注意的是，由于篇幅關(guān)系，我們只設(shè)計(jì)了面向顧客的一端，商家管理商品和庫存的部分并不在其列。

步驟3：梳理每個(gè)頁面的信息結(jié)構(gòu)

接下來，我們需要梳理每個(gè)頁面的信息結(jié)構(gòu)，即頁面的全部元素及元素之間的邏輯關(guān)系。以首頁為例，它是這樣的：

步驟4：繪制原型界面

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

使用同樣的方法，我們繪制出其余的頁面。

很遺憾，關(guān)于“原型”，我并沒有找到一個(gè)權(quán)威的解釋。在軟件開發(fā)過程中，不同的角色對(duì)“原型”的理解也有所不同，比如：

• 有些開發(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)，可用于客戶演示；

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

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

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

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

步驟5：添加交互，完成原型設(shè)計(jì)

實(shí)際上，如果你有機(jī)會(huì)與客戶面對(duì)面講解設(shè)計(jì)方案，那么到第四步，完成靜態(tài)原型頁面就足夠了。不過有些時(shí)候，我們的客戶并不懂得設(shè)計(jì)知識(shí)，他們希望我們的原型設(shè)計(jì)能夠像一個(gè)可工作的軟件一樣，不僅體現(xiàn)出APP的基本框架，還能體現(xiàn)出其外觀和運(yùn)作方式，以便他們的銷售人員能夠去向自己的客戶展示，用以驗(yàn)證方案的可用性。如此一來，我們就需要完成最后一步，為原型界面添加交互。

大部分軟件都支持為原型添加交互的功能。以MasterGo為例，它支持三種模式：

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

在這里，我們使用“原型模式”為其添加了一個(gè)交互流程，如圖中藍(lán)色線條所示。

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

寫在最后

七日農(nóng)場(chǎng)小程序的原型設(shè)計(jì)完了。可實(shí)際上，老板并沒有委托。我找老板了解過，他說大部分的顧客還是愿意親自到店里選購，因?yàn)閾?dān)心老板給配好的菜品質(zhì)良莠不齊。所以你看，一個(gè)產(chǎn)品被設(shè)計(jì)出來，一定要得到市場(chǎng)的驗(yàn)證，才能說明產(chǎn)品的成功與否。驗(yàn)證可以有很多道環(huán)節(jié)，原型設(shè)計(jì)是第一道，高保真設(shè)計(jì)可以是第二道，最終發(fā)布的軟件才是第三道。

不過作為日常練習(xí)的案例，這種看似不一定成功的點(diǎn)子并不妨礙你精進(jìn)技術(shù)，反而會(huì)增強(qiáng)你的洞察力。不妨從現(xiàn)在開始找個(gè)點(diǎn)子練起來吧~

---

文/Thoughtworks 史湘陽

更多精彩洞見，請(qǐng)關(guān)注公眾號(hào)Thoughtworks洞見