前言
這是UX學習系列的第四篇文章，在前一篇文章中，我們學習了有關於「易用性評估-實踐法」的步驟，包含了以下的內容：
- 計畫：為什麼要做此次的易用性評估
- 評估設計：製造使用者實際在使用網站/服務時，所會遭遇的情境
- 準備調查：事前準備流程與素材，為下一步實際調查作準備
- 現場調查：邀請受測者親臨現場，觀察其實際使用網站/服務的狀況
- 分析：分類、討論在「現場調查」中觀察到的問題，並排定問題解決順序
到此為止，UX設計中的「易用性評估」內容已經分享完畢，接下來我們要往「原型設計」的內容出發。
📚 博客來購書連結：WEB 設計職人必修：UX Design 初學者學習手冊
如果你覺得此篇文章有幫助到你，歡迎透過上方連結購書，我會獲得來自於博客來的回饋金，當作是你對我的肯定!首先我們必須先問，「原型設計」到底是什麼呢？根據書上的定義：
原型設計是「 在完成產品或服務的完整版之前，製作原型(試作品)來評估或改善」。
簡單來說，就是當我們開發產品的UI時，在實際開發前先針對UI草稿做一番討論、取得共識、改善的過程。
這邊我們時常會聽到三個英文單字，分別是Wireframe、Mockup、Prototype。有些文章甚至會將此三者的中文都翻譯成「原型」，但這是非常不精準的翻譯，為了更清楚的區別，我們將這三者翻譯成下面的中文：
- Wireframe：線框圖
- Mockup：視覺稿
- Prototype：原型
不論是跟Designer合作，或是求職網上許多關於產品開發、UI/UX設計的工作，都會不斷的看到這三個名詞，我推薦大家可以閱讀Lynn的這篇文章，對此三者的差異可以有非常清楚地理解。
為了加速理解，這邊我直接摘要Lynn在文章中，關於此三個名詞的不同意義：
1.Wireframe (線框圖)
階段目標：功能導向設計，整合產品團隊中的成員意見達到共識。
2.Mockup (視覺稿)
階段目標：以達到最佳產品功能為目標的視覺呈現。
3.Prototype (原型)
階段目標：實體產品介面與功能開發。
使用順序通常依序是：Wireframe → Mockup → Prototype
接下來我會分享：
- 為什麼需要使用「原型設計」？
- 如何使用「Wireframe」進行「易用性評估」？
- 在使用「Wireframe」來做「原型設計」時，需要注意什麼事情？
請留意上方的第1點是Wireframe、Mockup、Prototype都通用的概念 ; 第2、3點，則是針對「Wireframe(線框圖)」的使用做說明，不包含Mockup與Prototype。
一、為什麼需要使用「原型設計」？
讓我們再複習一次「原型設計」的概念：
原型設計是「 在完成產品或服務的完整版之前，製作原型(試作品)來評估或改善」。
我們可以想像，從產品/服務的UI草稿，到實際開發出來並且上線，中間要投入的人力、時間資源會愈來愈多。如果在開發的中間才突然發現，原規劃的UI、功能不恰當而需要更改，那對於整個團隊都將是一個巨大的折磨。
讓我來舉個例子。
以下是前公司之前在開發「區間促銷優惠」設定功能時，第一版的Mockup 與 最終版Mockup。目標：讓旅館主人可以設定「區間促銷優惠」，藉此提升旅館在訂房平台上的競爭力。功能簡介：主人選擇完「開始日期」與「結束日期」，並設定完「折扣」後，可在勾選要將折扣套用到此區間的星期幾。討論重點：「折扣套用在星期幾」的UI，應該如何呈現？
先不論最後的版本是好是壞，這邊我想要分享的經驗是：此二版本的修改時間，是發生在「工程師實際開發的期間」！結果造成團隊中的所有成員，包含PM、RD、QA都非常的困擾，大家的工作節奏都被這個需求更改打亂。
「需求改變」在產品規劃中是很常遇到的事情，但發生的時間點卻會決定其影響程度的高低。上面的UI需求變更，正是可以透過「原型設計」時先取得團隊共識。
這件事情的起因，就是團隊在「需求討論」時沒有做到共識，我自己身為PM也在這件事情上學到了教訓：
在規劃UI時，一定要請「相關團隊」派出代表，包含PM、RD、Design、需求提出端(例如行銷、營運、業務…等)，大家針對UI流程討論過一遍並且畫押，有任何需求改變必須在一定時限內提出，讓「需求改變」發生在規劃階段並且獲得解決。
二、如何使用「Wireframe(線框圖)」進行「易用性評估」？
延續上方的話題，我們可以明顯看到「Mockup」的差異，已經是UI佈局上的修改，而在這個階段要修改畫面，往往需要麻煩到Designer協助。如果將這樣的修改，提前至「Wireframe」階段來進行的話，就可以縮減人力上的浪費，因為「Wireframe」通常由PM自己製作就可以了。
那我們要如何利用「Wireframe」來進行「易用性評估」，藉此找到潛在需要修改的UI佈局呢？
在前一章我們學到，要進行「易用性評估」需要讓受測者實際操作網頁，並藉此觀察潛在問題。但在現實工作中，除非是針對現有網頁做評估，否則在新網頁的規劃上，是不會有網頁可以讓User操作的。
書中提供了「綠野仙蹤法」，這種方法不需要HTML網頁，甚至利用PowerPoint、手繪圖就可以進行「易用性評估」，大幅縮減了評估時需要的技術。
-綠野仙蹤法-
針對受測者的行動(例如點擊)，把原本在瀏覽器上切換網頁的互動，取代成由扮演瀏覽器的人，來移動列印在紙上的線框圖。
使用者把平面的線框圖當作網站畫面，手指當作滑鼠游標，同樣模擬執行網站操作。
使用者點擊連結之後，扮演瀏覽器的人要將紙張抽換成連結目標的網頁 ; 使用者點擊下拉式選單後，扮演瀏覽器的人要開啟下拉式選單。
下方是綠野仙蹤手法的參考：
三、在使用「Wireframe」來做「原型設計」時，需要注意什麼事情？
在使用「Wireframe」來做「原型設計」時，有個務必要注意的重點，那就是「不要過度製作」。
如果以效率上來講，此階段利用紙、筆、剪刀、便利貼等工具來進行規劃，就已經綽綽有餘，「Wireframe」的醜陋反而變成了它的優點，讓團隊成員可以更專心在「UI佈局、功能規劃的同步」。
以下方的例子來說，如果發現導覽列的位置不好，可以直接用「摺紙」的方式將導覽列「隱藏」，節省了塗塗改改的時間 ; 酒瓶的圖案如果覺得不適合，也可以使用「便利貼」直接貼在紙上並寫上標語來修改。
在製作完「紙Wireframe」後，書中建議可以採取下方流程做討論：
- 製作在「轉換動線(即希望User操作頁面的瀏覽順序)」上的紙Wireframe
- 依照使用者的操作順序排列紙Wireframe
- 針對目標使用者的屬性、需求、使用背景等，搭配人物誌/腳本進行操作 (下一章會有更詳細的使用者腳本製作說明)
- 以成為目標使用者的想法，試用從landing page(到達網頁)至轉換網頁(此次想評估的網頁)。
重點是「雖然是看起來簡陋的紙Wireframe，但要用手指實際使用看看」的討論過程，相關成員最好都要走過一遍流程。
小結
這篇文章講了許多東西，最後在幫大家複習一下：
- 為什麼需要使用「原型設計」？
降低後續「需求改變」的風險與影響力
- 如何使用「Wireframe(線框圖)」進行「易用性評估」？
綠野仙蹤法
- 在使用「Wireframe」來做「原型設計」時，需要注意什麼事情？
不要過度製作
📚 博客來購書連結：WEB 設計職人必修：UX Design 初學者學習手冊
如果你覺得此篇文章有幫助到你，歡迎透過上方連結購書，我會獲得來自於博客來的回饋金，當作是你對我的肯定!若要閱讀之前的文章，請點擊下方的傳送連結：
- UX學習系列(一) UX到底是什麼？從零基礎開始學習「User eXperience (UX)」
- UX學習系列(二) UX到底是什麼？易用性評估(Usability Evaluation) ，概念篇
- UX學習系列(三) UX到底是什麼？易用性評估(Usability Evaluation) ，實踐篇
我是朱騏，是一個渴求新知、熱愛學習的產品經理。也是一個喜歡研究各種生產力工具、熱愛將專案管理知識應用在魔術學習上的魔術愛好者。如果有任何疑問、想聽的主題，歡迎留言給我 📒如果想給我一點鼓勵，請給我 1–10 個拍手；
如果覺得文章對你有幫助，請給我 10–40 個拍手；
如果有興趣看其他「UX學習系列文」相關的分享請給我 40+ 個拍手讓我知道 👏🏻最後，謝謝你的閱讀！喜歡我的文章，可以點擊下方「Follow」我～| LinkedIn @ Chi Chu
