萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 軟體知識 >  >> 影像處理 >> 平面設計理論

手繪線框圖實戰 SOP:工具、六步驟、避坑指南

群友詢問手繪 Wireframe 工具與方法,分享個人經驗(現多直接進 Axure,麥克筆幾乎不用,新手可學)。

三大核心工具(挑順手便宜的)

  • 酒精性麥克筆:Pantone、Copic、NEOPIKO 均可。只買平頭+硬尖,別買毛筆軟頭。灰階買 1、3、5 號 + 1-2 支淺色即夠,豔色/深色用不到。貴,能省則省。
  • 油性色鉛筆:鉛筆/原子筆/水性筆遇酒精麥克筆全髒。淺色油性色鉛筆打草稿,錯了擦得掉,酒精筆抹過不糊,救星!文具店隨便買一支(約 20 元)。
  • 粗黑原子筆:描框用。ZEBRA Z-1 S 0.7 推薦,便宜大碗。想專業可買針管筆。

六步驟畫出專業手繪 Wireframe

  1. 白紙:iPhone/iPad 尺寸紙。UI Stencils 官網有免費 PDF 模板。
  2. 打草稿:淺色油性色鉛筆畫主要區塊。依據「為何畫 3 次 Wireframe」習慣,這是第 2 版,有第 1 版鉛筆稿為藍本,不易出錯。
  3. 上底色:1 號灰階麥克筆最淺起手,顏色淺可多疊,重了無救。
  4. 描邊:粗黑筆描輪廓,畫面即有模有樣。色鉛筆錯誤被覆蓋。Icon 此階段畫圈圈代替,架構未定前別畫 Icon。
  5. 寫字:0.5mm 以下細黑筆寫字補細節。Uni Style FIT 0.38/0.28 推薦。
  6. 上重點色:關鍵處用深灰或亮色加強,亮色更討喜、視覺有重心。
  7. 外框:最後畫,避免後續加墨克筆弄髒。不畫也可,但加框視覺更聚焦、有神。

避坑與小貼士

  • 很多企劃/PM/客戶不看手繪圖,只認電腦圖,故手繪機會越來越少。
  • Status bar(訊號、時間、電池)通常懶得畫,除非設計有依賴此欄。
  • 現代人少寫字,字醜推薦《寫字基本功》(附原子筆/中性筆/鋼筆字帖),再進階蕙風堂字帖。粗黑筆拿來練字剛好。
  • iPhone 隨手拍紙面很醜,不介意。
copyright © 萬盛學電腦網 all rights reserved