مبانی استفاده از «طراح صفحه ساعت»

این راهنما نحوه ایجاد صفحه ساعت، افزودن عناصر زمان‌محور، و گنجاندن پشتیبانی از عکس‌های انتخابی کاربر، ازجمله گالری چندعکس را توضیح می‌دهد. برای ویژگی‌های بیشتر، راهنمای پیشرفته را ببینید.

ایجاد کردن صفحه ساعت

برای ایجاد صفحه ساعت، قابی در Figma بکشید، سپس آن را به‌صورت زیر پیکربندی کنید:

  1. اندازه آن را روی ۴۵۰ واحد عرض و ۴۵۰ واحد ارتفاع تنظیم کنید:

    گزینه‌های عرض و ارتفاع در چارگوش‌های نوشتاری با برچسب‌های W و
            H به‌ترتیب ظاهر می‌شوند
    شکل ۱: پانل چیدمان قاب Figma، که صفحه ساعت ۴۵۰×۴۵۰ را نشان می‌دهد

    اندازه‌های دیگر هم کار می‌کند، اما ۴۵۰×۴۵۰ برای صفحه‌های ساعت Wear OS توصیه می‌شود و برای صادر کردن به Watch Face Studio لازم است.

  2. برای داشتن صفحه ساعتی که مصرف باتری بهینه‌ای داشته باشد، رنگ پرکننده قاب را روی سیاه تنظیم کنید:

    رنگ پرکننده از شش نویسه الفباعددی استفاده می‌کند که نشان‌دهنده رنگ
            hex است
    شکل ۲: پانل پر کردن قاب که رنگ پرکننده سیاه را نشان می‌دهد
  3. نام قاب را به نامی که می‌خواهید برای صفحه ساعتتان استفاده شود تنظیم کنید. این در ساعت کاربران شما نشان داده می‌شود.

پس‌از ایجاد و پیکربندی قاب، افزونه «طراح صفحه ساعت» را باز کنید و قابی را که به‌تازگی ایجاد کرده‌اید انتخاب کنید. پیش‌نمایش زنده‌ای از آن در پنجره «طراح صفحه ساعت» نشان داده می‌شود.

افزودن عناصر به صفحه ساعت

چند عنصر به صفحه ساعت اضافه کنید تا کاربران بتوانند زمان را تشخیص دهند.

زمان آنالوگ

مستطیلی بکشید که به‌عنوان عقربه ثانیه‌شمار ساعتتان عمل می‌کند.

تأیید کنید که هنگام نمایش شروع دقیقه جدید، مستطیل به‌صورت افقی در مرکز قرار دارد و لبه پایینی آن در مرکز صفحه ساعت قرار دارد، درست مانند عقربه ساعت واقعی. به‌طور پیش‌فرض، Figma Snap to Geometry را فعال می‌کند که خطوط راهنمای قرمز را برای کمک به شما در تراز کردن این مستطیل نشان می‌دهد:

شکل ۳: موقعیت‌یابی قاب بااستفاده از ویژگی «چسباندن به هندسه» Figma

سپس، به «طراح صفحه ساعت» اطلاع دهید که این لایه فقط برای تزئین نیست. مستطیلی را که در مرحله قبل کشیدید انتخاب کنید، سپس به پنجره طراح صفحه ساعت بروید و رفتار را از «ایستا» به «ثانیه‌شمار» تغییر دهید.

گزینه «ثانیه‌شمار» نزدیک به وسط فهرست است
شکل ۴: اختصاص دادن لایه به تابع «ثانیه‌شمار»

توجه کنید که چگونه عقربه هر ثانیه یک‌بار شروع به حرکت می‌کند و تیک‌تاک ساعت را شبیه‌سازی می‌کند. اگر بخواهید می‌توانید نحوه چرخش آن را تنظیم کنید و می‌توانید عقربه دقیقه و عقربه ساعت را هم مشابه این عقربه بسازید.

برای دریافت توصیه درباره صفحه‌های فرعی، به راهنمای استفاده پیشرفته مراجعه کنید.

زمان دیجیتال

همچنین می‌توانیم زمان را بااستفاده از قالب دیجیتال نمایش دهیم. برای انجام این کار، یک لایه نوشتار در Figma ایجاد کنید. فعلاً Hh:Mm:Ss را به‌عنوان محتوای نوشتاری لایه وارد کنید.

در پنجره طراح صفحه ساعت، رفتار نوشتار را از «ایستا» به «زمان دیجیتال» تغییر دهید. پیش‌نمایش نشان می‌دهد که این مورد در دستگاه واقعی چگونه به‌نظر می‌رسد:

