متریال دیزاین چیست

طراحی متریال: متریال دیزاین چیست ؟!!

متریال دیزاین چیست؟!

با سلام خدمت شما دوستای عزیز…

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

خب بریم سر تعریف متریال، متریال دیزاین سبکی جدید در طراحیه کاملا استاندارد و نوینه که توسط گوگل ارائه شده. این سبک کمی شبیه به سبک طراحی تخت یا فلت هست اما بعضی از دوستان به اشتباه هر دو رو یکی میدونن که اصلا به این شکل نیست و دو نوع سبک متفاوتن! درسته یکسری از رنگ های استفاده شده در طراحی متریال، رنگ های تخت و فلت هستند اما نوع و ذات سبکشون با هم فرق داره… توی طراحی فلت همونطور که اسمش روشه همه چیز تخته اما توی طراحی متریال اشیا دارای عمق هستند. این عمق رو میشه به صورت فاصله از سطح بیان کرد که با ایجاد سایه هایی با زاویه ۹۰ درجه و سایز حدودا ۱۰ تا ۱۵ این عمق مشخص میشه. طراحی متریال دارای یکسری قوانین هست که باید رعایت بشه تا بشه گفت یک طراحی متریال زیبا انجام شده!

با متریال دیزاین اشیای جدیدی هم معرفی شدن مثل کارت ویو، تولبار، نویگیشن دراور و دکمه شناور یا Floating Action Button که توی اندروید خیلی به چشمتون خورده. اگه بخوام مثال بزنم، دکمه ایجاد کانورسیشن و ایجاد گروه جدید توی مسنجر تلگرام نسخه اندروید میتونه گزینه مناسبی باشه! در حال حاضر گوگل برای طراحی متریال، اندروید رو به صورت تخصصی با ارائه یک ساپورت لایبری پشتیبانی میکنه اما در کنار اندروید، کتابخونه ای شامل سی اس اس و جاوا اسکریپت های آماده (فریم ورک) رو برای طراحان وب با اسم MDL یا Material Design Light عرضه کرده تا بتونن توی بستر وب هم از این نوع سبک استفاده کنن اما چون این فریمورک نسخه اولیش هست دارای مشکلات متعددی هم هست که باعث شده اشخاص دیگه ای فریم ورک های متریال با کیفیت تری عرضه کنن. مثلا شما با اضافه کردن یکسری سی اس اس به فریمورک بوت استرپ میتونید از بعضی ویژگی های متریال دیزاین استفاده کنید. بر اساس تجربه شخصی من تا به امروز یعنی تاریخ ۵/۹/۹۴ بهترین گزینه برای کار با متریال دیزاین در وب استفاده از کتابخانه متریال انگلار جی اس هست. کتابخونه های دیگه ای هم مثل Materialize رو هم تست کردم اما هر کدوم مشکل های زیادی داشتن برای مثال همین کتابخونه متریالایز به صورت خیلی ضــــــایع (?) بخش مربوط به واکنشگرا بود یا همون ریسپانسیوش مشکل داره!!! توی حالت تست مرورگر همه چیز درسته اما وقتی با یه دیوایس موبایل واقعی سایت رو باز میکنید میبینید اصلا ریسپانسیو نیست! پس تا به الان بهترین گزینه Angular Material هست.

یکی دیگه از ویژگی های متریال دیزاین که اون رو جذاب و کاربر پسند کرده انیمیشن ها یا به اصطلاح Transition های خیلی باحالشه! 🙂 اگه بخوام یه مثال خیلی ملموس براتون بزنم میتونید اندروید نسخه ۵ یا همون آبنبات چوبی رو روی گوشی های نکسوس تست کنید. نحوه باز شدن منو، دیالوگ ها، انیمیشن دکمه ها و خیلی چیزای دیگه نظرتون رو به خودش جلب میکنه.

یه ویژگی دیگه ای هم که گوگل تحت عنوان متریال عرضه کرده، پک کامل آیکن های “متریال آیکنز” هست که خوشبختانه هم توی وب هم اندروید و حتی آی او اس ساپورت میشه. با استفاده از این پک شما میتونید به مجموعه عظیمی از آیکن ها با حجم بسیار کم دسترسی داشته باشید. نمونه مشابهش توی وب و اندروید کتابخونه Font Awesome هست که با ارائه یکسری Sass,Less میتونید ازتگ ها به عنوان آیکن استفاده کنید. برای استفاده از این ویژگی تنها کاری که لازمه انجام بدید اینه که توی بخش کد نویسی پروژتون تگ مربوط به آیکن رو بنویسید و مشخصه نامش رو برابر با نام آیکنی که در این مکان مشخص شده قرار بدید. بعد از اجرای پروژتون میتونید ببینید که بجای تگ ها، آیکن ها قرار گرفتن…

اگه بخوام یه اپلیکیشن موبایل اندرویدی که از متریال دیزاین استفاده میکنه رو تشریح کنم اجزای داخلش به طور معمول مثل زیر میشه:

Navigation Drawer – منوی کناری

Material Tab – تب های متریال

Toolbar – نوار بالای صفحه که

FAB – دکمه شناور

Card View – میشه گفت یک شئ شبیه به یک کارت

Recycle View – یک لیست شبیه به المنت List View

Material Dialog – پنجره نمایش پیغام متریال

اگه جزو افرادی هستید که از اندروید نسخه ۵ یا Lollipop استفاده میکنید میتونید برنامه Inbox Gmail خودتون رو به آخرین نسخه آپدیت کنید تا بیشتر با این اجزایی که گفتم آشنا بشید و تصویر درستی از متریال دیزاین براتون ایجاد بشه.

اگر هم جز توسعه دهنده های سیستم عامل آی او اس هستید و قصد استفاده از متریال دیزاین رو دارید باید بهتون بگم تا یه حدی استفاده از متریال دیزاین در سوییفت و iOS با استفاده از کتابخانه های خارجی امکان پذیره اما بهتون پیشنهاد میکنم ازش استفاده نکنید چون به نظرم اصلا متریال دیزاین به محیط این سیستم عامل نمیاد و یو آی خوبی نمیشه باهاش ایجاد کرد…

این بود توضیح مختصری از متریال دیزاین و تفاوتش با طراحی فلت. توی پست بعدی ۱۵ اپلیکیشن برتر اندروید که از متریال دیزاین بهره میبرن رو بهتون معرفی میکنم که به صورت کامل با این سبک آشنا بشید.

اگر هنوز از سبک Realism برای طراحی هاتون استفاده میکنید باید آماده تغییراتی باشید! تقریبا دیگه این سبک داره منقرض میشه و همه روی طراحی فلت و متریال متمرکز شدن، اگه قراره یه طراح یو آی و یو ایکس خوب باشید باید به سرعت به این دو سبک مسلط بشید!

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

امیدوارم از این مقاله لذت برده باشید…

بدرود!

عرفان صحاف نژاد – تیم آموزشی پی سی اسکیل

دیدگاه ها: 3
۱۳۹۴/۰۹/۰۵