Строительные блоки визуального дизайна интерфейсов

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

Строительные блоки визуального дизайна интерфейсов 337

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

Задолго до того, как ребенок начинает понимать речь и говорить, он проявляет способность различать объекты, контрастирующие визу' ально. Детская передача «Улица Сезам» полагается на эту человече' скую способность, предлагая детям выбирать объект, не похожий на другие или не входящий в группу. Визуальный дизайн интерфейсов создает смыслы схожим образом, что на практике дает гораздо луч' ший результат, чем просто слова.

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

Форма

Какую форму имеет объект? Он круглый, квадратный или похож на амебу? Форма – главный признак сущности объекта для человека. Мы узнаем объекты по контурам; силуэт ананаса, текстурированного си' ним мехом, все равно позволяет нам понять, что это ананас. При этом различение форм требует большей концентрация внимания, чем ана' лиз цвета или размера. Поэтому форма – не лучшее свойство для соз' дания контраста, если требуется привлечь внимание пользователя. Слабость формы как фактора в распознавании объектов становится очевидна, если взглянуть на Dock1 операционной системы Mac OS X – здесь можно по ошибке вызвать iTunes вместо iDVD или iWeb вместо iPhoto. Пиктограммы имеют различную форму, но обладают сходны' ми размерами, цветами и текстурой.

Размер

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

1 Специальный интерфейсный элемент операционной системы Mac OS X, ко' торый позволяет запускать программы и переключатьcя между ними. – Примеч. науч. ред.

важность текста растет вместе с размером и что полужирный текст бо' лее важен, чем текст с нормальным начертанием.

Таким образом, размер – полезное свойство для обозначения информа' ционных иерархий. Достаточное расхождение в размерах обычно быст' ро привлекает внимание человека. Жак Бертен (Jacques Bertin) в своей классической работе «The Semiology of Graphics» (Bertin, 1983) описы' вает размер как диссоциативное свойство. Это означает, что если объ' ект очень мал или очень велик, становится сложно интерпретировать другие переменные, например форму.

Яркость

Насколько темным или светлым является объект? Разумеется, поня' тия темного и светлого обретают смысл преимущественно в контексте яркости фона. На темном фоне темный текст почти не виден, тогда как на светлом он будет резко выделяться. Как и в случае с размером, зна' чение яркости может быть диссоциативным; скажем, если фотогра' фия слишком темная или слишком светлая, становится невозможно разобрать, что на ней. Контрастность люди воспринимают легко и бы' стро, так что значение яркости может стать хорошим инструментом привлечения внимания к тем элементам, которые требуется подчерк' нуть. Значение яркости – также упорядоченная переменная, напри' мер, более темные (с более низкой яркостью) цвета на карте легко ин' терпретируются: они обозначают бо‘льшие глубины или бо‘льшую плотность населения.

Цвет

Желтый, красный или оранжевый? Цветовые различия быстро при' влекают внимание. В некоторых профессиональных областях цвета имеют конкретные значения, и этим можно пользоваться. Так, для бухгалтера красный цвет – отрицательные результаты, а черный – по' ложительные; для трейдера, работающего с ценными бумагами, си' ний – сигнал покупать, а красный – сигнал продавать (по меньшей ме' ре, в США это так). Цвета приобретают смыслы и благодаря социаль' ным контекстам, в которых проходит наше взросление. Для человека с Запада, выросшего среди светофоров, красный означает «стоп», а ино' гда даже «опасность», тогда как в Китае красный – это цвет удачи. Бе' лый цвет на Западе ассоциируется с чистотой и миром, а в Азии – с по' хоронами и смертью. При этом в отличие от размера или яркости цвет изначально не обладает свойством упорядоченности и не выражается количественно, поэтому далеко не идеален для передачи информации такого рода. Кроме того, не следует делать цвет единственным спосо' бом передачи информации, поскольку цветовая слепота встречается довольно часто.

Применяйте цвет с умом. Чтобы создать эффективную визуальную систему, позволяющую пользователю выявлять сходства и различия

 

объектов, используйте ограниченный набор цветов – эффект радуги перегружает восприятие пользователя и ограничивает возможности по передаче ему информации. Кроме того, в вопросах, касающихся цвета, могут возникнуть конфликты между нуждами маркетинга и за' дачей отражения интерфейсных идей. Чтобы отыскать компромисс в такой ситуации, вам может потребоваться талантливый визуальный дизайнер (и по совместительству дипломат).

Направление

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

Текстура

Грубая или гладкая, однообразная или неровная? Разумеется, изобра' женные на экране элементы не обладают настоящей текстурой, но спо' собны создавать ее видимость. Текстура редко бывает полезна для пе' редачи различий или привлечения внимания, поскольку требует зна' чительной концентрации на деталях. Кроме того, для передачи тек' стуры требуются значительные затраты пикселов. И тем не менее текстура может быть важной подсказкой: когда мы видим область, текстурированную резиной, то предполагаем, что следует ухватить устройство за эту область. Засечки и выпуклости на элементах пользо' вательского интерфейса обычно указывают, что элемент можно пере' таскивать, а фаски или тени у кнопки усиливают ощущение, что ее можно нажать.

Расположение

Как располагается элемент относительно других элементов? Подобно размеру расположение – это переменная упорядоченная и выражае- мая количественно, а значит, полезная для передачи иерархии. Рас' положив наиболее важные или наиболее востребованные элементы слева вверху, мы воспользуемся порядком восприятия элементов на экране на благо продукта. Расположение также может служить сред' ством создания пространственных отношений между объектами на эк' ране и объектами реального мира.