Цель лекции: ознакомится с визуальным дизайном пользовательского интерфейса и его основными параметрами.

Вопросы:

1. Определение поверхности.

2. Визуальное оформление.

3.Основные параметры визуального оформления.

Основные понятия: дизайн интерфейса, дизайн навигации, информационный дизайн,информационная модель,цвет,шрифт,анимация.

 

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

1. Определение поверхности

Дизайн интерфейса - это организация элементов, облегчающая взаимодействие, дизайн навигации - организация элементов, упрощающая передвижение по ПП, а информационный дизайн - организация элементов для донесения информации до пользователя.

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

2. Визуальное оформление

Визуальное оформление играет основную роль и его можно разделить на три условных части:

• дизайн интерфейса - это организация элементов, облегчающая взаимодействие;

• дизайн навигации - организация элементов, упрощающая управление;

• информационный дизайн - организация элементов для донесения информации до пользователя.

Основными характеристиками визуального оформления являются: цвет, анимация, форма, графика, текст и расположение представляемой информации, дополнительной характеристикой может являться звук. Все приведенные характеристики главным образом влияют на зрительное восприятие информации человеком.

3.Основные параметры визуального оформления.

Цвет
Цвет является одним из важнейших визуальных атрибутов интерфейса. Поскольку цвет имеет способность привлекать взгляд, используйте его для идентификации тех элементов интерфейса, на которые вы хотите обратить внимание пользователя (например, для выделения текущего выбора). Цвет также имеет ассоциативный аспект; во многих случаях объекты одного цвета воспринимаются людьми как взаимосвязанные. Цветовая гамма может также оказывать определенное эмоциональное или психологическое воздействие; не зря, например, разделяют цвета на «холодные» и «теплые».
Области, фон которых представлен более теплыми оттенками красной части спектра, кажутся крупнее, чем области, цвет фона которых смещен к голубой части. Объекты экрана на белом фоне или на фоне цвета из средней части спектра кажутся ярче и легче воспринимаются при разном внешнем освещении. Наибольший контраст между двумя областями экрана достигается в том случае, если цвет фона одной из них — черный или близок к любой из границ спектра, а цвет фона другой — белый или взят из средней части спектра. Данные рекомендации справедливы и для соотношения между цветами символов и фона. Следует учитывать, что некоторые комбинации цвета, например голубой цвет символов на красном фоне, неприятны для глаз. Различные психологические состояния человека характеризуются различными предпочитаемыми (наиболее приятными) цветами. Помимо этого отмечена и обратная зависимость - влияние цвета на настроение и работоспособность.

Шрифт

Подобно другим визуальным элементам, шрифты способствуют организации информации и созданию определенного настроения. Изменяя размер и плотность шрифта, вы можете указать пользователю на степень важности той или иной информации и порядок, в котором она должна быть прочитана.
На экранах стандартных мониторов шрифты обычно менее разборчивы, чем на отпечатанной странице. Старайтесь не использовать курсив (Italic) и рубленый шрифт (Serif), поскольку они трудны для чтения, особенно при низком разрешении монитора.
Ограничьте количество применяемых шрифтов и стилей. По возможности, используйте стандартный системный шрифт для общих элементов интерфейса. Это обеспечивает визуальную согласованность между интерфейсом вашего приложения и интерфейсом рабочей среды и, кроме того, делает ваш интерфейс легче масштабируемым. Поскольку многие элементы интерфейса могут модифицироваться пользователем, проверьте системные параметры для встроенного системного шрифта и установите аналогичные значения для вашего приложения.

 

Анимация

Анимация во многих случаях может оказаться весьма эффективным средством передачи визуальной информации. Иногда ее применение может просто оживить интерфейс приложения и сделать общение пользователя с ним более приятным.
Эффективное использование анимации предполагает учет многих факторов из тех, что были рассмотрены выше применительно к разработке других графических элементов интерфейса.
Одно из важнейших требований к использованию анимации заключается в том, что она не должна влиять на интерактивность интерфейса. Не заставляйте пользователя ожидать завершения «мультика». Если анимация не является частью выполняемого процесса, разрешите пользователю либо прервать ее, либо параллельно продолжать работу.
Вопросы для контроля:

1. Что представляет собой визуальное оформление пользовательского интерфейса?

2. Какие функции выполняет визуальное оформление интерфейса?

3. Какие характеристики являются основными параметрами визуального оформления?

4. Какую функцию осуществляет информационный дизайн?