繪製線框圖（Wireframe）的視覺處理小技巧
在這篇文章中我們只討論畫 Wireframe 過程中的相關注意事項，所以假設資訊架構規劃，都已經處理完成了。
在這篇文章中我們只討論畫 Wireframe 過程中的相關注意事項，所以假設資訊架構規劃，都已經處理完成了。
我習慣使用 Axure 繪製 Wireframe，除此之外，建議使用向量設計的軟體，比較方便管理物件及修改。
技巧一：謹慎使用視覺元素
一開始接觸 Wireframe 工作的人應該都看過下面圖右版本的 Wireframe。我看過許多次滿頭大汗做出這樣模擬圖的 PM 被設計師嫌棄之後，信心全失的沮喪背影（包括我）。
既然 Wireframe 的作用是技術規格的溝通，那麼花時間在挑選情境照片以及處理視覺元素，都是浪費時間的行為，請把設計師的工作留給設計師。
另外，像是手機邊框的圖也可以避免。只看一張畫面不會察覺問題，但完整的 Wireframe 檔案中，可能一個頁面流程及狀態就有十多個變化，為了降低認知的負擔，不必要的視覺元素越少越好，避免花俏的表現。
列出視覺元素的幾點使用建議：
- 所有的文字只使用深灰色，例如 #333333
- 限制自己只用單一字型，例如黑體
- 最多只用三或四種字級大小，例如大標、次標題、一般內文、小字
- 不要用照片或插圖，系統要填入圖片的地方一律用方框打叉叉
- 不要用插畫風格的 icon 或裝飾性圖案，減少花俏，避免視覺風格的暗示
技巧二：使用適當的比例做基礎畫布
我們開發的產品雖然最終要去適應多種裝置，但在早期繪製 Wireframe 的時候，建議還是要選定目標裝置的比例尺寸，作為一開始的畫布大小。
規劃 WEB 專案時，我會參考 Bootstrap 的網格尺寸架構，按照 Bootstrap 的 container 容器寬度來設定 WEB 專案的 Wireframe 畫布。
看到熟係的比例尺，網頁設計師跟前端工程師們都會對你投以親切的眼神，他們都是每天盯著 Retina 螢幕研究像素的人，相信我，如果你的比例尺亂來，他們感覺痛苦的話，對你閱讀的 Wireframe 耐心會大幅下降。
技巧三：只描繪 UI 元件以及使用UX文案
什麼是「UI元件」？ 使用者介面（User Interface）是指系統與人類互動、交換資訊用的介面。或者也可以理解成：呈現資訊、可以互動操作的視覺元素。
Wireframe 是指示精確的建築藍圖，所以盡可能保持畫面上每一個文字、線條或幾何圖形簡潔，只為了表達規格而使用視覺元素。
同樣的道理，介面上的文案也是 UI 的一部分。在 Wireframe 階段要清楚的定義介面的文字用語，特別是專案有多語系需求時影響特別大，如果要做中英版本，最好跟你的PM、 UI 設計師一起討論更精確的用字。
這兩年許多 APP 的設計師會將 icon 視為輔助，文字作為 UI 主角。最大的好處是許多不同文化、年齡層的用戶對於圖形 icon 理解的程度不一，文字 UI 反而能在第一時間正確溝通，精準的用字也能展現產品的個性。
像這樣運用文字來影響使用者體驗的領域，也被稱為 UX 寫作。一般在網路廣告、規劃 Landing Page 以及購物車轉換的介面上，有被稱為 Call-to-Action 的按鈕，在這類介面上文字的魔力反而是主角了。
以上三點是我在繪製 Wireframe 時會注意的視覺表達技巧，如果有想到再持續補充，也歡迎各位提供您的見解。
相關文章：