شکل ۵: پیش‌نمایش زمان دیجیتال در Watch Face Designer

برای آشنایی با مجموعه نویسه‌های دردسترس که می‌توانید استفاده کنید، راهنمای الگو را که در نوار کناری پنجره طراح صفحه ساعت نمایش داده می‌شود دنبال کنید. برای مثال، a نشان می‌دهد که زمان فعلی «قبل‌ازظهر» است یا «بعدازظهر»، که می‌توانید از آن با «قالب ساعت» برای نمایش زمان ۱۲ ساعته استفاده کنید.

می‌توانید هر قلمی را در Figma انتخاب کنید، ازجمله قلم‌هایی که در Wear OS دردسترس نیستند، و این قلم به‌طور خودکار صادر می‌شود و در صفحه ساعت شما قرار می‌گیرد. به‌خاطر داشته باشید که هر قلم شرایط پروانه‌دهی خاص خود را برای توزیع مجدد دارد.

پیش‌دید زمان‌های مختلف

برای دیدن صفحه ساعت در زمان‌های مختلف روز، می‌توانید با کشیدن لغزنده در پایین پنجره طراح صفحه ساعت، زمان نمایش پیش‌نمایش را تنظیم کنید:

شکل ۶: نوار لغزنده زمان در پایین پنجره Watch Face Designer. عنصر پایین سمت راست زمان فعلی را که بااستفاده از قالب ۲۴ ساعته ساعت/دقیقه/ثانیه پیش‌نمایش می‌شود نشان می‌دهد.

وقتی پیش‌نمایش زمان‌های مختلف را تمام کردید، می‌توانید با انتخاب دکمه بازنشانی در گوشه پایین سمت راست، زمان را به زمان فعلی بازنشانی کنید:

شکل ۷: بازنشانی به زمان فعلی بااستفاده از گوشه پایین سمت راست پنجره طراح صفحه ساعت.

عکس‌های ارائه‌شده توسط کاربر را اضافه کنید

صفحه ساعت شما می‌تواند شامل جایگاهی برای عکس سفارشی باشد. این کار به کاربران اجازه می‌دهد عکسی را که برایشان شخصی است به‌عنوان پساویز اضافه کنند، درحالی‌که زمان و هر عنصر دیگری را که در طراحی‌تان گنجانده‌اید همچنان نشان می‌دهد.

برای پشتیبانی از عکس‌های سفارشی، لایه‌ای به صفحه ساعتتان اضافه کنید و رفتار آن را روی «عکس ارائه‌شده توسط کاربر» تنظیم کنید. در این نمونه، از عکس نمونه گل برای این لایه به‌عنوان تصویر پیش‌فرض استفاده می‌کنیم. این تصویر به‌عنوان جایگزین استفاده می‌شود تا زمانی که کاربر عکس خود را اختصاص دهد، یا زمانی که کاربر تصمیم می‌گیرد از یکی از عکس‌های خود استفاده نکند.

شکل ۸: افزودن پشتیبانی برای عکس‌های ارائه‌شده توسط کاربر

پشتیبانی از انتخاب چند عکس

صفحه ساعت شما می‌تواند از انتخاب چند عکس پشتیبانی کند. «طراح صفحه ساعت» این را گالری می‌نامد:

شکل ۹: گزینه‌های گالری برای عکس‌های ارائه‌شده توسط کاربر

وقتی انتخاب عکس روی «گالری» تنظیم شده باشد، کاربر می‌تواند چند عکس برای این جایگاه انتخاب کند و ساعت در زمان‌های مختلف بین آن‌ها جابه‌جا می‌شود، بسته به اینکه چه چیزی را در «تغییر عکس» انتخاب کنید:

  • وقتی «با تک‌ضرب» انتخاب شده باشد، عکس زمانی تغییر می‌کند که کاربر روی لایه شما تک‌ضرب بزند.
  • وقتی «هنگام بالا آوردن مچ» انتخاب شده باشد، هر سه باری که کاربر مچش را بالا می‌آورد، تغییر می‌کند. درحال‌حاضر، این مورد را نمی‌توان بااستفاده از «طراح صفحه ساعت» تنظیم کرد. درباره اینکه «قالب صفحه ساعت» چگونه بااستفاده از مشخصه changeAfterEvery پشتیبانی پیشرفته‌تری ارائه می‌دهد بیشتر بدانید.

بیشتر بدانید

برای پیش‌دیدن صفحه ساعت در دستگاه فیزیکی، به راهنمای صادر کردن مراجعه کنید.

برای گزینه‌ها و ویژگی‌های بیشتر، راهنمای استفاده پیشرفته را ببینید.