深入探討 Sketch 中的原型設計

過去，我們曾討論過如何開始原型設計，但現在我們將更進一步。今天，我們將學習如何將靜態畫板轉變為互動式原型，使用覆蓋賦予它們生命，並在 Sketch 中直接預覽。我們還將向您展示如何在iOS 裝置上實際測試您的原型，以便您感受它在實際應用中的運作方式。

讓我們開始原型設計吧！

開始使用

要在 Sketch 中開始原型設計，您需要一些畫板。在這種情況下，使用畫板範本比自行繪製的畫板更容易操作。這是因為範本可以幫助原型播放器理解視窗的正確尺寸，這在處理更複雜的原型時會派上用場。更多相關資訊請見稍後說明！

您會發現許多內建的 Apple 和 Android 裝置範本可供使用。只需按下 A 並從檢查器中的下拉選單中選擇即可。

如何新增互動

建立畫板後，就可以開始連結它們。互動或連結會將圖層連接到您想要轉換到的畫板，也稱為目標。這樣，在預覽原型時，如果您點擊、滑過或按下該圖層，就會帶您前往目標畫板。

您可以使用畫板中的任何圖層來連結畫板。要建立互動，請選取圖層並按下 I。您也可以前往檢查器中的「原型」標籤頁，然後點擊「建立互動」。現在，您會看到一個未放置的連結附加到您的游標上，您會注意到我們會在滑過任何可連結的畫板或圖層時將其醒目顯示。剩下的就是點擊您想要連結的畫板，就完成了！

要移除互動，只需將其目標設定為「無」，或選取圖層並從選單中選擇「原型設計 > 從選取範圍移除連結」。

自訂圖層可見性

設定互動時，您可以選擇在使用者與原型互動時，選擇性地顯示和隱藏圖層、群組和符號。還有第三個選項，讓您可以在每次有人點擊或輕觸時，在顯示和隱藏之間切換 — 非常適合設計開關或圖示的不同狀態。

您可以在檢查器的「原型」分頁中找到這些選項。選取圖層、群組或符號，然後在「圖層可見性」面板中選取「自訂」。然後，在「動作」區段中，選擇要顯示、隱藏或切換元素。如果您選擇顯示或隱藏圖層，請在「觸發條件」選單中選取將觸發動作的互動。

自訂您的互動

設定互動後，您可以為其定義轉場動畫。您會在檢查器的「動畫」區段中找到幾個選項可供選擇，但您也可以選擇不使用動畫。

在檢查器的頂部，您也可以使用「目標」下拉式選單來選取要連結的不同畫板 — 包括「上一個畫板」，它會永遠帶您回到您上次查看的畫板。如果您正在建立一個原型，其中單個畫板可以從多個其他畫板存取，例如帶有返回按鈕的螢幕，這將非常有用。

熱區：它們是什麼以及何時使用它們

在某些情況下，您可能希望互動的可點擊區域比畫布上的圖層更大或更小。這就是熱區的用武之地 — 一個專用的互動圖層，可以自由調整大小和位置。

熱區允許您在設計的任何部分繪製目標並將其連結到畫板。您可以透過「插入」選單新增熱區，或按下 I 直接在畫布上開始繪製（請確保您沒有選取任何圖層）。

您也可以將互動轉換為熱區，方法是選取具有互動的圖層，然後點擊檢查器中的「建立熱區」圖示 — 如果您已經連接了一堆畫板，但決定稍後需要更改點擊區域，這會很方便。

熱區特別有用，因為您可以將它們放置在符號內，然後覆寫目標目的地。這樣，您可以重複使用符號，但每次更改目標目的地。您也可以使用此行為來隱藏熱區，方法是在「覆寫」面板中的「熱區」下選擇「無」。

如何使用覆蓋新增動態效果

您可以使用覆蓋（一種特殊類型的畫板）來建立選單、模態視窗、訊息和許多其他 UI 元素。

要將現有畫板轉換為覆蓋，請選取它，前往檢查器的「原型」分頁，然後將畫板類型從「螢幕」切換為「覆蓋」。您也可以建立指向任何小於父畫板的圖層類型的連結 — 我們將在其周圍建立一個畫板，並將其設定為您的覆蓋。

您可以堆疊多個覆蓋 (Overlay)，讓它們相互替換，並為每個覆蓋設定動畫。如果您想瞭解更多關於覆蓋的資訊，請查看我們的完整指南 — 或查看我們的說明文件。

如何在滑鼠懸停、按下和切換時觸發覆蓋

預設情況下，當您點擊觸發圖層時，覆蓋會出現，但您也可以將互動類型更改為滑鼠懸停或按下，具體取決於您的需求。

• 例如，當您製作工具提示或下拉選單的原型時，滑鼠懸停非常有用。
• 當您需要僅在按下並按住元素時才顯示其他資訊時，按下觸發器非常有用 — 例如，當您想要模仿按住圖片縮圖以預覽較大尺寸圖片的操作時。
• 最後，使用切換選項，您可以在每次點擊時顯示或隱藏覆蓋 — 例如，在設計彈出式選單時非常方便。

