關(guān)于產(chǎn)品設(shè)計工作流程詳解

關(guān)于產(chǎn)品設(shè)計工作流程詳解整理：微博控必上的微博論壇

在工作中總結(jié)的產(chǎn)品交互設(shè)計工作流程，只是寫了大概，當(dāng)然具體的項目還要有所偏重不同，很多情況下是交互設(shè)計師被某些項目拉去應(yīng)急，這樣的話又要根據(jù)進(jìn)入項目的節(jié)點不同有所調(diào)整了�？偟膩碚f具體問題具體分析吧，每個項目特征和開發(fā)環(huán)境也不都是一樣的。這里我們從每個工作目的、進(jìn)行方式、結(jié)論報告、和合作人員等幾方面講。

一方面可以確保我們的工作進(jìn)度及適時完善工作成果也會很明確的讓其他的團(tuán)隊了解到我們什么時候需要密切溝通配合。以下是常用的基本的幾個流程環(huán)節(jié)。1.需求分析

目的：根據(jù)產(chǎn)品需求和設(shè)計要求提供用戶使用分析。

方式：訪談、焦點小組、提煉目標(biāo)用戶建立角色模型、競爭對手分析、提煉定性和定量的相關(guān)數(shù)據(jù)。

結(jié)論報告：根據(jù)分析目標(biāo)用戶的使用特征、情感、習(xí)慣、心理、需求等，提出用戶研究報告和可用性設(shè)計建議。

合作人員：市場人員、產(chǎn)品需求客戶、項目負(fù)責(zé)人2.原型設(shè)計

目的：概念方案設(shè)計。制定產(chǎn)品的業(yè)務(wù)功能和界面規(guī)范。

方式：與開發(fā)隊伍合作設(shè)計各種交互原型。同商業(yè)方面的專家、市場部溝通，確認(rèn)設(shè)計并得到認(rèn)可。

作角色模型設(shè)計和情景設(shè)計，通過情景的再現(xiàn)演示來總結(jié)和逐步細(xì)化用戶使用中的各種交互需求，提出設(shè)計解決方案，并完成設(shè)計方案的演示，討論，完善，和最終定稿。結(jié)論報告：制作交互設(shè)計原型。為用戶界面和交互設(shè)計實施提供設(shè)計標(biāo)準(zhǔn)規(guī)格。合作人員：項目負(fù)責(zé)人、開發(fā)團(tuán)隊、市場人員3.原型測試

目的：產(chǎn)品概念測試，檢測產(chǎn)品的業(yè)務(wù)邏輯。方式：啟發(fā)式評估、焦點小組作角色模型設(shè)計和情景設(shè)計，通過任務(wù)來測試用戶完成度，及效率。

結(jié)論報告：測試報告。針對問題所在，提出改進(jìn)的建議。合作人員：開發(fā)團(tuán)隊、測試自愿者4.制作開展

目的：保證最終實施效果。

方式：與產(chǎn)品質(zhì)量控制隊伍合作，跟蹤用戶界面和交互設(shè)計開發(fā)的過程。同開發(fā)人員溝通，提供明確的定義和執(zhí)行的方向。同質(zhì)量控制部門溝通，提供在測試階段需要的清晰理解。結(jié)論報告：保證項目順利進(jìn)行。

合作人員：開發(fā)團(tuán)隊、項目經(jīng)理、視覺設(shè)計師5.視覺管理

目的：使界面設(shè)計更符合產(chǎn)品定位，用戶使用習(xí)慣及規(guī)范布局，對實現(xiàn)功能進(jìn)行正確有效地引導(dǎo)。

方式：主持用戶研究進(jìn)行界面視覺引導(dǎo)。設(shè)計窗口規(guī)范，圖形化的布局。結(jié)論報告：界面測試報告。合作人員：視覺設(shè)計師6.可用性測試

目的：通過觀察，來發(fā)現(xiàn)過程中出現(xiàn)了什么問題、用戶喜歡或不喜歡哪些功能和操作方式，原因是什么。方式：一對一用戶測試

