Wireframe繪製方法分享

Verna Gong
Nov 27, 2018 · 6 min read

網路文章很少介紹到wireframe怎麼畫會比較清楚明瞭,因此想要分享及紀錄一下自己的wireframe畫法。

本篇大綱:

畫wireframe的目的

wireframe還是wireflow

我的wireframe繪製方式


畫wireframe的目的

可以把wireframe看作「提出解法的文件」,在理解需求或問題、找出解法之後,用來溝通產品該長什麼樣的規範,可能包含使用流程及頁面框架的邏輯、欄位規則等。

因為是用來溝通討論,產出的文件就必須明確清楚:

  1. 讓參與的人都看得懂

一個專案參與的人很多,內部由PM、RD、QA、公司業務客服、到主管或老闆,外部如果是接案的話可能碰上客戶,每個角色的人背景跟理解力都不同,但至少必須確保最直接相關的RD跟QA要能看懂,否則就會失去溝通的意義。

2. 圖片之外盡可能完整的說明

wireframe並不單純只是畫面的草稿,他包含運作邏輯、頁面規範、互動流程、最後才是頁面的佈局,而要完整的解釋規則就需要有文字說明。可以的話可以先溝通好wireframe的樣式、畫法,避免不同人產出不同風格的文件,如果沒有是先定義,文件的內容必須儘可能的完整,哪怕是很基本的規則也要寫下來,以免不同人有不同想像、導致溝通上的落差,將來接手的人也不需要自己腦補。

Wireframe還是Wireflow

最近出現Wireflow這個名詞,自己的公司也是產出這樣的文件,Wireflow其實是把Wireframe加上Flow一起呈現,因此頁面框架會同時標示互動流程(哪個按鈕連到哪一頁)。

我的 side project Wireflow (http://vernagong.com/finstep.html)

先來説說Wireflow的好處跟壞處:

好處

  1. 不用對照Flow跟Wireframe兩份文件

2. 可以更清楚的交代流程與頁面、欄位的關係

壞處

  1. 會變成很大一張:如下圖
某產品的Wireflow,只是其中某一項功能

2. 設計師修改時要拉一堆線可能會喪失耐心

3. 旁人理解時可能會被分散注意力:尤其是功能很多時,很容易在尋找路線的過程中迷路

4. 版本控制不好做:目前公司遇到的,希望能有每個修改版本的對照,但是很大份的文件、怎麼對照也很難一目瞭然

對設計師而言,Flow呈現的是整體流程的操作邏輯,而Wireframe則著重在頁面框架與細節,設計的思考路徑上還是先有Flow才有Wireframe的,因此Wireflow只是兩份文件要不要整合的選擇題,能夠思考的方向有幾個:

  1. 功能複雜度:如果是很龐大、很複雜的產品,Wireflow可能會讓文件佈滿流程線,反覆修改時也會比較耗時費工,因此反而沒有很適合。但對於較為單純的小產品而言,Wireflow就是不錯的文件方式。
  2. 閱讀對象:對於新手或是非技術人員,要把Flow跟Wireframe對照看,有時會比較困難,如果功能並不複雜,Wireflow確實可以讓規劃更好的被理解。
  3. 設計師耐心:市面上有許多很方便的Flow工具(Draw.io、XMind等),繪製起來比較省時,相較之下在 Wireframe上畫流程箭頭就比較麻煩,如果事後修改次數很多,很容易造成心靈崩潰。

我的Wireframe繪製方式

每位設計師或是公司都有自己習慣的方式,分享一些自己的心得:

  1. 寫出每個功能區的目的及功能大綱:

寫出目的可以提醒自己這項功能的需求目的,也讓閱讀者更了解規劃這項功能的原因。功能大綱類似簡化版的Functional Map,先告知會有哪些功能、行為動作,再依據每個項目畫Wireframe,也可以在此處增加歷史紀錄,說明每次修改的時間及事項

2. 替頁面編寫號碼

為了更明確的溝通、避免大家討論時想的是不同頁面,編碼是最直接的方式,可以利用「大功能區_功能_流程_狀態」來編寫。

推薦參考:

但也需要注意當產品增加了功能區,編號數字可能會著增減,這時以前的3_1_1跟新版的3_1_1就會是不同頁了。

3. 文案範例盡量擬真

假文對設計者而言很方便,但盡可能的模擬真實文字能幫助閱讀者理解。

耐心地寫出每個老師名字並對應狀態,而非全部叫做「王小明」

4. 不要用過多的顏色、icon

Wireframe的目的在於溝通,過多的視覺元素會讓閱讀者失焦,甚至限制了UI設計時的風格想法,因此文件需要適度的「單調」。

字型:統一使用一種字體

字級:大標、副標、內文、附註(可省略)

顏色:統一黑色 (如果需要標示動線、頁面動態可各自另選兩種顏色)

說明=黑色、流程=橘色、頁面動態=藍色

5. 說明統一寫在畫面外

為了避免把說明文字當成畫面的真實內容,可以把說明拉出去另外寫,例如標示1~5的說明編號,再到右邊尋找對應的說明。

以上是目前繪製Wireframe文件時的心得,歡迎補充~


HI! 我是Verna,一位致力於運用設計解決問題的UX設計師。

希望你喜歡我的文章,請別忘了幫我拍手或Follow我,這會讓我更有動力,也歡迎參觀我的網站喔:http://vernagong.com/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store