متریال دیزاین چیست؟ هر آنچه باید در مورد طراحی متریال بدانید

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

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

اسکئومورفیسم

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

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

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

طراحی مسطح

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

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

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

طرفداران:

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

معایب:

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

طراحی مواد

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

برای کسانی که نمی‌دانستند، طراحی متریال در گوگل سرچشمه می‌گیرد، و آن‌ها یک طرح کلی صفحه را ایجاد کردند قوانینمواد طراحی این سبک دارای ویژگی‌های بی‌شمار و منحصربه‌فردی است، اما شاید یکی از بهترین ویژگی‌ها استفاده از محور z باشد، اساساً کمی اسکئومورفیسم را به آن اضافه می‌کند که به دو صفحه اجازه می‌دهد تا روی هم شناور شوند.

همچنین استاندارد برنامه های اندروید است. آیا باید در iOS استفاده شود؟ این سوال هنوز یک موضوع داغ برای بحث است، اگرچه برخی می گویند این سبک بهتر است در چارچوبی که در حال حاضر در آن گنجانده شده است رها شود. خب هرکس طبق معمول نظر خودش را در این مورد دارد.

طرفداران:

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

معایب:

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

نتیجه

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

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

انتخاب خود را در نظرات بنویسید، ببینیم چه کسی بیشتر است!

در 25 ژوئن 2014، گوگل چشم انداز جدید خود را برای طراحی رابط در آینده به عموم ارائه کرد - مجموعه کاملی از قوانین و شرایطی که از این پس رابط های همه محصولات شرکت بر اساس آن ساخته می شوند. چرا این همه لازم بود؟ پنج سال پیش، همه محصولات Google با یکدیگر بسیار متفاوت بودند، از جمله نسخه های مختلفیک برنامه در هر دستگاه های مختلف. توسعه دهندگان به فکر ایجاد قوانین خاصی برای ایجاد و یکپارچه سازی همه برنامه ها و سرویس های توسعه یافته بودند که بعداً تحت عنوان ادغام شدند. نام متداول"پروژه کندی". این پروژه بود که بعدها توسعه یافت طراحی مواد (طراحی مواد).

فلسفه مادی

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

یکی از ویژگی‌های طراحی یکپارچه کارت‌های اطلاعاتی بود که می‌توان آن را در هر قسمتی از آن قرار داد منطقه کار. کاوش آنها در برنامه Google Now، توسعه دهندگان این سوال را از خود پرسیدند: "زیر این کارت ها چیست؟". به گفته Matias Duarte معاون طراحی گوگل، این "سوال معصومانه جرقه ای قدرتمند را روشن کرد."

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

پس از تسلط کامل اسکئومورفیسم(تقلید دقیق از اشیاء واقعی دنیای فیزیکی در طراحی) همه به شدت در جهت مخالف حرکت کردند - . این او بود که توسط گوگل به عنوان پایه و اساس در نظر گرفته شد و اختراع " مواد". در عین حال، یک گام کوچک به سمت واقع گرایی برداشته می شود.

کاغذ کوانتومی

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

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

جوهر دیجیتال

اگر "کاغذ کوانتومی" برای انعکاس خصوصیات فیزیکی یک شی در نظر گرفته شده باشد، پس هر چیزی که روی سطح این کاغذ است - رنگ ها، تصاویر، متن، نمادها - با استفاده از "تشکیل می شود. جوهر دیجیتال” - یکی دیگر از شی منحصر به فرد طراحی متریال.

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

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

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

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

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

اهمیت انیمیشن

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

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

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

نتیجه

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

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

لوگو و هویت جدید گوگل ایده های طراحی متریال را ترویج می کند

دستورالعمل‌های دقیق توسعه‌دهنده طراحی متریال را می‌توانید در اینجا پیدا کنید -

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

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

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

پس زمینه ها:

1. 40+ پس زمینه طراحی مواد رایگان

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

2. 10 پس زمینه رایگان

فرصت اضافه کردن مجموعه ای از 10 پس زمینه طراحی متریال با کیفیت بالا را به کتابخانه ابزار خود از دست ندهید. این پس زمینه ها در دو سبک و پنج ترکیب رنگ موجود است 300dpiو 10 .فایل های jpg و همچنین وضوح در 5000x3000 پیکسل. و شما می توانید همه اینها را به صورت رایگان دریافت کنید.

