طراحی متریال چیست؟

طراحی متریال مفهومی است که ابداع آن به گوگل بازمی‌گردد که شامل مجموعه‌ای از راهنمایی‌ها برای طراحان و توسعه‌دهندگان وب (فرانت‌اند) است.
این رویکرد طراحی، دیدگاه‌های تازه‌ای در مورد رابط کاربری، انیمیشن و تعامل با کاربر را معرفی می‌کند.
به عبارتی دیگر متریال دیزاین نسخه مکتوب علمی و پیشرفته فلت دیزاین است (Flat Design) .

معرفی سبک طراحی متریال دیزاین:

به طور کلی، شما می‌توانید طراحی متریال را در دو بخش کلی خلاصه کنید که عبارتند از:

  • عناصر طراحی:
    مواد و عناصر طراحی، زمینهٔ طراحی ما را فراهم می‌کنند.
    به طوری که سطوح و لبه‌های عناصر در طراحی متریال برای ما علائمی دیداری ایجاد می‌کنند.

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

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

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

چهار اصل متریال دیزاین:

  • Metaphor(تشبیه کردن):

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

  • Color(رنگ‌ها):

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

  • Bold (تو پر کردن)، graphic (گرافیک)، intentional (طراحی جذاب):

تصاویر حرکات و انیمیشن ها و تایپوگرافی ها صرفا برای زیبایی کار نیست.
برای ایجاد احساس خوب در کاربران و بازدیدکنندگان وب سایت است و این باعث میشود که کاربران و یا بازدیدکنندگان زمان بیشتری را در وب سایت بگذرانند.
چون احساس خوبی نسبت به آن وب سایت پیدا می کنند.

  • Motion (انیمیشن):

انیمیشن ها و حرکت ها و انتقال ها، حس بسیار جالبی به کاربران میدهند و همینطور قدرت UI را نیز بالا می برند.
البته به شرطی که از آن ها درست و به جا استفاده شود.
تجربه ثابت کرده حرکت ها و انیمیشن های Smooth (نرم) برای کاربران بسیار جذاب تر هستند.

ویژگی‌های متریال دیزاین (Material Design):

  • ریسپانسیو یا واکنش گرا بودن:

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

  • سازگاری با تمام مرورگرها:

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

  • کاهش Bounce Rate:

    زمانی که مخاطب وارد سایت شما شده و با دیدن یک صفحه (لزوما این صفحه، صفحه اصلی نیست و ممکن است صفحه یکی از محصولات یا مقالات شما باشد) از همان صفحه خارج می شود و سایت شما را ترک می‌کند، در اصطلاح می‌گوییم Bounce Rate (نرخ خروج) بالا رفته است.
    افزایش نرخ خروج می‌تواند تاثیرات منفی روی سایت شما بگذارد.
    در واقع بالا رفتن و بالا ماندن بانس ریت زمانی رخ می‌دهد که شما بدون توجه به زیبایی سایت خودتان، فقط کد نویسی کرده‌اید.
    اما اگر بتوانیم با یک سری استاندارد های مشخص مثل استفاده از متریال دیزاین، فضای سایت خود را علاوه بر داشتن محتوای حرفه‌ای، جذاب‌تر کنیم، می‌توانیم لااقل مخاطب خود را راضی نگه داریم که به محض اینکه صفحه‌ای را از سایت ما باز کرد، بلافاصله آن صفحه را ترک نکند.

  • ایجاد واقعیت در فضای مجازی:

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

نتیجه:

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

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *