Lecture 04. Mobile App Design
- 1. Lecture 04. Mobile App Design Part 2. Interface Prototyping Проектування мобільного додатку Прототипування інтерфейсу
- 2. Піраміда користувачів Продвинуті користувачі – 15% Комп’ютерно грамотні користувачі – 25% Непідготовлені користувачі – 60% Користувачів не сильно хвилюють функції продуктів. Вони цікавляться можливістю вирішувати задачі.
- 3. Старі приклади гарних інтерфейсів Weight Log Unit-Conversion Calculator Clipboard Manager fun to convert miles to kilometers From "Tapworthy Designing Great iPhone Apps" By Josh Clark
- 4. Приклади гарних інтерфейсів Чи треба буде мені сьогодні парасолю? From "Tapworthy Designing Great iPhone Apps" By Josh Clark
- 5. Мобільні інтерфейси, які імітують фізичні пристрої переважають своєю інтуїтивністю і перевіреною ергономікою. From "Tapworthy Designing Great iPhone Apps" By Josh Clark
- 6. Мобільні інтерфейси, які імітують фізичні пристрої переважають своєю інтуїтивністю і перевіреною ергономікою. From "Tapworthy Designing Great iPhone Apps" By Josh Clark
- 7. Rule of Thumb From "Tapworthy Designing Great iPhone Apps" By Josh Clark
- 8. Button height should be at least 0,27 inch (7mm) 44 pixels at 160 PPI
- 9. Be a Scroll Skeptic From "Tapworthy Designing Great iPhone Apps" By Josh Clark
- 10. Be a Scroll Skeptic From "Tapworthy Designing Great iPhone Apps" By Josh Clark
- 11. Visual Feedback є дуже важливим! From "Tapworthy Designing Great iPhone Apps" By Josh Clark
- 12. Навігація Три основні моделі навігації – сторінки, панель вкладок, та дерево
- 13. Сторінки
- 14. Сторінки
- 15. Сторінки
- 16. Панель вкладок Панель вкладок знаходиться переважно внизу і дає користувачеві Mеню опцій на вибір. В результаті отримуємо акуратно класифікований додаток. Основні функції зазначені у головному списку і відмічені активні.
- 17. Панель вкладок Панель вкладок знаходиться переважно внизу і дає користувачеві меню опцій на вибір. В результаті отримуємо акуратно класифікований додаток. Основні функції зазначені у головному списку і відмічені активні.
- 18. Дерево Деревоподібну структуру ідеально застосовувати коли ми працюємо з різними даними різних категорій - електронна пошта, списки todo, витрати, фотознімки, музичні записи, контакти. Також можна використовувати для вибору великого набору функцій програми.
- 19. Дерево
- 35. Засоби прототипування мобільних додатків 1) Прототипування на папері Основною перевагою є швидкість, оскільки можна одразу обговорити варіанти допустимих інтерфейсних рішень 2) Створення електронних ескізів Основною перевагою є можливість перегляду зв’язків та інтерактивного переходу між екранами, редагування 3) Прототипування з анімаціями Основною перевагою є можливість тестування інтерфейсу додатку, найбільш наближеного до реального
- 36. Прототипування на папері Переваги: • Можна швидко отримати макет інтерфейсу без кодування • Знаходження широкого кола проблем в інтерфейсі, в тому числі серйозних • Можливість уточнення інтерфейсу додатку за відгуками користувачів до початку реалізації • Вся команда може брати участь • Заохочує до творчості команду та користувачів Недоліки: • Не розв’язує всіх задач, пов’язаних з інтерфейсом користувача http://www.paperprototyping.com/what_prosandcons.html
- 37. Put Something Ugly on Your iPhone ☺ Прототипування на папері
- 39. Ресурси з шаблонами інтерфейсних рішень та прототипів програм http://ui-patterns.com/patterns welie.com pttrns.com www.mobile-patterns.com capptivate.co uxarchive.com http://studio.uxpin.com/patterns/ http://useyourinterface.com https://www.behance.net/gallery/10645011/ User-Experience-Document-Examples- Prototypes http://zurb.com/libraryhttp://zurb.com/library
- 42. Balsamiq
- 43. Balsamiq
- 44. Paint ☺
- 45. Sketch
- 46. Sketch
- 47. Axure
- 48. Засоби прототипування мобільних додатків
- 50. Dribbble
- 56. Розміщення елементів інтерфейсу в AndroidStudio i Xcode • Android Studio - res/layout/*.xml • XCode - *.storyboard; *.xib
- 59. Розміщення елементів інтерфейсу - LinearLayout
- 61. Розміщення елементів в XCode
- 62. Відео - використання LinearLayout в Android і UIStackView в iOS 1. https://www.youtube.com/watch?v=lUymjX4K7FM 2. https://developer.apple.com/videos/play/wwdc2015/218/