3. 30 پس زمینه پروژه به سبک متریال

انتخاب عالی دیگری از پس زمینه با کیفیت بالا برای پروژه طراحی متریال. از بین 30 طرح مختلف پر از اشکال اضافی مانند مربع، مثلث و دایره انتخاب کنید و به پروژه DIY خود حس خاصی بدهید. به صورت رایگان در دسترس است .pngو .aiفرمت ها

4. 12 پس زمینه تبلیغاتی رایگان در سبک طراحی متریال

آیا چیز جدیدی می خواهید؟ لطفا. 12 جدیدترین مجموعه طراحی متریال را در کیفیت بالا. خبر خوب این است که این مجموعه می تواند برای اهداف شخصی و تجاری استفاده شود. محصولات دارای مجوز هستند Creative Common Zero، و بنابراین تست شده و آماده استفاده است. شکل الماس در مرکز پس زمینه باعث جلب توجه محصول می شود. موجود برای دانلود در .pngو .jpgفرمت ها

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

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

6. بنرهای رایگان

در اینجا مجموعه ای از 5 بنر سبک طراحی متریال با وضوح تصویر وجود دارد 1140x600 پیکسل. برای برجسته کردن سرصفحه ها، تصاویر یا بخش های جداگانه در هر پروژه وب عالی است.

ابزارهای توسعه موبایل

7. جعبه ابزار طراحی رایگان موبایل

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

8. Eacious UI KIT

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

9. DO یک کیت UI برنامه عظیم است. رایگان

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

10. مجموعه ای از عناصر رابط کاربری رایگان برای ایجاد برنامه های موسیقی

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

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

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

نمادها

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

جستجوی خود را برای نمادهای مناسب برای پروژه یا برنامه وب خود با مجموعه Google Material Icons شروع کنید. این مجموعه شامل انواع آیکون ها برای برنامه های مختلف مانند پخش رسانه، ارتباطات، ویرایش محتوا و غیره است. دانلود بایگانی فشرده(~57 مگابایت) و از چیزهای عالی که هر طراح در دسترس نیاز دارد لذت ببرید.

13. مجموعه ای از آیکون های رایگان

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

14. بسته: نمادهای طراحی متریال

در اینجا می‌توانید آیتم‌های رایگان مانند نمادها، پس‌زمینه‌های مضمون یا پالت‌های رنگی را سریع و راحت دانلود کنید. آیکون های موجود در icns، .ico، .pngفرمت ها اشکال و سبک های مختلف آیکون ها برای کارهای معمولی در فرآیند طراحی عالی هستند.

15. نماد طراحی متریال

مجموعه ای از 1000 آیکون که به 20 دسته در 7 رزولوشن تقسیم شده اند چطور؟ نتیجه مجموعه ای از بیش از 7000 فایل است، همه بیهوده. فقط دسته و وضوح مورد نیاز خود را انتخاب کنید، و voila، نماد آماده است. وقت آن است که شروع به بررسی گزینه ها کنیم، چه می گویید؟

چارچوب ها

16. Materialize - چارچوب جلویی پاسخگو بر اساس اصول طراحی متریال

به مجموعه خود یک ابزار جهانی برای نمونه سازی سریع رابط برنامه مطابق با اصول طراحی متریال اضافه کنید. بنابراین، طراحی متن، یک شبکه تطبیقی ​​از 12 ستون، یک ظاهر طراحی عناصر، کارت ها، بلوک ها، عناصر پاپ آپ و غیره در دسترس هستند. فریم ورک را روی پروژه خود تست کنید.

17. چارچوب Material Design Lite

آیا به ابزاری برای تسهیل فرآیند ایجاد وب سایت ها و برنامه های کاربردی بر اساس طراحی متریال نیاز دارید؟ Try Material Design Lite یک چارچوب همه کاره است که به اصول طراحی متریال پایبند است و از آن پشتیبانی می کند مرورگرهای موبایلو به ایجاد طرح های تطبیقی ​​و مینیمالیستی کمک می کند. شامل کنترل های مختلف رابط.

18. چارچوب Material-UI

تجربه ای با React دارید؟ Material-UI یکی دیگر از فریم ورک‌های نسبتاً محبوب است که از مجموعه‌ای از اجزای React تشکیل شده است. گزینه های سفارشی سازی گسترده، پشتیبانی از سبک های تقسیم شده به فایل های فردی، و رعایت دستورالعمل های طراحی متریال.

