Wireframe (線框稿)主要目的是溝通網頁的架構、內容、功能、行為、資訊階層。會用非常簡單的灰階顏色、線條、符號或框線，來表達網頁（或應用程式）的排版架構。本文帶你學習以 wireframe 這個 UI/UX 呈現方式，研究如何透過 wireframe，傳達各種不同的使用者介面UI與體驗組件，比如資訊架構和排版。
線框稿 (Wireframe)
什麼是Wireframe？
線框稿，一般稱為 wireframe，它會用非常簡單的灰階顏色、線條、符號或框線，來表達網頁的排版架構。例如這個 Balsamiq 的例子：
如圖所見，大多數的設計元素 (如影片，圖像和文字) 都被省略代換成符號或框線。舉例來說，一個大方框表示以後要放置圖像，文字則替換成 Lorem ipsum (一種虛擬的拉丁文假字)。
用這種低仿真 (low-fidelity rendering，低階非還原真實細節) 的方式來呈現網站的設計，讓你可以專心在網頁應用程式的內容排版，而不需擔心設計的細節，比如使用什麼字體、色系、圖形或圖片。
從 Wireframe 到前端入門，3 分鐘小測驗找到你的學習起點
為什麼要製作 Wireframe？
Wireframe的主要目的是溝通：
- 架構 (頁面的不同部分如何組合在一起)
- 內容 (頁面上顯示的內容類型)
- 功能 (介面如何操作)
- 行為 (它如何與使用者互動)
- 資訊階層 (資訊的顯示和組織方式)
在某種程度上， wireframe 就像是建造房屋的藍圖。藍圖顯示每個房間的位置、有多少空間，但它不會展現房子的真實樣貌。然而，正如你通常不會在沒有藍圖的情況下建造房屋，我們通常也不會在沒有wireframe的情況下動手建立網頁應用程式 (或網站) 。
wireframe 的目的是確認內容、排版、功能等等所有的頁面元素符合你的整體設計，根據 wireframe，你可以在實際開發產品之前釐清關鍵行動並適當的配置資源。
現階段的重點不應該將焦點轉移到網頁應用程式的「外觀和感覺」上，而必須先考慮特定頁面上的內容應該位於何處，以及它的位置是否適合你的使用者。
你可能會問：「為什麼不在設計過程中釐清這些問題，而非得要特別製作一個 wireframe？」
事實上，在查看完整的設計時，很難進行這類型的評估，因為你可能會受到字體、圖像和顏色等設計元素干擾，分散掉主要目標的注意力。使用wireframe，你就不會受到那些炫目設計的影響，可以專注在內容、排版與功能身上。
wireframe 還能夠消除網站排版中的大量潛在問題，尤其是對 HTML/CSS 經驗不足的新手而言，花點時間製作 wireframe，思考網站的排版，可以節省大量的時間。如果寫到一半才回頭修正設計問題，可能會花費更多時間。
18 週建立前後端 web app 開發能力，網頁切版從這裡開始
使用 Wireframe 溝通
資訊架構 (Information Architecture, IA)
資訊架構是描述網站內容架構的一套科學方法，你也可以說是一種藝術) 。你可以透過 wireframe 來檢查資訊資訊架構的呈現方式，一個結構良好的資訊架構，應該要讓使用者能不費力地在網頁上瀏覽複雜的資訊。
例如下圖，你可以看到線框的不同部分是如何組成的，以及每個區塊如何表示不同的資訊。
應用程式的資訊架構看起來像下圖的樣子。請注意這些不同的資訊 (例如標題、照片、內容) 如何在網頁上排版、分類。我們僅僅靠著框線就可以看出設計的功能，而使用者可以根據資訊的結構，直覺地操作網頁。
使用者介面 (User Interface, UI)
Wireframe 雖然是粗略的草圖，但並不意味著它們必須看起來凌亂。wireframe 會傳達網頁應用程式的架構、內容、功能，也可以提供你的使用者一個乾淨、易於理解的排版。wireframe 可以讓你好好思考真實呈現在用戶介面時，區塊之間的對齊，以及間距的問題。這個階段你將有機會可以大幅改善網站的架構與設計順序，讓版面看起來不會過於擁擠。
在我們的應用程式中，如果要查看特定的一張資訊，頁面如下所示。在這個階段思考元素的間距與對齊，例如：
- 文字內容和圖片寬度一致，可以幫助使用者聚焦注意力。
- 對齊 UI 元件讓設計看起來更加簡潔，使用者也容易從對齊方式推斷這些單獨的資訊是相關聯的
- 較短的行寬比長的行寬更容易閱讀。
字體排版 (Typography)
你還可以在 wireframe 上改變字體大小，來表達不同類型文字的重要性。
經驗法則是，文字越特殊，字體越大。正如報紙會透過字體大小的變化 (主標題與副標題) 來傳達階層結構。粗體、底線或斜體也是引起注意的方法。
在應用程式的 wireframe 設計中，我們將放大標題字型，來突顯標題，讓使用者知道這是一個重要的資訊。
拆解成 wireframe 的過程，可以幫助將網頁元素從頭到尾想過一遍，鼓勵大家將 wireframe 畫出來，多練習幾次後也有助於看到別人做得好看的網站，知道別人的網站如何架構，並完成一個好看的網站切版。
