[互動設計]從繪製Wireframe到UI/UX前準備

Wireframe是什麼?

在開始討論Wireframe之前,我們先來定義一下Wirefram究竟是什麼;在工作流程中,通常將Wireframe當作開發前的規格文件,它的目的是用來和業主或者夥伴們溝通,這份所謂的"框線圖"就是一種技術文檔,以建築、室內設計或工業設計的角度來看就是產品藍圖,從網站或軟體應用角度看較類似使用流程圖,必須將每個畫面的使用情況、資料架構、流程都規範下來,才能方便進行之後的任務進行,讓專案開發團隊確認整個開發內容的規格,依照難易評估所需的時間,方能制定開發時程,跟客戶共享這份文件,也較能獲得信賴,以及保障開發者的工作項目內容。

從工作團隊的各角色來看

專案管理(PM)

通常是拿來確認規格,方便跟客戶還有團隊設計師、工程師溝通,有許多團隊的Wireframe也是PM負責繪製的,因為往往這張圖會決定專案未來的走向,並且這是能將抽象的產品概念具現化的一種方式,而且PM也是需要掌控整個案子的角色,如果有變化也可以即時更新圖表;但也有些團隊的Wireframe是UI或UX設計師在負責。

設計師(UI/UX)

對於介面設計者來說,Wireframe可以更清楚瞭解畫面和畫面間的關係,就更能掌握使用中流程的互動,由於UX和UI要輔助設計系統與人機互動用的資訊介面,包括如何操作和怎樣呈現視覺元素,從當前頁面點擊操作後會連到何處,然後產生什麼變化(資料或者系統狀態),都是設計者希望可以在Wireframe上看到的細節提示。

工程師(Front-End/Back-End)

前後端的工程師們看Wireframe大部分的目的也是為了確認整體架構,前端可以藉此確認整體流程互動,何時要跟後端配合取得資料、排列呈現資料,以及如何設計用戶互動;後端則是提早了解整體架構所需要的資料欄位、行為功能,這些事情用Wireframe來討論比較容易想像、好理解,也可以避免架構因為規劃不清楚一直更動。

wireframe

從GOOGLE就可以找到很多Wireframe的設計範例,之後在另闢一篇來討論怎麼製作,也有許多輔助工具可以幫助我們建立這份技術文件,例如:CACOODRAW.IOMOQUPSWIREFRAME.CCMOCKFLOWPENCIL….這類的工具。

只要秉持下列幾項要點多嘗試,製作Wireframe必定會成為UX工作上的利器:

  • 了解自己在建構的東西是什麼
  • 專注在用戶體驗上(非設計面)
  • 從現有資源整併延伸你的想法
  • 測試驗證設計原型

 

Leave a Reply