Material Design چیست

Material Design چیست ؟ متریال دیزاین چه کاربردی دارد؟

Material Design چیست ؟ متریال دیزاین چه کاربردی دارد؟ 800 520 کارشناس محتوا1
Material Design چیست ؟ متریال دیزاین چه کاربردی دارد؟Reviewed by علی کربلایی on Mar 11Rating: 3.5Material Design چیست ؟ متریال دیزاین چه کاربردی دارد؟متریال دیزاین یا material design یک زبان طراحی یا طراحی متریال بر پایه نرم افزار اندروید است که اولین بار در سال 2014 توسط گوگل به همگان معرفی شد.

در سال های اخیر ، Google Material Design توانسته به شدت توجه طراحان را در چند سال اخیر به خود جلب کند. Material Design چیست ؟

شاید شما بخواهید بدانید Material Design چیست ! با ما همراه باشید.

هنگامی که عبارت material design یا همان طراحی متریال را می شنویم ممکن است تصویر یک آرشیتکت داخلی به ذهن خطور کند که در حال انتخاب پارچه پرده ای مناسب است.

به طرز عجیبی این تصور خیلی هم از خصوصیات طراحی جدید گوگل ، دور نیست. با در نظر گرفتن تمامی تفاوت های بنیادین میان دنیای واقعی و دیجیتال، گوگل سعی دارد برای ایجاد یک پروسه طراحی رابط کاربری (UI) قابل لمس، میان این دو دنیا پلی ایجاد کند.

متریال دیزاین یا material design یک زبان طراحی یا طراحی متریال بر پایه نرم افزار اندروید است که اولین بار در سال ۲۰۱۴ توسط گوگل به همگان معرفی شد.

اگر چه این مدل از طراحی یا material design اولین بار برای طراحی اپلیکیشن های موبایل صفحه لمسی استفاده می شد.

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

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

material design چیست ؟

حال که توضیحی کوتاه درباره متریال دیزاین به شما گفتیم، شاید برای شما سوال ایجاد شود که چرا باید از متریال دیزاین استفاده کنید؟

در جواب باید به شما بگوییم که material design برپایه جلب نظر بینندگان وب سایت شما، در طراحی سایت عمل می کند.

همچنین در این مدل از طراحی اجزاء اصلی در وب سایت،  نظیر رنگ ها، فضاهای خالی، تایپوگرافی ها و فاصله ها به نحوی شکل گرفته اند که هر چه بیش تر و بهتر بتوانند کاربران و بینندگان را به سمت خود بکشانند.

در واقع material design عمدتا بر روی دیزاین ها و طراحی های فیزیکی متمرکز است.

در طراحی های دیجیتال نمی توان از برخی از متریال های طراحی مانند curtain ها و drape ها استفاده کرد. اما در material design می توان از متریال هایی مانند پیکسل جهت طراحی استفاده کرد، و در واقع هر متریال ترکیبی از پیکسل ها است.

این روش از طراحی به کاربران کمک می کند، تا به محتوای موجود در وب سایت خود ضربه بزنند و آنها را در هر نقطه مکانی از سایت که می خواهند جا به جا کنند. همچنین در اینگونه طراحی اگر برخی از اجزاء وب سایتتان نیاز به کوچک و یا بزرگ شدن داشته باشند، می توانید آن ها را بزرگ یا کوچک کنید.

به عبارت دیگر در اینگونه طراحی، می توانید سایت خود را به گونه ای طراحی کنید که در تمامی دستگاه های هوشمند، سایتتان به یک شیوه به نمایش دربیاید و سایتتان رسیپانسیو باشد.

Material design از frame work های مختلف ایجاد شده است که ما در ادامه برخی از آن ها را به شما معرفی می کنیم:

Material design frame work

۱- Material design lite

۲- materialize

۳- MUI

۴-Polymer

۵- Material UI

Material Design چیست ؟ متریال دیزاین چه کاربردی دارد؟

Material Design چیست ؟ متریال دیزاین چه کاربردی دارد؟

 

Material design چه قواعدی دارد؟

