On-line учебник visual C++ | Навигация

Правильное оформление окон

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

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

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

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

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

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

Рис. 1.13. Внешний вид программы для просмотра DVD - дисков в ОС Windows

Рис. 1.14. Интерфейс программы Macromedia Flash MX

Когда появился Flash 5, то разработчики Macromedia постарались максимально приблизить его интерфейс к Photoshop . Несмотря на то, что одна программа для работы с растровой графикой, а другая — для векторной, они в управлении стали похожими. Даже панель инструментов сверху окна убрали, хотя для повышения "юзабилити" панель нужна. Благодаря этому Macromedia Flash 5 получил невероятную популярность, особенно среди профессионалов-художников. А ведь в 5-й версии графические возможности не сильно изменились, главными нововведениями стали расширенный ActionScript и измененный интерфейс. Художники не программируют, поэтому ActionScript их не волнует, а вот интерфейс Adobe Photoshop пришелся по вкусу, потому что все стало знакомым, и не нужно тратить долгие месяцы на переобучение и привыкание. На рис. 1.14 посмотрите образец интерфейса программы Flash MX в исполнении Macromedia .

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

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

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

Отрицательным примером можно назвать программу 3D FTP. Разработчикам понравился успех WinAMP, и они сделали поддержку скинов в FTP -клиенте. Такой ужасной программы я еще не видел!!! Вы представляете Adobe Photoshop или MS Word с поддержкой скинов? Или программисты слишком много выпили, или еще ходят в детский сад и не знают о стандартизации. Клиент 3D FTP был очень мощным, с громадным количеством возможностей, превосходящих многих конкурентов, но благодаря глупому дизайну умер в самом расцвете сил. А надо было всего лишь посмотреть на Cute FTP или CyD FTP Client, привести все окна к его виду и убрать скины и нестандартные элементы управления.

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

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

Интерфейс главного окна

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

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

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

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

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

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

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

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

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

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

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

Элементы управления

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

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

Диалоговые окна

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

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

Рис. 1.16. Окно создания резервной копии в The Bat!, вытянутое по вертикали

Единственное, что здесь хорошо сделано — все компоненты удачно сгруппированы. Элементы выбора Check Box собраны В одну группу, a Radio Button — в другую.

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

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

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

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

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

Посмотрите на рис. 1.20, где показано окно настроек программы mIRC. Оно смотрится просто ужасно. Дерево разделов слишком узкое, окно недостаточно широкое, элементы управления в разделах не упорядочены и содержат абсолютно ненужные кнопки, которые можно куда-нибудь вынести. Кнопка Sort отделена от других и пропадает в бездне, а раскрывающиеся списки имеют разную длину.

• Copyright | © LIMN ™ | logotip  | 2010 |
Visual C++ | 
• Valid
CSS | Valid XHTML Strict