متریال دیزاین یکی از سیستم‌های محبوب برای طراحی بصری است که توسط شرکت گوگل توسعه داده شده است. هدف این سیستم طراحی دادن قابلیت کافی به توسعه‌دهندگان برای ایجاد یک رابط کاربری یکسان روی پلتفرم‌های مختلف است. اپلیکیشن‌هایی که از قواعد متریال دیزاین پیروی می‌کنند ظاهری زیبا داشته و به خوبی روی سیستم‌عامل‌ها و دستگاه‌های مختلف کار می‌کنند. در سیستم طراحی متریال می‌توان گزینه‌های مختلفی را برای طراحی مشاهده کرد که شامل کامپوننت‌های مختلف، سیستم رنگ‌بندی، آیکون و… می‌شود.
با این حال این موارد المان‌های پایه هستند. از آنجایی که سیستم طراحی متریال به صورت متن باز منتشر شده است، توسعه‌دهندگان مختلف نیز براساس خواسته‌های‌شان از این سیستم استفاده کرده و موارد جدیدی را بوجود آورده‌اند. در این مطلب ما ۷ مورد از بهترین کتابخانه‌های رابط کاربری که براساس قواعد متریال دیزاین ساخته شده‌اند را به شما معرفی خواهیم کرد.
قواعد طراحی متریال
قبل از آنکه کتابخانه‌ها را به شما معرفی کنیم بیایید با یکسری از قواعد اصلی طراحی متریال آشنا شویم:
- پالت‌های رنگی متریال به صورت کلی از یک رنگ اصلی و یک رنگ ثانوی استفاده می‌کند.
- رنگ‌ها در طراحی متریال وضعیت کامپوننت و ارتباط آن با یکدیگر را بیان می‌کند.
- متن و آیکون‌ها باید استانداردهای خوانایی را دنبال کنند.
- تمام تحرکات و انیمیشن‌ها در طراحی متریال باید یک هدف و معنی داشته باشند.
- کامپوننت‌ها باید قابلیت استفاده‌پذیری مجدد داشته باشند.
- آیکون‌ها باید از طراحی تمیز و ساده‌ای برخوردار باشند.
- و… .
گوگل از طریق تحقیقات بسیار زیاد به سیستم طراحی متریال دست پیدا کرده و به همین دلیل یادگیری کامل آن ممکن است برای شما کمی زمان‌بر باشد. به همین دلیل بجای یادگیری صفر تا صد آن می‌توانید از کتابخانه‌های موجود استفاده کنید. در ادامه این مطلب در ارتباط با این دسته از کتابخانه‌ها صحبت خواهیم کرد.
1. MATERIALIZE
Materialize یک فریمورک CSS برای طراحی رابط کاربری اپلیکیشن‌های مبتنی بر وب است که از قواعد طراحی متریال پیروی می‌کند. در این کتابخانه می‌توانید کامپوننت‌های مختلفی را مشاهده کنید. در این بین می‌توان به دکمه، منوبار، کارد‌های مختلف و… اشاره کرد. جدای از این المان‌ها Materialize کامپوننت‌های مبتنی بر موبایل را نیز ارائه می‌کند. در این بین می‌توان به منوهای drag-out و هشدارهای مبتنی بر موبایل اشاره کرد.
تمام کامپوننت‌های Materialize همراه با نمونه کدهایی ارائه شده که برای استفاده از آن‌ها تنها کافی‌ست به صفحات وب اضافه شوند. در کنار المان‌های HTML/CSS این فریمورک به شما قابلیت دسترسی به تعداد زیادی از المان‌های آماده جاوااسکریپت با قابلیت سفارشی‌سازی را می‌دهد. افکت‌های پارالکس، مدال‌ها، carousel و… از جمله این المان‌ها هستند. در کنار این موارد یکسری پوسته آماده نیز وجود دارد که خود تیم Materialize آن‌ها را توسعه داده‌اند می‌توانید از آن‌ها نیز استفاده کنید.
2. MATERIAL DESIGN FOR BOOTSTRAP
Material Design for Bootstrap یک کتابخانه منعطف رابط کاربری است که به شما اجازه می‌دهد تا وبسایت‌های واکنشگرایی را براساس المان‌های طراحی متریال ایجاد کنید. البته این ابزار در اصل برای کار با فریمورک بوت‌استرپ ۴ ایجاد شده است. در پیکربندی پیشفرض این کتابخانه، برای تعاملی کردن صفحات از جی‌کوئری استفاده می‌شود با این حال گزینه‌هایی برای استفاده از فریمورک‌هایی مانند انگولار، ری‌اکت و ویوجی‌اس نیز وجود دارد.
این کتابخانه را می‌توانید در دو نسخه رایگان و پولی دریافت کنید. در حال حاضر می‌توانید بیشتر از ۴۰۰ آلمان رابط کاربری را در این فریمورک پیدا کرده و همچنین از ۶۰۰ آیکون مختلف استفاده نمایید. این موارد در نسخه رایگان آن موجود است با این حال در نسخه حرفه‌ای آن می‌توانید به کامپوننت‌های بسیار بیشتری دسترسی داشته باشید.
۳. Material UI ) React )
Material UI یک کتابخانه رابط کاربری محبوب برای فریمورک ری‌اکت است. اگر قصد ایجاد یک اپلیکیشن مبتنی بر ری‌اکت با ظاهر متریال را دارید می‌توانید از این کتابخانه استفاده کنید. تمام کامپوننت‌های موجود در این فریمورک به صورت کامل پیکربندی شده‌اند بنابراین نیازی به انجام تنظیمات دیگر روی پروژه ندارید. این کتابخانه شامل کامپوننت‌های برای لایه‌بندی، منوبار و… است.
در کنار کامپوننت‌های مختلف از پیش طراحی شده، Material UI به شما قابلیت استفاده از یکسری Component API را نیز می‌دهد. می‌توانید از طریق این موارد کامپوننت ها را سفارشی‌سازی کنید. برای استفاده از قابلیت‌های این کتابخانه کافی‌ست به وبسایت رسمی آن مراجعه کرده و قطعه کدهای مربوط به هر المان را در پروژه خود بکار ببرید.
۴. VUE MATERIAL
Vue Material یک کتابخانه رابط کاربری متریال برای فریمورک ویوجی‌اس است. تمام کامپوننت‌های موجود در این فریمورک درست براساس قواعد متریال دیزاین طراحی شده‌اند. در این کتابخانه می‌توانید المان‌های مختلف رابط کاربری را مانند دکمه‌ها، کاردها، فرم‌ها و… را مشاهده کنید. کتابخانه Vue Material به خوبی مستندسازی شده است، از این رو کار با بسیار ساده خواهد بود. هر کامپوننت این کتابخانه همراه با مثال‌هایی ارائه می‌شود که به سادگی می‌توانید از آن‌ها استفاده کنید.
5. ANGULAR MATERIAL
اگر دنبال یک کتابخانه رابط کاربری مناسب برای اپلیکیشن‌های ساخته شده با انگولار هستید من به شما Angular Material را پیشنهاد می‌کنم. از طریق این ابزار می‌توانید المان‌های طراحی شده با الگوی متریال را به اپلیکیشن خود بیاورید. این کتابخانه در کنار کامپوننت‌های مختلف ابزار CDK یا Component Development Kit را نیز عرضه می‌کند که برای تسریع در فرایند کار با کامپوننت‌های رابط کاربری استفاده می‌شود.
با استفاده از Angular Material به سرعت می‌توانید رابط کاربری مورد نظرتان را ایجاد کرده و از آن استفاده نمایید. در مستندات مربوط به این کتابخانه تمام موارد مورد نیاز شما برای طراحی رابط کاربری به سبک متریال به خوبی تشریح داده شده است.
6. MUI CSS
MUI CSS یک کتابخانه رابط کاربری سبک است که براساس قواعد متریال دیزاین ساخته شده است. برای کار با این کتابخانه تنها کافی‌ست تا یک فایل 6.6 کیلوبایتی CSS و یک فایل 5.4 کیلوبایتی JS را به صفحه HTML اضافه کنید. از آنجایی که این کتابخانه هیچ نیازمندی دیگری ندارد پیاده‌سازی آن بسیار ساده است.
در کنار کامپوننت‌هایی که براساس CSS و JS نوشته شده‌اند، المان‌های رابط کاربری نیز وجود دارد که برای اپلیکیشن‌های ری‌اکت و Angular مناسب است. در این کتابخانه می‌توانید از کامپوننت‌های آماده مختلفی نیز استفاده کنید.
7. MATERIAL COMPONENTS FOR THE WEB
Material Components for the Web یک پیاده‌سازی موفق از Material Design Lite است که هر دوی این موارد توسط تیم Google in-house توسعه داده شده است. از طریق این کتابخانه شما قادر خواهید بود تا المان‌های طراحی شده با استفاده از قواعد متریال را در اپلیکیشن‌های Android/IOS/Flutter و Web به کار ببرید.
در بخش وب این ابزار می‌توانید کامپوننت‌های مختلف رابط کاربری را مشاهده کنید. هر کدام از کامپوننت‌ها را می‌توان به صورت جداگانه از طریق npm نیز نصب کرد.
در پایان
طراحی متریال می‌تواند ظاهر حرفه‌ای و زیبایی را به وب/موبایل اپلیکیشن‌های شما بدهد. اگر قصد ایجاد یک اپلیکیشن برای پلتفرم‌های مختلف را نیز دارید استفاده از طراحی متریال بهترین راه‌حل شما خواهد بود.
ایجاد یک رابط کاربری مناسب و زیبا کار چالش برانگیزی است. اما با استفاده از بهترین قواعدی که متریال دیزاین در اختیار ما قرار می‌دهد این کار چندان سخت نخواهد بود.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید