Download as PDF, PPTX
Design of mobile apps
- 1. Mobile App Design InterfacePrototyping Проектування мобільного додатку Прототипування інтерфейсу
- 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 shouldbe at least 0,27 inch (7mm) 44 pixels at 160 PPI
- 9. Be a ScrollSkeptic From "Tapworthy Designing Great iPhone Apps" By Josh Clark
- 10. Be a ScrollSkeptic 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.
- 20.
- 21.
- 22.
- 33.
- 34.
- 35. Засоби прототипування мобільнихдодатків 1) Прототипування на папері Основною перевагою є швидкість, оскільки можна одразу обговорити варіанти допустимих інтерфейсних рішень 2) Створення електронних ескізів Основною перевагою є можливість перегляду зв’язків та інтерактивного переходу між екранами, редагування 3) Прототипування з анімаціями Основною перевагою є можливість тестування інтерфейсу додатку, найбільш наближеного до реального
- 36. Прототипування на папері Переваги: •Можна швидко отримати макет інтерфейсу без кодування • Знаходження широкого кола проблем в інтерфейсі, в тому числі серйозних • Можливість уточнення інтерфейсу додатку за відгуками користувачів до початку реалізації • Вся команда може брати участь • Заохочує до творчості команду та користувачів Недоліки: • Не розв’язує всіх задач, пов’язаних з інтерфейсом користувача http://www.paperprototyping.com/what_prosandcons.html
- 37. Put Something Uglyon Your iPhone ☺ Прототипування на папері
- 38.
- 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
- 40.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48. Засоби прототипування мобільнихдодатків
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56. Розміщення елементів інтерфейсу вAndroidStudio i Xcode • Android Studio - res/layout/*.xml • XCode - *.storyboard; *.xib
- 59. Розміщення елементів інтерфейсу- LinearLayout
- 60.
- 61.
- 62. Відео - використанняLinearLayout в Android і UIStackView в iOS 1. https://www.youtube.com/watch?v=lUymjX4K7FM 2. https://developer.apple.com/videos/play/wwdc2015/218/
- 63.
- 71.
- 72.