常常有人問我:「自己一個人要怎麼練習畫 Wireframe?」「要怎麼知道自己畫的 Wireframe 對不對?」

前面一個問題我還能分享心得供參考,所以寫了這篇文。後一個問題很難回答,大概就像:要怎麼知道公司的商業策略正不正確。

Wirefrme 線框稿,如果以為就是一堆線和框而已,那和你合作的工程師會非常崩潰。 可以參考這篇超舊的舊文:什麼是 Wireframe? 這裡只提「要怎麼練習畫 Wireframe」。

練習方法

臨摹是初學者進步最快的方式!臨摹完了還可以放作品集裡註明自己臨摹了什麼,來證明自己有基本能力。

  1. 首先,掏出你的手機,找一個 APP 當臨摹對象。要完整的可操作 App,不是 Dribbble 上美美的圖。也不要找太複雜的 App 像是淘寶或是 Line,初學者找功能簡單一點的。

  2. 使用者拿這個 App 要完成什麼事呢?設定一個操作 APP 的「任務」,像是「在 FB 上打卡附照片」。

  3. 設定任務的起點和終點。從哪一個畫面開始?會經過哪些頁面?怎麼樣才算完成任務?

  4. 思考每一頁上每一個控件的「狀態」。點了這個按鈕會去哪一頁?發生錯誤的話這一頁會變成什麼樣子?把畫面上所有的資訊、元件拆細,考慮它們會怎麼變化、因為什麼而變化。

Wireframe 的重點從來就不是那些「框框」,而是旁邊的註解文字。操作 App 完成任務的過程中,使用者和頁面之間的「互動」、頁面的「變化」等等這些都不是靜態的 Wireframe 單靠框線就能夠表達,需要許多額外的文字來說明畫面變化。

練習題目

很多學生一臉緊張地跑來問:「老師我連練習題都不知道要怎麼訂,怎樣算太簡單?怎樣算太複雜?」我擬幾個適合初學者的題目,試著畫看看吧!

都是在手機上的 App,題目請手繪,有紙和筆就可以了,連尺都可以擺一邊去。絕對不要開電腦來畫。練習的是思考邏輯不是軟體能力。

  • 在 Google Calendar 新增一項活動「下週六上午 10 點到下午 4 點,去台北市立美術館看展覽」。
  • 在 IG 上修圖、打卡,發佈一篇新貼文。
  • 在 Youtube 尋找一部和貓有關的影片,看完後分享到 FB 上。

題目難度由淺到深,如果覺得題目都太簡單容易的可以試著把整個 App 所有頁面全畫了。(奸笑)

不怎麼貼心的小提醒

看到題目第一步就是拿起手機開 App 按看看,邊思考「起點」畫面是哪一頁,完成任務的「終點」是哪一頁。

然後照 APP 操作流程,把每一頁上的圖、標題、icon、字、控件等等都照樣搬到紙上畫成線框稿。可以參考舊文:工作清單:Wireframe。在這一步先不要急著寫文字,等頁面都畫得差不多了再來寫字。

回到任務起點的第一頁,檢查這一頁每一個可以操作的控件,比如「日期」鈕按下去後有沒有跳小視窗出來?有的話就補畫頁面。把任務流程會經過的頁面上所有控件全部點一遍。

補完畫面後再回到任務起點的第一頁,恭喜,6 種狀態中的「理想狀態」大致上解決了,咱們來研究其它 5 種狀態下畫面會怎麼變化。

請一定要好好閱讀過這兩篇:如何修正壞 UI頁面的第 6 種狀態

如果對「狀態」是什麼還是有點抓不到概念,可以參考舊文:各種狀態與突發狀況

有跟著進度練習的話,畫完理想狀態後會卡住,不知道要怎麼樣姿勢才能將手上的 App 戳出各種狀態。

對!本來就戳不出來全部的狀態,錯誤狀態要等 APP 發生錯誤時才看得到啊!所以怎麼指望丟一張啥字都沒有的純框框 Wireframe 給工程師就能把 App 介面刻出來?

(依照頁面不同,有些頁面不會有全部 6 種狀態。像是不需要連網的頁面可能就不會有載入中狀態。但在練習上 6 種狀態都要思考一遍再來判斷該頁面哪些狀態不用畫。不是狀態戳不出來就不存在喔!)

畫到這個階段,也臨摹好幾頁理想狀態、寫過註解文字了。多少也抓到註解文字要寫什麼,App 按不出來的就自己掰!

邊瞎掰的同時也會發現 Wireframe 怎麼它媽的畫不完。沒錯!它就是一種覺得好像畫完了但之後又發現漏東漏西的玩意。沒有一次到位、沒有完美的時刻。

這個練習訓練的是思考能力,甚至連尺都不用拿出來,畫歪也沒關係,重要的是知道畫面怎麼變化、因為什麼而變化了。Wireframe 這份文件要傳達的就是這個。

也不用擔心畫得對不對,基本有辦法讓你拿著 App 比對 Wireframe 有沒有畫錯的「理想狀態」因為是照抄出錯率低,其它瞎掰的部份也沒辦法評斷有沒有掰錯,除非 App 開發人員出來指正。臨摹練習也很難判斷要「臨到多精緻」才算「完成」或是「正確」,放寬心動手畫一遍就是了。

(就和練習彈鋼琴一樣,完全照譜面所有音符都按過一次琴鍵沒出錯叫「會彈」,還是連音量和節拍分毫不差才能叫會?要傳達出作曲家想表達的意境、還是要傳達出自己的意境才算對?重點是動手練習啊。)

學生練習實例

去年教大學生畫 UI Flow 和 Wireframe 時他們交出來的作品(對不起這文我拖了一年)。這是我覺得做最好的一組,經過他們許可放出來當範例。


設定一個操作任務,用很多 Wireframe 串成 UI Flow。製作這樣的 UI Flow (也有人稱呼這種圖為 Wireflow)一定要把「為什麼會到這一頁」標清楚,上圖用了藍色框線說明「點了哪裡」。

…各位不覺得看上面這種 Flow 圖太辛苦了嗎?實際上在製作 Wireflow 時當頁面數量太多表示任務太大,請拆分成幾個短一點的任務、多畫幾串短任務的 Wireflow。


可以看到 Wireframe 中間畫著「理想狀態」,除了最基本的資訊架構、內容版面配置之外,拉箭頭出來到旁邊空白處寫註解文字。遇到文字難表達的直接畫圖說明。

手繪稿不用太精細,也不需要把每個文字都寫出來,標題內文區分一下就好,要精細等電繪版的 Wireframe 階段再處理。

初學 UI 他們就能畫成這樣我很滿意兼感動,當然各位在家練習可以更精緻更多細節的話最好。最基本的「頁面怎麼變、為什麼而變」掌握到了,未來進入業界工作,和工程師合作會比較順利,能理解工程師口中的「會動」指的是什麼。

系列文章:大學生的 UI 選修課

之前我在實踐大學開了一門 UI 設計課,簡單大略地從 UX 研究開始介紹、怎麼察覺使用者的痛點、到 UI Flow、Wireframe、Prototype。在 Blog 寫點除了課堂教學外的延伸思考。

comments powered by Disqus