by linco

每個產(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)品，才有機(jī)會幫助投資人獲得盈利的可能诲泌。

產(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計劃

?用例（use cases）設(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)部評審

主要參與角色是Product Owner；主要的過程產(chǎn)物是《評審報告》鸣皂。

在一個以自有產(chǎn)品銷售為主的企業(yè)里面抓谴，產(chǎn)品的研發(fā)和銷售往往是兩個體系暮蹂。我們將產(chǎn)品的研發(fā)負(fù)責(zé)人稱為PM，而將銷售的負(fù)責(zé)人稱為Product Owner癌压。

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爵卒，Product Owner虚缎，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è)計模式庫：http://developer.yahoo.com/ypatterns/球恤。

?組件

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

組件資源庫和模式資源庫一樣胶滋，可以采用很多方式來管理和收集，比如wiki的方式悲敷。也有很多公共的資源提供網(wǎng)站究恤，比如，http://www.webdesign.org/后德，上面就有很多最新的組件資源

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)槭裁匆淖冏荩瓉淼囊曈X有什么不足之處。

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:Interaction Design Frameworks that Work》

ByRobert Hoekman,jr.Jared Spool

本文轉(zhuǎn)自網(wǎng)絡(luò)，如有侵權(quán)寂曹，立即刪除入问。

原文地址? http://blog.sina.com.cn/s/blog_5f63e3d80102v7f9.html