با Material و Figma یک تم تیره طراحی کنید

با Material و Figma یک تم تیره طراحی کنید

درباره این codelab

subjectآخرین به‌روزرسانی: مارس ۳۰, ۲۰۲۱
account_circleنویسنده: Liam Spradlin

1. نمای کلی

در Google I/O 2019، متریال دیزاین راهنمایی برای ایجاد یک تم تیره برای تکمیل تم مواد موجود محصول شما معرفی کرد. در حالی که تم های روشن برای خواندن طولانی عالی هستند و کنتراست خواناتری ارائه می دهند، درخشندگی کاهش یافته تم تیره باعث ایمنی در محیط های تاریک می شود و می تواند فشار چشم را به حداقل برساند.

1c87bbed2ddae46d.png

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

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

dba5acf2b6e59912.png

ما با Reply کار خواهیم کرد، یک برنامه ایمیل که برای وضوح، خوانایی، شهود و سهولت استفاده طراحی شده است. با هویت Reply آشنا می‌شویم و تصمیمات دقیقی برای حفظ لحظات برند در برنامه می‌گیریم و در عین حال تمی ایجاد می‌کنیم که همچنان در تاریکی راحت باشد.

همچنین تم را بیشتر جلو می‌بریم و با رنگ‌های سطح سفارشی کار می‌کنیم که فراتر از تم تیره اصلی است تا بر شخصیت منحصربه‌فرد Reply تأکید کنیم.

مواد مورد نیاز:

2. فایل های مورد نیاز را جمع آوری کنید

قبل از شروع، باید فایل شروع Figma ما را دانلود کنید. هر آنچه برای طراحی لبه نیاز دارید در این فایل گنجانده شده است.

3. محیط خود را تنظیم کنید

در مرحله بعد، باید محیط طراحی خود را تنظیم کنید.

ابتدا وارد Figma شوید یا یک حساب کاربری ایجاد کنید .

پس از ورود به سیستم، فایلی را که در مرحله قبل دانلود کرده اید وارد کنید. برای انجام این کار، فقط نماد "وارد کردن فایل" را در گوشه سمت چپ بالای صفحه نمایش فایل های Figma پیدا کنید و فایل را در پوشه "Downloads" خود پیدا کنید.

80ef89e20b8f0e91.png

یک لحظه به اطراف پرونده نگاه کنید. این شامل یک تم روشن، یک پالت تونال از پیش ساخته شده بر اساس نام تجاری برنامه، و یک کپی از تم تیره نهایی است که ما ایجاد خواهیم کرد.

9293beeda31cb693.png

4. شناخت هویت محصول

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

برند Reply بر ارتباطات تاکید دارد. این برنامه کیفیت های عملکردی را در اولویت قرار می دهد و سهولت استفاده را نسبت به عناصر طراحی که هدف کاربردی ندارند ترجیح می دهد.

برای اهداف ما در این دیزاینلب، مهمترین عناصر بیان برند در Reply رنگ، نوع و شکل است.

891b4b320ba684f7.png

رنگ

طرح زمینه رنگی Reply از رنگ اصلی آبی مایل به خاکستری تیره همراه با رنگ دوم نارنجی مایل به زرد استفاده می کند.

c73b87a98b662735.png

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

9eea3ffdcc568500.png

بنابراین، رنگ ثانویه Reply در هر کجا که استفاده می‌شود تأثیر بزرگی دارد - تأکید بر اقدامات مهم و به وضوح بیان لحظات مارک در سراسر برنامه.

تایپ کنید

به‌عنوان برنامه‌ای که به شدت بر روی محتوا و کارایی مبتنی بر متن تمرکز می‌کند، نوع و تایپوگرافی در بیان هویت Reply نقش اساسی دارند. این برنامه برای مقیاس نوع کامل خود به Work Sans متکی است و از انواع سبک‌ها استفاده می‌کند که شش وزن Work Sans را در خود جای داده است: Light، Regular، Medium، SemiBold و Bold.

f7096dea5a1264df.png

ساختن کل مقیاس نوع از Work Sans به پاسخ، تایپوگرافی سازگار و قابل پیش بینی، اما ارگانیک و خوانا می دهد.

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

شکل

Reply یک داستان شکل ظریف دارد، اجزای گرد و تیز را به روش‌هایی جفت می‌کند که کارایی و ماهیت کاربردی فهرست ایمیل را تقویت می‌کند و در عین حال لمس ملایم‌تری به اقدامات کلیدی و اجزای بزرگ‌تر می‌دهد.

1406754928b6c411.png

  1. اجزای کوچک
  2. اجزای متوسط
  3. اجزای بزرگ

