設(shè)計(jì)原型之前，需要考慮哪些關(guān)鍵點(diǎn)呢？

產(chǎn)品設(shè)計(jì)是產(chǎn)品真正開始實(shí)現(xiàn)的第一步，也是連接產(chǎn)品策劃與產(chǎn)品落地的橋梁。在前面環(huán)節(jié)里我們研究需求、用戶和定位，就是為了能在產(chǎn)品設(shè)計(jì)環(huán)節(jié)有的放矢，切中要點(diǎn)。

互聯(lián)網(wǎng)產(chǎn)品本質(zhì)上是一種服務(wù)。QQ為大家提供的是即時(shí)通訊的服務(wù)；百度提供的是信息獲取的服務(wù)；阿里提供的是零售服務(wù)。

產(chǎn)品與服務(wù)的最大差別有點(diǎn)類似于打孔機(jī)和墻上的孔，用戶要的是墻上的孔，而打孔機(jī)只是幫用戶實(shí)現(xiàn)了這個(gè)需求的方式之一。當(dāng)我們以服務(wù)為出發(fā)點(diǎn)時(shí)，就會(huì)以用戶獲得和用戶滿足，而非產(chǎn)品為中心來做設(shè)計(jì)。

而互聯(lián)網(wǎng)服務(wù)又有自己的特點(diǎn)。他的擴(kuò)散速度極快，他對(duì)于流量非常依賴，他的邊際成本很低。因此，在設(shè)計(jì)過程中，就會(huì)和別的實(shí)物產(chǎn)品不一樣，比如會(huì)采用MVP模型先上線最小價(jià)值產(chǎn)品；同時(shí)快速上線，快速反饋，持續(xù)交付。

一、一些原則

對(duì)于互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)，有一些經(jīng)驗(yàn)總結(jié)的最小必要原則：

1、足夠簡(jiǎn)單。

可以簡(jiǎn)單，就別復(fù)雜。我們需要讓用戶用起來足夠方便。張小龍?jiān)?jīng)舉過一個(gè)微信搖一搖設(shè)計(jì)的例子來說明極簡(jiǎn)的意義。

我們來看這個(gè)“搖一搖”的功能，它非常簡(jiǎn)單，任何一個(gè)人都會(huì)用，不用做任何的學(xué)習(xí)。我們會(huì)避免在界面里面出現(xiàn)任何的一個(gè)文字解釋，一旦一個(gè)功能需要文字解釋，這個(gè)功能的設(shè)計(jì)已經(jīng)失敗了。

上一次Pony很認(rèn)真的給我發(fā)了一個(gè)郵件，說我們搖一搖的功能真的很好，但是我們要防止競(jìng)爭(zhēng)對(duì)手抄襲模仿我們的功能。因?yàn)樯洗挝覀冏隽艘粋€(gè)查看附近的人，然后競(jìng)爭(zhēng)對(duì)手也做了，并且加了一個(gè)小創(chuàng)新在里面，叫做表白功能。這樣通過一個(gè)小創(chuàng)新來突出，跟我們就不一樣了。

Pony說為什么我們沒有預(yù)先把這些該想到的都想進(jìn)去，讓別人想模仿的時(shí)候都沒有辦法再來做一個(gè)微創(chuàng)新了。我說微創(chuàng)新是永無止境的，別人總可以加一點(diǎn)東西來跟你不太一樣。然后他說這個(gè)搖一搖，我們?cè)趺礃幽軌虬言撟龅亩甲隽?，而且別人沒法在上面來改變一下。

我說不用著急了，因?yàn)槲覀冞@個(gè)東西已經(jīng)做到最簡(jiǎn)化了，別人沒法超越了，因?yàn)榫拖襁@個(gè)手機(jī)只有一個(gè)按鈕一樣，除非你做一個(gè)沒有按鈕的手機(jī)。這里只有一個(gè)動(dòng)作，甚至連按鈕都沒有。

做到簡(jiǎn)單到不能再簡(jiǎn)單，才會(huì)讓用戶有獨(dú)特的感覺。微信跳一跳的游戲也有同樣的特點(diǎn)，我讓3歲的弟弟去直接看他馬上就能學(xué)會(huì)，知道按下放開就能跳起來，這樣沒有學(xué)習(xí)成本的設(shè)計(jì)就是符合人性的設(shè)計(jì)。

2、無需思考。

好的設(shè)計(jì)是在潛意識(shí)里和用戶溝通，因此能做到讓用戶不思考，就要做到不思考?！禿o not make me think》里提到用戶訪問互聯(lián)網(wǎng)的三個(gè)特點(diǎn)：

