Поради щодо Material Design

14

Від автора: за останній час Material Design виріс у досить великий рух. Сьогодні в багатьох додатках вже можна зустріти різні компоненти матеріал дизайну: від карток до покращеної анімації.

Багато разів це вже обговорювалося, з одного боку, це відмінний приклад еволюції. Зараз як ніколи раніше легко створити по-справжньому цільний дизайн. З іншого боку, є думка, що в цьому напрямку геть відсутня оригінальність, так як всі використовують матеріал дизайн.

У цьому уроці ми розповімо, як взяти за основу концепції матеріал дизайну і з їх допомогою створити набагато покращений інтерфейс, який в той же час буде набагато чіткіше передавати свою суть.

Material Design як основа

В першу чергу ніхто вам не забороняє проектувати інтерфейси за допомогою material design. За фактом такий підхід допомагає визначити основу, фундамент, до якого вже давно звикли користувачі Android.

«Коли потрібно створити щось привабливе для користувача, не варто заново винаходити колесо»

Застосування стандартів хороший запорука того, що ваш проект буде дійсно працювати. В такому випадку у вас ніколи не виникне проблем зі структурою інтерфейсу і його взаємодією між собою. Однак, це не означає, що у вас не буде помилок або що ви не створите щось краще.

Використання карток в дизайні

Поради щодо Material Design

Вся суть Material Design повертає нас до використання карток. Сьогодні, картки, безумовно, це компонент, який застосовується в багатьох ситуаціях, а, отже, він дуже корисний. У той же час, це відмінний виклик, щоб подумати, якими елементами можна замінити картки. Ми спостерігаємо все більше і більше сайтів, в яких за основу взято тематичні картки, так що можна подумати, чим їх замінити.

Візьмемо в якості прикладу календар. У картці замість списку днів відображаються конкретні події, а в додатку Sunrise відображається комбінація з місяця і найближчих подій на тижні.

Поради щодо Material Design

Зліва: концепт календаря на Material Design; Праворуч: Sunrise

Якщо ви хочете надихнутися новими, унікальними інтерфейсами, то ігри для цього чудово підходять. Для натхнення можна подивитися інтерфейс сайту UIMovement.

«Є картки самим оптимальним рішенням при створенні інтерфейсів, або є більш цікаві способи рішення цієї задачі?»

В кожному додатку ця проблема вирішується по-своєму унікальне. Продовжуючи цю думку, можна додати, що можливо у вашому випадку як раз-таки і потрібен інший підхід до створення інтерфейсу. І як же ви вчините? Все починається з контенту і меню, про це я ще нижче детальніше розповім.

Остерігайтеся плаваючих кнопок

Поради щодо Material Design

Приклад плаваючою кнопки в Google inbox

Ще один з шаблонів в Material Design це плаваючі кнопки. Такі кнопки чудово працюють, з їх допомогою можна додати якусь нову дію в ваш інтерфейс. Але в той же час, вони можуть бути одним з найгірших механізмів в дизайні. Є безліч способів неправильно використовувати плаваючі кнопки:

Розміщення кнопки на екрані з кількома завданнями

Розташування меню плаваючою кнопці

Присвоювати кнопці вкрай важливі елементи дизайну

Особисто я бачу парочку прикладів, де плаваючі кнопки чудово вписуються в першу чергу це програми з одним інтерфейсом. Також хороший приклад це месенджери, той же самий Über.

Вся хитрість в тому, щоб зрозуміти, а чи потрібні у вашому проекті ці кнопки. Не слід виходити з того, що, якщо це стандартний елемент дизайну, то він відмінно впишеться в вашу програму. А для більш складних проектів, де користувачеві необхідно здійснювати безліч різних дій, плаваючі кнопки підходять вже не завжди.

Конверсія користувачів і стратегії по утриманню користувачів на своєму сайті

При занадто великому завзятті в області Material Design досить легко забути про основу. Як заздалегідь вирішити, які компоненти Material Design застосовувати, і що покращити?

«Чіткий вибір конкретних компонентів дизайну на ранньому етапі може загнати вас в рамки»

Нижче я створив короткий список конкретних елементів, які вимагають чіткого усвідомлення того, що ви з ними будете робити.

Меню

Яке найважливіше дію здійснює користувач в моєму додатку?

На якому екрані (екранах) це відбувається?

Яка в мене блок-схема програми?

В якості логічного завершення, існують два правила, які я тримаю в голові при проектуванні меню.

Правило 1: 80/20

Використовуйте правило 80/20. 80% користувачів будуть використовувати лише 20% функціональності мого додатка. Як мені визначити саме ті 20% і полегшити доступ до них?

Правило 2: Послідовність

Якщо існує кілька способів відкрити певний екран у додатку, переконайтеся в тому, щоб всі точки доступу були послідовні. Наприклад, перехід від екрану з коротким оглядом до більш детального екрану.

Ґрунтуючись на правилах вище, можна вирішити, який із способів навігації по додатку буде найоптимальнішим для користувачів. Якщо ж у вас украй складна і заплутана додаток, то вам підійде виїжджає меню. У вас простий сервіс? Тоді ви можете використовувати таби. За більш детальною інформацією з приводу навігації та Material Design рекомендую почитати посібник.

