交互設計流程圖

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

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

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

4、上叫程序流程圖）表達 是執(zhí)行邏輯的路徑，通俗地將是當用戶點擊某個按鈕之后，程序執(zhí)行命令的順序。更復雜的系統流程圖 可用于產品架構。當用戶點擊的登錄框之后，文字描述程序執(zhí)行的順序：檢查用戶名是否為空。如為空，提醒用戶 “請您輸入用戶名 ”。如果用戶名設置要輸入手機號碼，還要檢 查手機號碼是否是否以 13/15/18 開頭的 11 位數字。檢查密碼是否為空。如為空，提醒用戶 “請您輸入密碼 ”。 檢查用戶名是否是已用賬戶。程序提交數據與服務器數據進行比對。如果不是，提醒用戶 “用戶名不正 確”。疑問：用戶名有誤和不存在是如何判斷的 ?檢查密碼是否與賬戶匹配。如錯誤，提醒用戶 “密碼輸入不正確 ”。

5、現多數登錄框將 4 和 3 合并，只提醒 “用戶名或密碼不正確 ”，可能是告知用戶過于準確的信息之后會增 加盜號風險。臀扎護m；;胃，點1F甘沿5圖例2,wap站驗證用戶手機號碼應該怎么做呢?設計時，既應該關注讓任務流暢，又需要讓結構清晰。 如果你認同了這個觀點，那么，接下來的問題就是：下面介紹一個設計方法， 這是一個用于兼顧 為流程”與 為結構”的信息架構（IA ）的設計 方法。是2010年底，我和seven共同分析總結出來的。 在廣州的“2010年首屆中國交互設計 體驗日”中的工作坊上，我倆曾現場介紹過這個方法：通常我們會在設計開始階段分析出主要的用戶任務，然后逐一任務畫流程圖。 然后呢直

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

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

8、計方案中難以應用，那么，我們想辦法把流程圖的研究對象轉化成頁面就成了唄第二步：將流程圖轉換為頁面簡圖鶴交持搭配的真實人靭閽片完成作品開始 u F 丿選ib 待完成的作品特完成作品listd待完成作mdetailirm/" V搭配N是否己登錄ID：密碼：在咬藏中選擇Y收藏中是否在Q Q秀商城 、貢滿意赳/中搭配并收藏填寫描述等資料登錄在您的收猱中選ddd搭配說明ok I 不ok您兗成的1131 完成咸品list隨便看看pa轉換時，只要粗略想好每個頁面大致的設計就好了，比如：這是一個列表頁；這是一個登錄頁這些比頁面原型更為簡略的圖是為了后面搭建IA用的，所以異常簡略，你甚至可以只是給每個

9、頁面一個名字就夠了， 此時無需過多考慮每個頁面內的具體設計。給這些超簡略的圖起個名字：頁面簡圖。把它們組織起來，使其有序，這就是上面這些頁面簡圖就是這個產品要包含的主要頁面了, 第三步：設計信息架構觸秀登錄提交作品悠的items懸提交的dddddd慢完成的4*ddd鑄完咸柞品li st成品list選團片10：密碼:下V播記作島當逮''' ''-' -'' rIT H IT II If ti在逐的收茂中選菱配說明上T就'住W & N鼻N廳fl：匸（訓覽.上一完成“亮成的”“提交 対”餡內蓉晝都不 合尢大J所以合帥 了

10、一個頁面也可 址分岀兩個二級頁 叛0登錄完威作ndetail搭配dddd| dOk 不ok感品血詢I特搭配與惑品合対一個一簸欄目便 提供一個包含待搭配利已完咸的全制 items列責*在第三步中需要說明的幾個問題：?有些頁面是重復的，只保留一個就好；?保留頁面間跳轉的那些鏈接、按鈕，它們是任務流暢的保障；? IA的設計更側重于關注合內容邏輯，易學習性。通過這三步的設計方法， 產品的架構就搭建好了。 頁面簡圖中已經對每個頁面有了大致的設 計，現在完成了 IA，接下來就可以去細致的設計每個頁面了?？偨Y頁面簡圖法是一個信息架構的設計方法。這個方法通過頁面簡圖將流程圖翻譯為頁面和頁面間的跳轉關系，再組織

11、這些頁面，形成信息架構（IA ）。產品的最終包含的頁面是來自于第一步的一個個流程，并且在第二步、第三步中都一直保留著頁面間的跳轉，這些都保證了為流程而設計”。第三步是專門的設計IA，待組織的這些頁面是根據任務流程一串串的，類似選圖片”與 寫描述”一定是得歸在一堆兒的。IA的設計也會更有依據了。為結構而設計”也能做的更好了。頁面簡圖法的三個步驟， 每一步都是在設計， 流程該怎么設計？怎么翻譯成頁面簡圖？信息 架構如何組織？不同的設計者會給出不同的結果。設計方法只是給設計者提供一個更為靠譜兒的思路、框架，并不能代替設計者的頭腦。如果你嘗試著應用這個方法，可能會發(fā)現，在有些時候，這個方法顯得沒啥價值，比如，要設計一個圖形工具類的