信息架構(gòu)：如何將流程圖轉(zhuǎn)化為頁(yè)面？

關(guān)于“為任務(wù)而設(shè)計(jì)”和“為結(jié)構(gòu)而設(shè)計(jì)”的問(wèn)題，之前曾經(jīng)反復(fù)闡述過(guò)，假如你沒印象了，可以先看下：《設(shè)計(jì)原則VS實(shí)際情況》和《為產(chǎn)品結(jié)構(gòu)的設(shè)計(jì)，為用戶任務(wù)的設(shè)計(jì)》?！霸O(shè)計(jì)時(shí)，既應(yīng)當(dāng)關(guān)注讓任務(wù)流暢，又需要讓結(jié)構(gòu)清楚?！奔偃缒阏J(rèn)同了這個(gè)觀點(diǎn)，那么，接下來(lái)的問(wèn)題就是：應(yīng)當(dāng)怎么做呢?下面介紹一個(gè)設(shè)計(jì)方法，這是一個(gè)用于兼顧“為流程”與“為結(jié)構(gòu)”的信息架構(gòu)(IA)的設(shè)計(jì)方法。是2023年終，我和seven共同分析總結(jié)出來(lái)的。在廣州的“2023年首屆中國(guó)交互設(shè)計(jì)體驗(yàn)日”中的工作坊上，我倆曾現(xiàn)場(chǎng)介紹過(guò)這個(gè)方法：通常我們會(huì)在設(shè)計(jì)開始階段分析出重要的用戶任務(wù)，然后逐個(gè)任務(wù)畫流程圖。然后呢…直接開始畫信息架構(gòu)圖(IA圖)了，IA圖怎么畫呢?設(shè)計(jì)者憑空想象著畫，靠經(jīng)驗(yàn)，靠見識(shí)。IA樹狀圖標(biāo)明了重要頁(yè)面的組織形式，然后再逐個(gè)頁(yè)面的細(xì)致設(shè)計(jì)。之前畫的流程圖呢?似乎沒用到。流程圖是保證最終的產(chǎn)品能任務(wù)流暢的，假如能在IA的設(shè)計(jì)過(guò)程中切實(shí)用上流程圖，“為任務(wù)流暢”就能保障了。這里要介紹的就是一個(gè)將流程圖有效融合到IA設(shè)計(jì)過(guò)程中的設(shè)計(jì)方法—頁(yè)面簡(jiǎn)圖法：第一步：畫流程圖結(jié)合一個(gè)實(shí)例來(lái)看：這是一個(gè)基于QQ秀商城的網(wǎng)站產(chǎn)品。起個(gè)名字叫：搭配秀。用戶A上傳一張真實(shí)人物圖片，展示在這個(gè)網(wǎng)站中。用戶B看到這張圖片后，照此搭配出一套QQ秀形象，與之匹配。搭配好的一對(duì)作品也會(huì)展示在網(wǎng)站中。我們先畫流程圖，一方面總結(jié)了這樣幾個(gè)用戶任務(wù)：提交待完畢的真實(shí)人物照片;完畢作品;隨便看看。三個(gè)任務(wù)的流程圖如下：為什么流程圖沒有作用到IA設(shè)計(jì)過(guò)程中?最終的產(chǎn)品是一個(gè)個(gè)頁(yè)面的集合，IA是這些頁(yè)面的組織形式，IA圖上的每一個(gè)節(jié)點(diǎn)就是一個(gè)頁(yè)面。流程圖的研究對(duì)象不是一個(gè)個(gè)頁(yè)面，而是一個(gè)個(gè)行為，所以，在IA的設(shè)計(jì)中不知該如何使用流程圖。有時(shí)候整個(gè)IA設(shè)計(jì)完畢后，設(shè)計(jì)者們還能想起來(lái)當(dāng)初畫過(guò)流程圖，也許會(huì)翻出流程圖來(lái)，校驗(yàn)一下設(shè)計(jì)出來(lái)的方案，看方案是否能讓這些任務(wù)順利。設(shè)計(jì)過(guò)程中并沒為流程而設(shè)計(jì)，事后的校驗(yàn)要想有好結(jié)果，恐怕要靠好運(yùn)氣了。腫么辦?由于流程圖的研究對(duì)象是行為而不是頁(yè)面，所以，在最終的基于頁(yè)面的產(chǎn)品設(shè)計(jì)方案中難以應(yīng)用，那么，我們想辦法把流程圖的研究對(duì)象轉(zhuǎn)化成頁(yè)面就成了唄~第二步：將流程圖轉(zhuǎn)換為頁(yè)面簡(jiǎn)圖轉(zhuǎn)換時(shí)，只要粗略想好每個(gè)頁(yè)面大體的設(shè)計(jì)就好了，比如：這是一個(gè)列表頁(yè);這是一個(gè)登錄頁(yè)…這些比頁(yè)面原型更為簡(jiǎn)略的圖是為了后面搭建IA用的，所以異常簡(jiǎn)略，你甚至可以只是給每個(gè)頁(yè)面一個(gè)名字就夠了，此時(shí)無(wú)需過(guò)多考慮每個(gè)頁(yè)面內(nèi)的具體設(shè)計(jì)。給這些超簡(jiǎn)略的圖起個(gè)名字：頁(yè)面簡(jiǎn)圖。上面這些頁(yè)面簡(jiǎn)圖就是這個(gè)產(chǎn)品要包含的重要頁(yè)面了，把它們組織起來(lái)，使其有序，這就是第三步：設(shè)計(jì)信息架構(gòu)在第三步中需要說(shuō)明的幾個(gè)問(wèn)題：?有些頁(yè)面是反復(fù)的，只保存一個(gè)就好;?保存頁(yè)面間跳轉(zhuǎn)的那些鏈接、按鈕，它們是任務(wù)流暢的保障;?IA的設(shè)計(jì)更側(cè)重于關(guān)注合內(nèi)容邏輯，易學(xué)習(xí)性。通過(guò)這三步的設(shè)計(jì)方法，產(chǎn)品的架構(gòu)就搭建好了。頁(yè)面簡(jiǎn)圖中已經(jīng)對(duì)每個(gè)頁(yè)面有了大體的設(shè)計(jì)，現(xiàn)在完畢了IA，接下來(lái)就可以去細(xì)致的設(shè)計(jì)每個(gè)頁(yè)面了?？偨Y(jié)頁(yè)面簡(jiǎn)圖法是一個(gè)信息架構(gòu)的設(shè)計(jì)方法。這個(gè)方法通過(guò)頁(yè)面簡(jiǎn)圖將流程圖翻譯為頁(yè)面和頁(yè)面間的跳轉(zhuǎn)關(guān)系，再組織這些頁(yè)面，形成信息架構(gòu)(IA)。產(chǎn)品的最終包含的頁(yè)面是來(lái)自于第一步的一個(gè)個(gè)流程，并且在第二步、第三步中都一直保存著頁(yè)面間的跳轉(zhuǎn)，這些都保證了“為流程而設(shè)計(jì)”。第三步是專門的設(shè)計(jì)IA，待組織的這些頁(yè)面是根據(jù)任務(wù)流程一串串的，類似“選圖片”與“寫描述”一定是得歸在一堆兒的。IA的設(shè)計(jì)也會(huì)更有依據(jù)了?！盀榻Y(jié)構(gòu)而設(shè)計(jì)”也能做的更好了。頁(yè)面簡(jiǎn)圖法的三個(gè)環(huán)節(jié)，每一步都是在設(shè)計(jì)，流程該怎么設(shè)計(jì)?怎么翻譯成頁(yè)面簡(jiǎn)圖?信息架構(gòu)如何組織?不同的設(shè)計(jì)者會(huì)給出不同的結(jié)果。設(shè)計(jì)方法只是給設(shè)計(jì)者提供一個(gè)更為靠譜兒的思緒、框架，并不能代替設(shè)計(jì)者的頭腦。假如你嘗試著應(yīng)用這個(gè)方法，也許會(huì)發(fā)現(xiàn)，在有些時(shí)候，這個(gè)方法顯得沒啥價(jià)值，比如，要設(shè)計(jì)一個(gè)圖形工具類的產(chǎn)品，靠經(jīng)驗(yàn)就能判斷出顯然只有一個(gè)主界面，各種流程都是圍繞著這個(gè)主界面展開的，第二步翻譯出來(lái)的頁(yè)面簡(jiǎn)圖會(huì)都比較接近，而第三步更是沒啥干的，而即使不用這個(gè)方法