В веб-дизайне очень важно, чтобы пользователь не чувствовал себя не комфортно - это как смотреть на раковину, полную грязной посуды. Если ваш дизайн визуально неуравновешен, то сайт будет выглядеть неорганизованным, а это может заставить пользователей чувствовать себя неудобно. Напротив, ваш дизайн должен быть привлекательным и позволять посетителям расслабиться, оглядеться вокруг, и самый лучший способ достичь такого эффекта – визуальный баланс. Визуальный баланс – это, в основном, баланс элементов дизайна, их расположение - словно жонглирование элементами вашего дизайна.
Когда мы представляем себе баланс, то проще всего его сравнить с понятием веса. Физический вес и вес элементов дизайна на самом деле очень похожи - физический объект может быть маленьким, но очень тяжелым, независимо от массы, так же, как визуальный элемент дизайна может быть очень небольшим, но очень привлекающим внимание. Тяжесть физического объекта можно сравнить с визуальной яркостью элементов дизайна, и каждый элемент взаимодействует с другими элементами дизайна так же, как и физические объекты.
Почему сбалансированные сайты выглядят хорошо
Мы подсознательно любим баланс. Любовь к устойчивым конструкциям заложена в нас на подсознательном уровне, дисбаланс, напротив, вызывает чувство отторжения.
Таким образом, визуальный баланс – залог успешного дизайна. Это та дополнительная «искра», которую одни сайты имеют, а другие – нет.В качестве дополнительного преимущества, сбалансированный дизайн хорошо сочетается с функциональностью.
Есть несколько различных факторов, которые влияют на работу с элементами дизайна. Как вы балансируете двумя или более элементами по отношению друг к другу, и как вы представляете визуальные свойства элементов - это тип баланса и свойства баланса.
Типы баланса
Есть несколько различных методов создания баланса. Вы можете использовать эти различные методы, чтобы организовать и упорядочить элементы, чтобы создать хорошо сбалансированное впечатление, что позволит пользователям чувствовать себя комфортно. Рассмотрим пять основных способов достижения баланса
Горизонтальный баланс
Вертикальный Баланс
Радиальный Баланс
Симметричный баланс
Асимметричный баланс
Отличный способ визуально упорядочить элементы - сбалансировать их по осям - горизонтальной или вертикальной. Горизонтальный баланс - вы располагаете элементы слева и справа от друга – как на детских качелях. Вертикальный баланс - вы развешиваете элементы сверху вниз по центральной оси.
Вместо того, чтобы сбалансировать композиционные элементы по центральным осям, вы можете также сбалансировать элементы вокруг центра - радиальный баланса. В принципе, вы можете разместить элементы вокруг центральной оси, или же наподобие солнечных лучей.
Еще один вид баланса, который, как правило, сочетается с горизонтальным, вертикальным и радиальным балансом - симметричный и асимметричный баланс. Симметричный баланс - когда обе стороны композиции являются зеркальным отображением друг друга - как будто складывается лист бумаги пополам. Симметрия - это очень формальный, строгий баланс, он комфортный для глаз, и широко используется в дизайне зданий или макетах. Он также становиться все более популярным, потому что его легче воспроизвести в любом размере.
Асимметрия, вероятно, самая распространенная форма баланса. По сути, это противоположность симметричному балансу, в котором элементы сбалансированы по отношению друг к другу. Асимметрия является гораздо более интересным способом, чем симметрия, поскольку симметрии, как правило, не хватает визуальной иерархии, тогда как асимметричные макеты, как правило, имеют высокую визуальную иерархию. Асимметрия не означает, однако, что баланса нет вообще, это просто означает, что элементы не позиционируются по отношению друг к другу.
Как узнать, какой из видов баланса было бы правильно сейчас использовать? Если в общем, то симметрия обычно проще воспринимается. Вот поэтому она чаще встречается в дизайне.
Так что если ваша цель - передать стабильность и сильную организационную структуру компании. С другой стороны, если вы хотите передать хрупкость того, что считается безопасным, попробуйте усилить эффект асимметрией. Асимметрия добавить искру в визуально безопасный дизайн.
Для симметрии лучше всего используйте контент примерно одинаковых частей, рассредоточенные по макету
В асимметрии лучше всего привлекать внимание к какой-то одно определённой точке, выводя взгляд зрителя из равновесия
Свойства баланса
Каждый объект в любой композиции имеет свои собственные особенности, а также особенности взаимодействия с другим объектами. Основные особенности в балансе: размер, цвет, форма, величина и положение. Каждое из этих свойств может использоваться по отдельности, чтобы создать симметричный баланс, а сочетание этих свойств необходимо, чтобы создать равновесие в асимметричной композиции – изменение одного элемента будет влиять на другие, и т.д.
Большой пустой объект имеет легкий визуальный вес и поэтому он может быть сбалансирован с меньшим, но более насыщенным объектом. Например, блог с областью содержания и боковая панель – область содержимого, как правило, больше, чем боковая панель. Вы могли бы уравновесить их, добавив больше пустого пространства в области содержания и заполнив боковую панель чем-то визуально более тяжелым. Если вы хотите достичь симметричного баланс в вашем дизайне, то вам нужно убедиться, что элементы имеют одинаковый размер, независимо от визуального веса.
Цвет объекта в композиции может изменить визуальную тяжесть элементов. Более темные цвета визуально тяжелее, чем мягкие светлые цвета - красный визуально тяжелее, чем желтый, поскольку он привлекает больше внимания. Если вы пытаетесь сбалансировать темный элемент с другим или несколькими светлыми элементами, то можете попробовать поиграть с другими свойствами баланса, или изменить цвет фона окружающих элементов.
Форма элементов может резко изменить баланс композиции. Волнистые или зубчатые формы визуально интереснее и, следовательно, тяжелее, чем формы с очень простыми, прямыми линиями. Не пытайтесь уравновесить несколько элементов со сложной формой, лучше сбалансируйте сложный и простой объект.
Контраст может быть крайне важным фактором в композиционном равновесии. Чем выше контрастность объекта, тем он тяжелее, и наоборот. Существует несколько способов сбалансировать элементы с разным уровнем контраста, один из них - компенсировать низкий контраст элемента резким контрастом фона или текстуры. Вы также можете добавлять простые границы, градиенты и тени, чтобы снизить контраст элементов.
Расположение
Это важный фактор, и это свойство можно использовать, чтобы сбалансировать остальные элементами, которые отличаются по форме, цвету, весу и размеру. Как мы говорили ранее, крупный объект тяжелее, чем маленький, но их вес также зависит от того, насколько близко они расположены к центру станицы. Объекты ближе к центру весят больше, чем объекты дальше от него, так что если у вас есть, например, большой красный объект близко к центру, вы можете переместить его в сторону от центра, или переместить другие объекты в центр.
Как добавить баланс на сайт
Итак, как же сделать страницу сбалансированной? В качестве примера возьмем самый простой симметричный баланс. Пустое содержание выглядит довольно уныло, так что добавим меню. Если посмотреть на практически любой неплохой дизайн, то можно увидеть, что меню оформлено «тяжелее» текста. Вот тут и получается самый примитивный баланс - небольшой тяжелый элемент уравновешивает объемный, но лёгкий текст. Начинайте разработку макета с наброска необходимых элементов. Эти правила помогут не совершить ошибок:
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Большие объекты тяжелее маленьких
Тёмные объекты тяжелее светлых
Насыщенные цвета тяжелее блеклых
Чем толще граница, тем она тяжелее
Чем больше текстуры, тем тяжелее объект с ней
Кроме горизонтального вида баланса не забывайте про вертикальный и радиальный
Тёплые яркие цвета, такие, как оранжевый и красный, тяжелее, чем холодные цвета (синий, зелёный)
Правило третей
В визуальных искусствах есть такое понятие, как правило третей - это когда рабочее пространство мысленно разбивается на 9 равных частей 2-я вертикальными и 2-я горизонтальными линиями. Так вот, по этому правилу главные композиционные центры стоит располагать на пересечении этих линий.
Итак, как же разделить макет на 9 равных частей?
1. Вообразим, что всё рабочее пространство - обычный прямоугольник
2. Мысленно делим вертикальную его часть на 3 равных доли и проводим для этого 2 паралленьные линии.
3. То же самое для горизонтальной составляющей
Соблюдение правила третей задаёт больший интерес к содержимому, чем при обычном центрировании.
Примеры с пояснениями
На сайте MacAllan Ridge вы видите асимметричное расположение блоков. Однако громоздкий блок с картинкой уравнивается тяжелыми границами блока меню. Довольно распространённый приём балансировки.
Художники и визуальные дизайнеры работают с одними и теми же изобразительными средствами. И те, и другие должны быть искусны и опытны во всем, что касается этих средств, но их деятельность служит различным целям. Цель художника - создать объект, взгляд на который вызывает эстетический отклик. Таким образом, изобразительное искусство - способ самовыражения художника на тему, которая у него (а иногда и у общества в целом) вызывает эмоциональный или интеллектуальный интерес. Художник не связан почти никакими ограничениями. Чем необычнее и своеобразнее продукт его усилий, тем выше он ценится.
Дизайнеры, напротив, создают объекты для других людей. В то время как современные художники озабочены в основном самовыражением, дизайнеры, как отмечают Кевин Маллет и Даррел Сано в своей великолепной книге «Designing Visual Interfaces» (Mullet and Sano, 1995), «заняты поисками наиболее подходящего представления для передачи некоторой специфической информации», то есть коммуникацией. Если говорить о дизайнерах визуальных интерфейсов, то они ищут наилучшее представление, доносящее информацию о поведении программы, в проектировании которой они принимают участие. Придерживаясь целеориентированного подхода, они должны стремиться представлять поведение и информацию в понятном и полезном виде, который поддерживает маркетинговые цели организации и эмоциональные цели персонажей.
Скажем прямо, что визуальный дизайн пользовательских интерфейсов не исключает эстетических соображений, но такие соображения не должны выходить за рамки функционального каркаса. И хотя в визуальных коммуникациях всегда присутствует субъективизм, мы стремимся минимизировать влияние вкуса. Мы пришли к выводу, что четкое выражение эмоциональных целей пользователя и бизнес-целей неоценимы, даже когда речь идет о дизайне тех аспектов визуального интерфейса, которые работают на благо бренда, отвечают за опыт пользователей и обеспечивают физиологические реакции. Более подробно о физиологическом уровне когнитивной обработки мы писали в главе 5.
Изобразительное искусство, визуальный дизайн интерфейсов и пр. дисциплины 335
Графический дизайн и пользовательские интерфейсы
Графический дизайн - это дисциплина, над которой долгие годы (примерно до второй половины 80-х годов прошлого века) довлела полиграфия, поскольку дизайн в основном сводился к созданию упаковок, рекламе, форматированию документов и обустройству среды существования. Графические дизайнеры старой школы неуютно чувствуют себя, сталкиваясь с цифровыми носителями информации, поскольку не привыкли создавать графику на уровне пикселов. Молодое же поколение графических дизайнеров обучено обращению с «новым» форматом и вполне успешно применяет концепции традиционного графического дизайна к цифровой графике.
Графические дизайнеры обычно очень хорошо разбираются в визуальных аспектах и хуже представляют себе понятия, лежащие в основе поведения программного продукта и взаимодействия с ним. Талантливые графические дизайнеры, подкованные и в цифровых аспектах, преуспевают в создании информационно насыщенных, эстетически приятных, впечатляющих интерфейсов, которые мы видим в Windows XP и Mac OS X, а также визуально насыщенных интерфейсов для компьютерных игр и приложений, ориентированных на рядового потребителя. Они способны создавать красивую и адекватную внешность интерфейсов, а кроме того - привносить фирменный стиль во внешний вид и поведение программного продукта. Для таких специалистов дизайн или проектирование интерфейса есть в первую очередь тон, стиль, композиция, которые являются атрибутами бренда, во вторую очередь -прозрачность и понятность информации и лишь затем (если до этого вообще доходит дело) - передача информации о поведении посредством ожидаемого назначения (см. главу 13).
Дизайнерам визуальной части интерфейса необходимы некоторые навыки, которые присущи графическим дизайнерам, работающим в цифровом формате, но они должны помимо этого обладать также глубоким пониманием и правильным восприятием роли поведения. Их усилия в значительной степени сосредоточены на организационных аспектах проектирования и на том, как донести до пользователя особенности поведения продукта, используя визуальные якоря и ожидаемые назначения. В центре их внимания находится соответствие между визуальной структурой интерфейса с одной стороны и логической структурой пользовательской ментальной модели и поведения программы - с другой. Кроме того, их заботит вопрос о том, как сообщать пользователю о состояниях программы (скажем, как сделать состояние «доступно для изменения» отличимым от состояния «только для чтения») и что делать с когнитивными аспектами пользовательского восприятия функций (композиция элементов, визуальная иерархия, соотношение фигуры и фона и т. п.).
336 Глава 14. Визуальный дизайн интерфейсов
Визуальный информационный дизайн
Информационные дизайнеры работают не над интерактивными функциями, а над визуализацией данных, содержимого и средств навигации. В визуальном дизайне интерфейсов их наЕыки чрезвычайно важны, в особенности когда речь идет о приложениях, интенсивно работающих с данными, и некоторых веб-сайтах, где содержание перевешивает функциональность. Усилия информационного дизайнера направлены на то, чтобы представить данные в форме, способствующей их верному истолкованию. Результат здесь достигается через управление визуальной иерархией при помощи таких средств, как цвет, форма, расположение и масштаб.
Распространенными объектами информационного дизайна являются всевозможные графики, диаграммы и прочие способы отображения количественной информации. Эдвард Тафти написал несколько новаторских книг, подробно раскрывающих эту тему, включая «The Visual Display of Quantitative Information» (Tufte, 1983).
Промышленный дизайн
Любое обсуждение вопросов промдизайна выходит за рамки этой книги, однако широкое распространение интерактивных приборов и портативных устройств привело к тому, что роль промышленного дизайна в создании интерактивных продуктов растет прямо на глазах. Как и в случае с разницей в профессиональных навыках у графических дизайнеров, дизайнеров интерфейсов и информационных дизайнеров, существует разделение промдизайнеров на две категории: одни специализируются на создании красивых и полезных форм, в то время как таланты других относятся к сфере логического и эргономического представления физических элементов управления способом, который соответствует поведению пользователя и отражает поведение устройства. По мере того как все большее число устройств обзаводятся полнофункциональными дисплеями, возрастает важность сотрудничества проектировщиков взаимодействия, дизайнеров интерфейсов и промдизайнеров в вопросах создания полноценных и эффективных решений.
Строительные блоки визуального дизайна интерфейсов
По существу дизайн интерфейсов сводится к вопросу о том, как офор мить и расположить визуальные элементы таким образом, чтобы внятно отразить поведение и представить информацию. Каждый элемент визуальной композиции имеет ряд свойств, таких как форма и цвет, и сочетание этих свойств придает элементу смысл. Каждое отдельное свойство само по себе редко обладает естественным смыслом. Скорее можно сказать, что пользователь получает возможность разобраться
Строительные блоки визуального дизайна интерфейсов 337
в интерфейсе благодаря различным способам приложения этих свойств к каждому из элементов интерфейса. В тех случаях, когда два объекта обладают общими свойствами, пользователь предположит, что эти объекты связаны или похожи. Когда пользователи видят, что свойства отличаются, они предполагают, что объекты не связаны. Наиболее контрастные объекты сильнее привлекают наше внимание. Задолго до того, как ребенок начинает понимать речь и говорить, он проявляет способность различать объекты, контрастирующие визуально. Детская передача «Улица Сезам» полагается на эту человеческую способность, предлагая детям выбирать объект, не похожий на другие или не входящий в группу. Визуальный дизайн интерфейсов создает смыслы схожим образом, что на практике дает гораздо лучший результат, чем просто слова.
Создавая пользовательский интерфейс, проанализируйте перечисленные ниже визуальные свойства каждого элемента или группы элементов. Чтобы создать полезный и привлекательный пользовательский интерфейс, следует тщательно поработать с каждым из этих свойств.
Какую форму имеет объект? Он круглый, квадратный или похож на амебу? Форма - главный признак сущности объекта для человека. Мы узнаем объекты по контурам; силуэт ананаса, текстурированного синим мехом, все равно позволяет нам понять, что это ананас. При этом различение форм требует большей концентрация внимания, чем анализ цвета или размера. Поэтому форма - не лучшее свойство для создания контраста, если требуется привлечь внимание пользователя. Слабость формы как фактора в распознавании объектов становится очевидна, если взглянуть на Dock 1 операционной системы Mac OS X -здесь можно по ошибке вызвать iTunes вместо iDVD или iWeb вместо iPhoto. Пиктограммы имеют различную форму, но обладают сходными размерами, цветами и текстурой.
Насколько велик или мал объект относительно других объектов на экране? Более крупные элементы привлекают больше внимания, особенно если они значительно превосходят размерами окружающие элементы. Размер является переменной упорядоченной и поддающейся количественному определению, то есть люди автоматически упорядочивают объекты по размеру и склонны оценивать их по размеру; если у нас есть текст в четырех размерах, предполагается, что относительная
Специальный интерфейсный элемент операционной системы Mac OS X, который позволяет запускать программы и переключаться между ними. -Примеч. науч. ред.
333 Глава 14. Визуальный дизайн интерфейсов
важность текста растет вместе с размером и что полужирный текст более важен, чем текст с нормальным начертанием.
Таким образом, размер - полезное свойство для обозначения информационных иерархий. Достаточное расхождение в размерах обычно быстро привлекает внимание человека. Жак Бертен (Jacques Bertin) в своей классической работе «The Semiology of Graphics» (Bertin, 1983) описывает размер как диссоциативное свойство. Это означает, что если объект очень мал или очень велик, становится сложно интерпретировать другие переменные, например форму.
Яркость
Насколько темным или светлым является объект? Разумеется, понятия темного и светлого обретают смысл преимущественно в контексте яркости фона. На темном фоне темный текст почти не виден, тогда как на светлом он будет резко выделяться. Как и в случае с размером, значение яркости может быть диссоциативным; скажем, если фотография слишком темная или слишком светлая, становится невозможно разобрать, что на ней. Контрастность люди воспринимают легко и быстро, так что значение яркости может стать хорошим инструментом привлечения внимания к тем элементам, которые требуется подчеркнуть. Значение яркости - также упорядоченная переменная, например, более темные (с более низкой яркостью) цвета на карте легко интерпретируются: они обозначают большие глубины или большую плотность населения.
Цвет
Желтый, красный или оранжевый? Цветовые различия быстро привлекают внимание. В некоторых профессиональных областях цвета имеют конкретные значения, и этим можно пользоваться. Так, для бухгалтера красный цвет - отрицательные результаты, а черный - положительные; для трейдера, работающего с ценными бумагами, синий - сигнал покупать, а красный - сигнал продавать (по меньшей мере, в США это так). Цвета приобретают смыслы и благодаря социальным контекстам, в которых проходит наше взросление. Для человека с Запада, выросшего среди светофоров, красный означает «стоп», а иногда даже «опасность», тогда как в Китае красный - это цвет удачи. Белый цвет на Западе ассоциируется с чистотой и миром, а в Азии - с похоронами и смертью. При этом в отличие от размера или яркости цвет изначально не обладает свойством упорядоченности и не выражается количественно, поэтому далеко не идеален для передачи информации такого рода. Кроме того, не следует делать цвет единственным способом передачи информации, поскольку цветовая слепота встречается довольно часто.
Применяйте цвет с умом. Чтобы создать эффективную визуальную систему, позволяющую пользователю выявлять сходства и различия
объектов, используйте ограниченный набор цветов - эффект радуги перегружает восприятие пользователя и ограничивает возможности по передаче ему информации. Кроме того, в вопросах, касающихся цвета, могут возникнуть конфликты между нуждами маркетинга и задачей отражения интерфейсных идей. Чтобы отыскать компромисс в такой ситуации, вам может потребоваться талантливый визуальный дизайнер (и по совместительству дипломат).
Направление
Куда указывает объект - вверх, вниз, или вбок? Направление полезно, когда требуется передавать информацию об ориентации (вверх или вниз, вперед или назад). Помните, что восприятие направления может быть затруднено в случае некоторых форм и при малых размерах объектов, поэтому ее лучше использовать в качестве вторичного признака. Так, если требуется показать, что рынок акций пошел вниз, можно использовать направленную вниз стрелку красного цвета.
Текстура
Грубая или гладкая, однообразная или неровная? Разумеется, изображенные на экране элементы не обладают настоящей текстурой, но способны создавать ее видимость. Текстура редко бывает полезна для передачи различий или привлечения внимания, поскольку требует значительной концентрации на деталях. Кроме того, для передачи текстуры требуются значительные затраты пикселов. И тем не менее текстура может быть важной подсказкой: когда мы видим область, текстурированную резиной, то предполагаем, что следует ухватить устройство за эту область. Засечки и выпуклости на элементах пользовательского интерфейса обычно указывают, что элемент можно перетаскивать, а фаски или тени у кнопки усиливают ощущение, что ее можно нажать.
Расположение
Как располагается элемент относительно других элементов? Подобно размеру расположение - это переменная упорядоченная и выражаемая количественно, а значит, полезная для передачи иерархии. Расположив наиболее важные или наиболее востребованные элементы слева вверху, мы воспользуемся порядком восприятия элементов на экране на благо продукта. Расположение также может служить средством создания пространственных отношений между объектами на экране и объектами реального мира.
Принципы визуального дизайна интерфейса
Человеческий мозг- великолепное устройство распознавания образов. Оно извлекает смысл из плотных потоков зрительной информа-
340 Глава 14. Визуальный дизайн интерфейсов
ции, обрушивающихся на нас буквально отовсюду. Наш мозг справляется с этим шквалом входных данных, выявляя визуальные закономерности и создавая для наблюдаемых нами объектов систему приоритетов. В конечном итоге это позволяет нам осознанно воспринимать видимый мир. Именно способность зрительной системы человеческого мозга к сборке частей визуального поля в образы на основании визуальных якорей (подсказок) позволяет нам обрабатывать зрительную информацию столь быстро и эффективно. Представьте, что вам вдруг пришлось бы вручную вычислять траекторию полета бейсбольного мяча, чтобы предсказать, где он упадет. Наши глаза и мозг вместе делают это за доли секунды, не требуя от нас сознательных усилий. Процесс создания визуального дизайна интерфейса должен опираться на наши природные способности к обработке визуальной информации, чтобы обеспечить передачу пользователям информации и отражение возможностей и функций программы.
Одной главы совершенно недостаточно для полного раскрытия темы визуального дизайна интерфейсов. Однако существует ряд важных принципов, которые помогут вам создавать интерфейсы, максимально простые в восприятии и приятные для глаза. Как уже говорилось, Кевин Маллет и Даррел Сано дают превосходный и подробный анализ этих базовых принципов; мы лишь кратко обсудим некоторые из наиболее важных принципов визуального дизайна интерфейса.
При создании графических интерфейсов следует:
Использовать визуальные свойства для группировки элементов и соз
дания четкой иерархии;
Создавать визуальную структуру и прокладывать логический мар
шрут на каждом уровне организации;
Использовать целостные, непротиворечивые и соответствующие
контексту образы;
Интегрировать визуальный стиль с функциональностью осмыслен
но и последовательно;
Избегать визуального «шума» и беспорядка.
Эти принципы и некоторые другие общие закономерности, касающиеся работы с текстом и цветом в графических пользовательских интерфейсах, подробно обсуждаются в следующих разделах.
Используйте визуальные свойства для группировки элементов и создания четкой иерархии
Как правило, имеет смысл группировать логические наборы функциональных или информационных элементов посредством визуальных свойств, например цвета или пространственных характеристик. Последовательно применяя эти визуальные свойства в интерфейсе, вы можете создавать шаблонные образы, которые ваши пользователи быстро научатся распознавать. Например, в Windows XP все кнопки вы-
Принципы визуального дизайна интерфейса 341
пуклые, со скругленными углами, а текстовые поля прямоугольные, слегка вдавленные, с белым фоном и синей окантовкой. Благодаря систематическому применению этого образа невозможно перепутать кнопку и поле ввода, несмотря на некоторые сходства.
Основой визуального интерфейса являются визуальные
принцип шаблоны.
Проектирования
Глядя на любой набор визуальных элементов, пользователь бессознательно задается вопросом: «Что здесь представляет интерес?» - и почти сразу же: «Какая связь между этими объектами?» Мы должны стремиться к тому, чтобы интерфейс содержал в себе ответ на оба вопроса.
Создание иерархии
Исходя из сценариев определите, какие функциональные и информационные элементы должны восприниматься пользователями сходу, какие являются вторичными, а какие нужны лишь в исключительных ситуациях. Такое ранжирование и служит основой для визуальной иерархии.
Используйте цвет, насыщенность, контрастность, размер и положение, чтобы создать видимые различия между уровнями иерархии. Самые важные элементы должны быть более крупными, более ярких цветов, более насыщенными и более контрастными. Их следует располагать над прочими элементами или делать выступающими. Выделяемые элементы лучше всего красить в насыщенные цвета. Менее важные элементы должны быть менее насыщенными, менее контрастными, более мелкими и плоскими. Нейтральные светлые цвета уводят их на второй план.
Разумеется, настройку этих свойств следует выполнять осторожно. Не следует делать самый важный элемент огромным, красным и выпуклым. Часто бывает достаточно изменить лишь одно из свойств. Если обнаружится, что два элемента различной важности состязаются за внимание пользователя, «прикрутить фитиль» менее важного будет лучшим решением, чем пытаться «разжечь» более важный. Так у вас останется больше пространства для создания акцента на самых важных элементах. (Вот хорошая аналогия: если все слова на странице набраны жирным красным шрифтом, выделяется ли хоть одно из слов?)
Создание четкой визуальной иерархии - одна из сложнейших задач в визуальном дизайне интерфейсов, ее решение требует навыков и таланта. Качественную визуальную иерархию пользователи практически не замечают - а вот ее отсутствие и проистекающая из этого путаница сразу бросаются в глаза.
342 Глава 14. Визуальный дизайн интерфейсов
Визуализация связей
Чтобы передать связь элементов, вновь обратитесь к сценариям. Необходимо определить не только элементы со сходными функциями, но и элементы, наиболее часто используемые совместно. Совместно используемые элементы обычно следует сгруппировать в пространстве, чтобы минимизировать перемещения мыши, тогда как элементы, которые могут не использоваться вместе, но обладают сходными функциями, можно группировать визуально, даже если они не группируются в пространстве.
Пространственная группировка объясняет пользователям, каким образом одни задачи, данные и инструменты связаны с другими, и может намекать на правильную последовательность действий. Хорошая группировка посредством расположения принимает во внимание порядок задач и подзадач и движение взгляда по экрану: слева направо для западных языков и, как правило, сверху вниз. (Более подробно этот момент мы обсудим чуть позже.)
Элементы, расположенные рядом, как правило, связаны друг с другом. Во многих интерфейсах такая группировка реализована слишком тяжеловесно: куда не взглянешь- рамки, причем иногда рамка заключает в себе всего один или два элемента. Часто того же эффекта более грамотно можно достичь посредством расстояний. К примеру, на панели инструментов кнопки могут отделяться друг от друга четырьмя пикселами. Чтобы вычленить файловые команды («открыть», «новый файл», «сохранить») в отдельную группу, достаточно увеличить расстояние между кнопками файловых команд и соседней группой кнопок до восьми пикселов.
Элементы, разделенные большими расстояниями, можно группировать посредством общих визуальных свойств, создавая шаблон, который в конечном итоге приобретет самостоятельный смысл для пользователей. Так, использование объема для создания ощущения физического ожидаемого назначения - вероятно, самый эффективный способ отделять элементы управления от данных и фоновых элементов (более подробно об ожидаемых назначениях читайте в главе 13). Эта стратегия часто применяется в рисовании пиктограмм. В операционной системе Mac OS X применяются яркие цвета для пиктограмм приложений и тусклые - для редко используемых вспомогательных программ. Зеленая кнопка запуска устройства может перекликаться с похожей анимированной зеленой пиктограммой, указывающей, что устройство функционирует нормально.
Определившись с группами и визуальными особенностями этих групп, начинайте подстраивать контраст между группами - подчеркивая или, наоборот, затеняя группы сообразно их важности в текущем контексте. Подчеркивайте различия между группами, но минимизируйте различия между элементами одной группы.
Принципы визуального дизайна интерфейса 343
Тест с прищуриванием
Есть хороший способ убедиться, что визуальный дизайн эффективно задействует иерархию и отношения, - дизайнеры называют этот прием тестом с прищуриванием (squint test). Закройте один глаз и посмотрите на экран прищуренным вторым глазом. Обратите внимание на то, какие элементы слишком выпирают, какие стали нечеткими, а какие объединились в группы. Эта процедура часто вскрывает не замеченные ранее проблемы в композиции интерфейса.
Создавайте визуальную структуру и прокладывайте логический маршрут на каждом уровне организации
Интерфейсы удобно представлять себе состоящими из визуальных и интерактивных элементов, объединяемых в группы с помощью панелей, которые, в свою очередь, можно группировать в экраны, представления или страницы. Такая группировка, как было сказано выше, может проводиться посредством распределения в пространстве или при помощи общих визуальных свойств. В монопольном приложении может быть несколько уровней таких структур, так что крайне важно сохранять прозрачную визуальную структуру, чтобы пользователь мог легко переходить от одной части интерфейса к другой в соответствии со своим рабочим процессом.
В оставшейся части этого раздела мы опишем ряд важных свойств, помогающих задать четкую визуальную структуру.
Выравнивание и сетка
Выравнивание визуальных элементов - один из главных приемов, позволяющих дизайнеру представить продукт пользователям в систематизированном и упорядоченном виде. Сгруппированные элементы следует выравнивать как по горизонтали, так и по вертикали (рис. 14.1). В общем случае каждый элемент на экране следует выровнять по максимально возможному числу других элементов. Отказ от выравнивания двух элементов или двух групп элементов должен быть осознанным: это допустимо только для достижения конкретного разделяющего эффекта. В числе прочего дизайнерам следует обращать внимание на:
Выравнивание подписей. Подписи для элементов управления, рас
положенные друг над другом, должны быть выровнены по общей
границе. Если все подписи имеют примерно одинаковую длину, вы
равнивайте их по левой стороне - так пользователям будет легче их
читать, нежели при выравнивании вправо.
Выравнивание внутри группы функциональных элементов. Груп
па связанных флажков, вариантов выбора или текстовых полей
должна подчиняться выравниванию стандартной сетки.
Глава 14. Визуальный дизайн интерфейсов
Рис. 14.I.Adobe Lightroom весьма эффективно использует выравнивание по композиционной сетке. Текст, функциональные элементы и группы элементов управления очень четко выравниваются по сетке с фиксированным шагом. Следует отметить, что отбивка элементов управления и подписей элементов группы вправо может мешать быстрому их прочтению
Выравнивание элементов, разнесенных по группам и панелям.
Группы элементов управления и прочие объекты на экране везде, где это возможно, должны быть привязаны всё к той же сетке.
Сетка - один из самых мощных инструментов визуального дизайнера, стремительно набравший популярность в годы после Второй мировой войны благодаря швейцарским печатникам. Сетка обеспечивает однородность и последовательность структуры композиции, что особенно важно при проектировании интерфейса с несколькими уровнями визуальной или функциональной сложности. После того как проектировщики взаимодействия определили общую инфраструктуру приложения и элементов его пользовательского интерфейса (см. главу 7), дизайнеры интерфейса должны организовать композицию в структуру в виде сетки, которая будет должным образом подчеркивать важные элементы и структуры и оставлять жизненное пространство для менее важных элементов и элементов более низкого уровня.
Как правило, сетка делит экран на несколько крупных горизонтальных и вертикальных областей (рис. 14.2). Качественно спроектиро-
Принципы визуального дизайна интерфейса
Рис. 14.2. В этом примере композиционная сетка регламентирует размер и положение различных областей экрана веб-сайта. Она обеспечивает согласованность различных экранов, сокращая как работу дизайнера по созданию композиции, так и усилия, которые должен приложить пользователь, чтобы прочитать и понять содержимое экрана
ванная сетка задействует понятие шага, то есть минимального расстояния между элементами. К примеру, если шаг сетки составляет четыре пиксела, все расстояния между элементами и группами должны быть кратны четырем.
В идеальном случае сетка должна задавать и пропорции различных областей экрана. Такие отношения обычно выражаются дробями. Среди распространенных дробей - прославленное «золотое сечение» (обозначаемое греческой буквой «фи» и равное примерно 1,62), которое часто встречается в природе и считается особенно приятным для человеческого глаза; величина, обратная квадратному корню из двух (примерно 1:1,41), которая является основой международного стандарта размера бумаги (например, листа А4); и отношение 4:3 - пропорция сторон большинства компьютерных дисплеев.
Разумеется, следует стремиться к балансу между идеализированными геометрическими отношениями и конкретными пространственными потребностями функций и информации, представленных на экране. Идеальная реализация золотого сечения никак не улучшит читаемость экрана, на котором объекты свалены в кучу. Хорошая композиционная сетка модульна, то есть является достаточно гибкой, чтобы учесть все необходимые вариации, при этом сохранив согласованность структуры везде, где это возможно. Как и во мно-
Дизайн интерфейсов моя основная специализация. За много лет работы я уяснил важную вещь, которую иногда приходится доносить даже до клиентов. Самое главное в дизайне интерфейсов далеко не сам дизайн. Главное это изучение и понимание того, как люди с ним взаимодействуют. Необходимо постоянно анализировать что будет работать, а что нет.
Есть отличная шутка про то, что самый лучший в мире интерфейс - женская грудь. Каждый ребенок с рождения знает как с ней взаимодействовать. Я стремлюсь к тому же.
Именно поэтому я сознательно разделяю дизайн интерфейсов на UX разработку и UI дизайн.
UX дизайн
UX дизайн можно назвать дизайном с точки зрения изначального значения слова design. Дизайн - это, прежде всего, разработка, проектирование и результат работы головой.
UX дизайн начинается с исследования и аналитики. Прежде чем что-то проектировать я изучаю компанию, её продукт, конкурентов и отрасль. Важный момент: без хорошего продукта бесполезно делать хороший дизайн.
Десктоп приложение, интерфейс АРМ, кассовый терминал, интерфейс банкомата, дизайн криптовалютной биржи - каждая разработка интерфейса должна начинаться со сбора информации. Как минимум: целевая аудитория, причины её неудовлетворённости, как продукт способен решить проблемы людей.
Мне приходилось разрабатывать интерфейсы для Smart TV и геонавигационных сервисов. Нужно очень хорошо понимать где и как будет использоваться интерфейс, и какие ограничения у платформы.
С другой стороны, это лучший способ применить навыки дизайнера и аналитика.
Прототипирование интерфейсов
Прототипы интерфейсов я делаю в Axure RP. На сегодня это стандарт отрасли проектирования UX. Параллельно изучаю Figma.
Sketch лично для меня оказался неудобен. Figma имеет прямой экспорт макетов в Zeplin. Для большинства разработчиков digital-сервисов это самый удобный вариант.
Если Sketch/Figma не принципиальны, я работаю в редакторе Xara Designer Pro X. Он способен генерировать динамические страницы на базе макетов.
Иногда показываю макеты в сервисе InVission. На нём можно показать минимальную анимацию компонентов и переходов. Такие прототипы интерфейсов дают заказчику хорошее представление о конечном продукте.
UI дизайн интерфейсов
Уделяю пристальное внимание деталям и сетке. Ровная структура и приятные мелочи бросаются в глаза и создают приятное впечатление у ваших посетителей.
В интерфейсах сложных digital-сервисов отрисовываю различные состояния для кнопок. Иногда отдельно создаю UI kit для особо больших проектов.
План работ над дизайном интерфейса
- Посмотрите мои работы, убедитесь, что они вам нравятся.
- Запрос и передача материалов.
- Предоплата 50% (в отдельных случаях 100%).
- Интервью, сбор информации и аналитика.
- Разработка черно-белых прототипов интерфейса.
- Дизайн интерфейса в цвете.
- После утверждения всех макетов - остаток суммы.
- Подготовка и передача исходников в формате *.PSD.
Что я делаю и чего не делаю
Аудит текущего ресурса
В рамках работы над редизайном проекта я сначала провожу аудит вашего ресурса. Описываю плюсы и минусы с точки зрения дизайна и UX.
Результат: документ с описанием и рекомендациями.
Исследования
Исследования - очень важная часть проекта. Перед началом любого дела, будь то строительство дома или покупка новой машины, необходимо собрать информацию, сравнить важные характеристики и убедиться в своих предположениях.
Результат: профиль целевой аудитории и описание целей посетителей.
Проектирование
Можно, конечно, строить дом без плана. Можно скачать что-нибудь из интернета. Но когда платишь немалые деньги, хочется получить что-то более индивидуальное и продуманное. Я делаю именно так: разрабатываю индивидуальную структуру страниц и блоков.
Структуру я оформляю в интерактивные черно-белые прототипы. Кстати, в отличие от чертежей того же дома, прототипами сайта уже можно пользоваться - ходить по страницам и изучать маршруты посетителей. И это также отличный способ сэкономить время, а иногда и деньги.
Результат: прототипы заказанных страниц, по которым можно походить.
Дизайн
Собственно на этом этапе делается проработка всей визуальной составляющей проекта. Разработка визуального языка. Это как комната в стиле "лофт" или кухня в стиле "прованс" - вы уже примерно понимаете какие используются элементы и как на них будут реагировать люди.
Результат: после приёмки дизайна страниц, я готовлю исходные файлы. Причём не абы как, а со знанием дела. Все слои раскладываются по папкам и подписываются. Аккуратно и эффективно. Так что ваши разработчики будут приятно удивлены.
Поддержка
В больших проектах нередко возникает необходимость доделать какие-нибудь мелочи уже после приёмки дизайна. Я закладываю небольшой запас на такие случаи.
Иногда возникает необходимость разработать дополнительные функциональные блоки. В этом случае может понадобится дополнительное время и бюджет. Это как планировали строить гараж отдельным зданием, а потом подумали, что хорошо бы из гаража зимой сразу в дом попадать.
Результат
Если у вас уже есть прототипы будущего интерфейса, я проведу экспертизу, предложу варианты улучшения и разработаю современный, удобный и красивый дизайн интерфейса. Включая иконки, визуальную часть для инсталлятора и так далее.
Если у вас есть только идея, команда программистов и бюджет, я помогу вам спроектировать и создать прототипы интерфейса. В этом случае возможны нестандартные варианты решения вашей задачи. При этом я максимально постараюсь сохранить user experience, чтобы у пользователей не возникало проблем с освоением дизайна интерфейса.
Таким образом, вы получаете комплексный продукт с четко продуманной структурой и интуитивно понятным интерфейсом.
Верите или нет, но статические макеты и прототипы выходят из моды, становясь старомодными, а грань между дизайнером и разработчиком стирается. Так как мы всё больше работаем в сотрудничестве с другими дизайнерами или разработчиками, инструменты, которыми мы пользуемся, также изменяются.
Наступает эра экранов с большим разрешением и дизайнеры должны искать всё новые методики и инструменты, которые помогли бы им создать более отзывчивые и гибкие дизайн макеты для разных устройств.
Инструменты для макетирования (wireframing)
Wireframe инструменты делают процесс создания веб-сайта или приложения существенно проще, визуализируя продукт и обращая внимание всех участников непосредственно на функциональность, и интерактивность макета.
Клиенты должны понимать, как предположительно будет работать ваше будущее приложение или сайт. Но простое объяснениие “на пальцах” или несколько сообщений по по почте оставит большую часть функций на откуп их воображению. Wireframe инструменты чаще применяются чтобы упростить коммуникацию между заказчиком и исполнителем.
Есть множество различных Wireframe инструментов, которые предлагают разнообразный функционал: некоторые программы могут использоваться лишь для простых wireframe-ов, другие же — для создания более сложных и детализированный прототипов прототипов.
Balsamiq Mockups
Простой, но отличный онлайн wireframe инструмент, включающий в себя библиотеку drag-and-drop элементов, списки и кнопки, стилизованные под рисунок от руки. Основная фича этой программы в том, чтобы приблизить мокапы к степени "намеренно грубого вида и низкой точности", чтобы получить настолько много фидбэка, насколько это возможно. "Предназначен для совместной работы" — эти слова, описывающие продукт на официальном сайте, означают, что все члены команды и клиенты могут участвовать в процессе создания прототипа.
Платформа:
Win, Mac, Linux и веб версия
Цена:
$89 ($12 \ месяц за полнофункциональный триал)
Sketch
Sketch: Гибкий и функциональный wireframe инструмент со стильный интерфейсом, который заставит Вас проектировать сказочные вещи, потому что создание дизайна должно быть весельем, а не рутиной. Этот продукт прост в использовании, получил интуитивно понятный графический интерфейс а так же множество внешних интеграций.
Платформа:
Mac
Цена:
$99 (доступен бесплатный триал)
Adobe Illustrator
Adobe Illustrator является мощным инструментом для работы с векторной графикой (это значит, что вы можете создавать арты любого размера, масштабируя как необходимо, при этом не теряя качества изображения). Это превосходная программа для прототипирования различного уровня детализации, создания сложных векторных иллюстраций и работы с типографикой, а также для создания отличного UX. Восхитительный инструмент для создания UI мокапов.
Платформа:
Win & Mac
Цена:
$9-$49 в месяц
Adobe InDesign
Этот дизайн инструментарий включает в себя возможность работы с различным типом контента и файлов, хотя изначально предназначался для верстки многостраничных печатных документов. Создание прототипа сайта или приложения в формате интерактивного PDF-документа ещё никогда не было столь простым! Этот продукт дает Вам возможность создавать библиотеки компонентов страницы, так что вы можете сделать многочисленные коллекции различных UI-элементов, которые вы сможете использовать повторно.
Платформа:
Win & Mac
Цена:
$9-$49 в месяц
OmniGraffle
OmniGraffle — продукт для OS X и iOS, который плавно переходит к упрощению работы, перебираясь на iPad. Это эффективный инструмент для создания макетов экранов, который позволяет молниеносно объединять каркасы веб-сайтов, обрабатывать графики, диаграммы или контуры страницы. Вы выбираете тип проекта, и OmniGraffle строит связи и зависимости между различными элементами, автоматически соединяя линии в виде графиков и выравнивает фигуры и элементы в макетах или страницы.
Платформа:
Mac & iOS
Цена:
$50
UXPin
UXPin отличная онлайн платформа для дизайна пользовательского взаимодействия и интерфейсов, прототипов десктопных, веб и мобильных приложений, которые должны быть быстрыми и простыми в работе. Прототипы могут быть созданы из встроенных пресетов и библиотек, файлов Photoshop, импортированных файлов Sketch либо с использованием обширных библиотек пользовательских интерфейсов UXPin.
Платформа: веб версия
Цена: $15-$40 в месяц
Инструменты прототипирования
Прототипы помогают взаимодействию команды разработки, а так же с упрощают демонстрацию клиенту его будущего продукта. У ваших клиентов может быть предварительный макет будущего интерфейса, при помощи инструментов по созданию прототипов, вы сможете оперативно получить обратную связь от клиента, предложения по изменению или улучшению различных UX/UI вопросов, без привлечения дорогостоящих разработчиков, устраивать демонстрацию или тестирование будущего продукта.
Несколько слов о выборе инструментов для создания интерактивных прототипов: на сегодняшний день обширный выбор программ для UI прототипирования может сбить с толку. Конечно, постоянное использование одних и тех же инструментов практично с точки зрения малых затрат по времени на освоение одинаковых приемов, но наличие более новых и продвинутых инструментов должно стимулировать дизайнеров к развитию и оптимизации дизайн процессов. Некоторые приложения, позволяют создавать прототипы с низким уровнем интерактивного взаимодействия, таким как перелинкованные экраны или страницы, анимировать переходы между ними, другие - создавать более сложные прототипы с поддержкой нативных мобильных жестов и анимаций. Самые продвинутые решения, имеют и визуальный редактор и редактор кода, позволяющий программировать прототипы.
Pixate
Pixate — это онлайн инструмент для создания интерактивных прототипов, который идеально подходит для работы с мобильными приложениями. Прототипы создаются при помощи графических макетов импортируемых в программу, т.к. в ней нет готовых библиотек элементов и нужно работать с графическими файлами созданными в сторонних программах. В ней нет готовых библиотек элементов, нужно работать с графическими файлами созданными в сторонних программах.Полезная функция Pixate — это возможность тестирования прототипа в реальном времени на смартфоне или планшете
Платформа
: веб
Цена:
$0-$50 за юзера в месяц
Axure
Помимо создания динамических прототипов, Axure предоставит возможность создать интерактивный wireframe и увеличить сложность и детализацию вашего макета. Этот генератор включает в себя сайтмепы, виджеты, поддержку математических функий и инструментарий для автоматического создания документации а также построения HTML-макетов приложений и веб-сайтов. Кроме того, вы сможете посмотреть на прототип вашего приложения прямо на смартфоне с помошью встроенной функции шаринга.
Платформа:
Win & Mac
Цена:
$289-$589
Origami
Origami — бесплатный инструмент, который позволяет создавать интерактивные прототипы. Которые можно запускать на айфоне или айпаде, взаимодействовать с ними, и экспортировать код, пригодный для использования разработчиками. так же позволяет создавать связи между слоями в прототипе и вашем графическом редакторе (Sketch или Photoshop), после чего любые изменения на уровне графических макетов обновляются и в самом прототипе.
Платформа:
Mac
Цена:
бесплатно
Form
Form — идеальна для создания нативных интерактивных прототипов мобильных приложений, точно имитирующих анимацию и взаимодействие для iOS приложений. Макеты создаются при помощи библиотек компонентов, разбитых по разным категориям, а за обновлениями возможно следить при помощи смартфона. Поддерживается функция drag-and-drop.
Платформа:
Mac
Цена:
бесплатно
InVision
Invision — это платформа, которая объединяет в себе множество полезных функций для современной работой над веб или мобильным интерфейсом. Система работает с внешними графическими файлами, которые можно подгружать в систему, или связывать с прототипом для автоматизированного обновления графических элементов без постоянной загрузки новых версий (т.е. Мнговенные обновления мобильной версии прямо на девайсе). Платформа имеет свою систему контроля версий, полезный функционал для командной работы и комментирования прототипа, многое другое.
Платформа:
веб
Цена:
$15-$99 (1 прототип бесплатно)
Marvel
Marvel является отличным веб-инструментом для прототипирования, выделяющийся своим потенциалом, который упрощает процесс создания прототипов. Инструмент позволяет работать с простейшим дизайном интерфейса, созданием интерактивных прототипов, а так же позволяет коментировать макеты в реальном времени всем участникам проекта. Платформа работает с большим количеством поддерживаемых типов файлов, а так же позволяет импортировать Sketch и Photoshop файлы.. Доступно 17 встроенных предварительных настроек мобильных устройств, именно поэтому вы можете быть уверены, что ваши прототипы будут оптимизированы для того устройства, которое вы выбрали. Самой выдающейся особенностью этого ПО является мобильное приложение-компаньон. Если вы хотите работать с эскизами на бумаге, мобильное приложение позволяет быстро перенести ваши наброски и работать с ними уже внутри платформы.
Marvel прост в использовании и обучении, в свободном доступе Вы сможете найти большое количество FAQ и обучающих программ, а так же видеоуроки. Кроме того, программа имеет огромное сообщество дизайнеров, которые регулярно делятся своими проектами и помогают в поддержке других.
Flinto For Mac
Flinto идеально подходит для создания прототипов анимации или комбинированни взаимодействия мобильных и веб приложений. Прототипы могут быть построены из встроенных пресетов, которые импортируются в программу для начала работы. Если вы используете Sketch, в программе доступен плагин, который позволяет импортировать рабочие файлы с помощью одного клика мыши.
Платформа:
Mac
Цена:
$99
Инструменты для визуального дизайна интерфейса
Когда прототип готов, следующий шаг заключается в создании визуального дизайна интерфейса будущего продукта. У каждого дизайнера есть свои любимые инструменты, которые, кажется, невозможно заменить. Некоторые из них уже хорошо известны (их вы быстро найдете в арсенале любого дизайнера), в то время как некоторые не столь популярны. Итак, обратите Ваше внимание на 5 главных инструментов для создания визуального дизайна, которые мы считаем, смогут попасть и в ваш арсенал.
Adobe Photoshop
Хотя эта программа не нуждается в описании, несколько слов сказать, всё же стоит. Хотя ранее Photoshop не включал в себя какие-либо библиотеки компонентов интерфейса, но уже в версии CC появилась возможность работать с библиотеками элементов, были добавлены артборды и многое другое. Даже если вы не использовали продукты Adobe, набросать общие идеи, группируя несколько слоев и компонентов будет не долгим процессом. Вы можете создатвать не только UI и UX, но также раскадровки и любые эскизы, которые вы сможете придумать.
Платформа:
Win & Mac
Цена:
$9-$49 в месяц
Adobe InDesign
Этот дизайн-нструмент включает в себя возможность работы с различным типом контента и файлов, хотя изначально предназначался для верстки многостраничных печатных документов. Многие используют его только для создания прототипа, другие еще и для дизайна самого интерфейса Создание прототипа сайта или приложения в формате интерактивного PDF-документа ещё никогда не было столь простым! Этот продукт дает Вам возможность создавать библиотеки компонентов страницы, так что вы можете сделать многочисленные коллекции различных UI-элементов, которые вы сможете использовать повторно.
Платформа:
Win & Mac
Цена:
$9-$49 в месяц
Adobe Illustrator
Adobe Illustrator является мощным инструментом для работы с векторной графикой (это значит, что вы можете создавать арты любого размера, масштабируя как необходимо, при этом не теряя качества изображения). Это превосходная программа для прототипирования различного уровня детализации, создания сложных векторных иллюстраций и работы с типографикой, а также для создания отличного визуального дизайна интерфейса для различного типа продуктов.
Платформа:
Win & Mac
Цена:
$9-$49 в месяц
Adobe Fireworks
Adobe Fireworks позволяют разрабатывать макеты для мобильных и веб приложений. В программе есть поддержка стилей CSS, различных шрифтов, а фишки по типу “corner radius” могут быть экспортированы как отдельный стиль. Имеется так же набор предустановленных пресетов.
К сожалению, проект больше не поддерживается и вскоре будет заменен на Adobe Experience Design.
Adobe XD задумана как полное (комплексное) решение для проектирования интерфейса, и работы над этой программой были проведены совместно с сообществом профессиональных дизайнеров. Разработчики думали об оптимизации и улучшении взаимодействия пользователя с продуктом, путем расширения GUI приложений и сайтов. В настоящее время программа доступна на официальном сайте Adobe бесплатно (только для Mac OS X).
Platform:
Win & Mac
Цена:
нет\временно бесплатно
Sketch
Sketch: Гибкий и функциональный инструмент со удобным и интуитивно понятным интерфейсом, который заставит Вас создавать сказочные вещи, потому что создание дизайна должно быть весельем, а не рутиной. Этот продукт прост в использовании,многие дизайнеры используют его для решения сразу двух задач — как инструмент низкоуровневого макетирования, создания wireframes, так и для финального визуального дизайна интерфейса.
Платформа:
Mac
Цена:
$99 (доступен бесплатный триал).
В заключение
Теперь выбор за Вами — делайте лишь взвешенные решения! Какие инструменты больше подходят лично вам?
Вольный перевод статьи Якуба Линовски — «A Good User Interface» .
Хороший пользовательский интерфейс обладает высокими показателями конверсии и прост в использовании. Другими словами, он хорош как для бизнеса, а так и для людей, которые им пользуются. Ниже вашему вниманию предлагается ряд практических идей, которые вы можете попробовать применить.
Идея 1: Старайтесь использовать макет с одной колонкой вместо многоколоночного
Макет с одной колонкой позволяет лучше контролировать повествование. Он сможет направить ваших пользователей наиболее предсказуемым путем — сверху вниз. Многоколоночный подход допускает риск того, что пользователь может отвлечься от основной цели страницы. Направляйте людей с помощью рассказа с обязательным призывом к действию в конце.
Идея 2: Старайтесь сделать подарок, не завершайте продажу сразу
Дружественный жест, такой как сделать подарок покупателю, именно то, что нужно. Если смотреть глубже, то подарки — это еще и эффективная тактика убеждения, основанная на принципе взаимности. Как бы очевидно это не звучало, но небольшие знаки признательности окупятся сторицей.
Идея 3: Старайтесь объединять схожие функции и не дробить интерфейс
В ходе работы можно непреднамеренно создать несколько разделов и элементов, которые выполняют одну и ту же функцию. Это обычная энтропия, когда система становится беспорядочной с течением времени. Не используйте разные названия для одинаковых функций, чтобы не увеличивать информационную нагрузку на ваших клиентов. Чем больше фрагментирован пользовательский интерфейс, тем более крутой становится кривая обучения и тем сложнее клиенту вникнуть в суть того, что от него требуется. Проведите рефакторинг пользовательского интерфейса и объедините сходные функции вместе.
Идея 4: Старайтесь использовать социальное доказательство вместо того, чтобы рассказывать о себе самом
Социальное доказательство является еще одной тактикой убеждения, которая позволяет увеличить конверсию.
Рекомендации о вас и вашем предложении могут побудить пользователя к действию, Убедитесь, что данные рекомендации или мнения присутствуют.
Идея 5: Старайтесь повторить главный призыв к действию, вместо того, чтобы показывать его один раз
Повторение призыва к действию больше применимо к более длинным страницам или же используется повторение через несколько страниц. Конечно, вы не хотите, чтобы предложение показывалось 10 раз на одной странице и раздражало людей. Длинные страницы стали нормой и попытка уместить все в первый экран уже не является хорошей идеей. Нет ничего страшного в том, чтобы сделать один призыв вверху страницы, ненавязчиво напомнить в середине и закрепить в конце. Когда люди достигают конца страницы, они останавливаются подумать, что сделать дальше, и тут самое время сделать предложение или завершить сделку.
Идея 6: Старайтесь усиливать различия в стиле между кликабельными и выбранными элементами, а не размывать их
Выразительные средства, такие как цвет, глубина и контрастность, могут быть использованы в качестве надежных маркеров, отражающих фундаментальный язык навигации по интерфейсу: где я, и куда я могу перейти. Чтобы четко донести эту идею до пользователей, нужно использовать различное визуальное оформление для элементов разного назначения (ссылок, кнопок, выбранных элементов и контента), эти различия должны быть явно выражены, и следует использовать их одинаковым образом во всем интерфейсе.
На картинке приведен пример, где синий цвет выбран, чтобы отметить все, что может нажиматься, а черный для всего, что было выбрано или указывает на то, где мы. При правильном применении, людям будет гораздо легче ориентироваться среди таких подсказок. Не усложняйте жизнь пользователям — не нарушайте смысловое кодирование.
В случаях, когда показывается несколько предложений, выделенная рекомендация продукта может быть хорошей идеей, потому что некоторых людей нужно немного подтолкнуть. Есть некоторые психологические исследования, которые предполагают, что чем шире выбор, тем меньше шансов, что решение вообще будет принято и реализовано. Чтобы не допустить такой аналитический паралич, старайтесь подчеркивать и выделять одни варианты на фоне других.
Идея 8: Попробуйте отмену действия вместо запросов на подтверждения
Представьте, что вы только что нажали на действующую кнопку или ссылку. Отмена действия уважает изначальное пользовательское намерение, позволяя действию произойти сразу, с возможностью отмены. Запросы на разрешения действия, напротив, внушают пользователю, что он или она не знают, что они делают, подвергая сомнению их намерения. Действия человека чаще всего отражают его действительные намерения, и только в редких ситуациях они случайны. Неэффективность и убожество подсказок особенно очевидны, когда пользователи должны выполнять действия повторно, и подсказки будут появляться много раз, снова и снова: это плохой опыт. Попробуйте дать вашим пользователям больше возможностей контроля: отменить действие и не спрашивать подтверждения там, где это возможно.
Идея 9: Объясните, для кого предназначен продукт. Не пытайтесь адресовать сообщение всем подряд
Вы четко выделяете свою аудиторию, или обращаетесь ко всем сразу? Эта идея повышения конверсии заключается в том, чтобы ясно объяснить, для кого именно предназначен ваш продукт или сервис. Когда вы обращаетесь к аудитории, выделите определенные признаки ваших покупателей. Это выведет общение с ними на новый уровень и придаст некий оттенок эксклюзива и элитарности. Возможный риск такой стратегии заключается в том, что при объявлении каких-либо ограничений вы можете отсечь часть потенциальной аудитории. В этом случае выручит прозрачность предложения: честность вызывает доверие.
Идея 10: Говорите прямо вместо предположений
Вы можете обратиться к людям с неуверенной дрожью в голосе или можете сказать то же самое уверенно. Если вы заканчиваете каждое предложение вопросительными знаками, используете слова вроде «возможно», «было бы здорово», «вам интересно?» или «не хотите попробовать?», тогда у вас есть все возможности добавить вашему сообщению убеждение. Кто знает, быть может, иногда стоит подсказать людям следующий шаг на пути оптимизации конверсии?
Идея 11: Больше контраста вместо однородности
Чем более явно и резко выделяются призывы к действию среди остальных элементов страницы, тем лучше будет работать ваш интерфейс, тем он сильнее. Контраст основных целевых действий можно усилить с помощью множества способов. Используя насыщенность, вы можете делать некоторые элементы темнее на фоне светлых, с помощью глубины вы заставляете предметы казаться ближе на фоне остального контента, который выглядит более отдаленным (используйте тени и градиенты). Наконец, вы можете подобрать дополняющие цвета из цветового круга (например, желтый и фиолетовый) для еще большего усиления. Однако не стоит чрезмерно увлекаться: контраст между контентом и основным действием должен быть сбалансирован.
Идея 12: Покажите место происхождения продукта вместо обобщений
Информация о вас, вашем продукте или услуге позволяет выйти на более личный уровень в общении с клиентом. Хороший способ рассказать о себе - упомянуть страну, штаты или город происхождения. Если вы сможете практически применить данный совет, то отношение к вам станет более доброжелательным. Часто, упоминание о том, где был сделан продукт, является хорошим способом создать ощущение более высокого качества продукта.
Идея 13: Сокращайте количество полей, не спрашивайте слишком много
Люди по своей природе не любят трудоемкие задачи, и это в полной мере относится к заполнению полей формы. Каждое поле, которое требует ответа от пользователя, может спровоцировать его к уходу со страницы. К тому же, не все устройства позволяют быстро набирать текст, особенно трудно это делать на мобильных устройствах. Постарайтесь оставить только необходимые поля, и удалить столько полей, сколько возможно. Если необходимых полей действительно много, то заполнить их будет лучше после отправки основной формы на отдельной странице или при помощи дополнительной формы. Расширить форму несложно, но меньшее количество полей позволяют увеличить конверсию.
Идея 14: Раскройте все опции сразу
Каждое выпадающее меню, используемое вами, скрывает набор действий, на поиск которых требуется дополнительное усилие. Если эти скрытые опции являются центральными для того, чтобы пользователь совершил необходимое действие, то, возможно, стоит увеличить их приоритет на странице. Попробуйте сделать выпадающее меню для тех опций, которые очевидны и не требуют новых знаний от пользователя: в выборе даты и времени (например, календари) или географического расположения. Иногда пункты выпадающего меню могут работать в тех интерфейсах, действия которых пользователь должен совершать время от времени. Будьте осторожны, используя выпадающие списки для элементов на пути основного повествования.
Идея 15: Предлагайте последовательность вместо страниц с двойным дном
Страницы с двойным дном — убийцы конверсии. Да, все уже привыкли скроллить длинные страницы, но важно не создать у посетителей ложное ощущение того, что страница закончилась раньше, чем это произойдет на самом деле. Если страница предполагает прокрутку, задайте визуальный или смысловой ритм, который явно укажет пользователю, что дальше есть продолжение. Будьте аккуратны с большими разрывами на местах «сгиба», где может появиться граница экрана (конечно, я имею ввиду условные зоны, поскольку сложно предусмотреть все варианты для разнообразных устройств).
Идея 16: Сохраняйте фокус, не злоупотребляйте ссылками
Нет ничего сложного в том, чтобы расставить побольше ссылок в разных местах страницы в надежде удовлетворить как можно больше нужд потенциальных клиентов. Однако, когда вы создаете повествовательную страницу, предназначение которой в том, чтобы подвести пользователя к определенному целевому действию, подумайте дважды. Не забывайте, что любая ссылка перед основным целевым действием увеличивает риск ухода пользователя со страницы и отвлекает от того, что вы от него ждете. Следите за количеством ссылок и по возможности соблюдайте баланс между разводящими страницами (с немного большим количеством ссылок) с «тоннельными» страницами с меньшим количеством ссылок и большей конверсией. Чистка от ненужных ссылок наверняка увеличит шансы добраться до важной кнопки.
