DevNightDnepr 2015: «Взаимодействие менеджера и дизайнера:...
-
Upload
devgamm-conference -
Category
Presentations & Public Speaking
-
view
139 -
download
1
Transcript of DevNightDnepr 2015: «Взаимодействие менеджера и дизайнера:...
Гейм Дизайнер Продюсер
Тимлид
QA
Программист
HR
Фриланс-‐заказчики
Собственные задачи
Кто ставит задачи дизайнеру
• Карта экранов • Детальное описание каждого экрана в формате: – назначение экрана
Минимальный набор требований для ТЗ по UI/UX
• Карта экранов • Детальное описание каждого экрана в формате: – назначение экрана – список элементов интерфейса и его назначение
Минимальный набор требований для ТЗ по UI/UX
• Карта экранов • Детальное описание каждого экрана в формате: – назначение экрана – список элементов интерфейса и его назначение
– рекомендации по механикам элементов интерфейса
Минимальный набор требований для ТЗ по UI/UX
Минимальный набор требований для ТЗ по UI/UX
• Карта экранов • Детальное описание каждого экрана в формате: – назначение экрана – список элементов интерфейса и его назначение
– рекомендации по механикам элементов интерфейса
– пожелания по композиции
• примеры реализации • мокапы • возможные тексты, или хотя бы длина в количестве символов
Также можно включить в описание:
• примеры реализации • мокапы • возможные тексты, или хотя бы длина в количестве символов
• ссылки на приложения, где вам нравится реализация логики переходов между экранами
Также можно включить в описание:
Карта экранов
мелко и не понятно
нет схематических обозначений
экраны уже изначально включают примеры UI
Хороший пример карты экранов
• есть возможность отследить все связи, понять насколько загружено каждое из окон
Хороший пример карты экранов
• есть возможность отследить все связи, понять насколько загружено каждое из окон
• формат Иконка + Подпись — хороший способ для дизайнера понять на интуитивном уровне назначение окна
Пример описания ТЗ на UI Описание: Гараж выполнен в виде окна. Окно открывается при нажатии на «Гараж» в Лобби игры. Предполагается, что в этом окне пользователь будет проводить большую часть времени между заездами.
UI: • Заголовок • кнопка (х) — закрыть • Текст с призывом к действию — «Выбери машину» • Слайдер выбора
– Изображение автомобиля – Логотип автомобиля – Диаграмма характеристик с иконками и прогресс барами
• скорость • ускорение • управляемость • тормоза
– Название автомобиля стилизированым шрифтом – Кнопка действия: «Купить за $$$» или «Выбрать» (если машина
уже куплена) (сумма будет колебаться от 1000 до 999 999) – Кнопки Влево и Вправо
• Блок улучшения разделён на 4 секции и вынесен отдельно – иконка улучшения: двигатель, ходовая, трансмиссия, визуальные
эффекты – кнопка действия «Улучшить»
Как работает слайдер: Переключать автомобили можно как кнопками, так и свайпом. При удержании кнопки влево/вправо машины меняются одна за одной, по кругу по принципу барабана. При подгрузке каждого следующего автомобиля динамически изменяются прогресс бары характеристик. Как работает апгрейд: Казуальный апгрейд при нажатии на кнопку «улучшить» — увеличивает на %% одну из характеристик автомобиля. После нажатия, в прогресс баре характеристик нужный компонент увеличивается динамически и мигает, показывая на сколько автомобиль улучшил свои статы. Внимание: Поле денег остается общим, и его видно с экрана Лобби. Если у пользователя не достаточно денег на покупку автомобиля, сумма денег в кнопке «купить» написана красным цветом.
Обратная связь
М: Что ты понял? Д: Правильно ли я тебя понял? Д: По каким критериям ты будешь принимать эту задачу?
• Оговаривайте изначально стандарты описания задачи
• ТЗ должно быть понятным, детализированным, с примерами и описанием механик
Выводы
• Оговаривайте изначально стандарты описания задачи
• ТЗ должно быть понятным, детализированным, с примерами и описанием механик
• Карта экранов – это не лишнее
Выводы
• Оговаривайте изначально стандарты описания задачи
• ТЗ должно быть понятным, детализированным, с примерами и описанием механик
• Карта экранов – это не лишнее • Обратная связь обязательна
Выводы
Ссылки по теме: • moqups.com — сервис для мокапов
• cacoo.com — сервис для мокапов и построения структур
• gliffy.com — интерфейсы, структуры, диаграммы
• balsamiq.com — для создания прототипов UI/UX