درود بر شما خواننده عزیز و گرامی،
نخست باید عنوان کنم از اینکه وقت گرانبهاتون رو صرف خواندن مطالب اینجانب می کنید، مطالبی که عمدتا گزارش کار شرکت در چالش ۱۰۰ روز کد زدن می باشد، از صمیم قلب سپاسگزارم و امیدوارم توانسته باشم در کنار رسیدن به هدفی که برای خودم تعریف کردم، شما نیز از مطالب بهره کافی رو ببرید.
در سی و پنجمین روز از چالش، به منظور ایجاد ظاهر گرافیکی یکی از پروژه های موبایل (PWA)، رفتم سراغ کامپوننت های رابط کاربری متریال (Material User Interface = Material UI). برای اینکه مفهوم رو بهتر متوجه بشیم باید ابتدا سراغ متریال دیزاین (Material Design) بریم.
متریال دیزاین سبکی جدید در طراحی است که گوگل در یکی از کنفرانس های خبری خود در ماه ژوئن سال ۲۰۱۴ آن را معرفی کرده است.
متریال دیزاین بیش از حد به سیستم گرید و انیمشین‌ها اهمیت می‌دهد و عمق و سایه‌ها برای المان‌های طراحی شده بسیار مهم است. شاید بتوان گفت ورژن بروز شده طراحی تخت (Flat Design) باشد اما خیلی زیباتر با انیمییشن‌ها و Transition های بسیار زیبا و در عین حال پیچیده. خود گوگل ادعا دارد که زبان جدید طراحی آنها، الهام گرفته از مرکب و کاغذ است. یکی از طراحان مشهور جهان به نام Matias Durate میگوید همانگونه که اجسام در دنیای واقعی قابل حس هستند و طول و عرض و ارتفاع دارند در این نوع طراحی دیجیتال هم باید همین حس‌ها را منتقل کرد.
اگر بخواهیم در یک جمله بگوییم متریال دیزاین چیست. می‌توانیم بگویم متریال دیزاین نسخه مکتوب، مستند و علمی طراحی تخت (Flat Design) هست. در ابتدا این نوع طراحی محدود به اپلیکیشن‌های موبایلی بود که برای اندروید فراهم شده‌اند و استفاده از آن در محیط وب کمی نامفهوم بود، ولی متریال دیزاین خیلی سریع جای خود را بین طراحان رابط کاربری وب پیدا کرده و میتوان گفت در حال محبوب شدن است.
اگر بخوام در یک جمله توضیح بدم، متریال UI دقیقا بر پایه استانداردهای متریال دیزاین برای کتابخانه React طراحی شده است. تمام.
در تصویر زیر چند نمونه از این کامپوننت ها رو مشاهده می کنید:
تا درودی دیگر، بدرود.