Контент

Поради щодо Material Design

Концепт музичного додатка з сайту Dribbble хороший приклад роботи з різним контентом

У всіх програмах є свій контент. Наступні навідні запитання повинні допомогти структурувати ваш контент, а також допомогти з відображенням:

Яким типом вмісту я маю?

Скільки рівнів вмісту у мене є (наприклад, від вікна огляду до детального перегляду і потім до екрану з дією)?

Яка середня довжина (вага) кожного типу контенту?

Який найбільш оптимальний спосіб відображення контенту? Список або слайд шоу? А може щось своє?

Після того, як ви до кінця визначитеся зі своїм контентом, вам легше буде прийняти якісь рішення з приводу дизайну. На цьому етапі ви вже можете вирішити, що краще для вас: використовувати картки або придумати щось своє.

Залучення різних користувачів

Найбільша трудність, з якою ви можете зіткнутися:

«Як зрозуміти, що ваш додаток в рівній мірі привабливим як для нових, так і для знову повернулися користувачів? І як це вплине на мій контент і меню?»

Це вкрай складне завдання, і часто вона зводиться до ефективного залучення нових користувачів і переконання їх у тому, що головний екран вашого додатки містить саме те, що їм потрібно. Думаю, тут потрібно навести кілька прикладів. Погляньте на такі сайти. Яка сторінка у них основна, і які можливості вона дає? Як вони залучають нових користувачів?

Instagram

Facebook

Espresso від The Economist

Сайти вище можуть допомогти при виборі свого інтерфейсу. Не лякайтеся, якщо вони здадуться вам складними на перший погляд. Дані веб-додатки пройшли безліч ітерацій редизайну.

Основна їх мета це залучення нових користувачів. Рекомендую відвідати деякі з цих ресурсів, вони дадуть вам хорошу їжу для роздумів. Наприклад, можна відвідати сайт User Onboard.

Поліпшення інтерфейсу

Зараз ми знаходимося на тому етапі, коли ми вже заклали основи нашої програми, і ми знаємо, які елементи Material Design будемо використовувати. Тепер саме час все це справа «приперчити». Є кілька способів поліпшити інтерфейс вашого сайту, деякі з них представлені нижче.

Типографіка

Правильний шрифт це величезний внесок у зовнішній вигляд вашого сайту. Застосувавши нестандартний шрифт, можна ефективно поліпшити дизайн та надати унікальний вигляд вашого сайту без особливих зусиль. Однак, підібрати потрібний шрифт завдання не з простих і, як правило, це справа смаку. Мій улюблений ресурс щодо шрифтів Typewolf.

Іконки

Поради щодо Material Design

Dropbox відмінний приклад грамотного застосування нестандартних іконок

Іконки ще один спосіб надати оригінальний вигляд вашого сайту. Використання нестандартних іконок вкрай делікатне процес, він прописаний в стандартах Material Design. Це означає, що певні дії, пункти меню або компоненти можуть мати одні й ті ж іконки. Якщо ви захочете працювати зі своїми іконами, то слід пам’ятати дві речі:

Читаність: Переконайтеся в тому, що користувачам зрозумілі ваші іконки.

Сталість: Тут нічого незвичайного, уникайте комбінацій різних наборів іконок.

Візуальні ресурси

Поради щодо Material Design

Timehop відмінний приклад з власними ілюстраціями, які надають сайту унікальний вид. Те, як ви будете використовувати зображення або ілюстрації додасть певний характер вашого сайту. Будьте винахідливими.

Унікальна анімація і взаємодія

Поради щодо Material Design

Приклад унікальної анімації та взаємодії. Джерело.

Створення унікальної, єдиної у своєму роді анімації вимагає більше зусиль. Однак як же круто побачити, як вона працює в живу на вашому сайті. Унікальна анімація, побудована на нестандартний і дуже простому інтерфейсі, це дуже рідкісне і цінне явище, яке можна зустріти в мережі.

Унікальна кольорова схема

Поради щодо Material Design

Додаток використовує концепцію Material Design з незвичайною колірною схемою. Джерело.

Material Design має дуже багатим вибором колірної гами. Але це не означає, що ви не можете придумати щось своє.

Маленьке застереження

Є причина, по якій більшість інтерфейсів, які нам зустрічаються, мають досить просту і примітивну конструкцію. Такий підхід працює, користувачам легше орієнтувати в легкому, нехитрий інтерфейсі.

«Експериментальний дизайн може зіпсувати ваш сайт»

Тим не менш, навіть з незначними змінами, такими як шрифт і колірна палітра, можна піти досить далеко і спроектувати свій унікальний дизайн.

Висновок

Material Design чудова подушка безпеки в тому випадку, якщо ви зіткнулися з проблемами в дизайні. Ви можете самі придумати, як повинен працювати ваш інтерфейс. У Snapchat закладена логіка роботи з жестами, Facebook Paper (iOS) переосмислив сам макет, ієрархію і анімацію, а Medium вкрай ефективно мінімізував свій інтерфейс і зосередив увагу користувачів на читанні (і запису).