使用 Watch Face Studio 建立錶面

本指南將說明 Watch Face Studio (WFS) 的主要工具和視窗。

圖 1.Watch Face Studio 主畫面。

工具

WFS 內提供以下工具：

• 「Add Component」：開啟元件清單，以供您加入錶面。
• 「Forward」和「Backward」：將指定元件往前或往後移動。
• 「Group」和「Ungroup」：將多個元件分為一組，以便做為單一元件進行控制或對一組元件取消分組。
• 「Mask」︰根據底層的形狀外框覆蓋其他所有圖層或部分圖層。
• 「Build」：開啟建構對話方塊。
• 「Run on device」：開啟對話方塊，供您預覽錶面在裝置上的情況。

元件

您可以在錶面新增任意數量的元件。您也可以使用自訂設計來源當做元件。例如您可以用文字元件顯示心率或步數資料，也能加入可以啟動應用程式的自訂圖片。

元件類型

以下各章節將會說明支援的元件。

錶面畫布

設定錶面底部圖層的畫布顏色︰

文字

文字欄位預設使用一般文字。一般文字為靜態內容且不會變動。透過文字欄位的屬性視窗即可將文字欄位的一般文字改為資料文字。資料文字會變動，且需用標記產生內容。

詳情請參閱「標記運算式」。

選取「Apply Curved-Text」選項即可建立能夠隨著錶面彎曲的文字︰

設定寬度 (W) 和高度 (H) 即可決定文字弧度。變更 W 和 H 即可自動變更文字元件的大小。若要決定文字位置，請點選任一種範圍預設集。指定「Start」和「Angular distance」即可建立更多種類的範圍。將文字方向設為順時針 (CW) 或逆時針 (CCW)。

形狀

新增各種形狀，包括橢圓形和矩形。

圖片

匯入自訂圖片。

動畫

按照以下步驟說明匯入動畫的圖片序列。

1. 使用 Adobe Flash 或 Adobe Premiere 這類設計程式建立連續動畫。
2. 按一下「Add Component」>「Animation」即可為錶面新增動畫檔案。
3. 在檔案瀏覽器中選取連續的圖片，然後按一下「Upload」。
4. 您可以利用變更圖片順序、移除圖片或新增圖片等功能編輯動畫。

5. 藉由設定「Trigger」值即可決定動畫播放方式。

   將觸發值設為「WatchFace on」即可在顯示錶面時立即開始播放動畫。其他選項包括「Tap」、「Every Sec」、「Every Min」及「Every Hour」。您也可以利用「Delay」並輸入秒數，即可延遲開始播放時間。

其他動畫選項包括：

• 「Auto replay」：在動畫播放完成後立即重新播放，直到發生中斷情形 (如關閉螢幕) 為止。
• 「Repeat delay」：設定每次重複播放動畫之間的延遲時間。
• 「Resume Playback」：決定當播放由於中斷情形 (如收到通知或來電) 而停止之後要繼續播放動畫或是從頭開始播放。
• 「Hide before playing」：決定在觸發播放之前是否要隱藏動畫。
• 「Hide after finished」：決定播放完成後是否要隱藏動畫。

多媒體

匯入已經製作成動畫的圖片，例如 AGIF、Lottie 或 WEBP 檔案。

請按照以下步驟說明新增多媒體圖片：

1. 按一下「Add Component」>「Multimedia」。
2. 在檔案瀏覽器中選取檔案，然後按一下「Upload」。
3. 設定動畫開始播放時間的「Trigger Value」。

請注意，多媒體圖片的檔案大小、解析度和影格數可能會影響裝置效能和電池耗電量。系統會在運作期間以非同步方式載入多媒體圖片，並可能由於使用者手錶效能及多種圖片特性的緣故而出現延遲。

類比指針

加入小時、分鐘與秒鐘的類比指針︰

開啟檔案瀏覽器然後選擇圖片檔即可匯入為各種指針。

類比指針具有「Rotation」的屬性。這個屬性包含下列選項：

• 同步
• 時區
• 旋轉
• 值
• 移動效果

「Sync With」選項包括：

