Основы разработки интерфейсов мобильных приложений Лекция 3 Введение в разработку приложений для смартфонов на ОС Android. - презентация

1 Основы разработки интерфейсов мобильных приложений Лекция 3 Введение в разработку приложений для смартфонов на ОС Android

2 Содержание Визуальный дизайн интерфейсов Строительные блоки визуального дизайна Элементы управления и дизайн навигации Рекомендации по проектированию GUI под Android Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

3 Визуальный дизайн интерфейсов Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

4 Художник или дизайнер? Цель художника – создать объект, взгляд на который вызывает эстетический отклик Чем необычнее и своеобразнее продукт усилий художника, тем выше он ценится Цель дизайнера – представление информации и поведения в понятном и полезном виде Удобство использования имеет большое значение Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

5 Визуальный дизайн интерфейсов Графический дизайн Красивая внешность интерфейсов Тон, стиль, композиция Поддержание фирменного стиля Визуальный информационный дизайн Визуализация данных, содержимого и средств навигации Цвет, форма, расположение, масштаб Графики, диаграммы и пр. Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

6 Требования к дизайнеру интерфейсов Владение базовыми визуальными навыками – пониманием цвета, типографики, формы и композиции Умение их применять для передачи поведения и представления информации Понимание принципов взаимодействия и идиом интерфейса, определяющих поведение продукта Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

7 Строительные блоки Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

8 Строительные блоки визуального дизайна: форма Главный признак сущности объекта для человека Удобна для указания связи между объектами или их похожести Плохо подходит для указания контраста Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

9 Строительные блоки визуального дизайна: размер Более крупные элементы привлекают больше внимания Мы автоматически упорядочиваем объекты по размеру Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений Самый важный текст Важный текст Обычный текст Примечание

10 Строительные блоки визуального дизайна: цвет Быстро привлекают внимание Цвета имеют особые значения для профессиональных и социальных групп Осторожно: цветовая слепота! Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

11 Строительные блоки визуального дизайна: яркость Хороший инструмент привлечения внимания к контрасту между объектами Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

12 Строительные блоки визуального дизайна: направление Рекомендуется использовать как вторичный признак «Естественное» направление для европейца – слева направо и сверху вниз, но не во всех странах это так Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

13 Строительные блоки визуального дизайна: текстура Засечки и выпуклости на элементах пользовательского интерфейса обычно указывают, что элемент можно перетаскивать Фаски или тени у кнопки усиливают ощущение, что ее можно нажать Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

14 Строительные блоки визуального дизайна: расположение Используется для передачи иерархии Средство создание отношений между объектами реального мира (небо и земля) Расположение элементов мобильного приложения зависит от типа и способа удержания устройства, а так же выбранной ориентации экрана Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

15 Элементы управления и дизайн навигации Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

16 Элементы управления и дизайн навигации Элементы управления – это доступные для манипулирования самодостаточные экранные объекты, посредством которых люди взаимодействуют с цифровыми продуктами. Controls/widgets (сокращение от windows gadgets – оконные приспособления) – это базовые строительные блоки графического пользовательского интерфейса. Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

17 Классификация элементов управления Выполнение функций Командные элементы управления Выбор данных или настроек Элементы выбораЭлементы ввода Наглядное непосредственное манипулирование Элементы отображения Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

18 Командные элементы управления Немедленно выполняют действие Часто особым образом выделяются кнопки по умолчанию Рекомендуется изменять внешний вид нажатой кнопки Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

19 Кнопки-значки Кнопки, помещенные на панель инструментов Постоянно на виду и легко запоминаются Простое взаимодействие Осторожно! Неоднозначные пиктограммы! Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

20 Текстовые гиперссылки Распространенный инструмент навигации на сайтах Плохо применим при работе с мобильными устройствами Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

21 Элементы управления выбором Позволяют пользователю выбрать из группы допустимых объектов тот, с которым будет совершено действие Применяются также для действий по настройке Элемент выбора может одновременно быть командным, если действие одно и должно выполняться сразу Если элементы выбора объединены в группу, то нужен дополнительный командный элемент Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

22 Флажки Традиционно имеют квадратную форму Нуждается в поясняющем тексте Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

23 Выключатели Кнопка-значок, которая может фиксироваться в нажатом состоянии, называется выключателем Выключатели экономят пространство Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

24 Триггеры Призваны экономить экранное пространство Часто дезориентируют пользователя Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

25 Радиокнопки Используются для выбора взаимоисключающих вариантов Всегда объединяются в группы Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

