با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
Material 3 Expressive for Wear OS سلسله مراتب بصری را با تخصیص مقادیر مختلف رنگ، رنگ و لحن به نقش‌های رنگی آن ایجاد می‌کند و به طور موثر رنگ‌های برجسته برجسته را از رنگ‌های سطح خنثی متمایز می‌کند. گنجاندن نقش‌های تاکیدی اولیه، ثانویه و ثالثی در سیستم نه تنها امکان‌های بیانی را افزایش می‌دهد، بلکه از طریق انتخاب‌های رنگی متمایز، کنترل دقیق‌تری بر سلسله‌مراتب بصری ارائه می‌دهد. این استفاده عمدی از رنگ، حس منسجم و منسجمی را در واسط واچ، حتی با موضوع‌بندی، تضمین می‌کند.
نمونه‌ای از طرح‌بندی‌ها، مؤلفه‌ها و رابط‌های کاربری مختلف در تم‌های مختلف، اما همچنان کنتراست رنگی کافی را حفظ می‌کنند.
رنگ های جفت و لایه
برای حفظ دسترسی بصری، رنگ ها را فقط در نشانه های رنگی جفت مورد نظر اعمال کنید. ترکیب نامناسب رنگ‌ها ممکن است کنتراست لازم برای دسترسی بصری را بشکند، به‌ویژه زمانی که رنگ‌ها از طریق رنگ پویا تنظیم می‌شوند.
رنگ ها را به درستی جفت و لایه بندی کنید
برای اطمینان از تصاویر و دسترسی مناسب، مطمئن شوید که توکن صحیح را در موقعیت صحیح آن قرار داده اید. یک نگاشت رنگی نامناسب می تواند به تصاویر ناخواسته منجر شود و دسترسی را از بین ببرد.
check_circle
انجام دهید
نقش‌های رنگی را به درستی جفت کنید و لایه‌ها را برای اطمینان از تصاویر بصری و دسترسی مناسب.
در این مثال، دکمه‌های دارای (2) روی کانتینر روی (1) اولیه یا (4) روی کانتینر اولیه روی (3) ظرف اصلی با تغییر سطح کنتراست خوانا می‌مانند و دارای رتبه AAA با نسبت کنتراست 7:1 یا بیشتر هستند.
cancel
نکن
نگاشت رنگی نامناسب می تواند منجر به تصاویر ناخواسته شود و دسترسی را از بین ببرد.
در این مثال، دکمه‌های دارای (2) محفظه اصلی روی (1) اصلی یا (4) اولیه-کدر روی (3) ظرف اصلی با تغییر سطوح کنتراست ناخوانا می‌شوند و از حداقل نسبت کنتراست 7:1 برای متن معمولی پیروی نمی‌کنند. این سطوح کنتراست برای نقش های اولیه، ثانویه و ثالث اعمال می شود.
جفت رنگ های توصیه شده
Primary + Primary Dim
از Primary برای اقدامات اصلی و Primary-Dim برای موارد مکمل استفاده کنید. این باعث ایجاد عمق می شود و در عین حال اطمینان می دهد که عمل اولیه برجسته است.
اولیه-دیم + سوم
از Primary-Dim برای برجسته کردن عناصر مهم و از سوم برای ارائه بازخورد برجسته استفاده کنید، مانند پاسخ‌های ضربه بزنید.
اولیه + ثانویه-کانتینر
از Secondary-Container برای محتوای کمتر برجسته استفاده کنید، در حالی که Primary روی عناصر کلیدی اعمال می‌شود تا اطمینان حاصل شود که برجسته و جلب توجه می‌شوند.
اولیه + اولیه-کانتینر
از Primary برای اقدامات اصلی و Primary-Container برای موارد تکمیلی یا فرعی استفاده کنید. این باعث ایجاد عمق می شود و در عین حال اطمینان می دهد که عمل اولیه برجسته است.
Primary-Dim +Tertiary-Dim
از Primary-Dim برای برجسته کردن عناصر مهم و Tertiary-Dim برای ارائه بازخورد برجسته، مانند رسیدن به هدف استفاده کنید.
سوم + اولیه + ثانویه-کانتینر
هنگامی که مشخص نیست اکشن اصلی چیست، از ترکیبی از Tertiary و Primary برای اکشن های اصلی و Secondary-Container برای اکشن های مکمل استفاده کنید.
ثانویه + اولیه-کانتینر
هنگامی که می خواهید دو گزینه یا کانتینر را به طور مساوی به عنوان گزینه مهم نشان دهید، اما همچنان بین این دو تضاد داشته باشید، از Primary-Dim و Secondary استفاده کنید.
اولیه + سوم + اولیه-کانتینر
هنگامی که مشخص نیست اکشن اصلی چیست، از ترکیبی از ترشیر و اولیه برای اکشن های اصلی و Primary-Container برای اکشن های مکمل استفاده کنید.
ابتدایی + سوم-دیم
از Primary برای اقدامات اصلی و Primary Dim برای موارد مکمل استفاده کنید. این باعث ایجاد عمق می شود و در عین حال به برجسته شدن عمل اولیه کمک می کند.
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و 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,["# Apply color\n\nMaterial 3 Expressive for Wear OS establishes visual hierarchy by assigning\ndifferent hue, chroma, and tone values to its color roles, effectively\ndistinguishing bold accent colors from neutral surface colors. The system's\ninclusion of primary, secondary, and tertiary accent roles not only enhances\nexpressive possibilities but also offers more granular control over visual\nhierarchy through distinct color choices. This intentional use of color ensures\na consistent and cohesive feel within the Watch UI, even with theming.\nExample of different layouts, components and UIs in various themes, but\nstill maintaining adequate color contrast.\n\nPair and layer colors\n---------------------\n\nTo maintain visual accessibility, apply colors only in the intended pairs color\ntokens. Combining colors improperly may break contrast necessary for visual\naccessibility, particularly when colors are adjusted through dynamic color.\n\n### Pair and layer colors correctly\n\nIn order to ensure proper visuals and accessibility, make sure you are mapping\nthe correct token to its correct position. An improper color mapping can lead to\nunintended visuals and break accessibility. \ncheck_circle\n\n### Do\n\n**Pair and layer color roles correctly to ensure proper\nvisuals and accessibility.**\n\nIn this example, buttons with (2)\n**on-primary** on (1) **primary** or (4) **on-primary** -container\non (3) **primary-container** stay legible as the contrast level changes\nand have an AAA rating with a contrast ratio of 7:1 or more. \ncancel\n\n### Don't\n\n**Improper color mappings can lead to unintended visuals\nand break accessibility.**\n\nIn this example, buttons with (2)\n**primary-container** on (1) **primary** or (4) **primary-dim** on\n(3) **primary-container** become illegible as contrast levels shift and\ndon't follow the 7:1 contrast ratio minimum for normal text. These contrast\nlevels apply to primary, secondary and tertiary roles.\n\n### Recommended color pairings\n\n\n**Primary + Primary Dim**\n\nUse Primary for main actions, and Primary-Dim for complementary items. This\ncreates depth while ensuring the primary action stands out. \n\n**Primary-Dim + Tertiary**\n\nUse Primary-Dim to highlight important elements and Tertiary to provide standout\nfeedback, such as tap responses. \n\n**Primary + Secondary-Container**\n\nUse Secondary-Container for less prominent content, while Primary is applied to\nkey elements to ensure they stand out and grab attention.\n\n\u003cbr /\u003e\n\n\n**Primary + Primary-Container**\n\nUse Primary for main actions, and Primary-Container for complementary or\nsecondary items. This creates depth while ensuring the primary action stands\nout. \n\n**Primary-Dim + Tertiary-Dim**\n\nUse Primary-Dim to highlight important elements and Tertiary-Dim to provide\nstandout feedback, such as a goal being met. \n\n**Tertiary + Primary + Secondary-Container**\n\nWhen it's not clear what the main action is, use a combination of Tertiary and\nPrimary for a main actions and Secondary-Container for a complementary actions.\n\n\u003cbr /\u003e\n\n\n**Secondary + Primary-Container**\n\nUse Primary-Dim and Secondary when you want to show two equally as important\noptions or containers, but still have contrast between the two. \n\n**Primary + Tertiary + Primary-Container**\n\nWhen it's not clear what the main action is, use a combination of Tertiary and\nPrimary for a main actions and Primary-Container for a complementary actions. \n\n**Primary + Tertiary-Dim**\n\nUse Primary for main actions and Primary Dim for complementary items. This\ncreates depth while helping the primary action to stand out.\n\n\u003cbr /\u003e"]]
