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

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

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

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

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

一、一些原則

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

1、足夠簡單。

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

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

上一次Pony很認真的給我發(fā)了一個郵件，說我們搖一搖的功能真的很好，但是我們要防止競爭對手抄襲模仿我們的功能。因為上次我們做了一個查看附近的人，然后競爭對手也做了，并且加了一個小創(chuàng)新在里面，叫做表白功能。這樣通過一個小創(chuàng)新來突出，跟我們就不一樣了。

Pony說為什么我們沒有預先把這些該想到的都想進去，讓別人想模仿的時候都沒有辦法再來做一個微創(chuàng)新了。我說微創(chuàng)新是永無止境的，別人總可以加一點東西來跟你不太一樣。然后他說這個搖一搖，我們怎么樣能夠把該做的都做了，而且別人沒法在上面來改變一下。

我說不用著急了，因為我們這個東西已經(jīng)做到最簡化了，別人沒法超越了，因為就像這個手機只有一個按鈕一樣，除非你做一個沒有按鈕的手機。這里只有一個動作，甚至連按鈕都沒有。

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

2、無需思考。

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

• 用戶并不閱讀，而是掃描；
• 用戶不作最佳選擇，而是滿意即可；
• 用戶不會追根究底，而是勉強應付。

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

3、即時反饋。

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

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

二、設(shè)計流程

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

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

1、價值設(shè)計

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

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

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

2、功能設(shè)計

下面是功能設(shè)計。基于一個解決方案，我們會拆解為具體一個個的功能點。功能一般對應需求文檔里的功能列表。

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

3、流程設(shè)計

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

根據(jù)這些標志，畫出簡單的流程圖是這樣的。

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

4、框架設(shè)計

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

對于移動應用，常見的導航包括：標簽式、抽屜式、桌面式、列表式、平鋪式等。

每種導航都有自己的特點，適用于不同的場景。而對于一些復雜的APP而言，一般會幾種導航穿插使用，下面總結(jié)了幾種導航的特點及典型應用場景。

5、頁面設(shè)計

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

6、視覺設(shè)計

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

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

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

三、增長設(shè)計

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

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

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

練習：隨著入口的逐步放開，2018年小程序?qū)瓉硪粋€新的增長點，你可以嘗試結(jié)合自己的業(yè)務和小程序場景的特點，按照價值、功能、流程、框架、頁面、視覺6個步驟，設(shè)計一款和自己業(yè)務相關(guān)的小程序。

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

相關(guān)閱讀

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

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

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

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

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

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

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