頁首溫研創意品牌 LOGO
網站線框圖如何設計?Wireframe 教學與範例解析封面圖

【網站設計教學#2】網站線框圖如何設計?Wireframe 教學與範例解析

前言

這系列文章是《網站設計教學》,目標是幫助完全不懂網站設計的小白們,可以跟著教學實際完成自己網站的設計。

在上一篇的規劃網站架構,已經請大家使用心智圖的把網站的架構設定出來,不知道是否有完成呢?若沒有的話,建議先回到上一篇,這樣才會比較好銜接這篇的內容。

在這一篇中,會開始帶大家根據規畫好的心智圖,繪製成線框圖。

網站線條框線 (Wireframe) 是什麼呢?

線框圖的英文是 Wireframe,它是在還沒有進行設計前,先以基本的線條框線來規劃網站的框架。

製作的方式以單色線條+文字為主,不用過多的顏色,也不需要放圖片。如果太過於花俏,在規劃網站時,就容易不清楚整個頁面的核心框架樣貌,在後續設計上也會受到干擾,所以在線框設計時,我會設定基本規則:

  • 顏色配色比例:黑、灰色、淺灰 3 種顏色來互相配置
  • 字體大小比例:大標、副標題、內文 3 種字級,並統一使用一種字體
  • 圖片示意圖:使用灰色調的色塊,並在中間畫上叉叉來示意

舉例來說,以下是線框圖與設計圖的比較,如果剛開始就直接畫右邊的設計圖,那麼在製作這個頁面時,你就沒辦法真正知道需要放置的元素是哪些,會變得霧裡看花。

有時候我們看到有些網站感覺有點奇怪,很大的原因就是他們可能是根據其他網站的樣貌,進一步做模仿 (也就是直接根據下方右邊的這個樣貌去做仿造),在不知道頁面的線框結構長怎麼樣的狀態之下,很容易就會畫虎不成反類犬。(因為下圖右方這種已上色的畫面,通常看不出來背後每個元素間的明確比例)

溫研創意網站首頁線框圖與視覺稿對比

為什麼需要繪製線框圖?

如果你不是專職的網站設計師,只是想要自己簡單設計網站,大部分的人就會省去這個步驟。所以在架設完網站後,要開始製作網站頁面時,就會發現不知道可以放什麼內容,也因為沒有事先安排整體的空間,導致後續放上內容後,整個畫面變得很不協調。

對大部分設計師而言,在進行網站視覺設計前,都會透過線框圖與客戶將大致的頁面架構確定下來,這個步驟的用意就是用來降低雙方認知不同會出現的各式問題。像是如果沒有線框稿,最常遇到的問題就會是後續整個頁面設計完之後,客戶發現不是自己想像中的樣貌,又會請設計師整個打掉重來,非常浪費時間。

所以雖然你不用面對客戶,但也會建議如果你是想要自己設計網站頁面,一定要學會先繪製線框圖,可以幫你節省掉後續非常多來回修改的時間。

畫線框圖需要什麼工具?

如果是讓自己方便知道規劃的方向,其實只需要準備一張紙跟筆就能進行;但如果需要與人討論,就可以使用線上工具。

接下來,我會推薦幾款免費製作線框圖的工具,每一個工具也都會放上實際製作的範例。

畫網站線框圖需要什麼工具

接下來會以上一單元網站設計架構中,所規劃的「首頁」當作線框圖範例。你可以依自己好上手的工具做選擇使用:

線框圖以首頁心智圖來當範例介紹

Wireflow

如果在一開始完全沒有想法,建議使用 Wireflow,它已經有提供基本模板,只要將左邊的模板拖曳你想要的組合,非常快速就能完成網站線框圖。

不過他的模板都是固定好的,無法客製化你想要的排版樣式。所以建議可以在這裡大概拉完基本雛型後,再實際到其他工具中將線框圖畫出來。

Wireflow 網站線框圖工具示範

Google Drawing

這款 Google 繪圖工具,我認為優點是容易上手。

