做互聯(lián)網(wǎng)設(shè)計(jì)最重要是為了運(yùn)營(yíng)，藍(lán)圖和文檔好比做作業(yè)打草稿、畫畫先描白，經(jīng)驗(yàn)豐富可以考慮先省下這步驟。因?yàn)槿绻槐憩F(xiàn)在具體web-based原型上，藍(lán)圖、文檔再好也無(wú)法快速切入開(kāi)發(fā)流程，做為有大局觀的Producer應(yīng)該盡快意識(shí)到這點(diǎn)。
UED團(tuán)隊(duì)合作與開(kāi)發(fā)流程優(yōu)化是以前在雅虎做產(chǎn)品同事寫的，雅虎團(tuán)隊(duì)的產(chǎn)品工程師們技術(shù)好，而且有來(lái)自美國(guó)團(tuán)隊(duì)的協(xié)作經(jīng)驗(yàn)傳承，做前端編程一直是他們的強(qiáng)項(xiàng)。但傳統(tǒng)瀑布模型進(jìn)程必然要面對(duì)“前松后緊”問(wèn)題，根源在于設(shè)計(jì)、技術(shù)團(tuán)隊(duì)要互相等。因此，如果規(guī)避必須從觀念上做出調(diào)整：快速產(chǎn)出、快速迭代，也就是軟件工程里的Agile and Iterative Development。
以前我也常抱怨做互聯(lián)網(wǎng)設(shè)計(jì)沒(méi)譜，一是資源緊、二是變化快。項(xiàng)目周期和人手似乎永遠(yuǎn)都無(wú)法滿足，來(lái)自內(nèi)部考慮不周、外部競(jìng)爭(zhēng)壓力雙方的需求變更頻繁。其實(shí)這就是互聯(lián)網(wǎng)設(shè)計(jì)的常態(tài)，接下來(lái)提到的方法，分為三個(gè)大步驟，版本僅供參考。
Alpha.快速完成核心功能開(kāi)發(fā)
這里“藍(lán)圖”只是個(gè)代名詞，也許只有些藍(lán)圖片段，或規(guī)劃片段。曾經(jīng)我們?cè)诶习遛k公室開(kāi)會(huì)，根據(jù)頭腦風(fēng)暴結(jié)果、會(huì)議記錄直接做原型。這么說(shuō)可能有點(diǎn)一覺(jué)回到解放前的感覺(jué)，事實(shí)如此，第一步很關(guān)鍵，但質(zhì)量不重要。
因?yàn)殚_(kāi)始就期望得到完善想法是不可能的。比如，你開(kāi)會(huì)描述個(gè)東西，讓同事提意見(jiàn)，可能大家什么都說(shuō)不出來(lái)。但只要你動(dòng)手做出具體原型，同事親自測(cè)試體驗(yàn)之后，意見(jiàn)噼里啪啦一大堆就來(lái)了。在這層意義上，絕大多數(shù)原型是炮灰也應(yīng)該。
最初工作用自己最熟悉、最快速的手法完成，別讓開(kāi)發(fā)團(tuán)隊(duì)等。當(dāng)然，這部分代碼質(zhì)量將直接影響以后的迭代工作量，根據(jù)時(shí)間靈活安排。不要考慮的過(guò)于復(fù)雜，總結(jié)起來(lái)有三點(diǎn)：
盡早用web原型評(píng)估設(shè)計(jì)質(zhì)量
制作避免過(guò)早陷入web結(jié)構(gòu)和表現(xiàn)細(xì)節(jié)
設(shè)計(jì)避免過(guò)早陷入功能細(xì)節(jié)
每個(gè)業(yè)務(wù)都會(huì)有核心功能，也就是用戶的核心需求，基本上做產(chǎn)品前都會(huì)考慮清楚�？赡芎诵墓δ軆�(nèi)還會(huì)有核心模塊，意思就是逐步提煉，找準(zhǔn)關(guān)鍵點(diǎn)下手，這樣才能搭好框架。也許經(jīng)過(guò)幾次迭代后，這部分工作已經(jīng)是個(gè)可以跑起來(lái)的低保真產(chǎn)品，頗具alpha版本規(guī)模。
Beta.迭代完成固化需求功能開(kāi)發(fā)
搭框架不要下手太狠，別自以為經(jīng)驗(yàn)豐富把盤子搞大。因?yàn)閯偛耪f(shuō)了，互聯(lián)網(wǎng)產(chǎn)品靈活最重要，雖然需求變化是經(jīng)常的事，但我們要把風(fēng)險(xiǎn)控制在最低點(diǎn)。接下來(lái)在已有框架內(nèi)，用同心圓放大的模式，按優(yōu)先級(jí)實(shí)現(xiàn)輔助功能迭代，直至需求固化。
與此同時(shí)，產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)除了對(duì)低保真原型的繼續(xù)支持，還應(yīng)并行完善和提煉高保真原型，并且著手對(duì)產(chǎn)品規(guī)范中復(fù)用模塊的持續(xù)化整理，主要分為三部分：
web呈現(xiàn)效果迭代。先做圖再切效率太低，因此我是直接用css美化低保真原型，通常這步可以把效果做的很得體。實(shí)在有必要，最后再截屏用photoshop處理細(xì)節(jié)并完善css。
web結(jié)構(gòu)和表現(xiàn)迭代。我自己可以完成html framework, css framework兩大塊。
web行為迭代。需要工程師協(xié)助完成javascript framework。
也就是說(shuō)，在包括beta版本以及之前，重中之重是實(shí)現(xiàn)功能需求層的良好用戶體驗(yàn)�？稍L問(wèn)性、兼容性、可用性、標(biāo)準(zhǔn)化、搜索引擎友好這些具體指標(biāo)不要過(guò)早引入到應(yīng)用開(kāi)發(fā)中，讓它們都在高保真原型的迭代內(nèi)準(zhǔn)備就緒。
比如可用性，做低保原型時(shí)盡量用最容易的方式解決問(wèn)題，不要過(guò)早追求“用戶體驗(yàn)”玩花樣。大量的js互動(dòng)效果和ajax異步加載會(huì)給原型維護(hù)、迭代測(cè)試帶來(lái)大麻煩。
再比如標(biāo)準(zhǔn)化，良好結(jié)構(gòu)的web頁(yè)面，很受應(yīng)用開(kāi)發(fā)工程師歡迎，樣式表則無(wú)傷大雅。因此我們可以多花功夫先處理html結(jié)構(gòu)，節(jié)省時(shí)間讓css樣式表與功能開(kāi)發(fā)并行迭代優(yōu)化。
Release.模塊化迭代提升用戶體驗(yàn)
至此如果一切順利的話，應(yīng)用程序已經(jīng)模塊化并測(cè)試通過(guò)，設(shè)計(jì)規(guī)范也已經(jīng)模塊化、并有針對(duì)性的給出了高保真原型界面標(biāo)準(zhǔn)。用戶體驗(yàn)的具體指標(biāo)，已經(jīng)在高保真原型的迭代中測(cè)試通過(guò)。
經(jīng)驗(yàn)豐富的Producer可能都了解，成熟網(wǎng)站真正模塊化后的內(nèi)容其實(shí)不多，無(wú)非頭、尾、導(dǎo)航、頁(yè)簽、表格、列表、搜索等等。傳統(tǒng)方法流程的沒(méi)有把操作體驗(yàn)與功能體驗(yàn)割裂開(kāi)來(lái)，以至于來(lái)回折騰，反復(fù)做了大量工作才讓產(chǎn)品模塊化。根據(jù)設(shè)計(jì)規(guī)范迭代提升用戶體驗(yàn)有兩步：
先處理界面視覺(jué)效果，比如分情況美化數(shù)據(jù)表格、文章列表等。
再處理界面交互效果，比如可以把某些跨頁(yè)流程改為層異步加載等。
永遠(yuǎn)記住不可能一步到位，花本錢的創(chuàng)意設(shè)計(jì)要用保守方案，用戶體驗(yàn)是奢侈的。對(duì)多數(shù)應(yīng)用開(kāi)發(fā)工程師來(lái)說(shuō)，使用樣式表控制表現(xiàn)是件神奇而時(shí)髦的事情。光禿禿的一個(gè)架子，加上css馬上就能風(fēng)光起來(lái)，并且還不影響已經(jīng)開(kāi)發(fā)出來(lái)的程序，有點(diǎn)不可思議。
其他
敏捷設(shè)計(jì)思路同樣來(lái)自前輩們總結(jié)過(guò)的軟件工程思想，只不過(guò)換在了設(shè)計(jì)支持角度。真正的敏捷設(shè)計(jì)必然與開(kāi)發(fā)綁在一起，只在產(chǎn)品階段的砍掉文檔、砍掉步驟、砍掉管理對(duì)全局影響不明顯。
對(duì)產(chǎn)品團(tuán)隊(duì)來(lái)說(shuō)，應(yīng)該不斷利用等待空閑調(diào)整規(guī)劃，用任務(wù)分解、故事板等專業(yè)手法出文檔優(yōu)化結(jié)構(gòu)。敏捷設(shè)計(jì)關(guān)鍵不在技術(shù)有多高深莫測(cè)，而是動(dòng)作要跟得上節(jié)奏，前后銜接得當(dāng)，才可能把時(shí)間一點(diǎn)點(diǎn)摳出來(lái)。不墨守陳規(guī)，把專業(yè)方法打散使用，融會(huì)貫通于每個(gè)思考點(diǎn)。
UCD翻譯小組的同學(xué)們已將Boxes and Arrows的這篇Prototyping with XHTML譯成中文，操作細(xì)節(jié)和心得很豐富，關(guān)于快速迭代總結(jié)的相當(dāng)好。類似方法我們也已實(shí)踐近兩年，并且主導(dǎo)執(zhí)行過(guò)兩款大型產(chǎn)品，核心思想超過(guò)90%重合，以上補(bǔ)充了部分本地化快速產(chǎn)出經(jīng)驗(yàn)。
原文說(shuō)“只需要花費(fèi)幾個(gè)小時(shí)，學(xué)習(xí)一下網(wǎng)上眾多的在線教程，你就可以立即開(kāi)始書寫xhtml�！笔聦�(shí)上即使計(jì)算機(jī)背景的同學(xué)，沒(méi)有兩三年功力，要實(shí)現(xiàn)兼顧前后的無(wú)縫協(xié)作都很困難，搞不好還會(huì)返工增加工作量。但長(zhǎng)遠(yuǎn)來(lái)看，這樣的訓(xùn)練很有意義，用web方式做web-based產(chǎn)品設(shè)計(jì)的優(yōu)勢(shì)將更垂直的專業(yè)、體系化發(fā)展。
Spend just a few hours following any of the innumerable online tutorials and you’ll be writing XHTML markup in no time.
團(tuán)隊(duì)成員越少，溝通效率越高；每人承擔(dān)越多，整體風(fēng)險(xiǎn)越低。這是行云流水的產(chǎn)品、技術(shù)并行迭代的優(yōu)勢(shì)體現(xiàn)�？傊�，除對(duì)瀑布模型進(jìn)程深刻認(rèn)識(shí)，方法流程得靠團(tuán)隊(duì)的內(nèi)力來(lái)推動(dòng)。
? 一葉千鳥（轉(zhuǎn)載請(qǐng)留原文鏈接）
粵公網(wǎng)安備 44010402000282號(hào)