بهترین روش ها برای کاشی ها
با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
طراحی روی مشکی
طراحی روی پس‌زمینه سیاه برای Wear OS به دو دلیل کلیدی ضروری است:
- کارایی باتری: هر پیکسلی که روی صفحه روشن می شود، انرژی مصرف می کند. با استفاده از پس‌زمینه سیاه، تعداد پیکسل‌های فعال را به حداقل می‌رسانید و عمر باتری را افزایش می‌دهید.
- زیبایی یکپارچه: پس‌زمینه مشکی به کاهش بصری قاب ساعت کمک می‌کند و توهم سطح پیوسته‌ای را ایجاد می‌کند که تا لبه دستگاه امتداد دارد. وجود عناصر UI در این فضا این اثر را بیشتر می کند.
check_circle
این کار را انجام دهید
همیشه رنگ پس زمینه را روی سیاه قرار دهید.
cancel
این کار را نکن
پس‌زمینه را به‌عنوان یک تصویر کامل یا رنگ بلوک تنظیم نکنید.
فقط عناصر ضروری را شامل شود
هنگامی که شرکت می کنید (به عنوان مثال، با استفاده از ProtoLayout Material3 PrimaryLayout)، Wear OS به طور خودکار نماد برنامه دائمی را نشان می دهد، که به طور خودکار هنگام حرکت کاربر در چرخ فلک کاشی نمایش داده می شود. نماد برنامه نباید به عنوان بخشی از کاشی طراحی و اضافه شود.
اگر طرح زمینه پویا روی کاشی خود دارید، مطمئن شوید نماد برنامه ارائه شده تک رنگ است. دستورالعمل‌های نماد محصول Android را در مورد نحوه ایجاد نماد برنامه برای برند خود بررسی کنید.
check_circle
این کار را انجام دهید
Wear OS ممکن است نماد برنامه را به‌طور خودکار هنگام حرکت کاربر در چرخ فلک کاشی نمایش دهد. نیازی به قرار دادن نماد برنامه در طرح کاشی نیست.
cancel
این کار را نکن
نماد برنامه را در طرح کاشی اضافه نکنید زیرا اگر در سطح سیستم نیز نمایش داده شود، ممکن است دو بار/همپوشانی داشته باشد.
برای اطمینان از حداقل ضربه زدن، عناوین برنامه را پنهان کنید
برای اطمینان از فضای کافی برای عناصر تعاملی در صفحه‌های کوچکتر، زمانی که یک کاشی از دو ردیف (و یک بخش پایین) استفاده می‌کند، عنوان برنامه را می‌توان پنهان کرد. این تضمین می کند که ردیف ها به اندازه کافی بلند هستند (حداقل 48dp). عنوان می تواند دوباره در صفحه نمایش های بزرگتر (225dp+) ظاهر شود.
check_circle
این کار را انجام دهید
در صفحه های کوچک، عنوان برنامه پنهان است تا اطمینان حاصل شود که دو ردیف دارای حداقل ارتفاع و هدف ضربه 48dp هستند.
cancel
این کار را نکن
اگر عنوان برنامه را روی صفحه کوچک پنهان نکنید و دو ردیف داشته باشید، ارتفاع اجزا با استانداردهای دسترسی ما مطابقت ندارد و از حداقل اندازه هدف ضربه بزنید. در این مثال فضای دکمه ها کوچکتر از 48dp است، بنابراین گیره می شود.
یک مورد استفاده اصلی را برای برجسته کردن انتخاب کنید
برای اطمینان از اینکه کاربران می‌دانند با هر کاشی چه کاری انجام دهند - چه باز کردن یک برنامه، شروع یک فعالیت یا یادگیری بیشتر - به آنها نیاز داریم که حداقل یک عنصر تعاملی را در طرح‌بندی خود بگنجانند.
check_circle
این کار را انجام دهید
این کاشی خاص به این دلیل مؤثر است که مجموعه کوچکی از گزینه‌ها را فراهم می‌کند و سپس امکان مشاهده بیشتر را فراهم می‌کند
cancel
این کار را نکن
این راه حل برای کاربر کمتر مفید است زیرا به دلیل گزینه های ارائه شده بیش از حد باعث فلج تصمیم می شود
شامل (حداقل) یک ظرف
هر کاشی در برنامه باید حداقل یک عنصر ظرف داشته باشد و کاملاً قابل لمس باشد و به صفحه مربوطه در برنامه پیوند داده شود. اطلاعات کاشی، چه در داخل ظرف موجود باشد و چه به طور جداگانه ارائه شده باشد، باید به وضوح محتوای پیوند شده یا اقدام موجود را به اشتراک بگذارد.
اگر از دکمه‌ها استفاده می‌شود، باید به قراردادهای طراحی استاندارد پایبند باشند و نشانه‌ای واضح از عملکرد خود ارائه دهند.
check_circle
این کار را انجام دهید
این کاشی به خوبی کار می‌کند زیرا کاربر می‌تواند روی هر یک از قابلیت‌های ارائه‌شده اقدام کند، زیرا آنها مقرون به صرفه هستند.
cancel
این کار را نکن
این کاشی کارایی کمتری دارد زیرا مشخص نمی کند که کاربر می تواند برای دیدن اطلاعات اضافی روی محتوا ضربه بزند
اقدامات را فوراً قابل درک کنید
تجربیات روی ساعت لوکس داشتن فضای کافی برای بیان معنای خود را ندارند، بنابراین موثرترین کاشی ها دارای اجزای تعاملی به راحتی قابل پیش بینی هستند.
check_circle
این کار را انجام دهید
یک کاشی موفق از فضای موجود برای انتقال واضح نتیجه هر اقدام بهره می برد
cancel
این کار را نکن
اقدامات در این کاشی نامشخص است - ظرف حاوی آلبوم هنری کاربر را به کجا می برد و آیا با دکمه «پخش» تفاوت دارد؟
از نظر بصری اقدامات را اولویت بندی کنید
برای کمک به کاربران برای درک مهم‌ترین اقدام روی کاشی، ظروف تعاملی باید از نظر بصری اولویت‌بندی شوند.
- از رنگ های اصلی در دکمه های اکشن اصلی استفاده کنید.
- از رنگ‌های ثانویه/ثالثیه در اقدامات ثانویه استفاده کنید
check_circle
این کار را انجام دهید
این کاشی از ترکیبی از رنگ‌های پر شده (با نقش‌های رنگی اصلی و ثانویه) با نقش دکمه پایینی درجه سوم، با استفاده از سبک پر کردن تونال استفاده می‌کند.
cancel
این کار را نکن
این کاشی حاوی استفاده های بسیار زیادی از دکمه های سبک پر شده است، علاوه بر این، همه از نقش رنگ اصلی استفاده می کنند
ساده در ظروف کمتر
کاشی‌ها باید سعی کنند از استفاده از بیش از یک مؤلفه تعاملی برای راه‌اندازی یک اقدام خاص خودداری کنند و در عوض سعی کنند طرح کلی را در ظرف‌های کمتری ساده‌سازی کنند.
check_circle
این کار را انجام دهید
این کاشی از چندین کانتینر استفاده می کند و هر ظرف به عنوان یک دکمه برای انجام یک عمل خاص مانند شروع یک تایمر یا ایجاد یک تایمر جدید عمل می کند.
cancel
این کار را نکن
استفاده از 4 کانتینر در اینجا غیر ضروری است زیرا تمام اطلاعات به همان مکان هدایت می شوند
از ظروف برای اهداف کاربردی استفاده کنید
برای اطمینان از اینکه کاربران می توانند پیش بینی کنند که هر یک از اجزای یک کاشی چه کاری انجام می دهد، توصیه نمی کنیم از ظروف برای اهداف تزئینی یا ساختاری استفاده کنید تا از شیرهایی که هیچ کاری انجام نمی دهند اجتناب کنید.
check_circle
این کار را انجام دهید
این راه حل به این دلیل کار می کند که تنها عمل کاشی یک جریان ایجاد است و تمام محتوای دیگر در پس زمینه سیاه شناور است.
cancel
این کار را نکن
این کاشی گیج کننده تر است زیرا به نظر می رسد کاربر می تواند با همه کانتینرها تعامل داشته باشد
نمایش نمودارها و نمودارها قابل مشاهده است
قابلیت نگاه کلیدی برای طراحی Wear OS است. با زمان محدود صفحه نمایش (حدود 7 ثانیه)، اطلاعات ضروری را در قالبی واضح اولویت بندی کنید، که درک آن در یک نگاه آسان است.
به یاد داشته باشید که ساعت مچی تجربه تلفن را تکمیل می کند و دسترسی سریع به جزئیات کلیدی را فراهم می کند.
check_circle
این کار را انجام دهید
نمایش سریع و قابل مشاهده اطلاعات عددی یا آماری را نشان دهید و به کاربر اجازه دهید در صورت نیاز برای مشاهده موارد بیشتر در یک برنامه ضربه بزند.
cancel
این کار را نکن
نمایش اطلاعات عددی یا آماری دقیق روی کاشی
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین بهروزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","easyToUnderstand","thumb-up"],["مشکلم را برطرف کرد","solvedMyProblem","thumb-up"],["غیره","otherUp","thumb-up"]],[["اطلاعاتی که نیاز دارم وجود ندارد","missingTheInformationINeed","thumb-down"],["بیشازحد پیچیده/ مراحل بسیار زیاد","tooComplicatedTooManySteps","thumb-down"],["قدیمی","outOfDate","thumb-down"],["مشکل ترجمه","translationIssue","thumb-down"],["مشکل کد / نمونهها","samplesCodeIssue","thumb-down"],["غیره","otherDown","thumb-down"]],["تاریخ آخرین بهروزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی."],[],[],null,["# Best practices for tiles\n\nDesign on black\n---------------\n\nDesigning on a black background is crucial for Wear OS for two key reasons:\n\n- **Battery efficiency:** Each pixel illuminated on the screen consumes power. By using a black background, you minimize the number of active pixels, extending battery life.\n- **Seamless aesthetics:** A black background helps to visually minimize the watch bezel, creating the illusion of a continuous surface that extends to the edge of the device. Containing UI elements within this space further enhances this effect.\n\n\u003cbr /\u003e\n\ncheck_circle\n\n### Do this\n\nAlways set the background color to black. \ncancel\n\n### Don't do this\n\nDon't set the background as a full bleed image or block color.\n\nInclude only necessary elements\n-------------------------------\n\nWhen opt-ed in (for example, using ProtoLayout Material3 PrimaryLayout), Wear OS will automatically display the permanent app icon, which will automatically display as the user scrolls through the Tile carousel. The app icon should not be designed and added as part of the Tile.\n\nEnsure the app icon provided is monochrome if you are having dynamic theming on your tile. Check Android product icon guidelines about how to create the app icon for your brand. \ncheck_circle\n\n### Do this\n\nWear OS may display the app icon automatically as the user scrolls through the Tile carousel. There is no need to put the app icon in the Tile design. \ncancel\n\n### Don't do this\n\nDo not add the app icon in the Tile design as it may appear twice/overlapped if also displayed at the system level.\n\nHide app titles to ensure minimum tap targets\n---------------------------------------------\n\nTo ensure enough space for interactive elements on smaller screens, the app title can be hidden when a Tile uses two rows (and a bottom section). This ensures the rows are tall enough (at least 48dp). The title can reappear on larger screens (225dp+). \ncheck_circle\n\n### Do this\n\nOn small screens, the app title is hidden to ensure the two rows have a minimum height and tap target of 48dp. \ncancel\n\n### Don't do this\n\nIf you do not hide the app title on small screen, and have two rows, the height of the components will not adhere to our accessibility standards, and be less than the minimum tap target size. In this example the space for the buttons is smaller than 48dp, so it clips.\n\nChoose a single primary use-case to highlight\n---------------------------------------------\n\nTo make sure users know what to do with each Tile - whether it's opening an app, starting an activity, or learning more - we need them to include at least one interactive element in their layout. \ncheck_circle\n\n### Do this\n\nThis specific Tile is effective because it provides a small collection of options, and then the ability to see more \ncancel\n\n### Don't do this\n\nThis solution is less helpful to user because it introduces decision paralysis because of too many provided options\n\nInclude (at least) one container\n--------------------------------\n\nEach tile in the app must contain at least one container element and be fully tappable, linking to a corresponding screen within the app. The Tile's information, whether contained within the container or presented separately, must clearly communicate the linked content or available action.\n\nIf buttons are used, they should adhere to standard design conventions and provide a clear indication of their function. \ncheck_circle\n\n### Do this\n\nThis Tile works well because the user can take action on each of the provided capabilities since they have clear tap affordances \ncancel\n\n### Don't do this\n\nThis Tile is less effective because it doesn't make it clear that the user can tap on the content to see additional information\n\nMake actions instantly understandable\n-------------------------------------\n\nExperiences on the watch don't have the luxury of having ample space to communicate their meaning, so the most effective Tiles have easily predictable interactive components. \ncheck_circle\n\n### Do this\n\nA successful TIle takes full advantage the space available to clearly communicate the outcome of each action \ncancel\n\n### Don't do this\n\nThe actions in this Tile are unclear---where does the container with the album art take the user, and is that different from the \"Play\" button?\n\nVisually prioritize actions\n---------------------------\n\nTo help users understand the most important action on a Tile, interactive containers should be visually prioritized.\n\n- Use primary colors on primary action buttons.\n- Use secondary/tertiary colors on secondary actions\n\ncheck_circle\n\n### Do this\n\nThis Tile uses a combination of filled (with primary and secondary color roles) with a clear tertiary bottom button role, using the tonal-fill style \ncancel\n\n### Don't do this\n\nThis Tile contains too many uses of filled style buttons, additionally all using the primary color role\n\nSimplify into fewer containers\n------------------------------\n\nTiles should seek to refrain from using more than one interactive component to trigger a specific action, and instead attempt to simplify the overall layout into fewer containers. \ncheck_circle\n\n### Do this\n\nThis tile is using several containers and each container acts as a button to perform a specific action like starting a timer or creating a new one \ncancel\n\n### Don't do this\n\nThe use of 4 containers here is unnecessary since all the information will navigate to the same location\n\nUse containers for functional purposes\n--------------------------------------\n\nTo ensure users can anticipate what each component within a Tile will do, we don't recommend using containers for decorative or structural purposes to avoid taps that don't do anything. \ncheck_circle\n\n### Do this\n\nThis solution works because the sole action of the Tile is a creation flow, and all other content is floating on the black background \ncancel\n\n### Don't do this\n\nThis Tile is more confusing because it seems like the user would be able to interact with all the containers\n\nShow glanceable representations of graphs and charts\n----------------------------------------------------\n\nGlanceability is key for Wear OS design. With limited screen time (around 7 seconds), prioritize essential information in a clear format, that's easy to understand at a glance.\n\nRemember, the watch complements the phone experience, providing quick access to key details. \ncheck_circle\n\n### Do this\n\nShow quick, glanceable representations of numerical or statistical information and allow the user to tap to see more in an app if needed \ncancel\n\n### Don't do this\n\nShow detailed numerical or statistical information on the Tile"]]