結(jié)論報告：用戶背景資料文檔、用戶協(xié)議、測試腳本、測試前問卷、測試后問卷、任務(wù)卡片、過程記錄文檔、測試報告

合作人員：測試自愿者、市場相關(guān)人員7.跟蹤調(diào)查

目的：產(chǎn)品使用結(jié)果的反饋。方式：用戶訪談，用戶反饋結(jié)論報告：根據(jù)反饋意見及實際調(diào)查并根據(jù)預(yù)期目的撰寫產(chǎn)品反饋結(jié)果報告。包括值得肯定的設(shè)計及對修改的建議。

合作人員：產(chǎn)品用戶、市場相關(guān)人員

擴(kuò)展閱讀：標(biāo)準(zhǔn)的產(chǎn)品設(shè)計工作流程

標(biāo)準(zhǔn)的產(chǎn)品設(shè)計工作流程

每個產(chǎn)品團(tuán)隊都會有自己的工作流程，無論這個工作流程是否最高效、是否體現(xiàn)最大價值，但是我認(rèn)為只要這個流程能夠為實現(xiàn)工作目標(biāo)提供過程的保障就可以算是好的流程。

對于流程本身而言，可以因團(tuán)隊不同或工作任務(wù)不同而有差異。一個成熟度的產(chǎn)品團(tuán)隊可以在保證工作質(zhì)量的前提下輕松適應(yīng)任務(wù)的變化，也就是說能夠依據(jù)不同的工作要求調(diào)整對應(yīng)工作的流程。也只有這種團(tuán)隊才能正真體現(xiàn)最大的價值，稱得上是一個敏捷的、能快速響應(yīng)變化的團(tuán)隊。

那么，我們先來看看以前做產(chǎn)品設(shè)計時的團(tuán)隊工作流程。我總結(jié)為是一個相對normal的流程。大多時候，一個PM，一個美工，一兩個寫Html的工程師就足夠了。

如下圖所示：

工作流程包括：

當(dāng)產(chǎn)品經(jīng)理做好了產(chǎn)品的需求分析和功能實現(xiàn)批次計劃后，開始計劃產(chǎn)品迭代過程。

PM做好產(chǎn)品的線框設(shè)計，交給前端工程師（Front-End）；

前端工程師開始依照產(chǎn)品經(jīng)理的線框做HTML開發(fā)，同時要肩負(fù)一些交互設(shè)計工作，比如，導(dǎo)航，搜索，查詢，彈出頁面或?qū)釉O(shè)計，menu等；

同時，美工開始依照線框，做頁面的視覺設(shè)計，比如，色彩，按鈕，logo，icon等；

當(dāng)HTML和美工設(shè)計都o(jì)k了，就可以交給Javaer、PHPer等做前后臺整合了；

然后是產(chǎn)品的一系列測試，包括可用性測試，功能性測試，性能壓力測試，產(chǎn)品集成測試，發(fā)布測試等。

然而，隨著產(chǎn)品精細(xì)化設(shè)計的要求，特別是web2.0的一些標(biāo)準(zhǔn)逐步引入到產(chǎn)品設(shè)計范疇。以注重用戶體驗，注重以人與系統(tǒng)的交互為設(shè)計重點，崇尚簡約和適度的設(shè)計理念被提出來，并逐漸引領(lǐng)了產(chǎn)品設(shè)計的主流思想。

在新的產(chǎn)品設(shè)計過程中，為了體現(xiàn)web2.0的UE設(shè)計元素，實現(xiàn)產(chǎn)品設(shè)計的工作精細(xì)化，我們逐步優(yōu)化了新的產(chǎn)品標(biāo)準(zhǔn)工作流程，并定義了產(chǎn)品工作流程的標(biāo)準(zhǔn)輸出成果。

如下圖所示：

新的產(chǎn)品設(shè)計團(tuán)隊標(biāo)準(zhǔn)工作流程被劃分為兩個領(lǐng)域：1、產(chǎn)品功能設(shè)計領(lǐng)域；2、產(chǎn)品視覺交互設(shè)計領(lǐng)域；

