Type a keyword and hit enter to start searching. Press Esc to cancel.

Currently Reading | 正在閱讀

設計開發流程 Design Phase (1) – What is the relationship between Functional map, UI Flow, User Flow, Wireframe, Sitemap and Micro-interaction, ?

簡介 (Intro)

什麼是Functional Map, Sitemap?

什麼又是User flow和 UI flow?

Task flow和Flow Chart跟它們又有什麼關係呢?

在建置網頁的過程中,如果要有好的UX

這些名詞之間的關係必須釐清

Functional Map

根據設計指南design brief 做出Functional map

那什麼是functional map? (What is Functional Map?)

它其實就是簡易版的需求規格書 (It defines site functions and site information needed in a simple mind map)

用來了解客戶抽象需求,定義出各種功能和資訊

主要是能做什麼,要呈現什麼,並整合相關功能和資訊於一處

可參考初學者的functional map ( Functional map這個名稱似乎就是來自於該作者XD )

而Functional map的進階版functional list,則是列出每頁的功能和詳細介紹

Sitemap

就是簡易版的UI flow,而少了頁面之間的關係 ( Sitemap is a simple-version of UI flow. It should have page numbering for each section)

最好在每一個頁面都有編號

編號規則,舉例如下 ( Page Numbering rules )

1.0 – 首頁

1.0.1 – 首頁的某一section

1.1 – 由從首頁1.0跳轉的下一頁

1.1a – 由首頁跳出的新視窗(非新頁面)

2.0 – 專輯頁

2.1 – 由專輯頁跳轉到的專輯購買頁

那如果從首頁的某一section跳轉到另一頁怎麼辦呢?

例如點擊首頁的輪播banner,編號 1.0.1 會跳轉到專輯購買頁?

如果不是只能通過該banner才能到達的頁面,編號就是2.1 專輯購買頁

如果是只能通過點擊輪播banner 1.0.1 才能到達的頁面,而不屬於其他任何編號(2.0以上),編號就是1.0.1.1

User Flow (Task Flow or Flow Chart)

有許多路徑去完成同一個目的 (complete one specific task/goal via many routes)

讓你詳細檢查完成一個目的的每一個細節

包含系統對使用者行為的回饋 (粗略版的Micro-interaction)

UI flow (Site Flow) = advanced Sitemap

決定頁面之間的操作動線

先有User Flow (Task Flow or Flow Chart) 才有UI Flow ( create UI Flow based on User Flow or Task Flow, otherwise you may miss something important )

如果沒有user flow就畫UI flow,可能會漏掉功能

通過UI Flow可以了解sitemap的寬度和深度(導覽架構)

寬度是指平行的頁面,太寬,合併頁面

深度是指點擊某頁面後的頁面數量,太深, 結合所需頁面讓它更有效率

因為是頁面,所以已經內含functional map的資訊部份

因此每一個UI Flow的node對應一張wireframe

UI Flow有幾頁(編號),Wireframe就有幾頁(相同編號)

根據知道完成某個任務需要的頁面數量,去串接這些頁面的關係

Wireframe

什麼是Wireframe?

它是low-fi prototype,包含資訊的架構與層級,也會包含互動註解

根據Functional map和UI flow畫Wireframe ( Create Wireframe based on Functional Map and UI Flow )

因為Functional map有資訊內容和功能需求, UI Flow有頁面之間的操作動線

而先sketch還是先有wireframe? (Sketch first? or Wireframe first?)

在這點上許多人有著不同意見

有的人認為先sketch ideas,根據ideas畫出wireframe

有的人認為先有wireframe列出元素大致位置,再sketch 不同的ideas畫出wireframe

what’s yours opinion?

Micro-interaction

微互動,包含觸發 > 規則 > 回饋 > 迴圈與模式 (trigger > rules > feedback > loops and modes)

在完成user flow / task flow的時候需要注意的細節, 在頁面裡面無處不在

主要是讓使用者不用思考就能輕鬆完成想完成的事情,在潛意識上讓他們對網站的印象加分

例如點擊Carousel / Video / button的功能,讓它們都有自己的故事流程和細節可以規劃

可在functional list或wireframe的註解裡,詳細說明

 

希望我的文章對你有幫助 ^^

Did you learn something from my article? I do hope so.:)

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *