Material Design

• Material - це система дизайну, створена Google, щоб допомогти розробникам створювати високоякісні цифрові програми Android та інших платформ.

https://material.io/resources/tutorials#android-java

Принципи дизайну додатків

1. Всі дії повинні здійснюватися за мінімальну кількість кроків.

​

• Дайте зворотний зв'язок.

​

• Інтуїтивність.

Тест

• Відсортуйте зверху вниз способи взаємодії з мобільним пристроєм щодо зростання складності (1 – найпростіше).

​

• Клік
• Довге натискання на екран
• Вибір елемента зі списку
• Введення тексту

Особливості побудови мобільних UI

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

Два способи утримання телефону із сенсорним екраном однією рукою

67%

33%

Утримання телефону із сенсорним екраном двома руками

90%

10%

72%

28%

• Зелена зона - для дій, що найбільш активно використовуються
• Червона зона - для "небезпечних" процесів: видалення, вихід.�

Цікаві посилання

• Колекція прикладів UI дизайну для фінансових програм: https://design4users.com/ru/ui-dizajn-dlja-finansovyh-prilozhenij/

​

• UX-дослідження: https://habr.com/ua/post/497904/

​

Принципи дизайну додатків від Google

1. Продемонструйте цінність вашої програми з першої секунди
2. Меню програми має бути простим та зручним
3. Користувач завжди повинен мати можливість перейти на попередню сторінку
4. Додати функцію ручного розташування.
5. Зробіть так, щоб перехід із програми до браузера був зручним

На скріншоті ліворуч заклик до дії Try it now» (Спробуйте прямо зараз) звучить непереконливо і неточно.

Заклик до дії «Знайти ідеальний будинок» на правому скріншоті, навпаки, супроводжується ясними та зрозумілими користувачеві кнопками: «Rent (орендувати), «Buy (купити), «Sell» (продати):

Текст-підказка

• У текстовому полі виводиться рядок-підказка приглушеним (зазвичай сірим кольором):

​

​

• Для цього використовується атрибут hint до EditText з описом того, що користувач має ввести поле.

