1. Теоретические сведения

1.1. Принципы разработки пользовательского интерфейса

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

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

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

Формы, элементы управления и меню

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

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

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

Принципы дизайна интерфейса

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

• простота;

• оптимальное размещение элементов управления;

• логика и последовательность;

• эстетика внешнего вида.

Простота

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

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

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

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

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

Композиция формы

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

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

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

Согласованность

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

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

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

Эстетика внешнего вида

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

Выбор цветов

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

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

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

Сделайте важные элементы приложения контрастными, но не полагайтесь при выделении информации исключительно на цвет.

Подбор шрифта

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

Изображения и значки

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

Лучше для значков применять простые изображения, которые легко передаются квадратом размеров 16x16 пикселов. Более сложные значки сильно искажаются при просмотре с низким разрешением.

Фигурные и прозрачные элементы управления

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

Blog

1. Теоретические сведения

Содержание