2019-12-31 濤濤
一款產(chǎn)品從0到1的設(shè)計(jì)流程，在進(jìn)入開(kāi)發(fā)前的所有工作。這篇文章以去年做的一個(gè)小項(xiàng)目為例。
1.了解客戶需求，根據(jù)競(jìng)品產(chǎn)生需求
工具：Axure、Mindmanager、Visio、OmniGraffle、PPT
1.1產(chǎn)品初期模型
1.1.1 競(jìng)品收集（應(yīng)用市場(chǎng)、專業(yè)網(wǎng)站、行業(yè)調(diào)查報(bào)告、搜索引擎、）
在應(yīng)用市場(chǎng)、專業(yè)網(wǎng)站、行業(yè)調(diào)查報(bào)告、搜索引擎中尋找競(jìng)品
輸出：
在產(chǎn)品的潛在目標(biāo)用戶尋找競(jìng)品
對(duì)產(chǎn)品的潛在用戶進(jìn)行挖掘，分析核心功能的其他實(shí)現(xiàn)方法，將功能延展擴(kuò)大可獲得不同層面的競(jìng)品。
輸出：
將過(guò)程、操作的碎片化處理來(lái)尋找競(jìng)品
將產(chǎn)品的結(jié)構(gòu)、使用過(guò)程、操作等一步一步的拆開(kāi)，根據(jù)每一個(gè)碎片信息來(lái)尋找競(jìng)品。
輸出：
1.2競(jìng)品選擇
競(jìng)品選擇中最關(guān)鍵的一步，就是對(duì)競(jìng)品進(jìn)行分類。
1. 功能完全相同的競(jìng)品：找出當(dāng)下產(chǎn)品的核心價(jià)值，評(píng)估與我們?cè)O(shè)計(jì)目的與市場(chǎng)上成型產(chǎn)品的一致性；更快更好地借鑒對(duì)方取得成功的地方；有針對(duì)性地尋找差異化競(jìng)品的方向。
2. 核心功能相似的競(jìng)品：通過(guò)以點(diǎn)帶面地挖掘價(jià)值點(diǎn)或者創(chuàng)新點(diǎn)，將我們自己的產(chǎn)品做到。功能完全相同是一個(gè)點(diǎn)進(jìn)行縱向思考，然后尋找競(jìng)品；核心功能相似則是多個(gè)點(diǎn)，排列組合式地進(jìn)行縱向思考，找到的競(jìng)品更加全面，我們能夠借鑒到的價(jià)值點(diǎn)更多。
3. 功能本質(zhì)相同的競(jìng)品：加深對(duì)待設(shè)計(jì)產(chǎn)品的需求本質(zhì)的理解，通過(guò)本質(zhì)相同挖掘需求的核心所在，借此來(lái)找到相對(duì)應(yīng)的參照物。該類競(jìng)品，往往需要我們進(jìn)行橫向思考，試圖從別的方面，方向入手，其思維廣度大大增加，有可能從其他領(lǐng)域中得到解決問(wèn)題的啟示。這類競(jìng)品是最容易發(fā)現(xiàn)亮點(diǎn)和突破的。
輸出：1.功能完全相同的競(jìng)品
壁紙制作：可以將喜歡的圖片制作成精美的壁紙，定制專屬于你的高清壁紙。
2.核心功能相似的競(jìng)品
座右銘壁紙：可選擇背景、輸入文字形成自己的鎖屏壁紙。
3.功能本質(zhì)相同的競(jìng)品
livefun:將視頻轉(zhuǎn)換為壁紙，將多張照片合稱為一個(gè)live photo。
1.3 競(jìng)品拆解
競(jìng)品拆解就是用碎片化方法對(duì)競(jìng)品功能進(jìn)行拆解，并最終形成競(jìng)品的功能列表的過(guò)程。
形成功能列表后，對(duì)功能進(jìn)行備注，尋找到競(jìng)品使用過(guò)程中的不足，從而超越競(jìng)品。
輸出：
接下來(lái)還需要和所有必要的相關(guān)人員就產(chǎn)品以及項(xiàng)目的開(kāi)展方式進(jìn)行多次頭腦風(fēng)暴。
頭腦風(fēng)暴(Brainstorming)是由美國(guó)奧斯提出的，一種激發(fā)集體智慧產(chǎn)生和提出創(chuàng)新設(shè)想的思維方法。頭腦風(fēng)暴(Brainstorming)指一群人（或小組）圍繞一個(gè)特定的興趣或領(lǐng)域，進(jìn)行創(chuàng)新或改善，產(chǎn)生新點(diǎn)子，提出新辦法。
頭腦風(fēng)暴可能帶來(lái)一套啟動(dòng)計(jì)劃、一個(gè)精簡(jiǎn)的框架和一系列比較早期的概念圖以及模型。
頭腦風(fēng)暴如下圖所示：
2.確定需求
2.1產(chǎn)品定位及如何正確描述需求
前面我們已經(jīng)講述了怎樣搭建初步產(chǎn)品模型，通過(guò)梳理產(chǎn)品模型，可以清楚地了解應(yīng)該如何定位一個(gè)產(chǎn)品。產(chǎn)品定位是需求收集的方向。
用戶需求主要包含三個(gè)要素：目標(biāo)用戶、使用場(chǎng)景、用戶目標(biāo)。
經(jīng)過(guò)對(duì)產(chǎn)品定位的梳理，就明確了產(chǎn)品的目標(biāo)用戶群體，接下來(lái)就可以進(jìn)行需求的收集、分析活動(dòng)了，總體流程包括需求收集、需求分析和篩選，需求優(yōu)先級(jí)排序幾部分。
輸出：
產(chǎn)品定位：以用戶產(chǎn)出內(nèi)容為主的可個(gè)性化推送壁紙應(yīng)用。
用戶場(chǎng)景描述：
陶娟平時(shí)喜歡根據(jù)心情更換不同風(fēng)格的壁紙，但是每次找壁紙都讓她十分頭疼，很難找到有個(gè)性又好看的壁紙（都是用戶制作上傳的壁紙作品）。
陶娟打開(kāi)8樓壁紙app，登陸后填寫了她的個(gè)性偏好，系統(tǒng)根據(jù)她的喜好個(gè)性化推送壁紙。陶娟選了一款壁紙，還可以看到同時(shí)和她使用同一款壁紙的網(wǎng)友。
2.2需求收集的途徑
1.用戶場(chǎng)景畫像：根據(jù)之前的產(chǎn)品定位和使用場(chǎng)景用戶畫像文檔分析產(chǎn)出需求
2.競(jìng)品分析：找到同類競(jìng)爭(zhēng)產(chǎn)品，深入體驗(yàn)競(jìng)品功能
3.頭腦風(fēng)暴：可以集結(jié)產(chǎn)品經(jīng)理、設(shè)計(jì)師、運(yùn)營(yíng)、市場(chǎng)、開(kāi)發(fā)、進(jìn)行頭腦風(fēng)暴，圍繞一個(gè)特定的話題進(jìn)行討論
4.用戶反饋
5.數(shù)據(jù)分析
輸出：
2.3需求分析和篩選
在需求收集過(guò)后，已經(jīng)有很多的被選需求了。
如何分析和篩選需求呢？
1.篩掉明顯不合理的需求
哪些是明顯不合理的需求？比如當(dāng)下技術(shù)不可能實(shí)現(xiàn)的或明顯意義不大的，投入產(chǎn)出比低的、無(wú)匹配的產(chǎn)品使用場(chǎng)景、明顯不合理的需求等
2.做需求分析
把明顯不合理的需求排除后，就需要一個(gè)一個(gè)對(duì)剩下的需求進(jìn)行分析。首先要了解需求的三個(gè)分類：用戶描述的需求、用戶實(shí)際想要的需求、用戶的潛在需求，這是三件不同的事情，卻有著千絲萬(wàn)縷的聯(lián)系。我們需要通過(guò)用戶描述的需求，找到用戶實(shí)際的需求，再挖掘用戶潛在的需求。
3.需求做減法
有時(shí)候決定不做什么比決定做什么要更重要，產(chǎn)品的需求是無(wú)上限的，大量的堆積需求，會(huì)使產(chǎn)品非常臃腫，毫無(wú)特色，還會(huì)導(dǎo)致工期過(guò)長(zhǎng)，拖慢了產(chǎn)品推出市場(chǎng)的進(jìn)度，對(duì)產(chǎn)品百害而無(wú)一益。因此，應(yīng)該傾向于做“輕產(chǎn)品”，學(xué)會(huì)做需求的減法。
這就涉及接下來(lái)需要討論的問(wèn)題，如何判斷需求的優(yōu)先級(jí)。
輸出：篩選后的需求列表
2.4需求的優(yōu)先級(jí)
需要對(duì)所有的需求定義一下優(yōu)先級(jí)，優(yōu)先級(jí)高的需求優(yōu)先開(kāi)發(fā)，優(yōu)先級(jí)低的需求延遲開(kāi)發(fā)。
輸出：
2.5 輸出產(chǎn)品功能圖和功能需求列表
用戶需求列表確定之后，先以產(chǎn)品功能的形式展現(xiàn)出來(lái)，產(chǎn)品功能圖可以直觀的看出產(chǎn)品的初步功能架構(gòu)。
輸出：產(chǎn)品功能圖
功能需求列表的價(jià)值，一是在于幫助產(chǎn)品經(jīng)理理清思路，二是在于幫助項(xiàng)目團(tuán)隊(duì)的其他成員了解產(chǎn)品功能需求，讓他們提前做好相關(guān)準(zhǔn)備。
輸出：功能需求列表
3.產(chǎn)品架構(gòu)
3.1 產(chǎn)品功能架構(gòu)
結(jié)合之前的市場(chǎng)調(diào)研及產(chǎn)品路徑規(guī)劃，梳理了一下產(chǎn)品架構(gòu)的大模塊
輸出：產(chǎn)品功能架構(gòu)
3.2 流程圖的規(guī)范
流程圖有時(shí)也稱作輸入-輸出圖，某種程度上來(lái)說(shuō)，流程圖是一種溝通性質(zhì)的圖形化語(yǔ)言。一般會(huì)使用一些標(biāo)準(zhǔn)符號(hào)代表某些類型的動(dòng)作，如判斷用菱形框表示，具體的操作行為、活動(dòng)用方框表示，開(kāi)始和結(jié)束用圓角矩形框表示。
3.3 確定核心功能流程圖
首先我們要設(shè)計(jì)的是產(chǎn)品的核心功能流程，例如登陸的流程就需要前期設(shè)計(jì)好，綁定手機(jī)號(hào)登陸還是直接微信登陸。登陸的流程會(huì)對(duì)后期的功能產(chǎn)生影響。
輸出：功能流程圖
做好了核心功能的流程圖后，我們需要對(duì)app主干做一個(gè)流程圖。保證每一個(gè)功能都可以形成閉環(huán)。
3.4 評(píng)審與確認(rèn)
評(píng)審主要是讓業(yè)務(wù)部門和開(kāi)發(fā)部門參與，好的流程圖具備清晰易懂、簡(jiǎn)單明了、完整準(zhǔn)確的特點(diǎn)
4. 原型設(shè)計(jì)
4.1 什么是產(chǎn)品原型
產(chǎn)品原型是設(shè)計(jì)方案的表達(dá)，是產(chǎn)品經(jīng)理、交互設(shè)計(jì)師的重要產(chǎn)出物之一，也是項(xiàng)目團(tuán)隊(duì)的其它成員（尤其是設(shè)計(jì)師、開(kāi)發(fā)人員）的重要參考和評(píng)估的依據(jù)。
4.2 低保真產(chǎn)品原型
首先我們要根據(jù)產(chǎn)品架構(gòu)畫出初步的頁(yè)面，也就是低保真產(chǎn)品原型。
這樣的原型圖有幾個(gè)好處：
可以快速產(chǎn)出：有時(shí)候一個(gè)需求的開(kāi)發(fā)周期很短，低保真原型可以快速滿足同事的時(shí)間要求。
修改成本低：一個(gè)產(chǎn)品策劃很可能會(huì)被修改很多次，低保真的原型修改起來(lái)很方便。
輸出：低保真原型圖
4.3 高保真產(chǎn)品交互原型
工具：axure、ai、ps
高保真產(chǎn)品原型，則是高功能性、高互動(dòng)性的原型設(shè)計(jì)，是忠實(shí)展示產(chǎn)品功能、界面元素、功能流程的一種表現(xiàn)手段。
高保真的好處：
便于梳理產(chǎn)品細(xì)節(jié)：制作高保真原型的過(guò)程中可以讓產(chǎn)品經(jīng)理提前發(fā)現(xiàn)產(chǎn)品潛藏的各種問(wèn)題，提前處理風(fēng)險(xiǎn)。
更容易讓其他成員了解產(chǎn)品設(shè)計(jì)：有時(shí)候簡(jiǎn)單的線框圖無(wú)法讓別人想象出你要做的事情，也不清楚你要放的是哪幾個(gè)字段，而高保真原型就可以。
相對(duì)而言，劣勢(shì)就是制作周期比較漫長(zhǎng)，涉及到產(chǎn)品流程的修改，那基本原型就得回爐重造一遍。所以高保真原型可以做一些核心頁(yè)面，不重要的頁(yè)面可以后期慢慢完善。
輸出：動(dòng)態(tài)交互稿
5. 視覺(jué)設(shè)計(jì)
工具：Sketch、Ai
在產(chǎn)品0到1時(shí)候視覺(jué)評(píng)審，會(huì)花大量時(shí)間去討論產(chǎn)品的設(shè)計(jì)風(fēng)格和主配色，在確定視覺(jué)稿沒(méi)有交互問(wèn)題后，然后就是討論視覺(jué)設(shè)計(jì)稿的細(xì)節(jié)。在產(chǎn)品功能迭代的時(shí)候，評(píng)審的都是整體視覺(jué)風(fēng)格的繼承性和視覺(jué)稿的細(xì)節(jié)。例如對(duì)交互設(shè)計(jì)的理解是否到位，邏輯是否正確，視覺(jué)層次是否正確等。
5.1 設(shè)計(jì)組件規(guī)范
5.1.1 為什么做組件規(guī)范
1.保證產(chǎn)品風(fēng)格統(tǒng)一
每個(gè)設(shè)計(jì)師都有自己的審美和風(fēng)格，產(chǎn)品迭代可能是不同的設(shè)計(jì)師來(lái)負(fù)責(zé)項(xiàng)目，但是產(chǎn)品的風(fēng)格必須保證是統(tǒng)一的，所以就需要一個(gè)規(guī)范性的文件來(lái)作為設(shè)計(jì)標(biāo)準(zhǔn)。
2.提升團(tuán)隊(duì)效率
在sketch里，有一個(gè)好的組件庫(kù)，設(shè)計(jì)師就不用重復(fù)去改每一個(gè)頁(yè)面上的圖標(biāo)。只需要改動(dòng)一個(gè)就能同步頁(yè)面上所有的圖標(biāo)。
3.打磨細(xì)節(jié)體驗(yàn)
在產(chǎn)品長(zhǎng)期迭代的過(guò)程中，對(duì)每一個(gè)元素都需要對(duì)其場(chǎng)景、狀態(tài)考慮清楚。所以在整理過(guò)程中，經(jīng)常會(huì)發(fā)現(xiàn)以前沒(méi)有注意到的問(wèn)題并優(yōu)化。
5.1.2 組件規(guī)范內(nèi)容和分類
不同的項(xiàng)目的規(guī)范內(nèi)容都是不同的，我們需要明確規(guī)范內(nèi)容的分類有哪些。可以先確定大體的規(guī)范內(nèi)容，在頁(yè)面完善的過(guò)程中也不斷的完善規(guī)范。
iOS的設(shè)計(jì)尺寸建議使用一倍圖375*667的尺寸進(jìn)行設(shè)計(jì)。因?yàn)檫@和安卓的常用尺寸360*640的誤差很小。安卓和iOS可以共用字體、圖標(biāo)和間距?？梢愿臃奖憷镒龊媒y(tǒng)一的設(shè)計(jì)規(guī)范。
輸出：
文章來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.newchinaweekly.com