Пользовательский интерфейс. Лекция 4

Август 13, 2022

Главная
Информатика
Пользовательский интерфейс. Лекция 4

Содержание

2. Пользовательский интерфейс – система правил, принципов, средств, регламентирующая и обеспечивающая взаимодействие программного продукта с пользователем. Дизайн
3. ПРИНЦИП ПРОСТОТЫ И АДЕКВАТНОСТИ К пользовательскому интерфейсу предъявляются два противоречивых требования: простота и адекватность предметной области.
4. ПРИНЦИП СТИЛИСТИЧЕСКОЙ ЦЕЛОСТНОСТИ Стилистическая целостность пользовательского интерфейса достигается единообразием оформления, под которым подразумевается ограничения в выборе
5. ПРИНЦИП ВЫРАВНИВАНИЯ Ни один элемент пользовательского интерфейса не должен располагаться случайным образом, т.е. нельзя располагать элементы
6. ПРИНЦИП УМЕНЬШЕНИЯ ВИЗУАЛЬНОГО ШУМА Визуальный шум одно из основных препятствий для получения комплексного информационного представления о
7. ПРИНЦИП ИСПОЛЬЗОВАНИЯ ПРИВЫЧНЫХ АССОЦИАЦИЙ И СТЕРЕОТИПОВ Сущность данного принципа состоит в применении для пользовательских интерфейсов условных
8. ПРИНЦИП ИЗБЫТОЧНОСТИ Для улучшения восприятия структуры системы иногда бывает необходимо параллельное представление наиболее важных компонентов или
9. ПРИНЦИП ПОВТОРА Некоторые компоненты стилевого оформления должны повторяться, что сделает пользовательский интерфейс более цельным, согласованным и
10. ПРИНЦИП ВИЗУАЛЬНОЙ ИЕРАРХИИ Элементы, являющиеся частями друг друга, представляются в виде вложений. Необходимо организовать внешний вид
11. ПРИНЦИП УДОБСТВА ИСПОЛЬЗОВАНИЯ Важным моментом при создании интерфейсов является «usability» (usability — удобство и простота использования).
12. ПРИНЦИП ВИЗУАЛЬНОЙ ИЕРАРХИИ Каждый элемент пользовательского интерфейса необходимо взвешивать по его способности помочь пользователю воспринять структуру
13. ПРИНЦИП ВИЗУАЛЬНОЙ ИЕРАРХИИ Равнозначные элементы необходимо обозначать одинаковыми графическими объектами, сгруппировывать под одним заголовком, применять к
14. ПРИНЦИП ВИЗУАЛЬНОЙ ИЕРАРХИИ Значение графического элемента должно определяться его окружением. Желательно выделять размером, формой, цветом элементы,
15. ПРИНЦИП ВИЗУАЛЬНОЙ ИЕРАРХИИ Логически связанные между собой элементы должны быть связаны визуально. Обычно их объединяют в
16. ПРИНЦИП ПЕРЕВЕРНУТОЙ ПИРАМИДЫ Смысл этого принципа состоит в том, чтобы вынести самую важную информацию и элементы
17. ПРИНЦИП ЭМОЦИОНАЛЬНОГО ВОЗДЕЙСТВИЯ Цвет вызывает эмоции. Например, красный цвет – волнующий, желтый – веселый и т.п.
18. ПРИНЦИП СКАНИРУЕМОСТИ В Сети пользователи не читают текст так, как с печатного листа. Вместо этого они
20. Скачать презентацию

Слайд 2

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

программного продукта с пользователем.

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

Слайд 3

ПРИНЦИП ПРОСТОТЫ И АДЕКВАТНОСТИ
К пользовательскому интерфейсу предъявляются два противоречивых требования: простота

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

Слайд 4

ПРИНЦИП СТИЛИСТИЧЕСКОЙ ЦЕЛОСТНОСТИ
Стилистическая целостность пользовательского интерфейса достигается единообразием оформления, под которым

подразумевается ограничения в выборе гарнитур и размеров шрифта, а также равномерное распределение свободного пространства.

Слайд 5

ПРИНЦИП ВЫРАВНИВАНИЯ
Ни один элемент пользовательского интерфейса не должен располагаться случайным образом,

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

Слайд 6

ПРИНЦИП УМЕНЬШЕНИЯ ВИЗУАЛЬНОГО ШУМА
Визуальный шум одно из основных препятствий для получения

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

Слайд 7

ПРИНЦИП ИСПОЛЬЗОВАНИЯ ПРИВЫЧНЫХ АССОЦИАЦИЙ И СТЕРЕОТИПОВ
Сущность данного принципа состоит в применении для

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

Слайд 8

ПРИНЦИП ИЗБЫТОЧНОСТИ
Для улучшения восприятия структуры системы иногда бывает необходимо параллельное представление

наиболее важных компонентов или взаимосвязей.

Повтор панели навигации внизу экрана более простом оформлении

Названия элементов
продублированы
графическими образами

Слайд 9

