Разработка интерфейса программы

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

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

Главное чтобы костюмчик сидел

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

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

Ярким примером маленькой утилиты с простыми возможностями, завоевавшей весь мир является WinAMP. Программа простая и какое бы ни было ее главное окно, пользователь всегда сможет разобраться, как запустить воспроизведение музыки. В данном случае именно нестандартное, но красивое решение, а не пуля в спине конкурента 🙂 является залогом победы. А если еще и добавить возможность простой смены внешнего вида (поддержка скинов), то можно считать, что на 50% победа обеспечена. После этого можно снабжать оригинальный интерфейс солидными возможностями.

Толстая дама на худых ногах

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

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


Несмотря на то, что во Flash MX изменился дизайн, все равно прослеживается присутствие Photoshop

ГОСТ 31337

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

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

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

Мое лицо — лицо красавицы

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

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

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

Названия пунктов меню должны быть максимально информативными и при этом желательно состоять не более чем из трех слов. Более подробную информацию всегда можно вывести в строке состояния. Для стандартных пунктов меню желательно использовать уже устоявшиеся названия. Например, для меню «Файл/Создать» нет смысла писать «Файл/Создать новый взлом». Это слишком длинное название и абсолютно бессмысленно.

Мои любимые плюшки

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

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

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

Рекомендуется, чтобы кнопки на панели были настраиваемыми, чтобы можно было убрать то, что мешает и установить необходимое. Но если кнопок не более 10, то это будет уже лишним. В этом случае можно просто добавить возможность отображать или прятать панель.

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

Дерни за пимпочку

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

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

Поговори со мной

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

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

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


Окно создания резервной копии в The Bat

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

Единственное, что здесь хорошо сделано – все компоненты хорошо сгруппированы. Элементы выбора CheckBox собраны в одну группу, а RadioButton в другую.

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


Окно создания резервной копии в The Bat после небольших манипуляций

Свойствами наружу

Если нужно отображать свойства какого-то объекта (документа, файла), то его желательно делать вытянутым по вертикали. Это исключение из правил, которое надо запомнить и ему желательно следовать всегда.

Всю информацию нужно разложить по тематическим разделам, в виде отдельных закладок. Ярким примером такого окна является окно свойств файла в проводнике или окна свойств документа в Word (меню Файл/Свойства).

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

Окна настроек

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

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

Этапы разработки интерфейса

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


Настройки mIRC
Посмотри на рисунок, где показано окно настроек программы mIRC. Оно смотрится просто ужасно. Дерево разделов слишком узкое, и окно тоже не достаточно широкое. Элементы управления в разделах не упорядочены и содержат абсолютно ненужные кнопки, которые можно куда-нибудь вынести. Кнопка Sort как-то отделена от других и пропадает в бездне, а выпадающие списки имеют разную длину. Теперь посмотри на рисунок ниже, где я немного отредактировал это окно в Paint-е. Теперь оно стало более широким, и элементы смотрятся намного стройнее, потому что выровнены по левому краю и имеют одинаковую ширину. Кнопка с изображением солнца не имело подсказки и ее предназначение вообще не понятно, потому что просто перебрасывает нас на настройки раздела Connect, поэтому была удалена. То, что в разделе появилось свободное пространство, не означает, что окно можно уменьшить. В других разделах места все равно может не хватить. Это в главном окне стараются напихать максимум информативности с помощью максимального количество пимпочек, а в диалогах можно оставлять сколько угодно пустого места, лишь бы это смотрелось.

Настройки mIRC после моего вмешательства

Заключение

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

Я вспоминаю, как однажды описывал программу Feurio, которая была мощнейшей для записи музыкальных дисков. Пришлось потратить неделю на разборки с интерфейсом, и вывод был один – программа была мощнейшей и должна присутствовать в арсенале любого меломана. Но я не до такой степени меломан, чтобы мирится с неудобствами. Лучше простой, но удобный WinOnCD, чем навороченный, но уродливый Feurio. Вот если бы я писал диски каждый день, то может быть использовал что-то сложное, а так ….

Помни, если не знаешь, как что-то сделать, посмотри на конкурентов!!!


Перегруженный интерфейс Feurio

Внимание!!! Если ты копируешь эту статью себе на сайт, то оставляй ссылку непосредственно на эту страницу. Спасибо за понимание

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

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

  • запуск, приостанов и снятие задачи с выполнения;
  • задание или изменение приоритета задачи;
  • взаимодействие задач между собой (механизмы сигналов, семафорные примитивы, очереди, конвейеры, почтовые ящики);
  • RPC (remote procedure call) — удаленный вызов подпрограмм.

Управление памятью:

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

