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

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

با شنیدن عبارت “طراحی متریال” ، ممکن است تصویر ذهنی یک طراح داخلی در بین انتخاب پارچه ای تغییر کند. به طرز عجیبی این استعاره خیلی از مشخصات طراحی جدید Google دور نیست. در حالی که تفاوتهای زیادی بین دنیای فیزیکی و دیجیتال وجود دارد ، گوگل در تلاش است تا این شکاف را برای یک فرایند طراحی UI قابل اعتمادتر ایجاد کند.
Material Design ( متریال دیزاین ) زبانی طراحی شده برای سیستم عامل جدید Google Android است که در تابستان 2014 اعلام شد. اگرچه این مشخصات در ابتدا بر طراحی اپلیکیشن موبایل مبتنی بر لمس متمرکز است ، اما می توان این ایده ها را در طراحی وب استخراج کرد. در حالی که اسناد آنلاین کاملاً مفصل است ، در برخی از مکان ها گیج کننده است. برای این راهنما می خواهم اطلاعات اساسی تر را برای توضیح هدف از طراحی مواد و چگونگی تأثیر آن بر روند طراحی رابط ارائه دهم.
 

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

گوگل برای زبان طراحی مواد خود مشخصات سخت افزاری آنلاین را جمع کرده است. بسیاری از اصطلاحات طراحی متریال وجود دارد که می توان از آن استفاده کرد اما به طور خلاصه برای اندروید ایجاد شد تا پایه و اساس بهتری برای رابط های کاربر ایجاد کند. طراحی مواد مانند طراح داخلی ما از مواد اولیه متمرکز شده است که سرانجام روی پلی بلاند پارچه و پارچه پنبه مستقر شدند.
اما رابط های دیجیتالی از همان متریال پرده یا پرده ایجاد نمی شوند. طراحی Material Google ، مواد را به عنوان “پارچه” دیجیتال همگن ایجاد شده با پیکسل ها در نظر می گیرد. کاربران می توانند این پارچه را ضربه بزنند ، بکشند ، یا بچسبانند و مطابق تعامل کاربر حرکت می کنند.
رابط های موبایل از اشیاء مواد لایه ای مانند میله های مستطیلی یا دکمه های مدور ایجاد می شوند. محتوا (متن ، تصویر ، فیلم) به طور صاف روی مواد قرار داده شده است.
 

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

سردرگم شدید ؟ امیدوارم که نباشید اما تصاویر دیگری را برای روشن شدن بیان خواهیم کرد. هر قطعه از مواد در دنیای دیجیتال یک موضوع جداگانه در نظر گرفته می شود. بنابراین یک اپلیکیشن با پس زمینه سفید در واقع از یک قطعه کامل از ماده سفید رنگی استفاده می کند. سپس با استفاده از یک قطعه متریال ، یک نوار آبی رنگ در بالای صفحه جمع می شود. بنابراین یک کاربر با قطعات مختلفی ارتباط برقرار می کند که گویی آنها اشیاء فیزیکی واقعی هستند.
طراحی مواد اساساً اهداف و اهداف دستیابی به این تعامل ها را در بر می گیرد. حرکت ، عمق ، اصول نور ، سلسله مراتب محتوا ، اینها فقط چند مورد ذکر شده در اسناد است. از آنجا که این یک مفهوم جدید است ، انتظار می رود با گذشت زمان ، به روزرسانی های بیشتری از Google انجام شود.
نکته مهمی که باید به خاطر داشته باشید این است که طراحی متریال یک زبان است. این فقط یک کیت UI یا مجموعه ای از عناصر رابط نیست ، بلکه یک روش جدید برای صحبت کردن و نگاه کردن به رابط هاست.
 

سطوح مواد

هر شیء با استفاده از پیکسل های مستقل دستگاه یا dp اندازه گیری می شود. این واحد اندازه گیری یک واحد فیزیکی است که با توجه به اندازه صفحه نمایش دستگاه می تواند به اینچ یا میلی متر تبدیل شود. این واحدها به طراحان این امکان را می دهند تا رابط هایی ایجاد کنند که مستقل از وضوح صفحه نمایش خاص باشند.
در طراحی مواد از dps برای اندازه گیری قد ، عرض و عمق مواد استفاده می شود. از آنجا که مواد دیجیتالی “واقعی” تلقی می شوند ، روی یک سیستم مختصات 3 بعدی با محورهای X ، Y و Z قرار دارد. تصویر زیر باید نکته من را روشن کند:
 

متریال دیزاین چیست
این نمودار از صفحه اشیاء مکانی Google در مشخصات Design Material است. لایه بندی اشیاء مادی شبیه به دنیای واقعی حس عمق ایجاد می کند. محتوا ، با این حال ، بر روی مواد مسطح است. این را با چگونگی چسباندن خال کوبی روی پوست یا چگونگی چاپ جوهر تخت بر روی کاغذ مقایسه کنید.
عمق با استفاده از نور ایجاد می شود که سایه ای را بر روی مواد پایین تر در سلسله مراتب قرار می دهد. منبع نور اصلی از صفحه نمایش پایین می آید ، به طوری که با نزدیک شدن اجسام به صفحه ، سایه تیره تری به خود می گیرند. بیشتر المان های طراحی هنوز “صاف” هستند اما از سایه های ظریف استفاده می کنند تا بین عمق مواد تمایز قائل شوند. اگر شما کنجکاو هستید که کمی بیشتر بیاموزید ، نور و سایه موضوعی بزرگ است ، اما از طریق اسناد و مدارک اسکین کنید.

رفتار محتوا

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

متریال دیزاین چیست
این نمودار از صفحه اشیاء مکانی Google در مشخصات Design Material است. لایه بندی اشیاء مادی شبیه به دنیای واقعی حس عمق ایجاد می کند. محتوا ، با این حال ، بر روی مواد مسطح است. این را با چگونگی چسباندن خال کوبی روی پوست یا چگونگی چاپ جوهر تخت بر روی کاغذ مقایسه کنید.
عمق با استفاده از نور ایجاد می شود که سایه ای را بر روی مواد پایین تر در سلسله مراتب قرار می دهد. منبع نور اصلی از صفحه نمایش پایین می آید ، به طوری که با نزدیک شدن اجسام به صفحه ، سایه تیره تری به خود می گیرند. بیشتر المان های طراحی هنوز “صاف” هستند اما از سایه های ظریف استفاده می کنند تا بین عمق مواد تمایز قائل شوند. اگر شما کنجکاو هستید که کمی بیشتر بیاموزید ، نور و سایه موضوعی بزرگ است ، اما از طریق اسناد و مدارک اسکین کنید.
رفتار محتوا
محتوا جذابیت اصلی است که کاربران را ترغیب می کند تا نسخه ای از پروژه فوق العاده شما را بارگیری کنند. برنامه های تلفن همراه با مواد ایجاد می شوند – اما بدون هیچ گونه محتوا ، برنامه ها فقط بلوک مواد خالی رها شده هستند. مردم از برنامه ها برای بررسی وضعیت هوا ، عکس های فوری ، خواندن اخبار و یا ساعات ناگهانی در رسانه های اجتماعی استفاده می کنند. محتوا چیزی است که رفتار تعاملی را به دنبال دارد.
هنگامی که کاربران با محتوا در تعامل هستند ، آنها نیز با مواد در تعامل هستند. ضربه زدن به یک فیلم یا انتخاب متن باید طبیعی باشد. با کشیدن دکمه یا سوئیچ در صفحه باید ضعف روند جهان واقعی را تقلید کنید. رفتار باید بر اساس هدف کاربر احساس شهودی داشته باشد.
طراحی مواد بدیهی است که به سمت تعامل موبایل هدایت می شود اما ایده های مشابهی را می توان به کلیک ماوس گسترش داد. از آنجا که برنامه های صفحه لمسی فیزیکی تر هستند ، نیاز به توجه بیشتر به جزئیات دارند. به اجزای طراحی Material نگاهی بیندازید تا چند نمونه از مطالب ادغام شده با رابط ها را ببینید.
انیمیشن و حرکت
از زمان قفسه های فروشگاه اصلی آیفون در تمام قرنهای قبل ، برنامه های تلفن همراه از حرکت استفاده می کردند. اکنون به نظر می رسد که فناوری نوآوری را به خود جلب کرده است و می توان با منوهای کشویی ، دکمه ها ، ویندوز های معین ، حتی نمادها حرکت ایجاد کرد. این یک مسئله امکان نیست بلکه یک مسئله ضرورت است.
طراحی مواد تمرکز زیادی روی حرکت و انیمیشن می گذارد. این یک مکانیسم پاسخ به تعامل کاربر محسوب می شود که اغلب اوقات می تواند واقعیت را تقلید کند.
هنگامی که هل داده می شود ، برخی از اشیاء سریعتر از سایرین سرخ می شوند. در صورت فشار دادن ، بعضی از اشیاء عمیق تر از بقیه فشرده می شوند. اگر در طول کلاس 10 مشغول خوابیدن بودید ، فیزیک نیوتنی آن را عرق نکنید – بیشتر این مواد عقل سلیم است. Google دارای یک بخش کامل است که به حرکت معتبر اختصاص داده شده است.
متریال دیزاین چیست
مثال بالا از شلیک Dribbble است که توسط احسان رحیمی ساخته شده است. این یک کار خوب است که استفاده مبهم تر از حرکت را نشان می دهد. در زندگی واقعی احتمالاً نمی بینید که یک دکمه در صفحه زنگ جدید گسترش یابد. اما در دنیای دیجیتال منطقی است که با توجه به عملکرد دکمه به معنای ایجاد زنگ جدید است. وقتی فراتر از حرکت اساسی بروید ، می توانید به ایده هایی مانند این فکر کنید تا تجربه کاربر را تا حد زیادی بهبود بخشید.
مواد جادویی گوگل دارای برخی خصوصیات اساسی است که می تواند مانند کشش ، ادغام ، تقسیم و بازسازی انجام دهد. این احتمالاً از همان مواردی است که SpongeBob ساخته شده است به جز اینکه احساساتی نباشد (امیدوارم). همچنین شایان ذکر است که مواد بر اساس تعامل کاربر می توانند بر روی هر محور حرکت کنند.
چیزهای بیشتری در رابطه با خواص مواد وجود دارد اما نکته اصلی این است که مواد مانند یک سطح دیجیتالی که به یک ساختار سلسله مراتبی سفارش داده شده است رفتار می کنند. حرکت برای نشان دادن رابطه بین تعامل کاربر و نحوه آماده سازی مواد توسط خود استفاده می شود.
آیکون های رابط
آخرین موردی که می خواهم آنرا پوشش دهم استفاده از آیکون ها است. روندهای تخت در این زبان طراحی جدید رواج داشته و نمادها هیچ تفاوتی با هم ندارند. هنگام تهیه نمادهای رابط کاربری خود ، بزرگترین چیزی که باید به خاطر داشته باشید قوام است.
لازم به ذکر است که من در مورد آیکون های محصول (که به آن آیکون های برنامه نیز گفته می شود) صحبت نمی کنم. این نمادهایی است که هنگام راه اندازی برنامه در صفحه اصلی پیدا می کنید. بسیاری از برنامه ریزی ها به طراحی آیکون محصول می رود اما در طراحی رابط همیشه نقش ندارد.
نمادهای رابط کاربری به زبان آیکون به عنوان آیکون های سیستم معرفی می شوند. هدف ایجاد آیکون هایی است که فوراً در هر اندازه قابل تشخیص هستند. این به طور معمول به معنای جزئیات بسیار کم و یک رنگ جامد است. گوگل نمونه های خاص خود را به نمایش گذاشته است ، اما من همچنین یک بسته رایگان از آیکون های سیستم Material را که توسط Walmyr Carvalho ایجاد شده است یافتم:
متریال دیزاین چیست
نمادها به صورت PNG منتشر شده اند و در صورت استفاده از Sketch نیز می توانید فایل قابل ویرایش را بارگیری کنید. من احساس می کنم که این نمادها از نظر طراحی متریال تعادل کاملی بین سادگی و جزئیات دارند. آنها به راحتی قابل تشخیص هستند و همه به نظر بسیار پیوسته می رسند.
امیدوارم این پست موضوع مفصل طراحی Material را به مهمترین عناصر تقسیم کند. وقتی متوجه شدید منظور Google از کلمه “material” است ، همه چیز دیگر معنای بیشتری پیدا می کند. اگر می خواهید مهارت های طراحی مواد خود را آزمایش کنید ، نحوه ساخت یک موضوع Material را بررسی کنید. این یک روش عالی برای کثیف شدن دستهای شما بدون ایجاد اشیاء شخصی شما از ابتدا یا خاک است. وایرلس با شاخه های سال گذشته به همین ترتیب است.
در مقایسه با طراحی اپلیکیشن موبایل ، زمینه طراحی وب کاملاً ارتباط پذیر است ، اگرچه دقیقا بازار هدف برای طراحی Material نیست. اما بسیاری از همان اصول در وب اعمال می شود و می توانید برخی از موارد مورد استفاده را در این زمین بازی که به صورت رایگان در Github میزبان است ، آزمایش کنید. با گذشت زمان بیشتر ، انتظار دارم که طراحی متریال در میان طراحان اپلیکیشن با تعداد زیادی آموزش جدید و منابع رایگان به یک موضوع محبوب تبدیل شود.
مطلب مفیدی برای شما بود ؟ پس به اشتراک بگذارید برای دوستانتان

codesrcReza

109 مطلب منتشر شده

درباره این مطلب نظر دهید !