19. چارچوب LumX

LumX خود را به عنوان یک فریمورک جلویی بر اساس مشخصات AngularJS و اصول طراحی متریال قرار می دهد. علاوه بر این، jQuery، Velocity و Momentum مورد نیاز است. شامل می شود تعداد زیادی ازاجزای AngularJS

20. چارچوب فونداسیون متریال بر اساس اصول طراحی متریال

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

21. MUI - چارچوبی بر اساس دستورالعمل‌های طراحی متریال Google

یک چارچوب نسبتاً آسان برای استفاده که توسعه پروژه های آینده را تا حد زیادی تسهیل می کند. از Angular، React و WebComponents پشتیبانی می کند. چارچوب سبک وزن دارای مجموعه ای اساسی از عناصر برای سرعت بخشیدن به روند توسعه پروژه های کوچک است.

22. چارچوب مواد زاویه ای - مجموعه ای از عناصر رابط کاربری

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

23. طراحی متریال بوت استرپ - مجموعه ای از ابزارها برای طراحی متریال در بوت استرپ

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

مواد پرداخت شده

24.

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

25.

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

26. فصل بارانی - عناصر رابط PSD برای نمونه کارها از یک طراح، هنرمند

شایان ذکر است که مجموعه عناصر PSD ممتاز برای ایجاد برنامه ها یا ویجت ها عالی است. چرا مجموعه ای از عناصر با کیفیت بالا را برای پروژه های آینده به کتابخانه خود اضافه نمی کنید؟

27.

با کمک مجموعه ممتاز عناصر Bootstrap، می‌توانید طرح‌بندی‌های کارت کاملاً پاسخگو ایجاد کنید. در نتیجه می توانید از بین 5 شکل، رنگ و طرح های جذاب مختلف را انتخاب کنید. همه آنها با یکدیگر ترکیب شده اند. راستی، icomoon icon-fontsنیز به مجموعه اضافه شده است.

28.

بسته ممتاز عناصر اینفوگرافیک Tree Bundle شایسته توجه ویژه است. می تواند در ارائه پاورپوینت، بروشور، گزارش سالانه، رزومه یا برای اهداف تجاری، تبلیغات، بازاریابی و موارد دیگر استفاده شود. EPSو هوش مصنوعیفایل، با قابلیت تغییر اندازه در داخل فایل فشرده. بهتر کار کنید Adobe Illustrator CS5 یا جدیدتر

29.

مجموعه ای عالی از انواع عناصر اینفوگرافیک در قالب نمودار، نمودار، آیکون و سایر فرم های سفارشی برای استفاده در پروژه های آینده. عناصر برای ارائه ها، گزارش های سالانه، تبلیغات، بازاریابی یا تبلیغ محصول از طریق ایمیل مناسب هستند. مجموعه EPSو هوش مصنوعیفایل‌ها ترجیحاً با Adobe Illustrator CS5 یا جدیدتر کار می‌کنند.

30.

برای کسانی که هنوز به جمع آوری کتابخانه نماد خود ادامه می دهند، پیشنهاد می کنم به Tonicons توجه کنند. درباره 2000 آیکون با کیفیت برتر که به 6 دسته تقسیم شده اند، چطور؟ موافقم، ارزش پرسیدن را دارد. علاوه بر این، می توانید به راحتی هر یک از آنها را با توجه به نیاز خود ویرایش کنید، اندازه و سایر جزئیات لازم را تغییر دهید.

جمع بندی

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

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

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

ویژگی های متریال دیزاین چیست؟ سطوح و لبه‌های عناصر در این جهت طراحی، الگوهای بصری و سیگنال‌ها را با هم ترکیب می‌کنند تا نشانه‌هایی ایجاد کنند که به کاربر کمک می‌کند به طور مستقیم در سایت حرکت کند (انگار که همه چیز در دنیای واقعی اتفاق می‌افتد).

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

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

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

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

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

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

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

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

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

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

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

برنامه‌ریزی و آزمایش دقیق در مرحله راه‌اندازی نتیجه خواهد داد: اگر همه چیز را درست انجام دهید، کاربر با اطلاعاتی که ارائه می‌دهید «محور» خواهد شد. علاوه بر این، اگر لازم باشد یک عمل در چند مرحله انجام شود، یک الگوریتم برنامه ریزی شده با استفاده از اشیاء روشن و انیمیشن آن را به اتمام عملیات می رساند (در نهایت، به وضوح متوجه می شود که از آن چه انتظاری می رود و چگونه آن را انجام دهد).

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

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

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

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

