常常有人問我：「自己一個人要怎麼練習畫 Wireframe？」「要怎麼知道自己畫的 Wireframe 對不對？」
前面一個問題我還能分享心得供參考，所以寫了這篇文。後一個問題很難回答，大概就像：要怎麼知道公司的商業策略正不正確。
Wirefrme 線框稿，如果以為就是一堆線和框而已，那和你合作的工程師會非常崩潰。 可以參考這篇超舊的舊文：什麼是 Wireframe？ 這裡只提「要怎麼練習畫 Wireframe」。
練習方法
臨摹是初學者進步最快的方式！ 臨摹完了還可以放作品集裡註明自己臨摹了什麼，來證明自己有基本能力。
首先，掏出你的手機，找一個 APP 當臨摹對象。要完整的可操作 App，不是 Dribbble 上美美的圖。也不要找太複雜的 App 像是淘寶或是 Line，初學者找功能簡單一點的。
使用者拿這個 App 要完成什麼事呢？設定一個操作 APP 的「任務」，像是「在 FB 上打卡附照片」。
設定任務的起點和終點。從哪一個畫面開始？會經過哪些頁面？怎麼樣才算完成任務？
思考每一頁上每一個控件的「狀態」。點了這個按鈕會去哪一頁？發生錯誤的話這一頁會變成什麼樣子？把畫面上所有的資訊、元件拆細，考慮它們會怎麼變化、因為什麼而變化。
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 寫點除了課堂教學外的延伸思考。
