• UI 設計
  • 更新:2026-07-14
  • 初版:2013-11-16

三階段線框圖:提升UI設計精確度的關鍵

每次新專案,我至少畫三次 Wireframe。
重工?
不,這是避免設計踩雷的保險。想知道為什麼?
繼續看下去吧!

每個新案子進來,我通常會畫至少 3 次的 Wireframe,記錄靈感 > 完整繪製 > 電子化。

好像重工了喔?可是你哪來的自信覺得設計 App 介面能一次到位呢?

靈感乾涸對設計師來講理所當然、RD 都跳坑了才發現設計有錯缺東漏西也很正常、接手修改前人留下的舊案子卻找不到相關文件也不是什麼稀奇的事。

為了要避免發生這種慘況,畫 3 次以上的 Wireframe 比較保險。

感覺上畫 3 次 Wireframe 很麻煩,為什麼同樣的工作要做 3 次。

我的經驗告訴我、這反而是最快做出好 UI 的方法之一。

第一次算是草稿,記錄發想中的畫面、粗糙的手繪稿即可。

追求速度、不求精確和繪圖比例、漏畫項目也沒關係,目的在於補捉所有靈光一閃的想法。

對設計師而言,靈光一閃和降乩差不多,要如何在被繆斯女神附身的短短時間將腦海中的靈感記錄下來,靠的是鬼畫符orz。

管不到細節,先抓住大方向。

畫草圖時間搞不好只有20分鐘,總是要先有粗糙版的 UI Flow 才能慢慢修改到完整。

既然目的只是紀錄靈感和順 Flow 用,通常我會拿背面空白的廢紙塗鴉。

Bamboo Paper - Notebook 」是我目前最喜歡的靈感記錄 App,不管是寫字或是繪圖都十分好操作,還能同步 Evernote 當備份。

畫得醜沒關係,自己看得懂就好。

(在會議上邊聽大家的提議,隨手畫出想法好跟與會人員討論用的亂撇 Wireframe。)

第二次能說是精稿,注意每個元件的比例和位置合理性,從只有自己看得懂的鬼畫符,整理重畫成可以拿給 RD 和 PM 看的圖並和他們討論要修改的地方。如果負責寫 Code 的 RD 說沒空陪你討論,就恐嚇他。

有經驗的RD 一定比 UI 關心介面配置合理性和每個畫面串接的邏輯,這關係到他們未來要天天加班還是準時回家打電動。

重畫一次 Wireframe 能補完剛剛沒想到、被無視的部份,加上簡單文字說明,此時整個 Flow 又被順了一次,不合理的地方會因為對這個 App 架構的熟悉度增加而被找出來。

和 RD 討論實作可行性時、現場修改也容易。

如果能夠提升這個階段的製圖速度,遇到有爭議的時候,直接畫給對方看,專業度立刻大增,對外行人來講亂威一把的。

可以預期客戶音量會越講越小聲,尤其是把紙筆推給對方、請他把他想像中的介面畫出來的時候,有些客戶甚至會當場消音。

(某次和老公討論字級表的 Wireframe,嫌太複雜要再修改。)

第三次就是完稿,當 RD 和 PM 都說沒問題後,在電腦上使用軟體將框線勾勒出來,並加上文字說明,給客戶簽約用的規格書如果需附上 Wireframe 的話會是這個版本。

熟一點的好客戶可以拿手繪稿跟他們討論,但最終還是要進電腦。

將手繪稿電子化有個好處,即使將檔案交由他人接手一樣能夠修改、維護,未來遇到類似介面直接拷貝修改,加快工作速度。

會使用 Axure 或 Balsamiq 來製作電子稿,這兩套都是很多人使用、業界滿知名的軟體,各有優缺點。網路上有很多教學和資源庫,上手容易。

不過這件事通常被我塞給工讀生去處理了(遠目),才擁有更多時間處理下個 Case 。

但遇到複雜、規模較大的產品還是會自己動手。繪製的過程中多少能發現需要改進的地方,花一點心思讓產品更完美沒什麼不好。


(可比對本文第一張圖,將整理過後的構想定版。)

講了這麼一大篇,好像有 Wireframe 就往順利結案踏出一步似的。

別傻了,我相信 80% 以上的客戶看不懂 Wireframe,逼他看還會被嫌醜、嚴重質疑專業。

這種客戶在請他確認介面時什麼都好,等到定版、交規格書、約都簽了、連 PSD 都做得差不多後才開始 GGYY 囉哩囉嗦,加新功能加特效別人有我們也要有!@#$…。

Wireframe 主要是給 RD 看的,省得沒什麼想像力(和設計師比)的 RD 要靠降乩在刻介面。

如果肯定這個 Case 結案後再也見不到它,手繪稿撇一撇、說明文字寫一寫,你家的好人 RD 說好就好。

更多文章

wave
怎麼和 RD 配合製作 UI Animation

昨天貼的動態效果通靈文在粉絲團釣出幾位 RD 分享經驗。在講怎麼和 RD 配合製作 UI Animation 前,先來看 Rplus Chen 推薦的這篇勸世文 Stop Gratuitous UI Animation ,這篇文在呼籲大家不要為了炫而炫,少用莫名奇妙的動態特效

(本文為個人筆記,我都用 Hype3 直接產出 Prototype 和 JS,避開和一堆數值的大混戰,但該知道「為什麼要這樣做」的部份還是要懂。)

工作清單:Mockup

以我自己的工作流程,會是:Functional Map > UI Flow > Wireframe > Mockup > 切圖 > 標示文件。當然在更前期會有 UX 研究、最後會接 HTML 等等,但就一位 UI Designer 來說應該是這些。

對 Mockup 而言…Wireframe 有什麼就畫什麼,不要亂改亂腦補!而且遵守 PSD 製作禮儀

工作清單:Wireframe

Funational MapUI Flow 後,終於到來回修改最多次的 Wireframe 階段了。比起 Funational Map 和 UI Flow,這應該是最多人會接觸到的「規劃」。同時也是最花時間、圖片說明量最大的部份。在這階段修修改改總比都在畫 Mockup 或套程式了才在修改來得輕鬆省力。

工作清單:UI Flow

工作清單:Functional Map 後,繼續來寫 UI Flow 這部份。如果你不知道什麼是 UI Flow ,請參考 初學者的 UI Flow 這篇文。

Akane Lee

Akane Lee

內心戲小劇場超多!每個事件背後,都有無數個為什麼,天天和自己的腦內聲音吵架。

Comments

wave
comments powered by Disqus

Press ESC to close