۱. مقدمه
آخرین بهروزرسانی: 05/11/22
سیستم رنگ Material 3 با الگوریتم رنگ پویا، طرحهای رنگی قابل دسترس ایجاد میکند، اما منظور از قابلیت دسترسی برای رنگ چیست؟ سیستم رنگ جدید Material Design چگونه یک طرح رنگی قابل دسترس ایجاد میکند و چه ابزارهایی به آن کمک میکنند؟
آنچه یاد خواهید گرفت
- چگونه رنگ با دستورالعملهای دسترسیپذیری و کنتراست مرتبط است.
- چگونه ابزار میتواند به ایجاد یک طرح رنگی قابل دسترس، انجام ویرایشها و بررسی کنتراست کمک کند.
پیشنیازها
برای این آزمایش، ما بر روی برخی مفاهیم طراحی بنیادی کار خواهیم کرد.
- آشنایی با طرحها و نقشهای رنگی فعلی اندروید.
- آشنایی با فیگما
آنچه نیاز دارید
- حساب فیگما
- فایل فیگما دیزاین لب
- افزونه فیگما، سازنده قالب متریال
۲. شروع کنید
راهاندازی
برای شروع باید به فایل Designlab Figma دسترسی پیدا کنید. هر چیزی که برای آزمایشگاه نیاز دارید در فایل Figma قرار دارد. میتوانید فایل را دانلود و وارد کنید، یا آن را از انجمن Figma کپی کنید.
ابتدا وارد فیگما شوید یا یک حساب کاربری ایجاد کنید .
کپی از انجمن فیگما
به فایل «طراحی با رنگهای قابل دسترس» بروید، یا در انجمن فیگما عبارت «طراحی با رنگهای قابل دسترس» را جستجو کنید. برای کپی کردن فایل در فایلهای خود، روی گزینه «کپی» در گوشه بالا سمت راست کلیک کنید.
طرح بندی فایل
همانطور که فایل را بررسی میکنید، متوجه میشوید که فایل مستقل است و با یک مقدمه شروع میشود. هر بخش به ردیفی از آرتبوردها تقسیم شده است که به هم مرتبط هستند و برخی مفاهیم اصلی برای آن بخش و سپس تمرینها آمده است. بخشها و تمرینها بر اساس یکدیگر ساخته میشوند و باید به ترتیب تکمیل شوند.
این آزمایشگاه کد شما را با جزئیات بیشتر در مورد این مفاهیم و تمرینها راهنمایی میکند. برای کسب اطلاعات بیشتر در مورد ویژگیهای جدید Material You، با آزمایشگاه کد همراه شوید!
با شروع از صفحه هنری مقدمه ، دکمههایی وجود دارند که صفحههای هنری را به ترتیب به هم پیوند میدهند. برای دسترسی به پیوند، روی دکمه کلیک کنید.
افزونه فیگما را نصب کنید
این آزمایشگاه کدنویسی برای تولید طرحهای رنگی و توکنهای پویا به شدت به افزونه جدید فیگما متکی است. افزونه فیگما را مستقیماً از صفحه انجمن فیگما نصب کنید یا عبارت «سازنده تم متریال» را در انجمن فیگما جستجو کنید.
۳. رنگ و دسترسیپذیری
دسترسیپذیری تنها راه برای طراحی برای همه است و تضمین میکند که محصولاتی که تولید میکنید، برای وسیعترین مخاطب ممکن، فراگیر باشند.
«آیا میتوانم رنگ را روی صفحه ببینم؟» تنها اولین نکتهای است که هنگام طراحی با رنگ باید در نظر گرفته شود. افراد بسته به تیزبینی خود، رنگ را به روشهای مختلفی میبینند.
کوررنگی میتواند به معنای بررسی ترکیب رنگها باشد تا عناصر رابط کاربری با هم ترکیب نشوند.
اگرچه ممکن است کدری و وزن، رنگ اصلی یک رنگ نباشند، اما تأثیر بصری قدرتمندی بر نحوه درک رنگ دارند.
استفاده از شفافیت کم، رنگ روشنتری ایجاد میکند که میتواند متن را ناخوانا کند. به عنوان مثال، کسی که نزدیکبین است، در خواندن متنی که روی شفافیت 30٪ تنظیم شده است، در فاصله معقول مشکل خواهد داشت.
از کدورت با احتیاط استفاده کنید و هرگز طبق دستورالعملهای پیشنهادی عمل نکنید.
وزن فونت میتواند تأثیر مشابهی داشته باشد، به طوری که در پسزمینههای تیرهتر، وزن فونتها نازکتر میشود. در چاپ، استفاده از فونت بسیار نازک باعث میشود جوهر به داخل آن نفوذ کند و متنی کلاستروفوبیک (ترسناک) ایجاد کند. چشمان ما این اثر را روی صفحه نمایش نیز ایجاد میکنند و سعی میکنند فضا را پر کنند.
متن نازک روی پسزمینه تیره، جلوهای کلاستروفوبیک (تنگناهراسانه) ایجاد میکند.
خوانایی در مقابل خوانایی. در طول این آزمایش، به خوانایی متن اشاره خواهیم کرد. خوانایی میزان سهولت دیدن متن را اندازهگیری میکند، در حالی که خوانایی میزان سهولت درک آن را میسنجد.
۴. تضاد رنگ
دستورالعملهای دسترسیپذیری وجود دارند تا به طراحان و توسعهدهندگان یک چکلیست منسجم و متخصصمحور ارائه دهند تا اطمینان حاصل شود که ما در ایجاد محصولات فراگیر، بهترین شیوهها را دنبال میکنیم. WCAG استاندارد معمول است و این آزمایشگاه به آن اشاره میکند.
کنتراست رنگ، تفاوت بین روشنایی عناصر پیشزمینه و پسزمینه است که در قالب نسبت ارائه میشود. به این معیار نسبت، امتیاز داده میشود. اندازهگیری کنتراست بین مثلاً متن روی یک دکمه و محتوای آن، میتواند به تعیین خوانایی متن کمک کند.
مثالی با کنتراست رنگی نامناسب.
دستورالعملهای کنتراست رنگ به متن و غیر متن تقسیم میشوند که هر کدام مجموعه نمرات خاص خود را دارند.
متن
آ.ای. | آآ | |
متن بزرگ | ۳:۱ | ۴.۵:۱ |
متن معمولی (بدنه) | ۴.۵:۱ | ۷:۱ |
غیر متنی
آ.ای. | |
عناصر غیر متنی (گرافیکی) | ۳:۱ |
بیایید کمی کنتراست را بررسی کنیم و ببینیم چگونه میتوان آن را به صورت دستی اصلاح کرد.
- در فیگما، رنگهای موجود در عناصر رابط کاربری را پیدا کنید. با شروع از متن بزرگ (#C0BEC5)، روی رنگ پسزمینه (#F5F5FF) قرار میگیرد. با استفاده از یک بررسیکننده کنتراست آنلاین ، وارد کردن این رنگها در پیشزمینه و پسزمینه نشان میدهد که در همه رتبهبندیها رد میشود.
- متن برای رنگ پسزمینه خیلی روشن است. همچنان که در بررسی کنتراست آنلاین هستید، رنگ پیشزمینه را با انتخابگر رنگ به رنگی تیرهتر تنظیم کنید تا از AAA عبور کند.
- به فیگما برگردید، رنگ عبوری جدید را روی متن بزرگ اعمال کنید.
- همین فرآیند را برای متن بدنه و دکمهها دنبال کنید، و مطمئن شوید که هم رنگ متن و هم رنگ پسزمینه را برای هر کدام بررسی میکنید.
- از نتیجهی زیرِ «اشیاء گرافیکی» و «اجزای رابط کاربری» برای اعمال همین فرآیند به آیکونها استفاده کنید.**.**
- رنگ جدید را برای هر عنصر به فیگما بیاورید. اکنون همه عناصر باید رتبهبندی کنتراست را پشت سر بگذارند!
مثال با کنتراست رنگی گذرا.
احتمالاً این فرآیند طولانی به نظر میرسید، و ممکن است نتایج، پالت رنگی ناهماهنگتری ایجاد کرده باشد. اینجاست که ابزار میتواند کمک کند!
۵. ساخته شده با درخشندگی
سیستم رنگ پویای جدید برای طراحی متریال با استفاده از درخشندگی به جای رنگ ساخته شده است. به این معنی که اگر رنگ و کروما حذف شوند، میتوانیم کنتراست را از طریق سایهها ببینیم.
وقتی یک رنگ استخراج میشود، منجر به ۵ رنگ کلیدی جابجا شده میشود که از آنها پالتهای تُنال تولید میشوند. یک پالت تُنال شامل سیزده تُن، از جمله سفید و سیاه، است. مقدار تُن ۱۰۰ معادل ایده نور در حداکثر خود است و منجر به رنگ سفید میشود. هر مقدار تُن بین ۰ تا ۱۰۰، میزان نور موجود در رنگ را بیان میکند.
سیستم پالتهای تُنالیته برای ایجاد دسترسی پیشفرض به هر طرح رنگی، اساسی است.
ترکیب رنگ بر اساس تُنالیته، به جای مقدار هگز یا رنگ، یکی از سیستمهای کلیدی است که هر خروجی رنگی را قابل دسترس میکند. محصولاتی که از رنگ پویا استفاده میکنند، الزامات را برآورده میکنند زیرا ترکیبهای الگوریتمی که کاربر میتواند تجربه کند، برای مطابقت با استانداردهای دسترسی طراحی شدهاند.
عناصری با درخشندگی مشابه، کنتراست مناسبی برای خوانایی ندارند، در حالی که عناصری با مقادیر درخشندگی متفاوت، قابل تشخیصتر هستند.
رنگ پویای Material You برای کار در زمینههای غیرقابل پیشبینی ساخته شده است. برای مدیریت نسبتهای کنتراست در زمینههای مختلف مشاهده، سطوح روشنایی ویژگی کلیدی هستند که به رنگها اجازه میدهند حتی بدون اینکه تیم محصول هر ترکیب رنگ خاص را آزمایش کند، با موفقیت ترکیب شوند.
۶. یک قالب قابل دسترس بسازید
سازندهی تم، توکنهای طراحی متریال را به عنوان استایلهای فیگما تولید میکند و به شما امکان میدهد رنگهای پویا را تجسم کنید و یک تم سفارشی بسازید. این کار با پیروی از سیستم رنگ متریال ۳ انجام میشود تا از تولید رنگهای قابل دسترس در طرح رنگ اطمینان حاصل شود.
- در ماژول افزونه ، روی سفارشیسازی کلیک کنید. این کار قالب را به یک قالب سفارشی تغییر میدهد. قالب متریال از قبل ایجاد شده است، اما در صورت تمایل میتوانید یک قالب جدید نیز ایجاد کنید. برای کسب اطلاعات بیشتر، به بخش تجسم رنگ پویا مراجعه کنید.
- در مرحله بعد، یک رنگ کلید اصلی (Primary key) تنظیم کنید. رنگ اصلی میتواند رنگ اصلی برند شما یا پرکاربردترین رنگ اصلی باشد. برای باز کردن انتخابگر رنگ و انتخاب یک رنگ، روی رنگی که با عنوان Primary مشخص شده است کلیک کنید. رنگ اصلی برای رنگ منبع استفاده میشود، دقیقاً مانند رنگ منبع در تنظیمات پویا.
رنگها را به MTB اضافه کنید.
- بقیه رنگهای کلیدی بر اساس رنگ اصلی مرتب میشوند. این یعنی اگر به رنگهای اضافی نیاز ندارید، نیازی به اضافه کردن آنها نیست. در صورت تمایل، میتوانید یک رنگ ثانویه و یک رنگ سوم اضافه کنید.
- شماتیک رنگ، رنگهای کلیدی تفسیر شده از رنگهای ورودی، پالتهای تُنال تولید شده و طرحهای رنگی حاصل با نقشهای رنگی را نشان میدهد. هر دو طرح روشن و تیره در دسترس هستند!
- آزمایشگاه یک رابط کاربری نمونه برای مشاهده طرح رنگی اعمال شده ارائه داده است. پس از انتخاب کامپوننت رابط کاربری برنامه، روی گزینه swap در داخل افزونه کلیک کنید.
طرح رنگی با ماکت متصل.
برای این تمرینها، سازندهی قالب متریال (Material Theme Builder) از قبل توکنهای مورد نیاز را در فایل فیگما (Figma) ایجاد کرده است.
۷. کنتراست را با Material Theme Builder بررسی کنید
شگفتانگیز است، اما ما درک میکنیم که شما میخواهید برخی از این سبکها را با رنگهای مختلف به صورت دستی بهروزرسانی کنید. سازنده تم متریال شامل بررسی کنتراست داخلی برای رنگهای طرح اصلی است تا به تصمیمگیری در این زمینه کمک کند.
- از آنجایی که توکنها به صورت استایل ایجاد میشوند، میتوانیم مقدار رنگ تولید شده را نیز تنظیم کنیم. در استایلهای فیگما، به رنگ اصلی تم فعلی بروید و آیکون ویرایش استایل را در سمت راست انتخاب کنید.
- رنگ اصلی را در ویژگیها بهروزرسانی کنید. این در خروجی رنگ و رابط کاربری برنامه منعکس میشود. الگوریتم رنگ این رنگ را تولید نکرده است، بنابراین نمیتوانیم دسترسیپذیری را تضمین کنیم.
- در منوی افزونه، روی بررسی کنتراست کلیک کنید و سپس پنجره ویرایش سبک را برای تصویر اصلی دوباره باز کنید. این کار کنتراست را بررسی میکند و رتبهبندی کنتراست را نشان میدهد.
کنتراست در پنجره محاورهای به سبک فیگما.
۸. تبریک
فوقالعادهست! دسترسیپذیری باید بخش مهمی از فرآیند شما باشد و با طراحی متریال و سازندهی تم متریال، این کار حتی آسانتر هم میشود.
اگر سوالی دارید، میتوانید هر زمان که خواستید با استفاده از @MaterialDesign در توییتر از ما بپرسید.
برای مطالب و آموزشهای بیشتر در زمینه طراحی، در youtube.com/MaterialDesign با ما همراه باشید.