متریال دیزاین چیست؟

طراحی سایت متریال یک زبان طراحی مبتنی بر اندروید است که توسط Google ایجاد شده است.

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

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

طراحی متریال به عنوان زاییده فکر گوگل در اواسط سال 2014 با اسم رمز "کاغذ کوانتومی" و نمایانگر رویکرد جدید "جوهر و قلم" ظاهر شد.

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

طراحان طراحی متریال قوانین اساسی و طبیعی را از دنیای فیزیکی، عمدتاً در مورد نور و حرکت اعمال می کنند.

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

مفهوم "کارت" متریال دیزاین به عنوان سیستمی برای لایه بندی عناصر و انیمیشن ها عمل می کند.

همچنین امکان تجربه شخصی تر را فراهم می کند (مثلاً نشان دادن دنبال کنندگان در توییتر).

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

سفارش طراحی سایت

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

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

    - ماتیاس دوارته، معاون طراحی متریال در گوگل

 

اهداف طراحی سایت متریال

هدف طراحی متریال، ادغام بهتر اصول اساسی طراحی با تکنولوژی است.

طراحی متریال دارای سه اصل اساسی است:

 

1. متریال استعاره است

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

این بدان معناست که دکمه های روی صفحه باید مانند دکمه های واقعی به نظر برسند، عناصر باید دارای سایه باشند و «اصول نور، سطح و حرکت» باید رعایت شود.

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

به عنوان مثال، یک تبلیغ پاپ آپ - باید یک سایه ظریف داشته باشد، زیرا همه اشیاء سه بعدی دارای سایه هستند.

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

از طراحی تطبیقی ​​استفاده کنید - از طریق انتخاب نسخه تطبیقی، اطمینان حاصل کنید که سلسله مراتب، رنگ ها، نمادها و نسبت های فضایی در همه دستگاه ها سازگار هستند.

 

2. پررنگ، گرافیکی و برجسته

پررنگ، گرافیکی و برجسته

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

دیگر خبری از رنگ های شسته و رفته مانند بژ نیست.

جسور باشید! از سرخابی استفاده کنید!

نکته مهم در اینجا این است که طراحی متریال به دنبال هدایت طرح هایی است که منطقی هستند، دنبال کردن آنها آسان است (مانند رنگ های برجسته، سرفصل ها) و تجربه ای واضح و بدون درهم ریختگی ایجاد می کند (مثلاً با فضای منفی).

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

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

 

3. حرکت و ایجاد معنا

از حرکت می توان برای کمک به حرکت کاربر و ایجاد معنا استفاده کرد، به ویژه حرکت در ارائه بازخورد به کاربر مفید است.

به عنوان مثال، در اندروید، وقتی نمادی را نگه می دارید، کمی بیرون می آید تا به شما بگوید که آماده انتقال است. این حرکت کوچک یک راه عالی برای برقراری ارتباط با کاربر است.

هدف طراحی متریال این است.

با نشان دادن تغییراتی که مستقیماً از اقدامات آنها ناشی می شود، کنترل را در اختیار کاربران قرار دهید.

انیمیشن ها را در یک محیط یا مرحله واحد، در حرکات جریانی مداوم اجرا کنید.

اطمینان حاصل کنید که پاسخ ها واضح، اما ظریف هستند: بدون حرکات تند و غیرقابل پیش بینی.

ترکیب انتخاب های طراحی جسورانه با ظرافت در مورد واکنش های طبیعی آنها به ورودی کاربر بسیار مهم است.

به عنوان مثال، اگر کاربر یک مورد انتخاب شده را در گروهی از اشیاء بیاندازد، دومی باید کنار رفته و آن را در خود جای دهد.

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

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

اسکرول بی نهایت یوتیوب نمونه ای از این موضوع است.

 

اهمیت طراحی سایت متریال دیزاین

اهمیت طراحی سایت متریال دیزاین

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

 

اول، طراحی متریال در زمینه طراحی فلت مهم است.

ما سال ها در مورد طراحی فلت یا عناصر آن صحبت می کنیم.

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

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

 

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

دستورالعمل های طراحی متریال، همه اشیاء را در یک ماتریس سه بعدی به جای دوبعدی روی صفحه نمایش قرار می دهند.

یعنی در دنیای طراحی متریال، اشیا (مثلاً یک جعبه متن) در واقع فضا را اشغال می کنند.

این رویکرد منحصر به فرد آن را برای کاربران بسیار شهودی می کند و همچنین درک آن را به عنوان یک طراح آسان می کند.

 

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

هنگامی که طراحی متریال برای اولین بار در نوامبر 2014 اعلام شد، ما هنوز به طور قطعی به سه اندازه صفحه نمایش - موبایل، تبلت و دسکتاپ فکر می کردیم.

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

 

چرا از طراحی متریال استفاده کنیم؟

چرا متریال دیزاین

دستورالعمل های طراحی متریال گوگل به امضای وب سایت ها و برنامه های آن ها تبدیل شده است.

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

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