• 用戶并不閱讀，而是掃描；
• 用戶不作最佳選擇，而是滿意即可；
• 用戶不會(huì)追根究底，而是勉強(qiáng)應(yīng)付。

我們會(huì)發(fā)現(xiàn)，這樣的特征在用戶用手機(jī)的時(shí)候更厲害，用戶的時(shí)間更加稀缺，因此對(duì)于APP的操作更多是下意識(shí)，不思考的，由此我們的APP應(yīng)該是為掃描而設(shè)計(jì)，既如此，就需要盡量突出重點(diǎn)，降低用戶思考成本，做到越傻瓜越好。

3、即時(shí)反饋。

互聯(lián)網(wǎng)在培養(yǎng)我們一個(gè)習(xí)慣，任何一件事情我們都希望能獲得馬上的反饋，發(fā)一條朋友圈希望馬上得到點(diǎn)贊；看一個(gè)微博希望馬上得到回復(fù)。只要不是即時(shí)回復(fù)的消息，人們就會(huì)焦慮。

因此，有反饋比沒反饋好，關(guān)心用戶情緒的反饋比不關(guān)心用戶情緒的反饋好。這一點(diǎn)，用在平時(shí)的工作和人際交往中也是很管用的，我們更愿意信賴那些可以給出及時(shí)反饋的人，無論結(jié)果是好是壞，都需要。

二、設(shè)計(jì)流程

原則是用來做取舍用的，基于這些基本原則，以及不同業(yè)務(wù)的特點(diǎn)，和不同平臺(tái)的標(biāo)準(zhǔn)就能正式進(jìn)入產(chǎn)品設(shè)計(jì)了。產(chǎn)品的具體設(shè)計(jì)流程可以歸納為以下6步。

價(jià)值設(shè)計(jì) -> 功能設(shè)計(jì) ->流程設(shè)計(jì)->框架設(shè)計(jì) -> 頁面設(shè)計(jì) -> 視覺設(shè)計(jì)

1、價(jià)值設(shè)計(jì)

先梳理價(jià)值。這需要回答的問題就是：

通過什么方式為哪些用戶創(chuàng)造什么核心價(jià)值。最后用戶獲得了什么，我們獲得了什么？

功能只是手段，價(jià)值才是目的。首先需要弄清楚的是做這件事能帶來多少用戶價(jià)值，多少商業(yè)價(jià)值，這些價(jià)值是怎么分配的。當(dāng)遇到相互沖突時(shí)哪個(gè)優(yōu)先。

2、功能設(shè)計(jì)

下面是功能設(shè)計(jì)?；谝粋€(gè)解決方案，我們會(huì)拆解為具體一個(gè)個(gè)的功能點(diǎn)。功能一般對(duì)應(yīng)需求文檔里的功能列表。

舉個(gè)例子，滴滴打車的原始概念來源于連接出租車司機(jī)和普通打車的人，那么需要把這個(gè)解決方案，拆解為司機(jī)端接客系統(tǒng)、乘客端打車系統(tǒng)，和管理系統(tǒng)端，再基于三方的具體的需求完善每個(gè)子系統(tǒng)，拆解出具體的功能點(diǎn)就是功能設(shè)計(jì)這一環(huán)節(jié)最重要的任務(wù)。

3、流程設(shè)計(jì)

流程設(shè)計(jì)則是把這些具體的功能拆解成具體實(shí)現(xiàn)的步驟。流程一般由流程圖來進(jìn)行分析，去完整的勾畫需要哪些環(huán)節(jié)。流程圖以這樣的示意圖標(biāo)來表示。

根據(jù)這些標(biāo)志，畫出簡(jiǎn)單的流程圖是這樣的。

針對(duì)多方參與、多階段的業(yè)務(wù)還會(huì)有泳道圖。泳道圖增加了業(yè)務(wù)方的維度和流程過程的維度。

4、框架設(shè)計(jì)

接下來，基于已經(jīng)設(shè)計(jì)出來的功能和流程，我們需要把他們植入到APP的結(jié)構(gòu)中。這有點(diǎn)類似于我現(xiàn)在已經(jīng)有很多店了，星巴克、MUJI、迪卡儂等，現(xiàn)在需要把這些店裝到一個(gè)綜合體里面，讓用戶能夠訪問到，對(duì)于這個(gè)綜合體結(jié)構(gòu)的設(shè)計(jì)就是框架的設(shè)計(jì)。

對(duì)于移動(dòng)應(yīng)用，常見的導(dǎo)航包括：標(biāo)簽式、抽屜式、桌面式、列表式、平鋪式等。

