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]

產品經理的核心能力-框架思維
產品經理的專業能力跨度大,其中最核心的是搭建框架的能力,搭建框架的工作無法由團隊中其他職能的成員代勞。從Chrome的案例中,我們可以看出框架思維能帶來極高的價值,是所有產品經理都必須具備、磨練的能力。
如何建立專案計畫?
計畫,就像是張地圖,一步步把路線上每個里程連接起來,讓遙遠的目的地,有個清楚的路徑,可以依循前進,並隨時做調整,最終能夠抵達終點。
【產業分析】網紅經濟的興起與生態圈懶人包
「網紅經紀」實際上是一個相當複雜的生態圈,對於大/中/小型的網紅都有各自的生存之道。分析網紅的生態與了解其他網紅的變現方式,或許是中小型網紅、甚至是其他領域的創作者,可以思考的下一步發展方向。