Wireframe（線框圖）是 UI 介面設計前的原型骨架，是 UX 設計師很重要的產出之一，在開發數位產品例如 App, Website 時， Wireframe 可以確保整體架構清楚好導覽、同時每一頁與每個流程的功能細節符合使用者需求、更需滿足商業的策略目標，以及操作易用性後，UX 設計師再將 Wireframe 提供給 UI 設計師，設計出具備視覺風格與統一調性的最終介面。
但是 Wireframe 究竟是什麼？有什麼目的與好處？在設計前要思考哪些事情？這篇文章會手把手教你，讓新手也能快速上手喔！
Wireframe 是什麼？
當 UX 設計師從研究結果或商業目標中，得到一些可以轉化到設計畫面的洞見後，會利用 Wireframe 來擬定頁面的資訊架構、確認頁面流程、安排功能細節的設計、以及進行細微的互動以及欄位規則等定義，是一個重要的溝通媒介。由於相較於完整的 UI，Wireframe 沒有視覺設計元素，因此被稱為「線框圖」。
如上圖所示，Wireframe 會將圖片、影片區塊以矩形方式表示，並標注該區塊應放置的項目為何，例如Banner, Image, Video, icon 等。
文字的話，若為主要架構的資訊，就必須將文字的層級做出來，並且清楚呈現文案，而如果初期不知道如何定義文字大小，可以使用 Type Scale，這在我初期上手 UX 時很喜歡使用。
各式按鈕在不同重要度，也會有不同的層級來示意，如果為上稿的區塊可以用假字方式進行示意。
版面區塊也會標註上滑或下滑時，會凍結（Fixed）的區塊長相為何。
為什麼要設計 Wireframe?
Wireframe 就像畫圖時，也會打草稿、畫骨架一樣，在畫精稿前，可以有非常多草圖，覺得有不對的地方也可以輕鬆用橡皮擦擦掉修改。而在 Wireframe 上，同樣也可以在發想設計時可以有更多不同 User Story 下規劃的 Wireframe 版本，與客戶或上層討論功能時也才能有像節省時間，同時可以更聚焦在架構與易用性的討論囉！
協助在前期可以快速嘗試不同版本
製作 Wireframe 時會專注於架構的討論與修改，因此僅需調整線框圖的佈局與層級，可以省去 UI 將視覺都確立後再進行整體與細節的來回編修，非常適合當專案沒有既有 UI Guildline 時使用。
同時，可以在前期還在探索的階段，依據不同的User Story 快速製作不同版本，激發出在體驗上的設計與想法！
及早跟客戶或長官對焦方向
因為製作的成本相對較低，可以在進到每一個單元時，都能跟主要的利害關係人（Stakeholder）對焦方向，以避免做到很完整的程度，或是所有 UI 介面的設計都完成後才發現方向不對，那就會比較容易重功喔！
更專注於資訊架構等 UX 面向的討論
人類畢竟是視覺的動物，當有視覺元素存在時，很容易會聚焦在顏色或畫面好不好看，而模糊了資訊架構的焦點。Wireframe 更適合用來聚焦在 UX 的討論，等 UX 都底定再進到 UI 的細部設計。
撰寫 PRD 文件
Wireframe 雖然可以呈現到所有資訊的精確性、架構完整性以及易用性，但資料的來源規則，或是整體操作流程，每個頁面之間的關係為何，都可以透過撰寫 PRD（開發文件） 在 Wireframe 的旁邊，來幫助與客戶或長官說明，同時也可以讓團隊成員（工程師、PM、UI 設計師等）都可以理解設計邏輯與需求來規劃唷！
如果想更了解 PRD 如何撰寫，可以看《10 個 Wireframe PRD 撰寫規則與範例》
設計 Wireframe 要注意什麼？
先了解你的目標族群
俗話說，「好的溝通是要站在對方的立場，用對方理解話來講」。Wireframe 既然是一個溝通媒介，就需要了解「溝通對象是誰」。一般來說，Wireframe 設計好之後主要會看的對象包含：客戶、UI 設計師、及工程師，因此，先了解對方在意的是什麼，主要想要看的是哪些資訊，可以幫助自己的 Wireframe 更精準做好溝通的目標！
客戶或長官
Wireframe 是 UX 設計師用來跟客戶或長官對焦設計概念的媒介。
因此在和客戶或長官確認需求、以及闡述設計概念時，都可以更依循產品的目標、研究結果來溝通，這樣不僅提升他們對你的專業度信任之外，也更能依據使用情境來做設計的討論，降低單純改設計但沒有原因的情境！
同時，在設計顧問公司來說，我們和客戶是並肩作戰將產品做到最好的夥伴，因此他們提供給我們他們領域的專業知識，我們是提供數位的專業知識，因此我們會用好理解的溝通方式讓客戶釐清數位開發的細節，像是 User Story 和 User Flow 方式討論，而客戶提供的資訊，我們也會自行消化後再確認資料的關聯、以及當前面臨的困擾與設計期待，才能確保我們是最理解專案的情況下，為客戶做最大的數位轉換唷！
UI 設計師
在分工比較細的公司裡，Wireframe 會有專職的 UX 設計師負責，設計完之後會再把 Wireframe 交給 UI 設計師做成 UI。此時，UI 設計師需要能夠從設計圖中快速掌握整個功能的細節、狀態、情境，才能夠更快的進到 UI 的思考。
因此 Wireframe 我們會以資訊層級與內容正確性為主的規劃，好讓 UI 設計師可以透過 Wireframe 即可了解每個功能細節的重要程度，在進行設計轉化唷。
工程師
依照專案的分工與需求，工程師可能會在 Wireframe 階段就先進來了解開發的限制與可行性，進行前端及後端的開發評估。此時一個完善的 Wireframe 應盡可能定義好各種情境及極端值情況，幫助開發去做評估。
此外，我們除了設計完 Wireframe 之外，也會寫好 PRD 文件、User Flow，才不需要讓工程師猜測流程以及功能的設計細節；而當遇到設計可能有比較複雜的可能性，或是對一些技術是我們還不理解的限制時，也可以提前和工程師討論作法，讓專案可以如預期做出來！
產品經理（PM）
產品經理會管理整體專案，無論是與客戶、設計師、工程師等，都會進行密切的討論，而 PM 關注的資訊又會與設計師有所不同，PM 收到 Wireframe 後也會確保所有功能是否符合專案範疇，同時是否符合客戶的預期目標與使用情境等，做到內部的審核，好讓後續對客戶時，也可以更即時的做討論！
綜合以上，我認為
一個 Wireframe 如果能促進跟客戶的溝通，做好前期對焦；能讓 UI 設計師清楚理解資訊層級，以及需要處理的所有情境；能讓工程師掌握開發實作細節，包含極端值情境及互動邏輯，就是一個好的 Wireframe。
Wireframe 這些細節要注意
其實 Wireframe 有非常多眉眉角角的事情，這邊整理幾個常見的細節，有做到的話就可以更專業囉！
- Wireframe 內的所有樣式要統一：包含所有字級的設定，以及元件的使用方式，因為再轉交給 UI 設計師時，他們需要解讀 Wireframe 的設計脈絡，若能夠讓樣式統一，才不會讓接手的夥伴需要思考是否因為不同情境而需要做新的樣式唷！
- Wireframe 層級要明確：包含字的大小要足夠辨識重要層級外，按鈕的主次設定，以及畫面區塊的視覺動線與比例，這些都會大大影響使用者的體驗，同時這個層級也會依據 User Story ，符合使用情境來規劃唷！
- Wireframe 盡量避免做視覺樣式：例如特別把某些僅需有代表 Image 與 Text 的區塊，特別畫出一些有脫離線框圖的視覺 設計，即使都是黑灰白，但是有時這些樣式不僅可能會讓 UI 較為綁手綁腳，更可能因為客戶看到 Wireframe 有了想像後，卻覺得 UI 為何會與 UX 規劃的不相同。
- 同時思考多裝置瀏覽的設計：若該產品本身可以使用多種載體呈現，像是 Website，都會有 Mobile View 的需求，此時需要特別為兩種尺寸都想好功能的設定，能不能在各裝置都滿足。
Wireframe 溝通要包含什麼？
其實 Wireframe 除了上面的範例圖之外，還有非常多需要被考量進去，在製作前期會需要溝通設計需求與目標，才能在製作中要依據需求將架構與功能細節設計出來，製作後期則需要將流程與規則標示清楚，這邊就來一一介紹前中後會包含什麼吧。
製作前期｜目標與需求溝通
- Function List 功能清單：在製作前，會需要釐清所有的功能有哪些，依據大單元，在區分到項目，並針對項目去詳述該項目裡面需要涵蓋的所有功能，才可以確保之後在設計時不會遺漏也不超出原定範疇！
- Stakeholder Interview 利害關係人訪談：在專案開始前，可以先和利害關係人（例如客戶、長官等，凡是參與專案、決定專案走向的人）進行初次的訪談，並且會議前列好需要釐清的專案目標、預期效益、當前困擾、使用者輪廓、產品調性等，任何需要在專案背景先釐清的資訊，皆可以在這場會議了解完成，若為專案的話，還可以奠定客戶與你的第一印象建立唷！讓他們感受到你的專業與合作氛圍，可以讓你在後續設計討論時，能夠更相信你提出來的設計建議。
- Research Result 研究結果：這篇先專注在講 Wireframe 的介紹，因此不多加贅述研究的方法，但我們會依據數據結果（量化）與一些訪談、留言回饋（質化）方式來歸納出設計的方向，例如常見的方式會用 KJ 法來梳理出人物誌（Persona），釐清我們要為誰設計，可以如何發揮成特色亮點，也會將各情境痛點與期待列出來。
- Sitemap 產品架構圖：將所有功能清單釐清、並且確定目標與需求後，即可將其開成 Sitemap，也就是做 UX 會提及的資訊架構（Information Architecture, IA）這步驟會奠定後續再規劃產品導航的易用性之外，也能盤點專案的頁面數量，以利了解專案時程！而開立 Sitemap 我們最常使用的工具為 Xmind 心智圖工具。而有產品架構圖的好處，可以確保功能之間的導航可以讓使用者輕易找到需求功能，並且在擴增功能時可以更以全局形式安排，而不是疊床架屋，讓產品的新工能增加得令人困惑！
製作中期｜設計體驗細節溝通
- Guideline 規範：雖然 UI 會是做最後最完整的設計 Guideline，像是字體、字型、字級、顏色、按鈕等等，但在 UX 設計時，我們也會先制定好字級大小，他對應在不同地方，就會有相應的大小與層級，才能讓資訊層級可以清楚被看見，這樣 UI 設計師在規劃時，就能先釐清資訊的重要程度，再進行美美的視覺表現囉！
- Navigation Bar（Header, Footer） 導航欄：這也是承襲前面 Sitemap 開立的架構，由這邊來做出非常好使用的架構，所以在 Website 的話，就是最上方的 Header，在 App 的話，就會有 Navigation Bar 和 Tab Bar 囉，而設計這個也是一門重要學問，例如主分類，次分類之間的關係，該如何有效展現所有的項目，如何讓使用者不用學習都知道功能在哪，重要度又該如何強化等等。
- Page 大量的頁面：確認好大架構後，就會進入所有頁面的設計細節，也就如前一個段落提到的，將所有資訊精確的呈現在畫面上，因此在這階段，Wireframe 不會只是框框線條如此簡單，而是會清楚展示到資訊的最完整狀態，所以即便圖片用了矩形示意，我們也會清楚呈現例如張數限制、輪轉方式等。
- Name 頁面命名：當一個專案完成，實際頁面數可能高達兩百多頁，因此將頁面命名是非常重要的，我這邊的編碼習慣會是 A 1.1.a，A 為大單元，第一個 1 為子單元，第二個 1 為子單元的頁面，最後的 a 為狀態，這樣即可已在大型專專案，也不會因為命名到一個 20 等，如果中間增加一頁的話，編碼調整起來就很累人囉！但當然在較小專案的話，就可以不用到四碼的命名。
- User Story 使用者故事：這是為了方便在和客戶或長官溝通時，當你有兩個版本決定不出來，或是想要說服他人的話，透過 User Story 方式，就能讓對方更好理解的你設計理由，同時再多版的設計中，他們也更好決定要使用哪一版，因為他不不是看著設計改設計，而是看著使用情境來討論設計唷！是一個我在設計時讓溝通變得更有技巧與說服力的工具！如果想瞭解更多撇步，可以看這篇《UXUI 設計顧問工作大開箱！6 大技巧提高你的設計價值》。
- Status 狀態：狀態會大量出現在專案之中，例如電量，也會有充電、足夠電量、不夠電量，購物車也會有沒商品的空值、付費失敗等，登入註冊也會有輸入提示、成功註冊的狀態，都需要將這些規則設計出來，專案才會晚整唷。
製作後期｜開發與視覺溝通
- User Flow 頁面流程圖：當專案越複雜，或是非一般常見的流程，我們就會依據各個流程來繪製 User Flow，一方面是要和客戶確認資料關聯性，另一方面很重要是給工程師團隊看，以確保資料在點擊後前進的畫面，或是回吐的資訊會是什麼，點擊返回要去哪等等的。
- PRD 開發文件：這也是在開發上，會需要和客戶與工程師確認的資訊，因此 PRD 文件需要寫得詳細，後續串連出來的資訊，以及在不同狀態下對應的資料才能符合你設計的想法，降低後續驗收後不符合期待又反覆修改的狀況唷。
Wireframe 設計的三大關鍵流程
一、理解使用者是誰
同樣的產品，面對不同的使用者就會有截然不同的功能，或是側重不同的重點。舉例來說，同樣是網銀，設計給一般民眾跟設計給大老闆就會有很大的差異；同樣是股票 APP，設計給投資小白跟投資高手也會有很不同的溝通方式。因此，先釐清你的主要使用者是誰，才能更聚焦在他的需求，可以透過人物誌（Persona）等工具協助釐清使用者。
二、理解使用情境與需求
當我們知道使用者是誰之後，進一步要去了解他平時如何使用這個服務，與產品的旅程是什麼，會經過哪些流程，每個步驟分別最在意哪些重點或功能。舉例來說，使用訂單管理系統的使用者究竟有多常使用到搜尋功能，就會影響到搜尋功能擺放的位置與層級，是要放在很高然後用明顯的搜尋框，抑或是收成一個小小的放大鏡，有需要才點擊？而使用者習慣用什麼樣的排序來看資訊，有沒有需要有篩選或自訂排序的功能？理解情境後更能協助我們做好設計決策。
三、設計層級分明
當我們理解使用情境與需求之後，就能以此依據來規劃產品內容的層級。我們可以透過元件的「閱讀順序」、「大小」、與「顏色」來區分層級，讓接手的 UI 設計師更清楚每頁的重點是什麼。設計好頁面之後，可以再回過頭來確認每頁的亮點是否滿足了使用者的需求與痛點，反覆問自己這是不是使用者最在意的資訊？當設計有符合需求時，就是一個成功的設計了。
讓你的 Wireframe 更專業的 6 個小技巧
套用真實內容
一些新手設計師會為了畫面好看，都放比較短的內容或比較美的圖片，但產品實際上線後才發現呈現效果不如預期。套用真實內容除了讓頁面看起來更真實以外，也有許多重要的目的，例如：
- 確認極端值情況：使用真實內容才能協助設計師盤點極端情況，像是最多的字數是幾個字，會不會有需要換行的情形，或是會以文字溢出的方式呈現（例如超過幾個字就會…而不會顯示所有內容），或甚至會不會有無資料的情況，這些都需要在 Wireframe 階段盤點出來。
- 判斷實際上線的視覺感受：若是比較仰賴圖片的產品，例如電商平台、旅遊平台、訂房平台、或是在設計 banner 的時候，就需要先知道實際圖片的狀態，來判斷需不需要訂定更多規範。例如可不可以壓文字在上方、文字跟圖的比例是多少、需不需要有遮罩等額外的處理，才能讓圖片的呈現效果比較好。如果既有圖片的品質比較差，也許可以考慮圖片比較不要太大，或甚至不要有圖片，來避免影響到畫面整體感受，這都是使用者體驗的一環。
盤點負向流程
新手設計師很容易想到正向流程的畫面，但是忽略了負向流程的情境。有一個大概的比率是負向流程是正向流程的3~10倍之多，因此掌握 Wireframe 就必須掌握負向流程。那麼什麼是負向流程呢？基本上除了正向流程以外的情境都可以叫負向流程，例如空值、載入中、讀取錯誤、操作失敗、數量達上限等…。依照不同功能會有各式各樣的負向情境，以下舉兩個實際的例子：
- 以功能型的頁面如登入頁為例，就包含了以下幾種情境：忘記密碼、帳號或密碼輸入錯誤、輸入錯誤達上限、需要協助等，除了盤點這些狀態，也需要想如何協助使用者解決這些問題，他的下一步應該是什麼都需要鋪出來。
- 以內容型的頁面如社群的動態牆為例，就包含了以下幾種情境：沒有動態、動態已看完、資訊載入中、照片或文字跑不出來、系統維護中等。
考慮不同角色的使用情境
有些產品會同時存在多個角色的使用者，例如：
(1)蝦皮同時服務買家與賣家。
(2)親子產品的使用者包含了家長與小孩。
(3)外送平台同時有接單者與下單者。
此時頁面要如何包容不同使用者的需求，不同使用者之間如何互動，資訊會如何影響，是否會有切換使用者的功能，這都需要全盤的思考。
留意資訊層級
資訊層級的梳理是 Wireframe 非常重要的部分，在設計每個畫面時，都需要思考使用者在這頁首要達到的目標為何？最在意的資訊是什麼？最主要引導使用者的行為是什麼？以此作為資訊層級強弱的引導。好的引導可以讓產品有更好的易用性，幫助使用者更快速無痛地完成任務。
定義互動細節
Wireframe 除了靜態圖以外，也包含了互動，而這也是許多人容易忽略的地方。這包含了兩個層面：
- 模組內的互動邏輯：以圖表為例，需要定義資訊來源為何？圖表上的每根 bar 的邏輯定義為何？是否可以點擊或是滑動？長壓之後會不會有其他反應？各個狀態的畫面都需要盤點出來。
- 整個頁面在操作的互動邏輯：例如當頁面下滑或上滑時，是否會有 scroll bar 的出現？滑動時 header 會不會收起來或展開？哪些地方要 fixed 哪些地方會跟著頁面滑動？
設計師可以嘗試在設計好頁面之後進行 prototype 的串連，可以幫助思考頁面實際操作後的細部互動邏輯，讓設計更加完善。
響應式設計（Responsive Web Design, 簡稱 RWD）
一個產品可能同時存在多個平台，包含 App、網站、Mobile Web (以手機開啟網站)、甚至是 ipad 等各種裝置。為了讓跨平台間有一致的使用體驗，RWD 是常見的做法。
一般來說，設計師會先以一個平台為主去進行設計，進到交付之前再去思考畫面應該如何隨螢幕寬度與高度做延展。例如：元件會是對齊頁面的哪裡再去延展寬度？或是元件會固定寬度？若本來是正方形的元件，在延展時會固定比例縮放嗎？或是只會縮放寬度變成長方形？是否會有最大或最小寬度的限制？
現在一些設計平台也有 Auto layout 的功能，可以協助設計師提早思考並且想像頁面延展的樣子，設計師也需要有跨裝置思考的能力。
Wireframe 的迷思與疑問
Ｑ：只要畫叉叉跟色塊就是 Wireframe 嗎？
Ａ：網路上有許多只畫著大叉叉或是用大色塊表示的 Wireframe，但是 Wireframe 真的有這麼簡單嗎？的確，Wireframe 有從「高擬真」到「低擬真」不同程度的細緻度，然而用途卻大不相同。粗糙的 Wireframe 可用於非常初期的概念溝通，例如在設計工作坊、或是提案早期的對焦。但是實際上需要交付給工程師的 Wireframe 是需要具備一定的細緻程度，包含內容、格式、互動、流程等都需要仔細盤點，才能夠協助確實被落地開發。因此 UX 設計師需要了解當下情境所需要的最適合的溝通物，千萬不要搞錯用途囉。
Ｑ：可不可以直接跳過 Wireframe 去做 UI？
Ａ：有些人習慣很快就進到視覺細節，例如間距、陰影、顏色等，不知不覺就在 Wireframe 階段進到 UI 的思維。但製作 Wireframe 很重要的目的是讓前期可以先聚焦在資訊架構上，先將使用情境盤出來、訂好設計的骨架，這些步驟可以讓自己在前期有更多的探索與嘗試，並且讓思考的面向更寬闊，才不會一開始就被細節綁住，因此 Wireframe 還是有它存在的重要性唷。
Wireframe 與 UI 軟體工具
所以說，如果要開始做 Wireframe，可以從哪些工具開始使用呢？根據 UX tools 統計，2022 年最多人使用的 UI 軟體工具依序為 Figma, Adobe XD, 及 Sketch，且 Figma 使用的比例遠遠高過於任何其他的工具，顯示為目前相當主流的設計軟體。我建議可以先從比較主流的設計軟體工具開始學習，比較容易跟其他設計師接軌。Figma 除了支援 Mac 及 Windows 雙系統，不用另外下載 app 也能使用，還有大量的 plugin 及社群資源，都是他的優勢。除了上手簡單之外，也已經有許多教學課程在網路上，因此非常推薦想要入門的朋友可以試試看。
不過在大量有不同的專案，以及每個專案都會有不同的外部客戶需要進行整體專案架構與細節功能討論的話，也可以使用 Axure，是更著重在繪製 Wireframe 的工具。
若有製作簡易 prototyping 的需求，Figma 仍然是非常主流的工具，除此之外 Adobe XD, 及 Protopie 同樣是使用的前三名。但若有更進階的細緻互動，則會建議使用 Protopie, Axure, Webflow 等工具，可以依照自己的需求去選擇適合的工具。但也不需要被工具綁住，因為工具終究會不斷替換，要保持著持續學習新工具的心態，設計的邏輯跟製作的概念才是最核心的喔。
Wireframe 是什麼？從目的、對象、流程抓住 UIUX 的設計精髓
本文介紹了 Wireframe 的重要性，並從目的、對象、關鍵流程說明設計之前的思考流程。在設計 Wireframe 前應深入了解目標客群，訂定好的策略並注意頁面層級。在溝通協作中，也記得不同對象要注意的眉眉角角。未來我們將分享更多實際執行 Wireframe 的小技巧與觀念，敬請期待！
延伸閱讀
- Wireframe 是什麼？UIUX設計師必學 3 大關鍵流程
- UXUI 設計顧問工作大開箱！6 大技巧提高你的設計價值
- 擺脫新手設計師！解析 6 大 Wireframe 實作技巧與軟體工具
- 如何撰寫 PRD 產品開發文件？ PM 與 UXUI 設計師的 10 個 Wireframe PRD 撰寫規則與範例
- 十大易用性原則是什麼？掌握 UX 核心技能，打造一流產品及服務