每種導(dǎo)航都有自己的特點(diǎn)，適用于不同的場(chǎng)景。而對(duì)于一些復(fù)雜的APP而言，一般會(huì)幾種導(dǎo)航穿插使用，下面總結(jié)了幾種導(dǎo)航的特點(diǎn)及典型應(yīng)用場(chǎng)景。

5、頁面設(shè)計(jì)

基于這些準(zhǔn)備，我們才開始真正設(shè)計(jì)頁面原型。新手產(chǎn)品一般從頁面開始進(jìn)行原型設(shè)計(jì)，而實(shí)際上頁面的設(shè)計(jì)需求是來源于更底層的梳理。頁面是具體某個(gè)頁面的布局情況，把哪些信息放在哪些位置上。頁面基于功能的不同一般有兩類，注重信息展示的頁面、注重流程引導(dǎo)的頁面，這兩類在設(shè)計(jì)上的KPI是不同的。

6、視覺設(shè)計(jì)

視覺則是一般把原型稿交付之后，由設(shè)計(jì)師產(chǎn)出，這時(shí)候的UI稿就可以直接用于開發(fā)了。

在《用戶體驗(yàn)要素》這本書中，作者把面向用戶體驗(yàn)的設(shè)計(jì)分為5個(gè)層次：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層，可以與設(shè)計(jì)的6步驟相互對(duì)照。

五層次劃分的意義在于，在設(shè)計(jì)或者討論問題的時(shí)候，可以定位到自己的設(shè)計(jì)到底是哪里的問題，于是可以找到對(duì)應(yīng)的解決方案。比如某個(gè)按鈕的顏色的問題，可能回溯到框架層甚至戰(zhàn)略層才能找到正確的解答。

三、增長(zhǎng)設(shè)計(jì)

由于更加高昂的獲客成本，現(xiàn)在從0到1的產(chǎn)品設(shè)計(jì)中，不僅要探索產(chǎn)品價(jià)值，同時(shí)在產(chǎn)品本身的設(shè)計(jì)中也需要包含增長(zhǎng)的手段，即產(chǎn)品就是渠道，對(duì)于產(chǎn)品的傳播最好能包含在產(chǎn)品的功能之中。

這需要在產(chǎn)品功能設(shè)計(jì)中增加激勵(lì)用戶分享的功能，比如增加邀請(qǐng)機(jī)制、分享機(jī)制，通過這些方式能夠讓交付的產(chǎn)品本身成為傳播的一個(gè)節(jié)點(diǎn)，幫助產(chǎn)品獲取新用戶。在行最新推出的小程序：我最在行，采用體力值激勵(lì)的方式鼓勵(lì)用戶分享和進(jìn)行好友PK，以幫助產(chǎn)品獲取新用戶。

產(chǎn)品設(shè)計(jì)是一件實(shí)踐性很強(qiáng)的事，然而如果能遵循足夠簡(jiǎn)單、無需思考、即時(shí)反饋的原則，并根據(jù)產(chǎn)品設(shè)計(jì)深入淺出的步驟，同時(shí)兼顧產(chǎn)品的增長(zhǎng)機(jī)制，一定有利于你設(shè)計(jì)出更有生命力的產(chǎn)品。

練習(xí)：隨著入口的逐步放開，2018年小程序?qū)?huì)迎來一個(gè)新的增長(zhǎng)點(diǎn)，你可以嘗試結(jié)合自己的業(yè)務(wù)和小程序場(chǎng)景的特點(diǎn)，按照價(jià)值、功能、流程、框架、頁面、視覺6個(gè)步驟，設(shè)計(jì)一款和自己業(yè)務(wù)相關(guān)的小程序。

七個(gè)關(guān)鍵步驟，打造有競(jìng)爭(zhēng)力的產(chǎn)品，下一篇我們將進(jìn)入產(chǎn)品迭代，敬請(qǐng)期待。

相關(guān)閱讀

產(chǎn)品流程拆解：如何提升產(chǎn)品的競(jìng)爭(zhēng)力

打造有競(jìng)爭(zhēng)力的產(chǎn)品系統(tǒng)：需求分析與洞察

打造有競(jìng)爭(zhēng)力的產(chǎn)品系統(tǒng)：用戶研究

打造有競(jìng)爭(zhēng)力的產(chǎn)品系統(tǒng)：產(chǎn)品定位

作者：許晉誠(chéng)，微信公眾號(hào)：健行筆記，分享打造有競(jìng)爭(zhēng)力產(chǎn)品的方法論，微信公眾號(hào)：健行筆記（xuexibiji007）。

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

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