اجزای کوچک مانند دکمه ها و FAB کاملا گرد هستند، در حالی که اجزای متوسط ​​مانند کارت های ایمیل و نوار برنامه پایین کاملاً مربع هستند. اجزای بزرگ مانند تعویض حساب و صفحه پایین دارای گوشه های کمی گرد هستند.

12114c6b0cf7b695.png

این اشکال ترکیب می شوند تا درک کاربر را از جایی که در برنامه هستند و نحوه درک هر جزء و همچنین نحوه ارتباط آن با بقیه رابط را تقویت کنند.

5. کار با رنگ

با دانستن اینکه رنگ چگونه با بیان نام تجاری Reply در تم روشن پیش‌فرض آن ارتباط دارد، می‌توانیم تنظیمات آگاهانه‌ای را در پالت آن برای یک تم تیره قابل استفاده و گویا انجام دهیم.

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

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

f75bcc030014db3a.png

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

6. رنگ های سطح را تنظیم کنید

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

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

  • در فایل Figma، آرتبورد به نام " Reply Starter " را پیدا کنید و لایه ای به نام " Background " را انتخاب کنید.

99c09e3e08e22d20.png

  • در قسمت " پر " در پنل بازرس در سمت راست صفحه، مقدار رنگ را روی 121212 تنظیم کنید و روی Return کلیک کنید.

f6e6fc21a9fdb60d.png

  • آرت بورد شما باید به شکل زیر باشد:

cb28b2987d2e9666.png

در نمای صندوق ورودی تک رنگ Reply، کارت‌های ایمیل رنگ کمی روشن‌تر از پس‌زمینه دارند، بنابراین باید همان رفتار را با کارت‌های دارای تم تیره به کار ببریم تا سلسله مراتب بصری صندوق ورودی حفظ شود.

  • در همان تابلوی هنری، گروهی به نام «کارت‌های ایمیل» را گسترش دهید و همه لایه‌های « کارت ایمیل» را انتخاب کنید.
  • مانند قبل، مقدار Fill را در پنل بازرس انتخاب کنید. مقدار را روی 121212 قرار دهید و Return را بزنید.
  • اکنون، فقط لایه‌هایی به نام « پوشش کارت ایمیل» را انتخاب کنید. این لایه‌ها به ما اجازه می‌دهند تا یک پوشش ایجاد کنیم که کارت‌های ایمیل را از پس‌زمینه‌شان متمایز کند.
  • به لایه ها یک Fill بدهید و آن را با کدورت 2% FFFFFF کنید.

30369e87449f9155.png

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

7. رنگ های متن را تنظیم کنید

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

مؤلفه‌های متریال مفهوم رنگ‌های «روشن» را تعریف می‌کنند، که به این دلیل نامیده می‌شوند زیرا رنگ‌هایی هستند که «در» بالای اجزا و سطوح کلیدی ظاهر می‌شوند که از رنگ‌های اولیه، ثانویه، سطح، پس‌زمینه یا خطا استفاده می‌کنند. رنگ‌های «روشن» عمدتاً برای متن استفاده می‌شوند تا اطمینان حاصل شود که روی این سطوح خوانا باقی می‌ماند.

