作者：黃玫瑋 / 臺灣大學計算機及資訊網路中心程式設計組資深專員
Wireframe是甚麼？不知道該使用哪種工具繪製Wireframe嗎？本文將以網站設計為範例，利用手邊大家常用的PowerPoint簡報投影工具，教您如何快速繪製Wireframe，解決與長官、協作同仁及程式師之間溝通的困擾。
簡介
Wireframe通常稱作線框稿，多用來作為模擬設計作品架構的簡易初稿，專案團隊可將蒐集到的需求，經由彙整、討論、分析後，利用Wireframe的簡易繪製，明確了解專案的功能及目標，其呈現方式多會排除影響視覺上判斷的元素細節，例如色彩、字型、粗細、大小、內容等，大多著重於以灰階色彩、線條與框線來呈現各功能區塊的布局。
常用工具
目前來繪製Wireframe的工具，可以從最簡單的手繪到進階電腦繪製工具都有，概略介紹如下：
- 手繪：利用紙和筆或白板開始，無須任何技術，最方便上手，缺點是修改不方便，且有浪費紙張資源以及檔案保存問題。
圖1.手繪示意圖
- 簡報軟體：PowerPoint、Google Slides及Keynotes等常使用來做投影簡報用的工具，可快速利用其簡易繪圖功能以及轉場效果來模擬專案架構，缺點遇到是太複雜的架構及流程設計比較難達成。
圖2.利用PowerPoint繪製之示意圖
- 線上工具：網路上很多提供快速繪圖功能的網頁，常見有wireframe.cc、Draw.io、Cacoo等，只要透過現有的元件或範本，簡單的拖拉組合布局，就能快速完成一份Wireframe線框稿，缺點是需要註冊才能使用，有些工具遇到太複雜的架構及流程設計也是比較難達成。
圖3.利用wireframe.cc繪製之示意圖
- 專業工具：常見有Adobe XD、Sketch、Figma等，其除了上面介紹的線上工具的布局功能外，還能進階精細的設定每個按鈕或文字要連結到哪個畫面，不只簡易的Wireframe線框稿設計，甚至可進一步製作模型模擬真實網站每一頁互動流程，另一個優點是檔案可即時同步修改儲存上雲端，專案團隊可以線上協同合作，任何人亦可隨時隨地在不同平台裝置瀏覽設計成品，缺點是有的需要付費安裝軟體，在操作使用上多有一點門檻，需要花費一些時間學習介面的操作使用。
圖4.利用Figma繪製Prototype模型架構之示意圖
PowerPoint如何繪製
基本上簡易Wireframe線框稿設計只需要線條、區塊、文字三種元素組成，可利用PowerPoint的【插入】→選圖案、圖示、圖表或文字方塊來組合成元件，網站設計除了LOGO外，就是由許多元件組成資訊架構，網頁上常使用到的元件包含：圖片、表格、段落文字、影音、表單(如搜尋框、文字輸入、單選欄位、勾選欄位、按鈕)、輪播等，如需簡易的換頁流程，也可以利用轉場的設計做動態模擬。
附上以Microsoft Office 2021版PowerPoint工具繪製幾個常用元件範例供下載參考，另外，Microsoft Office 2021內建幾款圖示也常用於網頁，如版權允許，亦可直接自行拖拉下來使用。
元件範例下載：
- 1.https://www.cc.ntu.edu.tw/chinese/services/wirefram%20sample%20for%20epaper.pptx
- https://reurl.cc/o79gLq
圖5.PowerPoint插入圖文說明
圖6.Office內建常用於網頁的圖示示意
結語
隨著使用者意識抬頭，設計團隊應善用網路上豐富資源來建立Wireframe作為良好溝通，網路上也可以搜尋到很多現成的Wireframe線框稿模板參考，期許一同帶給大家更優質的使用經驗。