Имя Пароль
Зарегистрироваться


* При перепечатке материалов ссылка на www.SeoLiga.ru обязательна! RSS



Принципы дизайна интерфейса
7 февраля 2009

Дизайн пользовательского интерфейса во многом определяет впечатление от рабо-
ты с приложением. От него зависит, примут ли пользователи приложение и как
быстро они освоят его. Основных принципов дизайна немного:
• простота;
• оптимальное размещение элементов управления;
• логика и последовательность;
• эстетика внешнего вида.
Простота
Простота пользовательского интерфейса — это одна из важнейших его характерис-
тик. Освоение и использование программы с запутанным или чересчур сложным
интерфейсом весьма затруднительно и требует много времени. Пользовательский
интерфейс должен помогать быстро исполнять любые операции, необходимые для
взаимодействия с программой, предоставляя ровно столько возможностей, сколь-
ко требуется на данном этапе работы.
Конструировать интерфейс следует с учетом логики работы приложении. Эле-
менты управления, отображающие логически связанные данные, следует размещать
на формах группами. То же касается списков, полей и флажков для выбора и уста-
новки предопределенных параметров. Корректная передача фокуса позволяет быс-
тро перемещаться между элементами управления, составляющими группу, нажи-
мая клавишу Tab.
При разработке интерфейса часто допускают ошибку, пытаясь точно воспроиз-
вести объект из реального мира. Например, при конструировании формы для заме-
ны бумажного бланка возникает естественное желание воспроизвести этот бланк
«один к одному». Иногда такой подход оправдан, но чаще он лишь ограничивает
возможности приложения, не принося реальной выгоды. В любом случае следует
хорошо обдумать ситуацию и попытаться расширить функциональность приложе-
ния за счет дополнительных возможностей, которые предоставляет компьютер,
Применение значений по умолчанию также позволяет упростить пользователь-
ский интерфейс. Если большинство клиентов выбирают значение «Вашингтон» для
поля «Штат», имеет смысл назначить «Вашингтон» значением по умолчанию для
этого поля. Однако следует позаботиться о том, чтобы при необходимости пользо-
ватель смог без труда указать другое значение.
Пользовательский интерфейс рекомендуется создавать на основе данных опро-
са целевой аудитории. Узнайте, как пользователи хотят работать с приложением, и
постарайтесь спроектировать интерфейс так, чтобы упростить решение наиболее
типовых задач. Результаты опросов также пригодятся для совершенствования гото-
вых приложений.
Композиция формы
При размещении элементов управления следует учитывать, насколько они важны и
как часто они требуются. Предположим, есть форма для ввода обязательной и нео-
бязательной информацию. Ясно, что элементы управления для ввода обязательной
информации важнее и поэтому должны выделяться среди остальных элементов
формы. Как правило, предполагают, что пользовательский интерфейс просматри-
вают слева направо и сверху вниз, поэтому считается, что наиболее важные и вос-
требованные элементы управления лучше размещать в верхней части формы. Эле-
менты управления, с которыми пользователь работает после завершения основных
действий на форме (такие, как кнопка Submit), логично разместить в нижней части
формы.
Следующий вопрос — согласованность отображаемой информации. Элементы
управления, показывающие логически связанные данные, следует группировать.
Допустим, вы создаете форму для публикации сведений о клиенте, товаре или слу-
жашем. Для ее создания можно сгруппировать необходимые элементы управления
средствами элемента Tab, чтобы пользователь легко перемешался между ними.
Наконец, позаботьтесь об эстетике размещения элементов управления на фор-
ме. Избегайте перегруженных форм, содержащих больше данных, чем можно усво-
ить с первого взгляда. Старайтесь оставлять достаточно свободного места между
элементами управления — так вы придадите форме привлекательный вид и облег-
чите ее чтение.
Согласованность
Облик интерфейса должен гармонировать с содержанием приложения, в против-
ном случае интерфейс раздражает взгляд, а приложение кажется нелогичным и де-
зорганизованным, что затрудняет его освоение.
Согласованность следует закладывать в проекте. Для этого необходимо еще до
разработки создать стройную и логичную схему внешнего вида приложения. Опре-
деляя облик интерфейса, продумайте цвета, шрифты, размеры и тип используемых
элементов управления. Не поддавайтесь искушению сделать интерфейс броским —
применяйте лишь то, что требуется для решения поставленной задачи. Перегрузка
элементами управления и множество броских, но неуместных эффектов лишь от-
влекает пользователя и в конечном счете снижает производительность его труда.
Все формы приложения необходимо создавать по единой схеме. Позаботьтесь о
том, чтобы пользователю не пришлось заново привыкать к размещению элементов
интерфейса каждый раз, когда он открывает новую форму.
Эстетика внешнего вида
По возможности сделайте внешний вид приложения привлекательным и приятным,
однако ни в коем случае не приносите ясность и простоту интерфейса в жертву при-
влекательности. Достаточно, чтобы интерфейс не был отталкивающим.
Выбор цветов
Грамотное использование цветов — один из действенных способов улучшить вне-
шний вид интерфейса, однако берегитесь излишеств. Яркие кричащие цвета при-
влекают одних пользователей, но вызывают дискомфорт у других, поэтому в каче-
стве фона лучше выбирать приглушенные тона.
При разработке цветовой схемы приложения также важно ориентироваться на
целевую аудиторию. Если вы выполняете заказ компании, стоит воспользоваться
ее фирменными цветами, а если программа предназначена для многонациональ-
ной аудитории, учитывайте смысловую нагрузку тех или иных цветов в различных
культурах. Стремитесь к последовательности в оформлении интерфейса, но в ра-
зумных пределах.
Подумайте, будут ли выбранные цвета удобными для пользователей, в том числе
для людей с дефектами зрения. Например, голубой цвет на черном фоне читается
очень плохо. Не забывайте также о цветовой слепоте: некоторые люди не ра:шича-
ют красный и зеленый цвета, поэтому они не увидят красный текст на зеленом фоне.
Сделайте важные элементы приложения контрастными, но не полагайтесь при вы-
делении информации исключительно на цвет.
Подбор шрифта
Основным критерием выбора шрифта является его удобство, причем схема приме-
нения шрифтов должна быть единой для всего приложения. Избегайте трудно чи-
таемых и вычурных гарнитур, старайтесь применять простые, легко читаемые
шрифты вроде Palatine или Times New Roman. Шрифты, имитирующие рукопис-
ный текст, а также декоративные допускаются для визуального выделения, напри-
мер, заголовков страниц, но только там, где это уместно. Никогда не оформляйте
такими шрифтами важный текст.
Изображения и значки
Изображения и значки делают интерфейс более привлекательным, но при этом важ-
но тщательно продумать их применение. Излишние и отвлекающие изображения
затрудняют работу с приложением. Хотя значки успешно применяются во многих
приложениях как альтернативный способ представления информации, это не от-
меняет необходимость их тщательного выбора с учетом потребностей конечного
пользователя. Например, значок в виде дорожного знака «stop», запрещающего дви-
жение, подходит для предупреждения пользователя о возможных нежелательных
последствиях их действий. Однако дорожные знаки одинаковы не во всех странах,
и вполне вероятно, что для некоторых ваших пользователей такой значок окажется
бессмысленным. Изучайте целевую аудиторию и выбирайте значки и другие графи-
ческие элементы, исходя из ее особенностей.
Лучше для значков применять простые изображения, которые легко передаются
квадратом размеров 16x16 пикселов. Более сложные значки сильно искажаются при
просмотре с низким разрешением.
Фигурные и прозрачные элементы управления
.NET Framework предоставляет инструменты для создания элементов управления
разной прозрачности и формы, отличной от традиционного прямоугольника. Хотя
это чрезвычайно мощное средство создания визуальных эффектов для интерфейса,
пользуйтесь им в меру. Например, текстовое поле в форме пончика выглядит за-
бавно и оригинально, но едва ли оно повысит эффективность приложения или сде-
лает его удобнее. Применяя подобные эффекты, всегда помните об интересах ко-
нечного пользователя. Разнообразные элементы управления и формы (например
круглые кнопки) делают пользовательский интерфейс привлекательным и не вы-
биваются из стиля приложения, только когда применены со вкусом. Полупрозрач-
ные формы хороши тем, что позволяют держать в поле зрения форму, расположен-
ную на заднем плане. Эстетика повышает удобство работы с приложением.

Теги: .NET

Статьи по теме:

Лямбда-выражения
Обработка событий клавиатуры на уровне формы
Отображение текста
Создание плана блочного тестирования
Свойства, доступные только для чтения или только для записи
Свойства Font, Cursor и BackGroundlmage
Декларативная защита по правам доступа к коду
Реализация полиморфизма через интерфейсы
Перебор элементов массивов и наборов
Свойства BackColor, ForeColor и Text
Инкапсуляция
Проверка на уровне поля
Карринг (currying)
Свойства по умолчанию и индексаторы
Cosmos – C# Open Source Managed Operating System
| .NET | Pavel |
 


Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30


     



Rambler's Top100

Данный сайт или домен продается ICQ: 403-353-727

© 2009 Seoliga.ru | .NET | Принципы дизайна интерфейса. Регион сайта: Москва и Санкт-Петербург