Loading...

Wireframe (線框稿)主要目的是溝通網頁的架構、內容、功能、行為、資訊階層。會用非常簡單的灰階顏色、線條、符號或框線,來表達網頁(或應用程式)的排版架構。本文帶你學習以 wireframe 這個 UI/UX 呈現方式,研究如何透過 wireframe,傳達各種不同的使用者介面UI與體驗組件,比如資訊架構和排版。

線框稿 (Wireframe)

什麼是Wireframe?

線框稿,一般稱為 wireframe,它會用非常簡單的灰階顏色、線條、符號或框線,來表達網頁的排版架構。例如這個 Balsamiq 的例子:

如圖所見,大多數的設計元素 (如影片,圖像和文字) 都被省略代換成符號或框線。舉例來說,一個大方框表示以後要放置圖像,文字則替換成 Lorem ipsum (一種虛擬的拉丁文假字)。

用這種低仿真 (low-fidelity rendering,低階非還原真實細節) 的方式來呈現網站的設計,讓你可以專心在網頁應用程式的內容排版,而不需擔心設計的細節,比如使用什麼字體、色系、圖形或圖片。

為什麼要製作 Wireframe?

Wireframe的主要目的是溝通:

  • 架構 (頁面的不同部分如何組合在一起)
  • 內容 (頁面上顯示的內容類型)
  • 功能 (介面如何操作)
  • 行為 (它如何與使用者互動)
  • 資訊階層 (資訊的顯示和組織方式)

在某種程度上, wireframe 就像是建造房屋的藍圖。藍圖顯示每個房間的位置、有多少空間,但它不會展現房子的真實樣貌。然而,正如你通常不會在沒有藍圖的情況下建造房屋,我們通常也不會在沒有wireframe的情況下動手建立網頁應用程式 (或網站) 。

wireframe 的目的是確認內容、排版、功能等等所有的頁面元素符合你的整體設計,根據wireframe,你可以在實際開發產品之前釐清關鍵行動並適當的配置資源。

現階段的重點不應該將焦點轉移到網頁應用程式的「外觀和感覺」上,而必須先考慮特定頁面上的內容應該位於何處,以及它的位置是否適合你的使用者。

你可能會問:「為什麼不在設計過程中釐清這些問題,而非得要特別製作一個wireframe?」

事實上,在查看完整的設計時,很難進行這類型的評估,因為你可能會受到字體、圖像和顏色等設計元素干擾,分散掉主要目標的注意力。使用wireframe,你就不會受到那些炫目設計的影響,可以專注在內容、排版與功能身上。

wireframe 還能夠消除網站排版中的大量潛在問題,尤其是對 HTML/CSS 經驗不足的新手而言,花點時間製作 wireframe,思考網站的排版,可以節省大量的時間。如果寫到一半才回頭修正設計問題,可能會花費更多時間。

零基礎學會 HTML/CSS/JavaScript,從程式設計入門開始

使用 Wireframe溝通

資訊架構 (Information Architecture, IA)

資訊架構是描述網站內容架構的一套科學方法,你也可以說是一種藝術) 。你可以透過 wireframe 來檢查資訊資訊架構的呈現方式,一個結構良好的資訊架構,應該要讓使用者能不費力地在網頁上瀏覽複雜的資訊。

例如下圖,你可以看到線框的不同部分是如何組成的,以及每個區塊如何表示不同的資訊。

資料來源:speckyboy

應用程式的資訊架構看起來像下圖的樣子。請注意這些不同的資訊 (例如標題、照片、內容) 如何在網頁上排版、分類。我們僅僅靠著框線就可以看出設計的功能,而使用者可以根據資訊的結構,直覺地操作網頁。

使用者介面 (User Interface, UI)

Wireframe 雖然是粗略的草圖,但並不意味著它們必須看起來凌亂。wireframe 會傳達網頁應用程式的架構、內容、功能,也可以提供你的使用者一個乾淨、易於理解的排版。wireframe 可以讓你好好思考真實呈現在用戶介面時,區塊之間的對齊,以及間距的問題。這個階段你將有機會可以大幅改善網站的架構與設計順序,讓版面看起來不會過於擁擠。

在我們的應用程式中,如果要查看特定的一張資訊,頁面如下所示。在這個階段思考元素的間距與對齊,例如:

  • 文字內容和圖片寬度一致,可以幫助使用者聚焦注意力。
  • 對齊 UI 元件讓設計看起來更加簡潔,使用者也容易從對齊方式推斷這些單獨的資訊是相關聯的
  • 較短的行寬比長的行寬更容易閱讀。

字體排版 (Typography)

你還可以在 wireframe 上改變字體大小,來表達不同類型文字的重要性。

經驗法則是,文字越特殊,字體越大。正如報紙會透過字體大小的變化 (主標題與副標題) 來傳達階層結構。粗體、底線或斜體也是引起注意的方法。

在應用程式的 wireframe 設計中,我們將放大標題字型,來突顯標題,讓使用者知道這是一個重要的資訊。

拆解成 wireframe 的過程,可以幫助將網頁元素從頭到尾想過一遍,鼓勵大家將 wireframe 畫出來,多練習幾次後也有助於看到別人做得好看的網站,知道別人的網站如何架構,並完成一個好看的網站切版。

三分鐘小測驗,找到自己學習網頁開發的入口

成為企業渴求的程式人才!

在家學會 JavaScript 網路開發

全新「全端 Web App 開發」課程,給你看得見的學習成效!
超過 90% 轉職成功,400 位來自亞洲各國的 ALPHA Camp 校友,畢業後達成轉職、創業、出國工作的夢想!

3 分鐘選課指南

給期待創新改變的你

前端x後端x全端 完整工程師技能樹

90% 學生轉職成功,職涯競爭力更上層樓
最專業的「全端 Web App 開發」課程,上班族邊工作也能同時培養第二專長!

3 分鐘選課指南

學期一|程式設計入門

零基礎也學得會的程式入門課!

開始學帶得走的技能,為自己未來的成長鋪路

學期二|掌握網頁開發

系統化學習 JavaScript

實作打好前後端基礎,成為扎實的網頁開發者

學期三|軟體工程師養成

養成業界接軌的實戰能力

前端/全端工程師專修路徑,完成技能與求職準備,成為業界即戰力