۱. مرور کلی
در کنفرانس Google I/O 2019، طراحی متریال (Material Design) راهنمایی برای ایجاد یک تم تیره برای تکمیل تم متریال موجود محصول شما معرفی کرد. در حالی که تمهای روشن برای خواندن فرمهای طولانی عالی هستند و کنتراست خواناتری ارائه میدهند، کاهش درخشندگی یک تم تیره، ایمنی را در محیطهای تاریک فراهم میکند و میتواند خستگی چشم را به حداقل برساند.
در متریال، تمهای تیره به گونهای طراحی شدهاند که به عنوان یک حالت مکمل برای تم روشن پیشفرض استفاده شوند و هویت منحصر به فرد برنامه شما (از جمله سبکهای رنگ، شکل، نوع و ارتفاع) را از طریق یک نمایش ظریف و مناسب برای شب حفظ کنند.
در این آزمایشگاه طراحی، مراحل مورد نیاز برای ایجاد یک تم تاریک بر اساس یک تم متریال موجود - با استفاده از یکی از مطالعات متریال - را بررسی خواهیم کرد.
ما با Reply، یک اپلیکیشن ایمیل که برای وضوح، خوانایی، شهودی بودن و سهولت استفاده طراحی شده است، کار خواهیم کرد. ما در مورد هویت Reply یاد خواهیم گرفت و تصمیمات دقیقی برای حفظ لحظات برند در اپلیکیشن خواهیم گرفت، در حالی که قالبی را ایجاد میکنیم که همچنان در تاریکی راحت باشد.
ما همچنین این تم را فراتر خواهیم برد و با رنگهای سطحی سفارشی کار خواهیم کرد که فراتر از تم تیره اولیه هستند تا دوباره بر شخصیت منحصر به فرد Reply تأکید کنند.
مواد مورد نیاز:
۲. فایلهای مورد نیاز را جمعآوری کنید
قبل از شروع، باید فایل آغازین فیگما را دانلود کنید. هر آنچه برای designlab نیاز دارید در این فایل موجود است.
- دانلود DarkTheme DesignLab Kit.fig (7.6 مگابایت)
۳. محیط خود را آماده کنید
در مرحله بعد، باید محیط طراحی خود را تنظیم کنید.
ابتدا وارد فیگما شوید یا یک حساب کاربری ایجاد کنید .
پس از ورود به سیستم، فایلی را که در مرحله قبل دانلود کردهاید، وارد کنید. برای انجام این کار، کافیست نماد «وارد کردن فایل» را در گوشه سمت چپ بالای صفحه فایلهای فیگما پیدا کنید و فایل را در پوشه «دانلودها» خود قرار دهید.
لحظهای به فایل نگاه کنید. این فایل شامل یک تم روشن، یک پالت تُن از پیش ساخته شده بر اساس برند برنامه و یک کپی از تم تیره نهایی است که خواهیم ساخت.
- در یک برگه دیگر، راهنمای طراحی متریال برای تمهای تیره را باز کنید. ما در سراسر آزمایشگاه طراحی به این دستورالعملها ارجاع خواهیم داد.
۴. هویت محصول را درک کنید
قبل از شروع کار با تم تیره برای Reply، باید برخی از ویژگیهای برند Reply را درک کنیم. این به ما کمک میکند تا انتخابهای آگاهانهای در مورد تم خود داشته باشیم تا هویت و برند Reply به طور مداوم در هر دو تم روشن و تیره بیان شود.
برند Reply بر ارتباط تأکید دارد. این اپلیکیشن ویژگیهای کاربردی را در اولویت قرار میدهد و سهولت استفاده را بر عناصر طراحی که هدف کاربردی ندارند، ترجیح میدهد.
برای اهداف ما در این آزمایشگاه طراحی، مهمترین عناصر بیان برند در Reply رنگ، نوع و شکل هستند.
رنگ
تم رنگی Reply از یک رنگ اصلی آبی-خاکستری تیره در کنار یک رنگ فرعی نارنجی-زرد استفاده میکند.
از آنجا که رنگ ثانویه به ندرت استفاده میشود، رابط کاربری Reply اغلب تک رنگ است و از رنگهای مختلفی از رنگ اصلی خود استفاده میکند. این تم رنگی ظریف باعث میشود محتوا به راحتی و بدون حواسپرتی خوانده شود و آواتارهای تصویری به راحتی دیده شوند.
بنابراین، رنگ ثانویهی Reply در هر کجا که استفاده شود، تأثیر فوقالعادهای دارد - بر اقدامات حیاتی تأکید میکند و لحظات برند را در سراسر برنامه به وضوح بیان میکند.
نوع
به عنوان اپلیکیشنی که به شدت بر محتوای متنی و کارایی تمرکز دارد، تایپ و تایپوگرافی در بیان هویت Reply نقش محوری دارند. این اپلیکیشن برای مقیاس کامل تایپ خود به Work Sans متکی است و از سبکهای متنوعی استفاده میکند که شش وزن Work Sans را در خود جای دادهاند: Light، Regular، Medium، SemiBold و Bold.
ساختن کل مقیاس تایپوگرافی از Work Sans به Reply تایپوگرافیای سازگار و قابل پیشبینی، اما ارگانیک و خوانا میدهد.
به گفته وی هوانگ، طراح Work Sans، این خانواده فونت برای استفاده روی صفحه نمایش بهینه شده است. این امر آن را برای خواندن کارآمد متن در ایمیلها یا سایر محتواها عالی میکند. پایه سست آن در اشکال اولیه گروتسکها، زیباییشناسی تا حدودی دوستانهتر و انسانیتری به آن میبخشد، در حالی که ردیابی گستردهتر، خواندن را روانتر میکند.
شکل
ریپلای (Reply) داستان ظریفی از نظر شکل و شمایل دارد، اجزای گرد و تیز را به گونهای جفت میکند که کارایی و ماهیت عملکردی فهرست ایمیل را تقویت میکند و در عین حال به اقدامات کلیدی و اجزای بزرگتر، جلوهای ملایمتر میبخشد.
- اجزای کوچک
- اجزای متوسط
- اجزای بزرگ
اجزای کوچک مانند دکمهها و FAB کاملاً گرد هستند، در حالی که اجزای متوسط مانند کارتهای ایمیل و نوار برنامه پایین کاملاً مربع هستند. اجزای بزرگ مانند تعویض حساب و برگه پایینی گوشههای کمی گرد دارند.
این شکلها با هم ترکیب میشوند تا درک کاربر از موقعیت خود در برنامه و نحوهی درک هر جزء و همچنین نحوهی ارتباط آن با بقیهی رابط کاربری را تقویت کنند.
۵. کار با رنگ
با دانستن اینکه رنگ چگونه با بیان برند Reply در تم روشن پیشفرض آن مرتبط است، میتوانیم تنظیمات آگاهانهای را در پالت رنگی آن برای یک تم تاریک کاربردی و رسا انجام دهیم.
در متریال، سیستمهای رنگی بر اساس پالتهای تُنالیته هستند - این پالتها از رنگهای برند شما برای ایجاد مجموعهای از انواع هماهنگ استفاده میکنند که در یک سیستم رنگی جامع که در سراسر برنامه شما اعمال میشود، گرد هم میآیند و سبک و خوانایی را تضمین میکنند.
در فایل فیگما، میتوانید پالتهای تُن اولیه و ثانویه Reply را مشاهده کنید. فلشهای روشن بالای هر پالت، مقادیر مورد استفاده در تم روشن Reply را نشان میدهند، در حالی که فلشهای تیره، انواعی را که در تم تیره خود استفاده خواهیم کرد، نشان میدهند.
هنگام ایجاد یک تم تیره با Material، انواع روشنتر انتخاب میشوند تا سیستم رنگی شما بتواند رسا باقی بماند و کنتراست مناسب را بدون ایجاد خستگی چشم حفظ کند. رنگهای اشباعتر تمایل دارند از نظر بصری در برابر پسزمینههای تیرهتر "لرزش" پیدا کنند و خواندن آنها را دشوارتر میکنند. تُنهای روشنتر همچنین انعطافپذیری بیشتری در تغییر رنگ سطوح مرتفع فراهم میکنند که به زودی به آن خواهیم پرداخت.
۶. رنگهای سطح را تنظیم کنید
حالا که با پالتهای تُن رنگ Reply و رنگهایی که در تم تیره خود استفاده خواهیم کرد، آشنا شدیم، وقت آن رسیده که مقادیر رنگ را در ماکت خود تنظیم کنیم.
در تمهای تیرهی متریال، پایینترین لایهی رابط کاربری معمولاً به رنگ خاکستری تیره با مقدار هگز #121212 است.
- در فایل فیگما، آرتبوردی به نام « Reply Starter » را پیدا کنید و لایهای به نام « Background » را انتخاب کنید.
- در پنل inspector در سمت راست صفحه، در قسمت « Fill »، مقدار رنگ را روی ۱۲۱۲۱۲ تنظیم کرده و دکمهی Return را بزنید.
- صفحه طراحی شما باید به این شکل باشد:
در نمای تکرنگ صندوق ورودی Reply، کارتهای ایمیل رنگ کمی روشنتری نسبت به پسزمینه دارند، بنابراین باید همین رویکرد را در مورد کارتهای با تم تیره نیز در پیش بگیریم تا سلسله مراتب بصری صندوق ورودی حفظ شود.
- در همان صفحه طراحی، گروه «کارتهای ایمیل» را گسترش دهید و تمام لایههای با نام « کارت ایمیل» را انتخاب کنید.
- درست مانند قبل، مقدار Fill را در پنل inspector انتخاب کنید. مقدار را روی ۱۲۱۲۱۲ تنظیم کنید و Return را بزنید.
- حالا فقط لایههایی که « Email card overlay» نام دارند را انتخاب کنید. این لایهها به ما اجازه میدهند یک لایه رویی ایجاد کنیم که کارتهای ایمیل را از پسزمینهشان متمایز کند.
- به لایهها Fill بدهید و آن را FFFFFF با ۲٪ opacity تنظیم کنید.
حالا که کارتهای ایمیل تیره شدهاند، متن ما ناخوانا است. در ادامه به رنگهای متن خواهیم پرداخت.
۷. رنگ متن را تنظیم کنید
برای درک رنگ متن در تمهای تیره، مهم است که بدانیم چگونه رنگ در سیستم گستردهتر طراحی متریال به متن اعمال میشود.
اجزای مواد، مفهوم رنگهای «روشن» را تعریف میکنند، که به این دلیل به این نام خوانده میشوند که رنگهایی هستند که «روی» اجزا و سطوح کلیدی که از رنگهای اولیه، ثانویه، سطحی، پسزمینه یا خطا استفاده میکنند، ظاهر میشوند. رنگهای «روشن» در درجه اول برای متن استفاده میشوند تا از خوانایی متن روی این سطوح اطمینان حاصل شود.
رنگهای پیشفرض «روشن» در Material سفید (#FFFFFF) و سیاه (#000000) هستند. از آنجایی که رنگ سیاه یا تیره «روشن» برای سطوح تیره ما مناسب نیست، از سفید استفاده خواهیم کرد.
سیستم ایجاد سلسله مراتب متن با این رنگ "روشن" ساده است. متن با تأکید بالا دارای شفافیت ۸۷٪ است، در حالی که متن با تأکید متوسط با شفافیت ۶۰٪ اعمال میشود و متن غیرفعال از شفافیت ۳۸٪ استفاده میکند.
متن با اولویت بالا سفید خالص نیست، زیرا همانطور که در مرحله ۵ بحث شد، #FFFFFF - یک رنگ روشن - از نظر بصری در برابر پسزمینههای تیره ما "لرزش" ایجاد میکند. علاوه بر این، متن خالص #FFFFFF در برابر پسزمینه تیره میتواند به خوانایی آسیب برساند، زیرا نور آن متن در برابر پسزمینه تیره پخش یا تار به نظر میرسد.
با دانستن همه این موارد، بیایید رنگ متن را در تم تیره خود اصلاح کنیم.
- تمام متنهای موجود در طرح اولیه ما برای دسترسی آسان گروهبندی شدهاند. گروهی به نام متن صندوق ورودی را پیدا کنید و آن را گسترش دهید تا تمام لایههای تشکیلدهنده آن را ببینید.
- تمام لایههایی که با " Hi -" شروع میشوند را انتخاب کنید. اینها تمام متنهای با تأکید بالا در طرح ما هستند.
- در پنل inspector، مقدار Fill را روی FFFFFF با شفافیت ۸۷٪ تنظیم کنید.
- به گروه متن صندوق ورودی برگردید، تمام لایههایی که با "Med -" شروع شدهاند را انتخاب کنید.
- در پنل inspector، مقدار Fill را روی FFFFFF با شفافیت ۶۰٪ تنظیم کنید.
۸. رنگ اجزا را تنظیم کنید
در تمهای تیره ساخته شده با Material، سطوح و اجزای مرتفع با استفاده از پوششها رنگآمیزی میشوند. هرچه سطح مرتفعتر باشد، پوشش قویتر و روشنتر میشود. این روشی برای برقراری ارتباط بین ارتفاع و سلسله مراتب است، زمانی که پسزمینه برای نمایش سایههای تیره بیش از حد تیره است.
نوار برنامه پایین
برای نوار پایین برنامهی Reply، که بالاتر از بقیهی رابط کاربری صندوق ورودی قرار دارد، یک لایهی پوششی ظریف اعمال خواهیم کرد.
- گروهی به نام Bottom app bar را در لیست لایهها پیدا کنید و آن را باز کنید تا بتوانید لایههای تشکیلدهندهاش را ببینید.
- لایهای به نام Surface را در آن گروه پیدا کنید و مقدار Fill آن را روی ۱۲۱۲۱۲ تنظیم کنید.
- لایهی بالایی آن به نام Surface overlay را پیدا کنید و مقدار Fill آن را FFFFFF با Opacity 12% قرار دهید.
دکمه عملیاتی شناور
در مرحله بعد، یک رنگ جدید به FAB اعمال خواهیم کرد. برای انجام این کار، به پالتهای تُنی که قبلاً بررسی کردیم برگردید و مقدار ۷۰۰ رنگ ثانویه Reply را بردارید.
به صورت اختیاری، برای اجزای کوچک اما با تأثیر بالا در برنامه خودتان، میتوانید رنگی کمی اشباعتر انتخاب کنید، البته تا زمانی که کنتراست مناسبی با رنگهای زیرین داشته باشد. این گزینه را در مرحله بعدی بررسی خواهیم کرد.
- گروهی به نام FAB را در فهرست لایهها پیدا کنید و آن را باز کنید تا اجزای تشکیلدهندهاش را ببینید.
- لایه Surface را پیدا کرده و آن را انتخاب کنید. مقدار Fill آن را روی FCC13B قرار دهید.
کارتهای انتخابشده
ممکن است متوجه شوید که همان رنگ نارنجی-زرد تأثیرگذار، در گوشه کارتهای ایمیل منتخب در صندوق ورودی Reply نیز ظاهر میشود. این یک لحظه قوی دیگر با برندسازی قوی است، اما به طور واضح با اجزا، سطوح یا متن مطابقت ندارد.
برای موقعیتهایی از این دست، بهتر است از رنگ ثانویهی خود (در این مورد #FFFBE6) شروع کنیم و به عقب برگردیم تا چیزی پیدا کنیم که به طور مناسب بیانگر باشد، بدون اینکه خللی در زیباییشناسی کاربردی Reply ایجاد کند. برای Reply، میتوانیم به رنگ ثانویهی معمولی خود پایبند باشیم.
- لایهای به نام Earmark را انتخاب کنید و مقدار Fill آن را روی FFF5A0 تنظیم کنید.
۹. حتی فراتر بروید: سطوح سفارشی
همانطور که قبلاً آموختیم، دکمهی عملیاتی شناور (یا FAB) در Reply یک جزء بسیار مورد تأکید است که همچنین نشاندهندهی یک لحظهی برندسازیشدهی قوی در برنامه است. به همین دلیل، ممکن است تصمیم بگیریم که با استفاده از رنگ ثانویهی اصلی Reply، بیان رنگ آن را در تم تیرهی Reply حفظ کنیم.
- گروهی به نام FAB را در فهرست لایهها پیدا کنید و آن را باز کنید تا اجزای تشکیلدهندهاش را ببینید.
- لایه Surface را پیدا کرده و آن را انتخاب کنید. مقدار Fill آن را به F9AA33 برگردانید.
همچنین ممکن است بخواهیم رنگ اصلی Reply را به عنوان یک رنگ سطحی سفارشی برای نوار پایین برنامه و کارتهای ایمیل برگردانیم. برای انجام این کار، فقط باید روکش را تغییر دهیم تا از رنگ اصلی تیره مشخص شده در پالت رنگی که به آن اشاره کردهایم استفاده کنیم.
- گروهی به نام Bottom app bar را در لیست لایهها پیدا کنید و آن را باز کنید تا بتوانید لایههای تشکیلدهندهاش را ببینید.
- لایهای به نام Surface overlay را پیدا کنید و مقدار Fill آن را ۳۴۴۹۵۵ با شفافیت ۴۸٪ قرار دهید. این کار باعث میشود رنگ برند قویتری داشته باشد و در عین حال کنتراست کافی را حفظ کند.
- لایههایی با نام Email card overlay را در لیست لایهها پیدا کنید و همه آنها را انتخاب کنید.
- مقدار Fill آنها را روی ADC0CB با شفافیت ۴٪ تنظیم کنید.
۱۰. جمعبندی
در متریال، تمهای تیره، امتدادی متفکرانه و عمدی از هویت منحصر به فرد محصول شما هستند، همانطور که در تم روشن بیان میشوند. از طریق تنظیمات ساده رنگ و نحوهی انتقال آن ارتفاع، شما با موفقیت اولین تم تیره متریال خود را ایجاد کردهاید. تبریک میگویم!
مراحل این آزمایشگاه طراحی را به عنوان چارچوبی برای درک و تعریف تم تاریک محصول خود در نظر بگیرید و همیشه ویژگیها و اهداف برند و محصول خود را در نظر داشته باشید.
برای راهنمایی بیشتر در مورد تم تاریک، به مشخصات طراحی متریال برای تمهای تاریک نگاهی بیندازید.
اگر سوالی دارید، میتوانید هر زمان که خواستید با استفاده از @MaterialDesign در توییتر از ما بپرسید.
برای مطالب و آموزشهای بیشتر در مورد طراحی، در کانال یوتیوب گوگل دیزاین با ما همراه باشید.