Wireframe 的中文是線框圖，是 UX 設計師很重要的產出之一。但是 Wireframe 究竟是什麼？有什麼目的與好處？在設計前要思考哪些事情？這篇文章會手把手教你，讓新手也能快速上手喔！
Wireframe 是什麼？
UX 設計師會利用 Wireframe 來擬定頁面的資訊架構、確認頁面流程、安排內容、以及進行細微的互動定義，是一個重要的溝通媒介。由於相較於完整的 UI，Wireframe 沒有視覺設計元素，因此被稱為「線框圖」。
為什麽要設計 Wireframe？
一、協助在前期可以快速嘗試不同版本
製作 Wireframe 的時間相較於 UI 來的短，因此可以在前期還在探索的階段，快速製作不同版本。
二、及早跟客戶（在乙方公司）對焦方向
因為製作的成本相對較低，可以在早期跟主要的利害關係人（Stakeholder）對焦方向，以避免做到很完整的程度才發現方向不對，那就會比較容易重功喔！
三、更專注於資訊架構等 UX 的面向的討論
人類畢竟是視覺的動物，當有視覺元素存在時，很容易會聚焦在顏色或畫面好不好看，而模糊了資訊架構的焦點。Wireframe 更適合用來聚焦在 UX 的討論，等 UX 都大致底定再進到 UI 的細部設計。
Wireframe 三大溝通對象的眉眉角角
俗話說，「好的溝通是要站在對方的立場，用對方理解話來講」。Wireframe 既然是一個溝通媒介，就需要了解「溝通對象是誰」。一般來說，Wireframe 設計好之後主要會看的對象包含：客戶、UI 設計師、及工程師，因此，先了解對方在意的是什麼，主要想要看的是哪些資訊，可以幫助自己的 Wireframe 更精準做好溝通的目標！
一、客戶
在設計顧問公司（乙方）的工作模式中，客戶會提供需求給設計師去執行，此時 Wireframe 是 UX 設計師用來跟客戶對焦設計概念的媒介。需要盤點好業務邏輯內容，並提出設計理念，若有 A/B 版本，也需要能夠解釋不同版本的目標與考量的優缺點分別為何。
二、UI 設計師
在分工比較細的公司裡，Wireframe 會有專職的 UX 設計師負責，設計完之後會再把 Wireframe 交給 UI 設計師做成 UI。此時，UI 設計師需要能夠從設計圖中快速掌握整個功能的細節、狀態、情境，才能夠更快的進到 UI 的思考。
三、工程師
依照專案的分工與需求，工程師可能會在 Wireframe 階段就先進來了解開發的限制與可行性，進行前端及後端的開發評估。此時一個完善的 Wireframe 應盡可能定義好各種情境及極端值情況，幫助開發去做評估。
綜合以上，我認為
一個 Wireframe 如果能促進跟客戶的溝通，做好前期對焦；能讓 UI 設計師清楚理解資訊層級，以及需要處理的所有情境；能讓工程師掌握開發實作細節，包含極端值情境及互動邏輯，就是一個好的 Wireframe。
Wireframe 設計的三大關鍵流程
一、理解使用者是誰
同樣的產品，面對不同的使用者就會有截然不同的功能，或是側重不同的重點。舉例來說，同樣是網銀，設計給一般民眾跟設計給大老闆就會有很大的差異；同樣是股票 APP，設計給投資小白跟投資高手也會有很不同的溝通方式。因此，先釐清你的主要使用者是誰，才能更聚焦在他的需求，可以透過人物誌（Persona）等工具協助釐清使用者。
二、理解使用情境與需求
當我們知道使用者是誰之後，進一步要去了解他平時如何使用這個服務，與產品的旅程是什麼，會經過哪些流程，每個步驟分別最在意哪些重點或功能。舉例來說，使用訂單管理系統的使用者究竟有多常使用到搜尋功能，就會影響到搜尋功能擺放的位置與層級，是要放在很高然後用明顯的搜尋框，抑或是收成一個小小的放大鏡，有需要才點擊？而使用者習慣用什麼樣的排序來看資訊，有沒有需要有篩選或自訂排序的功能？理解情境後更能協助我們做好設計決策。
三、設計層級分明
當我們理解使用情境與需求之後，就能以此依據來規劃產品內容的層級。我們可以透過元件的「閱讀順序」、「大小」、與「顏色」來區分層級，讓接手的 UI 設計師更清楚每頁的重點是什麼。設計好頁面之後，可以再回過頭來確認每頁的亮點是否滿足了使用者的需求與痛點，反覆問自己這是不是使用者最在意的資訊？當設計有符合需求時，就是一個成功的設計了。
本文介紹了 Wireframe 的重要性，並從目的、對象、關鍵流程說明設計之前的思考流程。在設計 Wireframe 前應深入了解目標客群，訂定好的策略並注意頁面層級。在溝通協作中，也記得不同對象要注意的眉眉角角。未來我們將分享更多實際執行 Wireframe 的小技巧與觀念，敬請期待！
延伸閱讀
