47
Make Magic Happen. «А что будет , если нажать вот сюда Андрей Стеля UX/UI Designer at Chapps Mobile Day 22 июля

Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Embed Size (px)

DESCRIPTION

Make magic happen. «А что будет, если нажать вот сюда?» Андрей Стеля (UX/UI Designer at Chapps) В ходе доклада я расскажу вам про интерактивные прототипы. На сегодняшний день, это самый эффектный способ презентовать дизайн-концепцию клиенту, ведь на выходе мы получаем веб-приложение, которое выглядит и работает как реальное приложение. Кроме того, с помощью интерактивного прототипа можно выявить интерфейсные проблемы, которые могут быть не видны в процессе работы, и провести тестирование поведения пользовательских сценариев. А самое главное, это наглядное пособие для разработчиков, которое избавит вас от многих вопросов. Вместе мы соберем простой прототип мобильного приложения.

Citation preview

Page 1: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Make Magic Happen.«А что будет, если нажать вот сюда?»

Андрей Стеля UX/UI Designer at Chapps

Mobile Day 22 июля

Page 2: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Интерактивные прототипы

Page 3: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Зачем они нам?

Page 4: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Презентация дизайн-концепции

Page 5: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Эффектность и наглядность

Page 6: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Статика Динамика

Page 7: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

«А что будет, если нажать вот сюда?»

Page 8: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Заказчик доволен

Page 9: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Разработчик скажет: «Спасибо!»

Page 10: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Самоконтроль

Page 11: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Не переусердствуйте

Page 12: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Прототипы как элемент тестирования

Page 13: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Что нам предлагает рынок?

Page 14: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»
Page 15: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Наш выбор

Page 16: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

www.invisionapp.com

Page 17: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Поддержка различных устройств

Page 18: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Имитация родной анимации

Page 19: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

8 переходов между экранами

1. Instant 2. Push Right 3. Push Left 4. Slide Up 5. Slide Down 6. Flip Right 7. Flip Left 8. Dissolve

Page 20: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Жесты

1. Tap 2. Double Tap 3. Swipe Right 4. Swipe Left 5. Swipe Up 6. Swipe Down

Page 21: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Просмотр прототипа. Никакого стороннего софта

Page 22: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Простое сохранение через браузер

Page 23: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Простое сохранение через браузер

Page 24: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Fixed Header. Fixed Footer.

Page 25: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»
Page 26: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»
Page 27: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Переадресация по таймеру

Page 28: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Поддержка GIF

Page 29: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Максимальная близость к реальному приложению

Page 30: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

LiveShare. Взаимодействие в реальном времени

Page 31: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

LiveShare. Взаимодействие в реальном времени

Page 32: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»
Page 33: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»
Page 34: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Наборы хотспотов

Page 35: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Back

Page 36: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Drag. Drop. Dropbox.

Page 37: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

До свидания, «Save for Web…»

Page 38: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

До свидания, «Save for Web…»

Page 39: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

+ & *

Page 40: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»
Page 41: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Дублирование прототипа

Page 42: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Комментарии

Page 43: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Статусы экранов

Page 44: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

История версий экранов

Page 45: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

И много других фишек…

Page 46: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

Make Magic Happen.

Page 47: Андрей Стеля_Make magic happen. «А что будет, если нажать вот сюда?»

СПАСИБОАндрей Стеля

UX/UI Designer at Chapps !!

ITSCHAPPS.COM [email protected]

dribbble.com/chapps

Mobile Day 22 июля