線框圖（Wireframe） 是一種低保真度的設計原型，在去除所有視覺設計細節之下，進行頁面結構、功能、內容規劃。 初次接觸Wireframe的人會非常不習慣這種呈現方式，頁面上只有方框和文字，沒有圖片和色彩。 繪製Wireframe的目的在於確認每一個頁面的構成，重點在於畫面上要呈現什麼內容、而不是看起來漂不漂亮。

線框圖除去各種視覺影響的複雜元素，只用簡單的線條、方框和灰階色彩來繪製，將看到的人專注在該模型的功能和操作上。不管是用手繪或是軟體繪圖都可以。簡單來說，線框圖就是一個網站或是一個程式的介面草圖，在發展出一個真正的網頁/程式之前，必須先有個明確的架構，與客戶溝通，確認對方想要的型，再與其他的人（工程師、UI設計師）溝通、討論、實施產出。如果在中途有發現不能使用或是無法放置的情況下，可適時地作修改，直到東西完整為止。

以下為幾項製作技巧：

1. 謹慎使用視覺元素

為了降低認知的負擔，不必要的視覺元素越少越好，避免花俏的表現。 視覺元素的幾點使用建議：

1. 所有的文字只使用深灰色，例如 #333333
2. 限制自己只用單一字型，例如黑體
3. 最多只用三或四種字級大小，例如大標、次標題、一般內文、小字
4. 不要用照片或插圖，系統要填入圖片的地方一律用方框打叉叉(或使用灰色塊)
5. 不要用插畫風格的 icon 或裝飾性圖案，減少花俏，避免視覺風格的暗示


---

2. 使用適當的比例做基礎畫布

建議選定目標裝置的比例尺寸，作為一開始的畫布大小。



3. 只描繪 UI 元件以及使用UX文案

Wireframe 是指示精確的建築藍圖，所以盡可能保持畫面上每一個文字、線條或幾何圖形簡潔，只為了表達規格而使用視覺元素。

---

1. APP WireFrame | 手機APP線框圖｜Ui Flow 範例



---

2. APP WireFrame | 非灰階色調的手機APP線框圖



---

3. APP WireFrame | 黑底呈現的手機APP線框圖



---

4. APP WireFrame | 手機APP線框圖



---

5. Website WireFrame | 網站設計登陸頁線框圖

---

Behanc上 UI發表之 WireFrame 相關之呈現

1. Traffic Police Ticketing Apps | UI UX Case Study
2. Veterinary clinic | 獸醫診所（人物誌）
3. A bus tracking app UX/UI Case Study （人物誌）
4. YOGO - Trip Planner App
5. Pet Care Mobile App UI/UX｜ Figma檔案分享｜Pet Care Mobile App

練習包內的 WireFrame 線框圖

---

範例使用 A-Simple-Wireframe-Kit 做為元件資料庫。大家可使用合適的資源，或自己繪製皆可。
本範例僅為練習之用，實際畫面及內容，以專案主題為主，請依類似的做法，自行繪製屬於自己的 WireFrame （線框圖）。

---

---

1. 首先在page中加入新的一頁，命名為『WireFrame練習』。
   Frame選擇適合的裝置尺寸進行單位畫布，範例以iphone11 pro為裝置尺寸。


---

2. 切換的Assets資料庫介面。


---

3. 加入圖框元素，將之調整為符合裝置的尺寸，作為底圖之表示。


---

4. 加入中型按鈕，作為註冊與登入按鈕


---

5. 調整按鈕尺寸，並修改文字（更簡約的線框圖，不更改文字）
   修改下方按鈕為白底灰框，灰字，以做為區別。


---

6. 調整字體樣式。


---

7. 加入標題文字，加入字體樣式，完成歡迎頁。


---

8. 利用資料庫中之元素，調整輸入框寬度，及相關位置，完成第二頁


---

9. 將最後完整之WireFrame整理於Frame頁框中，或複製於簡報中，即完成線框圖之製作。
   另調整順序，加上流程線，即完成UI FLOW之製作。


---

有時候，設計師希望提高線框稿的擬真度、強調介面設計的某些部分或讓使用者更快理解以利進行測試，設計師會快速的製作可互動的線框稿，也就是可點擊式線框稿。
初次與關係人或客戶介紹設計時，互動式線框稿將會是相當有用的。當這些人問說按下這個按鈕會發生甚麼事情?提報者可以在互動式線框稿上馬上操作，讓他們看到結果。這樣的方式肯定可以讓他們印象深刻並快速進入操作的情境中。
以線框稿簡報時須注意幾點

• 非專業的關係人 (如顧客或非技術領域的管理者等) 在觀看線框稿的時候，可能在心中會產生疑問，例如:到底這是不是最終設計?與最終設計之間的關係為何?
• 這就是為什麼我們必須花點時間來解釋線框稿的定義，以及它在產品設計流程中的所扮演的角色與意義。在與不識此概念的關係人提報之前，提報者更需要自己釐清線框稿的目的與概念，才能有效的溝通並達成目的。

練習包內的 WireFrame 線框圖

下拉點選『Duplicute to your draft』複製後製作。

---

互動式線框稿不需要複雜的Prototype技巧，僅需簡單的按鈕及頁面的連結即可，接下來示範簡單的Prototype練習。

---

1. 開啟自己製作的WireFrame檔案。

   ---

   
2. 右側面板由『Design』切換至『Prototype』


---

3. 點選第一頁歡迎畫面的『Sign up』註冊按鈕，會出現空心圓點，直接點選連接至下一頁即可。


---

4. 同理，點選不同按鈕或文字，至欲連結的頁面。


---

5. 輸入框出現鍵盤之作法：點選輸入框連接至鍵盤，點選『Open overlay』（打開覆蓋），Overlay覆蓋範圍設定為『Bottom Center』頂部中間。Animation動畫路徑為由上而下


---

6. 點選鍵盤消失之作法：點選鍵盤，點選『Close overlay』（結束覆蓋）。


---

7. 線框圖的互動方式簡單易懂即可，不需太複雜的操作，便於與內部（工程師、設計師）及外部（客戶）溝通討論基本架構與流程，以及操作順暢度為目標。

---

開始進行期中作業簡報

期中簡報參考：

1. APP開發與設計｜學長姐簡報參考

2. APP開發與設計｜簡報範本

3. Design實作練習包(本學期設計練習包)

簡報形式及風格可自行決定，可選擇以Figma Design 或 Figma Slides 製作，但必須以Figma製作。

---

期中簡報中WireFrame線框稿可直接以色稿進行，但可不用以精稿方式進行，以快速可展示內容與架構的方式呈現。