DMA01
繪製線框圖(Wireframe)的視覺處理小技巧

繪製線框圖(Wireframe)的視覺處理小技巧

獸群之心 / Soking

在這篇文章中我們只討論畫 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元件」? 使用者介面(User Interface)是指系統與人類互動、交換資訊用的介面。或者也可以理解成:呈現資訊、可以互動操作的視覺元素。

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

左右兩張圖在功能上相同,但右圖作了超過功能指示以外的必要視覺元素

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

使用文字作為 UI 的主角,降低不同文化用戶識別的門檻

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

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

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

 

相關文章:

 

 

原文出處:繪製線框圖(Wireframe)的視覺處理小技巧

 獸群之心 / Soking
獸群之心 / Soking

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

Hahow線上課:https://hahow.in/cr/think-with-ux

工作聯絡:[email protected]

團隊的 GIT 分支管理策略 (3) : 持續整合以及相關比較
沒有一定說哪種方式比較好,不同的團隊組成適合的模式不同,但如果想要讓整個開發更為順暢、效能更加提高,提升成員們的技術並且往持續整合的方向移動是比較符合邏輯的選擇。
PM 知多少?系統化學習數位專案管理知識
分享 PM 新手村統整哪些數位管理者需要的數位知識。
Wireframe到底是PM、UX還是UI來畫?
繪製 Wireframe 過程,必須整理出使用情境、資訊架構、功能流程等整體性的佈局所需要的決定,才能在後續細化到各頁面具體的功能以及任務流程上。