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

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

Дозвольте навести вам анекдотичний приклад - якийсь час назад хтось попросив мене створити екран заставки для їх програмного забезпечення для ПК. Тому я все вийшов - намалював це на ескізному папері, імпортував до PhotoShop, створив безліч вигадливих неонових ліній та ефектів. Це могло бути швидше шпалери для робочого столу, а не екран. Справа в тому, що я створив для них цей по-справжньому вишуканий і продуманий дизайн.

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

Справа в цьому полягає в тому, - я думаю, що програмісти потрапляють у цю пастку зробити ту саму помилку, що і я. Ми схильні думати про користувальницькі інтерфейси та екрани бризок, якими вони повинні бути справді вигадливі, привабливі речі, завдяки чому додаток виділяється . Але вони не повинні бути - чесно, вони не повинні бути. Ми повинні взяти розум програміста і застосувати його до естетичного дизайну - просто, функціонально, працює.

У цій статті ми розглянемо кілька дуже простих способів створити елегантний Android APP UI / UX, навіть якщо у вас майже немає досвіду проектування.

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

Ваш додаток не повинно бути " унікальним" та " виділятися серед решти", щоб воно було популярним і добре виглядало. Ось чого і досягнув Матеріальний дизайн Google - стандарт для інтерфейсу додатків у всій галузі, і вони зробили хорошу роботу. Там є маса популярних додатків, які дотримуються Material Design - одні з найбільших імен у додатках для Android, наприклад, SwiftKey, Nova Launcher, Textra SMS, YouTube, лише декілька.

Основна увага в Material Design робиться на макетці на основі картки із суцільною кольоровою палітрою. Google працював з провідними дизайнерами галузі, черпаючи безліч елементів із мінімалістичного дизайнерського практику, а потім випустив все це безкоштовно - це досить непогана угода, адже курси дизайну веб-сайтів та додатків можуть витратити сотні доларів за електронні книги, відео тощо.

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

• Тематичний редактор матеріалів (macOS + ескіз)
• Модуль кольорової палітри дизайну матеріалів (PhotoShop / Illustrator)
• Набір дизайну інтерфейсу користувача PSD (PhotoShop)
• Інтерфейс інтерфейсу Android для дизайну матеріалів ( ескіз)
• Генератор тем інтерфейсу матеріалу

А якщо вам потрібна якась натхнення для створення простих, елегантних тем дизайну матеріалів, ознайомтеся з цими списками блогів:

• MaterialDesignBlog - 15 дивовижних прикладів дизайну матеріалів, зроблених правильно
• MockPlus - 12 кращих прикладів дизайну веб-сайтів для оформлення натхнення
• AndroidAuthority - 10 найкращих додатків Material Design для Android

Кольорові градієнти набагато легші, ніж ви думаєте

Як альтернатива Матеріал дизайну, градієнти долора прості, модні та привабливі. І ви можете подумати, що дизайнери витрачають багато часу на фарбування у всі кольори або на розробку кінцевого градієнта. Ви помиляєтесь - це можна зробити за 10 секунд у PhotoShop.

10 секунд в інтерфейсі градієнта PhotoShop.

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

Створіть новий проект PS для мобільних пристроїв ( 1080 x 1920 px @ 72 ppi працює чудово)

UIGradients.com - Велика колекція заздалегідь виготовлених градієнтів.

Зайдіть на UIGradients.com і знайдіть щось, що вам подобається.

Скопіюйте значення шістнадцяткових кольорів з UIGradients

Скопіюйте кольори градієнта зверху попереднього перегляду.

Селектор градієнтів PhotoShop.

Клацніть правою кнопкою миші на порожньому шарі в PS та перейдіть до Опції змішування> Накладення градієнта.

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

Введіть шістнадцяткові значення з UIGradient в інструмент градієнта PS.

Тепер просто вставимо вставте значення шестигранних кольорів з UIGradient в редактор градієнтів PS.

Відрегулюйте по мірі необхідності. Тепер у вас є професійний фон градієнта для вашого додатка Android.

Інші градієнтні інструменти, які варто перевірити:

• WebGradients.com
• Генератор Android форм ( для створення фігур через XML, з можливістю градієнта)

Використовуйте SVG замість JPG / PNG

Замість того, щоб використовувати для своїх графічних елементів (кнопки, логотипи тощо) PNG або JPG, ви дійсно повинні використовувати SVG ( масштабована векторна графіка) . Це пов’язано з тим, що для SVG можна змінити розмір, не втрачаючи якості - наприклад, якщо ви збільшите масштаб JPG до більшого значення, він втрачає якість і стає розмитим / пікселізованим. SVG цього не робить. Люди намагаються використовувати величезні файли PNG, які будуть зменшені для розміщення екранів Android - коли натомість ви можете використовувати менші SVG-файли, які мають кращі масштаби, не втрачаючи якості.

Крім того, розмір файлів SVG може бути на 60% до 80% менше, ніж PNG . Це означає, що ваша програма або мобільний веб-сайт завантажуватимуться швидше для користувача, і вони будуть виглядати добре незалежно від роздільної здатності екрана.

Включіть темний режим за допомогою Theme.AppCompat.DayNight

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

Дивіться посібник Appual "Як реалізувати темний режим у додатку для Android".

Використовуйте шаблон або комплект мобільного інтерфейсу

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

Деякі чудові ресурси для шаблонів та наборів інтерфейсу Android:

• SpeckyBoy - 50 безкоштовних наборів мобільних інтерфейсів для iOS та Android
• SketchAppSources - Ресурси програмного інтерфейсу для Android ( ескіз)
• Freebiesbug - набори інтерфейсу PSD ( PhotoShop)