繪製線框圖（Wireframe）的視覺處理小技巧 - 獸群之心/ Soking

在Wireframe 階段要清楚的定義介面的文字用語，特別是專案有多語系需求時影響特別大，如果要做中英版本，最好跟你的PM、 UI… GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWrite繪製線框圖（Wireframe）的視覺處理小技巧在這篇文章中我們只討論畫Wireframe過程中的相關注意事項，所以假設資訊架構規劃，都已經處理完成了。

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

技巧一：謹慎使用視覺元素一開始接觸Wireframe工作的人應該都看過下面圖右版本的Wireframe。

我看過許多次滿頭大汗做出這樣模擬圖的PM被設計師嫌棄之後，信心全失的沮喪背影（包括我）。

（左）簡潔的線條視覺元素VS（右）努力想模擬真實的情境圖既然Wireframe的作用是技術規格的溝通，那麼花時間在挑選情境照片以及處理視覺元素，都是浪費時間的行為，請把設計師的工作留給設計師。

另外，像是手機邊框的圖也可以避免。

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

列出視覺元素的幾點使用建議：所有的文字只使用深灰色，例如#333333限制自己只用單一字型，例如黑體最多只用三或四種字級大小，例如大標、次標題、一般內文、小字不要用照片或插圖，系統要填入圖片的地方一律用方框打叉叉不要用插畫風格的icon或裝飾性圖案，減少花俏，避免視覺風格的暗示簡單線條的icon比花俏表現的icon更適合Wireframe技巧二：使用適當的比例做基礎畫布我們開發的產品雖然最終要去適應多種裝置，但在早期繪製Wireframe的時候，建議還是要選定目標裝置的比例尺寸，作為一開始的畫布大小。

選擇一個主流的手機裝置比例作為行動版的畫布比例規劃WEB專案時，我會參考Bootstrap的網格尺寸架構，按照Bootstrap的container容器寬度來設定WEB專案的Wireframe畫布。

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

技巧三：只描繪UI元件以及使用UX文案什麼是「UI元件」？使用者介面（UserInterface）是指系統與人類互動、交換資訊用的介面。

或者也可以理解成：呈現資訊、可以互動操作的視覺元素。

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

左右兩張圖在功能上相同，但右圖作了超過功能指示以外的必要視覺元素同樣的道理，介面上的文案也是UI的一部分。

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

使用文字作為UI的主角，降低不同文化用戶識別的門檻這兩年許多APP的設計師會將icon視為輔助，文字作為UI主角。

最大的好處是許多不同文化、年齡層的用戶對於圖形icon理解的程度不一，文字UI反而能在第一時間正確溝通，精準的用字也能展現產品的個性。

像這樣運用文字來影響使用者體驗的領域，也被稱為UX寫作。

一般在網路廣告、規劃LandingPage以及購物車轉換的介面上，有被稱為Call-to-Action的按鈕，在這類介面上文字的魔力反而是主角了。

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

查看獸群之心的UX文章目錄相關文章：快速認識UX設計中的服務流程圖線框圖（Wireframe）標註的識別規劃小技巧UX設計師腦袋的認知成本我入行產品UX的攻略Wireframe到底是PM、UX還是UI來畫？Somerightsreserved--1Morefrom獸群之心/SokingFollow千綺創意設計Co-Founder/產品設計總監，目前經營軟體領域的體驗設計顧問公司，也從事UX教學，喜歡以工作坊形式，引導你體驗UX領域的專業知識。

工作聯絡：[email protected]?Learnonthegowithournewapp.TryKnowableAboutHelpTermsPrivacyGettheMediumappGetstarted獸群之心/Soking5.4KFollowers千綺創意設計Co-Founder/產品設計總監，目前經營軟體領域的體驗設計顧問公司，也從事UX教學，喜歡以工作坊形式，引導你體驗UX領域的專業知識。

工作聯絡：service@soking.ccFollowMorefromMediumAfiaKissiinBootcampStartingtheDesignProcess:DefineQingranNiDesignPhilosophy:3TenetskeepUXdesignersthriveNutchayaJHowtogetuserforaninterviewinDefiindustryGuoChen(Greta)CultureMile(Week5) — MacroUXHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable