Google Material Design چیست و چگونه زندگی ما را تغییر می دهد.

در کنفرانس توسعه دهندگان Google I/O 2018، علاوه بر اندروید به روز و ادغام عمیق هوش مصنوعی در خدمات خود، گوگل استاندارد جدیدی را در طراحی سیستم و اپلیکیشن موبایل معرفی کرد - Material Design 2.0. چه خبر؟

فضای سفید و شفافیت

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

ابزارهای جدید توسعه دهنده:

تم مواد

افزونه Material Theme برای Sketch اساساً کتابخانه ای از فونت ها، نمادها و رنگ های شرکتی است که توسط دستورالعمل های جدید Google در Android P ارائه شده است. همچنین، هنگام توسعه با کمک آن، می توانید شکل کامپوننت ها و تایپوگرافی را در پروژه خود به صورت دو نفره ویرایش کنید. از کلیک ها

گرد و مینیمالیسم بیشتر

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

فونت های جدید

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

بنابراین به زودی می‌توانیم منتظر طراحی مجدد در مقیاس بزرگ همه سرویس‌های وب و موبایل گوگل باشیم. در حال حاضر، برخی از این فرزندان اول در فروشگاه برنامه‌ها عبارتند از Google Play Games، Google Tasks و اپلیکیشنی برای شرکت‌کنندگان در کنفرانس Google I/O 2018.

• سبک به روز شده از تصاویر شرکتی

• استفاده از چهار رنگ اصلی لوگو به عنوان زبان بصری

به عنوان مثال، نسخه جدید جیمیل:

مفاهیم طراحی متریال 2.0

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

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

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

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

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

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

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

برای اطلاعات بیشتر در مورد مفهوم YouTube Alex، مقاله اصلی را بخوانید.

مفهوم موسیقی Google Play در طراحی متریال 2.0

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

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

صفحه اصلی

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

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

بازیکن

دومین نکته ای که در طراحی ناموفق است به نظر من بازیکن است. در برنامه رسمی Google Play Music، کاورهای آهنگ در سراسر مورب صفحه گوشی هوشمند کشیده شده اند، به همین دلیل است که در دستگاه هایی با صفحه نمایش با وضوح بالا بسیار درهم و تار به نظر می رسند.

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

کتابخانه ی رسانه

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

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

منو/نوار کناری

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

ارائه مفهوم موسیقی Google Play در Behance

نتیجه

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

با تشکر از توجه شما!

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

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

• نه فقط یک سبک جدید، بلکه یک سیستم طراحی کامل ایجاد کنید که در آن اصول و قوانین به وضوح بیان شود.
• سبک های موجود (FLAT/Metro، مینیمالیسم و ​​غیره) را بر اساس فناوری های جدید به روز کنید.

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

طراحی متریال از کجا آمده است: آمار اینترنت موبایل

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

"مواد" در طراحی: چیست؟

اساس سبک مفهوم متریال بود. این "بلوک ساختمانی" اساسی است که بلوک های طراحی عملکردی از آن مونتاژ می شوند. به طور خلاصه می توان آن را به شرح زیر توصیف کرد:

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

نمونه ای از پوشش لایه های "کاغذ دیجیتال"

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

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

دکمه در سبک طراحی متریال و دکمه Web 2.0

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

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

اشتباهات و باورهای غلط

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

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

سوم. متریال و تعامل آن تنها مواردی است که این سبک را متمایز می کند. نه! برای دستیابی به یک طراحی متریال "متعارف"، مانند گوگل، باید اصول دیگری را دنبال کنید:

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

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

طراحی متریال اندروید

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

اکنون «اصل لایه‌بندی از پنجره‌های بازشو به کل رابط منتقل شده است

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

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

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

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

رنگ های طراحی متریال: پالت گوگل

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

به نشانک ها

ترجمه توسط تیم آموزشگاه انگلیسی آنلاین Skyeng تهیه شده است.

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

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

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

صندوق ورودی: شبکه مدولار

با توجه به Gmail که قبلاً در بازار وجود دارد، توسعه یک سرویس ایمیل جدید یک کار بسیار بلندپروازانه برای Google است. هدف Inbox افزودن عمق به طراحی رابط و ایجاد یک تجربه کاربری منحصر به فرد و هویت نام تجاری، مطابق با قوانین جدید طراحی متریال بود.

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

عمق