26 Списки и раскрывающиеся списки Позволяют осуществлять выбор из конечного множества текстовых строк Раскрывающийся список показывает лишь выбранный элемент в одну строку, но если нажать на стрелку, открываются другие варианты выбора Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

27 Комбо-элементы Комбо-элементы представляют собой сочетание элементов Комбо-кнопка – разновидность радиокнопки со значком Комбо-список представляет собой сочетание списка и поля редактирования Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

28 Элементы ввода Дают возможность выбирать существующие и вводить новую информацию Любой элемент управления, ограничивающий набор значений, доступных для ввода пользователем, является ограничивающим элементом ввода Ограничивающий элемент ввода должен четко информировать пользователя о допустимых границах Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

29 Счетчики Счетчик состоит из небольшого поля ввода и двух прикрепленных к нему кнопок Маленькие кнопки со стрелками позволяют изменять значение в поле редактирования небольшими шагами в пределах от минимума до максимума Значение можно менять непосредственно Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

30 Рукоятки и ползунки Рукоятки и ползунки эффективно расходуют экранное пространство Ползунки и рукоятки применяются в основном в качестве ограничивающих элементов управления ввода, например, масштабирования Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

31 Неограничивающие элементы ввода Основной неограничивающий элемент ввода – поле ввода текста Однострочные и многострочные Рекомендуется использовать маски ввода Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

32 Элементы управления отображением Используются для управления визуальным представлением информации на экране Самый простой вариант элемент вывода текстовой информации Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

33 Полосы прокрутки Позволяют осмысленным образом помещать большие объемы информации Создают контекст текущего положения в окне Расходуют экранное пространство (решение полосы появляются только в момент прокрутки) Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

34 Разделители Удобный инструмент для разделения главного окна приложения на несколько связанных между собой панелей Подвижные разделители всегда должны сообщать о своей подвижности Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

35 Выдвижные панели Замечательное место для элементов управления и функций, которые используются совместно с основной рабочей областью приложения, но не столь часто Не закрывают основное окно полностью Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

36 Рекомендации по проектированию GUI под Android Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

37 Дизайн приложений Android Когда платформа Android только появилась, не было никаких рекомендаций по разработке дизайна Большое разнообразие устройств В настоящее время разработан стандарт Android Design Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

38 Рекомендации Android User Experience Team Реальные объекты лучше, чем кнопки и меню Картинки работают быстрее, чем слова Используйте короткие фразы, состоящие из простых слов Никогда не теряйте пользовательскую информацию! Если человеку придется вводить данные повторно, велика вероятность того, что он откажется использовать ваше приложение. Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

39 Рекомендации Android User Experience Team Если объекты похожи, они должны выполнять сходные действия Показывайте только то, что необходимо пользователю именно в этот момент Выводите пользователю сообщения, только если вопрос действительно важен Делайте важные вещи быстро Разбивайте сложные задачи простые Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

40 Рекомендации Android User Experience Team Будьте вежливы и корректны в общении с пользователем Пользователь всегда должен быть уверен в том, что он знает, где сейчас находится. Используйте интерфейсные элементы, которые будут работать в любой ситуации Самый главный принцип – НЕ УСЛОЖНЯЙТЕ пользователю жизнь! Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

41 Обзор интерфейса Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

42 Обзор интерфейса Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

43 Шрифт Roboto Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

44 Масштабирование ОбозначениеНазваниеСоответствие1 dp = 1LDPILow density120 dpi0,75 пикселя 2MDPIMedium density160 dpi1 пиксель 3HDPIHigh density240 dpi1,5 пикселя 4XHDPIExtra-high density320 dpi2 пикселя 5XXHDPIExtra-extra!-high density480 dpi3 пикселя 6XXXHDPIExtra-extra-extra!-high density640 dpi4 пикселя Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

45 Размеры элементов управления Минимальный размер элемента управления 48dp На реальном устройстве это 7-10 мм Расстояние между элементами управления кратно 8dp Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

46 Размеры элементов управления Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

47 Что дальше? Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений

48 Список дополнительных источников Дж. Тидвелл «Разработка пользовательских интерфейсов». – Пер. с англ. – СПб: Питер, Купер А., Рейман Р., Кронин Д. Алан Купер об интерфейсе. Основы проектирования взаимодействия. – Пер. с англ. – СПб.: Символ'Плюс, – 688 с., ил. Универсальное разрешение Android: идеально на всех экранах Рекомендации для Android-разработчиков Введение в разработку приложений для смартфонов на ОС Android. Лекция 3. Основы разработки интерфейсов мобильных приложений