常言道，一張圖片勝過千言萬語。如果真是如此，那麼原型所能涵蓋的內容就更多了。原型可以幫助您在設計進入開發階段之前將其視覺化並進行測試，幫助您了解使用者如何與您的作品互動，並幫助您發現設計流程中的問題。
有鑑於此，我們整理了一些關於如何開始製作原型的建議，以及一些讓原型脫穎而出的重要技巧和訣竅。
原型設計在什麼時候派上用場？
雖然乍看之下可能像是額外的工作，但在以下幾個關鍵時刻，原型設計將會派上用場：
- 可用性測試。您的使用者知道如何退出畫面嗎？他們能否按照您預期的使用者旅程，從您設計的網站上購買商品？透過執行可用性測試，您將能夠看到使用者在您的設計上線後將如何與之互動。
- 讓利害關係人參與。需要檢查您的 GDPR 同意方塊是否正確顯示嗎？將您的原型傳遞給您的資料保護團隊，他們就可以實際進行測試。
- 讓客戶留下深刻印象。原型可以透過提供客戶親身體驗來幫助解釋甚至銷售您的想法。
- 傳達您的願景。透過使用互動式媒介來預覽和測試設計元素，設計師和開發人員可以更好地理解彼此以及專案。
既然我們知道了原型是多麼有用，現在是時候學習如何讓它們發揮作用了。
為成功的原型設計奠定基礎
在進入數位化之前，您可能會受益於在速寫本上記錄一些想法。這樣，您可以在投入實際的設計專案之前先思考清楚。
如果您剛開始接觸原型設計，將您的想法畫成草圖可以讓您保持條理分明，並專注於任務。
不確定如何開始您的原型藍圖？我們隨時為您提供協助。
- 收集所有筆記。這些筆記可能來自客戶、合作夥伴，甚至是您曾經貼在冰箱上的隨機便利貼。在開始之前，盡可能收集有關原型計劃和期望的情報。
- 開始草擬原型的各個階段。您希望使用者看到的第一件事是什麼？在規劃使用者旅程時，開始草擬想法。
- 完善您的草稿。即使您第一次就做對了，清晰的藍圖仍然對您有好處，它可以增強您的信心和動力。
開始原型設計
是時候將您的藍圖轉化為成熟的原型了！有了完善的草稿，您就可以立即準備好啟動並運行您的原型了。
建構原型 (Prototype) 的最佳實務
在您全心投入之前，建構原型時需要考慮以下幾點事項
低擬真或高擬真？擬真度指的是原型與實際成品的相似程度。如果您只是要準備簡報用的快速視覺輔助工具，低擬真原型 — 例如帶有佔位圖和基本文字的線框圖 — 就綽綽有餘了。但如果您要進行更複雜的可用性測試，高擬真原型 — 具備品牌顏色、字體和圖像 — 則有助於獲得更精確的結果。
高擬真原型將包含連結和熱點。
設身處地為使用者著想。要建立直觀的使用者流程，請嘗試以使用者的角度思考他們與產品互動的方式。雖然您可以在 Beta 測試期間進行微調，但及早考慮使用者的需求和習慣，讓您一開始就走在正確的道路上，將能節省時間。
由內而外開始建構。組織工作和建立更易於使用者操作的原型的良好方法是「由內而外」地建構原型。首先專注於對使用者重要的部分，例如「立即購買」按鈕或圖片庫，並按照優先順序列出每個元素。透過這種方式，您將能夠建立一個以使用者需求為核心設計的原型。
使用 Sketch 建立原型
首先在畫布上插入一個畫板。您可以從我們現有的預設選項中選擇，例如 iPhone 螢幕，或建立自己的畫板。這個畫板可以作為您的第一個畫面（例如登入畫面）。然後，繼續新增不同的畫板來反映設計流程中的不同螢幕。完成後，使用連結將它們連接起來，您可以按下 W 鍵來新增連結。如需關於如何使用 Sketch 建立原型的更詳細指南，請造訪我們的文件。
W 捷徑會將連結新增到您目前所在的元素。
可用性測試
能夠在製作前測試設計是原型設計的最大優點之一。但要真正充分利用您的可用性測試，必須清楚了解您想要達成的目標。在對您的原型進行測試之前，請先問自己以下問題
- 測試的目標是什麼？
- Beta 測試者需要完成哪些步驟才能達成此目標？
- 您應該提供 Beta 測試者多少背景資訊？
根據您原型的範圍，您可能還需要選擇要測試的特定部分。例如，如果您正在設計購物網站，並且想知道使用者體驗是否清晰，請您的 Beta 測試者嘗試購買一件球衣。
最後但同樣重要的是，請務必為您要執行的測試選擇合適的受眾。確定您的真正客戶或使用者是誰，並聯繫該範圍內各種潛在的 Beta 測試者。這樣一來，您的結果將會更準確，因為您將會收到真正對您的產品感興趣的人的回饋。
檢視者和訪客可以免費預覽和測試您的原型。
讓您的原型更吸睛的技巧和訣竅
在 Sketch 中，原型一開始是一系列簡單連結的畫板，但您可以做的遠不止於此。
準備好將您的原型提升到一個新的水平了嗎？
快速新增連結。您可以使用 W 鍵在畫布上的任何位置新增連結 
。只需選擇您要連結的元件或畫板，按下 W 鍵，然後選擇目標畫板即可。
顯示或隱藏原型製作流程。要保持畫布的整潔，您可以透過選擇 ⌃⌥F 來部分或完全隱藏您未處理的畫板連結。
動畫。您可以透過新增動畫轉場效果來模擬實際產品的行為。例如，在檢查器中的「動畫」區段下選擇 
選項，即可建立向上滑動的動態效果。
選擇動畫後，開啟原型預覽視窗即可查看效果。
熱點。您可以使用熱點在小圖示後方建立更大的觸控區域。例如，如果您的關閉按鈕太小而難以按下，您可以在其周圍建立一個透明的熱點，讓測試者更容易點按。
引導您的測試者。您可以啟用熱點來引導使用者或觀眾與您的原型互動。為了在可用性測試中獲得更準確的結果，您也可以停用原型熱點，以避免任何提示。
設定可用性測試。與熱點類似，您可以在畫布上新增帶有特定指示的文字方塊，以引導您的 Beta 測試者。
起始點。您可以透過在選單列中選擇「原型」>「使用畫板作為起始點」來定義起始點。如此一來，無論使用者點擊哪裡，都能從您指定的位置開始體驗。
分享您的原型
好的，您已經設計好原型，並準備好進行使用者測試。現在是時候分享它們了。使用 Sketch，您可以在 Mac 應用程式或網頁應用程式中開啟您的原型，並立即複製連結以與他人分享。您工作區中的任何檢視者或編輯者也可以預覽您的原型並留下意見回饋。您可以在我們的文件中找到更詳細的說明。
您可以從網頁和 Mac 應用程式取得原型的分享連結。
這樣就完成了！您需要的一切都可以在 Sketch 中找到，立即開始製作原型吧！
