Wireframe 是什麼?從目的、對象、流程抓住UXUI的設計精髓

Wireframe(線框圖)是 UI 介面設計前的原型骨架,是 UX 設計師很重要的產出之一,在開發數位產品例如 App, Website 時, Wireframe 可以確保整體架構清楚好導覽、同時每一頁與每個流程的功能細節符合使用者需求、更需滿足商業的策略目標,以及操作易用性後,UX 設計師再將 Wireframe 提供給 UI 設計師,設計出具備視覺風格與統一調性的最終介面。

但是 Wireframe 究竟是什麼?有什麼目的與好處?在設計前要思考哪些事情?這篇文章會手把手教你,讓新手也能快速上手喔!

Wireframe 是什麼?

當 UX 設計師從研究結果或商業目標中,得到一些可以轉化到設計畫面的洞見後,會利用 Wireframe 來擬定頁面的資訊架構、確認頁面流程、安排功能細節的設計、以及進行細微的互動以及欄位規則等定義,是一個重要的溝通媒介。由於相較於完整的 UI,Wireframe 沒有視覺設計元素,因此被稱為「線框圖」。

Wireframe 跟 UI 的比較

如上圖所示,Wireframe 會將圖片、影片區塊以矩形方式表示,並標注該區塊應放置的項目為何,例如Banner, Image, Video, icon 等。

文字的話,若為主要架構的資訊,就必須將文字的層級做出來,並且清楚呈現文案,而如果初期不知道如何定義文字大小,可以使用 Type Scale,這在我初期上手 UX 時很喜歡使用。

各式按鈕在不同重要度,也會有不同的層級來示意,如果為上稿的區塊可以用假字方式進行示意。

版面區塊也會標註上滑或下滑時,會凍結(Fixed)的區塊長相為何。

為什麼要設計 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 設計的三大關鍵流程

WIreframe設計的三大關鍵流程

一、理解使用者是誰

同樣的產品,面對不同的使用者就會有截然不同的功能,或是側重不同的重點。舉例來說,同樣是網銀,設計給一般民眾跟設計給大老闆就會有很大的差異;同樣是股票 APP,設計給投資小白跟投資高手也會有很不同的溝通方式。因此,先釐清你的主要使用者是誰,才能更聚焦在他的需求,可以透過人物誌(Persona)等工具協助釐清使用者。

人物誌 Persona 範例

二、理解使用情境與需求

當我們知道使用者是誰之後,進一步要去了解他平時如何使用這個服務,與產品的旅程是什麼,會經過哪些流程,每個步驟分別最在意哪些重點或功能。舉例來說,使用訂單管理系統的使用者究竟有多常使用到搜尋功能,就會影響到搜尋功能擺放的位置與層級,是要放在很高然後用明顯的搜尋框,抑或是收成一個小小的放大鏡,有需要才點擊?而使用者習慣用什麼樣的排序來看資訊,有沒有需要有篩選或自訂排序的功能?理解情境後更能協助我們做好設計決策。

理解使用者情境與需求案例

三、設計層級分明

當我們理解使用情境與需求之後,就能以此依據來規劃產品內容的層級。我們可以透過元件的「閱讀順序」、「大小」、與「顏色」來區分層級,讓接手的 UI 設計師更清楚每頁的重點是什麼。設計好頁面之後,可以再回過頭來確認每頁的亮點是否滿足了使用者的需求與痛點,反覆問自己這是不是使用者最在意的資訊?當設計有符合需求時,就是一個成功的設計了。

設計層級分明案例

本文介紹了 Wireframe 的重要性,並從目的、對象、關鍵流程說明設計之前的思考流程。在設計 Wireframe 前應深入了解目標客群,訂定好的策略並注意頁面層級。在溝通協作中,也記得不同對象要注意的眉眉角角。未來我們將分享更多實際執行 Wireframe 的小技巧與觀念,敬請期待!

延伸閱讀

每日一錠
Day Day Ding

作者介紹

不論是在職場或是創業道路上,擁有多元技能都是未來競爭力的關鍵,我們主要分享三方面內容「用戶體驗、品牌行銷、商業設計」,致力於推廣跨界人才發展和打造個人品牌事業,陪伴你探索及發揮自身潛能,離理想生活更進一步。而我們也在這條路上持續耕耘著,與你同行 ☀

關於我們

IG 品牌全攻略

揭秘五大漲粉攻略、十大獲利方式,有效替 IG 創造翻倍流量!

立即試看

Ps / Ai 行銷設計班

五小時從 0 到 1 學會雙軟體實用功能,並製作出一張商業銷售圖!

了解更多