| ||||||||||||||||
![]() | ||||||||||||||||
| ||||||||||||||||
![]() | ||||||||||||||||
| ||||||||||||||||
![]() |
Разговоры об интерфейсе программы - использование цветов. При правильном использовании цвета в оформлении программы, можно заметно улучшить внешний вид приложения, а так же более эффективно управлять вниманием пользователя к отдельным частям интерфейса. С другой стороны, неправильное использование цвета может серьёзно навредить юзабельности программного продукта. Несмотря на то, что Windows95 позволяет пользователю выбрать различные цветовые схемы, многие разработчики почему-то думают, что все пользователи используют стандартную серую схему. Если взглянуть на картинку, то сразу станет ясно, о чём идёт речь. Жёстко закодировав цвета в приложении в соответствии с цветовой схемой на своём собственном PC, разработчики данной программы не проверили работоспособность приложения на другой цветовой схеме. В итоге получился неудачный интерфейс.
![]() Поэтому, желательно в процессе разработки, периодически менять цветовую схему, а так же обращать внимание на то, как влияют на дизайн Вашего приложения другие параметры экрана (например размер шрифта). ![]() Иногда, даже самые лучшие намериния разработчика только портят дизайн приложения. Эта картинка была заимствована из программы, в которой цвет текста командных кнопок был задан определёнными цветами. Кнопки, подразумававшие положительный ответ (OK, Yes, Open) имели текст зелёного цвета, а кнопки подразумевавшие отрицательный ответ (Cancel, No, Close) имели красный цвет. Давайте посмотрим, какие проблемы в данном случае могут возникнуть. Во-первых, цвет фона кнопки определён настройками Windows и, как показано выше жёстко-заданный цвет текста может трудно читаться, а в некоторых случаях становиться совсем нечитаемым. Во-вторых, применение цветов зелёный/красный как положительный/отрицательный может быть неправильно воспринято в определённых задачах. Например, применительно к базе данных, удаление всех записей скорее всего не является положительным действием. В дополнение ко всему, ассоциация цвета с вариантами ответов может быть неправильно воспринята в разных странах. В некоторых восточных странах, например, красный рассматривается как положительный цвет. Та окраска пользовательского интерфейса которая установлена в Windows поумолчанию, выбрана не случайно. Она обеспечивает максимальную удобочитаемость приложения при различных освещениях и состоянии монитора. Если пользоваться стандартными настройками, то можно быть уверенным, что Ваше приложение не вызовет негодования пользователей. ![]() Изображение взято из приложения RealCD компании IBM. Может показаться, что Голубой Гигант оценивает чёрный цвет как действительно современный, даже необращая внимания на то, что пользователь с трудом может отличить кнопку от фона приложения. С другой стороны, если добавить текст на кнопку, то возможно это немного улучшило воспринимаемость дизайн. ![]() Цветовая схема, продиктованная проектировщиками Apple в приложении QuickTime 4.0 Player имеет некоторые недостатки для многих пользователей. Из-за недостатка контрастности между серым фоном кнопок и серыми символами на кнопках, некоторые пользователи наверняка не сразу обнаружат основные элементы управления проигрывателя. Разработчики не приняли во внимание тот факт, что:
Единственный способ гарантировать, что такие пользователи смогут без особых затруднений различать кнопки, это увеличить контростность между символами и фоном кнопки. А в данном примере контраст изменяется только после нажатия кнопки. ![]() Два изображения, представленные здесь демонстрируют незаметную на первый взгляд проблему дизайна Easy CD Creator, программу для записи CD-ROM-ов. В конце создания CD, можно наблюдать два возможных результата, сообщающих о том, что: процесс был успешно завершён, либо 'произошли какие-то ошибки' (второе сообщение появляется реже чем первое :) Сообщение об ошибке показано выше, а сообщение об успешном завершении ниже. ![]() Так в чём же здесь проблема? Оба диалога очень похожи и оба используют похожую иконку с преобладающим красным цветом. То есть, в обоих случаях, при виде красного цвета, пользователь настораживается. (прим. вебмастера: не могу удержаться от реплики, но когда я ставлю диск на запись, то сажусь смотреть телевизор (так как рекомендуют при записи ничего не делать за компом), при этом находясь от монитора на расстоянии трёх метров. Естевственно, что я не могу на таком расстоянии различить сам значёк. И каждый раз, когда выезжает диск, я иду к компьютеру с тяжёлым чувством того, что очередная болванка запоролась, однако увидев, что диск нормально записался, я начинаю радоваться как ребёнок :) ![]() Очередной пример черезмерного использования цвета. Панель инструментов в приложении WinCim 2.0 компании Compuserve напоминает разноцветных игрушках, висящих в кроватке грудного ребёнка. Данное изображение не просто излишне отвлекает внимание, а представляет собой форменный непрофессионализм. Панель инструментов, используемая в Microsoft Word, имеет более ограниченный набор цветов. Несмотря на такие различия, вордовская панель инструментов обеспечивает гораздо большуя информативность, занимая при этом меньше пространства: ![]()
![]() Как мы уже выяснили, цвет может искажать ту информацию, которую Вы хотите донести до пользователя. В данном примере показана панель инструментов программы для передачи файлов Zoc. Первые четыре кнопки на панели обозначают различные способы передачи файла. Вот как они расшифровываются:
Все четыре картинки между собой практически неразличимы, поскольку каждое изображение имеет синий объект на переднем плане (чем-то напоминающий телефон). Без всплывающих подсказок пользователь врят ли бы различил функциональное назначение каждой кнопки. Такое ощущение, что эти кнопки мешаются приложению и ничего не изменится, если их просто убрать. ![]() Здесь изображена строка состояния программы Webforms, разработанной фирмой Q&D Software Development. К сожаления, выбор цвета и использование 3D шрифта делает информацию практически нечитаемой. Кстати, непонятно как именно написана фраза: "HTML Browse" или "HTML/Browse". Было бы лучше написать "Preview", но так как разобрать что либо невозможно, то это не имеет значения. |
|
![]() | ||||||||||||||||
| ||||||||||||||||
![]() | ||||||||||||||||
|