大學生的UI 設計選修課（9）練習畫Wireframe 的方法

自己一個人要怎麼練習畫Wireframe？我要怎麼知道自己畫的Wireframe 對不對？ 嫁給RD的UIDesignerAkaneLeeUIDesignerTaipei,Taiwan uiux.akane Tweetsby@akane_lee常常有人問我：「自己一個人要怎麼練習畫Wireframe？」「要怎麼知道自己畫的Wireframe對不對？」前面一個問題我還能分享心得供參考，所以寫了這篇文。

後一個問題很難回答，大概就像：要怎麼知道公司的商業策略正不正確。

Wirefrme線框稿，如果以為就是一堆線和框而已，那和你合作的工程師會非常崩潰。

可以參考這篇超舊的舊文：什麼是Wireframe？這裡只提「要怎麼練習畫Wireframe」。

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

首先，掏出你的手機，找一個APP當臨摹對象。

要完整的可操作App，不是Dribbble上美美的圖。

也不要找太複雜的App像是淘寶或是Line，初學者找功能簡單一點的。

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

設定任務的起點和終點。

從哪一個畫面開始？會經過哪些頁面？怎麼樣才算完成任務？思考每一頁上每一個控件的「狀態」。

點了這個按鈕會去哪一頁？發生錯誤的話這一頁會變成什麼樣子？把畫面上所有的資訊、元件拆細，考慮它們會怎麼變化、因為什麼而變化。

Wireframe的重點從來就不是那些「框框」，而是旁邊的註解文字。

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

練習題目很多學生一臉緊張地跑來問：「老師我連練習題都不知道要怎麼訂，怎樣算太簡單？怎樣算太複雜？」我擬幾個適合初學者的題目，試著畫看看吧！都是在手機上的App，題目請手繪，有紙和筆就可以了，連尺都可以擺一邊去。

絕對不要開電腦來畫。

練習的是思考邏輯不是軟體能力。

在GoogleCalendar新增一項活動「下週六上午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開發人員出來指正。

臨摹練習也很難判斷要「臨到多精緻」才算「完成」或是「正確」，放寬心動手畫一遍就是了。

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

）學生練習實例去年教大學生畫UIFlow和Wireframe時他們交出來的作品（對不起這文我拖了一年）。

這是我覺得做最好的一組，經過他們許可放出來當範例。

設定一個操作任務，用很多Wireframe串成UIFlow。

製作這樣的UIFlow（也有人稱呼這種圖為Wireflow）一定要把「為什麼會到這一頁」標清楚，上圖用了藍色框線說明「點了哪裡」。

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

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

遇到文字難表達的直接畫圖說明。

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

初學UI他們就能畫成這樣我很滿意兼感動，當然各位在家練習可以更精緻更多細節的話最好。

最基本的「頁面怎麼變、為什麼而變」掌握到了，未來進入業界工作，和工程師合作會比較順利，能理解工程師口中的「會動」指的是什麼。

系列文章：大學生的UI選修課之前我在實踐大學開了一門UI設計課，簡單大略地從UX研究開始介紹、怎麼察覺使用者的痛點、到UIFlow、Wireframe、Prototype。

在Blog寫點除了課堂教學外的延伸思考。

大學生的UI設計選修課（1）課綱大學生的UI設計選修課（2）使用者、任務、行為大學生的UI設計選修課（3）使用者測試、使用者訪談大學生的UI設計選修課（4）親和圖大學生的UI設計選修課（5）分析文章大學生的UI設計選修課（6）人物誌大學生的UI設計選修課（7）使用者旅程圖大學生的UI設計選修課（8）UIFlow大學生的UI設計選修課（9）Wireframe大學生的UI設計選修課（10）PrototypeOlder»MagicaVoxel入門«Newer大學生的UI設計選修課（10）Prototype類型與使用時機 commentspoweredbyDisqus最新課程資訊台北5月UX課CategoriesPodcast 4UI雜談 64UX相關 28Youtube 6個人經驗 51好書推薦 28爬舊文有風險 11設計思考 1課程講座 31軟體與操作 53遊記 15開發流程 38Tagcloud3D adobe Android App CLIPSTUDIOPAINT CX FlowChart FunctionalMap GrowthHack Guideline HTML HTML,CSS Illustrator iOS iPhone MacOS MagicaVoxel Mockup Photoshop Podcast Prototype Rails RWD StarWars TOOL Tutorial UI UIFlow UI和RD UI雜談 UX UX相關 Wireframe 作品集 個人經驗 公司營運 切圖 初學者 加拿大 動態效果 半途而廢 台灣 吃貨 好書推薦 工作職責 我的生活 手繪 拆解UI 接案 文具 日本 書單 服務設計 標示文件 歐洲 泰國 研究方法 簡歷 設計思考 課程 遊戲 開發流程 面試 香港