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

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

(左)簡潔的線條視覺元素 VS(右)努力想模擬真實的情境圖
  • 所有的文字只使用深灰色,例如 #333333
  • 限制自己只用單一字型,例如黑體
  • 最多只用三或四種字級大小,例如大標、次標題、一般內文、小字
  • 不要用照片或插圖,系統要填入圖片的地方一律用方框打叉叉
  • 不要用插畫風格的 icon 或裝飾性圖案,減少花俏,避免視覺風格的暗示
簡單線條的 icon 比花俏表現的 icon 更適合 Wireframe

技巧二:使用適當的比例做基礎畫布

選擇一個主流的手機裝置比例作為行動版的畫布比例

技巧三:只描繪 UI 元件以及使用UX文案

左右兩張圖在功能上相同,但右圖作了超過功能指示以外的必要視覺元素
使用文字作為 UI 的主角,降低不同文化用戶識別的門檻
查看獸群之心的 UX 文章目錄

相關文章:

--

--

千綺創意設計 Co-Founder / 產品設計總監,目前經營軟體領域的體驗設計顧問公司,也從事 UX 教學,喜歡以工作坊形式,引導你體驗 UX 領域的專業知識。 工作聯絡:service@soking.cc

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
獸群之心 / Soking

獸群之心 / Soking

5.7K Followers

千綺創意設計 Co-Founder / 產品設計總監,目前經營軟體領域的體驗設計顧問公司,也從事 UX 教學,喜歡以工作坊形式,引導你體驗 UX 領域的專業知識。 工作聯絡:service@soking.cc