這種劃分的意義在于把產(chǎn)品不再僅僅看作一個由代碼構(gòu)成的系統(tǒng)，而更是一組由用戶行為構(gòu)成的服務(wù)集合。從系統(tǒng)角度來看設(shè)計更看重的是功能，而從服務(wù)角度來看設(shè)計更看重的是體驗，所以，我們在產(chǎn)品設(shè)計的過程中，一條線去關(guān)注產(chǎn)品的功能設(shè)計，一條線去關(guān)注產(chǎn)品的體驗設(shè)計。

只有兩個領(lǐng)域都做到了精致，做到了極致，一個產(chǎn)品才稱得上是好產(chǎn)品，才有機會幫助投資人獲得盈利的可能。

產(chǎn)品功能設(shè)計領(lǐng)域包括以下一些環(huán)節(jié)：制定工作計劃用戶需求調(diào)研產(chǎn)品功能分析信息架構(gòu)設(shè)計原型制作內(nèi)部評審出資方評審

產(chǎn)品視覺交互設(shè)計領(lǐng)域包括的環(huán)節(jié)是：交互呈現(xiàn)調(diào)研視覺風(fēng)格調(diào)研視覺設(shè)計視覺內(nèi)部評審資方評審裁圖及前端實現(xiàn)從UE的五層要素設(shè)計思路來看，用戶需求調(diào)研過程是對應(yīng)的Strategy和Scope層；產(chǎn)品功能分析過程對應(yīng)了Structure層；交互呈現(xiàn)調(diào)研、原型制作對應(yīng)了Skeleton層；視覺風(fēng)格調(diào)研和設(shè)計對應(yīng)了Surface層。信息架構(gòu)設(shè)計則對應(yīng)了Structure層的信息架構(gòu)和Skeleton層的信息設(shè)計。

下面對每一個流程進(jìn)行簡要的介紹和描述：l1制定工作計劃

主要參與角色是PM-產(chǎn)品經(jīng)理；主要的標(biāo)準(zhǔn)成果物是《工作計劃》。第一步非常重要，可以理解為是產(chǎn)品路線圖上最為關(guān)鍵的一個階段計劃。熟話說萬事開頭難，好的開頭是確保成功的第一步。一個成功的產(chǎn)品在其生命歷程上，會包括：

創(chuàng)意階段---設(shè)計階段---實現(xiàn)階段---運行階段---更新升級---消亡這里制定的工作計劃是設(shè)計階段的工作計劃，這個階段計劃的目標(biāo)是把產(chǎn)品的創(chuàng)意變成可實現(xiàn)的產(chǎn)品設(shè)計語言，確保產(chǎn)品的創(chuàng)意和目標(biāo)得以在實現(xiàn)過程中完美體現(xiàn)出來。

同樣，在計劃的過程中，PM也要考慮工作任務(wù)的特性，結(jié)合工作流程做出適應(yīng)和改變。

我在制定工作計劃時使用的工具一般是MS的Project或者Excel，計劃內(nèi)容要明確至少四大要素：

1、任務(wù)：要完成的任務(wù)最好能做合理的細(xì)分，可以參考WBS的定義。2、時間：任務(wù)開始和結(jié)束時間；

3、資源：投入到任務(wù)的資源，要責(zé)任到人；

4、產(chǎn)出：標(biāo)準(zhǔn)的產(chǎn)出物是什么，這是檢驗其工作成果的最好載體。

l2用戶需求調(diào)研

主要參與角色是PM-產(chǎn)品經(jīng)理；主要的標(biāo)準(zhǔn)成果物是《調(diào)研問卷》和《調(diào)研分析報告》。

對于有特定目標(biāo)用戶的研發(fā)型產(chǎn)品，往往都需要PM在產(chǎn)品設(shè)計之初對用戶做詳盡的調(diào)研，調(diào)研的內(nèi)容包括：

總體性調(diào)研

產(chǎn)品價值目標(biāo)，用戶的業(yè)務(wù)目標(biāo)，用戶的組織架構(gòu)，與產(chǎn)品相關(guān)的流程，規(guī)章制度，出資人對于產(chǎn)品認(rèn)定的成功標(biāo)準(zhǔn)等。

