با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
Android Auto همه محتوا را روی پس‌زمینه سیاه قرار می‌دهد تا تجربه کاربری ثابت‌تری را با رنگ‌های مشابه در تم‌های روز و شب ایجاد کند.
پس‌زمینه سیاه معمولاً در داخل خودروها بهتر عمل می‌کند، زیرا خودروسازان اغلب از مواد و رنگ‌های تیره برای فضای داخلی خودرو، داشبورد و رابط‌های کاربری استفاده می‌کنند.
در یک نگاه
برای پشتیبانی از رانندگی در روز و شب از پس زمینه سیاه استفاده کنید
نسبت کنتراست حداقل 4.5:1 را بین پس زمینه و نمادها یا متن حفظ کنید
از رنگ به صورت حداقلی و هدفمند استفاده کنید
ارتفاع را با استفاده از سایه های مختلف خاکستری نشان دهید
از شفافیت و شفافیت برای هدایت تمرکز بصری استفاده کنید
پالت ها و گرادیان ها
تم تیره برای Android Auto از یک پالت رنگ در مقیاس خاکستری استفاده می کند. هر رنگ دیگری که به رابط کاربری شما اضافه می‌شود باید از نظر شدت بی‌صدا شود، مشابه رنگ‌های تیره‌تر از پالت‌های رنگ Material Design .
طراحی متریال
استفاده از رنگ و پالت ها
پالت خاکستری Android Auto
با استفاده از پالت رنگ مقیاس خاکستری Android Auto، می توانید رنگ را به همه عناصر، از جمله متن و نمادها اعمال کنید.
این پالت برای موارد زیر طراحی شده است:
سطح سلسله مراتب هر عنصر UI را با طیف سایه های ارائه شده منعکس کنید
آدرس همه موارد استفاده از رابط کاربری تم تیره
این پالت خاکستری، پالت رنگی پیش‌فرض Android Auto است که از تم تیره رابط پشتیبانی می‌کند.
در Android Auto، حس عمق با استفاده از سایه های مختلف خاکستری بیان می شود. هر سایه سطح متفاوتی از ارتفاع را نشان می‌دهد، جایی که اجزای با سایه‌های تیره‌تر (مانند جزء فهرست) ارتفاع کمتری نسبت به اجزای با سایه روشن‌تر دارند (مانند دکمه‌های عمل شناور).
همه اجزا در یک پس زمینه سیاه واقعی که در آن سایه ها قابل مشاهده نیستند نمایش داده می شوند. برای ایجاد کنتراست کافی بین این مؤلفه‌ها، پالت مقیاس خاکستری Android Auto شامل طیف گسترده‌ای از رنگ‌های خاکستری است. این یک پیشرفت تدریجی خاکستری نسبت به پالت رنگ پایه Material Design است، زیرا سایه های متریال زیر خاکستری 900 برای زمینه خودکار بسیار روشن هستند.
هر سطح ارتفاع استراحت برای اجزای مختلف با یک مقدار خاکستری منحصر به فرد همراه است. این نمودار مقادیر خاکستری مرتبط با سطوح مختلف ارتفاع را برای حالت روز و شب نشان می دهد.
رنگ تاکیدی
علاوه بر پالت مقیاس خاکستری Android Auto، می‌توان از یک رنگ برجسته برای اهدافی مانند طراحی تمرکز کاربر به‌دقت استفاده کرد.
در حال حاضر، Android Auto یک رنگ لهجه رسمی دارد، سایه ای از آبی که در کتابخانه پشتیبانی به عنوان "لهجه ماشین" نامیده می شود. این رنگ آبی اشباع و سرزندگی را نسبت به آبی استاندارد گوگل برای دید بهتر روی سطح تاریک رابط کاربری افزایش داده است.
رنگ آبی «لهجه خودرو» در Android Auto اشباع‌تر از آبی استاندارد Google است که برای کارکرد خوب در رابط با تم تیره در طول رانندگی در روز و شب طراحی شده است.
نمودارهای کدورت
مدل فضایی Material Design به درجات مختلفی از کدورت برای انتقال حس عمق در یک رابط کاربری متکی است. برای استفاده موثر از آن، یک سطح کدورت را بر اساس مورد استفاده خود انتخاب کنید.
مقادیر کدورت تیره
رایج ترین مورد استفاده برای سطوح تیره نیمه شفاف، اسکریم (همچنین به عنوان "پوشش" شناخته می شود).
مقادیر کدورت سفید
مقادیر سفید نیمه شفاف بیشتر برای متن استفاده می شود، به خصوص زمانی که پس زمینه رنگی است، به جای استفاده از خاکستری یکدست.
برای مثال هایی از نحوه استفاده از کدورت در اسکریم ها و سلسله مراتب متن، به راهنمای و مثال ها مراجعه کنید.
تضاد
تضاد رنگی مناسب به رانندگان کمک می کند تا به سرعت اطلاعات را تفسیر کرده و تصمیم بگیرند.
حداقل کنتراست بصری بین پیش زمینه (متن یا نمادها) و پس زمینه (رنگ ها، آلبوم هنری و غیره) برای خوانایی در حین رانندگی لازم است. رنگ‌های برنامه باید الزامات کنتراست متن معمولی سطح AA WCAG 2.0 را داشته باشند، که نسبت کنتراست 4.5:1 را مشخص می‌کند. از یک کنتراست جستجوگر مانند WebAIM Color Contrast Checker استفاده کنید تا مطمئن شوید که صفحه‌نمایش‌های شما شرایط کنتراست را دارند.
طراحی برای رانندگی: مطالب را برای خواندن آسان کنید
جزئیات در مورد خوانایی، قابلیت نگاه، و نسبت کنتراست.
انجام دادن
این نمادها از توصیه‌های نسبت کنتراست رنگ پیروی می‌کنند و در پس‌زمینه‌شان خواناتر هستند
نکن
این نمادها از توصیه های نسبت کنتراست رنگ پیروی نمی کنند و تشخیص آنها در پس زمینه آنها دشوار است
راهنمایی و مثال
رابط کاربری تاریک برای Android Auto تمیز و ساده است و کمتر از رنگ استفاده می‌کند. علاوه بر استفاده از رنگ‌ها، رنگ‌ها و مقادیر کدورت مناسب برای عناصر رابط کاربری (به پالت‌ها و گرادیان‌ها مراجعه کنید)، هر استفاده از رنگ و کدورت متنوع باید هدفی داشته باشد.
این بخش راهنمایی و مثال هایی برای اعمال تغییرات کدورت و رنگ برای دستیابی به اهداف مختلف ارائه می دهد، از جمله:
پس زمینه های مبهم
حفظ ثبات
ایجاد یک سلسله مراتب بصری که تمرکز کاربر را به اقدامات اولیه جلب می کند
تمایز موارد در یک لیست
پنهان کردن پس زمینه با اسکریم
وقتی محتوای با اولویت بالا در پیش‌زمینه ظاهر می‌شود، از اسکریم‌های تمام صفحه (پوشش‌ها) برای پوشاندن پس‌زمینه استفاده می‌شود، مانند گفتگویی که کاربر را ملزم به انجام یک عمل می‌کند. اسکریم های جزئی برای جلب توجه به انتقال عناصر، مانند ورودی اعلان ها استفاده می شود.
اسکریم کامل (پشت کارت گفتگو) در حالت روز اسکریم کامل (پشت کارت گفتگو) در حالت شب
اسکریم جزئی (پشت اعلان) در حالت روز اسکریم جزئی (پشت اعلان) در حالت شب
حفظ سازگاری با رنگ
رنگ یک نشانه قدرتمند برای تقویت ارتباط بین عناصر کلیدی در جریان کاربر است، مانند رنگ سبز همه عناصر مرتبط با ناوبری. چنین تداوم رنگی به حافظه و تشخیص اینکه کدام عناصر رابط کاربری متصل هستند و نحوه ارتباط آنها با یکدیگر کمک می کند. می‌توانید از آن برای ایجاد یک تجربه منسجم از صفحه‌ای به صفحه دیگر استفاده کنید.
انجام دادن
با استفاده از رنگ یکسان برای یک مورد در چندین نما، مانند رنگ سبز مورد استفاده برای این نماهای ناوبری گام به گام، تداوم بصری را حفظ کنید.
انجام دادن
از رنگ برای اتصال بصری عناصر و عملکردهای مرتبط مانند این CTAهای قرمز رنگ استفاده کنید.
انجام دادن
از رنگ غالب هنر آلبوم یا رنگ اختصاص داده شده به برنامه بر روی عناصر مرتبط به عنوان یک توان بصری مداوم استفاده کنید. این دایره در اطراف دکمه مکث با اسپاتیفای سبز برجسته شده است.
نکن
از رنگ های مختلف برای متمایز کردن خودسرانه اجزای تکرار شده در یک صفحه استفاده نکنید. در مورد استفاده از رنگ‌ها زمانی که ارزش اضافه نمی‌کنند محتاط باشید - همانطور که در مورد این خطوط رنگی در اطراف کارت‌های خلاصه که رنگ نماد برنامه را تکرار می‌کنند، صادق است.
ایجاد یک سلسله مراتب بصری
یک سلسله مراتب بصری ثابت و قوی را می توان با رنگ آمیزی متن با استفاده از طیفی از تیرگی های سفید ایجاد کرد. مقادیر کدورت 88%، 72% و 56% برای متن سفید دارای کنتراست کافی برای برآوردن نیازهای دسترس‌پذیری و ایجاد یک محیط خواندن راحت در پس‌زمینه تاریک است. برای حالت شب، از کدورت 96% روی تمام متن سفید استفاده کنید.
انجام دادن
از مقادیر مختلف کدورت و کنتراست برای حفظ سلسله مراتب بصری استفاده کنید.
نکن
با اعمال مقادیر زیاد کدورت یا کنتراست روی عناصر بیش از حد از آنها استفاده نکنید. برای متمایز کردن اطلاعات اولیه و ثانویه، یک تضاد در مقادیر کدورت مورد نیاز است.
تاریخ آخرین بهروزرسانی 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 بهوقت ساعت هماهنگ جهانی."],[[["\u003cp\u003eAndroid Auto utilizes a dark theme with a black background and muted colors for optimal visibility and consistency in car environments.\u003c/p\u003e\n"],["\u003cp\u003eA grayscale color palette with varying shades is employed to indicate elevation and hierarchy of UI elements.\u003c/p\u003e\n"],["\u003cp\u003eMinimum contrast ratios of 4.5:1 between foreground and background are essential for legibility and driver safety.\u003c/p\u003e\n"],["\u003cp\u003eColor should be used sparingly and purposefully, primarily for accents, maintaining consistency, and establishing visual hierarchy.\u003c/p\u003e\n"],["\u003cp\u003eOpacity variations, particularly with white text, are crucial for creating a comfortable reading experience and highlighting key information.\u003c/p\u003e\n"]]],[],null,["# Color\n\n\u003cbr /\u003e\n\nAndroid Auto places all content on a black background to create a more consistent user experience, with similar colors across day and night themes.\n\nA black background typically works best inside cars, since car makers often use dark materials and colors for car interiors, dashboards, and UIs.\n\n**At a glance** \n- Use a black background to support both day and night driving\n- Maintain a contrast ratio of at least 4.5:1 between the background and icons or text \n- Use color minimally and purposefully\n- Show elevation using different shades of gray\n- Use transparency and opacity to guide visual focus\n\n*** ** * ** ***\n\nPalettes and Gradients\n----------------------\n\nThe dark theme for Android Auto uses a grayscale color palette. Any additional colors added to your UI should be muted in intensity, similar to the darker color variants from the [Material Design color palettes](https://material.io/design/color/the-color-system.html#color-usage-palettes). \n[Material Design\nColor usage and palettes](https://material.io/design/color/the-color-system.html#color-usage-palettes)\n\n### Android Auto's grayscale palette\n\nUsing the Android Auto grayscale color palette, you can apply color to all elements, including text and icons.\n\nThis palette is designed to:\n\n- Reflect each UI element's level of hierarchy with the provided range of shades\n- Address all dark theme UI use cases\n\nThis grayscale palette is the default Android Auto color palette, supporting the dark theme of the interface.\n\nIn Android Auto, a sense of depth is expressed using different shades of gray. Each shade represents a different level of elevation, where components with darker shades (such as the list component) have less elevation than components with lighter shades (such as floating action buttons).\n\nAll components are displayed on a true black background where shadows aren't visible. To provide sufficient contrast between these components, the Android Auto grayscale palette contains a wide range of grays. It's a more gradual progression of grays than Material Design's baseline color palette, as Material's shades below Gray 900 are too bright for the auto context.\nEach [resting elevation](https://material.io/design/environment/elevation.html#elevation-in-material-design) level for various components is associated with a unique gray value. This chart shows the gray values associated with various elevation levels for day and night mode.\n\n### Accent color\n\nIn addition to Android Auto's grayscale palette, an accent color can be used sparingly for purposes such as drawing user focus.\n\nCurrently, Android Auto has one official accent color, a shade of blue referred to in the support library as \"car accent\". This blue has increased saturation and vibrancy from the standard Google blue for better visibility on the UI's dark surface.\nThe blue \"car accent\" color in Android Auto is more saturated than the standard Google blue, designed to work well in the dark-themed interface during both day and night driving.\n\n### Opacity charts\n\nThe Material Design spatial model relies on varying degrees of opacity to convey a sense of depth in a UI. To use it effectively, choose an opacity level based on your use case.\n\n#### Dark opacity values\n\nThe most common use case for semi-transparent dark surfaces is a scrim (also known as an \"overlay\").\n\n#### White opacity values\n\nSemi-transparent white values are mostly used for text, especially when the background is colored, instead of using solid gray.\n\nFor examples of how to use opacity in scrims and text hierarchies, see [Guidance and examples](#guidance_and_examples).\n\n*** ** * ** ***\n\nContrast\n--------\n\nAppropriate color contrast helps drivers quickly interpret information and make decisions.\n\nMinimum visual contrast between the foreground (text or icons) and background (colors, album art, etc.) is required for legibility while driving. App colors must meet the [WCAG 2.0](https://www.w3.org/TR/WCAG20/#visual-audio-contrast) Level AA Normal Text contrast requirements, which specify a contrast ratio of 4.5:1). Use a contrast checker, such as the [WebAIM Color Contrast Checker](http://webaim.org/resources/contrastchecker/), to ensure that your screens meet the contrast requirements.\n\nFor more details of how contrast ratios apply to specific UI elements, see [Design for Driving guidelines](/cars/design/design-foundations/visual-principles#make_content_easy_to_read). \n[Design for driving: Make content easy to read\nDetails about legibility, glanceability, and contrast ratios.](/cars/design/design-foundations/visual-principles#make_content_easy_to_read) \n\n**Do**\nThese icons follow the color contrast ratio recommendations and are more legible against their backgrounds\n**Don't**\nThese icons do not follow the color contrast ratio recommendations and are difficult to discern against their backgrounds\n\n*** ** * ** ***\n\nGuidance and examples\n---------------------\n\nThe dark UI for Android Auto is clean and simple, with minimal use of color. In addition to using the appropriate colors, tones, and opacity values for UI elements (see [Palettes and gradients](#palettes_and_gradients)), every use of color and varied opacity should have a purpose.\n\nThis section provides guidance and examples for applying opacity variations and color to achieve a variety of goals, including:\n\n- Obscuring backgrounds\n- Maintaining consistency\n- Establishing a visual hierarchy that draws user focus to primary actions\n- Distinguishing items in a list\n\n### Obscuring backgrounds with scrims\n\nFull-screen scrims (overlays) are used to cover backgrounds when high-priority content appears in the foreground, such as a dialog requiring the user to take an action. Partial scrims are used to draw attention to the transition of elements, such as the entrance of notifications. \nFull scrim (behind dialog card) in day mode Full scrim (behind dialog card) in night mode \nPartial scrim (behind notification) in day mode Partial scrim (behind notification) in night mode\n\n### Maintaining consistency with color\n\nColor is a powerful cue for reinforcing the connection between key elements across user flows, such as all navigation-related elements being colored green. Such color continuity aids memory and recognition about which UI elements are connected and how they relate to one another. You can use it to create a coherent experience from screen to screen. \n\n**Do**\nMaintain visual continuity by using the same color for an item across multiple views, such as the green color used for these turn-by-turn navigation views.\n**Do**\nUse color to visually connect related elements and functions, such as these red hang-up CTAs. \n\n**Do**\nUse the dominant color of album art or an app's assigned color on related elements as a persistent visual affordance. This circle around the pause button is accented with Spotify green.\n**Don't**\nDon't use different colors to arbitrarily differentiate repeated components within a single screen. Be cautious about using colors when they don't add value -- as is the case with these colored outlines around the summary cards, which duplicate the color of the app icon.\n\n### Establishing a visual hierarchy\n\nA consistent and strong visual hierarchy can be created by coloring text using a range of white opacities. The opacity values of 88%, 72%, and 56% for white text contain just enough contrast to meet accessibility requirements while creating a comfortable reading environment on a dark background. Use a 96% opacity on all white text for night mode. \n\n**Do**\nUse different opacity and contrast values to maintain a visual hierarchy.\n**Don't**\nDon't overuse full opacity or contrast values by applying them to too many elements. A contrast in opacity values is needed to differentiate primary and secondary information."]]