برای اینکه بتوانید درک بهتری از material design داشته باشید و این طراحی برای سایت شما موثر تر باشد، شما باید چند قاعده را رعایت کنید. در ادامه این مقاله ما این قواعد را به صورت موردی به شما معرفی می کنیم:

۱- metaphor و استفاده از آن در طراحی material design

این قابلیت از material design در واقع شبیه سازی دنیای واقعی را در اینترنت برای کاربران به ارمغان می آورد. در واقع کاربران در این مدل طراحی با زدن یک دکمه به آن چیزی که می خواهند دست می یابند. همچنین در این طراحی از سایه روشن هایی استفاده شده است که فضایی واقع گرایانه برای کاربران تداعی می کند.

در material design شما رنگ ها، ستون ها و آیکون ها را به گونه ای طراحی می کنید. که سایت شما در تمامی دستگاه هوشمند، فارغ از نوع سیستم عامل و ورژن سیستم عاملشان به یک شکل به نمایش دربیاید در واقع به این نوع طراحی، طراحی ریسپانسیو، آگاهانه یا سازگار گفته می شود.

metaphor و استفاده از آن در طراحی material design

metaphor و استفاده از آن در طراحی material design

 

۲- قاعده استفاده از حروف یزرگ، گرافیک و استفاده از عناصر چشم نواز

همواره در طراحی material design از حروف بزرگ استفاده می شود. حروف بزرگ می تواند توجه کاربران را به وب سایت شما بیش تر کند واین سبب شود کاربران از وب سایت شما هرچه بیش تر و بهتر لذت ببرند.

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

شما در این مدل از طراحی سایت با استفاده از نشانه ها و تاکید بر روی برخی از آیکون ها، کاربران را ترغیب به زدن دکمه های روی سایتتان می کنید و بر جذابیت های وب سایتتان را می افزایید.

قاعده استفاده از حروف یزرگ، گرافیک و استفاده از عناصر چشم نواز

قاعده استفاده از حروف یزرگ، گرافیک و استفاده از عناصر چشم نواز

 

۳- قابل پیش بینی بودن حرکات

یکی از قاعده های اصلی که در طراحی material design وجود دارد. قابل پیش بینی بود حرکات است. معمولا در این نوع طراحی از حرکت غیرقابل پیشبینی صرف نظر می شود. همچنین در این طراحی کاربران به عکس العمل در برابر وب سایت تشویق می شوند.

قابل پیش بینی بودن حرکات / Material Design چیست

قابل پیش بینی بودن حرکات / Material Design چیست

 

Material design lite چیست؟

در اواسط سال ۲۰۱۵ شرکت گوگل یک frame work جدید با نام material design lite برای طراحان وب سایت ها ایجاد کرد. این frame work از دسته طراحی های UI است.

شرکت گوگل سعی کرده است این فریم ورک از material design را با استفاده از css، javascript و HTML خلق کند. برای همین شما قبل از استفاده از این فریم ورک در وبسایتتان باید css و javascript را بر روی سرور وب سایتتان نصب کنید.

material design lite به صفحه وب سایت شما کمک می کند که جذاب، زیبا و عملکردی به نظر برسد. همچنین وب سایت شما یک وب سایت responsive و سریع باشد. شما با داشتن این frame work می توانید آن را به سادگی نصب کنید و آن را بر روی وب سایت خود قرار دهید. همچنین حجم این frame work بسیار ناچیز است چیزی در حدود ۲۵ کیلوبایت.

اما دقیقا این frame work یا material design lite از چه چیزی تشکیل شده است؟ material design lite درست همانند یک کتابخانه می ماند که از یک سری قاب ها، تم ها و اجزاء یا component  ها تشکیل شده است. همچنین اجزاء این کتابخانه در قالب کد های css،js و html طراحی شده اند.

در واقع اجزاء این کتابخانه به جذابیت و کاربر پسند بودن بیش تر وب سایت شما کمک می کنند.

جالب است که بدانید Material design lite توسط گوگل به صورت رایگان برای تمامی کاربران گوگل قابل دسترس است.

Material design frame work

Material design frame work