關(guān)于“為任務(wù)而設(shè)計”和“為結(jié)構(gòu)而設(shè)計”的問題，之前曾經(jīng)反復(fù)闡述過，如果你沒印象了，可以先看下：《設(shè)計原則VS實際情況》和《為產(chǎn)品結(jié)構(gòu)的設(shè)計，為用戶任務(wù)的設(shè)計》。

“設(shè)計時，既應(yīng)該關(guān)注讓任務(wù)流暢，又需要讓結(jié)構(gòu)清晰。”

如果你認同了這個觀點，那么，接下來的問題就是：應(yīng)該怎么做呢？

下面介紹一個設(shè)計方法，這是一個用于兼顧“為流程”與“為結(jié)構(gòu)”的信息架構(gòu)（IA）的設(shè)計方法。是2010年底，我和seven共同分析總結(jié)出來的。在廣州的“2010年首屆中國交互設(shè)計體驗日”中的工作坊上，我倆曾現(xiàn)場介紹過這個方法：

通常我們會在設(shè)計開始階段分析出主要的用戶任務(wù)，然后逐一任務(wù)畫流程圖。然后呢…直接開始畫信息架構(gòu)圖（IA圖）了，IA圖怎么畫呢？設(shè)計者憑空想象著畫，靠經(jīng)驗，靠見識。IA樹狀圖標(biāo)明了主要頁面的組織形式，然后再逐一頁面的細致設(shè)計。之前畫的流程圖呢？似乎沒用到。

流程圖是保證最終的產(chǎn)品能任務(wù)流暢的，如果能在IA的設(shè)計過程中切實用上流程圖，“為任務(wù)流暢”就能保障了。

這里要介紹的就是一個將流程圖有效融合到IA設(shè)計過程中的設(shè)計方法—頁面簡圖法：

第一步：畫流程圖

結(jié)合一個實例來看：這是一個基于QQ秀商城的網(wǎng)站產(chǎn)品。起個名字叫：搭配秀。用戶A上傳一張真實人物圖片，展示在這個網(wǎng)站中。用戶B看到這張圖片后，照此搭配出一套QQ秀形象，與之匹配。搭配好的一對作品也會展示在網(wǎng)站中。

我們先畫流程圖，首先總結(jié)了這樣幾個用戶任務(wù)：提交待完成的真實人物照片；完成作品；隨便看看。三個任務(wù)的流程圖如下：

為什么流程圖沒有作用到IA設(shè)計過程中？

最終的產(chǎn)品是一個個頁面的集合，IA是這些頁面的組織形式，IA圖上的每一個節(jié)點就是一個頁面。流程圖的研究對象不是一個個頁面，而是一個個行為，所以，在IA的設(shè)計中不知該如何使用流程圖。

有時候整個IA設(shè)計完成后，設(shè)計者們還能想起來當(dāng)初畫過流程圖，可能會翻出流程圖來，校驗一下設(shè)計出來的方案，看方案是否能讓這些任務(wù)順利。設(shè)計過程中并沒為流程而設(shè)計，事后的校驗要想有好結(jié)果，恐怕要靠好運氣了。

腫么辦？

因為流程圖的研究對象是行為而不是頁面，所以，在最終的基于頁面的產(chǎn)品設(shè)計方案中難以應(yīng)用，那么，我們想辦法把流程圖的研究對象轉(zhuǎn)化成頁面就成了唄~

第二步：將流程圖轉(zhuǎn)換為頁面簡圖

轉(zhuǎn)換時，只要粗略想好每個頁面大致的設(shè)計就好了，比如：這是一個列表頁；這是一個登錄頁…

這些比頁面原型更為簡略的圖是為了后面搭建IA用的，所以異常簡略，你甚至可以只是給每個頁面一個名字就夠了，此時無需過多考慮每個頁面內(nèi)的具體設(shè)計。給這些超簡略的圖起個名字：頁面簡圖。

上面這些頁面簡圖就是這個產(chǎn)品要包含的主要頁面了，把它們組織起來，使其有序。

標(biāo)簽： 設(shè)計原則 產(chǎn)品結(jié)構(gòu)設(shè)計 IA設(shè)計 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。