我們最近推出了 「覆蓋」，這項強大的功能可用於在 Sketch 中建立動態 原型。今天，我們將深入探討使用「覆蓋」功能的優點，並探討一些使用案例，激發您的創意靈感。
讓我們來看看它的強大功能吧！
但首先…
什麼是「覆蓋」？
「覆蓋」是指顯示在現有 UI 上方的任何互動或訊息的統稱。這些內容包羅萬象，從 iOS 風格的分享表單到彈出式警示，甚至是需要引起注意的互動式阻擋模態視窗。
在 Sketch 中，「覆蓋」是一種 畫板 類型，當您預覽原型時，它會顯示在現有畫板的上方。
在 Sketch 中使用「覆蓋」功能的優點
長期以來，「覆蓋」一直是日常設計的一部分，那麼在 Sketch 中使用這個功能有何獨特之處呢？嗯，我們確實仔細思考過 這方面的 使用者體驗。「覆蓋」是一項很棒的功能，但當您需要處理大量的模態視窗和互動時，設計和管理起來可能會非常複雜。我們不想只是再推出另一個笨拙的「覆蓋」工具，然後祈求一切順利。相反地，我們坐下來思考常見的陷阱以及如何解決這些問題。
讓我們仔細看看這些解決方案。
建立一個「覆蓋」，就能建立所有「覆蓋」
使用 Sketch 時，「覆蓋」永遠都是「覆蓋」。什麼意思？別擔心，這不是什麼超現實主義的俏皮話！我們的用意是，您不需要每次都指定某個東西是「覆蓋」。相反地，您可以將任何畫板變成「覆蓋」，並一次定義您需要的設定，包括位置、視覺處理和互動。而且因為您選擇的任何設定都會保留在該畫板上，所以您不需要每次連結到該「覆蓋」時都重新輸入這些設定。
以下提供一個範例
建立「覆蓋」後，畫板會儲存您上次選取的設定。
將它們對齊 - 或不對齊
無縫覆蓋設計的關鍵在於定位。我們希望確保您能精確放置覆蓋，同時避免額外的工作負擔。Sketch 讓您輕鬆保持覆蓋的一致性，方法是將它們與圖層或螢幕對齊。您可以使用我們的空間控制項，直接在畫布和檢查器中操作。
它是如何運作的呢？當將覆蓋與螢幕對齊時，您可以選擇九個錨點。不僅如此！您還可以透過使用偏移量來進一步自訂位置，這對於設定邊距非常有用。
相對於圖層對齊對於與螢幕特定區域相關的小型彈出視窗或模態視窗非常有用，例如：對話泡泡或提示。當您選擇相對於圖層對齊時，您可以使用與之前相同的控制項，但它們會忽略螢幕的其餘部分，而是專注於所選的觸發圖層。
以下提供一個範例
在這裡，我們將覆蓋對齊到愛心和書籤圖層的正上方，以呈現整潔的外觀。您可以在我們的範例文件中測試並檢查所有覆蓋設定。
在互動層級操作
我們剛才討論的所有這些絕妙功能，您都可以在互動層級執行。因此，您無需複製覆蓋即可新增不同的位置，您可以編輯相同的覆蓋並重複使用它。您可以針對特定互動調整從對齊到偏移量再到錨點的所有內容。
以下提供一個範例
在這裡，我們使用相同的「選單」覆蓋，但位置不同。查看我們的範例文件，親自了解其內部運作方式！
環環相扣，而非層層堆疊
覆蓋的一大優點是它們允許使用者完成一系列互動，而無需離開他們所在的螢幕。但在製作原型時，模擬這些互動可能會變得笨拙。通常，您最終會得到位置始終鎖定的交換覆蓋。或者更糟的是，您最終會得到一堆堆疊在一起的螢幕，前一個彈出視窗的碎片從每個角落伸出來。
使用 Sketch，堆疊覆蓋不僅超級簡單，您還可以將它們連結起來。透過將一個互動連結到另一個互動，您可以選擇新覆蓋出現的位置，以及當使用者觸發下一個互動時前一個覆蓋是否應該關閉。這就是我們所說的簡潔原型製作💅
以下是堆疊的範例
在這裡，我們使用多個覆蓋來建立一系列事件。在我們的範例文件中查看我們是如何做到的。
以下是連結的範例
在這裡，您可以看到當我們提示下一個覆蓋時，一個覆蓋是如何關閉的。另外，請查看模糊的背景效果。
符號🤝 覆蓋
如果在 Sketch 和設計中有一件事是必然的，那就是沒有任何東西會一成不變。如果您習慣使用符號，您可能熟悉智慧佈局——這是一個很棒的工具，可以教導您的符號如何適應畫板或圖層的變化。但我們相信好事成三，就像三劍客、寶可夢的御三家，或是飛天小女警。現在，您可以將符號 + 智慧佈局 + 覆蓋三人組加入陣容。
在上面的範例中，我們看到了如何使用符號覆寫在不同狀態之間切換。但是，如果我們預計要對這些狀態進行更改呢？透過智慧佈局，我們可以準備好我們的符號以採取行動，同時牢記原型覆蓋的整體尺寸。
以下提供一個範例
您會在我們的範例文件中找到許多已應用智慧佈局的符號。在符號頁面中檢查它們並進行測試！
這樣就完成了！現在您可以準備將您的原型設計提升到一個新的水平。若要更深入地了解如何在 Sketch 中使用覆蓋，您可以查看我們的介紹文章或瀏覽我們的文件。
Sketch 見！
