Презентация на тему "Material design"

Содержание

• 
  Слайд 1

  Material Design

• 
  Слайд 2
  

  Цели Создать визуальный язык, который совмещает в себе принципы хорошего дизайна с инновациями и достижениями технологий и науки. Разработать единую у систему, позволяющую получить универсальный опыт между разными платформами.

• 
  Слайд 3
  

  Принципы Материал как метафора. Элементы в дизайне имитируют реальные материалы со своими свойствами Смелый, графический и обоснованный дизайн. Использование яркости, контрастности и свободного пространства для погружения в интерфейс Движение подразумевает значение. Все анимации в дизайне логичны и являются подсказкой или результатом действий

• 
  Слайд 4

  Material Design Components

• 
  Слайд 5

  Нижняя навигация

  Mobile Web

• 
  Слайд 6

  Кнопки

  Flat button Raised button Floating button

• 
  Слайд 7

  Карточки

• 
  Слайд 8

  Списки

• 
  Слайд 9

  Меню

• 
  Слайд 10

  Пикеры

• 
  Слайд 11

  Вкладки или табы

• 
  Слайд 12

  Диалоговые окна

• 
  Слайд 13

  Контроллы выбора

  Сheckboxes Radiobattons Switchers

• 
  Слайд 14

  Ползунки

• 
  Слайд 15

  Steppers

• 
  Слайд 16

  Текстовые поля

• 
  Слайд 17

  Подсказки

• 
  Слайд 18

  Material Design Styles

• 
  Слайд 19

  Цвета

  Основной Вторичный Акцентный

• 
  Слайд 20
  
• 
  Слайд 21
  
• 
  Слайд 22

  Продуктовые иконки

• 
  Слайд 23

  Системные значки

• 
  Слайд 24

  Изображения

• 
  Слайд 25

  Шрифты

  Roboto Noto Sans English Simplified Chinese Traditional Chinese Japanese Korean

• 
  Слайд 26

  Material Usability

• 
  Слайд 27

  Принципы юзабилити

  Доступность. Качественное приложение должно охватывать максимальное количество пользователей. Чистота и простота. Достаточный размер и контраст элементов для выделения ключевой информации в интерфейсе. Надежность. Интерфейс должен облегчать навигацию и использовать доступные методы (цвет, форму текст, анимацию) чтобы сообщать о происходящем на экране. Учитывать особенности. По максимуму использовать вспомогательные технологии для людей с ограниченными возможностями.

• 
  Слайд 28

  Material Motion

• 
  Слайд 29

  Почему анимация важна

  Фокусирует на объектах или действиях в зависимости от приоритетности Помогает понять что произойдет после действия Показывает взаимосвязь между элементами разной степени важности Отвлекает от ожидания во время обработки или загрузки данных Добавляет приложению характер, завершенный вид и вау-эффект

• 
  Слайд 30

  Принципы анимации

  Отзывчивость. Анимация должна реагировать на действия пользователя Природность. Имитирует естественные и плавные движения из реального мира Осведомленность. Материал взаимодействует с окружением, включая пользователя и другие материалы Обоснованность. Фокусирует внимание пользователя в нужном месте в нужное время.

• 
  Слайд 31

  https://material.google.com/motion/material-motion.html

• 
  Слайд 32

  Спасибо за внимание!

  ekaterina.mokryak@dataart.com