اصول استفاده از Watch Face Designer

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

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

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

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

    گزینه های عرض و ارتفاع در کادرهای متنی با برچسب W و ظاهر می شوند             H به ترتیب
    شکل 1 : پانل طرح بندی قاب Figma، صفحه ساعت 450x450 را نشان می دهد

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

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

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

پس از ایجاد و پیکربندی قاب، افزونه Watch Face Designer را باز کنید و فریمی را که ایجاد کرده اید انتخاب کنید. پیش نمایش زنده آن در پنجره Watch Face Designer ظاهر می شود.

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

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

زمان آنالوگ

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

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

شکل 3 : تعیین موقعیت یک قاب با استفاده از ویژگی Snap to Geometry Figma

در مرحله بعد، به Watch Face Designer اطلاع دهید که این لایه فقط برای تزئین نیست. مستطیلی را که در مرحله قبل ترسیم کردید انتخاب کنید، سپس به پنجره Watch Face Designer بروید و رفتار را از "Static" به "Second hand" تغییر دهید.

گزینه "دست دوم" نزدیک به وسط لیست است
شکل 4 : یک لایه را به تابع "دست دوم" اختصاص دهید

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

برای مشاوره در مورد شماره های فرعی، راهنمای استفاده پیشرفته را ببینید.

زمان دیجیتال

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

در پنجره Watch Face Designer ، رفتار متن را از "Static" به "Digital time" تغییر دهید. پیش‌نمایش نشان می‌دهد که این در یک دستگاه واقعی چگونه به نظر می‌رسد:

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

برای آشنایی با مجموعه کاراکترهای موجود که می توانید استفاده کنید، راهنمای الگوی نمایش داده شده در نوار کناری پنجره Watch Face Designer را دنبال کنید. به عنوان مثال، a نشان می دهد که آیا زمان فعلی "AM" یا "PM" است، که می توانید از "قالب ساعت" برای نمایش زمان 12 ساعت استفاده کنید.

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

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

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

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

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

شکل 7 : با استفاده از گوشه سمت چپ پایین پنجره Watch Face Designer به زمان فعلی بازنشانی کنید.

شامل عکس های ارائه شده توسط کاربر

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

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

شکل 8 : برای عکس های ارائه شده توسط کاربر پشتیبانی اضافه کنید

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

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

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

هنگامی که انتخاب عکس روی "گالری" تنظیم شده است، کاربر می تواند چندین عکس را برای این شکاف انتخاب کند و ساعت بسته به آنچه در زیر "تغییر عکس" انتخاب می کنید، در نقاط مختلف آنها را می چرخاند .

  • وقتی «On tap» انتخاب می‌شود، وقتی کاربر روی لایه شما ضربه می‌زند، عکس تغییر می‌کند.
  • هنگامی که "در حالت بالا بردن مچ" انتخاب می شود، هر سومین بار که کاربر مچ خود را بالا می آورد، تغییر می کند. در حال حاضر، با استفاده از Watch Face Designer نمی توان آن را تنظیم کرد. درباره نحوه پشتیبانی پیشرفته‌تر فرمت Watch Face با استفاده از ویژگی changeAfterEvery بیشتر بدانید.

بیشتر بدانید

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

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