1. معرفی
آخرین به روز رسانی: 05/11/22
سیستم رنگی Material 3 با الگوریتم رنگ پویا، طرح‌های رنگی قابل دسترسی ایجاد می‌کند، اما دسترسی به رنگ چه معنایی دارد؟ سیستم رنگی جدید Material Design چگونه یک طرح رنگی قابل دسترس ایجاد می کند و چه ابزارهایی به شما کمک می کنند؟
چیزی که یاد خواهید گرفت
- چگونگی ارتباط رنگ با دستورالعمل‌های دسترسی و کنتراست.
- چگونه ابزار می تواند به ایجاد یک طرح رنگی قابل دسترس، ویرایش و بررسی کنتراست کمک کند.
پیش نیازها
برای این آزمایشگاه ما بر روی برخی از مفاهیم اساسی طراحی بنا خواهیم کرد.
- آشنایی با رنگ ها و نقش های فعلی اندروید.
- آشنایی با Figma
آنچه شما نیاز دارید
- حساب فیگما
- فایل Figma Designlab
- افزونه Figma Material Theme Builder
2. شروع کنید
برپایی
برای شروع باید به فایل Designlab Figma دسترسی داشته باشید. هر آنچه برای آزمایشگاه نیاز دارید در فایل Figma موجود است. می توانید فایل را دانلود و وارد کنید یا آن را از انجمن Figma کپی کنید.
ابتدا وارد Figma شوید یا یک حساب کاربری ایجاد کنید .
کپی از انجمن Figma
به فایل طراحی با رنگ‌های قابل دسترس بروید یا در انجمن Figma عبارت طراحی با رنگ‌های قابل دسترس را جستجو کنید. روی Duplicate در گوشه سمت راست بالا کلیک کنید تا فایل را در فایل های خود کپی کنید.
طرح بندی فایل
همانطور که فایل را نگاه می کنید، متوجه شوید که فایل خود حاوی است و با یک مقدمه شروع می شود. هر بخش به ردیفی از تابلوهای هنری تقسیم می‌شود که به هم مرتبط شده‌اند، با مفاهیم اصلی برای بخش، و سپس تمرین‌ها. بخش ها و تمرین ها بر روی یکدیگر ساخته می شوند و باید به ترتیب تکمیل شوند.
این نرم افزار کد شما را از طریق آن مفاهیم و تمرین ها با جزئیات بیشتر راهنمایی می کند. برای کسب اطلاعات بیشتر در مورد ویژگی‌های جدید Material You، همراه با Codelab بخوانید!
با شروع از تابلوی هنری Intro ، دکمه‌هایی وجود دارند که تابلوهای هنری را به ترتیب به یکدیگر متصل می‌کنند. برای دسترسی به لینک، روی دکمه کلیک کنید.
افزونه Figma را نصب کنید
این Codelab به شدت به پلاگین Figma جدید برای تولید طرح‌های رنگی پویا و نشانه‌ها متکی است. افزونه Figma را مستقیماً از صفحه انجمن Figma نصب کنید یا "Material Theme Builder" را در انجمن Figma جستجو کنید.
3. رنگ و دسترسی
دسترس‌پذیری تنها راه طراحی برای همه است و تضمین می‌کند محصولاتی که تولید می‌کنید برای گسترده‌ترین مخاطبان ممکن باشد.
"آیا می توانم رنگ را روی صفحه ببینم؟" تنها اولین نکته ای است که در طراحی با رنگ باید در نظر گرفته شود. افراد بسته به حدت بینایی خود به رنگ ها به روش های مختلفی نگاه می کنند.
کوررنگی می تواند به معنای بررسی ترکیب رنگ ها باشد تا عناصر UI با هم ترکیب نشوند.
در حالی که تیرگی و وزن ممکن است رنگ واقعی یک رنگ نباشد، آنها تأثیر بصری قدرتمندی بر نحوه درک رنگ دارند.
استفاده از کدورت کم رنگ روشن تری ایجاد می کند که می تواند متن را ناخوانا کند. به عنوان مثال، برای کسی که نزدیک بین است، در خواندن متنی که در فاصله معقولی روی 30 درصد کدورت تنظیم شده است، دچار مشکل می شود.
از کدورت با احتیاط استفاده کنید و هرگز تحت دستورالعمل های پیشنهادی قرار ندهید.
وزن فونت می تواند تأثیر مشابهی داشته باشد و وزن فونت های باریک تر را در پس زمینه های تیره تر به حساب آورد. در چاپ، استفاده از یک فونت بسیار نازک اجازه می‌دهد تا جوهر به درون آن بریزد و متنی ترسناک ایجاد کند. چشمان ما این اثر را روی نمایشگرها نیز ایجاد می کند و سعی می کند فضا را پر کند.
نوع نازک روی پس زمینه تیره یک جلوه کلاستروفوبیک ایجاد می کند.
خوانایی در مقابل خوانایی در سراسر این آزمایشگاه، به خوانایی متن اشاره خواهیم کرد. خوانایی نشان می‌دهد که دیدن آن آسان است، در حالی که خوانایی میزان درک آسان آن را اندازه‌گیری می‌کند.
4. تضاد رنگ
دستورالعمل‌های دسترس‌پذیری وجود دارد تا به طراحان و توسعه‌دهندگان یک چک لیست ثابت مبتنی بر متخصصان ارائه دهد تا اطمینان حاصل شود که ما بهترین شیوه‌ها را برای ایجاد محصولات فراگیر دنبال می‌کنیم. WCAG استاندارد معمول و آنچه این آزمایشگاه به آن اشاره می کند است.
کنتراست رنگ تفاوت بین درخشندگی عناصر پیش‌زمینه و پس‌زمینه است که در قالب نسبت ارائه می‌شود. به این معیار نسبت نمره داده می شود. اندازه‌گیری کنتراست بین متن روی دکمه و محفظه آن، می‌تواند به تعیین خوانایی متن کمک کند.
مثال با عدم تضاد رنگ.
دستورالعمل‌های کنتراست رنگ به دو دسته متنی و غیر متنی تقسیم می‌شوند که هر کدام مجموعه‌ای از نمرات خاص خود را دارند.
متن
AA | AAA | |
متن بزرگ | 3:1 | 4.5:1 |
متن عادی (بدنه) | 4.5:1 | 7:1 |
غیر متنی
AA | |
غیر متنی (عناصر گرافیکی) | 3:1 |
بیایید سعی کنیم مقداری کنتراست را بررسی کنیم و ببینیم چگونه به صورت دستی آن را برطرف کنیم.
- در Figma، رنگ ها را در عناصر UI پیدا کنید. با شروع متن بزرگ (#C0BEC5)، روی رنگ پس‌زمینه (#F5F5FF) قرار می‌گیرد. با استفاده از بررسی کنتراست آنلاین ، وارد کردن این رنگ‌ها در پیش‌زمینه و پس‌زمینه نشان می‌دهد که تمام رتبه‌بندی‌ها ناموفق است.
- متن برای رنگ پس زمینه خیلی روشن است. هنوز در بررسی کنتراست آنلاین هستید، رنگ پیش زمینه را با انتخابگر رنگ به رنگ تیره تر تنظیم کنید تا زمانی که از AAA عبور کند.
- بازگشت به Figma، رنگ عبور جدید را به متن بزرگ اعمال کنید.
- همین روند را برای کپی بدنه و دکمه‌ها دنبال کنید، مطمئن شوید که هم رنگ متن و هم رنگ پس‌زمینه را بررسی می‌کنید.
- از نتیجه زیر اشیاء گرافیکی و اجزای رابط کاربری استفاده کنید تا همین فرآیند را روی نمادها اعمال کنید**.**
- برای هر عنصر رنگ جدید را در Figma بیاورید. همه عناصر اکنون باید از رتبه بندی کنتراست عبور کنند!
مثال با تضاد رنگ گذرا.
احتمالاً این فرآیند طولانی به نظر می رسد و نتایج ممکن است یک پالت رنگی کمتر هماهنگ ایجاد کرده باشد. اینجاست که ابزار می تواند کمک کند!
5. ساخته شده با درخشندگی
سیستم رنگ پویا جدید برای طراحی متریال با استفاده از درخشندگی به جای رنگ ساخته شده است. به این معنی که اگر رنگ و رنگ حذف شوند، می‌توانیم کنتراست را از طریق سایه‌ها ببینیم.
هنگامی که یک رنگ استخراج می شود، منجر به 5 تغییر رنگ کلیدی می شود که از آن پالت های تونال تولید می شود. یک پالت تونال شامل سیزده تن، از جمله سفید و سیاه است. مقدار تون 100 معادل ایده نور در حداکثر آن است و منجر به رنگ سفید می شود. هر مقدار تن بین 0 تا 100 میزان نور موجود در رنگ را بیان می کند.
سیستم پالت های تونال برای دسترسی به هر طرح رنگی به طور پیش فرض مرکزی است.
ترکیب رنگ بر اساس تناژ، به جای مقدار هگز یا رنگ، یکی از سیستم های کلیدی است که هر خروجی رنگی را در دسترس قرار می دهد. محصولاتی که از رنگ پویا استفاده می کنند الزامات را برآورده می کنند زیرا ترکیبات الگوریتمی که کاربر می تواند تجربه کند برای مطابقت با استانداردهای دسترسی طراحی شده است.
عناصر با درخشندگی مشابه کنتراست مناسبی برای خوانایی ندارند، در حالی که عناصر با مقادیر روشنایی متفاوت قابل تشخیص تر هستند.
رنگ پویا Material You ساخته شده است تا در زمینه های غیرقابل پیش بینی کار کند. برای مدیریت نسبت کنتراست در زمینه‌های مختلف مشاهده، سطوح درخشندگی ویژگی کلیدی است که به رنگ‌ها اجازه می‌دهد با موفقیت ترکیب شوند، حتی بدون اینکه تیم محصول هر ترکیب رنگی خاص را آزمایش کند.
6. یک تم در دسترس بسازید
سازنده تم، توکن‌های طراحی متریال را به‌عنوان سبک‌های Figma تولید می‌کند و به شما امکان می‌دهد رنگ‌های پویا را تجسم کنید و یک تم سفارشی بسازید. این در حالی انجام می شود که از سیستم رنگ Material 3 پیروی می کنید تا اطمینان حاصل شود که رنگ های قابل دسترس در طرح رنگ تولید می شوند.
- در حالت افزونه ، روی سفارشی کلیک کنید. این موضوع را به یک تم سفارشی تغییر می دهد. موضوع ماده قبلاً ایجاد شده است، اما در صورت تمایل می‌توانید یک تم جدید نیز ایجاد کنید. برای کسب اطلاعات بیشتر به تجسم رنگ پویا مراجعه کنید.
- سپس یک رنگ کلید اصلی را تنظیم کنید. رنگ اصلی می تواند رنگ اصلی برند شما یا رنگ اصلی برجسته باشد. روی رنگ با برچسب اصلی کلیک کنید تا انتخابگر رنگ باز شود و یک رنگ انتخاب شود. رنگ اصلی برای رنگ مبدأ استفاده می شود، دقیقاً مانند رنگ مبدأ در تنظیمات پویا.
رنگ ها را به MTB اضافه کنید.
- بقیه رنگ های کلیدی بر اساس رنگ اصلی پر می شوند. این بدان معناست که در صورت عدم نیاز، نیازی به اضافه کردن رنگ های اضافی نیست. در صورت تمایل، یک رنگ ثانویه و سوم اضافه کنید.
- شماتیک رنگی رنگ های کلیدی تفسیر شده از رنگ های ورودی، پالت های رنگی تولید شده و طرح های رنگی حاصل با نقش های رنگی را نشان می دهد. هر دو طرح روشن و تاریک در دسترس هستند!
- آزمایشگاه یک رابط کاربری مثال برای مشاهده طرح رنگ اعمال شده ارائه کرده است. با انتخاب مولفه رابط کاربری برنامه، روی swap در افزونه کلیک کنید.
طرح رنگ با ماکاپ متصل.
برای این تمرینات Material Theme Builder قبلاً توکن های مورد نیاز را در فایل Figma ایجاد کرده است.
7. کنتراست را با Material Theme Builder بررسی کنید
شگفت انگیز است، اما ما می دانیم که شما می خواهید برخی از این سبک ها را با رنگ های مختلف به صورت دستی به روز کنید. Material Theme Builder شامل بررسی کنتراست داخلی برای رنگ‌های طرح اصلی برای کمک به تصمیم‌گیری است.
- از آنجایی که توکن ها به عنوان سبک ایجاد می شوند، می توانیم مقدار رنگ تولید شده را نیز تعیین کنیم. در سبک‌های Figma، به رنگ اصلی موضوع فعلی بروید و نماد ویرایش سبک در سمت راست را انتخاب کنید.
- رنگ اصلی را در ویژگی ها به روز کنید. این در خروجی رنگ و رابط کاربری برنامه منعکس شده است. الگوریتم رنگ این رنگ را ایجاد نکرده است، بنابراین نمی توانیم دسترسی را تضمین کنیم.
- در منوی افزونه، روی Check Contrast کلیک کنید و سپس مدال Edit style را برای اولیه باز کنید. این کنتراست را بررسی می کند و درجه کنتراست را نشان می دهد.
کنتراست در گفتگوی سبک Figma.
8. تبریک می گویم
فوق العاده! دسترسی باید بخش مهمی از فرآیند شما باشد و با طراحی متریال و سازنده تم مواد، این کار حتی آسان‌تر است.
اگر سؤالی دارید، در هر زمان با استفاده از @MaterialDesign در توییتر از ما بپرسید.
منتظر مطالب و آموزش های طراحی بیشتر در youtube.com/MaterialDesign باشید