交互設(shè)計流程圖

1、這幾天做IDEA下面是如何繪制流程圖的文章放在這里，并寫下自己的收獲，方便以后查閱。收獲如下：1、操作步驟是用戶正常情況下完成某項操作所需的操作，而交互流程圖（嚴格意義上叫程序流程圖）表達是執(zhí)行邏輯的路徑，通俗地將是當(dāng)用戶點擊某個按鈕之后，程序執(zhí)行命令的順序。2、在繪制流程圖的時候應(yīng)該和大致的頁面相互對應(yīng)起來，同步進行思考，保證設(shè)計每一個環(huán)節(jié)的緊密性，而不是最后頁面出來之后再繪制流程圖，或者再對照是否是按照流程來做的。學(xué)習(xí)產(chǎn)品設(shè)計初期肯定會遇到兩個問題：第一，如何考慮更全面；第二，如何繪制交互流程圖。開始產(chǎn)品設(shè)計前先要考慮所有可能性，如何才能以線性流程圖的方法組織所需的設(shè)計元素。小鄭老師的交互

2、設(shè)計表格中已經(jīng)介紹了非常實用的表格窮舉法，適合初學(xué)者使用。流程圖是產(chǎn)品經(jīng)理和交互設(shè)計都必須掌握的技能，一張流程圖可以省去需求文檔和交互設(shè)計文檔的很多文字描述，讓技術(shù)人員一目了然地明白設(shè)計意圖，便于組織程序的邏輯順序。繪制流程圖準從簡單的原則，流程圖是設(shè)計師的產(chǎn)出物，體現(xiàn)設(shè)計意圖，主要給技術(shù)人員和測試人員瀏覽，至于自己是如何思考不應(yīng)體現(xiàn)在流程圖中。別人也要早點回家被老婆，沒有時間關(guān)心你如何的細心的考慮，也不關(guān)心用戶會如何思考和操作的，請直接給他們展示設(shè)計的結(jié)果。復(fù)雜和糾結(jié)留給自己，簡單留給別人。對用戶是這樣，對工作同伴也是如此。圖例1：手機程序開機檢查更新的流程圖流程圖包括以下圖形：矩形表示交互

3、環(huán)節(jié)菱形表示問題判斷箭頭表示工作流方向也有用圓角矩形表示“開始”和“結(jié)束”，個人一般不要該圖形，因為從上而下的線性流程圖。最頂部的圖形或者箭頭開始的部分是流程圖的“開始”，如圖例中，開啟程序觸發(fā)了事件，程序開始檢查更新；最底部的圖形或者箭頭終止的部分是流程圖的“結(jié)束”，如重啟程序和不再提示表示本次事件結(jié)束，無須以圖形區(qū)分表示“開始”和“結(jié)束”。流程圖容易和操作步驟混淆，比如交互設(shè)計表格中的登錄框操作步驟是：點擊登錄，彈出登錄框點擊用戶名輸入框，輸入用戶名點擊密碼輸入框，輸入密碼點擊登錄操作步驟是用戶正常情況下完成某項操作所需的操作，而交互流程圖（嚴格意義上叫程序流程圖）表達是執(zhí)行邏輯的路徑，通

4、俗地將是當(dāng)用戶點擊某個按鈕之后，程序執(zhí)行命令的順序。更復(fù)雜的系統(tǒng)流程圖可用于產(chǎn)品架構(gòu)。當(dāng)用戶點擊的登錄框之后，文字描述程序執(zhí)行的順序：檢查用戶名是否為空。如為空，提醒用戶“請您輸入用戶名”。如果用戶名設(shè)置要輸入手機號碼，還要檢查手機號碼是否是否以13/15/18開頭的11位數(shù)字。檢查密碼是否為空。如為空，提醒用戶“請您輸入密碼”。檢查用戶名是否是已用賬戶。程序提交數(shù)據(jù)與服務(wù)器數(shù)據(jù)進行比對。如果不是，提醒用戶“用戶名不正確”。疑問：用戶名有誤和不存在是如何判斷的?檢查密碼是否與賬戶匹配。如錯誤，提醒用戶“密碼輸入不正確”?，F(xiàn)多數(shù)登錄框?qū)?和3合并，只提醒“用戶名或密碼不正確”，可能是告知用戶過于

5、準確的信息之后會增加盜號風(fēng)險。i丄占：j、*）：-i-+l丹朮譏訃i.-1毗眄門&看昵乍蠟鹽務(wù)燼世誰堆佶朝-箱扎風(fēng)7眄曰.h%圖例2,wap站驗證用戶手機號碼Aii-W，!1h赴*祁麗“設(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ù)畫流程圖。然后呢直接開

