產(chǎn)品原型設(shè)計的思考過程

七姑娘
10 評論 16498 瀏覽 172 收藏 16 分鐘

本篇文章,作者將從五個步驟講述如何做產(chǎn)品原型設(shè)計——以微信小程序為例。而做一個產(chǎn)品,不單單僅考慮產(chǎn)品的本身,還需考慮生活日常、市場環(huán)境等因素。接下來,讓我們跟著作者,一起了解產(chǎn)品設(shè)計的流程吧~

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

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

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

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

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

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

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

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

可這又遇到了一些新的問題:

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

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

倘若老板委托我來設(shè)計這款線上果蔬訂購平臺,我將如何進行原型設(shè)計呢?

首先,要考慮選擇什么樣的平臺。

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

于是,我打算設(shè)計一個小程序版的果蔬在線訂購平臺,名字就叫“七日農(nóng)場”。

接著,可以開始著手小程序原型的設(shè)計了。

我的思考過程可以用這五步來概括:

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

回想一下,你平日里去果蔬店買菜是怎樣一種場景:

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

實際上,無論你面臨哪種場景,都要經(jīng)過四個過程:從一個入口進入菜店、經(jīng)過一個導購的過程、決策是否購買和完成交易。

1. 入口

要能包容以上三種購物場景:

  1. 沒有明確目的,從貨架中挑選新鮮的蔬菜。
  2. 有明確的購買目的,只買特定商品。
  3. 有模糊的購買目的,以省錢為目標,愿意購買特惠商品。

2. 導購

從入口到一個具體的商品詳情,都可以視為廣義的導購過程。

只不過,對于這三種購物場景,其導購形式有所差異。

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

3. 決策

瀏覽完商品的新鮮程度、價錢等詳細情況之后。你就會做出購買決策:要么放棄購買,原封不動的放回貨架;要么將商品放進購物袋。

4. 交易

決定購買并選完所有商品之后,將進入交易過程,你需要去收銀臺找老板稱重、支付、并完成提貨。

當然在這個過程中,你也可能因為隊伍太長等突發(fā)情況臨時決定放棄購買。

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

二、拆分核心頁面

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

1. 入口

即首頁。首頁相當于蔬果店的大廳,要向顧客展示店鋪中最重要的信息。

因此需要包含三個部分:導航專區(qū)、搜索專區(qū)、特惠專區(qū)。

2. 導購

從首頁的三個專區(qū)進入,分別需要獨立的導航 & 商品列表頁、搜索 & 搜索結(jié)果頁、商品詳情頁。

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

3. 決策

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

4. 交易

具體有以下四步:

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

就這樣,我們得到了10個核心頁面。

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

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

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

以首頁為例,它是這樣的:

四、繪制原型界面

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

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

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

在軟件開發(fā)過程中,不同的角色對“原型”的理解也有所不同。

比如:

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

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

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

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

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

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

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

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

如此一來,我們就需要完成最后一步,為原型界面添加交互。

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

以MasterGo為例,它支持三種模式:

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

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

如圖中藍色線條所示:

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

六、最后

七日農(nóng)場小程序的原型設(shè)計完了。可實際上,老板并沒有委托。

我找老板了解過,他說大部分的顧客還是愿意親自到店里選購,因為擔心老板給配好的菜品質(zhì)良莠不齊。

所以你看,一個產(chǎn)品被設(shè)計出來,一定要得到市場的驗證,才能說明產(chǎn)品的成功與否。

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

不過作為日常練習的案例,這種看似不一定成功的點子并不妨礙你精進技術(shù),反而會增強你的洞察力。

不妨從現(xiàn)在開始找個點子練起來吧~

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

題圖來源于Unsplash,基于CC0協(xié)議。

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 不是很全,一個完整的原型除了產(chǎn)品架構(gòu),也要有產(chǎn)品邏輯

    來自福建 回復
    1. 這依賴于產(chǎn)品的復雜度,這個例子里只設(shè)計了用戶端界面,沒有涉及商家界面,相對簡單。但如果想要表達全,就需要引入產(chǎn)品邏輯得分析,比如服務(wù)藍圖。

      來自陜西 回復
  2. 我感覺你這個就是個美團買菜

    來自廣東 回復
    1. 沒用過美團買菜,不過這種類型的產(chǎn)品估計大差不差吧

      來自陜西 回復
  3. 商城難在支付系統(tǒng) 訂單系統(tǒng)之類的
    反而業(yè)務(wù)頁面不太重要 因為已經(jīng)太成熟了 隨便找個抄就行了
    原型軟件常規(guī)的是Axure或者墨刀

    來自陜西 回復
    1. 文中的例子只是為了讓大家用一個熟悉的場景了解原型設(shè)計的過程,目的是為了讓初級的伙伴入門,不是讓高級的伙伴們進階。但是有沒有可能“抄”這個詞太草率了。如果是真的要創(chuàng)新新產(chǎn)品,怎么“抄”呢?“抄”來的還叫好產(chǎn)品嗎?另外,Axure和墨刀是不錯,F(xiàn)igma和Sketch也是大牛。

      來自陜西 回復
  4. 除了被突然安利這個原型軟件感到意外, 其他的都是滿滿干貨??!

    來自浙江 回復
    1. 哈哈哈,不算是安利啦。這篇文章是老羅剛推出MasterGo的時候我寫的,正好用這個例子嘗試了一下MasterGo咋樣。有收獲就好。

      來自陜西 回復
  5. 感謝分享,文章很生動有趣,仿佛跟著設(shè)計了一遍這個產(chǎn)品,最后說老板并沒有委托的時候驚訝了。

    來自陜西 回復
    1. 感謝閱讀,哈哈。

      來自陜西 回復