رنگ‌های «روشن» پیش‌فرض در Material سفید (FFFFFF#) و سیاه (#000000) هستند. از آنجایی که رنگ مشکی یا تیره "روشن" برای سطوح تیره ما مناسب نیست، از رنگ سفید استفاده خواهیم کرد.

173397b73efc7b5.png

سیستم ایجاد سلسله مراتب متن با این رنگ "روشن" ساده است. متن با تأکید زیاد دارای کدورت 87 درصد است، در حالی که متن تأکیدی متوسط ​​در 60 درصد اعمال می شود و متن غیرفعال از کدورت 38 درصد استفاده می کند.

متن با اولویت بالا سفید خالص نیست زیرا همانطور که در مرحله 5 بحث شد، #FFFFFF - یک رنگ روشن - از نظر بصری در برابر پس‌زمینه‌های تاریک ما "ارتعاش" می‌کند. علاوه بر این، متن خالص #FFFFFF در پس زمینه تیره می تواند به خوانایی آسیب برساند زیرا به نظر می رسد نور آن متن در پس زمینه تاریک خون می شود یا محو می شود.

با دانستن همه اینها، بیایید رنگ های متن را در تم تیره خود اصلاح کنیم.

  • تمام متن در طرح اولیه ما برای دسترسی آسان گروه بندی شده است. گروهی به نام Inbox text را پیدا کنید و آن را گسترش دهید تا تمام لایه های تشکیل دهنده آن را ببینید.
  • تمام لایه های اضافه شده با " سلام -" را انتخاب کنید. اینها همه تکه های متنی با تاکید بالا در طرح ما هستند.
  • در پنل Inspector، Fill را روی FFFFFF با کدورت 87 درصد قرار دهید.
  • در گروه نوشتار Inbox ، تمام لایه‌های اضافه شده با "Med -" را انتخاب کنید.
  • در پنل Inspector، Fill را با Opacity 60% روی FFFFFF قرار دهید .

fc76fa49b5c0941b.png

8. رنگ اجزا را تنظیم کنید

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

نوار برنامه پایین

برای نوار برنامه پایینی Reply، که بالاتر از بقیه رابط کاربری صندوق ورودی است، یک پوشش ظریف اعمال می‌کنیم.

  • گروهی به نام Bottom app bar را در لیست لایه ها پیدا کنید و آن را گسترش دهید تا بتوانید لایه های تشکیل دهنده آن را ببینید.
  • لایه ای به نام Surface را در داخل آن گروه پیدا کنید و مقدار Fill آن را 121212 قرار دهید.
  • لایه بالای آن به نام Surface overlay را پیدا کنید و به آن مقدار Fill FFFFFF با کدورت 12% بدهید.

دکمه اکشن شناور

سپس یک رنگ جدید به FAB اعمال می کنیم. برای انجام این کار، به پالت های تونال که قبلاً نگاه کردیم برگردید و مقدار 700 رنگ ثانویه Reply را بگیرید.

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

  • گروهی به نام FAB را در لیست لایه ها پیدا کنید و آن را گسترش دهید تا اجزای تشکیل دهنده آن را ببینید.
  • لایه Surface را پیدا کنید و آن را انتخاب کنید. Fill آن را روی FCC13B تنظیم کنید.

کارت های انتخاب شده

ممکن است متوجه شوید که همان رنگ زرد نارنجی تاثیرگذار در گوشه کارت‌های ایمیل انتخابی در صندوق ورودی Reply نیز ظاهر می‌شود. این یکی دیگر از لحظات با مارک قوی است، اما کاملاً در اجزاء، سطوح یا متن قرار نمی گیرد.

برای موقعیت‌هایی مانند این، بهتر است از رنگ نوع ثانویه خود (در این مورد #FFFBE6) شروع کنید و به عقب کار کنید تا چیزی را پیدا کنید که به‌طور مناسب بیانگر باشد، بدون اینکه باعث حواس‌پرتی برای زیبایی‌شناسی عملکردی Reply شود. برای پاسخ، می‌توانیم به نوع ثانویه معمولی خود پایبند باشیم.

  • لایه ای به نام Earmark را انتخاب کرده و Fill آن را روی FFF5A0 قرار دهید.

88582cbf7d99949c.png

9. حتی فراتر بروید: سطوح سفارشی

همانطور که قبلاً یاد گرفتیم، دکمه اکشن شناور (یا FAB) در Reply یک مؤلفه بسیار تأکید شده است که همچنین نشان دهنده یک لحظه با مارک قوی در برنامه است. به همین دلیل، ممکن است تصمیم بگیریم که بیان رنگ آن را در تم تیره Reply با استفاده از رنگ ثانویه اصلی Reply حفظ کنیم.

  • گروهی به نام FAB را در لیست لایه ها پیدا کنید و آن را گسترش دهید تا اجزای تشکیل دهنده آن را ببینید.
  • لایه Surface را پیدا کنید و آن را انتخاب کنید. فیل آن را دوباره به F9AA33 تنظیم کنید.

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

  • گروهی به نام Bottom app bar را در لیست لایه ها پیدا کنید و آن را گسترش دهید تا بتوانید لایه های تشکیل دهنده آن را ببینید.
  • لایه ای به نام Surface overlay را پیدا کنید و به آن مقدار Fill جدید 344955 با کدورت 48% بدهید. این به آن رنگ برند قوی تری می دهد و در عین حال کنتراست کافی را حفظ می کند.
  • لایه هایی به نام Email card overlay را در لیست لایه ها پیدا کنید و همه آنها را انتخاب کنید.
  • Fill آنها را روی ADC0CB با کدورت 4% تنظیم کنید.

a1ea3f40f1ef3114.png

10. جمع بندی

dba5acf2b6e59912.png

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

مراحل این آزمایشگاه طراحی را چارچوبی برای درک و تعریف تم تاریک محصول خود در نظر بگیرید و همیشه ویژگی ها و اهداف برند و محصول خود را در قلب خود نگه دارید.

برای راهنمایی بیشتر برای تم تیره، به مشخصات طراحی مواد برای تم های تیره نگاهی بیندازید.

اگر سؤالی دارید، در هر زمان با استفاده از @MaterialDesign در توییتر از ما بپرسید.

برای مطالب بیشتر و آموزش های طراحی در کانال Google Design YouTube همراه باشید.