功能和非功能性調(diào)研

產(chǎn)品用戶角色，產(chǎn)品功能需求，用戶對于產(chǎn)品功能的需求優(yōu)先級，產(chǎn)品內(nèi)容需求，產(chǎn)品約束，運營需要，性能要求，其他特性等。

在進(jìn)行調(diào)研的時候，調(diào)研問卷是必不可少的一份文檔。在準(zhǔn)備調(diào)研問卷時，PM可以通過問卷明確調(diào)研的方向和把控范圍；被調(diào)研者可以了解調(diào)研重點，并準(zhǔn)確的給予響應(yīng)，明確提供有價值的信息范圍（深度和廣度等）。

需求調(diào)研完成后，PM要及時完成調(diào)研分析報告，并與用戶進(jìn)行確認(rèn)。調(diào)研分析報告是將調(diào)研過程中形成結(jié)論的內(nèi)容按照一定的邏輯格式規(guī)整成文后，方便用戶進(jìn)行逐條確認(rèn)。

調(diào)研分析報告一般著重體現(xiàn)五點內(nèi)容：1、產(chǎn)品的戰(zhàn)略目標(biāo)和價值體現(xiàn)2、產(chǎn)品的核心業(yè)務(wù)形態(tài)3、產(chǎn)品的功能分布和描述4、產(chǎn)品的非功能需求（不包含交互和視覺部分內(nèi)容，這部分將單獨調(diào)研）5、產(chǎn)品的內(nèi)容需求（作為信息架構(gòu)設(shè)計的基礎(chǔ)）

如果調(diào)研報告能將上述的五方面內(nèi)容說清楚了、說準(zhǔn)確了，我們會認(rèn)為調(diào)研工作是成功的。

l3產(chǎn)品功能分析

主要參與角色是PM-產(chǎn)品經(jīng)理；主要的標(biāo)準(zhǔn)成果物是《產(chǎn)品需求文檔》，有個洋名字為PRD。

產(chǎn)品需求文檔是對產(chǎn)品的需求分析后，以設(shè)計語言進(jìn)行描述，將作為開發(fā)階段的主要輸入物之一。

如果是通用型產(chǎn)品，在PRD的分析過程中還可以借鑒MRD。在這類項目中，PRD在產(chǎn)品項目中是一個承上啟下的作用，對上是基于MRD內(nèi)容的深化和落地，對下是要把MRD中的內(nèi)容設(shè)計語言化和技術(shù)化，向研發(fā)人員說明產(chǎn)品的功能特性和性能指標(biāo)。

在這里，我們拋開市場元素，只從產(chǎn)品本身的功能特性來看，我們約束PRD要體現(xiàn)以下的一些內(nèi)容：

產(chǎn)品生命周期模型實現(xiàn)進(jìn)度安排規(guī)劃產(chǎn)品技術(shù)路線

對產(chǎn)品feature詳細(xì)描述feature優(yōu)先級產(chǎn)品release計劃用例（usecases）設(shè)計產(chǎn)品部署設(shè)計產(chǎn)品性能設(shè)計

至于產(chǎn)品的需求分析方法，可以參考我前面的文章《探討APP的分析過程》。l4信息架構(gòu)設(shè)計

主要參與角色是PM-產(chǎn)品經(jīng)理或IA-信息架構(gòu)師；主要的標(biāo)準(zhǔn)成果物是《信息架構(gòu)設(shè)計》。

產(chǎn)品的信息架構(gòu)設(shè)計文檔主要包括：信息架構(gòu)策略信息架構(gòu)藍(lán)圖內(nèi)容映射內(nèi)容模型

原型（著重體現(xiàn)四大體系：導(dǎo)航，搜索，標(biāo)簽和組織）具體可以參考我前面的文章《信息架構(gòu)的設(shè)計思路》。

