通過TeamCola淺談互聯(lián)網(wǎng)產(chǎn)品前期設(shè)計方法
當(dāng)下大大小小層出不窮的互聯(lián)網(wǎng)產(chǎn)品如同一場令人眼花繚亂的星球大戰(zhàn),普通用戶會被死星、聯(lián)盟戰(zhàn)艦和絕地武士們手中的光劍所吸引,而設(shè)計師們則會去關(guān)注這些龐大或精巧的武器如何被制造出來。
是的,隨著以用戶為中心的設(shè)計(UCD)和用戶體驗設(shè)計(UED)概念的深入人心,互聯(lián)網(wǎng)產(chǎn)品設(shè)計的方法和流程已被重新定義而且大同小異,即便是剛?cè)腴T的麻瓜也能一本正經(jīng)地告訴你一個正確的產(chǎn)品設(shè)計流程需要經(jīng)過低保真原型、視覺設(shè)計、交互設(shè)計、高保真設(shè)計……等階段。
彩程設(shè)計用戶體驗設(shè)計流程
產(chǎn)品經(jīng)理不是巫師,拿腦袋當(dāng)水晶球拍拍,就能精確地規(guī)劃出每個界面和界面上的控件,而是通過一定的方法和工具,把邏輯思維逐步收縮,并落實紙面。低保真原型通常并非一個設(shè)計真正的起點,就好像一個完整而令人激動的星球大戰(zhàn)故事還會有它的前傳。
TeamCola是我們針對小團(tuán)隊開發(fā)的一款團(tuán)隊日志產(chǎn)品,通過讓團(tuán)隊內(nèi)部工作透明從而方便管理、增進(jìn)信任和提高效率。想通過這款產(chǎn)品,來談?wù)勎覀冊O(shè)計前期所使用的一些工具和方法。
軟件設(shè)計,以人為本。產(chǎn)品設(shè)計前,對產(chǎn)品本身的典型使用人群需要個大致定位,如果不太明確,建議提前進(jìn)行一些調(diào)研、走訪并制作一份角色分析表,共同討論和分析是什么類型的用戶,會出于什么動機,在什么場景下,使用到軟件的什么功能。關(guān)于用戶研究,有很多成熟的理論與方法,不在此贅述。
產(chǎn)品的雛形或者說全貌,通常會先出現(xiàn)產(chǎn)品經(jīng)理的腦海中,如果這個產(chǎn)品經(jīng)理就是個單干戶,那么他馬上就可以做設(shè)計寫代碼或者同時搞了,但更多的情況是產(chǎn)品經(jīng)理是團(tuán)隊的一員,需要跟團(tuán)隊的成員溝通,告訴他們自己想做的是個什么東西。當(dāng)然,某些既不是普通產(chǎn)品又不是文藝產(chǎn)品經(jīng)理的產(chǎn)品經(jīng)理不在討論之列。
在彩程,產(chǎn)品經(jīng)理需要通過一張圖來向團(tuán)隊成員來闡述這個產(chǎn)品的內(nèi)在邏輯,用什么方式或軟件來繪制不重要。這張圖可以是紙面的草圖,也可以經(jīng)過精心的繪制,這樣的圖,我們稱之為信息結(jié)構(gòu)圖。
Teamcola信息結(jié)構(gòu)早期討論稿
一個普通用戶眼中的TeamCola信息結(jié)構(gòu)
一個產(chǎn)品經(jīng)理眼中的TeamCola信息結(jié)構(gòu)
在這個階段,產(chǎn)品經(jīng)理著重需要考慮的是系統(tǒng)的核心功能和信息流向。這樣一張信息結(jié)構(gòu)圖,對于信息邏輯的梳理非常有幫助,也方便向團(tuán)隊其他成員展示和闡述。
接下來,產(chǎn)品經(jīng)理會開始繪制頁面路徑圖和角色任務(wù)圖,頁面路徑圖會大致規(guī)劃產(chǎn)品大概會有哪些頁面,相互間的鏈接關(guān)系如何。然后將典型角色的典型任務(wù)列出,看看完成這些任務(wù)需要經(jīng)過多少個網(wǎng)頁,路徑是否過長,是否有走不通的斷頭路等情況。
頁面路徑圖討論稿
整理后的頁面路徑圖
典型角色在Teamcola中可能會面臨的典型任務(wù)
有了這些前期成果,就可以開始正式的低保真原型設(shè)計了,在做每個具體頁面信息架構(gòu)的時候,可以根據(jù)內(nèi)容的多寡和重要性進(jìn)行某些頁面的合并或拆分。至于形式,可以是手繪,也可以用Axure之類的軟件來完成。一般說來手稿在繪制的時候效率更高,成本更低,攤在桌上很文青,貼在墻上很大師;html的版本則更方便在電腦上展示和遠(yuǎn)程傳輸,在展現(xiàn)一些動態(tài)的交互細(xì)節(jié)與不同頁面間的跳轉(zhuǎn)關(guān)系上更為方便。
在前期設(shè)計的輔助下開始基于頁面信息架構(gòu)的低保真原型設(shè)計
有些頁面上有相互調(diào)用的模塊,我們會做成小的卡片來方便討論時的排列組合
把低保真設(shè)計原型貼在墻上方便集體討論和查閱
低保真原型后面的故事,相信大家都知道啦~就是視覺設(shè)計、交互設(shè)計、前端開發(fā)、后端開發(fā)之類的一通猛干,把這些紙上的想法變成現(xiàn)實。:)
Mm??我知道我們團(tuán)隊今年夏天干了什么
最后,歡迎體驗我們這番設(shè)計的最終成果——最好用的團(tuán)隊日志管理工具——TeamCola! ?同時歡迎關(guān)注@TeamCola與@彩程設(shè)計 以獲得我們的最新動態(tài)。:)
來源:http://blog.mycolorway.com/2011/12/30/teamcola-pre-design/
- 目前還沒評論,等你發(fā)揮!