MVP. Как выводить на рынок товары и услуги, которые нравятся покупателям - Дэн Олсен Страница 41

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

Размер шрифта – еще одна важная часть используемой типографики. Основной текст, который обычно имеет наименьший размер шрифта, тем не менее, должен быть достаточно крупным, чтобы его можно было прочитать. Заголовки всегда имеют больший размер. Как и в случае с цветами и видами шрифтов, необходимо избегать нагромождений слишком большого количества различных текстовых размеров и поддерживать единство стиля применительно ко всему продукту. Шрифты также могут иметь разные варианты начертания, такие как полужирный, курсив или подчеркивание.

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

Графика

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

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

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

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

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

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

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

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

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

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

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

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