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

رنگ

پایه و اساس استراتژی رنگ سیستم عامل اندروید اتوموتیو، ایده «ساختن از رنگ مشکی» است. قرار دادن رنگ‌های رابط کاربری بر اساس رنگ مشکی، تجربه کاربری سازگارتری را ایجاد می‌کند و هیچ تغییر چشمگیری بین تم‌های روز و شب وجود ندارد.

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

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

برای پشتیبانی از رانندگی در روز و شب، رنگ‌های انتخابی خود را از مشکی انتخاب کنید.
نسبت کنتراست حداقل ۴.۵:۱ را بین پس‌زمینه و آیکون‌ها یا متن حفظ کنید.

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

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

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

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

طراحی متریال

کاربرد رنگ و پالت‌ها

پالت خاکستری سیستم عامل اندروید اتوموبیل

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

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

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

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

تفاوت‌های تُنی، حتی در پس‌زمینه‌های کاملاً مشکی که سایه‌ها نامحسوس هستند، توهم عمق ایجاد می‌کنند. برای ارائه تفاوت‌های تُنی کافی، پالت خاکستری سیستم عامل اندروید اتوموتیو شامل خاکستری‌های میانه است. خاکستری‌های طراحی متریال که از خاکستری ۹۰۰ شروع می‌شوند، خیلی سریع به رنگ‌های روشن‌تر نزدیک می‌شوند؛ رنگی دو درجه روشن‌تر، خاکستری ۷۰۰ خواهد بود که برای زمینه خودرو خیلی روشن است.

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

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

رنگ تأکیدی

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

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

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

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

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

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

رایج‌ترین کاربرد مقادیر تیرگی برای شفافیت، ایجاد لایه‌های آستر (یا پوشش) است.

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

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

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

کنتراست

برای رعایت دستورالعمل‌های ایمنی اولیه سیستم عامل اندروید خودرو، نسبت کنتراست بین پس‌زمینه و آیکون‌ها یا متن باید حداقل ۴.۵:۱ باشد. برای جزئیات بیشتر در مورد نحوه اعمال نسبت‌های کنتراست بر عناصر خاص رابط کاربری خودرو، به بخش «محتوا را آسان برای خواندن کنید» مراجعه کنید.

کنتراست مهم نیست — نگذارید کنتراست به زیر ۴.۵:۱ برسد، که باعث کاهش ایمنی راننده می‌شود.

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

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

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

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

پنهان کردن پس‌زمینه با پارچه‌های آستردار

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

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

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

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

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

حفظ ثبات رنگ

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

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

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

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

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

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

از مقادیر شفافیت سفید برای ایجاد یک سلسله مراتب بصری منسجم و قوی استفاده کنید. مقادیر شفافیت ۸۸، ۷۲ و ۵۶ کنتراست کافی برای برآورده کردن الزامات دسترسی‌پذیری را دارند و در عین حال یک محیط مطالعه راحت در یک پس‌زمینه تیره ایجاد می‌کنند. برای حالت شب از شفافیت ۹۶٪ روی تمام رنگ‌های سفید استفاده کنید.

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

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

رنگ با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.