Day 6 - Wireframe 線框稿

每日一談

嗨 ! 大家好，我是阿蘇
不知不覺就來到了 Day 6 ，有沒有開始對 Side Project 有些靈感及概念了呢
今天談的主題是 Wireframe 線框稿，當專題發想確立主題完成，我們就會進入到下一步需求及內容、版型規劃，這時候就會開始繪製線框圖，事先將版型跟專題方向確定，所以繪製 Wireframe 線框稿也是很重要的一環喔!

那我們進入今天的正題吧! 讓我們看下去

Wireframe 是什麼 ?

Wireframe是一種低擬真呈現專題/產品的方式，我們會除去視覺、設計，使用簡單的線條、灰階、區塊/框限、文字模擬專題/產品，呈現專題/產品的大致架構及排版規劃，並盡量模擬正式上架，盡量避免使用假字(排版)。
Wireframe 線框圖範例

圖片資料來源: FreeWire

Su 專題經驗談 (線稿圖>設計稿成品)
下面可以看到我的 Side Project ，我先繪製了大致的區塊及相關文字，最後 Mock up 變成視覺設計稿進行微調，之後再進入正式開發產出網站，如果沒有事先繪製 Wireframe，可能會發生開發到一半缺少資訊，專題呈現也不夠完整，所以事先繪製 Wireframe 是很重要的 !

Wireframe 重要性

在正式開發及多人協作上， Wireframe 也是開發事前很好的溝通、需求建立工具，在客戶需求討論上，客戶非專業往往對開發沒什麼概念，這時就會由 PM 繪製 Wireframe 跟客戶討論，建立基礎需求版型並討論規劃，Wireframe 也能避免修改過多過於浪費時間，繪製好 Wireframe 在進行下一步 Mock up 精稿，產出讓人眼前一亮的作品，是不是覺得很棒呢 !

客戶: 沒錯 ! 這個就是我要的 !

繪製 Wireframe

繪製 Wireframe 有很多軟體可以進行，像是:

• AdobeXD
• Whimsical
  適合初學者，缺點是使用區塊數量有上限，文字不易複製
• Figma
  有插件、不限制數量、文件、可多人協力，美工圖片調整方便
  還有很多軟體是可以繪製 Wireframe ，對這塊有興趣的可以上網搜尋看看，

Su 專題經驗談 (線稿圖)
Side project Wireframe - 汪喵你我知
這邊也分享我的作品的 Wireframe ，雖然不是很完美，也不算是很正式的Wireframe (時間不夠啊啊啊)，讓大家見笑了，但是還是希望分享給大家參考，希望能幫助到初次專題的大家。

很高興能跟大家分享繪製 Wireframe 的一些小心得，謝謝大家耐心看完，
明天會分享使用 Figma 繪製 Wireframe 線稿圖教學(圖文)，
讓大家也能輕鬆繪製 Wireframe，謝謝大家!