iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
1
自我挑戰組

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

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

  • 分享至 

  • xImage
  •  

IA 資訊架構 -> Functional Map 功能地圖 -> Logic Flow 邏輯流程 -> Wireframe 線框圖稿

本篇重點

  1. 線框稿是什麼 ?
  2. 線框稿的目的與階段
  3. 線框稿的繪製重點

一、線框稿 ( Wireframe ) 是什麼 ?

線框稿 ( Wireframe ) 是產品的建構藍圖,以單純的線條或單色色塊,去規劃頁面版型,通常需要團隊一起討論、共同制定產品的技術規格。

舉例來說,透過線框稿,文案負責人,可以知道頁面哪個部分需要產出內容、產出多少 ?
工程師則可以粗估時程,或在第一時間確認功能的可行性等,作為技術規格的溝通。

二、線框稿的目的

Wireframe 是一個以低擬真度來呈現產品設計想法的方式,在開發流程中,依 UI Flow,將頁面進行完整的規劃安排。它主要的目的有:

  • 呈現產品頁面上的主要資訊
  • 呈現資訊在頁面上的架構與排版
  • 呈現使用者如何與產品互動

線框稿的兩大階段

  1. 發想階段
    • 盡量嘗試 ( 用什麼版型呈現資訊呢 ? )
    • 去蕪存菁
  2. 驗證階段
    • 團隊討論
    • 補充修正

這階段常有畫面增減或調整的情況,最重要的是確認好流程與體驗,避免過於注重表面的視覺呈現而非核心的使用者需求 !!

線框稿的繪製重點

視覺元素要簡潔而清晰,頁面註解要精確而詳細

視覺元素要簡潔而清晰:

  • 單一色系
  • 單一字型
  • 統一字級
  • 不用插圖
  • 簡單圖標

以簡易會員登入頁為例 (1)
https://ithelp.ithome.com.tw/upload/images/20200920/20130402R0BETvAmcb.png

頁面註解要精確而詳細:

  • 頁面編號 ( 參照 UI Flow )
  • 連結去向 ( 知道頁面間的關聯為何 )
  • 過場特效
  • 狀態變化
  • 介面互動

沒有註解的線框稿,只能說是頁面的草稿 !
最重要的是,使用者怎麼去跟頁面上的元件作互動,元件會有什麼狀態變化都需要標示。
參與開發的人才可以判斷開發的可行性以及邏輯是否順暢,才可以進一步討論出具共識的產品藍圖。

以簡易會員登入頁為例 (2)
https://ithelp.ithome.com.tw/upload/images/20200920/20130402wOmlkCADqy.png

記得! 以 Wireframe 呈現與規劃產品,最大的特色就是快速且節省時間資源。

  • 避免視覺設計的干擾,專注在流程、功能面;資訊架構面;使用者體驗與使用性
  • 若是需求改變也可以很快的做出調整

好! 接下來稍作停頓,讓我們回去思考一下 : )


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

尚未有邦友留言

立即登入留言