iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 6
2
自我挑戰組

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

【Day 06】設計流程環節:回顧篇

我們一起看過了在正式進入繪製之前的四個階段 ( IA 資訊架構 / Functional Map 功能地圖 / Logic Flow 邏輯流程 / Wireframe 線框圖稿 ),每個環節都有很多可以討論、加深的議題,以下是目前注意到的議題部分。

本篇重點

  1. 資訊架構的三大要素和三大觀點如何使用 ?
  2. IA 中,UI 設計師參與歸納 User Story 的時機點是 ?
  3. 內容面相要考量的點是什麼 ?
  4. IA 四大系統如何想像 ?
  5. 功能地圖與 UI Flow 的差別是什麼 ?
  6. 使用線框稿跟利害關係人溝通要注意 ?

資訊架構 ( IA ) 相關

( 【Day 02】設計流程 (一):IA 資訊架構 )

Q1. 資訊架構的三大要素和三大觀點如何使用 ?

在思考 "使用者"、"內容"、"情境" 三大要素時,我們可以將自己帶入三種角色,"使用者"、"資訊提供者" 和 "資訊系統",去分類資訊,討論考量的點是什麼
情境的部分,可以說是建構系統時的背景脈絡,通常在資訊架構的前置作業中,就要去發掘與釐清,避免迷失搞錯方向,例如:

  • 環境問題 ( 市場環境、競爭對手;商業目標、產品策略、營運資源、用戶行為;利害關係人、技術限制、流量策略等 )

Q2. IA 中,UI 設計師使用歸納 User Story 的時機點是為何 ?

釐清眾多環境問題後,進行 IA 設計時,會探求要解決的問題,接著分析解決問題的流程思考相對應會產生的資訊流
舉例:

  • 幫速食業者規劃排隊預約 ( 使用者行為 ) 的自助服務機方案,可能會先分析、拆解速食業者處理客戶排隊預約的流程 ( 此時就會用上用戶旅程地圖、使用者故事對照等 )
  • 假設經分析,流程有四個步驟,再根據每個步驟具體要完成的任務 ( 使用者任務 ),如第三個步驟,消費者想要被簡訊通知提醒 ( 使用者故事 )。

Q3. 內容面相要考量的點是什麼 ?

  • 釐清內容提供的形式、來源
  • 如何維持內容的品質
    思考系統中資訊提供的形式,建立好規範與格式,才能在互動介面上提供給使用者良好的呈現,以及內容品質。

Q4. IA 四大系統,可以再多說明點嗎 ?

核心概念有分類標籤命名安排關聯

  • 組織系統:當內容量龐大時,善用多面向的分類方式,讓內容更容易被取得。
  • 標示系統:透過使用者研究了解消費者會用的語言,進而命名標籤,可以協助使用者在查找內容時更有效率。
  • 搜尋系統:關聯設計,有階層性,讓使用者得以選擇不同面向的內容,再依據面向 (條件) 搜尋內容。比如一般仲介服務的介面,可以選擇從類型、日期、熱門度等去排序或搜尋,讓使用者找尋自己想要的資訊。
  • 導航系統:作為資訊空間的指引,可以問自己以下問題
    • 現在在哪 ?
    • 我的目標在哪 ?
    • 該怎麼移動 ?
    • 附近有什麼相關的或有趣的 ?

功能地圖 ( Functional Map ) 與介面流程圖 ( UI Flow ) 相關

( 【Day 03】設計流程 (二):Functional Map 功能地圖 )
( 【Day 04】設計流程 (三):Logic Flow 操作邏輯流程 )

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

  • 功能地圖主要是將使用者需求,轉變成你的規格與功能 !
  • UI Flow 則是重視操作動線,頁面的數量與頁面之間的關係

線框圖稿 ( Wireframe ) 相關

( 【Day 05】設計流程 (四):Wireframe 線框圖稿 )

Q6. 使用線框稿跟利害關係人溝通要注意 ?

專案中涉入程度不高的利害關係人 ( 如客戶或非技術領域的主管等 ),在觀看線框稿的時候,可能在心中會產生疑問或混淆,例如:這是最終設計嗎 ? 看起來很醜 ? 有需要做這個嗎 ? 我希望顏色和邊框識別的樣子 ? ...等。
處理這樣的情況時,更需要自己釐清線框稿的目的與概念,才能建立有效的溝通。
記得! Wireframe 的作用是技術規格的溝通,花時間在挑選情境圖片或處理視覺元素,都是浪費時間!

好! 下一篇繼續前進,一起瞭解設計流程吧 : )


上一篇
【Day 05】設計流程 (四):Wireframe 線框圖稿
下一篇
【Day 07】設計流程:繪製 Mockup 設計精稿之前 ( 網格系統+原子設計 )
系列文
UI 設計入門:SEO 尬網路行銷30

尚未有邦友留言

立即登入留言