因為是 Google 的工具,操作起來與大家熟悉的 Google Doc 很相像,設計時可以直接拉線框,也可以繪製線框圖的位置,不過缺點就是所有的線框都要自己繪畫。

Google Drawing 網站線框圖工具示範

Figma

如果你對設計網站有興趣,可以使用 Figma 設計工具,它每一塊都需要手動繪畫,但能製作的細節也比較高,同時也可以與其他人在線上共用編輯。

不過相對來說門檻比較高,介面也是英文版本,在操作上需要先了解每一項功能。

Figma 網站線框圖工具示範
用 Figma 製作網站線框稿

畫線框前需要知道的網站框架

網格系統尺寸:

什麼是網格系統?你可以想像每個網站的頁面,背後都有著「看不到的 12 條線」,所以在頁面上的各個元素排列位置,都是依照這 12 條線去進行變化。

一般來說,整個頁面的寬度會是 1920 px,其中「容器 (可以想像成裝內容的地方,左右會留白) 」會佔 1200 px,其中又分出 12 條的線,所以在網站排版時總共就可以排列出最基本的 6 種組合 (參考下圖),可以依照自己的設計,選擇出最適合的排版樣式。

在下圖的每個長型的「方塊」中,就可以擺上你想要擺的頁面元素,比如:可以擺放文字、圖片、按鈕等等。

網格系統尺寸

各裝置的網格:

針對不同的裝置,都可以有很好的使用體驗,所有排列組合都可以由上述 12 條線來做變化,以下分別畫出三種裝置底下的不同排法:

  • 桌面:尺寸寬度在 1200px 以內,螢幕的寬度大,可以使用的欄位數也可以更多,圖中是以 3 條線為一組,組成的四個方塊;另外則是以 6 條線為一組,組成的兩個方塊。
  • 平板:隨著螢幕寬度縮小至 1024px,空間也被擠壓,原先桌機的四個方塊如果還是並排放,會變非常擠,所以通常就會變成上面放兩個方塊,後面兩塊就會往後變成下一行。
  • 手機:在更小的螢幕寬度 360px 以下,為了讓內容更好識別,不要全部擠在一起,就會將原先並排的元素變成直立,改成每一列都是一個大方塊,往後依序排列。
各裝置的網格欄位數示範

以上的示範是一個概念,在不同裝置上可以有很多的組合變化,可以依照實際的文字、標題、圖示等的設計,來決定每一個裝置的欄位數。

框線只是一個輔助,這個概念可以幫助在排版時能有更多的有趣的排版方式,以下示範實際內容的排版樣式:

各裝置的網格欄位排版方式

網格排版多樣化

以上了解 12 條線的基本原理後,接下來示範幾種常見的組合:

  • 組合 1:佔滿 12 條框限,最多會使用在大張的 Banner,或者輪播圖的使用。
  • 組合 2:如果內容的文字比較多,就將右邊的空間拉寬,不讓文字看起來太過攏長。
  • 組合 3:簡單的圖示加上簡短的說明,可以將他們的排版密集一點。
  • 組合 4:與組合 3 最大的不同在於多了說明內容,會需要讓空間寬敞一些,不會讓內容看起來很擁擠。
  • 組合 5:與組合 2 有些雷同,我通常會利用內容的文字數量,或者圖片的比例,來決定使用哪一種組合。
  • 組合 6:如果覺得以上的排版太多單調,也可以將 12 條線分為 3:6:3 的比例來做組合。

其實網站的排法還有很多種,可以想像在玩積木,一塊一塊的堆疊起來,而所有的內容都是包覆在每一塊的積木裡,進而拼出整個頁面。

桌面裝置的網格欄位排版種類

理解讀者閱讀方向讓設計更加分

設計時為什麼要知道讀者的閱讀方向?

現代的人普遍沒有耐心,對於他們而言,網站上的閱讀是一件很麻煩的事。所以在設計網站時,可以利用動線來引導讀者,並將重點呈現在更容易被注意到的地方。相反,如果網站缺乏動線,就會導致於讀者不知道網站的重點在哪,反而快速離開。

就像是我們在逛展覽時,會有一個清楚的動線引導著你走完整個展場,但不一定是使用明確的箭頭,而是東西擺放的位置,讓你自然的知道往哪個方向走。所以在設計時,也可以想像成你要帶著大家逛展覽,你需要引導他們往正確的方向去走。

常見的閱讀方向有哪些?

在網站的動線上是由上至下,由左至右,分享人們在閱讀上兩個最常出現的方向:

1.古騰堡圖:

根據研究,是以眼球的由上至下,由左至右的動線規律,分出四個最容易被看見,也可能被忽略的部分:

  • 第一視覺區(左上角):通常是第一眼最優先被看見的地方。
  • 強休息區(右上角):比較少被注意的區塊。
  • 弱休息區(左下角):最容易被忽略的區域。
  • 最終視覺區(左下角):閱讀結尾時被看見的區域。

根據以上的研究結果,我們就能將最想讓讀者看見的資訊放置左上角,來吸引內容閱讀,而在右下角閱讀最後時,放置一個按鈕來引導你想讓讀者到達的其他頁面。

古騰堡圖示意圖

2.Z 型動線

會取名為 Z 字動線是因為讀者的視覺動線跟 Z 字一樣,由左至右,由上而下,除了網站上整篇的文字內容,在視覺上依循著 Z 字的排列,就能引導讀者一直往下閱讀。

Z 型動線示意圖

下圖是一般排列與 Z 字型排列的對比圖,相較一般排列的樣式,Z 字型的排列在視覺上會自動左右左右的移動。

雖然說一般排列也可以讓讀者閱讀完,但是在網站的整體排版上,相對來說就會比較單一。如果讀者認為你的內容不是他感興趣,就會缺乏動力往下閱讀。

一般排列與 Z 型文字排列示意圖

如何繪製網站的線框圖?

線框圖的常見元件

雖然線框圖聽起來好像很難,但其實只要有三個元件就能開始規劃線框稿:

  • 文字:先以自己「標題、內容」等文字來註記,確認該區塊是要放文字即可。
  • 圖片:以簡單的方框中間打一個叉叉來示意這裡會放一張圖,並不需要真的找一張圖來放置。
  • 按鈕:用一個比較深的底色方框,上面加上「按鈕」二字,來示意這裡有個按鈕,不用特別去想按鈕上的文案。

在規劃時可以將需要填入內容的地方,先以「標題、內容」等文字來代替 (如下圖),等後續要把設計圖製作到網站上時,再回過頭來想完整的文案。

所以記得,在畫線框圖的時候,別因為思考內容而卡住了,先著重在整體網站線框規劃上,整體來說會更有效率。

線框圖的常見元件:文字、圖片、按鈕

依照心智圖繪製頁面線框圖(以首頁示範)

以上已經介紹完畫線圖的基本元件,接下來我會以上一單元網站設計架構中規劃的「首頁」來做範例。

接下來針對 5 個步驟進行詳細說明:

step 1

開啟頁面畫布
使用任一個線框稿工具,如果還不知道使用哪一個工具,可以使用 Google 繪圖
開啟頁面設計,將頁面尺寸設定為:1920 x 2200 px,高度可以依照自己的內容長度做調整。

 Google 繪圖,開啟頁面設定,並設定尺寸

step 2

匯入 12 條線框圖
下載 12條線框線圖,匯入畫布。

 Google 繪圖,匯入 12 條線框圖

step 3

新增線框元件
先畫出框線圖的元件,像是:標題、內容、按鈕、圖片等需要的元件素材。

 Google 繪圖,新增線框元架

step 4

