رنگ

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 استفاده کنید تا مطمئن شوید که صفحه‌نمایش‌های شما شرایط کنتراست را دارند.

برای جزئیات بیشتر درباره نحوه اعمال نسبت کنتراست به عناصر UI خاص، به دستورالعمل‌های طراحی برای رانندگی مراجعه کنید.

نماد فراخوانی
طراحی برای رانندگی: مطالب را برای خواندن آسان کنید
جزئیات در مورد خوانایی، قابلیت نگاه، و نسبت کنتراست.
کنتراست انجام دهید

انجام دادن

این نمادها از توصیه‌های نسبت کنتراست رنگ پیروی می‌کنند و در پس‌زمینه‌شان خواناتر هستند
کنتراست نکن

نکن

این نمادها از توصیه های نسبت کنتراست رنگ پیروی نمی کنند و تشخیص آنها در پس زمینه آنها دشوار است

راهنمایی و مثال

رابط کاربری تاریک برای Android Auto تمیز و ساده است و کمتر از رنگ استفاده می‌کند. علاوه بر استفاده از رنگ‌ها، رنگ‌ها و مقادیر کدورت مناسب برای عناصر رابط کاربری (به پالت‌ها و گرادیان‌ها مراجعه کنید)، هر استفاده از رنگ و کدورت متنوع باید هدفی داشته باشد.

این بخش راهنمایی و مثال هایی برای اعمال تغییرات کدورت و رنگ برای دستیابی به اهداف مختلف ارائه می دهد، از جمله:

  • پس زمینه های مبهم
  • حفظ ثبات
  • ایجاد یک سلسله مراتب بصری که تمرکز کاربر را به اقدامات اولیه جلب می کند
  • تمایز موارد در یک لیست

پنهان کردن پس زمینه با اسکریم

وقتی محتوای با اولویت بالا در پیش‌زمینه ظاهر می‌شود، از اسکریم‌های تمام صفحه (پوشش‌ها) برای پوشاندن پس‌زمینه استفاده می‌شود، مانند گفتگویی که کاربر را ملزم به انجام یک عمل می‌کند. اسکریم های جزئی برای جلب توجه به انتقال عناصر، مانند ورودی اعلان ها استفاده می شود.

اسکریم کامل در حالت روز
اسکریم کامل (پشت کارت گفتگو) در حالت روز
اسکریم کامل در حالت شب
اسکریم کامل (پشت کارت گفتگو) در حالت شب
اسکریم جزئی در حالت روز
اسکریم جزئی (پشت اعلان) در حالت روز
اسکریم جزئی در حالت شب
اسکریم جزئی (پشت اعلان) در حالت شب

حفظ سازگاری با رنگ

رنگ یک نشانه قدرتمند برای تقویت ارتباط بین عناصر کلیدی در جریان کاربر است، مانند رنگ سبز همه عناصر مرتبط با ناوبری. چنین تداوم رنگی به حافظه و تشخیص اینکه کدام عناصر رابط کاربری متصل هستند و نحوه ارتباط آنها با یکدیگر کمک می کند. می‌توانید از آن برای ایجاد یک تجربه منسجم از صفحه‌ای به صفحه دیگر استفاده کنید.

تشخیص رنگ بصری

انجام دادن

با استفاده از رنگ یکسان برای یک مورد در چندین نما، مانند رنگ سبز مورد استفاده برای این نماهای ناوبری گام به گام، تداوم بصری را حفظ کنید.
تداوم رنگ بصری

انجام دادن

از رنگ برای اتصال بصری عناصر و عملکردهای مرتبط مانند این CTAهای قرمز رنگ استفاده کنید.
رنگ تاکیدی مداوم برنامه

انجام دادن

از رنگ غالب هنر آلبوم یا رنگ اختصاص داده شده به برنامه بر روی عناصر مرتبط به عنوان یک توان بصری مداوم استفاده کنید. این دایره در اطراف دکمه مکث با اسپاتیفای سبز برجسته شده است.
محدودیت استفاده از رنگ

نکن

از رنگ های مختلف برای متمایز کردن خودسرانه اجزای تکرار شده در یک صفحه استفاده نکنید. در مورد استفاده از رنگ‌ها زمانی که ارزش اضافه نمی‌کنند محتاط باشید - همانطور که در مورد این خطوط رنگی در اطراف کارت‌های خلاصه که رنگ نماد برنامه را تکرار می‌کنند، صادق است.

ایجاد یک سلسله مراتب بصری

یک سلسله مراتب بصری ثابت و قوی را می توان با رنگ آمیزی متن با استفاده از طیفی از تیرگی های سفید ایجاد کرد. مقادیر کدورت 88%، 72% و 56% برای متن سفید دارای کنتراست کافی برای برآوردن نیازهای دسترس‌پذیری و ایجاد یک محیط خواندن راحت در پس‌زمینه تاریک است. برای حالت شب، از کدورت 96% روی تمام متن سفید استفاده کنید.

نمونه ای از کدورت و تضاد برای حفظ سلسله مراتب بصری

انجام دادن

از مقادیر مختلف کدورت و کنتراست برای حفظ سلسله مراتب بصری استفاده کنید.
محدودیت شفافیت و کنتراست

نکن

با اعمال مقادیر زیاد کدورت یا کنتراست روی عناصر بیش از حد از آنها استفاده نکنید. برای متمایز کردن اطلاعات اولیه و ثانویه، یک تضاد در مقادیر کدورت مورد نیاز است.