Главная страница

П_К_Лекц_ї. Что такое интерфейс


Скачать 1.02 Mb.
НазваниеЧто такое интерфейс
Дата22.02.2022
Размер1.02 Mb.
Формат файлаdoc
Имя файлаП_К_Лекц_ї.doc
ТипДокументы
#369831
страница10 из 14
1   ...   6   7   8   9   10   11   12   13   14
, , и ). Могут также использоваться текстовые клавиши, обеспечивающие синхронное сопоставление вводимых символов с символами пунктов списка. Эти клавиши не только управляют прокруткой списка, но также выполняют выбор со­ответствующего пункта. Если в результате поиска ни один пункт в списке оказался не выбран, то выбранным считается пункт в списке, определяемый действием теку­щей клавиши навигации. Например, если пользователь нажимает клавишу <Ноmе>, то выбранным становится первый элемент в списке.

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

5.3.2. ВЫПАДАЮЩИЙ СПИСОК

Подобно списку единичного выбора, выпадающий список Drop-downListBoxпредусматривает возможность выбора единственного пункта; различие заключается в том, что выпадающий список отображается на экране только по требованию пользо­вателя. Когда список закрыт (точнее, свернут), в его окне отображается только выб­ранный пункт. Чтобы изменить выбор, пользователю необходимо открыть список. Хотя выпадающий список представляет собой эффективный способ экономно­го использования пространства окна, он вместе с тем требует от пользователя дополнительных действий для просмотра и выбора пункта по сравнению со списком единичного выбора.

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

Взаимодействие пользователя с выпадающим списком подобно работе с выпада­ющим меню. Например, чтобы отобразить список, пользователь может щелкнуть Л КМ па кнопке меню, а выбор пункта приводит к автоматическому закрытию списка; вы­бор пункта, как и в меню, выполняется щелчком ЛКМ в соответствующей строке.

Пользователь может также работать с выпадающим списком, используя клавишу доступа и клавиши управления курсором. При нажатии клавиши доступа, клавиши <ТаЬ> или клавиш <Вверх>, < Вниз>, а также двух последних клавиш в сочетании с клавишей , выпадающий список открывается. Клавиши управления курсором и текстовые клавиши обеспечивают одновременно навигацию и выбор пункта в спис­ке. Если пользователь нажимает клавиши <Вверх>+< Alt >, <Вниз>+< Alt >, клави­шу <ТаЬ>, или клавишу доступа, чтобы перейти на другой элемент интерфейса, спи­сок автоматически закрывается. Клавиша также закрывает список. При закрытии списка сделанный в нем выбор должен сохраняться.

5.3.3. РАСШИРЕННЫЙ СПИСОК И СПИСОК МНОЖЕСТВЕННОГО ВЫБОРА

Хотя большинство списков обеспечивают единичный выбор, в некоторых ситу­ациях пользователю требуется выбрать более чем один пункт. Расширенный спи­сок (ExtendetListBox) и список множественного выбора (MultipleSelectionListBox) позволяют реализовать такую операцию.

Для названных списков остаются справедливыми те же соглашения относитель­но высоты и ширины окна, как и для рассмотренных ранее.

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

5.3.4. МОДИФИЦИРУЕМЫЙ СПИСОК

Модифицируемый список (ListViewControl) представляет собой особую фор­му расширенного списка, который отображает набор пунктов, каждый из которых содержит пиктограмму и текстовую метку. Содержимое модифицируемого списка может быть представлено в одном из четырех видов (табл. 5.6).

Таблица 5.6.

Форматы модифицируемого списка

Формат

Описание

Пиктограмма

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

Маленькая пиктограмма

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

Список

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

Отчет

Каждый пункт отображается в виде строки, содержащей несколько столбцов; самый левый столбец содержит иконку и метку. Последующие столбцы содержат информацию, поставляемую приложением, формирующим данный модифицируемый список

5.3.5. МОДИФИЦИРУЕМОЕ ДЕРЕВО

Модифицируемое дерево (TreeViewControl) является, в свою очередь, част­ным случаем модифицируемого списка, в котором содержимое отображается с уче­том логического и иерархического соотношения между пунктами списка. В таком списке имеются кнопки, которые позволяют изменять форму представления струк­туры списка в целом и/или отдельных пунктов: они могут отображаться либо в развернутом, либо в свернутом виде. ). Модифицируемое дерево обычно используется в тех случаях, когда необходимо отобразить отношение между набо­ром контейнеров или других иерархических элементов.

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

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

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

Клавиатурная навигация реализуется с помощью клавиш управления курсором: переход между пунктами выполняется при нажатии клавиш <Вниз> и <Вверх>, а клавиши <Влево> и <Вправо> используются для перемещения вдоль конкретной ветви дерева. При нажатии клавиши <Вправо> может также выполняться разверты­вание пункта, если он отображен в свернутом' виде. Для навигации по списку и выбо­ра пунктов иногда используются текстовые клавиши; их работа, как и в других спис­ках, основана на использовании техники синхроннного сопоставления символов.

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

5.4. ТЕКСТОВЫЕ ОБЛАСТИ

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

В текстовой области не используются текстовые метки в качестве элементов управления. Тем не менее, вы можете дополнить ее статическим текстом, поясняю­щим назначение текстовой области и обеспечивающим индикацию ситуаций, ког­да область недоступна. Если статический текст состоит из нескольких слов, при его написании целесообразно использовать рассмотренные ранее правила использова­ния заглавных букв. Статический текст может также быть использован для опреде­ления клавиши доступа к текстовой области. При этом необходимо помнить, что при нажатии клавиши доступа фокус ввода должен устанавливаться на текстовую область, с которой метка связана, а не на сам статический текст. Вы можете также обеспечить клавиатурную навигацию в текстовой области, используя клавишу <ТаЬ> и клавиши перемещения курсора.

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

5.5. ПАНЕЛЬ ИНСТРУМЕНТОВ И СТРОКА СОСТОЯНИЯ

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

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

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

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

Рекомендуется также обеспечивать возможность отображения каждой кнопки на панели инструментов по крайней мере двух размеров: 24 на 22 и 32 на 30 пиксе­лов. Если для обозначения кнопок используются графические метки, они должны иметь размеры не более чем 16 на 16 и 24 на 24 пикселов соответственно.

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

5.6. ДРУГИЕ ЭЛЕМЕНТЫ ГРАФИЧЕСКОГО ИНТЕРФЕЙСА

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

5.7. ВЫБОР ВИЗУАЛЬНЫХ АТРИБУТОВ ОТОБРАЖАЕМОЙ ИНФОРМАЦИИ

Удачный (в смысле продуманный) выбор визуальных атрибутов отображаемой на экране информации — это значительно больше, чем просто красивое внешнее оформ­ление приложения. Качество визуального проектирования в значительной степени влияет и на психофизиологическое состояние пользователя, и на эффективность его работы в целом. Вследствие этого даже достаточно мощный по своим возможностям программный продукт может оказаться недостаточно функциональным, если визуаль­ное представление его интерфейса не удовлетворяет соответствующим требованиям. Именно поэтому при реализации больших и ответственных проектов программисты в последнее время все чаще прибегают к услугам профессиональных дизайнеров. В час­тности, уже получил практически официальный статус такой термин, как Web-дизайн.

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

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

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

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

5.7.1. КОМПОЗИЦИЯ И ОРГАНИЗАЦИЯ

Исследования в данной области (как, впрочем, и практический опыт) свиде­тельствуют о том, что человек значительно лучше воспринимает визуальную ин­формацию, если она соответствующим образом организована в пространственном отношении. Мы просматриваем информацию на экране так же, как и любые другие формы информации. Взгляд всегда привлекают в первую очередь цветные элемен­ты, а не черно-белые, изолированные (отдельно стоящие), а не сгруппированные, и, наконец, графические, а не текстовые.

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

  • иерархическая организация отображаемой информации;

  • визуальное выделение наиболее важных элементов;

  • сбалансированность структуры экрана;

  • визуальное объединение логически взаимосвязанных элементов;

  • обеспечение удобочитаемости и логической согласованности отображаемой информации;

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

Иерархическая организация информации

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

1. Какая информация наиболее важна для пользователя?

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

2. Что пользователь хочет или должен делать в первую, во вторую, в третью
очередь'?

3. Что пользователь должен видеть на экране в первую, во вторую, в третью
очередь?

Визуальное выделение наиболее важных элементов

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

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

Сбалансированность структуры экрана

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

Визуальное объединение логически взаимосвязанных элементов

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

Удобочитаемость и логическая согласованность отображаемой информации

Имеется в виду, что любая информация (не только текстовая) должна быть вы­ражена в компактной и вместе с тем в доступной форме; кроме того, пользователь должен быть способен уяснить, как она связана с предыдущими и последующими шагами задания.

При реализации данного принципа полезно получить ответы наследующие вопросы:

  • Можно ли представленную на экране идею пли понятие выразить более просто?

  • Насколько легко сможет пользователь выполнить данный шаг?

  • Действительно ли все отображаемые элементы необходимы для выполнения
    этого шага?

Интеграция

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

  • Насколько оказывается согласованным экранное представление различных
    компонентов приложения в процессе работы пользователя?

Как соотносятся визуальные параметры приложения с системным интерфей­
сом и интерфейсом других приложений?

5.7.2. ЦВЕТ

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

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

голубой — успокаивает;

красный — волнует и утомляет;

зеленый — настраивает на добродушный и безынициативный лад;

желтый — веселый, оптимистичный, вызывает легкомысленный настрой;

оранжевый — раскрепощает фантазию;

фиолетовый — гибелен для глаз, цвет зависти, тревоги, неудовлетворенности;

коричневый — угнетает умственную активность;

черный — мрачный, способствует возникновению головных болей, но снижает число ошибок.

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

Кроме того, при выборе цветовой палитры следует учитывать целый ряд допол­нительных факторов:

  • Хотя вы можете использовать цвет, чтобы отразить связь между теми или
    иными объектами, ассоциация между выбранным вами цветом и конкретным зна­
    чением не всегда будет очевидна или легко узнаваема для пользователя.

  • Цвет является очень субъективной характеристикой (помните народную муд­
    рость: «На вкус и на цвет товарищей нет»?); поэтому то, что нравится вам, совсем не
    обязательно будет приятно пользователям.

  • Некоторые пользователи могут иметь проблемы с цветовосприятием (около 9
    процентов взрослого мужского населения имеют то или иное отклонение в воспри­
    ятии цвета).

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

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

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

5.7.3. ШРИФТ

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

На экранах стандартных мониторов шрифты обычно менее разборчивы, чем на от­печатанной странице. Старайтесь не использовать курсив (Italic) и рубленый шрифт (Serif), поскольку они трудны для чтения, особенно при низком разрешении монитора.

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

.7.4. «МНОГОМЕРНОСТЬ» ЭКРАНА

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

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

Разрабатывая ваши собственные визуальные элементы, будьте осторожны: не переусердствуйте в использовании «объемных» образов, поскольку изобра­жение каждого «трехмерного» объекта занимает на экране значительно больше места, чем его «плоский» аналог. Учитывая это обстоятельство, и следуя все тому же принципу согласованности интерфеса, используйте трехмерные эффекты только для изображения интерактивных элементов. При этом вводите лишь те дета­ли, которые действительно необходимы для идентификации образа пользователем.

