Wireframe 誰都會畫？

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

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

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

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

示意取代實際規劃？如沒有討論過，這就是一張充滿問號的規劃圖Lowfidelity通常用於快速溝通，被搭配口頭討論達成共識，但有時它的習慣會被帶到完整規劃的highfidelity上，這邊有一些例子：有時你會看到wireframe用線條取代文字方塊來構圖，這在快速的討論上是可行的，但是如果是包含詳細的功能在裡面，這將不是好的選擇，如同下圖用線條來說明文字，那這樣怎麼說明這是什麼樣的內容呢？有時我們會看到假字出現在wireframe或是mockup上，假字的作用在於可以評估內容的呈現方式，行距是否到位，但也同樣有個問題，上面的資訊能否說明清楚呢？其實假字也有不那麼假的字。

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

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

即使lowfidelity也會有溝通跟確認共識的成份在，只是多數是口頭上盡量不要用色彩你是否看過彩色跟黑白的wireframe？但這邊會建議你盡量不要用色彩。

原因是你應該把Branding跟Wireframe這兩個系統拆開，分兩邊同時進行，方便日後如果真的要進UI階段時，兩者能更好的銜接上。

去掉色彩能讓觀看者更專注在wireframe的本身說明上，也讓你不用花太多時間去思考如何配色，畢竟，你也不想在會議說明的時候被挑顏色的問題吧？顏色雖能顯眼，但也會增加不必要的困擾不要在沒用的地方吹毛求疵也是有強迫症的wireframe製作者，他們會要求每一個元素要對齊，同一個組件(Components)樣式要統一，字型要選擇哪一個，有這樣的心態很好，但其實重點應該是在產品跟功能規劃上的脈絡跟細節，而不是wireframe做的跟UI一樣，並避免加入個人喜好，有時你的喜好不會是產品的定位。

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

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

排版細節規劃得太詳細也有可能會在UI階段被翻盤，必要性不高工具介紹這邊介紹幾個我職場上常遇到的wireframe工具。

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

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

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

結語，所以每個人都會畫？Wireframe一但畫下去，就是在說明你對產品的認知程度。

畢竟他就是一個取得共識的溝通工具，因此誰有相關概念的人都能操刀或藉此提出需求，我自己接過CEO，GM，VP，CustomerSuccess，Marketing，Engineer畫給我的lowfidelitywireframe，你可以經由他們的規劃找出他們實際的需求，比只有口頭溝通更加完善。

但這都只是短期的溝通說明，真的要整理成文檔紀錄，就還是得有人專門去執行，無論如何，只要能溝通，就是好的工具。

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

--2MorefromTedDengFollowLeadDesigner@OneDegreehttps://www.dcted.work/Lovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableAboutHelpTermsPrivacyGettheMediumappGetstartedTedDeng658FollowersLeadDesigner@OneDegreehttps://www.dcted.work/FollowMorefromMediumClaudiaProchniewskaIronhack’sPrework:DesignThinkingUX/UIErikStrömbäckWireframingChallenge:CoolBlueCalvinKangIronhack’sPrework:CalvinKang — Challenge1:DesignThinkingLeaSportisMissionSuccess:E-CommerceSiteforaLocalHomeContractorHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable