什麼是線框圖

---

什麼是線框圖？

線框圖是系統的螢幕草圖，有時被稱為藍圖或骨架。它們的目的是向客戶展示和解釋系統設計理念，最終促成對所提出理念的共識。

線框圖展示與所提功能相關的「足夠」資訊。每個線框圖都包含代表螢幕元件或螢幕元件佔位符的基本圖形元素。線框圖呈現螢幕布局以及螢幕內容的排列方式。它著重於螢幕的功能以及使用者如何與系統互動以達成其需求，而非最終螢幕實際外觀的樣貌。

在進一步討論之前，讓我們先看看一個基於 youtube.com 建立的線框圖。

如你所見，線框圖就是這麼簡單直接。任何人都能輕鬆理解。它有助於開發團隊輕鬆解釋使用者將如何與網站互動。

線框圖僅僅是藍圖

線框圖僅是使用者介面的低保真版本，並非真實螢幕的呈現。線框圖旨在用來展示功能、使用者互動與螢幕流程，而不需明確指定螢幕元件的外觀樣式或元件行為方式，以達到最高的可用性。

線框圖範例

這裡有一個網頁首頁的線框圖範例：

這裡有一些 Android 應用的線框圖範例：

這裡有一個 iPad 應用的 iPad 線框圖範例：

這裡有一個 iPhone 應用的 iPhone 線框圖範例：

最後，這裡有一個桌面應用程式的線框圖範例：

使用線框圖的好處

釐清使用者介面

客戶可能無法理解像滑桿、翻轉框、Bootstrap 等技術性螢幕設計術語。線框圖由所有人都能理解的基本圖形元素組成，有助於客戶了解功能如何運作，以及他們如何與系統互動以達成目標。

早期考量可用性

使用者體驗（UX）如今是每套軟體的重要考量。在需求收集階段使用線框圖，將使用者體驗的考量帶入專案初期。即使尚未開發任何原型或繪製真實的螢幕設計，使用者仍能體驗系統將如何運作。

成本效益高

製作完整且高保真的螢幕設計需要時間與專業知識，最終導致高昂成本。線框圖是一種快速且低成本的方式來創建基本的螢幕草圖。同時，也讓修改甚至全面重做草圖變得簡單且便宜。

更樂意進行變更

設計變更是不可避免的。使用完整的系統原型或模擬來確認設計理念的問題在於，已經投入了大量工作，而後續的修改將涉及大量重做，意味著額外的時間、精力與成本。在這種情況下，客戶與開發團隊更不願意提出疑慮或要求變更。相反地，產生和修改線框圖所需時間少得多。因此，每個人都更願意提出並進行變更。

讓客戶參與

由於線框圖粗糙且靈活，它為客戶提供了腦力激盪和提出建議的空間。而且，由於線框圖的修改週期短，客戶會積極提供反饋，這使得他們更有可能簽核最終設計。

如何有效使用線框圖？

使用線框圖可以為開發團隊和客戶帶來許多好處，但這只有在明智且恰當地使用時才成立。線框圖的一個典型誤用是將其視為螢幕設計的替代品。這會使製作與優化變得困難且昂貴，降低線框圖的實用性。在本節中，我們將介紹一些有效的線框圖設計技巧。

1. 線框圖應保持簡單且足夠即可。簡單才能快速且容易製作，也方便隨時丟棄並重新製作。低保真的呈現方式也使其更具全面性與溝通性。因此，無需花費太多時間在美化繪圖、對齊物件，或使用漂亮的字體等。
2. 在線框圖中，我們可以將實際內容（實際內容）以文字佔位符取代，而非顯示真實內容。這可以避免浪費時間在不必要的內容準備上，也能防止讀者被文字內容分散注意力。但如果確實需要顯示文字，可考慮放置一些虛擬文字。你可以在網路上輕鬆找到虛擬文字產生器。
3. 使用註解可幫助您描述一個元素（例如「公司標誌」）或解釋與其行為相關的內容（例如「5 秒後隱藏」）。如有需要，請使用。但再次強調，不要嘗試記錄每個線框圖元素。只有在必要時才使用註解。
   
4. 線框圖可以手繪，但我們通常使用軟體來建立線框圖，以便更高效且更容易管理我們的工作。此外，某些線框圖軟體提供紙筆無法實現的功能。以下是其中三種：
   1. 狀態 – Visual Paradigm 的線框圖工具支援「狀態」概念，允許您基於現有的線框圖建立子線框圖。這不僅能節省您在建立一系列相似子線框圖的螢幕流程時的時間，也能讓相關子線框圖的修改變得更容易（因為當您修改線框圖的初始狀態時，這些變更也會反映在所有其子狀態的線框圖中）
   2. 故事板 – 故事板呈現特定情境下的螢幕流程。這使得線框圖更易於管理，展示也更加簡單。
      
   3. 透過使用者故事管理線框圖 – 使用者故事是一種敏捷工具，用於記錄使用者的關注點和需求。將線框圖納入使用者故事的情境中，可顯示使用者如何在該使用者故事所描述的工作部分中使用此功能。此外，當開發人員開始實作使用者故事時，可檢視線框圖以了解使用者的期望。
      

Visual Paradigm 提供繪製網頁線框圖、桌面應用程式線框圖、Android 應用程式線框圖以及 iOS 應用程式線框圖（iPhone 與 iPad）所需的所有線框圖工具與元件。它也支援敏捷軟體開發 以及 UX 設計工具，包含使用者故事工具, 衝刺開發, 故事板等