讀者來信：UI 設計流程

UI設計流程:Wireframe->低保真Prototyple->Mockup->高保真Prototyple ... 會把上述流程拆的更細，還會做使用者研究之類；一人UI/UX 通包的小型團隊… 嫁給RD的UIDesignerAkaneLeeUIDesignerTaipei,Taiwan uiux.akane Tweetsby@akane_lee收到一封Mail，其中提到幾個關於設計流程和Prototype的問題。

UI設計流程:Wireframe->低保真Prototyple->Mockup->高保真Prototyple 這樣的流程是對的嗎?根據上過課的學員回應、以及自身經驗，目前業界的情況大多是UI設計師收到「開工啦」的通知，然後就從Wireframe開始下手。

使用者怎麼操作、有哪些功能、使用者和客戶的需求是什麼往往靠PM簡單口述。

Wireframe為什麼會長這樣？在Wireframe之前還有哪些事要做？全部都靠通靈。

所以執行專案期間都在改來改去，撐到最後一天總是可以結案就解脫了嘛，再開始下個改來改去的輪迴。

開發流程基本上我自己在開發產品的流程大致上不會脫離這張圖太遠。

UserStoryFunctionalMapFlowChartUIFlowWireframeMockupPrototype使用者要什麼？>從需求中整理出功能>使用者怎麼操作這些功能？>操作的過程需要哪些頁面？>頁面要放什麼內容/元件？怎麼被操作？>使用者看到的頁面長什麼樣子？各家有各家的作法，沒有標準或正確一定要這樣做的流程，但我在做自己的玩具時都會這樣幹。

有UX團隊的大公司會把上述流程拆的更細，還會做使用者研究之類；一人UI/UX通包的小型團隊…這7項是最低一定要產出的文件，依個人想偷懶的慘痛經驗，再刪除精簡化就會在執行專案的過程中漏東漏西，之後補洞反而花更多時間和心力。

1.UserStory功能怎麼來的？從「使用者要什麼」或「客戶預期使用者想要什麼」開始。

依使用者的身份不同，想要的功能也會不同，完成的任務不一樣嘛。

比如「Blog」：我是讀者，我要看到這位作者寫的所有文章。

我是作者，我要撰寫並發佈文章。

我是平台提供商，我要看到所有會員身份和繳費狀態。

這三種身份對「Blog」這項產品的需求和預期完全不同。

2.FunctionalMap寫了UserStory，才會知道有哪些大小功能要做。

針對不同使用者的需求，從故事中挑出功能。

使用者的身份不同往往影響他們能使用的功能，整理歸納出共通和差異處。

3.FlowChart當開發者知道使用者想要什麼、也有了功能，才有辦法思考「使用者怎麼操作功能完成他的任務或達到目的」。

UI設計師常說：「配合使用者的習慣與行為來設計操作流程」。

就是在這一階段規劃。

如果跳過FlowChart，只要產品功能複雜起來，你家的RD就會抱著頭哀嚎了。

4.UIFlow知道使用者會怎麼操作一項功能時，才有辦法規劃操作動線。

UIFlow指的是頁面與頁面之間的操作流程，使用者想完成任務會經過多少頁面之類。

有另一位讀者傳訊問道，為什麼我之前的文章說不要用圖片版的UIFlow、要用文字版的呢？首先，這是雞生蛋蛋生雞的問題。

如果這個專案從零開始，把FlowChart規劃完後接著做UIFlow，這時候哪來的圖片版可以串Flow？連Wireframe都還沒開始畫哩！第二，當你的產品頁面一多的時候…也不用太多，20頁，用圖片串出一個UIFlow，這個Flow圖表尺寸有多大張？誰有那個心力在一張大圖上用手掌工具來回移動看頁面走向？第三，很多人做圖片版的UIFlow時，線條連接的是「頁面」和「頁面」，這時候你也只知道「喔～這一頁的下一頁會到這裡」，但你完全不會知道為什麼會到這一頁。

要點哪裡、或是發生什麼事所以跑到這裡來？猜猜看啊～要靠猜猜看才會看懂的文件看它（寫它）幹嘛？不要浪費時間啊。

文字版的UIFlow我拿來當「目錄」用，對照Wireframe的編號，找圖看細節的時候快。

圖片版的UIFlow我會用在「優化」舊產品的操作時使用，連接線會從「元件到頁面」，而不是「頁面到頁面」，並在圖片和線條旁邊寫上文字說明，才會知道哪個步驟可以省略或修改得更易於使用。

5.Wireframe有畫Wireframe不代表工程師就看得懂這要幹嘛，光看臉皺成一團的表情你也不知道他是踢到腳指還是吃到酸梅。

