Wireframe 的重要性

前情提要

這種對話幾乎出現在我們的日常，講者會覺得講得很清楚，聽者能夠全盤理解。但往往在資訊傳遞的過程中，每經過一個角色將會有20%的資訊流失，到最後執行方時，就可能剩下原本的

60% 或是 40%了。

章節內容

什麼是Wireframe?

根據維基百科的解釋：

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website's content, including interface elements and navigational systems, and how they work together.

Wireframe是頁面設計得第一環節，將會呈現未來網站的兩個主要內容： 

 ㄧ. 定義會頁面擁有的內容

 二. 物件的排版位置

由於Wireframe 的精細程度不會太高（畢竟他叫做線框搞），特色是製作時間不會太長，在產品開發初期扮演拉近所有人想法的工具。

執行方式

如何繪製Wireframe?

在執行繪製Wireframe之前，要先執行需求訪談，製作User Story 以及 Funtional Map，基於這兩份文件，我們可以勾勒出網站的樣貌。

有很多人會詢問，要繪製Wireframe需不需要有程式的基礎，可以沒有，但是有前端的概念是加分的，在未來我們這份文件是要提供給設計師以及前端工程師開發，在一開始的Wireframe包含了程式的概念及邏輯，對於開發是一定有幫助的，這邊提供兩個小技巧有助於Wireframe的製作：一. 網頁佈局  二. 重覆利用性.

一、網頁佈局

大多數得網頁組成都包含這三個大架構，Header / Body / Footer：

• Header
  固定在網站的最上方，通常包含了 Logo / Navbar / log in /sign in。
   

• Body
  主要顯示網站內容，會依照不同的頁面有不同的功能/邏輯。
   

• Footer
  固定在網站的最下方，顯示 頁面導覽 /  聯絡方式 ..等訊息。

在最一開始定義了網站內容，每個頁面都要套用這模式，在Wireframe的製作上也需要注意。

二、重覆利用性

在實作過程當中，有時候在Ｂ面會發現共用組件會有露缺，當下只改了Ｂ面的內容，導致其他頁面沒有一起修改，最終設計師/工程師，收到檔案時會有不知道如何執行。

為了避免這種情況，在執行過程中，我們可以透過大量的組件化/模組化，不同頁面可以套用相同組件，只要一改動該組件，所有的頁面都會一起變動，通常會將：Header / Menu / Footer / 以及一些大量重覆使用到的元件組件化。

Wireframe到底要多精細?

這問題沒有一定，要取決於團隊的大小，以及設計的產品。 依照筆者的情況，我屬於遠端開發，當面與設計師/工程師討論機會不多，在Wireframe的製作上就會花比較多時間，減少遠端溝通上面的誤解。此外當我在設計後台產品時，往往也都會使用一些可以製作出高仿真的工具，例如使用Axure 搭配 Semantic UI Library, 在這環節只要涉及產品規模不大，是可以省略設計師的環節，但這邊也要考驗PM本身的功力了。

Wireframe的工具?

市面上有很多Wireframe工具，每一套都有不同得特色，這也導致了選擇的困難性，依照筆者的經歷曾經用過： Axure / 墨刀 / Portt / Drew.io …..等等。最終會依照團隊所使用的工具，作為主力開發，如果是新手建議可以選用 Axure，在Youtube 或各大網站擁有豐富的教學資源，可惜有試用期限。當學會一套工具時，在不同工具之間的切換也不會有太大困難。

隨堂練習

挑選一個自己喜歡的網站，先執行網站架構，確認該網站有幾個頁面，以及頁面的邏輯，再來從首頁開始拆解， 依照該網站的邏輯猜拆解成 Wireframe，練習自我的觀察能力。