Cпособы работы с UI/UX-дизайнерами, которые упростят взаимопонимание, уменьшат количество переделок, и помогут застраховаться от потери элементов UI при изменениях в структуре игры. Александр Штаченко - Гейм продюсер в игровой продуктовой компании Мурка. Любит разбирать игровые механики по косточками, чтобы понять, как они работают. Играет во всё, что попадает под руку с эпохи Супер Марио на 9999. С недавнего времени ведет профессиональный блог.

1. Взаимодействие
менеджера
и
дизайнера:
техническое
задание
и
обратная
связь
Александр
Штаченко

2. Кто
ставит
задачи
дизайнеру?

3. Кто
ставит
задачи
дизайнеру

4. Гейм
Дизайнер
Продюсер
Кто
ставит
задачи
дизайнеру

5. Гейм
Дизайнер
Продюсер
QA
Программист
Кто
ставит
задачи
дизайнеру

6. Гейм
Дизайнер
Продюсер
Тимлид
QA
Программист
HR
Кто
ставит
задачи
дизайнеру

7. Гейм
Дизайнер
Продюсер
Тимлид
QA
Программист
HR
Фриланс-­‐
заказчики
Кто
ставит
задачи
дизайнеру

8. Гейм
Дизайнер
Продюсер
Тимлид
QA
Программист
HR
Фриланс-­‐
заказчики
Собственные
задачи
Кто
ставит
задачи
дизайнеру

9. Минимальный
набор
требований
для
ТЗ
по
UI/UX

10. • Карта
экранов
Минимальный
набор
требований
для
ТЗ
по
UI/UX

11. • Карта
экранов
• Детальное
описание
каждого
экрана
в
формате:
– назначение
экрана
Минимальный
набор
требований
для
ТЗ
по
UI/UX

12. • Карта
экранов
• Детальное
описание
каждого
экрана
в
формате:
– назначение
экрана
– список
элементов
интерфейса
и
его
назначение
Минимальный
набор
требований
для
ТЗ
по
UI/UX

13. • Карта
экранов
• Детальное
описание
каждого
экрана
в
формате:
– назначение
экрана
– список
элементов
интерфейса
и
его
назначение
– рекомендации
по
механикам
элементов
интерфейса
Минимальный
набор
требований
для
ТЗ
по
UI/UX

14. Минимальный
набор
требований
для
ТЗ
по
UI/UX
• Карта
экранов
• Детальное
описание
каждого
экрана
в
формате:
– назначение
экрана
– список
элементов
интерфейса
и
его
назначение
– рекомендации
по
механикам
элементов
интерфейса
– пожелания
по
композиции

15. Также
можно
включить
в
описание

16. Также
можно
включить
в
описание:
• примеры
реализации

17. • примеры
реализации
• мокапы
Также
можно
включить
в
описание:

18. • примеры
реализации
• мокапы
• возможные
тексты,
или
хотя
бы
длина
в
количестве
символов
Также
можно
включить
в
описание:

19. • примеры
реализации
• мокапы
• возможные
тексты,
или
хотя
бы
длина
в
количестве
символов
• ссылки
на
приложения,
где
вам
нравится
реализация
логики
переходов
между
экранами
Также
можно
включить
в
описание:

20. Снижает
количество
переделок

21. Снижает
количество
переделок
Предупреждает
конфликтные
ситуации
с
менеджерами

22. Снижает
количество
переделок
Предупреждает
конфликтные
ситуации
с
менеджерами

23. Карта
экранов

24. Карта
экранов

25. Карта
экранов
мелко
и
не
понятно
нет
схематических
обозначений
экраны
уже
изначально
включают
примеры
UI

27. Хороший
пример
карты
экранов
• есть
возможность
отследить
все
связи,
понять
насколько
загружено
каждое
из
окон

28. Хороший
пример
карты
экранов
• есть
возможность
отследить
все
связи,
понять
насколько
загружено
каждое
из
окон
• формат
Иконка
+
Подпись
—
хороший
способ
для
дизайнера
понять
на
интуитивном
уровне
назначение
окна

29. Пример
описания
ТЗ
на
UI

30. Пример
описания
ТЗ
на
UI
Описание:
Гараж
выполнен
в
виде
окна.
Окно
открывается
при
нажатии
на
«Гараж»
в
Лобби
игры.
Предполагается,
что
в
этом
окне
пользователь
будет
проводить
большую
часть
времени
между
заездами.

31. UI:
• Заголовок
• кнопка
(х)
—
закрыть
• Текст
с
призывом
к
действию
—
«Выбери
машину»
• Слайдер
выбора
– Изображение
автомобиля
– Логотип
автомобиля
– Диаграмма
характеристик
с
иконками
и
прогресс
барами
• скорость
• ускорение
• управляемость
• тормоза
– Название
автомобиля
стилизированым
шрифтом
– Кнопка
действия:
«Купить
за
$$$»
или
«Выбрать»
(если
машина
уже
куплена)
(сумма
будет
колебаться
от
1000
до
999
999)
– Кнопки
Влево
и
Вправо
• Блок
улучшения
разделён
на
4
секции
и
вынесен
отдельно
– иконка
улучшения:
двигатель,
ходовая,
трансмиссия,
визуальные
эффекты
– кнопка
действия
«Улучшить»

32. Как
работает
слайдер:
Переключать
автомобили
можно
как
кнопками,
так
и
свайпом.
При
удержании
кнопки
влево/вправо
машины
меняются
одна
за
одной,
по
кругу
по
принципу
барабана.
При
подгрузке
каждого
следующего
автомобиля
динамически
изменяются
прогресс
бары
характеристик.
Как
работает
апгрейд:
Казуальный
апгрейд
при
нажатии
на
кнопку
«улучшить»
—
увеличивает
на
%%
одну
из
характеристик
автомобиля.
После
нажатия,
в
прогресс
баре
характеристик
нужный
компонент
увеличивается
динамически
и
мигает,
показывая
на
сколько
автомобиль
улучшил
свои
статы.
Внимание:
Поле
денег
остается
общим,
и
его
видно
с
экрана
Лобби.
Если
у
пользователя
не
достаточно
денег
на
покупку
автомобиля,
сумма
денег
в
кнопке
«купить»
написана
красным
цветом.

33. Обратная
связь

34. М:
Что
ты
понял?
Обратная
связь

35. М:
Что
ты
понял?
Д:
Правильно
ли
я
тебя
понял?
Обратная
связь

36. Обратная
связь
М:
Что
ты
понял?
Д:
Правильно
ли
я
тебя
понял?
Д:
По
каким
критериям
ты
будешь
принимать
эту
задачу?

37. Выводы
• Оговаривайте
изначально
стандарты
описания
задачи

38. • Оговаривайте
изначально
стандарты
описания
задачи
• ТЗ
должно
быть
понятным,
детализированным,
с
примерами
и
описанием
механик
Выводы

39. • Оговаривайте
изначально
стандарты
описания
задачи
• ТЗ
должно
быть
понятным,
детализированным,
с
примерами
и
описанием
механик
• Карта
экранов
–
это
не
лишнее
Выводы

40. • Оговаривайте
изначально
стандарты
описания
задачи
• ТЗ
должно
быть
понятным,
детализированным,
с
примерами
и
описанием
механик
• Карта
экранов
–
это
не
лишнее
• Обратная
связь
обязательна
Выводы

41. Ссылки
по
теме:
• moqups.com
—
сервис
для
мокапов
• cacoo.com —
сервис
для
мокапов
и
построения
структур
• gliffy.com —
интерфейсы,
структуры,
диаграммы
• balsamiq.com —
для
создания
прототипов
UI/UX

42. Спасибо!