元件位置排列:
完成元件後,可以運用上述所講的 12 條線來做輔助,將內容排版至畫布上。接下來針對每一區塊來解說物件的擺放方式:

  • 頁首:會有一個品牌 LOGO 置左,而置右會有 4 個選單:首頁、關於我、文章頁、聯絡我。
  • Banner:使用左右各一半的排列 (各佔 6 條線),左邊是說明加上按鈕,右邊則是放上一張圖。
  • 主題項目:主題使用小圖示加上簡短的標題,讓讀者看到我的網站,可以馬上知道我的內容主要有哪些。另外補充,可能會有人想問:「為什麼這裡欄位數只有佔 3 條線,不是 6 條線?」其實原因很簡單,因為線框都是可以根據自己的想法去做調整,而我覺得只有小圖示以及簡短說明,如果使用 6 條線會使空間佔比太大,所以就讓它們只佔 3 條線。
  • 個人介紹:左邊的圖片,可以放小張一些的形象照,所以欄位數只佔了 5 欄,把空間留給右邊的介紹內文。
  • 熱門文章:除了文字的說明,也放上圖片,讓讀者更好聯想文章內容,所以我使用 4欄,總共可以放上 3 篇文章。
  • 聯絡我們:主要是以按鈕點選到我的聯絡資訊,所以左邊想放一張可以聯絡我的相關插圖,右邊則是放上介紹說明。
  • 頁尾:所有資訊以置中的方式排列,讓頁尾乾淨利落。
 Google 繪圖, 元件位置排列

step 5

整體擺放調整:
排版完成以後,可以觀看哪些區塊太過空泛,或是太過擁擠,再依空間來增加刪除內容資訊。

網站設計線框圖範例解析

分享最近剛完成的理財主題網站「好好理財好好睡」的設計線框圖,上述已經了解線框排版的方法,所以這個案例會以我是如何思考排版來做說明:

  1. Banner:這一塊的重點會在於,電子郵件的搜集,以動線來說我希望在第一視覺區就能看見,填寫郵件的方框。
  2. 免費課程:實際上站主其實已經有錄影的課程,所以我希望優先可以看見他正在教學的照片,增加真實性與信任感。
  3. 課程:主要有三個課程的服務,我希望一眼能看見每個課程的種類,所以我將三塊平均分配排列。
  4. 理財 / 投資:這兩個區塊是文章類表,只是主題不同,剛好都搭配了一個工具,所以除了文章以外,還多加了四個工具,這樣的用意是不會讓下方都是文章的排列,而是中間多了不一樣的排版。
  5. 社群:因為上面的工具排列是四個方塊,所以在社群的排列我就運用了五個方塊,讓排版上比較不會那麼呆板。

以上的實際案例給你做個參考,你也可以根據這樣的方式,繪製出自己的線稿。

另外之前我也有分析過「DR. DEAN 的處方箋」的網站線框,有興趣的人也可以參考。

DR. DEAN 的處方箋線框圖示範
好好理財好想睡網站設計作品圖

好好理財好想睡

形象網站

小作業:試著畫出自己的線框圖

上述的介紹已經了解基本網站的 12 條框線,以及閱讀動線的運用。

接著請你將上一篇規劃好的心智圖,畫成網站線框圖,可以跟著下面的步驟完成此篇的小作業:

  1. 請選擇自己好上手的話線框圖工具,如果不知道使用哪一款,可以使用 Google 繪圖
  2. 開啟畫布,設定頁面尺寸 1920 x 2200 px,高度可以依照自己的內容長度做調整。
  3. 下載我幫你準備的 12條線框線圖,匯入畫布。
  4. 開始按照本文中的方法,繪製你的網站線框圖。

另外,也要記得你根據以上步驟畫的線框圖只是「一個頁面」的線框圖,你要再根據你先前規劃的心智圖,看看有哪些頁面,每個頁面都需要規劃專屬的線框圖。

網站配色教學,5 步驟找到屬於你品牌的顏色

網站配色技巧
5 步驟找到屬於你品牌的顏色

如果你還不確定是否要找網頁設計師合作,可以參考我這篇的分析:製作網站需要找設計師嗎?專業設計師分析給你聽

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top