Upload
maksym-davydov
View
37
Download
0
Embed Size (px)
Citation preview
Lecture 04. Mobile App Design Part 2. Interface Prototyping
Проектування мобільного додатку Прототипування інтерфейсу
Піраміда користувачів
Продвинуті користувачі – 15%
Комп’ютерно грамотні користувачі – 25%
Непідготовлені користувачі – 60%
Користувачів не сильно хвилюють функції продуктів.
Вони цікавляться можливістю вирішувати задачі.
Старі приклади гарних інтерфейсів
Weight Log Unit-Conversion Calculator Clipboard Manager
fun to convert miles to kilometers
From "Tapworthy Designing Great iPhone Apps" By Josh Clark
Приклади гарних інтерфейсів
Чи треба буде мені сьогодні парасолю?
From "Tapworthy Designing Great iPhone Apps" By Josh Clark
Мобільні інтерфейси, які імітують фізичні пристрої переважають своєю інтуїтивністю і перевіреною ергономікою.
From "Tapworthy Designing Great iPhone Apps" By Josh Clark
Мобільні інтерфейси, які імітують фізичні пристрої переважають своєю інтуїтивністю і перевіреною ергономікою.
From "Tapworthy Designing Great iPhone Apps" By Josh Clark
Rule of Thumb
From "Tapworthy Designing Great iPhone Apps" By Josh Clark
Button height should be at least 0,27 inch (7mm) 44 pixels at 160 PPI
Be a Scroll Skeptic
From "Tapworthy Designing Great iPhone Apps" By Josh Clark
Be a Scroll Skeptic
From "Tapworthy Designing Great iPhone Apps" By Josh Clark
Visual Feedback є дуже важливим!
From "Tapworthy Designing Great iPhone Apps" By Josh Clark
Навігація
Три основні моделі навігації – сторінки, панель вкладок, та дерево
Сторінки
Сторінки
Сторінки
Панель вкладок
Панель вкладок знаходиться переважно внизу і дає користувачевіMеню опцій на вибір. В результаті отримуємо акуратно класифікований додаток.
Основні функції зазначені у головному списку і відмічені активні.
Панель вкладок
Панель вкладок знаходиться переважно внизу і дає користувачевіменю опцій на вибір. В результаті отримуємо акуратно класифікований додаток.
Основні функції зазначені у головному списку і відмічені активні.
Дерево
Деревоподібну структуру ідеально застосовувати коли ми працюємо з різними даними різних категорій - електронна пошта, списки todo, витрати, фотознімки, музичні записи,
контакти.
Також можна використовувати для вибору великого набору функцій програми.
Дерево
Комбіновані варіанти
Комбіновані варіанти
Apple/Android guidelines
http://developer.android.com/design/index.html
https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/
Прототипування мобільних додатків
Прототипування мобільних додатків
Засоби прототипування мобільних додатків
1) Прототипування на папері Основною перевагою є швидкість, оскільки можна одразу обговорити варіанти допустимих інтерфейсних рішень
2) Створення електронних ескізів Основною перевагою є можливість перегляду зв’язків та інтерактивного переходу між екранами, редагування
3) Прототипування з анімаціями Основною перевагою є можливість тестування інтерфейсу додатку, найбільш наближеного до реального
Прототипування на папері
Переваги: • Можна швидко отримати макет
інтерфейсу без кодування • Знаходження широкого кола
проблем в інтерфейсі, в тому числі серйозних
• Можливість уточнення інтерфейсу додатку за відгуками користувачів до початку реалізації
• Вся команда може брати участь • Заохочує до творчості команду та
користувачів Недоліки: • Не розв’язує всіх задач,
пов’язаних з інтерфейсом користувача
http://www.paperprototyping.com/what_prosandcons.html
Put Something Ugly on Your iPhone ☺
Прототипування на папері
Прототипування на папері
https://studio.uxpin.com/ebooks/free-ux-design-builders-bundle
Ресурси з шаблонами інтерфейсних рішень та прототипів програм
http://ui-patterns.com/patternswelie.compttrns.com
www.mobile-patterns.comcapptivate.couxarchive.com
http://studio.uxpin.com/patterns/
http://useyourinterface.comhttps://www.behance.net/gallery/10645011/User-Experience-Document-Examples-Prototypeshttp://zurb.com/libraryhttp://zurb.com/library
Засоби прототипування
http://www.cooper.com/prototyping-tools
Balsamiq
Balsamiq
Paint ☺
Sketch
Sketch
Axure
Засоби прототипування мобільних додатків
Ресурси з прикладами
Dribbble Behance Pinterest UIMovement …
Dribbble
Dribbble. Fitness example
Dribbble. Fitness example
Dribbble. Fitness example
Dribbble. Fitness example
Dribbble. Fitness example
Розміщення елементів інтерфейсу в AndroidStudio i Xcode
• Android Studio - res/layout/*.xml
• XCode - *.storyboard; *.xib
Розміщення елементів інтерфейсу - LinearLayout
Приклад інтерфейсу (GMail)
Розміщення елементів в XCode
Відео - використання LinearLayout в Android і UIStackView в iOS
1. https://www.youtube.com/watch?v=lUymjX4K7FM
2. https://developer.apple.com/videos/play/wwdc2015/218/
Рекомендована література
http://wud-ukraine.com/
http://uxcamp.com.ua/
http://push-conference.com
http://usabilitylab.ru/
Конференції
Курси
• https://www.open2study.com/courses/user-experience-for-the-web
• http://lits.com.ua/course/uiux-base-course/