презентация%20Преснова

1.

Виконала:
студентка групи 17ПР1
Прєснова Т.В.
Керівник:
Мамука К.В.
Creative presentation template
Creative presentation template
Дипломний проект на тему:
Вимоги UI/UX до сучасних
мобільних додатків

2.

Мета дипломного проекту
Creative presentation template
Creative presentation template
Розробка інтерфейсу мобільного
додатку, який буде розкривати усі
потреби користувача та ефективно
на нього впливати.

3.

Завдання до
дипломного проекту
2
3
4
Проаналізувати відмінності
дизайну
під template
iOS та Android
Creative
presentation
Розглянути UI/UX
дизайн в цілому
Знайти різницю між мобільним
додатком та сайтом
Розробити інтерфейс
додатку
Creative presentation template
1

4.

Актуальність дипломного
проекту
швидко орієнтуватися у додатку. Чим зручніший у використанні додаток
тим більше часу у ньому проводять.
motion.
Lorem Ipsum is simply dummy text
Creative presentation template
Creative presentation template
Актуальність заключається в тому що кожному користувачу важливо

5.

Додаток чи сайт?
Можливість доступу до всього
функціоналу пристрою;
мобільні додатки забезпечують кращий
користувацький досвід,
завдяки можливості зберігати
призначений для користувача контент,
забезпечується високий рівень
персоналізації;
Lorem Ipsum is simply dummy text
можливість використання в автономному
режимі.
Creative presentation template
Creative presentation template
Традиційний Web інтерфейс;
сумісність з будь-яким пристроєм;
виправити помилки або змінити
функціонал простіше;
вартість виходу на ринок (крім
розробки) нижча.

6.

дизайн
Creative presentation template
UX дизайнери продумують
логіку використання
користувачем, аналізують її,
тестують, і вирішують як
зробити використання
продукту зручнішим і
привабливішим.
Creative presentation template
Що таке
UI дизайнер відповідає за те,
щоб все, що ми бачимо на
сторінці, було зрозумілим,
логічно розташованим по
відношенню один до одного,
красиво оформленими, щоб
всі елементи відповідали
єдиному стилю оформлення.

7.

Важливість UI\UX
Якщо запропонувати людині вибрати один предмет з двох з однаковою функціональністю, але
різницею в зовнішньому вигляді, він вибере більш красивий, визнавши його більш зручним.
Creative presentation template
Додаток повинен справляти хороше перше
враження
Creative presentation template
На сторінці все повинно бути логічно
розташованим

8.

Швидка анімація переходу дуже важлива
Елементи додатку повинні мати велику площу
реагуючу на дотик, для того, щоб уникнути
випадкового натискання на сусідній елемент
Creative presentation template
Creative presentation template

9.

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

10.

Відмінності дизайну під
iOS та Android
Плоский, легкий, доброзичливий дизайн.
Системний шрифт – San Francisco
В iOS принципово немає тіней. Як виняток,
тіні можна знайти на головному екрані App
Store і в Health.
Material Design
Сміливий, графічний, свідомий.
Системний шрифт – Roboto.
У Material тіні грають велику роль. Вони
додають інтерфейсу третій простір (вісь Z).
Creative presentation template
Creative presentation template
Human Interface Guidelines

11.

Creative presentation template
Figma – векторний онлайн-сервіс
розробки
інтерфейсів
та
прототипування з можливістю
організації спільної роботи, що
розробляється
однойменною
компанією. Працює у двох
форматах: у браузері та як
клієнтський додаток на десктопі
користувача.
Creative presentation template
Середа розробки інтерфейсу:

12.

Додаток SportyCat створений не тільки для людей які
живуть спортом, а й для кожного починаючого. В
ньому можна стежити за своїм здоров’ям, шукати нові
вправи для тренування, спілкуватись з тренерами,
обирати дієти, ділитися знаннями з іншими знімаючи
корисні відео, тощо.
Creative presentation template
Creative presentation template
Розробка інтерфейсу

13.

Вікна входу та реєстрації
Creative presentation template
Creative presentation template

14.

Вікна відео-контенту
Creative presentation template
Г
Creative presentation template
Т

15.

Вікно смарт здоров’я
Тут можна підключити смарт годинник і користуватися усіма його функціями
Creative presentation template
Creative presentation template

16.

Вікно профілю
Creative presentation template
Creative presentation template

17.

Вікна пошуку та повідомлень
Creative presentation template
Creative presentation template
У повідомленнях відображаються
коментарі та нагадування про
тренування, а в вікні пошуку можна
знайти як інші аккаунти так і відео
по їх назві.

18.

Висновки
Creative presentation template
Creative presentation template
В ході виконання дипломної роботи був отриманий
повнофункціональний інтерфейс користувача, повністю готовий до
застосування. Інтерфейс створеного додатку зручний, простий,
відображає його можливості.

19.

Creative presentation template
Creative presentation template
Дякую за увагу!