Wireframe繪製方法分享

網路文章很少介紹到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/