建立互動後，您可以在檢查器中的原型 (Prototyping) 標籤頁中找到所有這些選項。在下面的影片中，我們將逐步介紹所有內容，以便您跟著練習。

設定起始點

起始點是標記，可讓您指定原型應從哪個畫板開始播放。要設定起始點，請按住 Control 鍵並點擊畫板，然後從選單中選擇「設定為起始點」。當您看到畫板名稱旁邊出現圖示時，表示設定成功。

通常，您會希望在流程開始時設定起始點。但是，設定多個起始點也非常有用 — 例如，如果您正在構建具有許多畫板的複雜原型，或者如果您只想讓某人查看原型的特定部分。

建立捲動區域和原型

您可以建立捲動原型，或讓畫板中的特定區域沿任何方向捲動 — 這對於卡片或互動式地圖等內容非常有用。

建立捲動原型

在 Sketch 中建立捲動原型只有一條黃金法則：確保您使用範本。如果您使用自訂繪製的畫板，它們可能會以縮小比例顯示以適應視埠的高度，而不是以您預期的方式捲動。這是因為 Sketch 需要一個預設的「螢幕尺寸」才能瞭解您的內容何時超出其範圍。

將範本放置在畫布上後，您只需更改畫板的高度即可。現在，每當您預覽原型時，都會獲得流暢的捲動效果。

如果您希望圖層在原型預覽中保持靜態，即使您捲動瀏覽其餘內容，也可以勾選「原型」標籤頁中的「捲動時固定位置」核取方塊。

建立捲動區域

捲動區域非常適合用於使設計的特定部分可捲動，例如地圖或一排卡片。您可以使這些區域內的元素沿任何方向捲動。要使區域可捲動，只需選擇要捲動的元素，前往檢查器中的「原型」標籤頁，然後點擊「設為可捲動」。Sketch 會自動識別方向，並使您的區域垂直、水平或雙向捲動。然後，使用橘色控點調整捲動區域以精確顯示您想要顯示的內容。

我們建議搭配使用捲動區塊和符號，這樣可以更輕鬆地編輯捲動區塊內的內容。觀看以下影片，了解詳細的操作步驟。

在 Sketch 中預覽原型

建立原型後，下一步就是預覽它，看看流程是否運作正常，轉場是否合理。您可以直接在 Mac app、網頁版 app（您可以在這裡與客戶和同事分享您的原型）或使用我們的 iOS app 在您的 iOS 裝置上預覽原型。

要在 Mac app 中播放您的原型，請點擊工具列中的「預覽」按鈕以開啟預覽視窗。您的原型將從目前選取的畫板開始，除非您在其他位置設定了起始點。您也可以以全寬預覽您的原型，使其自動延伸以符合整個瀏覽器視窗，即使調整視窗大小也是如此。

在預覽視窗的頂部，您會看到一個返回按鈕，可讓您返回先前的畫板。您可以從視窗頂部的下拉式選單中選取特定畫板來瀏覽至該畫板。如果您想要更沉浸式和專注的體驗，也可以選擇隱藏這些控制項。

分享您的原型

除了在 Sketch 中預覽外，您也可以在 網頁版 app 上分享您的原型，任何擁有連結的人都可以從任何瀏覽器或裝置上檢視和播放它。您只需設定一個起始點並儲存您的文件，我們就會在網頁版 app 中為您產生該原型的預覽。

您可以在網頁版 app 的「文件詳細資訊」面板中的 檢視 下找到您的原型。就像您工作區中的任何文件一樣，您可以控制誰可以看到您的原型。您也可以直接從 Mac app 的預覽中分享原型。點擊「分享」按鈕，然後選擇要隱藏還是顯示熱點提示 — 這是測試原型時的理想選擇。您也可以從這裡選擇隱藏網頁版 app 的使用者介面和返回設計檔案的連結。這在與客戶分享時非常有用，讓他們可以完全專注於原型。

您也可以啟用留言功能，讓檢視者直接在原型播放器中留下意見回饋 — 非常適合與同事協作或立即獲得客戶的意見回饋。如需更多分享選項，請點擊頂部導覽列中的 ⋯。

在實際情境中測試您的 iOS 設計

如果您正在設計行動介面，沒有比在您為其設計的裝置上測試更好的方法了。使用 iOS app，您可以像在網頁版 app 中一樣簡單地預覽您的原型。當您點選以檢視原型時，您可以透過點選點擊目標來與其互動，以轉換到另一個畫板。當您準備好結束時，請長按幾秒鐘。

這樣就完成了！希望您迫不及待地開始下一個原型設計專案。如果您有任何疑問或想提供我們意見回饋，歡迎到我們的社群論壇找我們。