6、始畫信息架構(gòu)圖（IA圖）了，IA圖怎么畫呢？設(shè)計者憑空想象著畫，靠經(jīng)驗，靠見識。IA樹狀圖標明了主要頁面的組織形式，然后再逐一頁面的細致設(shè)計。之前畫的流程圖呢？似乎沒用到。流程圖是保證最終的產(chǎn)品能任務(wù)流暢的，如果能在IA的設(shè)計過程中切實用上流程圖，“為任務(wù)流暢”就能保障了。這里要介紹的就是一個將流程圖有效融合到IA設(shè)計過程中的設(shè)計方法一頁面簡圖法:第一步：畫流程圖結(jié)合一個實例來看：這是一個基于QQ秀商城的網(wǎng)站產(chǎn)品。起個名字叫：搭配秀。用戶A上傳一張真實人物圖片，展示在這個網(wǎng)站中。用戶B看到這張圖片后，照此搭配出一套QQ秀形象，與之匹配。搭配好的一對作品也會展示在網(wǎng)站中。我們先畫流程圖，首先總結(jié)

7、了這樣幾個用戶任務(wù)：提交待完成的真實人物照片；完成作品；隨便看看。三個任務(wù)的流程圖如下：登錄宦續(xù)測虬1i結(jié)束為什么流程圖沒有作用到IA設(shè)計過程中？最終的產(chǎn)品是一個個頁面的集合，IA是這些頁面的組織形式，IA圖上的每一個節(jié)點就是個頁面。流程圖的研究對象不是一個個頁面，而是一個個行為，所以，在IA的設(shè)計中不知該如何使用流程圖。有時候整個IA設(shè)計完成后，設(shè)計者們還能想起來當(dāng)初畫過流程圖，可能會翻出流程圖來,校驗一下設(shè)計出來的方案，看方案是否能讓這些任務(wù)順利。設(shè)計過程中并沒為流程而設(shè)計，事后的校驗要想有好結(jié)果，恐怕要靠好運氣了。腫么辦？因為流程圖的研究對象是行為而不是頁面，所以，在最終的基于頁面的產(chǎn)品

8、設(shè)計方案中難以應(yīng)用，那么，我們想辦法把流程圖的研究對象轉(zhuǎn)化成頁面就成了唄完咸作品磬配說圈琴完成作品listI長錄：iMEW#在燼的收璋中選|Ok|不ok上1步完成您完成的完成:iViVi*1IIIIB轉(zhuǎn)換時，只要粗略想好每個頁面大致的設(shè)計就好了，比如：這是一個列表頁；這是一個登錄頁這些比頁面原型更為簡略的圖是為了后面搭建IA用的，所以異常簡略，你甚至可以只是給每個頁面一個名字就夠了，此時無需過多考慮每個頁面內(nèi)的具體設(shè)計。給這些超簡略的圖起個名字：頁面簡圖。上面這些頁面簡圖就是這個產(chǎn)品要包含的主要頁面了，把它們組織起來，使其有序，這就是第三步：設(shè)計信息架構(gòu)搭配秀您的提交作品登錄items您提交的

9、選圖片壹錄禱完成作品list成品list瀏覽密碼：登錄上一歩完成鶯護成作品dRtnilA.VA1A1-V#lWj咸品detail在悠的收聲中選#mwJJJ燈完成的總結(jié)頁面簡圖法是一個信息架構(gòu)的設(shè)計方法。這個方法通過頁面簡圖將流程圖翻譯為頁面和頁面間的跳轉(zhuǎn)關(guān)系，再組織這些頁面，形成信息架構(gòu)（IA）。產(chǎn)品的最終包含的頁面是來自于第一步的一個個流程，并且在第二步、第三步中都一直保留著頁面間的跳轉(zhuǎn)，這些都保證了“為流程而設(shè)計”。第三步是專門的設(shè)計IA,待組織的這些頁面是根據(jù)任務(wù)流程一串串的，類似“選圖片”與“寫描述”一定是得歸在一堆兒的。IA的設(shè)計也會更有依據(jù)了?！盀榻Y(jié)構(gòu)而設(shè)計”也能做的更好了。頁面簡圖法的三個步驟，每一步都是在設(shè)計，流程該怎么設(shè)計？怎么翻譯成頁面簡圖？信息架構(gòu)如何組織？不同的設(shè)計者會給出不同的結(jié)果。設(shè)計方法只是給設(shè)計者提供一個更為靠譜兒的思路、框架，并不能代替設(shè)計者的頭腦。如果你嘗試著應(yīng)用這個方法，可能會發(fā)現(xiàn)，在有些時候，這個方法顯得沒啥價值，比如，要設(shè)計一個圖形工具類的產(chǎn)品，靠經(jīng)驗就能判斷出顯然只有一個主界面，各