چیدمان های رایج برای کاشی ها

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

سه کاشی، که دو تای آنها یک ردیف با ۳ ستون از محتوای اصلی و دیگری دو ردیف با ۳ ستون از محتوای اصلی را نشان می‌دهد.

ساخت طرح‌های واکنش‌گرا و بهینه

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

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

بررسی کنید که اجزا عرض موجود را پر کنند

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

طرح‌های تطبیقی ​​و متمایز بسازید

برای استفاده حداکثری از فضای اضافی در صفحه نمایش‌های بزرگتر، یک نقطه شکست اندازه در ۲۲۵dp اضافه کنید. این نقطه شکست به شما امکان می‌دهد محتوای اضافی را نمایش دهید، دکمه‌ها یا داده‌های بیشتری را اضافه کنید یا طرح‌بندی را برای تناسب بهتر با صفحه نمایش بزرگتر تغییر دهید.

این امر مستلزم طراحی متفاوتی برای هر نقطه شکست است. طراحی صفحه نمایش بزرگتر (۲۲۵+ dp) می‌تواند شامل عناصر اضافی زیر باشد:

نمایش جایگاه عنوان پنهان قبلی

این مورد در طرح‌بندی‌هایی با دو ردیف قبل از نقطه شکست توصیه می‌شود، که در آن باید جایگاه عنوان حذف شود تا حداقل هدف ضربه ۴۸dp تضمین شود.

افزایش اندازه یا تغییر وضعیت اجزای موجود

این کار می‌تواند برای نمایش جزئیات بیشتر یا جذاب‌تر کردن محتوا انجام شود.

اضافه کردن اسلات‌های کامپوننت در طرح‌بندی فعلی

با اضافه کردن اجزا، طرح‌بندی گزینه‌ها یا جزئیات بیشتری را ارائه می‌دهد. با این حال، مطمئن شوید که محتوا همچنان قابل مشاهده باشد.

محتوای بیشتر را در پایین اضافه کنید

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

احتیاط: اندازه نمایشگر بزرگتر هرگز نباید اطلاعات کمتری نسبت به نمایشگرهای کوچکتر از خود نمایش دهد. این امر به ویژه در مورد رفتارهای سفارشی اضافه شده در نقطه توقف (breakpoint) اهمیت دارد.

یک مثال رایج از این مورد زمانی است که اندازه اجزا یا متن از نقطه شکست (breakpoint) فراتر می‌رود و در نهایت در صفحه نمایش‌های بزرگتر، مقدار کمتری را نشان می‌دهد. صفحه نمایش‌ها همیشه باید با افزایش اندازه، مقدار بیشتری را نشان دهند.

رفتار پاسخگو و سازگار

رفتار واکنش‌گرا و تطبیقی ​​به سه بخش (اسلات) طرح‌بندی بستگی دارد.

آیکون برنامه و جایگاه عنوان

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

عنوان زیر آیکون برنامه نمایش داده می‌شود

اسلات اصلی (اجزای تشکیل دهنده)

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

اسلات اصلی ۲ ردیف از ۳ آیکون را نشان می‌دهد

شکاف پایین

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

متن دکمه پایین «بیشتر» است
کاشی‌هایی که شامل یک دکمه در شکاف پایین هستند

اسلات پایین، هدف تناسب اندام را به صورت متن نشان می‌دهد.
کاشی‌هایی که شامل متن در قسمت پایین هستند

محتوای اصلی تا پایین کاشی امتداد دارد
کاشی‌های بدون شیار پایینی

تجربیات متمایز ایجاد کنید

یک طرح‌بندی کاملاً قابل تنظیم، با ۶۰ یا بیشتر جایگشت که در آن تعبیه شده است، امکان سفارشی‌سازی عملاً نامحدود را فراهم می‌کند. کاشی‌ها بر اساس یک سیستم مبتنی بر اسلات ساخته شده‌اند، بنابراین می‌توانید یک اسلات از طرح‌بندی استاندارد را با هر محتوا یا مؤلفه‌ای جایگزین کنید و مؤلفه را روی یکی از انواع و ترکیب‌های رنگی متعدد تنظیم کنید. در این حالت، رفتار واکنش‌گرا را حفظ کنید و توصیه‌های طراحی ما را دنبال کنید.

این سفارشی‌سازی‌ها باید محدود باشند و نباید از الگوی کاشی‌ها منحرف شوند. این کار برای حفظ ثبات هنگام پیمایش کاربران در میان کاشی‌ها در دستگاه‌های Wear OS آنها انجام می‌شود.