文字說明才是Wireframe的重點，包含觸發、回饋、狀態變化等等。

一開網頁就自動出現廣告、還是開啟網頁後等個3秒才出現廣告？ 廣告出現10秒自動消失，還是要按(X)按鈕？ 網頁停止30秒沒有操作要不要出現廣告？工程師只會照你寫的去做、不會照你想的去做。

工程師不是神也不是蛔蟲，他們是一般人，沒有他心通這種神力，溝通上肯定會有認知落差，所以話要講清楚，設計師的常識不等於工程師的知識。

FlowChart、UIFlow、Wireframe這三份文件寫到一半發現什麼東西漏掉回頭補上是正常現象，不可能一次到位。

6.Mockup視覺稿…照Grid和Guideline做吧，之後還有切圖和標示文件要弄。

好處是切圖和標示文件都有外掛工具可以代勞，甚至設計師只要顧好原始檔、切圖和標示文件都用Avocode或Zeplin解決。

壞處是，如果不太知道技術限制，做出來的東西工程師不能用就算了，他們還白挨設計師的罵。

「為什麼你做出來的東西和我畫的差了幾px？」 「拜託！RWD不可能完全和你畫的一模一樣好不好？」 「是你能力不夠還是偷懶？我的圖畫得出來為什麼你做不出來？」 「幹…」7.Prototype那位讀者問另外問了關於Prototype的問題：高保真Prototyple是在切圖給RD之後製作，那做出來的用意是在RD程式還沒完成前再次確定操作上有無任何問題嗎? 那高保真Prototyple就是跟成品長的一樣還可以操作囉??做Prototype的目的通常是測試和驗證，不管是給使用者操作看看、觀察使用者操作狀況做使用者測試；還是工程師套完程式上線前先測看看有沒有蟲或哪邊爆炸了。

所以它一定要可以被操作，不能被實際操作是要怎麼測試？腦內補完？Prototype要可以被操作！ Prototype要可以被操作！ Prototype要可以被操作！不能被操作的都不是Prototype。

Wireframe可以做Prototype，低保真原型。

Mockup可以做Prototype，高保真原型。

切圖叫工程師寫程式套版做一個，高保真原型。

我自己大多做完Mockup後才會出Prototype測試。

因為，Wireframe做的低保真原型一般使用者看不懂也沒感覺，沒辦法做使用者測試=_=Wireframe做的Prototype頂多內部測試吧，但內部測試常常不太准，工程師和設計師的思維和一般人不一樣，測一測重點常常歪掉…補充說明另一位讀者看了本文後若有所感，傳訊跟我討論了下。

今天也和老闆談了是否要有FunctionalMap和UIFlow等等這些流程，讓我們在前面討論的時候就可以釐清，而不是在視覺稿才修改增減，他也直言我們沒有那麼多時間無法照這樣流程，真的很無力…沒有那麼多時間無法照這樣流程？當然啊，因為要把時間留在後面改來改去嘛～～～～～時間總是要花的，看是花在前期規劃還是後期補洞而已。

說沒時間無法照流程的是根本沒流程可以照吧。

想逼走員工、降低團隊士氣，盡量亂改沒關係，反正大家都知道亂改的那個人連自己要什麼都不知道只好胡亂張嘴下指令。

以下是廣告宣傳如果你對上述UI設計流程有興趣，我會在課堂上詳細講解，並帶學員完整跑一遍流程，實際動手寫課堂練習。

歡迎公司派人來受訓。

課堂上會講到不少專案流程和團隊合作的技巧，絕對可以感受到來上課的同事脫胎換骨突然升了好幾個等級似的（喂）。

更詳細的課程資訊請見Madders-KKTIXOlder»關於媽祖繞境«NewerUI設計師看AutoLayout commentspoweredbyDisqus最新課程資訊台北5月UX課CategoriesPodcast 4UI雜談 64UX相關 28Youtube 6個人經驗 51好書推薦 28爬舊文有風險 11設計思考 1課程講座 31軟體與操作 53遊記 15開發流程 38Tagcloud3D adobe Android App CLIPSTUDIOPAINT CX FlowChart FunctionalMap GrowthHack Guideline HTML HTML,CSS Illustrator iOS iPhone MacOS MagicaVoxel Mockup Photoshop Podcast Prototype Rails RWD StarWars TOOL Tutorial UI UIFlow UI和RD UI雜談 UX UX相關 Wireframe 作品集 個人經驗 公司營運 切圖 初學者 加拿大 動態效果 半途而廢 台灣 吃貨 好書推薦 工作職責 我的生活 手繪 拆解UI 接案 文具 日本 書單 服務設計 標示文件 歐洲 泰國 研究方法 簡歷 設計思考 課程 遊戲 開發流程 面試 香港