• 一天內的時刻
• 一小時內的第幾分鐘
• 一分鐘內的第幾秒
• 日期
• 月份
• 星期幾
• 一年中的第幾天
• 月相

「Second in Minute」選項僅適用於「Sweep」移動效果。當新增第二個指針元件時，系統會自動設定此效果：

數位時鐘

數位時鐘選項包括「Date」和「Time」︰

如果想新增「Date」，請加入有日期標記的文字元件。日期預設顯示方式為 DAY_WEEK_S MON_S DAY_1_31_Z。

如果想新增「Time」，請加入有數位時鐘標記的文字元件。數位時間預設顯示方式為 HOUR_1_12_Z:MIN_Z:SEC_Z。

進度列

在錶面新增進度列，以便追蹤多種活動。進度列元件選項包括直線和圓形的進度列。從六種範圍預設集中選取進度列的位置。指定「Start」和「Angular distance」即可建立更多種類的範圍。將進度列的方向設為順時針或逆時針。

元件管理

您可用使用 WFS 工具管理元件。您可以新增、分組、取消分組和排序錶面元件，如以下章節所示。

新增元件

使用 + 按鈕新增元件：

新增元件時，元件會放在畫布的預設位置上。系統會自動選取該元件，以便您輕鬆進行修改。

將元件進行分組或取消分組

群組可由一或多個元件組成。所有元件都可以分組。您可以取消群組的分組。

將元件進行遮蓋或取消遮蓋

使用遮蓋群組時，最底層的形狀會決定遮蓋群組的可見區域。位於底層上方的圖層只能顯示底層形狀外框以內的內容。

舉例來說，如果您在底層置入三角形的圖片，然後在上方的圖層中加入圖片和動畫，那麼這些圖片和動畫只能顯示底層三角形外框以內的內容。

請按照以下說明建立遮蓋群組：

1. 選取您想分組的圖層。
2. 選取快速鍵區域的「Mask」，或在圖層上按一下滑鼠右鍵並選取「Mask」。

如果想在「Layers」視窗釋放遮蓋群組，請按照以下方式操作：

1. 選取遮蓋群組。
2. 選取快速鍵區域的「Unmask」，或在圖層上按一下滑鼠右鍵並選取「Unmask」。

預覽視窗

當設計錶面時，預覽視窗就是您的主要作業區域。

將所有錶面元素加入預覽視窗顯示的畫布。您可在畫布上拖曳元素到想要的位置、調整元素大小、安排位置，以及旋轉元素。

圖層視窗

圖層視窗會列出預覽視窗顯示的元件和群組。系統預設會為每項元件設定自己的圖層。

您可以在圖層視窗中進行以下操作：

• 「Search」：依名稱搜尋圖層。
• 「Show/Hide」：顯示或隱藏圖層。圖層隱藏後便不會在預覽視窗內播放。
• 「Theme color」：可切換開啟或關閉主題顏色。
• 「Rename」：點兩下名稱欄位並輸入新名稱，即可變更圖層名稱。

在圖層上按一下滑鼠右鍵即可顯示以下選單選項：

• 「Lock/Unlock」：鎖定圖層，使其無法在畫布上移動。
• 「Group/Ungroup」︰將多個元件分為一組，以便做為單一元件進行控制或對一組元件取消分組。
• 「Mask/Unmask」︰根據底層的形狀外框覆蓋其他所有圖層或部分圖層，或從遮蓋群組中移除圖層。
• 「Swap image」︰將圖片檔從一個圖層移至另一個圖層。僅針對圖片顯示。
• 「Layer color」：為圖層新增顏色標籤，以便您分辨不同圖層。

條件行

您可以利用條件行顯示或隱藏錶面元件，並控制元件的行為。藉由使用條件行，錶面外觀即可按照特定條件變更外觀，如時間、步數、電池或事件。

新增元件時，預設會設定時間條件。如要調整這些條件，請按一下所需圖層上的條件圖示。如要設定重複的條件式，請在頁框區域按一下滑鼠右鍵，然後選取「Loop」。

請注意，未顯示的圖層不會影響效能或電池續航力。

您可以按照下列各節所述，將錶面設為回應時間、步數、電池狀態或事件。

分秒必爭