На скріншоті зліва представлено меню, у деяких розділах якого частково збігається контент: це стосується пунктів «Походи» (hiking) та «Чоловіче взуття» (Men's footwear).

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

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

Кнопка «Назад» є лише на першому етапі роботи з додатком.

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

• Дизайн та розташування елементів на сайті та в додатку не повинні відрізнятись один від одного

Принципи дизайну додатків від Google

6. Вікно пошуку має бути розташоване на видному місці
7. Використовуйте ефективне індексування пошуку
8. Використовуйте функцію фільтрації та сортування
9. Показ відомостей про попередні результати пошуку та минулі покупки
10. Надайте людям можливість фільтрувати та сортувати відгуки

• Вікно пошуку має бути розташоване на видному місці

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

• Функція фільтрації допоможе організувати отриману інформацію та значно звузити коло пошуку.

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

Автозаповнення

1. Додати до макету AutoCompleteTextView (activity_main.xml):

<AutoCompleteTextView� android:id = "@+id/autocomplete_country"� android:layout_width = "fill_parent"� android:layout_height = "wrap_content"/>

Автозаповнення

2. Визначте масив, що містить усі текстові речення. Наприклад, ось масив назв країн, визначений у файлі ресурсів XML (res/values/strings.xml):

<resources>� <string-arrayname="countries_array">� <item>Afghanistan</item>� <item>Albania</item>� <item>Algeria</item>� <item>American Samoa</item>� <item>Andorra</item>� <item>Angola</item>� <item>Anguilla</item>� <item>Antarctica</item>� </string-array>�</resources>

Автозаповнення

3. Зв'яжіть Activity з ресурсами для автодоповнення (MainActivity.kt):

import android.widget.ArrayAdapter�import android.widget.AutoCompleteTextView

// Get a reference to the AutoCompleteTextView in the layout�val textView = findViewById(R.id.autocomplete_country) as AutoCompleteTextView�// Get the string array�val countries:Array<out String> = resources.getStringArray(R.array.countries_array)�// Create the adapter and set it to the AutoCompleteTextView�ArrayAdapter<String>(this, Android.R.layout.simple_list_item_1, countries).also{adapter->� textView.setAdapter(adapter)

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

Принципи дизайну додатків від Google

11. Зробіть зручним порівняння різних товарів один з одним
12. Надайте користувачам кілька варіантів оплати
13. Необхідно спростити додавання та керування способами оплати
14. Продемонструйте цінність вашої програми перед тим, як просити зареєструватися
15. Розділіть функції входу до системи (sign in) та реєстрації (sign up)

• Зробіть зручним порівняння різних товарів один з одним

• Надайте користувачам кілька варіантів оплати

• Необхідно спростити додавання та керування способами оплати

• Продемонструйте цінність вашої програми перед тим, як просити зареєструватися

• Розділіть функції входу до системи (sign in) та реєстрації (sign up)

Принципи дизайну додатків від Google

16. Спростіть процес аутентифікації в системі
17. Створюйте зручні та прості форми
18. Повідомляйте про помилки введення даних у режимі реального часу
19. Тип клавіатури повинен відповідати типу даних, що вводяться
20. Супроводжуйте поля форми корисною інформацією, що відповідає контексту

• Спростіть процес аутентифікації в системі

Аутентифікація за відбитками

• https://developer.android.com/training/sign-in/biometric-auth
• Код (устар.): https://russianblogs.com/article/4648596323/
• https://medium.com/mindorks/fingerprint-authentication-using-biometricprompt-compat-1466365b4795

​

​

• Створюйте зручні та прості форми

• Повідомляйте про помилки введення даних у режимі реального часу

• Тип клавіатури повинен відповідати типу даних, що вводяться

Обмеження введення в EditText

• Обмежує введення числами з десятковою точкою:

​

• Тільки літери:

​

• Пароль. При введенні тексту спочатку відображається символ, який замінюється на зірочку:

​

• E-mail. На клавіатурі з'являється додаткова клавіша із символом @:

Обмеження введення в EditText

• Клавіатура схожа на клавіатуру зі старого кнопкового мобільного телефону з цифрами, а також із кнопками зірочки і грат.

​

• На клавіатурі цифри, крапка, кома, тире.

​

• Кожен перший символ кожного слова під час введення тексту автоматично перетворюватиметься на велику:

​

• Всі головними:

​

Включити підказки з правопису

• Автоматична корекція орфографії:

​

​

​

​

​

• З атрибутом android:inputType можна комбінувати різні варіанти поведінки та стилі методів введення.

<EditText� android:id = "@+id/message"� android:layout_width = "wrap_content"� android:layout_height = "wrap_content"� android:inputType = �"textCapSentences|textAutoCorrect"� />

• Супроводжуйте поля форми корисною інформацією, що відповідає контексту

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

Принципи дизайну додатків від Google

21. Необхідно розмовляти з користувачами однією мовою
22. Іконки інтерфейсу слід супроводжувати підписами
23. Кожна дія в додатку повинна супроводжуватись візуальним відгуком
24. Дозвольте користувачеві збільшувати зображення настільки, наскільки він вважає за потрібне
25. Будь-яке питання має відповідати контексту

• Необхідно розмовляти з користувачами однією мовою

"Купити", "Орендувати", "Продати" (Buy, Rent, Sell) звичні та легкі для розуміння

Наявність незнайомих термінів чи фраз може спричинити труднощі.

Такі словосполучення як «Влаштуватися на нічліг», «Переселитися» та «Переїхати» (Roost, Migrate, Fly) можуть збити користувача з пантелику

• Іконки інтерфейсу слід супроводжувати підписами

• Кожна дія в додатку повинна супроводжуватись візуальним відгуком

• Дозвольте користувачеві збільшувати зображення настільки, наскільки він вважає за потрібне

• Будь-яке питання має відповідати контексту

User Interface vs User eXperience

• UX і UI загалом описують той самий процес – взаємодія з користувачем.
• UX – логіка та структура.
• UI – графіка та подання

​

User Interface vs User eXperience

Використання стандартних елементів

Будьте обережні з використанням нестандартних елементів, таких як нестандартне діалогове вікно платформи.

Використовуйте нативні елементи, наприклад стандартне діалогове вікно платформи

Контрастність

Контраст кольору контейнера кнопки до кольору фону менший, ніж необхідний для матеріалу контраст 3:1 (4,5:1 для маленького тексту)

Контрастність

…розділяйте їх по регіонах.

При використанні різних типів текстових полів у інтерфейсі користувача…

…не використовуйте їх поруч або в одній формі.

Текст не повинен бути усічений. Зробіть його коротким, чітким та повністю видимим.

Текст не повинен займати декілька рядків.

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

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

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

Дизайн - важливий

F-образний патерн

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

Z-образний патерн

• Коли на сторінці багато текстового контенту, використовується F-подібна форма.

​

• Але коли контент розбавлений великою фотографією або схемою, у справу вступає Z-подібний візерунок.

Розподіл тексту по ширині

• Розподіл тексту по ширині відіграє життєво важливу роль у швидкості читання та сприйняття інформації загалом.

​

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

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

Формула розрахунку довжини тексту

• Щоб розрахувати правильну довжину тексту, потрібно помножити розмір шрифту на 30.

​

Довжина тексту в пікселях = Розмір шрифту * 30.

​

• Наприклад, якщо розмір шрифту дорівнює 14, це дасть вам 420 пікселів, що є ідеальною шириною тексту.

Заміщаючий текст

• Люди з порушенням зору використовують спеціальні програми для перегляду додатків, такі як:
1. TalkBack від Google для Android,
2. VoiceOver від Apple для iOS,
3. JAWS і NVDA від Freedom Scientific для настільних комп'ютерів

​

• Для роботи цих технологій потрібен альтернативний текст (замінний текст), який зазвичай не видно.

Заміщаючий текст

• Текст у значенні атрибуту android:contentDescription буде озвучено системою при натисканні на картинку у випадку, якщо у налаштуваннях пристрою увімкнена відповідна опція.

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/my_image"

android:contentDescription="@string/my_image_description"

/>

</LinearLayout>

Статистика використання Screen Reader

https://webaim.org/projects/screenreadersurvey9/

Статистика використання мобільних Screen Reader

Заміщаючий текст

• Щоб підвищити доступність вашої платформи, вам необхідно описати те, що відбувається на екрані, простим, але осмисленим способом.
• Дотримання таких правил допоможе вам зробити це ефективно:
1. Використовуйте невелику, але інформативну фразу, щоб описати зображення або діаграми.
2. Чим коротший текст, тим швидше його прочитає система читання з екрану, тому найкраще, щоб довжина описи не перевищувала 130 символів.
3. Увімкніть текст ключові слова, які дають правильний контекст зображенням, але не просто перераховуйте їх через кому.

Використання лише одного або двох слів для опису зображення може бути неінформативним

Використовуйте заміщаючий текст, щоб передати те, що показує зображення, інформативної короткої фрази.

Довгі описи в тексті, що заміщає, можуть бути обрізані.

Більшість засобів читання з екрану не читають більше 125 символів тексту

Розміщення ключових слів у заміщувальному тексті просто з метою поліпшення SEO може спантеличити користувачів програм читання з екрану.

Додайте цільові ключові слова

Включення слів «зображення» або «знімок» до заміщувального тексту необов'язкове.

Мінімальний розмір елементів

• У мобільній розробці хорошим правилом є створення елементів розміром не менше 48x48dp.

​

• Якщо навколо піктограми або кнопки немає інших інтерактивних елементів, поле взаємодії можна збільшити.

Іконки

• Іконки доступні в трьох стилях і чотирьох стилях шрифту (заливка (Fill), товщина (Weight) виділення (Grade) та оптичний розмір).

​

• Переглянути всі 2,832 іконки: https://fonts.google.com/icons

​

• Плагін Material Symbols для Figma:
• https://www.figma.com/community/plugin/1088610476491668236/Material-Symbols

​

​

Fill (заливка)

Fill (заливка)

Weight

• Weight (насиченість, товщина) визначає товщину обведення символу в діапазоні від тонкої (100) до напівжирної (700).

Grade (виділення)

Grade (градієнт)

• «Рівень» (GRAD CSS) — це вісь, яку можна використовувати для зміни товщини обведення, не впливаючи на загальну ширину шрифту, між літерний інтервал чи кернінг — на відміну зміни товщини.

Optical sizes (Оптичні розміри)

• Стандартні піктограми відображаються як 24dp x 24dp.
• Іконки підтримують додаткові розміри: 20dp, 40dp та 48dp

Використовуйте розмір 20dp для меню

(якщо у ньому багато елементів)

Використовуйте розмір 48dp для основних дій

Принципи дизайну іконок

Принципи дизайну іконок

Принципи дизайну іконок

Принципи дизайну іконок

Використовуйте однаковий розмір для символів Material та тексту

Основные правила при сочетании типографики и символов

Основные правила при сочетании типографики и символов

Не змішуйте різні ваги

Компоненти матеріал

• Колір
• Висота
• Іконки
• Рух
• Форма
• Типографіка

Колірна модель

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

Класифікація колірних моделей

• Колірні моделі умовно можна поділити на такі типи:
1. Адитивні моделі – де колір виходить шляхом додавання до чорного (RGB).
2. Субтрактивні моделі – отримання кольору "відніманням" фарби з білого листа (CMYK).
3. Математичні моделі корисні для обробки зображення (HSV).
4. Моделі сприйняття (HSL, HSB).
5. Моделі, де відповідність кольорів задається таблицею (Pantone).

Колір

• Колір може бути представлений трьома шістнадцятковими числами #00-#FF (0-255), що представляють червоний, зелений і синій (RGB) компоненти цього кольору.
• Що число, то більше вписувалося цього компонента.

​

​

​

​

• Альфа-канал є прозорістю (#00 = 0% = повністю прозорий, #FF = 100% = повністю непрозорий).

colors.xml

Теми

• Тема — це набір стилів, які застосовуються до всього додатку, дії чи ієрархії уявлень, а не лише до окремого View.

<com.google.android.material.floatingactionbutton.FloatingActionButton� android:layout_width="wrap_content"� android:layout_height="wrap_content"� app:layout_constraintTop_toBottomOf="@id/tip_result"� android:layout_gravity="center_horizontal"� app:srcCompat="@android:drawable/ic_dialog_email" />

<Button� android:layout_width="wrap_content"� android:layout_height="wrap_content"/>

https://material.io/design/material-theming/implementing-your-theme.html

Система кольорів

• Уявіть свій екран продукту як полотно, намальоване за номерами:
1. Кожен елемент на екрані має номер
2. Кожному номеру присвоюється колір

​

Колір на основі вмісту

Кілька джерел кольорів

Підбір кольорової гами програми

1. Руцями: https://material.io/design/color/the-color-system.html#tools-for-picking-colors

​

• Material Theme Builder:
• у Figma:�https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder
• окремий сайт: https://material-foundation.github.io/material-theme-builder/

Акцентні колірні ролі

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

​

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

​

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

https://material.io/design/material-theming/implementing-your-theme.html#color

Primary

1. On primary
2. Primary

Primary

1. On primary container
2. Primary container

Surface

1. Surface
2. Surface container

Налаштування теми у Android

• Коли ви створюєте проект, до вашої програми за промовчанням застосовується тема Material Design, визначена у файлі styles.xml.

​

​

​

​

• Значення стилю насправді є посиланням на інші ресурси кольору , визначені у файлі res/values/colors.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style>

<?xml version="1.0" encoding="utf-8"?> <resources> <!-- Color for the app bar and other primary UI elements. --> <color name="colorPrimary">#3F51B5</color> <!-- A darker variant of the primary color, used for the status bar (on Android 5.0+) and contextual app bars. --> <color name="colorPrimaryDark">#303F9F</color> <!-- a secondary color for controls like checkboxes and text fields. --> <color name="colorAccent">#FF4081</color> </resources>

Принципи підбору кольорів

Не перефарбовуйте негрів

Додати іконку для коментування

1. Відкрийте File | Settings | Menus and Toolbars
2. Виберіть групу "Main Toolbar"
3. Додайте дію: All Actions -> Main Menu -> Code -> Comment with line comment
4. Налаштуйте піктограму дії
5. Відобразіть панель інструментів: View -> Appearance -> Toolbar

​

Ctrl + / - закоментувати/розкоментуватирядок

Ctrl+Shift+/ - закоментувати/розкоментуватиблок коду

Ієрархія базових класів Android

Material Design

• Спробуємо створити сторінку входу в Шрін, що містить:

​

1. Два текстові поля, одне для введення імені користувача, інше для пароля
2. Дві кнопки, одна для «Скасування» та одна для «Далі».
3. Назва програми (Шрін)
4. Зображення логотипуШрін

https://codelabs.developers.google.com/codelabs/mdc-101-kotlin#0