這里需要說明的是：特別對于互聯(lián)網(wǎng)產(chǎn)品而言，信息架構(gòu)不是一個簡單的工作，不能把它作為產(chǎn)品需求設(shè)計的一個附屬任務(wù)來完成，而是要將其作為一個獨立的工作任務(wù)，安排有經(jīng)驗的專家來負(fù)責(zé)把控。因為，我見過很多因沒有重視產(chǎn)品的信息架構(gòu)設(shè)計，而到后來不得不推翻重做的產(chǎn)品，這種勞命傷財?shù)倪^程希望不要再發(fā)生了。

l5原型制作

主要參與角色是PM-產(chǎn)品經(jīng)理和UE交互設(shè)計師；主要的標(biāo)準(zhǔn)成果物是《低保真原型》和《高保真原型》。

很多產(chǎn)品經(jīng)理都是十項全能，畫線框，畫原型，做分析，做設(shè)計…….但是真正檢驗一個產(chǎn)品經(jīng)理的業(yè)務(wù)能力和設(shè)計素養(yǎng)的就是他做的prototype。

為什么這么說？

因為，軟件行業(yè)的產(chǎn)品經(jīng)理，往往身上都背負(fù)著產(chǎn)品創(chuàng)新和設(shè)計的重任，這種能力最好的體現(xiàn)方式就是通過原型來展現(xiàn)，一個有想法并能將想法快速展現(xiàn)出來的PM，具備成為一個合格PM的基礎(chǔ)。

在不同的團(tuán)隊，PM的工作略有不同。有的產(chǎn)品經(jīng)理只畫線框，然后把線框交給UE，由UE完成prototype的制作，因為在UE的工作中還包括了交互的設(shè)計。

有的產(chǎn)品經(jīng)理則需要一把抓，從功能設(shè)計到交互設(shè)計全部搞定，當(dāng)然這樣的產(chǎn)品經(jīng)理雖然累，但綜合能力將會更為突出一些。

再來說說線框和prototype的區(qū)別：

線框是靜態(tài)的；prototype可以是有交互能力的；線框是思路；prototype是思路的具體實現(xiàn)；

線框包括靜態(tài)頁面和說明；prototype是頁面和行為展現(xiàn)；

線框更多體現(xiàn)框架、組織、結(jié)構(gòu)、功能劃分及布局等；prototype更多體現(xiàn)：邏輯，細(xì)節(jié)，元素，整體，色彩，交互，內(nèi)容等。

Prototype又分為低保真和高保真兩種：

低保真原型反應(yīng)頁面的框架邏輯，導(dǎo)航邏輯，交互邏輯，標(biāo)簽邏輯，內(nèi)容組織邏輯等。

而高保真原型在低保真原型的基礎(chǔ)上，還加入了信息內(nèi)容，視覺元素，交互細(xì)節(jié)等。

兩種原型的用法也略有不同：

一般在產(chǎn)品團(tuán)隊中，內(nèi)部更看重的是低保證原型。因為，在設(shè)計之初，最怕的是偏離設(shè)計方向而浪費資源，所以通過低保真原型可以快速的發(fā)現(xiàn)問題，通過不斷的迭代設(shè)計完善產(chǎn)品框架和主體構(gòu)造。

一般在與外部進(jìn)行產(chǎn)品工作成果說明和演示時，用高保真原型更好。因為，sponsor或用戶更喜歡關(guān)注產(chǎn)品的實際模樣，因為他們骨子里是代表未來實際使用者的利益，如果他們覺得色彩不好，交互細(xì)節(jié)有問題，那么他們會堅持要求團(tuán)隊做出響應(yīng)，直至他們滿意為止，既然如此，我們最好將這個過程安排的越早越好，至少不要因為他們的意見而導(dǎo)致后期的開發(fā)工作重復(fù)。

l6內(nèi)部評審

主要參與角色是ProductOwner；主要的過程產(chǎn)物是《評審報告》。在一個以自有產(chǎn)品銷售為主的企業(yè)里面，產(chǎn)品的研發(fā)和銷售往往是兩個體系。我們將產(chǎn)品的研發(fā)負(fù)責(zé)人稱為PM，而將銷售的負(fù)責(zé)人稱為ProductOwner。