ПРИНЦИП ПОВТОРА
Некоторые компоненты стилевого оформления должны повторяться, что сделает пользовательский интерфейс

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

Слайд 10

ПРИНЦИП ВИЗУАЛЬНОЙ ИЕРАРХИИ
Элементы, являющиеся частями друг друга, представляются в виде вложений.

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

Список элементов

Тот же список, визуально разбитый на группы

Слайд 11

ПРИНЦИП УДОБСТВА ИСПОЛЬЗОВАНИЯ
Важным моментом при создании интерфейсов является «usability» (usability — удобство

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

Управляющие элементы пользовательского интерфейса должны располагаться там, где пользователь ожидает их увидеть.

Слайд 12

ПРИНЦИП ВИЗУАЛЬНОЙ ИЕРАРХИИ
Каждый элемент пользовательского интерфейса необходимо взвешивать по его способности

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

Слайд 13

ПРИНЦИП ВИЗУАЛЬНОЙ ИЕРАРХИИ
Равнозначные элементы необходимо обозначать одинаковыми графическими объектами, сгруппировывать под

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

Чем более важен элемент,
тем более он заметен.

Элементы, логически связанные между собой, должны быть связаны и визуально.

Слайд 14

ПРИНЦИП ВИЗУАЛЬНОЙ ИЕРАРХИИ
Значение графического элемента должно определяться его окружением. Желательно выделять

размером, формой, цветом элементы, наиболее важные для принятия решений.

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

Слайд 15

ПРИНЦИП ВИЗУАЛЬНОЙ ИЕРАРХИИ
Логически связанные между собой элементы должны быть связаны визуально.

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

Слайд 16

ПРИНЦИП ПЕРЕВЕРНУТОЙ ПИРАМИДЫ
Смысл этого принципа состоит в том, чтобы вынести

самую важную информацию и элементы управления на первый план и сделать их легкодоступными пользователю. Желательно размещать содержимое в виде перевернутой пирамиды:

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

Слайд 17

ПРИНЦИП ЭМОЦИОНАЛЬНОГО ВОЗДЕЙСТВИЯ
Цвет вызывает эмоции. Например, красный цвет – волнующий,

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

Слайд 18

ПРИНЦИП СКАНИРУЕМОСТИ
В Сети пользователи не читают текст так, как с

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

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

Пользовательский интерфейс. Лекция 4

Содержание

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

ПРИНЦИП ПРОСТОТЫ И АДЕКВАТНОСТИ К пользовательскому интерфейсу предъявляются два противоречивых требования: простота

ПРИНЦИП СТИЛИСТИЧЕСКОЙ ЦЕЛОСТНОСТИ Стилистическая целостность пользовательского интерфейса достигается единообразием оформления, под которым

ПРИНЦИП ВЫРАВНИВАНИЯНи один элемент пользовательского интерфейса не должен располагаться случайным образом,

ПРИНЦИП УМЕНЬШЕНИЯ ВИЗУАЛЬНОГО ШУМА Визуальный шум одно из основных препятствий для получения

ПРИНЦИП ИСПОЛЬЗОВАНИЯ ПРИВЫЧНЫХ АССОЦИАЦИЙ И СТЕРЕОТИПОВ Сущность данного принципа состоит в применении для

ПРИНЦИП ИЗБЫТОЧНОСТИ Для улучшения восприятия структуры системы иногда бывает необходимо параллельное представление

ПРИНЦИП ПОВТОРА Некоторые компоненты стилевого оформления должны повторяться, что сделает пользовательский интерфейс

ПРИНЦИП ВИЗУАЛЬНОЙ ИЕРАРХИИ Элементы, являющиеся частями друг друга, представляются в виде вложений.

ПРИНЦИП УДОБСТВА ИСПОЛЬЗОВАНИЯ Важным моментом при создании интерфейсов является «usability» (usability — удобство

ПРИНЦИП ВИЗУАЛЬНОЙ ИЕРАРХИИ Каждый элемент пользовательского интерфейса необходимо взвешивать по его способности

ПРИНЦИП ВИЗУАЛЬНОЙ ИЕРАРХИИ Равнозначные элементы необходимо обозначать одинаковыми графическими объектами, сгруппировывать под

ПРИНЦИП ВИЗУАЛЬНОЙ ИЕРАРХИИ Значение графического элемента должно определяться его окружением. Желательно выделять

ПРИНЦИП ВИЗУАЛЬНОЙ ИЕРАРХИИ Логически связанные между собой элементы должны быть связаны визуально.

ПРИНЦИП ПЕРЕВЕРНУТОЙ ПИРАМИДЫ Смысл этого принципа состоит в том, чтобы вынести

ПРИНЦИП ЭМОЦИОНАЛЬНОГО ВОЗДЕЙСТВИЯ Цвет вызывает эмоции. Например, красный цвет – волнующий,

ПРИНЦИП СКАНИРУЕМОСТИ В Сети пользователи не читают текст так, как с

Похожие презентации