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

信息架構(gòu)如何將流程圖轉(zhuǎn)化為頁面關(guān)于“為任務(wù)而設(shè)計”和“為結(jié)構(gòu)而設(shè)計”的咨詢題，之前曾經(jīng)反復(fù)闡述過，假如你沒印象了，能夠先看下：《設(shè)計原則VS實際情形》和《為產(chǎn)品結(jié)構(gòu)的設(shè)計，為用戶任務(wù)的設(shè)計》?！霸O(shè)計時，既應(yīng)該關(guān)注讓任務(wù)流暢，又需要讓結(jié)構(gòu)清晰?！奔偃缒阏J(rèn)同了那個觀點，那么，接下來的咨詢題確實是：應(yīng)該如何做呢?下面介紹一個設(shè)計方法，這是一個用于兼顧“為流程”與“為結(jié)構(gòu)”的信息架構(gòu)(IA)的設(shè)計方法。是2018年底，我和seven共同分析總結(jié)出來的。在廣州的“2018年首屆中國交互設(shè)計體驗日”中的工作坊上，我倆曾現(xiàn)場介紹過那個方法：通常我們會在設(shè)計開始時期分析出要緊的用戶任務(wù)，然后逐一任務(wù)畫流程圖。然后呢…直截了當(dāng)開始畫信息架構(gòu)圖(IA圖)了，IA圖如何畫呢?設(shè)計者憑空想象著畫，靠體會，靠知識。IA樹狀圖標(biāo)明了要緊頁面的組織形式，然后再逐一頁面的細(xì)致設(shè)計。之前畫的流程圖呢?看起來沒用到。流程圖是保證最終的產(chǎn)品能任務(wù)流暢的，假如能在IA的設(shè)計過程中切有用上流程圖，“為任務(wù)流暢”就能保證了。那個地點要介紹的確實是一個將流程圖有效融合到IA設(shè)計過程中的設(shè)計方法—頁面簡圖法：結(jié)合一個實例來看：這是一個基于QQ秀商城的網(wǎng)站產(chǎn)品。起個名字叫：搭配秀。用戶A上傳一張真實人物圖片，展現(xiàn)在那個網(wǎng)站中。用戶B看到這張圖片后，照此搭配出一套QQ秀形象，與之匹配。搭配好的一對作品也會展現(xiàn)在網(wǎng)站中。我們先畫流程圖，第一總結(jié)了如此幾個用戶任務(wù)：提交待完成的真實人物照片;完成作品;隨便看看。三個任務(wù)的流程圖如下：什么緣故流程圖沒有作用到IA設(shè)計過程中？最終的產(chǎn)品是一個個頁面的集合，IA是這些頁面的組織形式，IA圖上的每一個節(jié)點確實是一個頁面。流程圖的研究對象不是一個個頁面，而是一個個行為，因此，在IA的設(shè)計中不知該如何使用流程圖。有時候整個IA設(shè)計完成后，設(shè)計者們還能想起來起初畫過流程圖，可能會翻出流程圖來，校驗一下設(shè)計出來的方案，看方案是否能讓這些任務(wù)順利。設(shè)計過程中并沒為流程而設(shè)計，事后的校驗要想有好結(jié)果，可能要靠好運氣了。腫么辦?因為流程圖的研究對象是行為而不是頁面，因此，在最終的基于頁面的產(chǎn)品設(shè)計方案中難以應(yīng)用，那么，我們想方法把流程圖的研究對象轉(zhuǎn)化成頁面就成了唄~第二步：將流程圖轉(zhuǎn)換為頁面簡圖

轉(zhuǎn)換時，只要粗略想好每個頁面大致的設(shè)計就好了，比如：這是一個列表頁;這是一個登錄頁…這些比頁面原型更為簡略的圖是為了后面搭建IA用的，因此專門簡略，你甚至能夠只是給每個頁面一個名字就夠了，現(xiàn)在無需過多考慮每個頁面內(nèi)的具體設(shè)計。給這些超簡略的圖起個名字：頁面簡圖。上面這些頁面簡圖確實是那個產(chǎn)品要包含的要緊頁面了，把它們組織起來，使其有序，這確實是第三步：設(shè)計信息架構(gòu)

在第三步中需要講明的幾個咨詢題：有些頁面是重復(fù)的，只保留一個就好;保留頁面間跳轉(zhuǎn)的那些鏈接、按鈕，它們是任務(wù)流暢的保證;IA的設(shè)計更側(cè)重于關(guān)注合內(nèi)容邏輯，易學(xué)習(xí)性。通過這三步的設(shè)計方法，產(chǎn)品的架構(gòu)就搭建好了。頁面簡圖中差不多對每個頁面有了大致的設(shè)計，現(xiàn)在完成了球，接下來就能夠去細(xì)致的設(shè)計每個頁面了?？偨Y(jié)頁面簡圖法是一個信息架構(gòu)的設(shè)計方法。那個方法通過頁面簡圖將流程圖翻譯為頁面和頁面間的跳轉(zhuǎn)關(guān)系，再組織這些頁面，形成信息架構(gòu)(IA)。第三步是專門的設(shè)計IA,待組織的這些頁面是依照任務(wù)流程一串串的，類似“選圖片”與“寫描述”一定是得歸在一堆兒的。IA的設(shè)計也會更有依據(jù)了?！盀榻Y(jié)構(gòu)而設(shè)計”也能做的更好了。頁面簡圖法的三個步驟，每一步差不多上在設(shè)計，流程該如何設(shè)計?如何翻譯成頁面簡圖?信息架構(gòu)如何組織?不同的設(shè)計者會給出不同的結(jié)果。設(shè)計方法只是給設(shè)計者提供一個更為靠譜兒的思路、框架，并不能代替設(shè)計者的頭腦。假如你嘗試著應(yīng)用那個方法，可能會發(fā)覺，在有些時候，那個方法顯得沒啥價值，比如，要設(shè)計一個圖形工具類的產(chǎn)品，靠體會就能判定出明顯只有一個主界面，各種流程差不多上圍繞著那個主界面展開的，第二步翻譯出來的頁面簡圖會都比較接近，而第三步更是沒啥干的，而即使不用那個方法，之前就差不多能判定