iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
1
自我挑戰組

UI 設計入門:SEO 尬網路行銷系列 第 3

【Day 03】設計流程 (二):Functional Map 功能地圖

正式進入繪製之前的四個階段:
IA 資訊架構 -> Functional Map 功能地圖 -> Logic Flow 邏輯流程 -> Wireframe 線框圖稿

本篇重點

  1. 功能地圖是什麼 ?
  2. 使用者故事和功能地圖的關係

功能地圖是什麼 ?

功能地圖 Functional Map 是將使用者需求變成功能規格圖表的方法。主要用於與開發人員確認功能,通常以心智圖方式呈現。

使用者故事和功能地圖的關係

在 IA 資訊架構的階段,了解使用者是誰、需要什麼;釐清產品的脈絡、定義功能;資訊組織、分類與關聯。
接下來透過使用者故事 ( User Story ),歸納出功能地圖 ( Functional Map )

範例:以電商類型網站的使用者故事對照

https://ithelp.ithome.com.tw/upload/images/20200921/20130402g5AJ5kr1rG.png

範例:歸納整合出功能架構,清晰呈現整體規格樣貌

以下結合不同系統功能,呈現的電商網站功能地圖
https://ithelp.ithome.com.tw/upload/images/20200918/20130402zCCMlnvd9m.png

好! 下一篇會介紹 Logic Flow 邏輯流程 : )

思考議題

Q1. 功能地圖與 UI Flow 的差別是什麼 ?

請進一步參閱【Day 06】設計流程環節:回顧篇


上一篇
【Day 02】設計流程 (一):IA 資訊架構
下一篇
【Day 04】設計流程 (三):Logic Flow 操作邏輯流程
系列文
UI 設計入門:SEO 尬網路行銷30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言