Wireframe 誰都會畫？

Wireframe (線框圖) 是很好用的溝通工具，軟體工作人員幾乎每個人都能秀一波，即使這項工作比較常是由 UX、PM、UI 來進行，但是不同的 wireframe 有不同的目的，這裡分享一下工作上常會碰到的情況。

先搞清楚產品的目的跟溝通的對象，並思考是要建立長期文檔維護呢？還是只是當純的做短期溝通用？這兩者有很大的不同：

長期文檔維護，通常用 high fidelity (高保真度)，意指建立一個完整的 wireframe 規劃檔案，包含 flow，每個畫面，每個狀況都會定義清楚，並在日後有任何調整都會更動，好處是後面銜接工作的人能看懂脈絡，並能得知當初設計的思路為何，壞處是得抽人力去維護，只要產品不斷的在更新，這份檔案勢必得一直維護下去，甚至還有版本控管的問題，而且資料將會被綁在某一個軟體或服務上，這種溝通的對象通常是一對多，像是有直屬長官、Engineer、PM、或是 Designer 的會議場合，老闆我倒是很少遇到會想看的，他們比較想看高完成度的產品。

短期溝通通常用 low fidelity (低保真度)，意指直接用 wireframe 溝通功能或是演示，不特別用哪一個工具，用紙筆也可以，只要能用紙筆示意，口頭溝通雙方達成共識即可，通常用在某一個功能的溝通上，好處是快速解決問題，壞處就是資料一但溝通完便遺失，只能靠記憶重建，或是資料零散難以彙整，每個人對產品的基礎知識跟學經歷不同，但也由於這種資料很仰賴當時雙方溝通的共識，而那些在他們的腦裡，所以不會有資料，很難保證後來負責的人能接上，這種溝通的對象大多是一對一。

Wireframe 觀看跟維護的人很常就是那幾位 （有些老闆或高層是不會看的），也因此文件很常是由那幾位來維護，但其實建立 wireframe 的工並不算少，究竟是嘗試解決問題還是增加工作量？就端看團隊如何選擇了。

Low fidelity 通常用於快速溝通，被搭配口頭討論達成共識，但有時它的習慣會被帶到完整規劃的 high fidelity 上，這邊有一些例子：

有時你會看到 wireframe 用線條取代文字方塊來構圖，這在快速的討論上是可行的，但是如果是包含詳細的功能在裡面，這將不是好的選擇，如同下圖用線條來說明文字，那這樣怎麼說明這是什麼樣的內容呢？

有時我們會看到假字出現在 wireframe 或是 mockup 上，假字的作用在於可以評估內容的呈現方式，行距是否到位，但也同樣有個問題，上面的資訊能否說明清楚呢？其實假字也有不那麼假的字。

在真實的文案來臨之前 (相信我，這很少準時)，其實可以就產品的特性去給予適當的臆測文案，這樣的文案甚至能包含你的設計思維，即使不被採用，但仍能給出比純假字更好的說明方式。

照片也很常放上 X 圖示意，但是其實 X 圖也是需要說明的：他是使用者頭像還是照片？如果是照片放的又是什麼照片？是搭配文案的插圖？還是實際產品的樣圖？背景圖？還是可以使用者自訂的背景圖？或是外站爬回來的圖？影片截圖？也因此，我更取向建議放上實際的說明輔助或代替 X，或是直接留空給 UI or Visual 去煩惱吧 (咦)。

你是否看過彩色跟黑白的 wireframe？但這邊會建議你盡量不要用色彩。原因是你應該把 Branding 跟 Wireframe 這兩個系統拆開，分兩邊同時進行，方便日後如果真的要進 UI 階段時，兩者能更好的銜接上。去掉色彩能讓觀看者更專注在 wireframe 的本身說明上，也讓你不用花太多時間去思考如何配色，畢竟，你也不想在會議說明的時候被挑顏色的問題吧？

也是有強迫症的 wireframe 製作者，他們會要求每一個元素要對齊，同一個組件 (Components)樣式要統一，字型要選擇哪一個，有這樣的心態很好，但其實重點應該是在產品跟功能規劃上的脈絡跟細節，而不是 wireframe 做的跟 UI 一樣，並避免加入個人喜好，有時你的喜好不會是產品的定位。

也許有人覺得如果 wireframe 規劃得好能跟 UI 無縫接軌，但以我自己做過的案例來看，那十分的不容易，意指在 wireframe 階段就要導入完整的 UI kit 與 Branding 的規劃，並在排版上吹毛求疵，同時也會抑制產品的想像空間並且缺乏大量修改的彈性，除非這是一人一條龍作業，不然 UI 接手後有很大的機會重新來過。

雖然美麗的 wireframe 相當賞心悅目，但時間跟實際的規劃才是寶貴的，網路上雖然有很多 Wireframe 素材，但我個人覺得有單個元素的素材庫比較實用。

這邊介紹幾個我職場上常遇到的 wireframe 工具。

別懷疑，這是我很常遇到的格式，這樣做的好處是入門難度低，同時可以做完簡報或方便與同事討論共編，缺點就是畫面有限，複雜的 flow 將不會出現，頂多單頁單頁加上連結跳轉說明。

堪稱史上最快的 wireframe 工具，我想應該毋庸置疑，入門難度極低，只要有空白的地方就可以畫，沒有任何軟體或繪畫基礎都能信手捻來，加上有時可以配合大張紙跟拼貼工具來多人共同編輯，但缺點就是更改、攜帶、尋找與保存不易，紙張的消耗等。

專業的 wireframe 工具讓你所有規劃都一把抓，一定能產出最完整的文檔紀錄，適合專職的人去製作與維護，文檔裡面可以包涵 flow、功能、說明的能詳細記錄也方便搜尋，甚至有些能直接做成 prototype，缺點就是學習曲線高，價格高，綁定軟體。

Wireframe 一但畫下去，就是在說明你對產品的認知程度。畢竟他就是一個取得共識的溝通工具，因此誰有相關概念的人都能操刀或藉此提出需求，我自己接過 CEO，GM，VP，Customer Success，Marketing，Engineer 畫給我的 low fidelity wireframe，你可以經由他們的規劃找出他們實際的需求，比只有口頭溝通更加完善。但這都只是短期的溝通說明，真的要整理成文檔紀錄，就還是得有人專門去執行，無論如何，只要能溝通，就是好的工具。

如果您對這篇文章有任何想法，歡迎讓我知道。