當(dāng)下大大小小層出不窮的互聯(lián)網(wǎng)產(chǎn)品如同一場令人眼花繚亂的星球大戰(zhàn)，普通用戶會(huì)被死星、聯(lián)盟戰(zhàn)艦和絕地武士們手中的光劍所吸引，而設(shè)計(jì)師們則會(huì)去關(guān)注這些龐大或精巧的武器如何被制造出來。

是的，隨著以用戶為中心的設(shè)計(jì)（UCD）和用戶體驗(yàn)設(shè)計(jì)（UED）概念的深入人心，互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)的方法和流程已被重新定義而且大同小異，即便是剛?cè)腴T的麻瓜也能一本正經(jīng)地告訴你一個(gè)正確的產(chǎn)品設(shè)計(jì)流程需要經(jīng)過低保真原型、視覺設(shè)計(jì)、交互設(shè)計(jì)、高保真設(shè)計(jì)……等階段。

彩程設(shè)計(jì)用戶體驗(yàn)設(shè)計(jì)流程

產(chǎn)品經(jīng)理不是巫師，拿腦袋當(dāng)水晶球拍拍，就能精確地規(guī)劃出每個(gè)界面和界面上的控件，而是通過一定的方法和工具，把邏輯思維逐步收縮，并落實(shí)紙面。低保真原型通常并非一個(gè)設(shè)計(jì)真正的起點(diǎn)，就好像一個(gè)完整而令人激動(dòng)的星球大戰(zhàn)故事還會(huì)有它的前傳。

TeamCola是我們針對小團(tuán)隊(duì)開發(fā)的一款團(tuán)隊(duì)日志產(chǎn)品，通過讓團(tuán)隊(duì)內(nèi)部工作透明從而方便管理、增進(jìn)信任和提高效率。想通過這款產(chǎn)品，來談?wù)勎覀冊O(shè)計(jì)前期所使用的一些工具和方法。

軟件設(shè)計(jì)，以人為本。產(chǎn)品設(shè)計(jì)前，對產(chǎn)品本身的典型使用人群需要個(gè)大致定位，如果不太明確，建議提前進(jìn)行一些調(diào)研、走訪并制作一份角色分析表，共同討論和分析是什么類型的用戶，會(huì)出于什么動(dòng)機(jī)，在什么場景下，使用到軟件的什么功能。關(guān)于用戶研究，有很多成熟的理論與方法，不在此贅述。

產(chǎn)品的雛形或者說全貌，通常會(huì)先出現(xiàn)產(chǎn)品經(jīng)理的腦海中，如果這個(gè)產(chǎn)品經(jīng)理就是個(gè)單干戶，那么他馬上就可以做設(shè)計(jì)寫代碼或者同時(shí)搞了，但更多的情況是產(chǎn)品經(jīng)理是團(tuán)隊(duì)的一員，需要跟團(tuán)隊(duì)的成員溝通，告訴他們自己想做的是個(gè)什么東西。當(dāng)然，某些既不是普通產(chǎn)品又不是文藝產(chǎn)品經(jīng)理的產(chǎn)品經(jīng)理不在討論之列。

在彩程，產(chǎn)品經(jīng)理需要通過一張圖來向團(tuán)隊(duì)成員來闡述這個(gè)產(chǎn)品的內(nèi)在邏輯，用什么方式或軟件來繪制不重要。這張圖可以是紙面的草圖，也可以經(jīng)過精心的繪制，這樣的圖，我們稱之為信息結(jié)構(gòu)圖。

Teamcola信息結(jié)構(gòu)早期討論稿

一個(gè)普通用戶眼中的TeamCola信息結(jié)構(gòu)

一個(gè)產(chǎn)品經(jīng)理眼中的TeamCola信息結(jié)構(gòu)

在這個(gè)階段，產(chǎn)品經(jīng)理著重需要考慮的是系統(tǒng)的核心功能和信息流向。這樣一張信息結(jié)構(gòu)圖，對于信息邏輯的梳理非常有幫助，也方便向團(tuán)隊(duì)其他成員展示和闡述。

接下來，產(chǎn)品經(jīng)理會(huì)開始繪制頁面路徑圖和角色任務(wù)圖，頁面路徑圖會(huì)大致規(guī)劃產(chǎn)品大概會(huì)有哪些頁面，相互間的鏈接關(guān)系如何。然后將典型角色的典型任務(wù)列出，看看完成這些任務(wù)需要經(jīng)過多少個(gè)網(wǎng)頁，路徑是否過長，是否有走不通的斷頭路等情況。

頁面路徑圖討論稿

整理后的頁面路徑圖

典型角色在Teamcola中可能會(huì)面臨的典型任務(wù)

有了這些前期成果，就可以開始正式的低保真原型設(shè)計(jì)了，在做每個(gè)具體頁面信息架構(gòu)的時(shí)候，可以根據(jù)內(nèi)容的多寡和重要性進(jìn)行某些頁面的合并或拆分。至于形式，可以是手繪，也可以用Axure之類的軟件來完成。一般說來手稿在繪制的時(shí)候效率更高，成本更低，攤在桌上很文青，貼在墻上很大師；html的版本則更方便在電腦上展示和遠(yuǎn)程傳輸，在展現(xiàn)一些動(dòng)態(tài)的交互細(xì)節(jié)與不同頁面間的跳轉(zhuǎn)關(guān)系上更為方便。

在前期設(shè)計(jì)的輔助下開始基于頁面信息架構(gòu)的低保真原型設(shè)計(jì)

有些頁面上有相互調(diào)用的模塊，我們會(huì)做成小的卡片來方便討論時(shí)的排列組合

把低保真設(shè)計(jì)原型貼在墻上方便集體討論和查閱

低保真原型后面的故事，相信大家都知道啦～就是視覺設(shè)計(jì)、交互設(shè)計(jì)、前端開發(fā)、后端開發(fā)之類的一通猛干，把這些紙上的想法變成現(xiàn)實(shí)。：）

Mm??我知道我們團(tuán)隊(duì)今年夏天干了什么

最后，歡迎體驗(yàn)我們這番設(shè)計(jì)的最終成果——最好用的團(tuán)隊(duì)日志管理工具——TeamCola! ?同時(shí)歡迎關(guān)注@TeamCola與@彩程設(shè)計(jì) 以獲得我們的最新動(dòng)態(tài)。：）

來源：http://blog.mycolorway.com/2011/12/30/teamcola-pre-design/