Управление вводом/выводом:

  • запрос на управление виртуальными устройствами (напомним, что управ­ление вводом/выводом является привилегированной функцией самой ОС, и никакая из пользовательских задач не должна иметь возможности непо­средственно управлять устройствами);
  • файловые операции (запросы к системе управления файлами на создание, изменение и удаление данных, организованных в файлы).

Здесь мы перечислили основные наборы функций, которые выполняются ОС по соответствующим запросам от задач. Что касается пользовательского интерфейса операционной системы, то он реализуется с помощью специальных программ­ных модулей, которые принимают его команды на соответствующем языке (воз­можно, с использованием графического интерфейса) и транслируют их в обычные вызовы в соответствии с основным интерфейсом системы. Обычно эти модули называют интерпретатором команд. Так, например, функции такого интерпрета­тора в MS-DOS выполняет модуль COMMAND.COM. Получив от пользователя команду, такой модуль после лексического и синтаксического анализа либо сам выполняет действие, либо, что случается чаще, обращается к другим модулям ОС, используя механизм API. Надо заметить, что в последние годы большую по­пулярность получили графические интерфейсы (GUI), в которых задействованы соответствующие манипуляторы типа «мышь» или «трекбол». Указание курсо­ром на объекты и щелчок (клик) или двойной щелчок по соответствующим кла­вишам приводит к каким-либо действиям — запуску программы, ассоциирован­ной с указываемым объектом, выбору и/или активизации пунктов меню и т. д. Можно сказать, что такая интерфейсная подсистема транслирует «команды» поль­зователя в обращения к ОС.

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

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

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

Разработка интерфейса программы

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

Так, например, в операционной системе MS-DOS, которая разрабатывалась для однозадачного режима (поскольку процессор 18086 не поддерживал мультипро­граммирование), использовался механизм программных прерываний. При этом основной набор функций API был доступен через точку входа обработчика int 21h.

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


⇐ Предыдущая19202122232425262728Следующая ⇒


Дата публикования: 2014-11-29; Прочитано: 511 | Нарушение авторского права страницы



studopedia.org — Студопедия.Орг — 2014-2018 год.(0.001 с)…

Урок «Разработка интерфейса программы»

Интерфейс приложений

Основные элементы управления: строка заголовка, строка меню, панели инструментов, рабочая область и строка состояния, область задач, контекстное меню, смарт – теги.

В верхней части окна приложения расположена строка заголовка. Она содержит имя программы и имя открытого документа. Если имя документу не присвоено, в строке заголовка появляется имя по умолчанию, снабженное порядковым номером, например для Word – Документ1.

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

Первая слева кнопка предназначена для сворачивания окна в кнопку на панели задач, вторая кнопка – для установки полноэкранного или нормального представления окна (в зависимости от текущего представления), третья – для закрытия окна приложения.

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

 

Рис.6.1. Окно текстового редактора Word

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

Имена некоторых команд заканчиваются многоточием. После активизации такой команды открывается диалоговое окно, в котором нужно задать параметры выполняемой команды. Однако все установки в диалоговом окне будут действительны только в том случае, если закрыть окно с помощью кнопки ОК или клавиши <Enter>. При нажатии кнопки Отмена или клавиши Esc для закрытия окна установки игнорируются.

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

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

Разработка интерфейса программного продукта

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

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

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

Строка состояниярасположена в нижней части окна приложения.

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

Контекстное меню. Некоторые объекты имеют контекстные меню с командами, предназначенными для их обработки. контекстное меню появляется рядом с выделенным объектом после щелчка правой кнопкой мыши или нажатия комбинации клавиш Shift+F10.

Смарт-теги. Компания Microsoft рассматривает смарт-теги как одно из важных средств ускорения работы пользователя. Впервые смарт-теги появились в приложениях Word и Excel пакета Microsoft Office 2000. Смарт-теги представляют собой элементы пользовательского интерфейса, с помощью которых программа отмечает в документах отдельные объекты, например слово или словосочетание (в Word они подчеркнуты фиолетовой пунктирной линией, в Excel выделяются с помощью фиолетового треугольника, находящегося в правом нижнем углу ячейки таблицы), и предполагает список возможных действий над ними (рис.6.2.).

Рис.6.2. Список действий, предлагаемых смарт-тегами Excel

Для того чтобы вывести список на экран, следует поместить курсор мыши на выделенный объект, немного подождать и щелкнуть на кнопке смарт-тега. В результате появится список действий. В котором можно выбрать нужный элемент. Таким образом, смар-теги позволяют распознавать вводимые данные и выполнять над ними различные действия – в зависимости от результатов распознавания. Набор смарт-тегов, поставляемый с пакетом Microsoft Office, можно расширить, создавая собственные смарт-теги.

Предыдущая16171819202122232425262728293031Следующая


Дата добавления: 2016-04-02; просмотров: 277;


ПОСМОТРЕТЬ ЕЩЕ:

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

Закрыть меню