如何使用可重複使用的元素建立響應式 iOS 小工具

歡迎回到我們的小工具教學課程！今天，我們將學習如何建立一個可調整的小工具範本，從我們在上一課中製作的背景開始。在使用小工具時，建立彈性元素至關重要。這是因為您的小工具將以不同的尺寸和觸控點顯示在使用者的行動裝置螢幕上。

在本課程中，我們將使用符號來建立您可以調整大小、對齊方式等的元素。這樣，我們的元素將作為構建塊，您可以輕鬆地替換或編輯它們，隨著您的小工具演變。

讓我們開始吧！

讓我們從一些準備工作開始

對於 iPhone app 小工具，您需要建立三個具有以下尺寸的畫板（您可以按 A 啟動畫板工具）

• 169x169 像素
• 360x169 像素
• 360x376 像素

接下來，我們將建立一個範本圖層，我們將在所有這些小工具版本中重複使用。

首先在最小的畫板上新增一個 169x169 像素的矩形（您可以按 R 啟動矩形工具）。確保矩形覆蓋整個畫板。現在，取消勾選檢查器「樣式」區段下的「邊框」，並將「填滿」更改為與您的星空背景相同的深藍色（我們使用的是 #161239）。

接下來，點擊「填滿」旁邊的「+」按鈕，並新增線性漸層。將第一個漸層點設為深藍色，然後將透明度降低到零。將漸層點滑動到幾乎與第二個點重合，並為後者指定較淺的藍色。這將是我們稍後放置按鈕的位置。

最後，點擊檢查器「外觀」區段下的「+」按鈕，並將您的新圖層樣式命名為「範本」。為其餘的畫板建立矩形。然後，從「外觀」下的下拉式選單中選擇圖層樣式，將其套用至每個新的矩形。

使用符號建立可調整的背景

現在我們有了範本，可以開始從這裡建構小工具了。首先，回到我們上次建立的星空背景，並將其轉換為Symbol（符號）。這樣一來，您就可以將相同的背景用於不同尺寸的小工具。只需選取畫板，然後點擊工具列中的「符號」圖示即可。

在本次練習中，我們會將符號整齊地整理在單獨的「符號」頁面上，因此請務必在點擊「建立」之前，勾選「將符號傳送到符號頁面」的核取方塊。

接下來，按住 Control 鍵並點擊我們剛才建立的任何一個範本矩形，然後選取遮罩（Mask）。遮罩是一個圖層，它會裁切您插入的任何內容以符合其形狀，因此您不必擔心背景的裁切問題。前往檢查器中的「圓角」區段，從下拉式選單中選取「平滑」，並將其設定為 22。您會看到矩形現在具有圓角。

前往工具列，點擊「+」按鈕，並透過選取「符號 > 此文件 > 背景」來插入星空背景。如有必要，請重新定位背景，以便您能看到上次建立的明亮星星。

現在，只需對其他兩個畫板重複相同的步驟即可。

如何建立可重複使用的文字圖層

為了讓小工具對我們的使用者更有用，我們需要在其中加入一些資訊。為此，讓我們建立一個可以容納所有稍後將重複使用的文字方塊的符號。

首先建立三個文字方塊，並輸入以下文字，將它們垂直堆疊 — 最好在彼此之間保持相等的距離

• 類型
• 狀態
• 描述

現在不用擔心字體或文字樣式 — 我們稍後會處理。接下來，選取所有三個文字方塊，然後點擊工具列中的「建立符號」按鈕 — 您可以將符號命名為「詳細資訊」。您會在「符號」頁面中找到新建立的「詳細資訊」符號，這就是我們接下來要去的地方。

在「符號」頁面上，我們需要為「詳細資訊」符號設定背景。選取符號，在檢查器的「符號來源」區段下勾選「新增背景顏色」核取方塊，並為其設定與星空背景相同的深藍色。這將有助於我們正確地顯示文字，但當我們稍後將其新增到小工具時，背景不會被帶入。

接下來，您需要透過增加或減少字體大小來區分每個文字方塊。您也可以稍微降低某些文字圖層的不透明度，以建立不同的白色陰影 — 但要注意可讀性。唯一的規則是確保「狀態」在其他文字中突出顯示，因為它將包含您小工具的主要資訊。

使用巢狀符號將所有內容整合在一起

是時候展現 Sketch 的神奇魔力了。我們現在有一個背景符號和一個文字圖層符號。這些將成為我們創建 Widget 的主要構建塊。雖然我們將重點放在組合這些元素上，但請記住，您可以從任何其他您想在設計中重複使用的組件創建符號，例如圖標或按鈕。

還記得我們一開始創建的三個畫板嗎？讓我們將它們各自轉換成一個符號。然後，將您的「詳細信息」符號插入到每個畫板中。也許您已經在想了——我們現在是否在一個符號裡面又有一個符號？的確如此！我們的背景和文字符號現在「嵌套」在每個 Widget 中。

嵌套符號 為我們編輯符號提供了更大的靈活性。我們可以建立尺寸參數並進行特定調整，而不會影響其他 Widget 符號。

在我們下一期也是最後一期的文章中，我們將探討如何編輯 Widget 中的每個組件。所以請務必在下週密切關注。 👀