طراحی اولیه Inbox به اندازه کافی انعطاف‌پذیر نبود - فضای شبکه تنها به هفت ایمیل اجازه می‌داد تا روی یک صفحه نمایش 13 اینچی قرار بگیرند. این خیلی کم بود، مخصوصاً در مقایسه با جیمیل، که 16 تا 20 حرف مناسب است.

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

تیم اسمیت

طراح ارشد در Inbox

با تغییر تنظیمات شبکه، ارتفاع خط و نحوه ظاهر فونت، طراحان Inbox توانستند به عمق مطلوبی در رابط دست یابند در حالی که هنوز 12 تا 17 حرف را نشان می‌دهند که هر کدام داخل یک کارت طراحی متریال است. رابط برنامه با دستگاه کاربر سازگار است. به عنوان مثال، فونت در خط "موضوع" بسته به اندازه صفحه تغییر می کند.

رنگ ها، تصاویر و نمادها

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

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

پنل بالایی

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

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

تیم اسمیت

طراح ارشد در Inbox

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

نگه دارید: نمونه های ناوبری پاسخگو

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

تعامل، صفحه های خالی و انیمیشن

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

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

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

ژنویو کوواس

انتخاب عناصر مواد مناسب: دکمه ناوبری پایین یا حرکت شناور

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

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

پیمایش اصلی به شما امکان می داد با یک ضربه یک یادداشت جدید ایجاد کنید و دکمه اکشن شناور به دو کلیک نیاز داشت: یکی برای نمایش گزینه ها و دیگری برای ایجاد یک یادداشت.

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

ژنویو کوواس

مهندس نرم افزار Google Keep

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

یک راهنما، نه مجموعه ای از قوانین

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

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

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

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

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

گوگل متریال دیزاین را در ۲۵ ژوئن ۲۰۱۴ به عنوان طرحی برای سیستم عامل جدید اندروید که بعداً آب نبات چوبی نام گرفت، برای عموم منتشر کرد. استفاده کامل از طراحی متریال تنها در چارچوب ایجاد اپلیکیشن برای آب نبات چوبی قابل انجام است، اما برخی از اپلیکیشن های اندروید 4 نیز می توانند به سبک متریال بازطراحی شوند، البته با محدودیت های خاصی. اصلی‌ترین و احتمالاً تنها عاملی که به طور قابل توجهی آزادی توسعه‌دهندگان برنامه را برای Lollipop محدود می‌کند، سازگاری ضعیف مفهوم طراحی متریال با نسخه‌های قبلی اندروید و شیوع کم آندروید 5.1 Lollipop است. در هر صورت، رفع آخرین نقص فقط یک زمان است.

اندروید آب نبات چوبی

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

پایان نامه های اصلی و اصول اولیه طراحی متریال

کل فلسفه طراحی متریال بر چهار اصل اساسی و قابل درک استوار است:

1. سطوح. چنین سطوحی که در قالب کارت های ایجاد شده از "کاغذ دیجیتال" ساخته شده اند، کاملاً تابع قوانین دنیای فیزیکی هستند، پاسخ لمسی دارند و بازخورد قوی همراه با شهودی بالا ارائه می دهند.
2. چاپ تایپوگرافی چرا به جای اختراع مجدد چرخ، از بیش از یک قرن تجربه در زمینه چاپ استفاده نکنید؟ با توجه به اینکه سطح اصلی اکنون با لایه‌هایی از کاغذ مجازی و عملاً ملموس نشان داده می‌شود، کاملاً منطقی است که اطلاعات را مطابق با بهترین نمونه‌های محصولات چاپی روی آن اعمال کنیم. به بیان اغراق آمیز تر، گوگل قوانین تایپوگرافی "واقعی" را برای صفحه نمایش دستگاه های تلفن همراه تطبیق داده است.
3. انیمیشن. انیمیشن در طراحی متریال باید از قوانین فیزیکی و در نتیجه انتظارات بصری کاربر تبعیت کند. رابطه اشیاء متحرک، تأثیر آنها بر یکدیگر، نحوه ظاهر و حرکت آنها - همه اینها باید واقعی، منطقی و قابل پیش بینی باشد.
4. طراحی تطبیقی جنبه بسیار اصلی که در ابتدای مقاله در مورد آن صحبت کردیم. طراحی ریسپانسیو با هدف یکسان سازی تجربه کاربر و سازگاری آن در تمامی پلتفرم ها انجام می شود.

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

سطوح، خواص و عملکرد آنها

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

طراحی مواد مقطعی

محورزدر جهانمواد طرح مسئول حجم رابط است

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

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

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

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

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

ویژگی های تایپوگرافی در طراحی متریال

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

