card هایی با طراحی متریال در بوت‌ استرپ

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 22 فروردین 1397
دسته بندی ها : css

یکی از پراستفاده‌ترین روندهای طراحی که در حال حاضر استفاده می‌شود، طراحی متریال است. طراحی متریال در حقیقت یک زبان طراحی است که کمک می کند کاربران بتوانند به صورت بسیار سریعی از طراحی متوجه شوند و آن را درک کنند. طراحی متریال نسخه‌های مختلفی از کاردها را نمایش می‌دهد که هرکدام دارای ویژگی‌های منحصربه‌فردی مانند انیمیشن، افکت‌های واکنشگرا و ترانزیشن‌های مختلفی هستند. به زبانی دیگر نمایش اطلاعات در قالب طراحی یکی از مفاهیم اصلی در طراحی متریال است. این طراحی در سال ۲۰۱۴ توسط گوگل پیاده‌سازی شد. در این مطلب قصد داریم راجع به کاردهایی صحبت کنیم که در پیروی از طراحی متریال برای بوت استرپ ساخته شده‌اند. می‌توانیم نمونه‌های مختلفی را در سطح اینترنت مشاهده کنیم.

کاردهایی با طراحی متریال در بوت‌استرپ

کاردهای بوت استرپ تلفیقی از چندین المان مختلف است که در نهایت باعث بوجود آمدن یک المان واحد شده‌اند. المان‌هایی مانند افکت‌های شناور، افکت‌های عمیق و سایه‌ها. البته ممکن است شامل دکمه‌هایی نیز باشند که با کلیک روی آن‌ها یک تابع به اجرا درمی‌آید. ممکن است نمایش اطلاعات در قالب چنین کاردهایی کمی سخت باشد اما طراحی متریال این روند را ساده می‌کند و امروزه بسیار استفاده دارد.

کاردهایی با طراحی متریال برای بوت‌استرپ

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

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

کاردهای بوت استرپ

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

در پایان

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

چیزی که می‌خواهم بگویم این است که می‌توانیم براساس خواسته‌ها و نیازهای‌مان هرکدام از المان‌هایی که نیاز داریم را استفاده کنیم و در طراحی وبسایت خودمان از آن‌ها استفاده کنیم.

منبع

مقالات پیشنهادی

11 وبسایت الهام بخش طراحی متریال دیزاین

متریال دیزاین امروزه به یک سیستم طراحی قدرتمند و انعطاف پذیر تبدیل شده است و زمانی که از آن در پروژه های خود استفاده میکنید قطعا لذت خواهید برد . در ز...

30 نمونه wireframe زیبا و آماده برای طراحی وب و تلفن همراه

امروز ما نگاهی به جدیدترین wireframe های که وجود داره میندازیم ، بسته ها یا کتابخانه های که از سال گذشته تا الان ارائه شدن تا روند طراحی صفحات وب و یا...

کلید طراحی یک وبسایت عالی ، تعامل با مشتریست

كد نويسي سايت هاي بزرگ ميتونه بسيار زمان گير باشه به همين خاطر نياز به يك رابطه موفق و مناسبي بين طراح و مشتري هست . نگاهي به نمونه كار هاي خود بياندا...

مهمترین تکنیک هایی که باید در طراحی وبسایت از آنها استفاده کنید

برای افرادی که در زمینه طراحی وب معلوماتی ندارند، درک آخرین تکنولوژی های طراحی وب و گزینه های متعددی که در یک طراحی خوب وجود دارد، سخت است. اما چیزی ک...