Functional Map > UI Flow > Wireframe > Mockup > Prototype 之間的差異

Written in 2014.

Functional Map > UI Flow > Wireframe > Mockup > Prototype 是產品開發的流程。

鑑於自己搞不懂，所以彙整一下提及相關的文章。

Functional Map & UI Flow

更詳情可參考此篇：初學者的 UI Flow ，裡面有舉實例比較兩者差異。

就我個人這樣看來，Functional Map比較像是架構圖，就是整合整個應用程式要有的功能，並且區分出簡單的層級。

好比說做一個美食地圖APP裡面得要有google map然後還要連結鄰近餐廳以及餐廳的相關資料（地點、菜單、營業時間、評價等等）

關於內容的發想可以用卡片分類法的方式進行（詳見請點這）

而 UI Flow 則是更進一步的將 Functional map 的東西直接轉化成使用者使用時會看到的介面流程，好比說點入美食地圖 APP，先跳出兩個框框，一個是直接看地圖、另一個是看鄰近餐廳列表，再移往下個介面，值得注意的是最後他們還是會殊途同歸，會到餐廳資訊頁面，不過依照使用者需求不同而殊途。

這種就是 UI Flow。

UI Flow 可以說非常重要，因為他架構整個介面使用流程，因此後面的Wireframe、Mockup、Prototype都會依照他的變化而變。

Functional Map 跟 UI Flow 佔有非常重要的地位，之後的介面內容必須看 Map，而 UI Flow 則能確認操作動線，在製作往後的東西時，兩個得同時開啟確認自己的線框圖、視覺稿及原型與其並無二致。

Wireframe & Mockup & Prototype

詳細的例子可參考：WIREFRAME, MOCKUP AND PROTOTYPE
線框圖(Wireframe) 跟樣張(Mockup)跟原型(Prototype)有什麼不同？
什麼是Wireframe?
初學者的Mockup

有看到幾篇文章對於 Mockup 和 Prototype前後順序相反的情形，不過不管如何這兩個一定是在Wireframe後面，作業流程就看自己習慣情形。

首先 Wireframe 是設計的骨幹，將點子實體化的步驟，在這個過程，只需要標示出整個區塊以及相對比例，該使用什麼顏色、字體等等都是後續的步驟。主要包含元素為：

1. 內容的主要分類項目
2. 資訊的架構
3. 使用者介面互動的描述
4. 簡化視覺(黑、白、灰為主)
5. 細節部分用使用佔位符號(placeholders)－交叉畫線的矩形圖形

Mockup 則是將 Wireframe 更加視覺化，會考慮顏色字體等視覺呈現。而 Prototype 則加入 HTML、CSS 甚至一些 JavaScript，已是高度擬真，
可以模擬互動等。

總結就是：

• 線框圖(Wireframe)=空白的網頁框架
• 樣張(Mockup)=空白的網頁框架加上彩繪
• 原型(Prototype)=空白的網頁框架加上彩繪再加上動態效果

關於這幾個的差別大略整理成這樣，另外再附上兩篇談UXD的工作內容，
可以說做的事情簡直包山包海xd 但也是因為是個很全能、但又頗專業的職業
（雖然並非是絕對存在的必要，因為有些工作具備這樣的特質，
但可以說它算是一種整合式的工作）

不小心又說太多了哈哈，等下次再談這件事情吧！
來看文章：使用者經驗藏寶圖 UI/UX 之天下武功出少林