PO熟悉客戶，知道客戶為何需要這個產(chǎn)品，也知道市場的很多方方面面，所以，他們參與產(chǎn)品的內(nèi)部評審是非常有必要的。

在內(nèi)部評審過程中，我們要做好評審報告的記錄。對于評審過程，我認(rèn)為有以下幾點要特別記錄：

1、一致認(rèn)同的問題。在會上就要給予明確的響應(yīng)措施，誰負(fù)責(zé)響應(yīng)，多長時間響應(yīng)，誰來檢查等；

2、不能落實的問題。在會上要形成跟進(jìn)方案，誰來跟進(jìn)，找誰獲取資源，爭取什么時候獲得結(jié)論等；3、形成的結(jié)論。會議上形成了什么結(jié)論，后續(xù)有何安排等，都需要詳細(xì)記錄。

4、這份會議紀(jì)要將發(fā)送給誰，抄送給誰。

有時候，產(chǎn)品團(tuán)隊和銷售團(tuán)隊不總是一團(tuán)和氣，一碰面總?cè)菀撞脸龌饋�。這是因為，一旦爭論到產(chǎn)品的細(xì)節(jié)，產(chǎn)品團(tuán)隊總認(rèn)為銷售方面不懂產(chǎn)品，不懂技術(shù)；而反過來，銷售團(tuán)隊又會責(zé)備產(chǎn)品團(tuán)隊不懂用戶，不懂需求，自以為是。

說實話，這種情況不太好處理，但一個有經(jīng)驗的產(chǎn)品經(jīng)理如果會審時度勢，做出明智的決定，也許可以化解一些矛盾。

比如，

親自去再摸一次需求，而不是一味的火拼，甚至找到老板來協(xié)調(diào)；做出兩套方案，待與用戶參與的評審時，確定最終的需求；

如果明知自己是對的，則冷處理，將類似的問題全部掛起，并盡快整理一份書面澄清函，由PO提交用戶逐一回復(fù)。

l7出資方評審

主要參與角色是Sponsor，ProductOwner，PM等；主要的過程產(chǎn)物是《評審報告》。

內(nèi)部研發(fā)型產(chǎn)品的sponsor一般是分管產(chǎn)品研發(fā)的副總或CTO，有時候CEO，銷售副總也會作為干系人列席；交付型產(chǎn)品的sponsor一般是用戶方的業(yè)務(wù)負(fù)責(zé)人。

在這種級別的評審會議，PM要非常的細(xì)心準(zhǔn)備好每個細(xì)節(jié)，熟話說：臺下十年功，臺上三分鐘。如果不能通過會議讓sponsor認(rèn)為出資是值得的，那么團(tuán)隊的日子將非常難過，對整個team的信心將是沉重的打擊。

所以，在準(zhǔn)備過程中，我認(rèn)為有以下一些要點是特別要注意的：1、要有P3組合。PPT+Prototype+Plan。

Ppt著重介紹產(chǎn)品的主要設(shè)計細(xì)節(jié)，核心技術(shù)方向，產(chǎn)品亮點，有必要還需要包括用戶調(diào)研的數(shù)據(jù)分析成果，外部的可靠來源數(shù)據(jù)依據(jù)等。

Prototype主要展現(xiàn)產(chǎn)品的外觀模樣，主要展現(xiàn)的是功能性，交互性，以及視覺性。

Plan主要展現(xiàn)，截至目前階段產(chǎn)品研發(fā)的過程到了哪個環(huán)節(jié)，一共花費了投資人多少錢，成本是否在可控范圍內(nèi)，后續(xù)還要投入多少資源等等。

2、要有問題應(yīng)答表。

PM要準(zhǔn)備好sponsor可能會問道的一些問題，并做好準(zhǔn)確、真實的答復(fù)準(zhǔn)備，以隨時響應(yīng)sponsor的提問。

如果PM不能cover所有的方面，就一定要做好分工，不同的人準(zhǔn)備回答不同的問題。

3、要準(zhǔn)備現(xiàn)場的一些記錄工作。安排特定人做現(xiàn)場的錄音或記錄工作。

會議中，一般會形成一些重要結(jié)論，比如：目前的工作是否正常，是否可以繼續(xù)到下一個階段；是否需要做出修改和調(diào)整；是否要停止下來，等待其他條件滿足后再繼續(xù)。

不管怎樣，PM要做好各種應(yīng)對的準(zhǔn)備，隨時與各方面做好溝通和傳遞。l8交互呈現(xiàn)調(diào)研

主要參與角色是視覺設(shè)計師和交互設(shè)計師；標(biāo)準(zhǔn)成果物是《交互呈現(xiàn)調(diào)研報告》。

在交互呈現(xiàn)調(diào)研過程，主要是明確用戶群體的特性，包括了解其使用習(xí)慣，特殊偏好，在用產(chǎn)品操作過程的友好或缺陷之處等等。

在調(diào)研過程中，我們常常將會用到一些可重用的資源來作為調(diào)研的輔助，比如：

1、框架體系；2、設(shè)計模式；3、組件；

這些可以被用來作為調(diào)研的資源，為我們快速的理解用戶的實際需要有很大的幫助。因為在調(diào)研過程中，有很多時候用戶會告訴你，他們看過的某某網(wǎng)站，某某產(chǎn)品的某些表現(xiàn)形式很好，可以借鑒。但是，哪些表現(xiàn)元素是真正可以被借鑒的，哪些是不適合被借鑒的，都沒有明確下來，包括如何借鑒，如何和用戶的實際需求結(jié)合起來，都只是一些非�？斩春透拍畹南敕ǘ�已。

所以，我們會用到一些被我們沉淀和積累的資源來作為調(diào)研過程中的案例標(biāo)準(zhǔn)來展現(xiàn)和承載探討。

框架體系

框架體系指產(chǎn)品依據(jù)展現(xiàn)業(yè)務(wù)的不同而設(shè)計的有著內(nèi)在聯(lián)系的各種頁面展現(xiàn)框架集合。舉個例子，一個購物網(wǎng)站有注冊框架，支付框架，購物流程框架，商品展現(xiàn)框架。同時，為了支撐購物的良好體驗，一般還會有商品的論壇框架，評價框架，搜索框架，比較框架等等。

那么，如果是個著重于信息的管理產(chǎn)品呢，則有信息發(fā)布框架，信息聚合展示框架，信息搜索框架，欄目展現(xiàn)框架，詳細(xì)信息頁框架等等。

如果我們能過將這些框架示例按照一定的邏輯組織和整理起來，在調(diào)研過程中，依據(jù)用戶的不同需求，有針對的展現(xiàn)相類似的框架示例，那么就可以方便直觀的基于示例進(jìn)行探討，明確用戶的意圖，形成調(diào)研結(jié)論。

設(shè)計模式

設(shè)計模式是一種常見問題的常用解決方案。

比如，用戶忘記了密碼怎么辦，那么我們可以提供一個密碼找回模式，這個模式是通過輸入注冊的郵箱地址后，我們將用戶的密碼發(fā)到該郵箱。相應(yīng)的，還有登錄模式，各種搜索模式，分頁模式，日期輸入模式，圖片切換模式，評論模式，留言模式……

有很多企業(yè)都建立了自己的模式資源庫，也就是將各種設(shè)計模式的文檔經(jīng)過整理后，分類保存，在網(wǎng)上或企業(yè)內(nèi)部進(jìn)行公開。

比如，雅虎的設(shè)計模式庫：。組件

組件是頁面最通用的組成元素，比如，文本，鏈接，按鈕，復(fù)選框，圖片等。一般模式可以在不同產(chǎn)品中通用，然而組件卻往往只適用于特定的產(chǎn)品，因為，組件是確定了展現(xiàn)形式的成品，可以直接被使用。

組件資源庫和模式資源庫一樣，可以采用很多方式來管理和收集，比如wiki的方式。也有很多公共的資源提供網(wǎng)站，比如，，上面就有很多最新的組件資源

l9視覺風(fēng)格調(diào)研

