DMA01

繪製線框圖（Wireframe）的視覺處理小技巧

獸群之心 / Soking

我習慣使用 Axure 繪製 Wireframe，除此之外，建議使用向量設計的軟體，比較方便管理物件及修改。

技巧一：謹慎使用視覺元素

一開始接觸 Wireframe 工作的人應該都看過下面圖右版本的 Wireframe。我看過許多次滿頭大汗做出這樣模擬圖的 PM 被設計師嫌棄之後，信心全失的沮喪背影（包括我）。

既然 Wireframe 的作用是技術規格的溝通，那麼花時間在挑選情境照片以及處理視覺元素，都是浪費時間的行為，請把設計師的工作留給設計師。

另外，像是手機邊框的圖也可以避免。只看一張畫面不會察覺問題，但完整的 Wireframe 檔案中，可能一個頁面流程及狀態就有十多個變化，為了降低認知的負擔，不必要的視覺元素越少越好，避免花俏的表現。

列出視覺元素的幾點使用建議：

我們開發的產品雖然最終要去適應多種裝置，但在早期繪製 Wireframe 的時候，建議還是要選定目標裝置的比例尺寸，作為一開始的畫布大小。

規劃 WEB 專案時，我會參考 Bootstrap 的網格尺寸架構，按照 Bootstrap 的 container 容器寬度來設定 WEB 專案的 Wireframe 畫布。

看到熟係的比例尺，網頁設計師跟前端工程師們都會對你投以親切的眼神，他們都是每天盯著 Retina 螢幕研究像素的人，相信我，如果你的比例尺亂來，他們感覺痛苦的話，對你閱讀的 Wireframe 耐心會大幅下降。

什麼是「UI元件」？使用者介面（User Interface）是指系統與人類互動、交換資訊用的介面。或者也可以理解成：呈現資訊、可以互動操作的視覺元素。

Wireframe 是指示精確的建築藍圖，所以盡可能保持畫面上每一個文字、線條或幾何圖形簡潔，只為了表達規格而使用視覺元素。

同樣的道理，介面上的文案也是 UI 的一部分。在 Wireframe 階段要清楚的定義介面的文字用語，特別是專案有多語系需求時影響特別大，如果要做中英版本，最好跟你的PM、 UI 設計師一起討論更精確的用字。

這兩年許多 APP 的設計師會將 icon 視為輔助，文字作為 UI 主角。最大的好處是許多不同文化、年齡層的用戶對於圖形 icon 理解的程度不一，文字 UI 反而能在第一時間正確溝通，精準的用字也能展現產品的個性。

像這樣運用文字來影響使用者體驗的領域，也被稱為 UX 寫作。一般在網路廣告、規劃 Landing Page 以及購物車轉換的介面上，有被稱為 Call-to-Action 的按鈕，在這類介面上文字的魔力反而是主角了。

以上三點是我在繪製 Wireframe 時會注意的視覺表達技巧，如果有想到再持續補充，也歡迎各位提供您的見解。

產品設計師以及 UX 教育講師。