新手 UX/UI 設計師在進行使用者介面設計時常見的盲點有哪些？要如何從細節中提升自己設計 Wireframe 的能力？這篇文章會一一解析 Wireframe 實作技巧，讓你一看就會！如果你還不清楚 Wireframe 是什麼，可以先看看【Wireframe 是什麼？從目的、對象、流程抓住UXUI的設計精髓】
Wireframe 技巧 1.套用真實內容
新手 UX/UI 設計師容易為了畫面好看，放比較短的內容或比較美的圖片，但產品實際上線後才發現呈現效果與預期有落差。套用真實內容除了讓頁面更貼近實際上線情況以外，還有許多重要的目的，例如：
一、確認極端值情況
使用真實內容才能協助 UX/UI 設計師盤點極端情況，像是最多的字數是幾個字、會不會有需要換行的情形、或是超過幾個字就會顯示「…」、或甚至有無資料的情況。這些都需要在 Wireframe 階段盤點出來，也只有真實資料才能反應各種情況唷！
二、判斷實際上線的視覺感受
若是比較仰賴圖片的產品，例如電商平台、旅遊平台、訂房平台、或是在設計 Banner 的時候，就需要先知道實際圖片的狀態，來判斷需不需要訂定更多規範。例如可不可以壓文字在上方、文字跟圖的比例是多少、需不需要有遮罩等額外的處理，才能讓圖片的呈現效果比較好。如果既有圖片的品質比較差，也許可以考慮圖片比例縮小，或甚至不要有圖片，這都是使用者體驗的一環！
Wireframe 技巧 2.盤點負向流程
新手 UX/UI 設計師很容易想到正向流程的畫面，但是忽略了負向流程的情境。實際上負向流程大約是正向流程的 3 ~ 10 倍之多，因此掌握 Wireframe 就必須掌握負向流程！那麼什麼是負向流程呢？常見的包含空值、載入中、讀取錯誤、操作失敗、數量達上限等。以下舉兩個實際的例子：
一、範例：登入頁
登入頁為功能型的頁面，包含了以下幾種情境：忘記密碼、帳號或密碼輸入錯誤、輸入錯誤達上限、需要協助等，除了盤點這些狀態，也需要想如何協助使用者解決這些問題，他的下一步應該是什麼都需要鋪出來。
二、範例：動態牆
動態牆為內容型的頁面，包含了以下幾種情境：沒有動態、動態已看完、資訊載入中、資料讀取錯誤、系統維護中等。
Wireframe 技巧 3.考慮不同角色的使用情境
有些產品會同時存在多個角色的使用者，例如：
（1）蝦皮同時服務買家與賣家。
（2）親子產品的使用者包含了家長與小孩。
（3）外送平台同時有接單者與下單者。
此時頁面要如何包容不同使用者的需求，不同使用者之間如何互動，資訊會如何影響，是否會有切換使用者的功能，這都需要全盤的思考。
Wireframe 技巧 4.留意資訊層級
資訊層級（Information Architecture）的梳理是 Wireframe 非常重要的部分，在設計每個畫面時，都需要思考使用者在這頁首要達到的目標為何？最在意的資訊是什麼？最主要引導使用者的行為是什麼？以此作為資訊層級強弱的引導。好的引導可以讓產品有更好的易用性，幫助使用者更快速無痛地完成任務。這裡也分享一個易用性測試時可以問的問題：「剛剛那頁你印象最深刻的內容是什麼？」透過這個問題可以幫助我們確認最重要的資訊是不是有被使用者記得，如果有的話就達到目標了！
Wireframe 技巧 5.定義互動細節
Wireframe 除了靜態圖以外，也包含了互動，而這也是許多人容易忽略的地方。這包含了兩個層面：
一、UI 元件的互動邏輯
以圖表為例，需要定義的內容很多，包含圖表上的每根 bar 邏輯定義為何？不同時間軸切換如何影響圖表顯示？是否可以左右滑動顯示更多資訊？長壓或點擊會不會有其他反應？同時也可以去確認資訊來源，會不會有效能過載的問題，這些狀態的畫面都需要盤點出來。
二、頁面操作的互動邏輯
除了各元件的互動以外，整個頁面又有哪些互動需要定義呢？常見的像是滑動時 Header 會不會改變樣式？哪些地方在滑動時會 Fixed、哪些地方會跟著頁面滑動？會不會有 Scroll Bar 的出現？一個幫助思考互動邏輯的方式是，設計師可以嘗試在設計好頁面之後進行 Prototype 的串連，從實際操作感受細部互動，讓設計更加完善唷！
Wireframe 技巧 6.響應式設計（Responsive Web Design, 簡稱 RWD）
現在已經是一人多機的時代，一個產品可能需要顧及多平台的體驗，包含 App、網站、Mobile Web（以手機開啟網站）、甚至是 iPad 等各種裝置。為了讓跨平台間有一致的使用體驗，響應式設計（Responsive Web Design, 簡稱 RWD）是常見的做法。
一般來說，UX/UI 設計師會先以一個主要平台去設計，同時去定義元件如何隨螢幕寬度、高度做延展。例如：哪些間距會固定尺寸？哪些間距回隨裝置延展？元件的對齊邏輯是什麼（置左、置中、置右…）？元件在縮放時是否需要固定比例？是否會有最大或最小寬度、高度的限制？
一些設計平台例如 Figma 也有 Auto layout 的功能，還有一些外掛程式（Plug-in） 可以讓 UX/UI 設計師更有效率地工作。這是非常重要的能力唷！
Wireframe 與 UI 軟體工具
所以說，如果要開始做 Wireframe，可以從哪些工具開始使用呢？根據 UX tools 統計，2022 年最多人使用的 UI 軟體工具依序為 Figma, Adobe XD, 及 Sketch。其中 Figma 使用的比例遠遠高過於任何其他的工具，顯示為目前相當主流的設計軟體。我建議可以先從比較主流的設計軟體工具開始學習，會更容易跟其他 UX/UI 設計師接軌。
Figma 的優點除了支援 Mac 及 Windows 雙系統、不用另外下載 app 、還有大量的 Plug-in 及社群資源。除了上手簡單之外，也已經有許多教學課程在網路上，因此非常推薦想要入門的朋友可以試試看唷！
若有製作簡易 Prototyping 的需求，Figma 仍然是非常主流的工具，除此之外 Adobe XD, 及 Protopie 同樣是使用的前三名。但若有更進階的細緻互動，則會建議使用 Protopie, Axure, Webflow 等進階 Prototyping 工具，可以依照自己的需求去選擇適合的軟體工具。
本文介紹了新手 UX/UI 設計師在設計 Wireframe 時常見的問題，並從實際案例中萃取 6 大實作技巧，這些設計心法可以幫助入門小白更快設計出專業的內容唷！文末提供 2022 年的設計軟體工具統計，但也提醒大家不需要被工具綁住，因為工具終究會不斷替換，要保持著持續學習的心態，背後的邏輯跟概念才是最核心的喔！
延伸閱讀
- Wireframe 是什麼？從目的、對象、流程抓住UXUI的設計精髓
- 想找 UX 工作卻不知從何開始? 3 個 必要考量面向 / Ft. 喬治先森
- 設計思考是什麼 ? 學會讓你贏在 AI 時代起跑點 !
- 如何應用 ChatGPT，幫你提升 UX / UI 工作效率
