این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

رنگ

اساس استراتژی رنگ سیستم عامل Android Automotive، ایده "ساختن از سیاه" است. قرار دادن رنگ‌های رابط روی مشکی، بدون تغییر شدید بین تم‌های روز و شب، تجربه کاربری سازگارتری را تجربه می‌کند.

ساختن از مشکی همچنین تراز بهتری با سخت افزار را تضمین می کند، زیرا مواد تیره اغلب در داخل خودرو و داشبورد استفاده می شود.

راهنمایی در یک نگاه (TL;DR)

انتخاب رنگ خود را از مشکی بسازید تا از رانندگی در روز و شب پشتیبانی کنید
نسبت کنتراست حداقل 4.5:1 بین پس زمینه و نمادها یا متن را حفظ کنید

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

پالت ها و گرادیان ها

تم تاریک رابط سیستم عامل Android Automotive بر اساس یک پالت خاکستری است. در حالت ایده‌آل، هر رنگ اضافی باید از شدت کمتری برخوردار باشد، مانند انواع تیره رنگ‌ها در پالت‌های طراحی متریال.

این بخش شامل اطلاعات پالت و کدورت، همراه با نمودارهایی است که مقادیر مقیاس خاکستری را برای سطوح ارتفاع مرتبط با هر جزء ارائه می دهد.

طراحی متریال

استفاده از رنگ و پالت ها

پالت مقیاس خاکستری سیستم عامل Android Automotive

پالت مقیاس خاکستری سیستم عامل Android Automotive برای عناصری مانند متن و نمادها استفاده می شود و برای پاسخگویی به نیازهای منحصر به فرد محیط رانندگی طراحی شده است.

این پالت باید به اندازه کافی متنوع باشد تا:

تمام موارد استفاده مختلف رابط کاربری تم تاریک را پوشش دهید
محدوده کافی برای تعریف سلسله مراتب از طریق تفاوت های آهنگی ارائه دهید

پالت رنگ خاکستری — این پالت خاکستری پالت اصلی رنگ برای سیستم عامل Android Automotive است که از تم تیره رابط پشتیبانی می کند.

تفاوت‌های رنگی حتی در پس‌زمینه‌های مشکی واقعی که سایه‌ها نامحسوس هستند، توهم عمق ایجاد می‌کنند. برای ارائه تفاوت‌های رنگی کافی، پالت مقیاس خاکستری سیستم‌عامل Android Automotive شامل خاکستری‌های متوسط است. خاکستری های طراحی متریال که از Gray 900 شروع می شوند، خیلی سریع به رنگ های روشن تر نزدیک می شوند. یک رنگ دو پله روشن تر، خاکستری 700 است که برای زمینه خودکار بسیار روشن است.

نمودار ارتفاع اجزا — این نمودار سطوح ارتفاعی که اجزای مختلف در آن قرار دارند را نشان می دهد. هر سطح ارتفاع دارای یک مقدار خاکستری مرتبط است.

سطوح ارتفاعی در حالت روز و شب در مقیاس خاکستری — این نمودار مقادیر خاکستری مرتبط با سطوح مختلف ارتفاع را در حالت روز و شب نشان می دهد

رنگ تاکیدی

علاوه بر پالت خاکستری در هسته رابط سیستم عامل Android Automotive، از رنگ‌های دیگر می‌توان برای اهدافی مانند فوکوس ترسیم به مقدار کم استفاده کرد.

در حال حاضر، سیستم عامل Android Automotive یک رنگ رسمی دارد، سایه آبی که در کتابخانه پشتیبانی به عنوان "لهجه ماشین" نامیده می شود. برای افزایش اشباع و سرزندگی، این رنگ آبی کمی از آبی استاندارد گوگل جابجا شده است. این تغییر به رنگ ها کمک می کند تا راحت تر روی یک سطح تیره بنشینند.

رنگ آبی «لهجه خودرو» در سیستم‌عامل Android Automotive بیشتر از آبی استاندارد Google است که برای کارکرد خوب در رابط با تم تیره در هنگام رانندگی در روز و شب طراحی شده است.

نمودارهای کدورت-مقدار

شفافیت حس عمق را منتقل می کند و مدل فضایی Material Design را تقویت می کند. برای استفاده موثر از شفافیت، مقادیر تیره یا سفید را بر اساس مورد استفاده خود انتخاب کنید.

مقادیر کدورت تیره

رایج ترین مورد استفاده برای مقادیر تیره شفافیت، ایجاد scrims (همپوشانی) است.

مقادیر کدورت سفید

این مقادیر بیشتر در متن استفاده می شود. آنها به ویژه هنگامی که پس زمینه رنگی است موثر هستند. استفاده از خاکستری یکدست روی پس زمینه تیره و رنگی خیلی گل آلود به نظر می رسد.

برای مثال هایی از نحوه استفاده از کدورت در اسکریم ها و سلسله مراتب متن، به راهنمای و مثال ها مراجعه کنید.

تضاد

برای رعایت دستورالعمل‌های ایمنی اولیه سیستم عامل Android Automotive، نسبت کنتراست بین پس‌زمینه و نمادها یا متن باید حداقل 4.5:1 باشد. برای جزئیات نحوه اعمال نسبت کنتراست به عناصر UI خاص خودرو، به آسان کردن محتوا برای خواندن مراجعه کنید.

کنتراست انجام دهید — اطمینان حاصل کنید که کنتراست حداقل نسبت 4.5:1 را برای همه محتوای قابل خواندن و عملی داشته باشد

کنتراست نکن — اجازه ندهید کنتراست کمتر از 4.5:1 شود و ایمنی راننده را کاهش دهد

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

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

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

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

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

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

اسکریم کامل در حالت روز — اسکریم کامل (پشت کارت گفتگو) در حالت روز

اسکریم کامل در حالت شب — اسکریم کامل (پشت کارت گفتگو) در حالت شب

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

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

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

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

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

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

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

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

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

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

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

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