Основи проектування інтерфейсів для мобільних пристроїв

1.

Основи проектування інтерфейсів для мобільних пристроїв
1. Платформа Android
2. Основні види Android-додатків
3. Створення якісного інтерфейсу
4. Огляд інтерфейсу
5. Візуальний дизайн інтерфейсів
6. Елементи управління та дизайн навігації
7. Архітектура програми, основні компоненти
Ресурси:
http://developer.android.com
Мейр Р. Программи рование приложений для планшетных
компьютеров и смартфонов. – М.:Эксмо, 2013. – 816 с.
Разработка приложений для смартфонов на ОС Аndroid http://www.intuit.ru/studies/courses/12786/1219/info
Введение в разработку приложений для ОС Android http://www.intuit.ru/studies/courses/12643/1191/info

2.

1. Платформа Android

3.

Основні елементи
• Базовий рівень (Linux Kernel)
• Набір бібліотек і середовище виконання (Libraries &
Android Runtime)
• Рівень каркаса додатків (Application Framework)
• Рівень додатків (Applications)
Основні бібліотеки:
• Surface Manager
• Media Framework
• SQLite
• FreeType
• LibWebCore
• SGL (Skia Graphics Engine)
• SSL
• Libc
• 3D библиотеки
Компоненти каркаса:
• набір представлень (Views)
• контент-провайдери (Content Providers)
• менеджер ресурсів (Resource Manager),
• менеджер сповіщень (Notification
Manager),
• менеджер дій (Activity Manager)
• менеджер місця розташування (Location
Manager)

4.

2.Основні види Android-додатків
Додатки переднього плану
Фонові додатки
Змішані додатки
Віджети

5.

3. Огляд інтерфейсу Android

6.

7.

Шрифти

8.

Масштабування
№
1
2
3
4
5
6
Позначення
LDPI
MDPI
HDPI
XHDPI
XXHDPI
XXXHDPI
Назва
Low density
Medium density
High density
Extra-high density
Extra-extra!-high density
Extra-extra-extra!-high
density
Відповідність
120 dpi
160 dpi
240 dpi
320 dpi
480 dpi
640 dpi
1 dp =
0,75 пикселя
1 пиксель
1,5 пикселя
2 пикселя
3 пикселя
4 пикселя

9.

Розміри елемента кратні 48dp
Приклад розташування елементів
управління

10.

4. Створення якісного інтерфейсу
Принципи проектування взаємодії:
• цінності проектування
• концептуальні засади
• поведінкові принци
• інтерфейсні принципи
Цінності проектування. Проектні рішення мають бути:
• Етичні
• Прагматичні
• Цілеспрямовані
• Елегантні
Цілі шаблонів проектуваннявзаємодії
• скоротити час і зусилля, витрачені на проектування в нових проектах;
• підвищити якість проектних рішень;
• сприяти поліпшенню комунікації між проектувальниками і програмістами;
• підвищити професійний рівень проектувальників.
Типи шаблонів проектування взаємодії
• Шаблони позиціонування
• Структурні шаблони
• Поведінкові шаблони

11.

Для смартфону
Для планшета

12.

5. Візуальний дизайн інтерфейсів
Основні блоки візуального дизайну інтерфейсів
• Форма
• Розмір
• Колір
• Яскравість
• Напрямок
• Текстура
• Розташування

13.

Принципи візуального дизайну інтерфейсів
При створенні графічних інтерфейсів слід:
• Використовувати візуальні властивості для угруповання
елементів і створення чіткої ієрархії.
• Використовувати цілісні, несуперечливі і відповідні
контексту образи.
• Інтегрувати візуальний стиль з функціональністю
осмислено і послідовно.
• Уникати візуального "шуму" і безладу.

14.

• Створювати візуальну структуру і прокладати логічний маршрут на кожному
рівні організації.

15.

Інформація, представлена візуально,
повинна:
• Сприяти візуальному порівнянню
• Показувати причинно-наслідковий
зв'язок
• Відображати відразу кілька
величин
• Об'єднувати текст, графіку і дані в
одному зображенні
• Гарантувати якість, релевантність і
цілісність даних
• Групувати об'єкти в просторі, а не в
часі
• Представляти числові дані в
числовому вигляді

16.

Поведінка вікон і визначення компоновки:
• зайві вікна
• важливі вікна
• засмічування вікнами

17.

Проектування для різних
потреб:
• Командні вектори, робочі
набори і персонажі
• Персоналізація і настройка
• Локалізація і глобалізація
• Колекції та шаблони
• Довідка

18.

6. Архітектура програми, основні компоненти
Основні компоненти Android-додатків
• Активності (Activities).
• Сервіси (Services).
• Контент-провайдери (Content providers).
• Приймачі широкомовних повідомлень
(Broadcast Receivers).

19.

Ієрархія класів Android SDK

20.

Ієрархія компонентів, що визначає компоновку інтерфейсу
користувача

21.

