Wireframes
線框圖
摘要 （Abstract）
線框圖是一個網站圖形化的骨架，對於產品的作用就如同建築藍圖。比介面草圖更為精緻化，通常用來描述使用者介面中的元件細節與操作上的互動流程。通過線框圖將介面內容進行組織分類以及規劃頁面間的動線，建構出整個系統的全貌，表達用戶交互界面的主視覺和描述。
定義（Definition）：
線框圖（Wireframes） 除去各種視覺影響的複雜元素，只用簡單的線條、方框和灰階色彩來繪製，將看到的人專注在該模型的功能和操作上。不管是用手繪或是軟體繪圖都可以。簡單來說，線框圖就是一個網站或是一個程式的介面草圖，在發展出一個真正的網頁/程式之前，必須先有個明確的架構，與客戶溝通，確認對方想要的型，再與其他的人（工程師、UI設計師）溝通、討論、實施產出。如果在中途有發現不能使用或是無法放置的情況下，可適時地作修改，直到東西完整為止。
步驟（Procedure）：
Step1. 了解後列出在頁面/畫面上放置的元素
Step2. 畫出線框圖（wireframe）利用像素化的灰度界面工具集 ，所有元素的大小、位置和順序需要全部考慮清楚，這樣才可以更精確地設計用戶介面的運作方式，讓介面概念變得更清晰和詳細。
Step3. 拿給專案參與者（使用者、老闆、專案組員）看，互相討論以及交換意見。
Step4. 修改線框圖
- Step3 跟 Step4 一直循環，直到專案參與者都說可以為止。
案例（Case）
Step1. 了解後列出在頁面/畫面上放置的元素
今天我們要做一個減重日記的APP，使用者希望透過FB登入，以方便APP的使用。登入後，輸入自己的基本身體資料，並可記錄自己每天的三餐及飲水量。透過加入減重群組，可以一群人相互討論減肥方式、減肥飲食及互相督促。
Step2. 畫出線框圖（wireframe）利用像素化的灰度界面工具集 ，所有元素的大小、位置和順序需要全部考慮清楚，這樣才可以更精確地設計用戶介面的運作方式，讓介面概念變得更清晰和詳細。
根據剛剛了解的功能，畫出一系列的基本圖型。
Step.3 拿給專案參與者（使用者、老闆、專案組員）看，互相討論以及交換意見。
經過了一些意見交換，決定將用FB登入的功能取消，改成額外註冊。APP開啟登入的背景圖改為日式美女圖，減重日誌的個人頁介面也有小幅的修改等等。
Step.4 修改線框圖
再根據討論修改部分，重新繪製一份線框圖。
※Step3 跟 Step4 一直循環，最後生出來的結果就是這樣。
完成！
案例二（Case）
Step1.了解後列出在頁面/畫面上放置的元素
保養品推薦APP，使用者希望透過FB登入，以方便使用。登入後，輸入自己的基本個資，再藉由APP內的肌膚檢測來判定膚況推薦適用的保養品，領取免費試用品。透過加入相同膚況群組，可以一群人相互討論使用保養品上的經驗。
Step2.畫出線框圖（wireframe）利用像素化的灰度界面工具集 ，所有元素的大小、位置和順序需要全部考慮清楚，這樣才可以更精確地設計用戶介面的運作方式，讓介面概念變得更清晰和詳細。
依據剛剛了解的功能及元素，畫出一系列的基本圖型。
Step3.拿給專案參與者（使用者、老闆、專案組員）看，互相討論以及交換意見。
經過一些討論以及意見交換後，決定將APP中的返回圖示移置介面右上角。個人頁以及群組介面也有小幅的修改等等。
Step4.修改線框圖
再根據討論後修改，重新繪製一份新的線框圖。
※Step3 跟 Step4 一直循環，直到線框圖完整。
參考資料（Reference）
嫁給 RD 的 UI Designer。初學者的 Prototype。
Emily Carr University。美味台灣app設計 。
Emily Carr University。美味台灣app設計
ITREAD01。你真的搞懂什麽是線框圖，什麽是原型圖了嗎？
資料整理：2018 黃翊婷、2019 連珮含、2021廖翊晴
總編輯：羅歆慈
編輯與排版：李明容