ПРОЄКТУВАННЯ ТА РЕДАГУВАННЯ ОНЛАЙН-МЕДІА ТА МОБІЛЬНИХ ДОДАТКІВ ІЩУК НАТАЛІЯ МИХАЙЛІВНА
© Іщук Наталія, 2020
СТРУКТУРА ДИСЦИПЛІНИ Модуль 1. Теорія проєктування мобільних додатків Модуль 2. Практика створення мобільних додатків (Android Studio)
ОЦІНЮВАННЯ Завдання на практичних заняттях Самостійна робота Творчі роботи Мініпроєкти
11/8/20
ПЛАН 1 МОДУЛЯ «ТЕОРІЯ ПРОЄКТУВАННЯ МОБІЛЬНИХ ДОДАТКІВ»
Розвиток операційних систем для смартфонів: Android, IOS, Blackberry
Wireframes, Mockups, Prototypes (каркас, макет, прототип мобільного додатку)
UX-дизайн та психологія мобільних користувачів
Елементи навігації та інтерфейсу мобільних додатків (IOS/Android)
Тренди в дизайні мобільних додатків 2020
Дизайн мобільних додатків (UI) і користувацький досвід (UX): правильно/неправильно Датчики смартфону
ПЛАН 2 МОДУЛЯ «ПРАКТИКА СТВОРЕННЯ МОБІЛЬНИХ ДОДАТКІВ (ANDROID STUDIO)»
Створення нового проєкту
Оголошення змінних
Нові сторінки макету
Клікабельна кнопка
Робота з емулятором
Додавання тексту
Додавання зображення
РОЗВИТОК ОПЕРАЦІЙНИХ СИСТЕМ ДЛЯ СМАРТФОНІВ: ANDROID, IOS, BLACKBERRY
Його вартість становила 499$ та 599$ (подвоєна пам’ять)
ІСТОРІЯ ОС ANDROID Історія компанії Android Inc. розпочалася у 2003 році, коли 4 програміста Річ Майнер, Нік Сірс, Кріс Вайт та
Енді Рубін вирішили заснувати компанію в Пало-Альто (Каліфорнія), яка мала виготовляти програмне забезпечення для цифрових камер.
Компанія зосередилася на ринок мобільних телефонів. До 2005
року витратила всі кошти і збанкрутіла.
У 2005 р. Google придбав Android Inc. Енді Рубін очолив розробку
ОС для кнопочних телефонів. Першими проєктами були завантажені карти із системою GPS.
У 2007 р. Apple представила свій перший iPhone.
Того ж року Google запустила першу
Google Sooner (HTC EXCA 300), без сенсорного екрану
бета-версію ОС для розробників, а в 2008 р. – перший смартфон на новій операційній системі T-Mobile G1 (HTS Dream).
HTS Dream не набула значної популярності. У
цієї моделі навіть не було роз’єму для навушників( Однак Android ОС мала довгострокові плани,
тому в неї вже були інтегровані основні сервіси: пошуковик, YouTube, Google Maps та HTML-браузер, встановлено прототип Google Play — Android Market. Візуально перший смартфон на Android ОС був
подібний до іншого конкурента — Blackberry.
HTS Dream
Перші версії операційної системи не мали офіційних назв. Офіційні назви розпочалися з виходом версії
1.5 Cupcake, 2009 р. З’явилася підтримка віджетів і папок на робочому столі, можливість запису та відтворення відео в MPEG-4. 1.6 Donut, 2009 р.
У галереї додана можливість виділяти одразу кілька об’єктів для видалення, оновлено функції пошуку тощо. 2.0-2.1 Eclair, 2009 р.
Стало можливим дізнаватися інформацію про затори, прокладати маршрути та користуватися голосовою навігацією. 2.2–2.2.3 Froyo, 2010 р.
можливість створювати точку доступу Wi-Fi 2.3–2.3.7 Gingerbread, 2010 р.
з’явилася функція NFC – оплата покупки за допомогою смартфона.
Наступні версії Android мали такі назви: Honeycomb, Ice Cream Sandwich, Jelly Bean, KitKat, Lollipop,
Marshmallow, Nougat, Oreo (з’явилося розпізнавання жестів), Pie, Android 10.
НОВА ОПЕРАЦІЙНА СИСТЕМА До 2022 р. у Google планують замість Android OS випустити нову ОС під назвою Fuchsia. Замість ядра Linux
вона буде використовувати ядро Zircon, також система буде заточена під голосове керування. Fuchsia зможе працювати як на смартфонах, так і на інших «розумних» пристроях, пізніше Google збирається впровадити ОС і в ноутбуки.
ДИНАМІКА ЗМІН ОС У СВІТІ
КОМПАНІЯ BLACKBERRY Канадійська телекомунікаційна компанія, відома як виробник бізнес-смартфонів BlackBerry. У 1997 році представлено перший пристрій від торгової марки BlackBerry.
Еволюція моделей Blackberry
BLACKBERRY ОС
Операційна система канадійської компанії RIM
Спочатку встановлювалася на бортові ПК автомобілей. Розроблена на основі ОС QNX, основана на архітектурі мікроядра. BlackBerry Hub у моделі BlackBerry 10 У 2017 році збитки компанії складали $1,2 млрд
Ядро QNX
BlackBerry Hub
WIREFRAMES, MOCKUPS, PROTOTYPES КАРКАС, МАКЕТ, ПРОТОТИП МОБІЛЬНОГО ДОДАТКУ
Wireframes (low fidelity). Каркас – низько деталізована презентація кожного екрану, зазвичай у ч/б. Каркаси неінтерактивні! Подаються у спрощеній формі у вигляді креслень. Є важливою частиною документації.
Цифрова епоха = цифровий каркас?
СТВОРЕННЯ КАРКАСУ НА ПАПЕРІ ЗА ДОПОМОГОЮ ТРАФАРЕТІВ UISTENCILS.COM •
Стікери
•
Блокноти
•
Олівці для трафаретів
•
Штампи
Mockup (макет) – більш деталізований, є колір, графіка, текст. Макет також неінтерактивний, статичний
Прототип – це інтерактивний макет, в якому переходи є клікабельними. Кількість прототипів обмежена, адже вони займають більше часу. Прототип використовується під час тестування ще нествореного додатку користувачами.
marvelapp.com Відео зі створення прототипу https://marvelapp.com/blog/prototyping-101-ultimate-guide/ Відео про тестування прототипу https://help.marvelapp.com/hc/en-us/articles/360002558237 Власний зразок https://marvelapp.com/prototype/eijf77a
https://www.axure.com Потребує скачування цього сервісу на комп’ютер, 30 днів пробної версії
https://proto.io/ (відео)
https://www.uxpin.com/ Є широкі можливості для створення інтерактивних елементів (не тільки кнопки, але і статичні елементи, які можуть розгортатися). Можна додавати код для коригування дизайну. Сервіс підтримує логіку щодо заповнення полів форми (логін, пароль тощо).
https://www.fluidui.com Є ознайомлювальне відео, немає можливості обрати андроїд як проєкт (лише версії iphone, інші гаджети, а також діагоналі смартфонів)
https://www.flinto.com/ Сервіс реалізує моушн-ефекти, ефектні переходи, змахування, скроллінг, звукові ефекти, підтримує відео у додатку прототипу тощо. Однак доступний лише для MacOS та IOS.
https://www.invisionapp.com/ (відео) Є блог на ютюбі, пов’язаний не лише з новими функціями даного сервісу, але й містить корисні відео про дизайн, бізнес-мислення для дизайнерів тощо. Наприклад, додаток Uber створювався за допомогою даного сервісу.
UX-ДИЗАЙН ТА ПСИХОЛОГІЯ МОБІЛЬНИХ КОРИСТУВАЧІВ
Мобільне мислення
Активний дизайн
Колір мобільного додатку
ТИСК ЧАСУ І ПОВЕДІНКА КОРИСТУВАЧА Тип мислення – «на ходу» Заволодіти увагою на тлі конкуренції Поведінка користувача під час роботи за комп’ютером і на смартфоні відрізняється Мобільні користувачі ухвалюють рішення в умовах багатозадачності. Такі ситуації Google називає мікро-
моментами.
«МОБІЛЬНЕ» МИСЛЕННЯ Уявні Тимофій і Вадим бронюють готель Обмеженість у часі формує стрес. Користувач фокусується на головній меті Дослідження: аудиторії запропонували обрати автомобіль із 30 гіпотетичних моделей з п’ятьма
характеристиками до кожної. Також їм обмежили час на ухвалення рішення. Як формувався їх вибір?
ПСИХОЛОГІЧНІ МЕХАНІЗМИ Нестача часу дає можливість, наприклад, маркетологам заволодіти увагою користувача і вплинути на їх вибір. Чому часом користувачі не взаємодіють із продуктом, як планувалося? Не виконують очікувану дію (наприклад,
передплата, купівля тощо)? Корисні інтерфейси створюються на основі психологічних механізмів.
МОТИВАЦІЯ І ЗМІНА ПОВЕДІНКИ КОРИСТУВАЧА Стартап Pact платив гроші своїм користувачам. Facebook запустив мобільний додаток Viewpoints, де користувачі отримують бали за проходження опитувань,
які потім можна вивести на рахунок PayPal. Однак додаток поки працює лише на території США. Компанія планує поширити цей сервіс у 2020 році.
Pact
Viewpoints
Як мотивувати людину користуватися додатком, пов’язаним із спортом?
Мотивація буває 2 видів: зовнішня і внутрішня. Зовнішня мотивація краще працює, коли відсутня внутрішня. Результати досліджень доводять: якщо людині подобається певна діяльність, винагорода як мотивація може
спровокувати зворотній ефект. Як же знайти золоту середину?
У проєкті Freeletics (додаток, що популяризує інтенсивні навантаження для підтримки спортивної форми)
вимагають мати базову підготовку, тож люди, що звикли до фізичних вправ отримують від них задоволення (інакше б не досягли базового рівня).
У межах проєкта використовуються зовнішні стимули у формі зірочок за певні завдання.
МОТИВАЦІЯ, МОЖЛИВІСТЬ І ТРИГЕРИ (МОДЕЛЬ БІ ДЖЕЙ ФОГГА) На жаль, мотивації буває недостатньо. Велосипедні
перегони без велосипеда( Суть моделі полягає в тому, що для специфічної
поведінки необхідна наявність одночасно трьох складників: МОТИВАЦІЇ, МОЖЛИВОСТІ та ТРИГЕРІВ. Ситуація: у людини є можливість взяти участь у велоперегонах, своїм додатком ви нагадали про цю події, але на вулиці йде дощ? Якого компоненту моделі може забракнути?
КАРТА МОТИВАЦІЇ КОРИСТУВАЧА Щоб розробити успішний проєкт, потрібно дібрати три складники: мотивація, можливість, тригери до певної цільової аудиторії.
Вік, стать, місце проживання (місто/селище). Яка причина могла б змінити їх поведінку сьогодні, а не завтра? Який характер їх мотивації: зовнішній чи внутрішній?
Найкращий спосіб зібрати цю інформацію – контекстуальне опитування.
Приклад із додатками для бігу: RunKeeper, Map my run
ВИБІР ТРИГЕРІВ Мобільні технології дають змогу отримувати сповіщення в точний час.
Однак користувач смартфону стикається з багатьма сповіщеннями. І що ж робити? Або інша ситуація, сповіщення про заняття спортом надійшло тоді, коли людина їхала на роботу. Інтереси користувача мають враховуватися.
ЕЛЕМЕНТИ ЧАСУ В ДИЗАЙНІ За 0,05-0,25 сек людина ухвалює рішення, чи достойний певний ресурс уваги. Відчуває смуток під час очікування завантаження сторінки. Девід Мелуф – консультант з дизайну вважає, що саме час відрізняє дизайн взаємодії від інших складників
користувацького досвіду (UX). Час – дещо більше, аніж просто лінійна прогресія, адже взаємодія може відбуватися впродовж тривалого періоду.
Мелуф розглядає час із трьох позицій: ТЕМП, ШВИДКІСТЬ РЕАГУВАННЯ, КОНТЕКСТ.
1. Темп. З точки зору веб-дизайну темп показує, скільки дій користувач може виконати за певний проміжок часу. Чим більше, тим краще?
Довга форма реєстрації розбита на 4 логічних кроки
2. ШВИДКІСТЬ РЕАГУВАННЯ Швидкість реагування має пряму кореляцію зі ступенем контролю в роботі користувача. Згідно Якоба Нільсена існує 3 діапазони часу: Менше 1 сек – пряме керування – користувач відчуває, що система миттєво реагує на
його дії. Більше 1 сек – опосередковане керування – користувач відчуває затримку, але
відчуває, що керую сайтом Понад 10 сек – відсутність керування – конверсія наближається до 0.
Варто розуміти, що швидкість реагування залежить від складності виконуваної задачі. Наприклад, завантаження додатка впродовж 3 сек буде адекватною. Однак очікування переліку, що випадає – є неприйнятною.
КОНТЕКСТ.
На сприйняття часу впливає ЯК, ДЕ і НАВІЩО використовується додаток. (дома на дивані чи в черзі в торговельному центрі). Вважається, що правило 3 кліків більше не працює. Тож шлях до мети має бути максимально легким, не обов’язково швидким. Interaction design покликаний спростити роботу користувача з ресурсом, зробити її зручною, легкою та інтуїтивною.
КОЛІР МОБІЛЬНИХ ДОДАТКІВ Чому Фейсбук синього кольору? Перше, що бачать користувачі – це іконку в маркеті додатків. 92,6% людей вважають, що візуальний аспект більше за все впливає на ухвалення рішення, більше ніж смак і запах тощо. Колірні асоціації:
КОЛІРНІ АСОЦІАЦІЇ: Довіра: синій, білий, зелений Безпека: синій, чорний, зелений Швидкість: червоний Дешевизна: помаранчевий, жовтий, коричневий Висока якість: чорний, синій Високі технології: чорний, синій Надійність: синій, чорний Хоробрість: фіолетовий, червоний, синій Страх: червоний, чорний Сміх: помаранчевий, жовтий, фіолетовий
КОЛІР ЗАЛЕЖНО ВІД СТАТІ За даними Kissmetrics Жінкам подобається: синій, фіолетовий, зелений. Ненавидять: помаранчевий, коричневий і сірий. Чоловікам подобається: синій, зелений, червоний. Ненавидять: коричневий, помаранчевий, фіолетовий.
ЕЛЕМЕНТИ НАВІГАЦІЇ ТА ІНТЕРФЕЙСУ МОБІЛЬНИХ ДОДАТКІВ IOS/Android
ЧЕКБОКСИ
ПЕРЕМИКАЧІ
ДРОПДАУН
РАДІОБАТТОН
БРЕДКРАМБ
АКОРДЕОН-МЕНЮ
АКОРДЕОН-МЕНЮ
HAMBURGER MENU ICON
BENTO MENU ICON
KEBAB MENU ICON
MEATBALL MENU ICON
СЛАЙДЕР «КАРУСЕЛЬ»
SLIDER CONTROLS
ФОРМА
ПОЛЯ ВВОДУ (INPUT FIELD)
ЯК НАЗИВАЄТЬСЯ НАПІВПРОЗОРЕ СЛОВО В ПОЛІ?
LOADER
ЯК НАЗИВАЄТЬСЯ ЦЕЙ ЕЛЕМЕНТ?
«TOAST» MESSAGE
PICKER
STEPPER
TAB BAR
SIDEBAR
PROGRESS BAR
НАВІГАЦІЯ «ПО КЕРМУ»
ТРЕНДИ В ДИЗАЙНІ МОБІЛЬНИХ ДОДАТКІВ 2020
1. ЛАКОНІЧНИЙ ДИЗАЙН, МІНІМАЛІЗМ
2. ГОЛОСОВІ ІНТЕРФЕЙСИ
3. ПЕРСОНАЛІЗАЦІЯ КОНТЕНТУ Боротьба за споживача/користувача шляхом правильних налаштувань алгоритмів на основі Data Science
ПЕРСОНАЛІЗАЦІЯ ІНТЕРФЕЙСУ Налаштування теми екрану (наприклад, тла) Переміщення, порядок елементів, блоків Приховування, відключення непотрібних елементів
4. ТЕМНІ ТЕМИ
5. НЕОМОРФІЗМ, МАТЕРІАЛЬНИЙ ДИЗАЙН
6. ЕЛЕМЕНТИ ДОПОВНЕНОЇ РЕАЛЬНОСТІ
https://www.youtube.com/watch?v=B9G0P_hS3qk Змішана реальність: інструменти ARCore від Google та AEKit від Apple https://rusability.ru/usability/trendy-dizajna-prilozhenij-na-2020-god/
У ВЕРЕСНІ 2019 р. Додаток Zao за три дні опинився у топі App Store в Китаї.
Він використовує нейромережеву технологію Deepfake і змінює обличчя актора зображенням користувача.
Будь-хто може стати головним героєм фільму, серіалу або гри.
7. ДИВЕРСИФІКАЦІЯ ТА КОНВЕРГЕНЦІЯ СЕРВІСІВ
8. ЖЕСТИ ЗАМІСТЬ ЦИФРОВИХ КНОПОК 9. АНІМАЦІЯ ТА МІКРО-ЕФЕКТИ 10. 3D ЕФЕКТИ В ДИЗАЙНІ МОБІЛЬНОГО ДОДАТКУ
11. MOTION КОНТЕНТ 12. UGC (БЛОГІНГ)
13. НАВІГАЦІЯ ВНИЗУ ЕКРАНА
ДИЗАЙН МОБІЛЬНИХ ДОДАТКІВ (UI) І КОРИСТУВАЦЬКИЙ ДОСВІД (UX) ПРАВИЛЬНО/НЕПРАВИЛЬНО
УСУНЕННЯ КОНФЛІКТУ UI/UX ФАХІВЦІ GOOGLE РАЗОМ ІЗ КОМПАНІЄЮ ANSWERLAB ПРОВЕЛИ ДОСЛІДЖЕННЯ НА ОСНОВІ 100 ДОДАТКІВ ІЗ АБСОЛЮТНО РІЗНИХ ГАЛУЗЕЙ: ЕЛЕКТРОННА КОМЕРЦІЯ, ТУРИЗМ, СТРАХУВАННЯ, ДОСТАВКА ЇЖІ, БРОНЮВАННЯ КВИТКІВ І РІЗНИХ ВИДІВ ПОСЛУГ (В ДОСЛІДЖЕННІ НЕ БУЛИ ВРАХОВАНІ ІГРОВІ ТА МУЗИЧНІ ДОДАТКИ, А ТАКОЖ СОЦІАЛЬНІ МЕРЕЖІ).
УВАГА ДОСЛІДНИКІВ БУЛА ЗОСЕРЕДЖЕНА НА ТАКИХ ЗАДАЧАХ, ЯК ЗДІЙСНЕННЯ ПОКУПКИ, БРОНЮВАННЯ МІСЦЬ ТОШО. УСІ ВИСНОВКИ, ОТРИМАНІ В РЕЗУЛЬТАТІ ДОСЛІДЖЕННЯ, БУЛИ РОЗПОДІЛЕНІ НА КІЛЬКА КАТЕГОРІЙ: НАВІГАЦІЯ ПО РОЗДІЛАХ, ПОШУК ІНФОРМАЦІЇ ВСЕРЕДИНІ ДОДАТКУ, КОНВЕРСІЯ? ТА ЗДІЙСНЕННЯ ПОКУПКИ, РЕЄСТРАЦІЯ, ЗАПОВНЕННЯ ФОРМ ТА ЮЗАБІЛІТІ.
РІЗНИЦЯ В ОФОРМЛЕННІ МОБІЛЬНОГО ДОДАТКУ І САЙТУ (МОБІЛЬНОЇ ВЕРСІЇ)
РЕЄСТРАЦІЯ ЯК БАР’ЄР
ФУНКЦІОНАЛЬНИЙ ПОШУК
КОРЕКЦІЯ КЛАВІАТУРИ ПІД ЧАС ПРОГРАМУВАННЯ
ВИКОРИСТАННЯ ЗРОЗУМІЛИХ ІКОНОК
ПРАВИЛО 5 СЕКУНД
РЯДОК ПОШУКУ
ФІЛЬТРАЦІЯ КОНТЕНТУ
РЕЄСТРАЦІЯ/АВТОРИЗАЦІЯ
НОВІ ШЛЯХИ АВТОРИЗАЦІЇ
ВАЛІДАЦІЯ DATA-ІНФОРМАЦІЇ
ОПЛАТА В МОБІЛЬНОМУ ДОДАТКУ
РЕДАГУВАННЯ МЕТОДУ ОПЛАТИ
МОЖЛИВІСТЬ ПОРІВНЮВАТИ
ЗБІЛЬШЕННЯ ОБ’ЄКТІВ ЗА ПОТРЕБОЮ
ЖАРГОННА ЛЕКСИКА НЕ ВІТАЄТЬСЯ
ЗАПИТ ГЕОЛОКАЦІЇ
ВИКОРИСТАННЯ КАЛЕНДАРЯ У ФОРМІ
ФУНКЦІОНАЛЬНИЙ ЗАКЛИК ДО ДІЇ
ЧІТКА КАТЕГОРИЗАЦІЯ
КОЛІР КНОПОК І ТЕКСТУ В ПОЛЯХ
НЕПРАВИЛЬНО
ПРАВИЛЬНО
ДАТЧИКИ СМАРТФОНУ
АКСЕЛЕРОМЕТР – (акселеро – «прискорюю», метр – «вимірюю»). Такий датчик вимірює прискорення тіла (смартфона), що рухається по трьох осях координат. Саме акселерометр допомагає змінювати орієнтацію екрана з портретної на ландшафтну.
ГІРОСКОП – («обертання» і «дивитися»). Зазвичай працює разом із акселерометром і доповнює його. Гіроскоп фіксує кут нахилу пристрою, вимірюючи швидкість кутового обертання. Похибка відкаліброваного гіроскопу становить 1-2°
Використовується в мобильних іграх, додатках для фотозйомки, для оптичної стабілізації в камерах, дронах, що
керуються смартфоном. Так само як і акселерометр, гіроскоп є популярним датчиком і встановлюється нині на кожен смартфон.
МАГНІТОМЕТР – сенсор для вимірювання магнітного поля. Має вигляд мініатюрного датчика на основі ефекту Холла*. Він реєструє зміну магнітного поля по трьох осях, використовується у навігаційних і різних картографічних додатках для підвищення точності визначення місцезнаходження. Також без цього датчика не буде працювати цифровий компас у смартфоні. *Датчик Холла просто фіксує зміну магнітного поля без прив’язки до осей. Такі властивості використовуються для спеціальних чохлів, у які вбудовано магніти. Відкриваючи кришку такого чохла екран смартфону автоматично увімкнеться чи навпаки.
Ефект Холла
ДАТЧИК НАБЛИЖЕННЯ Дає змогу вимикати екран телефона під час розмови. Така
функція створює можливість економити заряд пристрою, а також попереджає випадкові натискання. На основі цього датчика реалізується ще одна цікава функція –
розпізнавання жестів, щоб керувати деякими функціями смартфону навіть не торкаючись екрану.
Зазвичай датчик наближення розташовується у верхній частині
телефону – поруч із фронтальною камерою. На деяких девайсах «віконце» датчика добре видно, а на інших – неозброєним оком воно не помітне.
Розташування датчика
ДАТЧИК ОСВІТЛЕННЯ Вимірює яскравість освітлення навколо смартфону. На основі цих даних ОС підвищує або знижує
яскравість екрану, корегує енерговитрати смартфону. Більш модифіковані версії смартфонів можуть аналізувати складники RGB кольорів та згідно цього підлаштовувати кольори дисплею.
БАРОМЕТР датчик для вимірювання атмосферного тиску. Може використовуватися в деяких додатках (навігаційних,
вимірювальних) для визначення висоти над рівнем моря. Робить він це, вираховуючи різницю атмосферного тиску. Токож підвищує точність і швидкість роботи систем GPS. Наприклад, фіксуючи постійно висоту об’єкта відносно рівня моря, можна відстежити його переміщення не тільки в горизонтальній площині, а й у вертикальній. Щоб перевірити мобільний додаток Барометр, можна піднятися ліфтом чи сходами і перевірити різницю. Також
вимкнути GPS та інтернет. Важливо, щоб він працював без GPS та інтернету.
ТЕМПЕРАТУРНИЙ ДАТЧИК сенсор вимірює температуру.
Буває двох видів: Внутрішній – для вимірювання температури модулей смартфона, потрібний для контроля нагрівання та
попередження перегріву компонентів. Присутній у багатьох пристроях. Зовнішній – для вимірювання температури навколишнього середовища. Може використовуватися як звичайний
термометр та для різноманітних фітнес-додатків. І цей датчик радше рідкість, аніж звичність.
ДАТЧИК ВОЛОГОСТІ ПОВІТРЯ Разом із температурним датчиком і барометром може виконувати функції просунутої метеостанції. Допомагає
дізнаватися, чи не пересушуєте ви повітря, наскільки комфортною є погода на вулиці (співвідношення температури й вологості).
ПЕДОМЕТР рахує кількість пройдених кроків і корисний для відстежування активності. Головне, щоб смартфон був увесь час з вами.
ПУЛЬСОМЕТР За запитом вимірює частоту серцебиття.
СКАНЕР ВІДБИТКІВ ПАЛЬЦІВ Біометричний датчик, покликаний підвищити безпеку пристрою.
ДОЗИМЕТР Датчик вимірювання радіації. Компанія Sharp додала такий датчик після аварії на атомній електростанції в Японії.
ТЕХНОЛОГІЯ IBEACON Розроблена компанією Apple встроена в iPhone и iPad под управлением iOS 7
НЕ ЛИШЕ ДЛЯ РИТЕЙЛУ Інтерактивна екскурсія музеєм. На картину чи експонат
встановлюються маячки, і під час наближення на смартфоні програється інформація про експонат.
• Маячки можна развішати на пам’ятники та об’єкти архітектури. Усе місто перетворюється на музей. • Як навігація для сліпих. Під час потрапляння в зону маячка програється голосове повідомлення, де людина знаходиться і куди їй рухатися далі.
ЯК ЕЛЕМЕНТ НАВІГАЦІЇ У торговельних центрах і всередині великих приміщень, щоб забезпечити
навігацію у межах одного приміщення і на різних поверхах. На карті відображається місцерозташування людини у приміщенні та на певному поверсі. Підходить для навігації в торговельних центрах, аеропортах, на виставках і конференціях.
ВІДЕООГЛЯД ТЕХНОЛОГІЇ IBEACON https://www.youtube.com/watch?v=bIKORUp63Rk&feature=youtu.be Про складнощі запуску інноваційних технологій на пострадянському просторі (на прикладі Росії)
https://www.youtube.com/watch?v=fVk4qn7m-LQ Amazone Go. Приклад шопінгу з мобільним додатком.
https://ain.ua/2016/12/05/amazon-zapustil-magazin-bez-kass/
ANDROID STUDIO •
СТВОРЕННЯ НОВОГО ПРОЄКТУ
•
РОБОТА З ЕМУЛЯТОРОМ
•
ОГОЛОШЕННЯ ЗМІННИХ
•
ДОДАВАННЯ ТЕКСТУ
•
НОВІ СТОРІНКИ МАКЕТУ
•
ДОДАВАННЯ ЗОБРАЖЕННЯ
•
КЛІКАБЕЛЬНА КНОПКА
СТВОРЕННЯ НОВОГО ПРОЄКТУ 1.
Натиснути у програмі FileNew-New Project
2.
Обрати тип Empty Activity
3.
Натиснути Next.
4. Додати назву проєкту 5. Обрати мову Java 6. Minimum SDK: API 16 7. Натиснути Finish *Якщо виникнуть проблеми, то перевірити назви папок, куди зберігається файл. Вони мають бути названі латиницею.
11/8/20
СТРУКТУРА ДОКУМЕНТА 1.
Натиснути на трикутничок, щоб розгорнути структуру
2.
Натиснути на трикутник, щоб розгорнути manifests, java, res
3.
Натиснути ще на трикутник, щоб розгорнулася перша папка директорії Java і layout
4.
У робочому варіанті все має виглядати як на четвертій фото.
РОБОТА З МАКЕТОМ. ДИРЕКТОРІЯ RES-LAYOUT 1. Натиснути двічі по activity_main.xml. Макет доступний у двох варіантах: код та дизайн 2. Перейти у варіант Дизайн (зверху праворуч)
ВАРІАНТИ ВИГЛЯДУ ДИЗАЙНУ МАКЕТНОЇ СТОРІНКИ А) лише біла Б) лише креслення В) Біла + креслення * Найважливіше, щоб була біла сторінка.
11/8/20
РОБОТА З PALETTE 1.
Натиснувши на блок, його можна видалити клавішею Delete. Якщо не видалилося з першого разу, натиснути кілька разів (значить ви видаляли прив’язки, а не сам блок).
2.
Обрати на Palette TextView і потягнути на екран
3.
Розташувати блок по центру і розтягнути (потягнувши за діагональну точку)
4.
Змінити id на якесь інше, наприклад, text_one
Про всяк випадок можна натиснути Enter.
11/8/20
5. Прив’язати блок до сторін екрану, як на фото 6. Потягнути трішки вгору, як на другій фото.
TextView – це текстовий блок для відображення тексту без можливості його редагування користувачами. Тобто користувач читатиме текст, клавіатура відкриватися не буде. Інші варіанти текстових блоків дають доступ до клавіатур, але про них пізніше.
11/8/20
7. Обираємо на Palette об’єкт Button і тягнемо на наш екран під текст 8. Розташовуємо по центру 9. Прив’язуємо кнопку до боків, до низу екрану і до текстового блоку. 10. Змінюємо id нашої кнопки на якесь інше, наприклад, button_one ! Назви id мають бути з малої літери, без пробілів. Допускається велика літера всередині слова, нижнє підкреслення.
11/8/20
Двічі клацнути
Має відкритися код
РОБОТА З ДИРЕКТОРІЄЮ JAVA (MAINACTIVITY) Усі витягнуті елементи з Palette мають бути ініціалізовані в Java. Деякі класи вимагають також імпорту їх бібліотек. Далі це буде розглянуто покроково.
ОГОЛОШЕННЯ ССИЛОЧНИХ ЗМІННИХ У ДИРЕКТОРІЇ JAVA 1.
Стати наприкінці рядочка після крапки з комою і натиснути Enter. Важливо, щоб фігурні скобочки були нижче. Їх рівень не має значення. Enter можна натискати скільки завгодно разів.
2.
Ініціалізуємо змінні через метод FindViewById. Прописуємо рядок коду, який складається з
Класу змінної (id) = findViewById Button button_one = findViewById ()
3. У дужках, які з’явилися після методу, треба написати R.id.назва змінної і обрати її з переліку. findViewById (R.id.button_one); 4. В кінці рядочку поставити ; 5.
Рядок коду має виглядати так
6.
Клас Button світиться червоним і вимагає імпорту його бібліотеки. Є підказка. Стати на слово Button і натиснути ALT+Enter, обрати Import class
7.
Button має стати білим, а імпортована бібліотека з’явитися тут (натиснути)
У такий самий спосіб оголошуємо другу змінну – TextView 1.
Пишемо назву класу, потім назву змінної (якщо забули її назву, зайти в layout і подивитися, як назвали) = findViewById (R.id.text_one);
2.
Цей клас не потребує імпорту.
3.
Упакувати під використані класи, додати їх у дужечках.
! Оголошувати та ініціалізувати змінні потрібно абсолютно всі, які витягнуто на екран макету. У нашому випадку було лише два об’єкти – це кнопка та текстовий блок. Якщо б були інші блоки, їх так само треба описувати в Java. Те саме стосується кожної сторінки макету (layout)
СТВОРЕННЯ КІЛЬКОХ СТОРІНОК МОБІЛЬНОГО ДОДАТКУ 1.
Правою клавішею мишки клацнути по макетній сторінціNew-Layout Resource File
2.
Назвати нову макетну сторінку (з малої літери без пробілів, допускається нижнє підкреслення). Наприклад, activity_second
3.
Натиснути ОК
Має з’явитися друга макетна сторінка, як у зразку. Тепер їх дві. За таким самим принципом можна зробити необхідну кількість. ! Кожна макетна сторінка пов’язано із Java класом
! Кожна макетна сторінка пов’язана із Java класом, як позначено зв’язок червоним. Тож, для activity_second.xml треба створити новий Java class Далі розглянемо це детальніше…
НОВИЙ JAVA CLASS 1.
Стати правою клавішею мишки на Java Class MainActivity
2.
Обрати New-Java Class
3.
Додати назву. Ми назвали ActivitySecond
* Назва має бути з великої літери без пробілів. Можна кілька слів, але разом.
Має вийти ось так. Червоним позначено взаємозв’язок класу та макетної сторінки з нашим дизайном. Назви варто робити схожими, щоб не губитися.
11/8/20
КОД НОВОГО JAVA CLASS Під час створення нового проєкту перша макетна сторінка (activity_main) і Java class (MainActivity) були згенеровані автоматично, тому вже містять необхідний код. Однак усі наступні потребують розширень і налаштувань. 1.
Додати розширення в ActivitySecond, ставши мишкою після назви і прописати…
2.
extends AppCompatActivity
3. Після розширення стати в кінці рядку і натиснути кілька разів Enter, щоб фігурні дужки опинилися трохи нижче, а все інше прописуємо до них. 4. Натиснути СTRL O і обрати метод OnCreate 5. Натиснути Ок.
6. Стати мишкою після методу OnCreate і натиснути Enter 7. Написати setContentView (обрати з переліку)
8. У дужках прописати R.layout.activity_second 9. Якщо все зроблено правильно, то виглядатиме так як на другому фото Цим самим ми даємо команду створити нове актівіті та показати макет нашої другої сторінки 10. Дозвіл на нове актівіті зробити в директорії manifest (деталі далі)
11/8/20
ДИРЕКТОРІЯ MANIFEST 1.
Зайти в директорію, клацнувши двічі мишкою.
2.
Стати у правильному місці, як зазначено на фото
3.
Прописати тег <activity>
3. Прописати тег <activity> (за зразком) <activity android:name=“.ActivitySecond> </activity> Якщо все зроблено правильно, то має виглядати так:
1.
Відкриваємо файл, з яким ми працюємо (не створюючи новий).
2.
Заходимо в MainActivity (директорія Java) або інша за потребою
3.
Прописуємо нашій кнопці метод OnClickListener
4.
У дужках пишемо new View.onClickListener ()
Код має виглядати так
11/8/20
5. Додаємо клас наміру, який вказує, що ми бажаємо зробити перехід з цієї актівіті на іншу. У нашому випадку intent_one – це змінна, тож у вас вона може бути названа по-іншому.
РОБОТА З ЕМУЛЯТОРОМ. ДОДАТИ ДЕВАЙС. Запуск емулятору відбувається дуже просто. У мене девайс зазначено Pixel 2 API 28. Поруч зелена кнопка Run. І все. Пристрій смартфону завантажиться і відобразить мобільний додаток. 1.
Якщо у вас не додано жодний девайс, то треба клікнути на AVD Manager
2.
Натиснути Create Virtual Device
3. Обрати девайс із потрібною діагоналлю, наприклад, Pixel 2, натиснути Next 4. Обрати API версію. Якщо поруч стоїть Download, то спочатку завантажити. Натиснути Next.
5. Обрати портретний варіант. 6. Натиснути фініш. 7. Запустити емулятор. Або з панелі параметрів
ЯК ДОДАТИ ТЕКСТ Передбачається, що документ проєкта у вас уже створено. Якщо ні – див. частину 1. 1.
Зайдіть спочатку в layout
2.
Видаліть шаблонний блок «Hello World», натиснувши Delete.
3.
Витягнути із Palette текстовий блок TextView, розташуйте, як вам потрібно. Закріпіть з усіх боків. На фото закріплено лише з двох боків, але треба з усіх.
4. Додайте необхідних атрибутів текстовому блоку. У даному випадку (кегль – 18sp, padding (внутрішні відступи) – 15dp та інші). А також id. Це лише параметри блоку, текст заливатиметься далі. 5. Заходите в директорію Java, ініціалізуєте змінну (у мене це text_main, але назвати можна так, як вам буде зрозуміліше, що це за блок). 6. Задаємо змінній text_main показати текст: text_main.setText (“Сюди додати текст”); У круглих дужках не забудьте додати лапки. Це важливо! Приклад на наступній сторінці. “/n” – означає наступний рядок Якщо між рядками додати ще “/n” + , то буде ще один порожній рядок. “/t” – створює абзацний відступ
11/8/20
Результат буде помітним не в layout, тобто в макеті, а лише після запуску емулятору. Як його запустити, див. частину 3. Ось так відображається текст. Варто прибрати ActionBar (про це іншим разом) або збільшити відступ зверху.
o ТЕКСТ ЗІ СКРОЛОМ 1. Якщо текст поміщено в блок, який витягнуто на певну висоту, іноді важко зрозуміти, а скільки ж тексту туди поміститься. Щоб не гадати, можна додати скрол. Тоді текст, який не влізе в блок, буде гортатися. Для цього у директорії Java, наприклад MainActivity дописати: text_main.setMovementMethod(new ScrollingMovementMethod());
У нас text_main – це змінна, тобто та назва, яку ви зазначили в id. Щоб рисочка скролу була видимою, потрібно додати атрибут в layout Scrollbars vertical
o ТЕКСТ ІЗ АТРИБУТОМ WRAP-CONTENT Параметр wrap_content розташовується в атрибутах висоти, якщо натиснути на стрілочку. Він означає, що блок буде прилаштовуватися до контенту, тобто не потрібно зазначати конкретну висоту блочка, а просто поставити цей параметр і він буде підлаштовуватися під обсяг тексту. Однак, варто пам’ятати, щоб під цим блоком не було інших елементів, наприклад, фото чи кнопки, на які може залізти цей контент із текстом.
ЯК ДОДАТИ ЗОБРАЖЕННЯ 1.
Із Palette витягнути компонент ImageView на макетну сторінку.
2.
У діалоговому вікні, що відкриється натиснути плюсик і обрати Import Drawables. Це може бути будь-яке зображення на вашому комп’ютері у форматі PNG або JPEG. Потрібно буде натиснути Next-Import і потім натиснути мишкою, обираючи імпортоване фото.
3.
Важливо! Щоб назва зображення не починалася з цифр. Інакше, воно не імпортується. Треба спочатку перейменувати файл.
4. Розташовуєте і збільшуєте блок за потреби. Обов’язково прикріпити його зверху та з боків. Можна прикріпити його до текстового блока. 5. Потрібно прив’язати верх текстового блока до низу зображення. Так вони триматимуться купи. 6. Якщо вам потрібно, щоб зображення підлаштовувалося до будь-якої ширини екрану смартфону, варто обрати атрибут Scaletype і параметр CenterCrop (див. приклад на наступній сторінці).
Можна прибрати атрибут layout_marginTop і задати 0dp Те саме зробити з текстовим блоком. Якщо у вас є padding , то можна поставити layout_marginTop 0dp
7. Ширину блока потрібно виставити на 0dp (match constraint). 8. Після того, як з дизайном усе завершено, переходимо до ініціалізації змінної в Java. Принцип той самий, що і з текстом. 9. Рядок коду виглядає так:
ImageView imageView = (ImageView) findViewById(R.id.imageView);
imageView – це змінна, тобто та id, яку ви зазначили. Це можна перевірити в атрибутах.
11/8/20
ІЩУК Н. М. ПРОЄКТУВАННЯ ТА РЕДАГУВАННЯ ОНЛАЙН-МЕДІА ТА МОБІЛЬНИХ ДОДАТКІВ Лекційний матеріал з дисципліни «Проєктування та редагування онлайн-медіа та мобільних додатків" для студентів магістратури "Цифрові медіа" Інстиуту журналістики Київського національного університету імені Тараса Шевченка / Наталія Іщук. – Електронні дидактичні матеріали. – Режим доступу : https://issuu.com/home/drafts/ger5tynyono. – 137 слайдів.
Рекомендовано на засіданні кафедри мультимедійних технологій і медіадизайну Інституту журналістики Київського національного університету імені Тараса Шевченка. Протокол №3 від 21.10.2020 р.
© Іщук Наталія, 2020