Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

филиппов Material design для проектирования продуктов

  • Be the first to comment

  • Be the first to like this

филиппов Material design для проектирования продуктов

  1. 1. Material Design для проектирования продуктов β или как бумажные прототипы могут стать реальным дизайном вашего приложения?
  2. 2. Agenda ● Вы кто такие? ● Цель упражнения ● Wizard of Oz ● Material Design ● Проектирование ● Тестирование ● Профит :)
  3. 3. Кто такие Лёха Серега Никитос
  4. 4. Цель ● Научиться проектировать интерфейсы вне зависимости от навыков ● Увидеть, как быстро можно скорректировать требования к продукту через визуальные языки ● Познакомиться с Material
  5. 5. Почему это важно?
  6. 6. Быстрое проектирование Wizzard of OZ - игровой подход к юзабилити тестированию и проектированию , позволяющий спроектировать и симулировать работу приложения, до создания реального продукта.
  7. 7. Роли в игре
  8. 8. Правила игры ● Уговор о визуальном языке ● Игрок: Режим “Что я вижу?” ● Мастер: o создает экран за 5 минут o отвечает только визуально o исправления только, если Игрок зашел в тупик и не смог найти чего-то за ход ● Игрок мыслит вслух, подаёт команды, спрашивает o “...Я нажимаю на кнопку…” o “...Я ввожу текст… Что происходит?...”
  9. 9. Визуальный язык Material Design от Google ( http://www.google.com/design ) ● не графический стиль, а визуальный язык ● философия минимализма ● глубина – инструмент визуализации ● осмысленная анимация как средство улучшения UX ● фокус на контенте
  10. 10. Принципы ● одноцветные плоские элементы ● основное решение задачи всегда под рукой ● элементы формируют слои, которые располагаются друг над другом. Чем важнее элемент, тем он выше ● анимация создаёт сценарий без разрывов и даёт понимание о том, что происходит ● контент упаковывается в контейнеры: однообразный в списки, разнообразный – в карточки ● самое большое внимание – к типографике и действительно красивому контенту
  11. 11. Панель инструментов Карточка Главное действие Карточка Топ занимает панель с заголовком, навигацией и глобальными действиями над контентом. Иногда слева добавляется боковое меню. Панель всегда выше контента и отбрасывает на него тень. Основное действие приложения (или инициация выбора действия) находится на экране в виде кнопки, которая тоже выше контента и отбрасывает тень.
  12. 12. OctoPaperKit
  13. 13. Стадия 1 : Генерация прототипа 4 4 Кейс проектирования: Пользователь хочет быстро переводить деньги своим друзьям через мобильное приложение (всевозможными способами)
  14. 14. Оба работают над кейсом, но отвечают за разное ● Выберите кто игрок(и), а кто мастер(а). ● Используйте таймер, чтобы четко отслеживать время.
  15. 15. Нет времени объяснять - прототипируй Первый раунд проходим вместе ● Игроки рассказывают и фантазируют первые 2-5 минут ● Потом Мастера проектируют интерфейс 4 4
  16. 16. Повторить еще 3 раза 4 минут - проход, 4 минут создаем прототип
  17. 17. Инструменты для быстрого создания прототипов POP Фотографируем Устанавливаем связи Тестируем! Плюсы ● интерактивная среда ● простота и скорость
  18. 18. Прототип в POP и Обратный ход ● Команда выделяет группы тестирования o Наблюдатель o Модератор
  19. 19. Ревью процесса
  20. 20. Язык, а не догма. NONAMEBANK Case
  21. 21. Мы делаем классные продукты! OctoPaperKit http://octoberry.ru team@octoberry.ru

    Be the first to comment

    Login to see the comments

Views

Total views

908

On Slideshare

0

From embeds

0

Number of embeds

368

Actions

Downloads

6

Shares

0

Comments

0

Likes

0

×