با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
سیستم رنگ Wear Material 3 Expressive از سه لایه تاکیدی (اولیه، ثانویه، سوم) برای اجزای کلیدی و دو لایه سطحی خنثی استفاده می‌کند. هر نقش طیفی از ارزش‌ها را با کنتراست ثابت ارائه می‌کند، که ترکیب رنگ‌های رسا و در عین حال قابل دسترس را برای تجربه‌ای یکپارچه در هر موضوعی امکان‌پذیر می‌سازد.
نمونه ای از تم رنگی با نقش.
نقش های رنگی چیست؟
نقش های رنگی مانند «اعداد» در یک بوم رنگ به عدد هستند. آنها بافت همبند بین عناصر رابط کاربری و رنگی هستند که به کجا می رود.
نقش‌های رنگی به مؤلفه‌های مواد نگاشت می‌شوند: شما از این نقش‌های رنگی استفاده می‌کنید، چه از طرح پایه ثابت یا رنگ پویا استفاده کنید. اگر محصول شما حاوی اجزای سفارشی است، باید به درستی با این مجموعه از نقش های رنگی نگاشت شوند.
نقش‌های رنگی از قابلیت دسترسی پشتیبانی می‌کنند: سیستم رنگ بر روی جفت‌های رنگی قابل دسترس‌تر ساخته شده است. این جفت رنگ ها حداقل کنتراست رنگی 3:1 را ارائه می دهند.
نقش های رنگی نشانه گذاری می شوند: نقش ها در طراحی و کد از طریق توکن ها پیاده سازی می شوند. یک نشانه طراحی نشان دهنده یک تصمیم طراحی کوچک و قابل استفاده مجدد است که بخشی از سبک بصری یک سیستم طراحی است.
شرایط ضروری
در اینجا عبارات کلیدی وجود دارد که در نام نقش های رنگی مشاهده خواهید کرد:
سطح: نقشی که برای پس‌زمینه‌ها و مناطق بزرگ و کم‌تأکید صفحه استفاده می‌شود.
اولیه، ثانویه، ثالثی: نقش‌های رنگی تاکیدی که برای تاکید یا بی‌تأکید کردن عناصر پیش‌زمینه استفاده می‌شوند.
ظرف: نقش هایی که به عنوان رنگ پرکننده برای عناصر پیش زمینه مانند دکمه ها استفاده می شود. آنها نباید برای متن یا آیکون استفاده شوند.
روشن: نقش هایی که با این عبارت شروع می شوند، رنگی را برای متن یا نمادها در بالای رنگ والد جفت شده آن نشان می دهند. به عنوان مثال، روی اولیه برای متن و نمادها در برابر رنگ پر اصلی استفاده می شود.
نوع: نقش‌هایی که با این اصطلاح ختم می‌شوند، جایگزینی با تأکید کمتر برای جفت غیر متغیر آن ارائه می‌دهند. به عنوان مثال، نوع طرح کلی، نسخه کمتر تاکید شده رنگ طرح کلی است.
نقش های اصلی
نقش‌های اصلی برای اجزای کلیدی در سراسر رابط کاربری، مانند دکمه‌های Edge Hugging، دکمه‌های برجسته، حالت‌های فعال و نمادهای روی استایل دکمه‌های اهنگی استفاده می‌شوند.
اولیه
اولیه
در ابتدایی
از نقش اصلی برای مهم‌ترین اقدامات در رابط کاربری مانند دکمه‌های اصلی یا فراخوان‌ها برای اقدام استفاده کنید. این رنگ باید برجسته باشد و فوراً قابل تشخیص باشد تا کاربر را به سمت تعاملات کلیدی هدایت کند.
اولیه-تیر
اولیه-تیر
در ابتدایی
نقش‌های کم نور معمولاً برای عناصری استفاده می‌شوند که باید از نظر بصری از عملکرد اصلی متمایز باشند، اما نیازی به توجه یا تعامل فوری کاربر ندارند.
اولیه-کانتینر
اولیه-کانتینر
روی کانتینر اولیه
از کانتینر اصلی برای عناصر پس‌زمینه مانند کارت‌ها یا مدال‌ها برای برجسته کردن بخش‌ها یا حالت‌های انتخابی استفاده کنید. این به جلب توجه به محتوای مهم یا فعالیت‌های در حال انجام در UI کمک می‌کند.
نقش های فرعی
نقش‌های ثانویه برای مؤلفه‌های کلیدی در سراسر رابط کاربری استفاده می‌شوند، که به اندازه نقش اصلی مهم نیستند، اما همچنان باید برجسته باشند. اولیه و ثانویه را می توان با هم در طرح بندی ها برای ایجاد تمایز و تمرکز استفاده کرد.
ثانویه
ثانویه
در مقطع متوسطه
از نقش ثانویه برای پشتیبانی از اقدامات در مناطقی با رابط کاربری متراکم، مانند دکمه‌های ثانویه یا اقدامات مکمل استفاده کنید. این قابلیت دید را بدون تحت الشعاع قرار دادن عناصر اولیه در چیدمان های پیچیده حفظ می کند.
ثانویه-کم
ثانویه-کم
ثانویه
نقش Secondary-Dim کنتراست خاموشی را برای عناصر غیرفعال در مناطق متراکم ارائه می دهد. این رنگ ثانویه را تکمیل می‌کند و در عین حال عمق ظریفی را اضافه می‌کند، رابط کاربری را تمیز نگه می‌دارد و به کاربران در جهت‌یابی کمک می‌کند.
ثانویه-کانتینر
ثانویه-کانتینر
در کانتینر ثانویه
از Secondary-Container برای سازماندهی عناصر ثانویه در چیدمان های متراکم استفاده کنید. این ساختار و جدایی ایجاد می کند و اطمینان می دهد که محتوای ثانویه قابل تشخیص است اما غالب نیست.
نقش های درجه سوم
نقش های سوم برای لهجه های متضاد برای متعادل کردن رنگ های اصلی و ثانویه یا جلب توجه بیشتر به عنصری مانند یک میدان ورودی استفاده می شود. نقش‌های درجه سوم همچنین می‌توانند نشان دهند که محتوا چه زمانی تغییر می‌کند یا باید برجسته شود، مانند رسیدن به هدف.
دوره سوم
دوره سوم
در دوره سوم
نقش سوم برای جلب توجه به عناصر کلیدی استفاده می شود. نقش های درجه سوم به ویژه برای اجزایی که باید برجسته شوند، مانند نشان ها، برچسب ها، یا عناصر اکشن ویژه موثر هستند.
سوم-دیم
سوم-دیم
دوره سوم
برای دکمه‌ها یا اقداماتی که به اقدامات درجه سوم مرتبط هستند، اما نیازی به فوکوس فوری ندارند، از نقش کم‌نور سوم استفاده کنید.
سوم-کانتینر
سوم-کانتینر
در کانتینر سوم
سومین کانتینر را برای پس‌زمینه‌هایی که محتوای مرتبط با دوره سوم را گروه‌بندی می‌کنند، مانند مجموعه‌هایی از نشان‌ها یا برچسب‌ها، اعمال کنید. در عین حفظ تعادل و ساختار در رابط کاربری، بر عناصر درجه سوم تأکید دارد.
نقش های معنایی
Error-Red برای نشان دادن مسائل مهم مانند خطا، حذف و هر چیزی که به موارد اضطراری مربوط می شود استفاده می شود. این برنامه برای جلب توجه فوری به مشکلات یا هشدارها طراحی شده است و اطمینان می دهد که کاربران می توانند به سرعت مناطقی را که نیاز به اقدامات اصلاحی دارند شناسایی کنند. لحن Error-Red باید کنتراست کافی را در برابر پس‌زمینه حفظ کند تا استانداردهای دسترسی را برآورده کند، و اطمینان حاصل کند که به وضوح قابل مشاهده است و از سایر رنگ‌های وضعیت مانند هشدارها یا پیام‌های موفقیت قابل تشخیص است.
خطا
خطا
در خطا
قرمز معنایی و در عین حال کمی با تم، که نشان‌دهنده حذف، حذف، بستن یا رد کردن اقدامات است، مانند Swipe to Reveal. به عنوان جایگزین ظرف اضافه شده است که نسبت به رنگ تیره خطا کمی هشدار دهنده و فوری است.
Error-Dim
Error-Dim
در خطا
قرمز معنایی و در عین حال کمی با تم، که نشان‌دهنده خطاهای با اولویت بالا یا اقدامات اضطراری، مانند هشدارهای ایمنی، پوشش‌های گفتگوی ناموفق یا دکمه‌های توقف است.
Error-Container
Error-Container
On-Error-Container
رنگ محفظه کمتر برجسته، برای اجزایی که از حالت خطا استفاده می کنند. همچنین می‌تواند یک حالت خطای فعال را نشان دهد که نسبت به حالت پر شده کمتر تعاملی به نظر می‌رسد، مانند یک دکمه یا کارت اشتراک‌گذاری اضطراری فعال، یا در یک گفتگوی همپوشانی ناموفق.
ظروف سطحی و ارتفاع
ظروف سطحی در تعریف عمق و ارتفاع در UI، ارائه ساختار و سلسله مراتب از طریق رنگ، کمک به تمایز اجزا بر اساس اهمیت و تعامل آنها کلیدی هستند.
سطح - ظرف - کم
سطح - ظرف - کم
روی سطح
On-Surface-Variant
برای یک کانتینر منبسط شده که باید زیر سرفیس کانتینر قرار گیرد، مانند کارت بازشده در اعلان، عالی است. همچنین می‌تواند برای کارت‌های غیرتعاملی استفاده شود، جایی که محتوا همچنان از محدودیت بهره می‌برد.
سطح-کانتینر
سطح-کانتینر
روی سطح
On-Surface-Variant
رنگ ظرف پیش‌فرض برای اکثر عناصر. این یک ارتفاع خنثی و متوسط را فراهم می کند و آن را برای اجزای رابط کاربری عمومی مناسب می کند.
سطح-کانتینر-بالا
سطح-کانتینر-بالا
روی سطح
On-Surface-Variant
ایده آل برای اجزای با تاکید بالا که نیاز به نشستن در بالای سطح یا در ترکیب با سرفیس کانتینر دارند. این رنگ به تمرکز و سلسله مراتب به مناطق مهم در رابط کاربری کمک می کند.
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و 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,["# Color roles and tokens\n\nThe Wear Material 3 Expressive color system employs three accent layers\n(primary, secondary, tertiary) for key components and two neutral surface\nlayers. Each role offers a range of values with consistent contrast, enabling\nexpressive yet accessible color combinations for a unified experience across any\ntheme.\nAn example of a color theme with roles.\n\nWhat are color roles?\n---------------------\n\nColor roles are like the \"numbers\" in a paint-by-number canvas. They're the\nconnective tissue between elements of the UI and what color goes where.\n\n- **Color roles are mapped to Material components:** You'll use these color roles whether you're using the static baseline scheme or dynamic color. If your product contains custom components, they'll need to be properly mapped to this set of color roles.\n- **Color roles support accessibility:** The color system is built on more accessible color pairings. These color pairs provide a minimum of 3:1 color contrast.\n- **Color roles are tokenized:** Roles are implemented in design and code through tokens. A design token represents a small, reusable design decision that's part of a design system's visual style.\n\nEssential terms\n---------------\n\nHere are key terms you'll see in the names of color roles:\n\n- **Surface:** A role used for backgrounds and large, low-emphasis areas of the screen.\n- **Primary, Secondary, Tertiary:** Accent color roles used to emphasize or de-emphasize foreground elements.\n- **Container:** Roles used as a fill color for foreground elements like buttons. They shouldn't be used for text or icons.\n- **On:** Roles starting with this term indicate a color for text or icons on top of its paired parent color. For example, on primary is used for text and icons against the primary fill color.\n- **Variant:** Roles ending with this term offer a lower-emphasis alternative to its non-variant pair. For example, outline variant is a less emphasized version of the outline color.\n\nPrimary roles\n-------------\n\n\nPrimary roles are used for key components across the UI, such as the Edge\nHugging buttons, prominent buttons, active states, and icons on the tonal button\nstyles. \n\n\u003cbr /\u003e\n\n\n**Primary**\n\n1. Primary\n2. On-Primary\n\nUse the Primary role for the most important actions in the UI, like primary\nbuttons or calls to action. This color should stand out and be instantly\nrecognizable to guide the user toward key interactions. \n\n**Primary-Dim**\n\n1. Primary-Dim\n2. On-Primary\n\nDim roles are typically used for elements that need to be visually distinct from\nthe primary action but don't require immediate user attention or interaction. \n\n**Primary-Container**\n\n1. Primary-Container\n2. On-Primary-Container\n\nApply Primary Container for background elements like cards or modals to\nhighlight sections or selected states. It helps draw attention to important\ncontent or ongoing activities within the UI.\n\n\u003cbr /\u003e\n\nSecondary roles\n---------------\n\n\nSecondary roles are used for key components across the UI, which are not as\nimportant as the primary role, but still need to stand out. Primary and\nsecondary can be used together in layouts to create differentiation and focus. \n\n\u003cbr /\u003e\n\n\n**Secondary**\n\n1. Secondary\n2. On-Secondary\n\nUse the Secondary role for supporting actions in areas with dense UI, such as\nsecondary buttons or complementary actions. It maintains visibility without\novershadowing primary elements in complex layouts. \n\n**Secondary-Dim**\n\n1. Secondary-Dim\n2. Secondary\n\nThe Secondary-Dim role offers a muted contrast for passive elements in dense\nareas. It complements the secondary color while adding subtle depth, keeping the\nUI clean and helping users navigate. \n\n**Secondary-Container**\n\n1. Secondary-Container\n2. On-Secondary-Container\n\nApply Secondary-Container for organizing secondary elements in dense layouts. It\ncreates structure and separation, ensuring secondary content is distinguishable\nbut not dominant.\n\n\u003cbr /\u003e\n\nTertiary roles\n--------------\n\n\nTertiary roles are used for contrasting accents to balance primary and secondary\ncolors or bring heightened attention to an element such as an input field.\nTertiary roles can also help indicate when content changes or should stand out,\nsuch as a goal being reached. \n\n\u003cbr /\u003e\n\n\n**Tertiary**\n\n1. Tertiary\n2. On-Tertiary\n\nThe Tertiary role is used for drawing attention to key elements. Tertiary roles\nare particularly effective for components that need to stand out, such as\nbadges, stickers, or special action elements. \n\n**Tertiary-Dim**\n\n1. Tertiary-Dim\n2. Tertiary\n\nUse the Tertiary Dim role for buttons or actions that are related to tertiary\nactions yet don't require immediate focus. \n\n**Tertiary-Container**\n\n1. Tertiary-Container\n2. On-Tertiary-Container\n\nApply Tertiary-Container for backgrounds that group tertiary-related content,\nlike collections of badges or stickers. It emphasizes tertiary elements while\nmaintaining balance and structure in the UI.\n\n\u003cbr /\u003e\n\nSemantic roles\n--------------\n\n\nError-Red is used to indicate critical issues as error, delete, and anything\nrelated to emergency. It is designed to draw immediate attention to problems or\nwarnings, ensuring users can quickly identify areas that need corrective action.\nThe tone of Error-Red should maintain sufficient contrast against backgrounds to\nmeet accessibility standards, ensuring it is clearly visible and is\ndistinguishable from other status colors like warnings or success messages. \n\n\u003cbr /\u003e\n\n\n**Error**\n\n1. Error\n2. On-Error\n\nA semantic, yet slightly theme-tinted red, which indicates remove, delete, close\nor dismiss actions, such as Swipe to Reveal. Added as a container alternative\nthat is slightly less alarming and urgent than the error-dim color. \n\n**Error-Dim**\n\n1. Error-Dim\n2. On-Error\n\nA semantic, yet slightly theme-tinted red, which indicates high priority errors\nor emergency actions, such as safety alerts, failed dialog overlays or stop\nbuttons. \n\n**Error-Container**\n\n1. Error-Container\n2. On-Error-Container\n\nLess prominent container color, for components using the error state. Can also\nindicate an active error state which feels less interactive than a filled state,\nsuch as an active emergency sharing button or card, or on a failed overlay\ndialog.\n\n\u003cbr /\u003e\n\nSurface containers and elevation\n--------------------------------\n\n\nSurface containers are key in defining depth and elevation within the UI,\nproviding structure and hierarchy through color, helping to differentiate\ncomponents based on their importance and interaction. \n\n\u003cbr /\u003e\n\n\n**Surface-Container-Low**\n\n1. Surface-Container-Low\n2. On-Surface\n3. On-Surface-Variant\n\nGreat for an expanded container that needs to sit below Surface-Container, such\nas an expanded card in the Notification. Can also be used for non-interactive\ncards, where content still benefits from containment. \n\n**Surface-Container**\n\n1. Surface-Container\n2. On-Surface\n3. On-Surface-Variant\n\nThe default container color for most elements. It provides a neutral, moderate\nelevation, making it suitable for general UI components. \n\n**Surface-Container-High**\n\n1. Surface-Container-High\n2. On-Surface\n3. On-Surface-Variant\n\nIdeal for high-emphasis components that need to sit on top of, or in combination\nwith Surface-Container. This color helps bring focus and hierarchy to critical\nareas in the UI.\n\n\u003cbr /\u003e"]]