錶面可以根據時間間隔動態變更內容。舉例來說，錶面可以在白天使用較高的亮度，然後在經過一段設定時間後逐漸降低亮度。您可以用小時、分鐘或秒鐘設定時間。

請按照以下步驟新增時間條件：

1. 建立圖層。
2. 設定當顯示各圖層時要控制的時間範圍。選取開始條，然後再選取時間範圍。
3. 按住開始條，並拖曳到結束條。
4. 重複步驟 2 和 3，為所有圖層設定時間範圍。
5. 按一下「Run」並預覽變更內容。

如要分別按照使用者在手機設定的 12 小時制和 24 小時制顯示不同錶面，請按照下列步驟操作：

1. 新增兩個數位時鐘元件，第一個元件為 12 小時制版本，第二個元件為 24 小時制版本。
2. 把兩個元件放在相同的位置上。
3. 將 12 小時制和 24 小時制的條件加入元件的條件行。
4. 設定時間範圍，在 12 小時圖層以 12 小時制顯示第一個數位時鐘元件，然後以 24 小時制顯示另一個圖層。

時間控制

時間控制滑桿可讓你查看錶面的實際運作情況。藉由此功能，您就可以看到錶面如何隨著一天時間而變化內容。您可以將滑桿拖曳到特定時間，或用播放及快轉按鈕查看錶面動畫。

步數

您可以將錶面設計為按照使用者的步數動態變更內容。舉例來說，您可以建立錶面，根據完成的每日步數目標百分比變更內容。

電池

您可以將錶面設計為根據手錶的可用電池續航百分比動態變更內容。

活動

您可以將錶面設計為根據裝置狀態 (例如電量過低或未讀取的通知) 動態變更內容。如要這樣做，請選取所需的活動，以及您想要在該活動期間顯示的圖片或動畫。

屬性視窗

每個元件都有幾種能夠修改的屬性。舉例來說，您可以變更數位時鐘上的數字顏色，或選擇讓某個指針代表小時、分鐘或秒鐘。

動作面板

屬性視窗內的動作面板可讓使用者和錶面進行互動。舉例來說，您可以讓使用者輕觸元件來變更圖片、開啟不同應用程式或測量心率。

樣式

使用樣式分頁標籤變更指定圖層的樣式。您可以為圖片、多媒體圖片、索引和指針元件新增樣式。最多可新增 30 種主題顏色和 10 張圖片。

使用「Customization Editor」，將自訂樣式套用至元件。

在「Customization Editor」對話方塊中，您可以自訂每個元件、圖層和名稱的樣式。您也可以重新排列或合併此對話方塊中的樣式。

您可以在「Style」分頁中新增最多 30 種主題顏色。每種主題顏色最多可以有三種顏色變化。

在「Layer」或「Properties」分頁中設定這些顏色。在「Layer」分頁中，將「Apply Theme Color」 圖示切換為三次，即可設定顏色：

在「Properties」分頁中，選取「Apply Theme Color」圓形按鈕，即可設定顏色：

顏色

為元件套用特定顏色，或為錶面儲存主題顏色。小工具一開始使用灰階顏色主題。

圖片外觀

您可以利用以下控制項變更圖片外觀：

• 「Hue」：控制色調。
• 「Saturate」：變更圖片顏色的鮮明度。
• 「Lightness」：提高圖片顏色的亮度。

文字外觀

您可以用「Text appearance」分頁標籤設定文字對齊和字型樣式。選取「Project Settings」內的「Add Bitmap Font」即可裝飾文字。如果您想讓加入專案的點陣圖字型使用預設的字型大小，請選擇「Apply Default Font Size」。

執行

您可以在 WFS 的「Run」面板內執行錶面。WFS 內可以調整時間、日期、裝置電量、使用者步數、使用者心率或陀螺儀值，以便您測試錶面在不同情況下的顯示內容。您也可以調整「Customization Editor」中設定的任何其他樣式，包括未讀通知、標記運算式或條件行的數量。「Run」預覽可設定為啟用或持續待機。使用持續待機時，WFS 會顯示「Current-On Pixel Ratio」值和「Analyze」按鈕。

使用「Run on device」，在裝置上測試錶面。

詳情請參閱「測試錶面」。