به عنوان مثال، Simplenote از زیبایی طراحی متریال در برنامه های خود برای پلتفرم های دسکتاپ و موبایل استفاده می کند.

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

مانند اکثر سیستم های طراحی، طراحی متریال برای ارائه یک تجربه کاربری واحد در دستگاه ها، پلتفرم ها و روش های ورودی مختلف ایجاد شد.

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

 

مشخصات طراحی متریال

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

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

طراحان را قادر می سازد تا طرح های عمدی با سلسله مراتب، معنا و تمرکز در نتیجه نهایی خود ایجاد کنند.

 

مزایای طراحی سایت متریال دیزاین

مزایای متریال دیزاین

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

 

طراحی متریال به جای مجموعه ای از دستورالعمل های سبک، عملاً یک اکوسیستم طراحی کامل است.

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

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

این می تواند برای طراحانی که خواهان چنین ساختاری هستند بسیار راحت باشد.

Google Material Design را حفظ می کند و اسناد گسترده ای را برای نحوه استفاده و پیاده سازی آن نگه می دارد.

این نوع پشتیبانی و مستندات می تواند برای بسیاری از سیستم های طراحی مدرن وجود نداشته باشد.

با وجود این همه جامعیت و مستندات، متریال دیزاین یک کتابخانه طراحی نسبتاً منعطف باقی مانده است.

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

 

مزایای  بیشتر برای طراحی متریال شامل مواردی مانند اسکئومورفیسم ظریف است که آن را از طراحی فلت متمایز می کند و آن را برای بسیاری از کاربران بصری تر می کند.

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

این یک حس بسیار ساده از فیزیک نیز دارد، که تعاملات را بصری تر می کند.

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

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

در نهایت، گزینه های تم تیره در دسترس قرار گرفته اند که انعطاف پذیری بصری بیشتری را برای طراحان ایجاد می کند.

در اصل، متریال دیزاین بسیار سبک و روشن بود که با زیبایی شناسی برخی برندها به خوبی کار نمی کرد.

افزودن دستورالعمل تم تیره این مشکل را برطرف می کند.

 

معایب طراحی سایت متریال

معایب متریال دیزاین

در حالی که طراحی متریال دارای مزایای بسیار واضحی است، این بدان معنا نیست که استفاده از آن دارای معایبی نیست.

اول از همه، طراحی متریال بلافاصله قابل شناسایی است و به شدت با گوگل و به طور خاص اندروید مرتبط است.

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

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

بله، طراحان می توانند لوگوها، پالت های رنگی (در چارچوب دستورالعمل های طراحی متریال) و سایر عوامل متمایزکننده را برای حمایت از هویت برند ترکیب کنند.

اما محصولی که از مشخصات طراحی متریال پیروی می کند تقریباً همیشه با Google مرتبط می شود.

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

مردم ویژگی های حرکتی طراحی متریال را با ویژگی های بصری مرتبط می دانند، که می تواند طرح ها را بدون حرکت باقی بگذارد.

مطمئناً، یک راه حل این است که همیشه حرکت را در طرح هایی که از مشخصات طراحی متریال پیروی می کنند استفاده کنید.

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

این یک اقدام متعادل است که طراحان باید هنگام کار در چارچوب دستورالعمل های طراحی متریال در نظر بگیرند.

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

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

 

اجزای طراحی متریال گوگل

اجزا متریال دیزاین

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

همچنین می تواند نوآوری را خفه کند، زیرا تقریباً هر چالش طراحی برای آن برنامه ریزی شده و راه حل هایی ارائه شده است.

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

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

یکی از بزرگترین مشکلات ناوبری به اصطلاح "گوشت اسرارآمیز" است که در بسیاری از برنامه های طراحی تلفن همراه با آن مواجه می شود.

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

تشخیص دایره برای نشان دادن "Home" به طور قابل توجهی سخت تر از نماد خانه است که قبلا در بیشتر رابط های Android استفاده می شد.

این نمونه بارز قرار دادن فرم بر روی تابع است، که از ریشه های طراحی Material Design است.

و این فقط در نوار ناوبری پایینی نیست.

ترجیح متریال دیزاین برای شامل کردن دکمه های اکشن شناور دایره ای نیز یک مسئله قابلیت استفاده است.

این دکمه های دایره ای فقط شامل فضایی برای یک نماد هستند، بدون متن کمکی.

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

 

جمع بندی

اگر برنامه ای عمدتاً برای پلتفرم اندروید ساخته می شود، استفاده از طراحی متریال انتخاب آسانی است.

به دلیل پذیرش گسترده گوگل، هر اپلیکیشنی که بر اساس اصول طراحی متریال باشد شبیه یک اپلیکیشن بومی به نظر می رسد.

با این اوصاف، موارد استفاده زیادی خارج از پلتفرم اندروید وجود دارد که طراحی متریال یک انتخاب محکم است.

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

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

طراحی متریال Google در بهبود تجربیات کاربر بسیار موفق بوده است.

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