使用 Watch Face Studio 建立錶面

Stay organized with collections Save and categorize content based on your preferences.

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

建立錶面

工具

WFS 內提供以下工具:

  • 「Add Component」:開啟元件清單,以供您加入錶面。
  • 「Forward / Backward」:將指定元件往前或往後移動。
  • 「Group/Ungroup」:將多個元件分為一組,並當做單一元件進行控制。
  • 「Mask」:此工具能用最底層的形狀外框遮蓋其他圖層的全體或部分內容。
  • 「Build」:開啟建構對話方塊。
  • 「Run on device」:開啟對話方塊,供您預覽錶面在裝置上的情況。

快速鍵

元件

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

元件類型

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

錶面畫布

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

畫布

文字

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

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

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

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

弧形文字

形狀

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

圖片

WFS 支援匯入自訂圖片。

動畫

匯入連續圖片並製作動畫。

動畫

請按照以下步驟說明新增動畫:

  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」。

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

類比指針

加入小時、分鐘與秒鐘的類比指針。開啟檔案瀏覽器然後選擇圖片檔即可匯入為各種指針。

類比指針

數位時鐘

數位時鐘選項包括日期和時間。如果想新增日期,請加入有日期標記的文字元件。日期預設顯示方式為 DAY_WEEK_S MON_S DAY_1_31_Z。如果想新增時間,請加入有數位時鐘標記的文字元件。數位時間預設顯示方式為 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 (only for images)」:替換某圖層的圖片檔案。
  • 「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 張圖片。舉例來說,您可以新增特定的時針、分針和秒針圖片,當做指針的樣式。

樣式 樣式 樣式

選取「apply theme」圖示即可為選取的圖層套用主題顏色和樣式,如以下圖片所示。

樣式

顏色

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

圖片外觀

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

  • 「Hue」:您可以用此滑桿控制色調。
  • 「Saturate」:您可以用此滑桿變更圖片顏色的鮮明度。
  • 「Lightness」:您可以用此滑桿提高圖片顏色的亮度。

文字外觀

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

文字樣式

執行

您可以在 WFS 的「Run」面板內執行錶面。WFS 內可以調整時間、日期、裝置電量、步數、心率或 GYRO 值,以便您測試錶面在不同情況下的顯示內容。「Run」預覽可設定為啟用或一律開啟。設定一律開啟後,便會顯示「Current-On Pixel Ratio」值和「Analyze」按鈕。

執行 一律開啟執行

使用「Run on device」測試錶面。

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