ایده خوب دیگر این است که توضیحات پیوندهایی را که در منبع قرار می دهید درج کنید. آنها برای درک واضح و سریع از جایی که کاربر به کجا می رسد مورد نیاز است. کمتر ابزار موثراین است که از دکمه "اینجا کلیک کنید" استفاده کنید

4. الگوی نماد توسط Google Design:

5. Icon Grid System برای اندروید L:

طراحی متریال یک مفهوم طراحی است که برای یکسان سازی خدمات، رابط ها و سایر محصولات ایجاد شده است. این مفهوم توسط گوگل توسعه داده شد و در 25 ژوئن 2014 در کنوانسیون Google I / O به مخاطبان گسترده ارائه شد. در هسته توسعه است طرح رنگی، خواص و عناصر اشیاء طراحی. طراحی متریال به طور مرتب توسط توسعه دهندگان تکمیل و به روز می شود. صحبت کردن زبان ساده، ایده اصلی طرحی به شکل بلوک هایی است که با استفاده از افکت سایه مانند کارت ها باز می شوند و به شکل مکعب در می آیند. خود کارت ها باید به آرامی بین خودشان جابجا شوند.

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

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

- جان ویلی، طراحی سرب جستجو، گوگل

اصول اصلی

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

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

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

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

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

سطوح لمسی

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

سطح

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

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

عمق

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

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

لایه زیرین عمق "پایین" است.

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

طراحی چاپ

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

تایپوگرافی زیبا

تایپوگرافی در طراحی چاپ ضروری است. ساختار محتوا را تنظیم می کند و بر شکل گیری سبک یک برند خاص تأثیر می گذارد.

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

تایپوگرافی متضاد

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

شبکه مدولار و راهنما

اگر از گریدهای پایه در طراحی صفحه استفاده می شود، از شبکه های مدولار در طراحی چاپ استفاده می شود. برای طراحی متریال، از یک شبکه 8dp استفاده می شود.

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

شمایل نگاری هندسی

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

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

دانلود آیکون های مرتبط:

رنگ

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

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

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

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

عکس های زیبا

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

• نام تجاری توصیه می شود.
• نباید بالشتک و فضای خالی را فراموش کنیم (8dp برای شبکه پایه، 72 dp برای بالشتک).
• از تصاویر روشن استفاده کنید.

انیمیشن معنادار

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

مثال 1این انیمیشن نشان می دهد که این کارت خاص پس از کلیک به نمایش درآمده، باز شده و اطلاعات بیشتری نمایان شده است.

مثال 2هنگامی که روی یک تاریخ در تقویم کلیک می کنید، یک رویداد ظاهر می شود، که به آرامی به عنوان لایه ای از تقویم عمومی جدا می شود، به یک بلوک جداگانه تبدیل می شود و در یک بلوک جداگانه با جزئیات با شرح این رویداد باز می شود.

انیمیشن کمک می کند تا توجه کاربر را متمرکز کند، تا چشمان او را روی اقدامات رابط متمرکز کند.

واکنش

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

میکروانیمیشن ها

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

وضوح و وضوح

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

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

طراحی تطبیقی

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

از عام به خاص

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

تورفتگی

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

راهنماها

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

ابعاد

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

بلوک ها

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

نوار ابزار

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

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

ماده به عنوان یک استعاره

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

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

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

توسعه طراحی دیجیتال

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

بر این اساس، طراحی متریال دیگر چندان تحت تأثیر اسکئومورفیسم نیست. اکنون این فقط یک گام جدید در تکامل اشیاء مجازی است.

دید به عنوان یک پایه اساسی

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

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

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

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

پویایی معنادار

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

نمونه هایی از سایت هایی به سبک طراحی متریال

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

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

فیلم های

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

رومن نوریک، یکی از طراحان تیم گوگل، در مورد چگونگی تغییر اپلیکیشن I/O 2014 در حین توسعه و مطابقت با اصول طراحی متریال صحبت کرد. به خصوص برای شما ویدیوی او را ترجمه کردیم.

ویدیو از کانال گوگل دیزاین.