Our Blog

Artboard 2

Post: 網頁設計的前置作業 — 認識 Wireframe(2021最新)

網頁設計的前置作業 — 認識 Wireframe(2021最新)

hend

2021-06-21

Wireframe 是網頁設計初期確認每一個頁面構成的工具,如同我們在繪製一幅畫作時會先幫畫作打好草稿,以便後續的繪製。為什麼需要 Wireframe 呢? 如何繪製 Wireframe ? 本篇文章將讓你認識什麼是 Wireframe。

Photo by Sigmund on Unsplash

為什麼需要 Wireframe?

當我們要繪製一幅畫作時,通常都會拿起鉛筆,把想像中的畫面粗略的畫出來,這就是我們稱呼的「草稿」,相同地,Wireframe 如同網站設計的草稿,它可以帶給我們以下 3 點好處:

  1. 決定網站頁面的大方向,且規劃不需要花費太多時間。
  2. 不用在意細節,如文案、色彩、圖片等。
  3. 在進行繪製 Wireframe 繪製同時,一邊整理自己的設計思路。

我們可以利用簡單的框線繪製 Wireframe,並專注在網站的功能以及操作上,繪製 Wireframe 的方式有很多種,市面上有許多可以繪製 Wireframe 的軟體,最簡單的方式還是用手繪製,只需要一支筆跟一張紙即可。Wireframe 並不需要太多細節,重點是把網站的內容跟功能展示出來,讓設計師或工程師看得懂、可以理解。

如何畫 Wireframe?

常見繪製 Wireframe 的方式為利用一個簡單的圓形和正方形來表示頁面的圖片或小標誌 (icon),將它們安排在想要出現的位置,此外也可以加入假的文字或實際要呈現在網站上的文案,如:標題、段落、按鈕等。只需要注意,Wireframe 不需要太多細節,重點是把網站的內容跟功能展示出來。

Photo by HalGatewood.com on Unsplash

需要規劃的元素如下:

  1. 框線:表示影像、插圖、icon 、影片。
  2. 文案:文字大小、預期使用字體。
  3. 按鈕:相對尺寸。
  4. 版面規劃:對齊方式、間距、最小高度、畫面的平衡、想呈現的方式。

此外,可以透過數字標記每個區塊的名稱,並在右側標示清楚對應的名稱。在特定的區塊可以繪製局部放大的內容,使整個 Wireframe 更清晰易懂。

在前個段落提到可以利用簡單的圓形和正方形來表示頁面的圖片,實際上,我們不必拘限在方方正正的框架、整齊的文字呈現,只要可以清楚了解大致上的編排、每個元素相對應的位置,就是好的 Wireframe,不必擔心自己有沒有藝術細胞。

Wireframing is the Way to Go

我們需要很清楚的了解,繪製 Wireframe 的目的在於確認每一個頁面的構成,重點在於畫面上想要呈現什麼內容跟功能;如果沒有繪製 Wireframe 就直接進行視覺設計,很有可能會發生做到一半漏了某些功能或是頁面操作不流暢,後續修改反而會浪費更多時間與力氣修改。

Wireframe
實際案例

參考資料

Akane Lee(2020.09.27)。什麼是 Wireframe ?【嫁給 RD 的 UI Designer】。
取自 https://blog.akanelee.me/posts/159788-what-is-wireframe/

Dynocreative (2020.09.27)。 HOW TO WIREFRAME A WEBSITE IN 3 EASY STEPS【 dynocreative】。
取自 https://dynocreative.com/elementor/how-to-wireframe-a-website-in-3-easy-steps/

Jay (2020.09.27)。 Wireframe、Mockup 與 Prototype 的差異與比較【 Jay的商業筆記】。
取自 https://jeffy0637.pixnet.net/blog/post/277304284-wireframe%E3%80%81mockup%E8%88%87prototype%E7%9A%84%E5%B7%AE%E7%95%B0—wireframe

MORIYANANA (2020.09.27)。 UI設計師 -線框稿 (Wireframe)【 HI;MYDREAM】。
取自 http://himydream.me/2017/03/23/ui%E8%A8%AD%E8%A8%88%E5%B8%AB-wireframe%E6%98%AF%E4%BB%80%E9%BA%BC%EF%BC%9F/

PAUL ANDREW (2020.09.27)。 20 Inspiring Examples of Web and Mobile Wireframe Sketches【 speckyboy】。
取自 https://speckyboy.com/web-mobile-wireframe-sketch-examples/