5.7.5. ПРОСТРАНСТВЕННОЕ РАЗМЕЩЕНИЕ ВИЗУАЛЬНЫХ ЭЛЕМЕНТОВ

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

Группирование

Группирование предполагает компактное размещение взаимосвязанных элемен­тов. Для реализации группирования может использоваться либо специальный эле­мент — группирующий блок, либо просто размещение элементов на соответствую­щем расстоянии друг от друга.

С целью обеспечения единого подхода к пространственному размещению гра­фических элементов введена специальная единица измерения — dialogbaseunit(единица площади диалоговой панели), которую мы в дальнейшем для краткости будем называть «дискретой окна».

Дискрета окна — это аппаратно-независимая величина; в горизонтальном направле­нии она равна одной четверти средней ширины символов текущего системного шрифта; по вертикали — одной восьмой средней высоты символов текущего системного шрифта.

Рекомендуется оставлять между элементами в группе промежуток, равный по край­ней мере четырем дискретам, а расстояние до края окна и между группами должно быть не менее семи дискрет.

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

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

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

5.7.6. ВИЗУАЛИЗАЦИЯ ВЫПОЛНЯЕМЫХ ОПЕРАЦИЙ

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

Визуализация операций выбора

Визуальная обратная связь при выполнении операций выбора должна позво­лить пользователю однозначно идентифицировать выбранный объект на фоне ос­тальных. Способ отображения выбора обычно зависит от сущности объекта и теку­щей ситуации.

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

Тем не менее, в некоторых ситуациях может оказаться полезным одновременное визуальное выделение нескольких объектов, относящихся к разным компонентам приложения. Например, когда пользователь выбирает объект в первичном окне и затем выбирает пункт меню, относящегося к этому объекту, выбор должен отобра­жаться как для объекта, так и для пункта меню. В некоторых случаях требуется указать, что один из существующих выборов является «первичным», а другой (или другие) — «вторичным». В таких ситуациях целесообразно использовать цвет: об­ласть вокруг «вторичного» выбора может быть окрашена цветом, отличающимся от цвета выделения активного выбора.

Для многих типов объектов для указания состояния выбора может применяться системный цвет выделения.

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

5.7.6. ВИЗУАЛИЗАЦИЯ ВЫПОЛНЯЕМЫХ ОПЕРАЦИЙ

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

Визуализация операций выбора

Визуальная обратная связь при выполнении операций выбора должна позво­лить пользователю однозначно идентифицировать выбранный объект на фоне ос­тальных. Способ отображения выбора обычно зависит от сущности объекта и теку­щей ситуации.

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

Тем не менее, в некоторых ситуациях может оказаться полезным одновременное визуальное выделение нескольких объектов, относящихся к разным компонентам приложения. Например, когда пользователь выбирает объект в первичном окне и затем выбирает пункт меню, относящегося к этому объекту, выбор должен отобра­жаться как для объекта, так и для пункта меню. В некоторых случаях требуется указать, что один из существующих выборов является «первичным», а другой (или другие) — «вторичным». В таких ситуациях целесообразно использовать цвет: об­ласть вокруг «вторичного» выбора может быть окрашена цветом, отличающимся от цвета выделения активного выбора.

Для многих типов объектов для указания состояния выбора может применяться системный цвет выделения.

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

Представление пересылаемого объекта всегда определяется свойствами объек­та- (позиции- ) приемника. Другими словами, когда перемещаемое изображение оказывается над объектом-приемником, оно должно отражать результат пересыл­ки. Например, если пересылаемый объект будет вставлен в объект-приемник в ка­честве пиктограммы, то изображение должно принять соответствующий вид.

Анимация

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

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

Избегайте необоснованного использования анимации. Если анимация исполь­зуется только для создания декоративного эффекта, она может отвлекать или даже раздражать пользователя (вспомните, например, телевизионные заставки перед рекламными блоками).

1   ...   6   7   8   9   10   11   12   13   14


написать администратору сайта