نمونه های تایپوگرافیطراحی مواد

فونت ها

فونت استاندارد استفاده شده در اندروید برای مدت طولانی Roboto است. سیستم عامل جدید Lollipop و Material Design نیز از آن به عنوان فونت اصلی استفاده می کند. علاوه بر Roboto، برنامه‌های اندرویدی می‌توانند از فونت Noto نیز استفاده کنند که برای زبان‌هایی که نسخه‌های خود را از Roboto ندارند، در نظر گرفته شده است. با وجود سبک کلی برنامه های اندروید و توصیه هایی برای فونت های ارائه شده در دستورالعمل، در برخی موارد استفاده از فونت اختصاصی خود به جای Roboto که برای ایجاد ارتباط مناسب در کاربر طراحی شده است کاملاً قابل قبول است.

فونتربات

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

تایپوگرافی با کنتراست بالا در عمل

اصل چیدمان یا چیدمان محتوا درمواد طرح

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

ساختار و چیدمان فیلدها در طراحی متریال

نمادها

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

نمونه اولیه مجازی پاکت کاغذی و نماد تمام شدهجیمیل

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

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

برای توسعه دهندگان، گوگل مجموعه ای چشمگیر از آیکون ها را ارائه می دهد که به سبک طراحی متریال ساخته شده اند. در این مجموعه می توانید هر نماد لازم برای ایجاد برنامه های کاربردی با طراحی متریال را پیدا کنید. مجموعه نمادهای طراحی متریال گوگل در GitHub در دسترس است. همچنین می‌خواهم به منبع materialdesignicons.com اشاره کنم، جایی که می‌توانید نه تنها نمادهایی از سایر نویسندگان را بیابید، بلکه آیکون‌هایی را که خودتان توسعه داده‌اید نیز ارائه دهید.

فلسفه رنگ

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

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

نمونه هایی از رنگ های اصلی ازاولیهپالت‌ها و رنگ‌های تاکیدی مرتبط (نشان داده شده در بلوک‌های پایین، با یک علامت به شکل "آ"قبل از شماره سایه)

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

وضعیت باررنگ می گیردعمل بار، اما همچنان به عنوان یک سایه غنی تر و تیره تر خودنمایی می کند

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

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

انیمیشن

جنبش میدان سوپرماتیست، کازیمیر مالویچ (1920) ومعنی دار حرکت - جنبش, گوگل مواد طرح (2014)

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

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

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

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

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

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

حرکت لایه "کاغذ دیجیتال" در گالری

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

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

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

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

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

نمونه ای از انیمیشن آیکون های پایه دراندروید آب نبات چوبی

همه جاموج دار شدن-اثر

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

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

موج دار شدن-افکتی که زمانی رخ می دهد که می خواهید یک تصویر را به داخل گالری منتقل کنید

جنبه فنی انیمیشنمواد طرح یا پاکت طبیعی

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

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

نمودار حرکت اجسام متحرک: شتاب سریع و کاهش سرعت صاف

طراحی تطبیقی

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

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

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

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

شبکه مدولار و بلوک های توزیع شده

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

رابط طراحی شده بر اساس اصولمواد طرح، جهانی برای هر صفحه نمایش

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

عناصر

دکمه شناور در نسخه معمولی یا مینی

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

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

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

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

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

دکمه اکشن شناورV عمل

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

اعمال مثبت و منفیشناور عمل دکمه

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

برنامه بارکه جایگزین شدعمل بار

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

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

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

سایه هابرنامه بار، پیشنهاد شدهگوگل

وضعیت فعلی با توسعه برنامه Android Lollipop و AppCompat v21

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

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

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

ویجتبرنامه بار

نگاهی انتقادی به طراحی متریال

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

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

طراحی تخت مایکروسافت

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

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

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

به عنوان مثال، اجازه دهید رابط منوی تنظیمات را برای اندروید و iOS مقایسه کنیم:

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

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

نتیجه

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

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

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

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

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

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

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

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

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

یک راه حل بسیار موفق که به طور هماهنگ جزئیات و طرح ها را از دستورالعمل طراحی مواد (سایه ها، دکمه ها، طراحی تخت، رنگ ها و جلوه های JS) و سبک شرکتی گروه مدارس بین المللی ISoE ترکیب می کند.

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

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

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

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

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

و البته از منبع اصلی غافل نشویم. رابط سرویس Google Alerts اخیراً به Material Design به روز شده است که به طور قابل توجهی ویژگی های بصری و قابلیت استفاده آن را بهبود بخشیده است.