یکی از پراستفاده‌ترین روندهای طراحی که در حال حاضر استفاده می‌شود، طراحی متریال است. طراحی متریال در حقیقت یک زبان طراحی است که کمک می کند کاربران بتوانند به صورت بسیار سریعی از طراحی متوجه شوند و آن را درک کنند. طراحی متریال نسخه‌های مختلفی از کاردها را نمایش می‌دهد که هرکدام دارای ویژگی‌های منحصربه‌فردی مانند انیمیشن، افکت‌های واکنشگرا و ترانزیشن‌های مختلفی هستند. به زبانی دیگر نمایش اطلاعات در قالب طراحی یکی از مفاهیم اصلی در طراحی متریال است. این طراحی در سال ۲۰۱۴ توسط گوگل پیاده‌سازی شد. در این مطلب قصد داریم راجع به کاردهایی صحبت کنیم که در پیروی از طراحی متریال برای بوت استرپ ساخته شده‌اند. می‌توانیم نمونه‌های مختلفی را در سطح اینترنت مشاهده کنیم.
کاردهای بوت استرپ تلفیقی از چندین المان مختلف است که در نهایت باعث بوجود آمدن یک المان واحد شده‌اند. المان‌هایی مانند افکت‌های شناور، افکت‌های عمیق و سایه‌ها. البته ممکن است شامل دکمه‌هایی نیز باشند که با کلیک روی آن‌ها یک تابع به اجرا درمی‌آید. ممکن است نمایش اطلاعات در قالب چنین کاردهایی کمی سخت باشد اما طراحی متریال این روند را ساده می‌کند و امروزه بسیار استفاده دارد.
کاردهایی با طراحی متریال برای بوت‌استرپ
اگر تا به حال کاردهایی با طراحی متریال مشاهده نکرده‌اید یا اینکه هیچ نظری راجع به آن ندارید، بهتر است در این اوایل کاردهای ساده‌ای که برای نمایش اطلاعات استفاده می‌کنیم را به ذهن‌تان بیاورید. بدنه اصلی در طراحی متریال شامل یک عنوان، بدنه و نمونه هایی از نتیجه گیری است. همچنین در طراحی بدنه آن از یک تصویر برای زیباتر شدن و مفهومی‌تر نمایش دادن آن استفاده می‌کنیم. در نهایت می‌توانیم ببینیم که یک طراحی چقدر می‌تواند جذاب و زیبا باشد. بنابراین قصد داریم راجع به چند مورد از آن‌ها در ادامه بحث توضیحاتی ارائه دهیم.
Bootstrap Cards Component
می‌توانیم در اینجا تعداد مختلفی از کاردهای بوت استرپ را با ویژگی‌های مختلف پیدا کنیم. طراحی یک کارد بوت استرپ معمولا کار ساده‌ای نیست. بنابراین با استفاده از این مورد می‌توانیم کدهای آن را کپی کنیم و مستقیما در وبسایت خود قرار دهیم. می‌توانید دمو و کدهای این پروژه را در این لینک مشاهده کنید.
Bootstrap Material Cards
با استفاده از یک تصویر و لینک‌های متعدد، این کار نه تنها ساده بلکه بسیار زیبا و جذاب نیز به نظر می‌رسد. همانطور که مشاهده می‌کنید تعداد مختلفی از لینک‌ها در این کارد قرار گرفته که می‌توانند با لینک‌های مربوط به شبکه‌های اجتماعی ویرایش شوند. برای مشاهده دمو و کدهای آن می‌توانید این لینک را مشاهده کنید.
Bootstrap Material Design Cards
این مورد نیز یک کارد ساده دیگر است که توسط HTML و CSS طراحی شده است. این موارد بسیار ساده هستند اما در کنار آن برای نمایش المان‌ها به صورتی ساده بسیار موردی زیبا و کاربرپسند هستند. استفاده کردن از تصاویر و متون در این کاردها نمای بسیار زیبایی به اطلاعات نمایش داده شده می‌دهد و این موضوع بسیار مهمی است. برای مشاهده دمو و کدهای آن می‌توانید این لینک را مشاهده کنید.
Image Card
این مورد از طراحی زیبایی برای ارائه محتوا استفاده می‌کند. وقتی روی این کاردها ماوس را قرار میدهید، افکت بسیار زیبایی روی آن‌ها قرار می‌گیرد. وقتی ماوس روی تصاویر قرار می‌گیرد، اطلاعات به صورت متن نمایش داده می‌شود. واقعا یکی از طراحی‌های زیبا و هوشمندانه است. برای مشاهده دمو و کدهای آن می‌توانید این لینک را مشاهده کنید.
Bootstrap Card
این مورد شامل یک طراحی مشابه و سازگار با کلیت وبسایت است. می‌توانیم از لینک‌های مختلفی استفاده کنیم و متدهای متفاوتی نیز برای باز شدن آن‌ها در اختیار داریم. برای مشاهده دمو و کدهای آن می‌توانید این لینک را مشاهده کنید.
Awesome Bootstrap 4 Cards
این مورد شامل یک افکت زیباست که در نمایش تصاویر در قالب کارد استفاده می‌شود. این افکت‌ها می توانند مانند تصاویر محو شدنی یا اسلایدشوها باشند. این نوع از کاردها واکنشگرا هستند و می‌شود از پویایی محتوا در آن استفاده کنیم. برای مشاهده دمو و کدهای آن می‌توانید این لینک را مشاهده کنید.
Beautiful Bootstrap Card Thumbnail
معمولا وقتی چند کارد را در کنار هم و در یک قسمت قرار می‌دهیم آن‌ها به صورت بندانگشتی در می‌آیند و اطلاعات را به صورت‌های مختلفی نمایش می‌دهند، با این حال این مورد به صورتی دیگر طراحی شده و می‌تواند مواردی با قالبی مشابه را در کنار هم قرار دهد. برای مشاهده دمو و کدهای آن می‌توانید این لینک را مشاهده کنید.
Card
این مورد نیز یکی دیگر از کاردهای بوت استرپ همراه با طراحی متریال است که وضوح و سادگی بسیاری دارد. این مورد از یک تصویر و متنی برای توضیحات تشکیل شده است. می‌توانیم یک دکمه مانند ساده را در زیر این کارد مشاهده کنیم که در صورتی کاردهای دیگری وجود داشت به کاربر اطلاع دهد. بجز این مورد در کل بسیار ساده و زیبا طراحی شده است. برای مشاهده دمو و کدهای آن می‌توانید این لینک را مشاهده کنید.
Bootstrap Material Card
این مورد یکی از ساده‌ترین کاردهایی است که می توانیم در محیط اینترنت پیدا کنیم. این کارد شامل یک عنوان، یک تصویر و یک متن ساده برای توضیحات است. همچنین در زیر آن‌ها لینکی برای صفحه نویسنده نیز قرار گرفته که به نحوی جالب و زیباست. برای مشاهده دمو و کدهای آن می‌توانید این لینک را مشاهده کنید.
در پایان
جدای از آشنایی با موارد بالا، ما می‌توانیم سبک و نوع طراحی متریال را در بوت استرپ برای کاردها مشاهده کنیم. تقریبا تمام آن‌ها در طراحی مشابه همدیگر هستند. آن‌ها تنها در ترکیب المان‌ها و استایل‌دهی متفاوت‌ند. منظور از المان، تعداد و نوع المان‌هایی است که استفاده کرده‌اند.
چیزی که می‌خواهم بگویم این است که می‌توانیم براساس خواسته‌ها و نیازهای‌مان هرکدام از المان‌هایی که نیاز داریم را استفاده کنیم و در طراحی وبسایت خودمان از آن‌ها استفاده کنیم.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید