با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
Material 3 Expressive با استفاده از شکل‌های ظرف انعطاف‌پذیر برای گرد کردن و تیز کردن شعاع‌های گوشه برای پشتیبانی از فهرست‌های شکل‌گیری شکل و حالت‌های دکمه، به زبان شکل به روشی بسیار گسترده‌تر و معنادارتر متمایل می‌شود. سیستم طراحی همچنین دکمه‌های در آغوش گرفتن لبه‌ها را به‌عنوان یک الگوی طراحی قابل مالکیت و نمادین برای دستگاه‌های گرد در Wear OS معرفی می‌کند.
مقیاس بندی عنصر UI را حفظ کنید
هنگام طراحی طرح‌بندی‌ها بر روی یک صفحه گرد، نماهای پیمایشی و غیرپیمایشی هر کدام الزامات منحصربه‌فردی برای حفظ مقیاس‌بندی عنصر UI و حفظ یک چیدمان و ترکیب متعادل دارند.
نماهای پیمایشی
برای نماهای پیمایشی، از درصدها برای تعریف تمام حاشیه های بالا، پایین و کناری استفاده کنید تا از بریده شدن و ایجاد مقیاس بندی متناسب عناصر جلوگیری کنید.
تمام حاشیه‌های بالا، پایین و کناری باید بر حسب درصد تعریف شوند تا از بریده شدن و ایجاد مقیاس‌بندی متناسب عناصر جلوگیری شود.
نماهای بدون پیمایش
برای نماهای بدون پیمایش، از درصدها و محدودیت های عمودی برای همه حاشیه ها استفاده کنید. به این ترتیب، محتوای اصلی در وسط می‌تواند کشیده شود تا منطقه موجود را پر کند.
تمام حاشیه ها باید بر حسب درصد و محدودیت های عمودی باید به گونه ای تعریف شوند که محتوای اصلی در وسط بتواند برای پر کردن منطقه موجود کشیده شود.
سطوح دستورالعمل های کیفیت
دستورالعمل های کیفیت ما در سه سطح سازماندهی شده است. با رعایت دستورالعمل ها در هر سه سطح، بهترین تجربه ممکن را برای کاربران خود فعال کنید.
آماده برای تمام اندازه های صفحه نمایش
مطمئن شوید که برنامه شما تجربه ای با کیفیت در تمام اندازه های صفحه نمایش ارائه می دهد. طرح‌بندی‌هایی ایجاد کنید که به طور کامل از فضای برنامه موجود استفاده کند.
پاسخگو و بهینه شده
محتوای بیشتری را در دستگاه‌هایی که به کاربران اجازه می‌دهند، ارائه دهید و از طرح‌بندی‌های واکنش‌گرا که به‌طور خودکار با اندازه‌های مختلف صفحه‌نمایش سازگار می‌شوند، استفاده کنید.
تطبیقی و متمایز
با استفاده از نقاط شکست برای ارائه تجربیات جدید قدرتمند در صفحه نمایش های بزرگتر که در دستگاه هایی با صفحه نمایش کوچکتر امکان پذیر نیست، از املاک و مستغلات بیشتر نهایت استفاده را ببرید.
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین بهروزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین بهروزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی."],[],[],null,["# Design quality tiers\n\nMaterial 3 Expressive leans into shape language in a much more expansive and\nmeaningful way by utilizing flexible container shapes to apply rounding and\nsharpening of corner radii to support shape morphing lists and button states.\nThe design system also introduces edge-hugging buttons as an ownable and iconic\ndesign pattern for round devices on Wear OS.\n\nMaintain UI element scaling\n---------------------------\n\nWhen designing layouts on a round screen, scrolling and non-scrolling\nviews each have unique requirements to maintain UI element scaling and preserve\na balanced layout and composition.\n\n\n**Scrolling views**\n\nFor scrolling views, use percentages to define all top, bottom, and side\nmargins to avoid clipping and provide proportional scaling of elements.\n\nAll top, bottom, and side margins should be defined in percentages to avoid\nclipping and provide proportional scaling of elements. \n**Non-scrolling views**\n\nFor non-scrolling views, use percentages and vertical constraints for all\nmargins. That way, the main content in the middle can stretch to fill the\navailable area.\n\nAll margins should be defined in percentages and vertical constraints should be\ndefined such that the main content in the middle can stretch to fill the\navailable area.\n\n\u003cbr /\u003e\n\nTiers of quality guidelines\n---------------------------\n\nOur quality guidelines are organized into three tiers. Enable the best possible\nexperience for your users by meeting guidelines in all three tiers.\n\n\n**Ready for all screen sizes**\n\nEnsure your app is delivering a quality experience across all screen sizes.\nCreate layouts that fully use the available app space. \n\n**Responsive and optimized**\n\nDeliver more content to users on devices which allow for it, and utilize\nresponsive layouts that automatically adapt to different screen sizes. \n\n**Adaptive and differentiated**\n\nMake the most of additional real estate by utilizing breakpoints to offer\npowerful new experiences on larger screens which are not possible on devices\nwith smaller screens.\n\n\u003cbr /\u003e\n\n| **Caution:** A larger display size should *never* display less information than ones that are smaller than it, this is especially relevant for custom behaviors added in at the breakpoint. A common example of this is when components or text sizes are increased past the breakpoint and end up showing less are the larger screens. Screens should always show \"more value\" and never \"less value\" with increasing size."]]