主要參與角色是視覺設(shè)計師和交互設(shè)計師；標(biāo)準(zhǔn)成果物是《視覺風(fēng)格調(diào)研報告》。

視覺風(fēng)格調(diào)研工作在交互呈現(xiàn)調(diào)研的基礎(chǔ)上，調(diào)研產(chǎn)品的實際用戶群體的熟知的文化理念，以及現(xiàn)有在用產(chǎn)品的生命原色，產(chǎn)品隱喻，所在地方的政治約束，社會元素等眾多因素，為后期設(shè)計適合本產(chǎn)品的特有視覺風(fēng)格提供依據(jù)。

調(diào)研過程中要關(guān)注的一些要點包括：企業(yè)CI

企業(yè)內(nèi)部的視覺設(shè)計規(guī)范現(xiàn)有系統(tǒng)的視覺設(shè)計企業(yè)文化用戶群體特性操作使用環(huán)境操作使用習(xí)慣

有時候，用戶會要求你去改變現(xiàn)有產(chǎn)品的視覺設(shè)計，那么還需要調(diào)研清楚，他們?yōu)槭裁匆�改變，原來的視覺有什么不足之處。

l10視覺設(shè)計

主要參與角色是視覺設(shè)計師；標(biāo)準(zhǔn)成果物是《頁面效果圖》，《視覺設(shè)計規(guī)范初稿》。在視覺調(diào)研完成后，VI進(jìn)入設(shè)計階段。在設(shè)計之初，PM、UE首先要與VI確定工作內(nèi)容和計劃。

比如，

哪些頁面要做效果，這些頁面的確定稿分別在何時會提供給VI。哪些組件會被使用到，有多少種組件需要做效果，這些組件何時會確定提供給VI。

除了頁面的效果圖，還要形成視覺設(shè)計規(guī)范的初稿，在這份規(guī)范中，要形成視覺設(shè)計的各種標(biāo)準(zhǔn)。比如，

頁面柵格系統(tǒng)視線流框架布局的大小

各個元素的大小，色彩，對齊各種留白

交互defalt樣式，鼠標(biāo)劃過樣式，點擊樣式文字規(guī)范，字體，大小

圖片樣式，大小，格式，顯示處理等

在這個階段VI的成果只能稱為視覺設(shè)計規(guī)范的初稿，這是因為只有在得到sponsor評審確認(rèn)后，設(shè)計的標(biāo)準(zhǔn)才能最終確定下來，成為后續(xù)工作的基線和準(zhǔn)則。

l13裁圖及前端實現(xiàn)

主要參與角色是前端工程師，F(xiàn).E；標(biāo)準(zhǔn)成果物是《靜態(tài)頁面》，《視覺設(shè)計規(guī)范》。

前端工程師的最主要工作分為兩個部分：1、切圖。

2、編寫頁面JS和CSS等實現(xiàn)腳本。

下面是一個前端工程師交給PM的成果目錄結(jié)構(gòu)：

后續(xù)工作將交給PHPer，Javaer完成前后臺的渲染。

到此，整個產(chǎn)品設(shè)計工作將完成階段性任務(wù)，后續(xù)則是產(chǎn)品開發(fā)工程師實現(xiàn)代碼，產(chǎn)品測試工程師完成測試和集成，最終發(fā)布；產(chǎn)品進(jìn)入運營階段。

本文參考了：

《WebAnatomy:InteractionDesignFrameworksthatWork》ByRobertHoekman,jr.JaredSpool

友情提示：本文中關(guān)于《關(guān)于產(chǎn)品設(shè)計工作流程詳解》給出的范例僅供您參考拓展思維使用，關(guān)于產(chǎn)品設(shè)計工作流程詳解：該篇文章建議您自主創(chuàng)作。

來源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問題，請聯(lián)系我們及時刪除。

《關(guān)于產(chǎn)品設(shè)計工作流程詳解》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請保留原作者信息,謝謝!
鏈接地址：http://m.taixiivf.com/gongwen/650755.html

• 上一篇：如果你想成為一名交互設(shè)計師
• 下一篇：201*學(xué)年度市三女中交互式電子白板課題研究小結(jié)