Передача намірів(Intent)

22.

Активності (Activities)
Активність - вікно, що містить графічний інтерфейс користувача.
Методи, що викликаються системою для управління
життєвим циклом активності:
• onCreate()
• onRestart()
• onStart()
• onResume()
• onPause()
• onStop()
• onDestroy()
Активність може існувати в одному з трьох станів
• Виконується (running).
• Припинено
• Зупинено

23.

Життєвий цикл активності

24.

Сервіси (Services)
Два способи існування сервісів:
• сервіс запущений (started) і працює самостійно у фоновому
режимі
• сервіс прив'язаний (bound) до деякого компоненту або
декільком компонентам
При створені сервіса реалізують методи
• onStartCommand()
• onBind()
• onCreate()
• onDestroy()

25.

Життєвий цикл сервиса

26.

Контент-провайдери (Content Providers)
Контент-провайдер управляє доступом до сховища
даних.
У мобільних додатках контент-провайдери
необхідні в таких випадках:
• програма надає складні дані або файли інших
додатків;
• додаток дозволяє користувачам копіювати складні
дані в інші програми;
• програма надає спеціальні варіанти пошуку,
використовуючи пошукову платформу (framework).

27.

Дані, з якими працюють контент-провайдери, можуть бути
організовані двома способами:
• Дані представлені файлом, наприклад, фотографії, аудіо чи
відео
• Дані представлені деякою структурою, наприклад,
таблиця, масив
При створенні класу-спадкоємця від класу ContentProvider
в реалізації класу необхідно перевизначити обов'язкові
методи:
query()
insert()
update()
delete()
getType()
onCreate()

28.

Можна виділити два різновиди широкомовних
повідомлень
• Нормальні широкомовні повідомлення
• Спрямовані широкомовні повідомлення

29.

Маніфест додатку - файл AndroidManifest.xml
Маніфест додатку містить всю необхідну інформацію,
використовувану системою для запуску і виконання програми.
Основна інформація, що міститься в маніфесті:
• Ім'я Java пакету програми.
• Опис компонентів програми.
• Визначення процесів.
• Оголошення повноважень, якими має володіти додаток для доступу до
захищених частинах API та взаємодії з іншими додатками.
• Оголошення повноважень, якими повинні володіти інші програми для взаємодії з
компонентами даного.
• Список допоміжних класів, які надають інформацію про хід виконання програми.
• Визначення мінімального рівня Android API для програми.
• Список бібліотек пов'язаних з додатком.
У файлі маніфесту тільки два елементи: <manifest> і <application> є обов'язковими і при
цьому зустрічаються рівно по одному разу

30.

<?xml version="1.0" encoding="utf-8"?>
<manifest>
<uses-permission />
<permission />
<permission-tree />
<permission-group />
<instrumentation />
<uses-sdk />
<uses-configuration />
<uses-feature />
<support-screens />
<compatible-screens />
<supports-gl-texture />
<application>
<activity>
<intent-filter>
<action />
<category />
<data />
</intent-filter>
<meta-data />
</activity>
<activity-alias>
<intent-filter> … </intent-filter>
<meta-data />
</activity-alias>
<service>
<intent-filter> … </intent-filter>
<meta-data />
</service>
<receiver>
<intent-filter> … </intent-filter>
<meta-data />
</receiver>
<provider>
<grant-uri-permission />
<meta-data />
<path-permission />
</provider>
<uses-library />
</application>
</manifest>

31.

32.

Ресурси
Кожен тип ресурсів необхідно розміщувати в
спеціальній піддиректорії папки res /. Основні
підкатегорії:
animator/
anim/
color/
drawable/
layout/
menu/
values/

33.

Щоб визначити залежні від конфігурації альтернативи
для множини ресурсів:
1. необхідно створити директорію в каталозі res /,
присвоїти цій директорії ім'я в такій формі: ім'я_ресурсуспеціфікатор_конфігураціі, де
o ім'я_ресурсу - ім'я директорії, відповідного ресурсу
за замовчуванням (див. вище);
o спеціфікатор_конфігураціі - ім'я, що визначає
конфігурацію, для якої використовуються дані
ресурси.
2. необхідно зберегти ресурси в новій директорії, файл
ресурсів повинен називатися в точності так само, як
відповідний файл ресурсів за замовчуванням.
res/layout/
res/layout-land/

34.

6. Елементи управління та дизайн навігації
командні елементи управління
елементи вибору
елементи введення
елементи відображення
Командні елементи управління
• Кнопки
• Кнопки-значки
• Гіперпосилання
• Прапорці
• Вимикачі
• Тригери
• Радиокнопки
• Списки
• Комбо-списки і комбо-кнопки

35.

36.

37.

Елементи введення:
Обмежуючі елементи введення
• Лічильники
• Рукоятки та повзунки
Необмежуючі елементи введення
Елементи управління відображенням
• текстові елементи
• смуги прокрутки
• роздільники
• висувні панелі