DevProg: Блог для программистов

Секреты программирования. Примеры разработки. Обзоры программёрского софта, блогов и форумов и просто полезные советы!

4 совета по проектированию интерфейса

Posted by devprog на Октябрь 7, 2008

Отрывок из книги по VB.5

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

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

Расположение управляющих элементов

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

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

Позволительность

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

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

Использование свободного пространства

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

Простота интерфейса

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

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

Advertisements

комментария 2 to “4 совета по проектированию интерфейса”

  1. самый имхо лучший интерфейс это черный экран с буковками и мерцающей вертикальной чертой)

  2. devprog said

    Расскажи это толпе старых бабушек-бухгалтеров ;)

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

 
%d такие блоггеры, как: