امروزه طراحان سعی می‌کنند, طراحی برنامه ها را به صورت Material Design پیاده سازی کنند. در این مقاله قصد داریم تا استاندارد های ذکر شده توسط مرجع اصلی آن را بررسی کنیم.

بر اساس تعریف, Material Design یک زبان visual برای طراحان است. در اینجا زبان به معنای یک پارچگی تعاریف و قوانین استفاده از آن است و به منظور زبان برنامه نویسی نیست. این زبان استاندارد, برای طراحانی است که می‌خواهند قوانین پیاده سازی در طراحی های قدیمی را با خلاقیت و ابزار و تکنولوژی های جدید ادغام کنند. پس تعریف یک ساختار منسجم بر اساس تجربیات طراحان با تجربه, می‌تواند ظاهر زیبایی را برای برنامه ها به همراه داشته باشد.

محیط

به فضای سه بعدی طراحی اطلاق می‌شود. این فضا نور, سایه و شکل ها را شامل می‌شود. نکته اول در طراحی این است که همیشه محیط های ما با ارتفاع ۱dp هستند. همانطور که در تصویر زیر مشاهده می‌کنید, شکل سمت راست یک طراحی با ارتفاع بیش از ۱dp است که استاندارد نیست.

همچنین باید توجه داشته باشید که طراحی ها شکل ها به صورت solid است. در اینجا منظور از solid بودن این است که شکل ها نمی‌توانند از درون یکدیگر عبور کنند. بلکه می‌توانند در کنار هم قرار گیرند و تشکیل یک شکل واحد را بدهند. برای مثال دو مستطیل طویل می‌توانند از سمت طول به یکدیگر متصل شوند و یک مربع را تشکیل دهند. و همچنین عکس این قضیه نیز صادق است. یعنی یک شکل می‌تواند به چند جزء تقسیم شود و این چند جزء می‌توانند بعد از جابجایی چینش, باز هم به یکدیگر متصل شوند. همچنین شکل هایی که Solid هستند, سایه اجزاء درونشان, بر روی سطح زیرین نمی‌افتد. شکل سمت راست در تصویر زیر نمونه یک طراحی نادرست است که سایه اجزا درون شکل, بر لایه زیرین آن افتاده است.

همانطور که در شکل فوق می‌بینید اگر دو شکل بر روی هم قرار گیرند, باید با سایه از یکدگیر متمایز شوند.

حرکات و جابجایی

Material Design یک سبک طراحی زنده است. پس حرکات و جابجایی ها در برنامه باید به طوری باشد که کاربر این موضوع را در زمان کار با برنامه احساس کند. در واقع در این طراحی سعی می‌شود تا شکل ها همانطور که در دنیای واقعی ما هستند, نمایش داده شوند. موجودیت ها در دنیای واقعی Responsive, واقعی هستند و جابجایی آنها با هدف‌ است. کابر استفاده کننده باید از برنامه طراحی شده توسط شما انرژی بگیرد. وقتی یک action رخ می‌دهد, نتیجه آن باید بدون هیچ وقفه ای نمایش داده شود. در اینجا این چالش پیش می‌آید که گاهی فرآیند هایی نیاز به زمان هایی برای پردازش دارند. پس, مدتی به عنوان زمان انتظار باید وجود داشته باشد. اما زمان مد نظر در طراحی, فارغ از زمان پردازش است. در اینجا منظور این است که وقتی یک action رخ داد, کاربر یک انتظار خسته کننده را تحمل نکند. وقتی روی یک Button کلیک می‌شود و در زمان پردازش صفحه بدون تغییر می‌ماند, کاربر یک تصویر ثابت را برای چند ثانیه مشاهده می‌کند. بنابراین بهتر است صفحه انتظار و یا طراحی های جذابی برای زمان های پردازش طراحی کنید. زیرا انتظار زیاد کاربر, باعث نارضایتی می‌شود.

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

رنگ ها

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

مرجع رنگ ها برای Material Design را می‌توانید در اینجا مشاهده کنید. رنگ هایی که طیف ۵۰۰ دارند به عنوان رنگ های primary شناخته می‌شوند. این رنگ ها رنگ های اصلی طراحی ها هستند. در واقع این رنگ, رنگ پایه برنامه است. برای مثال در تصویر زیر, کد رنگ e91e63 (صورتی) به عنوان رنگ primary است

طیف ۷۰۰ به برای status bar و طیف  ۲۰۰ یا ۳۰۰ برای secondary color مناسب هستند. فرض کنید اگر یک لایه در پایین صفحه صورتی رنگ تصویر فوق قرار بگیرد, رنگ آن برابر secondary color است. طیف A200 و A400 هم برای Acent Color مناسب است. Acent Color ها برای عضو هایی در طراحی استفاده می‌شود که نیاز است تضاد مشخصی با رنگ اصلی برنامه داشته باشند. این رنگ ها شاف تر هستند و معمولا برای Action ها مورد استفاده قرار می‌گیرند. در شکل فوق floating button که به رنگ آبی است, مقدار Acent Color را دارد. این رنگ برای Switch , ‌Button , Progress Bar و اجزاء از این دست استفاده می‌شود.

بهتر است پیش از استفاده از رنگ ها, ابتدا مقالات روانشناختی استفاده از رنگ ها را مطالعه کنید. برای مثال رنگ آبی به عنوان رنگی آرامش بخش شناخته می‌شود و کاربر را در مقایسه با باقی رنگ ها کمتر خسته می‌کند. این امر باعث شده است تا عمده نرم افزار های اجتماعی مانند Facebook, Twitter, Telegram و… از رنگ آبی برای طراحی اصلی نرم افزار های خود استفاده کنند.

در این مقاله سعی بر این شد تا مقدمات و مفاهیم پایه ای از طراحی Material Desgin را بررسی کنیم. واضح است که قوانین و اصول طراحی Material design بسیار وسیع تر است و همچنین در مهارت در این شیوه طراحی به تمرین و تجربه طراحان بستگی دارد. اما در این مقاله سعی کردیم نکات پر استفاده در این طراحی را بررسی کنیم.

با ما همراه باشید.