پلتفرم متریال دیزاین (Material design) چیست؟

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

گوگل هم برای طراحی سایت و طراحی نرم افزارهای اندرویدی از دوپلتفرم

Material design و Material Design Lite(MDL) بهره میبرد در این مقاله با هر دوی این پلتفرم ها آشنا میشویم.

Material design توسط گوگل عرضه شده و توضیحات کامل استفاده از آن نیز توسط گوگل ارائه گردیده است .

ترجمه و بررسی تمام ویژگی های متریال دیزاین،

در یک مقاله نمی گنجد و ما قصد داریم در این مقاله به بحث در باره متریال دیزاین لایت هم بپردازیم و این امر،

توضیح کامل، کاربرد این دو پلتفرم را ناممکن می کند.

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

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

طراحی تک صفحه ای در متریال دیزاین

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

بیشتر کاربران بر آن شدند که از طراحی تک صفحه ای بهره ببرند.

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

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

کاملا با طراحی تک صفحه ای منافات دارد. اینکه در دعوای بین محتوای حداقلی و جذاب و محتوای حداکثری و مفید کدامیک خواهند برد،

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

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

اگر به این ادعای ما شک دارید به آمار فروش کتاب های مصور در ایالات متحده نگاهی بیندازید و ببینید

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

و منظور ما از مردم به هیچ عنوان محدود به کودکان نمیشود.

Material design چیست

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

بدین ترتیب ما همین فعالیت را کرده و این نصیب نوشته‌علمی ترجمه تارنما https://material.io/guidelines/ می باشد.

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

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

مقدمه گوگل بر متریال دیزاین:

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

زبانی که ترکیبی از اصول کلاسیک با حداکثر امکان نوآوری به علاوه تکنولوژی و علم است .

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

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

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

توسعه و برنامه نویسی، یک سیستم هسته ای بصورت یک پارچه،

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

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

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

اصول زبان متریال دیزاین

معنی و مفهوم متریال دیزاین: تئوری اتحاد یک فضای منطقی و سیستم حرکت است .

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

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

و به این طراحی ها، تکنولوژی حرفه ای و تخیل را اضافه کرده ایم.

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

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

و تلاش کرده ایم که به تمام قواعد فیزیک پایبند باشیم.(توضیح مترجم:

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

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

هنگامیکه گوگل از طراحی برپایه دنیای واقعی سخن میگویند،

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

ساختار اشیاء و عناصر در متریال دیزاین نور، سطح و حرکاتی است

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

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

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

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

(توضیح مترجم : منظور به هیچ وجه اشیاء و حرکت هایی مانند آنچه در کارتون های پیکسار مشاهده می کنیم نیست،

بلکه منظور حرکات بسیار ساده و قابل پیشبینی است .)

برجسته، گرافیکال، جذاب

ساختار عناصر در متریال دیزاین، براساس قابلیت پرینت شدن طراحی شده است،

تایپوگرافی، شبکه ها (ساختارهایی که عناصر بر اساس آن در کنار هم قرار میگیرند.)،

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

عناصر در متریال دیزاین فقط برای لذت بصری طراحی نشده اند.

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

تا کاربران یک تجربه کاربری رضایت بخش از کار با آن داشته باشند.

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

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

حرکات با معنی طراحی شده اند

حرکات به کاربر احترام گذاشته و بصورت تقویت کننده حرکتی که کاربر شروع کرده طراحی شده اند.

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

تمام متحرک سازی ها در یک مکان رخ میدهد

(توضیح مترجم: اشیاء بعد از خروج از صفحه کلیت صفحه را میتوانند جابجا کنند،

مثالا در اندروید شما میتوانید یک ایکون را به صفحه ای دیگر دراگ کنید.

ولی منظور از اینکه تمام افکت ها در یک صفحه رخ میدهد، این است

که مثال هنگام ایجاد افکت بالب در کلیک طولانی در اندروید،

این افکت تنها صفحه جاری را تحت تاثیر قرار میدهد.) بطور کلی حرکات به تجربه کاربری احترام میگذارند

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

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

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

متن بالا مقدمه گوگل بر متریال دیزاین بود و در این مرحله گوگل ده مقاله که هر کدام چندین سرفصل دارند

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

خلاصه ای بر متریال دیزاین

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

با رعایت چهارچوب های مشخصی علاوه بر نواوری و ابداع تجربه کاربری مثبتی نیز ایجاد کند.

Material Design Lite(MDL) چیست؟

درست مانند تعریف Material Design برای تعریف متریال دیزاین لایت،

به سراغ رفنس آن در گوگل رفته ایم و این قسمت از مقاله را از وبسایت https://getmdl.io/ ترجمه کرده ایم.

درست مانند بحث قبلی این مبحث هم در شش فصل و هر فصل در چندین بخش ارائه گردیده

که هر بخش هم چنیدن زیر بخش دارد، بنابراین امکان بحث و بررسی تمام این مبحث در این مقاله نمی گنجد

و ما تنها به معرفی این پلتفرم پرداخته و تلاش می کنیم شما را به استفاده از آن ترغیب کنیم.

Material Design Lite به شما امکان استفاده از ظاهر متریال دیزاین در وب سایت ها و افزودن حس و حال متریال دیزاین

را به سایت ها را میدهد. Material Design Lite برای اجرا در تمام دستگاه های موجود،

بکارگیری جاوا اسکریپت را به حداقل رسانده است .

در Material Design Lite ویژگی های مرورگرهای قدیمی نیز در نظر گرفته شده

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

کامپوننت های MDL توسط CSS، جاوا اسکریپت و HTML طراحی شده اند.

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

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

MDL ویژگی های مدرن وبسایت ها مانند قابلیت نمایش در تمام دستگاه های قابل حمل را دارد.

کتابخانه کامپوننت های MDL در نسخه جدید ابزارهای روتین رابط کاربری مانند دکمه ها،

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

کتابخانه جدید همچنین دارای ابزارهایی مانند کارت هها، ستون بندی ها،

اسلایدر ها، اسپینرز ها، تب ها، تایپوگرافی ها و غیره میباشند.(اسپینرز: همان دوایری هستند که تا زمان لود شدن نمایش داده میشوند.)

MDL بصورت رایگان عرضه شده و برای همگان قابل استفاده است .

میتوان از آن بدون هیچ کتابخانه ای نیز استفاده کرد. MDL را میتوان بدون کیت استارتر و فارغ از نوع سیستم عامل استفاده کرد،

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

برای استفاده از Material Lite باید کتابخانه های CSS و Java script آن را به سایت خود بیافزایید.

پیشنهاد گوگل استفاده از این فایل ها از هاست خود گوگل است

(مترجم: این پیشنهاد بدلیل مشکلاتی در ایران باعث کندی سایت میشود

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