我做給畢業展:微波效應用的 App Wireframe每個新案子進來,我通常會畫至少 3 次的 Wireframe,記錄靈感 > 完整繪製 > 電子化。好像重工了喔?可是你哪來的自信覺得設計 App 介面能一次到位呢?靈感乾涸對設計師來講理所當然、RD 都跳坑了才發現設計有錯缺東漏西也很正常、接手修改前人留下的舊案子卻找不到相關文件也不是什麼稀奇的事。為了要避免發生這種慘況,畫 3 次以上的 Wireframe 比較保險。

感覺上畫 3 次 Wireframe 很麻煩,為什麼同樣的工作要做 3 次。我的經驗告訴我、這反而是最快做出好 UI 的方法之一。

第一次算是草稿,記錄發想中的畫面、粗糙的手繪稿即可。追求速度、不求精確和繪圖比例、漏畫項目也沒關係,目的在於補捉所有靈光一閃的想法。對設計師而言,靈光一閃和降乩差不多,要如何在被繆斯女神附身的短短時間將腦海中的靈感記錄下來,靠的是鬼畫符orz。管不到細節,先抓住大方向。畫草圖時間搞不好只有20分鐘,總是要先有粗糙版的 UI Flow 才能慢慢修改到完整。

既然目的只是紀錄靈感和順 Flow 用,通常我會拿背面空白的廢紙塗鴉。「Bamboo Paper - Notebook」是我目前最喜歡的靈感記錄 App,不管是寫字或是繪圖都十分好操作,還能同步 Evernote 當備份。畫得醜沒關係,自己看得懂就好。
很醜的 Wireframe(在會議上邊聽大家的提議,隨手畫出想法好跟與會人員討論用的亂撇 Wireframe。)

第二次能說是精稿,注意每個元件的比例和位置合理性,從只有自己看得懂的鬼畫符,整理重畫成可以拿給 RD 和 PM 看的圖並和他們討論要修改的地方。如果負責寫 Code 的 RD 說沒空陪你討論,就恐嚇他。有經驗的RD 一定比 UI 關心介面配置合理性和每個畫面串接的邏輯,這關係到他們未來要天天加班還是準時回家打電動。

重畫一次 Wireframe 能補完剛剛沒想到、被無視的部份,加上簡單文字說明,此時整個 Flow 又被順了一次,不合理的地方會因為對這個 App 架構的熟悉度增加而被找出來。和 RD 討論實作可行性時、現場修改也容易。如果能夠提升這個階段的製圖速度,遇到有爭議的時候,直接畫給對方看,專業度立刻大增,對外行人來講亂威一把的。可以預期客戶音量會越講越小聲,尤其是把紙筆推給對方、請他把他想像中的介面畫出來的時候,有些客戶甚至會當場消音。
比較整齊的 Wireframe(某次和老公討論字級表的 Wireframe,嫌太複雜要再修改。)

第三次就是完稿,當 RD 和 PM 都說沒問題後,在電腦上使用軟體將框線勾勒出來,並加上文字說明,給客戶簽約用的規格書如果需附上 Wireframe 的話會是這個版本。熟一點的好客戶可以拿手繪稿跟他們討論,但最終還是要進電腦。將手繪稿電子化有個好處,即使將檔案交由他人接手一樣能夠修改、維護,未來遇到類似介面直接拷貝修改,加快工作速度。

會使用 Axure 或 Balsamiq 來製作電子稿,這兩套都是很多人使用、業界滿知名的軟體,各有優缺點。網路上有很多教學和資源庫,上手容易。不過這件事通常被我塞給工讀生去處理了(遠目),才擁有更多時間處理下個 Case 。但遇到複雜、規模較大的產品還是會自己動手。繪製的過程中多少能發現需要改進的地方,花一點心思讓產品更完美沒什麼不好。
用 Balsamiq 畫出來的 Wireframe(可比對本文第一張圖,將整理過後的構想定版。)

講了這麼一大篇,好像有 Wireframe 就往順利結案踏出一步似的。別傻了,我相信 80% 以上的客戶看不懂 Wireframe,逼他看還會被嫌醜、嚴重質疑專業。這種客戶在請他確認介面時什麼都好,等到定版、交規格書、約都簽了、連 PSD 都做得差不多後才開始 GGYY 囉哩囉嗦,加新功能加特效別人有我們也要有!@#$…。Wireframe 主要是給 RD 看的,省得沒什麼想像力(和設計師比)的 RD 要靠降乩在刻介面。如果肯定這個 Case 結案後再也見不到它,手繪稿撇一撇、說明文字寫一寫,你家的好人 RD 說好就好。

comments powered by Disqus