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 之天下武功出少林