產品設計流程系列：如何進行原型設計(上)

產品設計流程系列：如何進行原型設計（上）經歷了漫長的產品設計流程，我們終于來到了最后一個環(huán)節(jié)，也就是根據(jù)之前梳理的產品流程來進行產品的界面設計了。產品經理其實都知道，在這樣一個看重顏值的時代，一個賞心悅目的網(wǎng)站（或者移動APP）是多么重要。每一個產品經理，也都希望自己的創(chuàng)造的產品是與眾不同的，在茫茫的互聯(lián)網(wǎng)產品海洋里，能夠閃出耀眼的光芒，就好比每個人都希望自己是人群中獨一無二的那一個。嗯，這么說來，其實每一個產品經理的內心深處，都有著一顆文藝青年的心靈，也正是擁有了這樣一顆感受豐富、細膩的產品之心，才使得我們能夠對產品設計的細節(jié)有著更為透徹和深入的理解。在大公司內部，通常來說不需要產品經理去進行具體的界面交互設計，多數(shù)是由產品團隊與UED團隊合作進行產品原型的設計，出具的交付物是產品原型和頁面交互圖，而產品經理則需要產出產品需求文檔（PRD文檔）。但是在絕大多數(shù)創(chuàng)業(yè)公司團隊里面，則沒有配置那么豪華的產品設計、交互設計團隊，常見的搭配往往是一個產品經理加上一個UI設計師，所以一般都是產品經理自己身兼交互設計的工作職責，輸出交互設計稿，也就是產品原型。什么是產品原型說的簡單一點，產品原型是設計方案的表達，是產品經理、交互設計師的重要產出物之一，也是項目團隊的其它成員（尤其是設計師、開發(fā)人員）的重要參考和評估的依據(jù)。結合我們前面了解的知識，產品界面原型其實就是頁面級別的信息架構、文案設計、及頁面和頁面之間的交互流程，它是產品功能與內容的示意圖。直接上幾個原型圖，可能會更加清晰明了，如下圖：原型設計稿產品設計原型按照精細程度來分，可分為低保真產品原型和高保真產品原型、設計成品低保真產品原型所謂低保真原型，其實是對產品較簡單的模擬，它只是簡單的表述了下產品的外部特征和基本功能構架，很多時候都是用簡單的設計工具迅速制作出來，用來表示最初的設計概念和思路。比如用紙和筆進行的手繪，用畫圖軟件做出的簡單線框圖，都算是低保真產品原型。這樣的原型圖有幾個好處：可以快速產出：有時候一個需求的開發(fā)周期很短，低保真原型可以快速滿足同事的時間要求。修改成本低：一個產品策劃很可能會被修改很多次，低保真的原型修改起來很方便。當然，低保真原型也會有幾個問題，比如交互細節(jié)不清楚，容易造成誤解等。通常來說，一般只有時間比較緊迫，需求也比較簡單的時候，我們才會去產出低保真產品原型。高保真產品原型高保真產品原型，則是高功能性、高互動性的原型設計，是忠實展示產品功能、界面元素、功能流程的一種表現(xiàn)手段。原型圖中無論是功能模塊的大小，還是文案設計甚至是所用的圖標、圖例、交互動作，都使用真實素材，或者說和最終UI設計師的產出非常接近，就算是高保真產品原型了。高保真的好處：便于梳理產品細節(jié)：制作高保真原型的過程中可以讓產品經理提前發(fā)現(xiàn)產品潛藏的各種問題，提前處理風險。更容易讓其他成員了解產品設計：有時候簡單的線框圖無法讓別人想象出你要做的事情，也不清楚你要放的是哪幾個字段，而高保真原型就可以。相對而言，劣勢就是制作周期比較漫長，涉及到產品流程的修改，那基本原型就得回爐重造一遍。對于剛入門的產品經理，我一直建議有時間的話，還是盡可能多的畫高保真原型。因為在一開始產品設計經驗不多的情況下，通過設計一些高保真原型，對梳理自己的產品思維、了解產品設計是很有幫助的。對于已經入門很久的同學來說，則看需求的復雜程度和時間安排，比如產品的關鍵頁面是必然要用高保真原型去設計和梳理的。設計成品設計成品在這里，你也可以理解為是視覺設計師產出的UI設計稿，也就是設計師對你的產品原型進行美化之后得出的作品。設計師會運用一定的設計規(guī)范，來將你的原型變成可以讓開發(fā)進行實現(xiàn)的作品。在設計成品出來的那一刻，產品經理需要做的就是和設計師進行PK就好了，我們在這里就不再過多來描述了。放上一張圖來比較下三種原型的區(qū)別：三種原型比較原型設計工具這里給大家介紹幾款產品經理常用的原型設計工具：AxureRP，推薦指數(shù)?????axure官網(wǎng)AxureRP是一個專業(yè)的快速原型設計工具。Axure（發(fā)音：Ack-sure），代表美國Axure公司；RP則是RapidPrototyping（快速原型）的縮寫。Axure是產品經理的必備工具，其他的不多說了，去看看招聘網(wǎng)站上關于PM的招聘信息，基本所有職位描述里，都包含了這么一句“熟練使用Axure”，所以你懂的。墨刀，推薦指數(shù)????墨刀墨刀也是一款原型設計軟件，雖然可能功能沒有那么完整，相對來說對于一般使用也是足夠的，目前分為網(wǎng)頁版和客戶端，網(wǎng)頁版可以直接使用，客戶端其實也是網(wǎng)頁版的功能，一般來說會下載客戶端，使用過程中需要聯(lián)網(wǎng)。墨刀想對來說有這么幾個優(yōu)勢：簡單、易上手；支持團隊多人協(xié)作；控件什么的都是現(xiàn)成的；可以直接在手機上預覽；當然缺點也很明顯：依賴網(wǎng)絡，網(wǎng)絡不穩(wěn)定或者服務器不穩(wěn)定的時候則沒法使用；很多交互功能不夠強大；Visio2013，推薦指數(shù)???visio官網(wǎng)很多老牌的產品策劃人員、產品經理都使用過它來設計產品原型，算是線框圖專業(yè)戶，比較靈活，Office使用習慣接受程度較高。另一個好處是支持各種平臺尺寸設計。有些產品設計團隊從原先的Axure調整至Visio，是因為Visio可以更便捷地輸出標準大小的PDF文檔，方便在同事之間交流。在學習伊始，很多剛剛入門的產品經理就熱衷于上網(wǎng)找網(wǎng)絡課程學習Axure等工具教程來學，樂此不疲；希望通過精通的工具使用能力展示來為自己求職或在交互學習路上的發(fā)展加一把力。然而這并不是重點，工具只是用來承載我們思想和內容的一個載體，所以沒有必要把太多的時間消耗在掌握工具技巧上，產品設計的內容才是真正需要用心去考量和思索的。設計原型時需要注意的事項通過上面的介紹，其實我們已經了解了，一個好的產品原型可以讓其他人迅速理解我們想要做什么事情，減少團隊溝通成本，并確保接下來要推進的事情沒有什么誤會。產品經理在將原型圖畫好之后，往往會特別欣喜，恨不得立馬就讓全體團隊成員看到自己的設計成果。但是，這時候的原型圖通常是不完整的，很多場景、因素缺少考慮，小到一個按鈕的位置，字段展示、大到功能的流程設計、邏輯設計。如果你就輕易把這么一份不完整的原型交付給技術，不但技術會噴你，搞不好用戶也來噴你，甚至Boss也來噴你。所以，打磨好產品原型，盡量考慮各種場景、因素，設計原型時盡量細化分析，讓所有人從原型就能看到你的態(tài)度，是一件非常重要的事情。總體來說，原型設計需要表達清楚這么幾個地方：1.界面元素什么是界面元素，比如文字，下拉框，按鈕，圖標、圖片等等這些都屬于界面元素。我們在運用原型設計工具（如axure、墨刀、visio等）設計產品原型的時候，需要明確界面上的元素是什么，如何展現(xiàn)，鼠標移動或者點擊上去是怎樣的效果。2.數(shù)據(jù)邏輯這一點往往也是非常多創(chuàng)業(yè)團隊和新手產品經理容易忽視的。比如一個直播列表界面，上面有三個tab，分別是關注直播、熱門直播、最新直播，那么最新直播是基于怎樣的數(shù)據(jù)邏輯獲取的，你就需要在你的原型設計上進行說明了。當然，最新直播的數(shù)據(jù)獲取邏輯是比較簡單的，也許你不和研發(fā)人員說明清楚，他們也能知道是按時間倒序排列；但如果碰到稍微復雜一點的數(shù)據(jù)邏輯呢，就比如剛剛說的關注直播的數(shù)據(jù)獲取，是獲取關注的機構的直播呢，還是獲取個人的直播呢，這都是需要說明清楚的。3.操作邏輯一個原型界面上可以進行操作元素的有哪些，哪個可以點擊，哪個可以選擇，操作后出現(xiàn)怎樣的反饋，比如彈出浮層？進入新頁面？或是跳出新頁面？還是給一個怎樣的提示？這些也是需要在原型設計里面說清楚的。這三個點是一份完整的原型設計基本需要包含的東西，再配合上之前畫好的產品結構腦圖和流程圖，就基本可以與開發(fā)進行輕松愉快的交流了。只有這樣，開發(fā)者才能明確這個原型設計的開發(fā)需求，而不是讓開發(fā)工程師自己去猜，去揣測數(shù)據(jù)邏輯、算法應該是什么樣的。如下圖，可以在原型設計上做相關的注釋說明：原型設計說明談談產品需求文檔（PRD文檔）很多公司都要求產品經理寫產品需求文檔，我們來看下一份完整的產品需求文檔包含哪些部分：產品需求文檔內容通常來說，產品經理往往不會寫的那么詳細，能夠覆蓋到前面四個部分便已經算是一份基本合格的產品需求文檔了。我們一起來看下文檔里面都具體包含什么內容：1．概述概述部分是概括地說明產品背景、產品目標等。1.1產品概述及目標—-包括背景介紹和產品目的1.2名詞解釋—-聲明文檔中出現(xiàn)的名詞含義1.3數(shù)據(jù)詞典—-介紹本產品中數(shù)據(jù)的數(shù)據(jù)項、數(shù)據(jù)結構、數(shù)據(jù)流、數(shù)據(jù)存儲、處理邏輯、外部實體等。1.4文檔閱讀對象—-聲明本文檔輸出的閱讀對象和注意事項2．產品描述產品描述介紹了產品的整體邏輯流程，概括性的描述產品需求、產品版本規(guī)劃、產品整體的框架結構以及功能列表。產品整體流程與產品框架都需要使用相應的圖表展現(xiàn)方式2.1產品整體流程-—展示產品框架圖和用戶流程圖。2.2產品需求描述—-描述產品核心功能，解決哪些情景下的哪些需求。2.3產品版本規(guī)劃—-敘述產品版本迭代計劃，版本號、主要模塊、功能點、計劃開發(fā)時間、計劃結束時間、備注。2.4產品框架—-展示頁面層級及備注信息2.5功能列表—-展示產品功能名稱、對應模塊、功能說明、備注等信息。3．功能描述功能需求這部分需詳細描述產品所涉及的各個功能點。將整體框架拆成數(shù)個獨立的功能點，分別描述每個功能點的邏輯流程圖、界面、字段說明以及業(yè)務說明。統(tǒng)一采用UseCase的方式進行描述。3.1流程圖3.2界面原型3.3字段說明（包括數(shù)據(jù)字典）3.4業(yè)務說明（UseCase）4．非功能需求非功能需求，也就是關于產品的其它方面的要求。4.1安全需求4.2統(tǒng)計需求4.3性能需求4.4可用性需求嗯，我們已經看到了常規(guī)的產品需求文檔長什么樣了。有一次和一個朋友聊天，說起他們公司的產品需求文檔，是一份長達200多頁的word形式的產品需求文檔，其實這樣的文檔看起來相當費勁，也不容易更新同步；很多開發(fā)人員和產品經理之間產生的矛盾，其實都是因為這份又臭又長的產品需求文檔。因為無論是誰，都不喜歡看這么長的文字，開發(fā)人員其實根本不需要這份文字式的需求告白書，他們喜歡“看圖”，這種文字式的需求文檔應該是產品經理腦中的思路，而不應該直接把思路描述成文字轉交出來。其實我個人也不喜歡這樣的風格，溝通成本太高，所以對于創(chuàng)業(yè)公司而言，還是盡可