Дэн Олсен – MVP. Как выводить на рынок товары и услуги, которые нравятся покупателям (страница 33)

Графика

Изображения, как фотографии, так и иллюстрации, часто используются в визуальном дизайне. Для определенных категорий продуктов, таких как сайты интернет-магазинов, правильное использование изображений является очень важным аспектом. Возьмем к примеру приложение Airbnb: чтобы клиенты чувствовали себя комфортно, выбирая жилье для аренды, им необходимо видеть его фотографии. В главе 7 рассказывалось о том, как Airbnb удалось более чем удвоить коэффициент конверсии за счет использования фотографий более высокого качества. Изображения часто присутствуют на целевых и других маркетинговых страницах. Обычной практикой является размещение на целевой странице большой, выделяющейся фотографии типичного пользователя вашего продукта либо какого-то другого художественного или вдохновляющего образа / сюжетной сцены. Например, Netflix часто использует крупные изображения своих пользователей, наслаждающихся просмотром фильма.

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

Иконки – это небольшие символы, используемые для представления объектов или смысловых понятий. Чаще всего они используются для кнопок или других элементов управления пользовательского интерфейса, особенно при нехватке свободного места. Во многих приложениях иконки являются основным способом обозначения кнопок управления. В браузерах иконки используют для таких часто используемых кнопок, как «Назад», «Вперед» и «Обновить». Adobe Photoshop использует панель инструментов, состоящую из иконок, в качестве основного способа обеспечения доступа клиентов к функционалу этого программного продукта. Аналогичным образом продукты Microsoft Office используют «ленту», наполненную иконками. Помимо элементов управления, иконки используются также на маркетинговых страницах как дополняющие и усиливающие приведенный там текст. Иконографика – это особый раздел визуального дизайна; создателям иконок приходится вручную прорисовывать отдельные пиксели, чтобы явить миру свои крошечные шедевры. Важность иконок возросла с расширением использования мобильных устройств. Небольшой размер экрана в еще большей степени заставляет разработчиков мобильных приложений экономить место; поэтому многие элементы управления в таких приложениях представляют собой иконки.

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

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

Стандарты стиля

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

Компоновочные сетки

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

Вы можете подобрать размер сетки, наиболее подходящий для вашего макета. На Рисунке 8.4 представлен пример компоновочной сетки, состоящей из 12 столбцов шириной по 94 пикселя каждый, разделенных желобами шириной в 18 пикселей. Общая ширина сетки составляет в этом случае 1326 пикселей и оптимизирована для экранов шириной в 1366 пикселей, чтобы пользователям не приходилось при просмотре сдвигать страницу по горизонтали. Такая ширина макета позволяет разместить дополнительно вертикальную полосу прокрутки и любые другие визуальные элементы интерфейса браузера или операционной системы, имеющие размер до 40 пикселей.

Рисунок 8.4. Пример компоновочной сетки

Основное преимущество компоновочной сетки состоит в том, что она позволяет выравнивать размещение всех элементов страницы или экрана по мере их добавления. Примерами элементов страницы или экрана могут служить текстовые блоки, изображения или кнопки. Элементы могут занимать более одного столбца. Главное, чтобы левая и правая границы элементов начинались и заканчивались на линиях сетки. Взятая нами для примера сетка, состоящая из 12 столбцов, может быть равномерно поделена по 2, 3, 4 и 6 столбцов, что допускает широкий диапазон возможных размеров элементов. На Рисунке 8.5 представлен пример вайрфрейма, который создан с использованием компоновочной сетки для размещения элементов страницы.

Рисунок 8.5. Вайрфрейм, созданный с использованием компоновочной сетки

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

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

Макеты

Макеты, которые мы уже рассматривали в главе 7, – это высокоточные результаты проектирования, представляющие визуальный дизайн. Они основаны на предварительно разработанных вайрфреймах и используют цветовую палитру, элементы типографики и графики для создания внешнего вида продукта. Макеты обычно создаются визуальным дизайнером с помощью таких инструментов, как Adobe Illustrator или Sketch, а затем экспортируются в графические файлы (PNG, GIF или JPG). Вы можете использовать такие статичные макеты для получения обратной связи от пользователей, однако тестирование с использованием кликабельных макетов принесет гораздо большую пользу. Они дают пользователям лучшее представление о продукте и о том, как он работает. Такие инструменты, как InVision, позволяют преобразовать набор статичных макетов в пользовательский поток. С помощью этого и ему подобных инструментов вы можете определить область макета, доступную для клика или нажатия (например, разместив там кнопку или ссылку), и указать, к какому следующему макету должен быть осуществлен переход по этой ссылке. В главах 9 и 10 рассказывается, как организовать получение отзывов пользователей о макетах и использовать результаты тестирования для итеративного улучшения ваших проектов. Как только у вас появится набор кликабельных макетов, которые, по оценке целевых потребителей, достаточно просты в использовании и соответствуют ценностному предложению, этап разработки UX-дизайна будет завершен. Следующим шагом станет реализация пользовательского опыта путем создания продукта. В главе 12 обсуждается, как это сделать с использованием принципов Agile-разработки.