CSS-live.ru

Материальный дизайн — Изображения

Перевод раздела Imagery официальной документации Google: http://www.google.com/design/spec/material-design/.

style_imagery_introduction

Изображения – это не просто украшение. Это мощный инструмент, который может помочь вам донести свои идеи и выделить свой продукт. Смелые, яркие и осмысленные изображения помогают привлечь внимание пользователя.

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

Содержание

  • Принципы
  • Передовые методы
  • Интеграция в UI

Принципы

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

style_imagery_principles1
Личное соответствие

Изображения могут отражать контекст и мир, в котором живет пользователь

style_imagery_principles2
Информация

Изображения могут передавать особую информацию, которая упрощает и ускоряет восприятие.

style_imagery_principles3
Удовольствие

Эстетичное изображение контекста сделает ваш продукт уникальным и доставит удовольствие пользователю.

Уделяйте внимание контексту

Убедитесь, что изображения динамичны и связаны с контекстом. Используйте предиктивные визуальные средства для существенного улучшения восприятия пользователя.

style_imagery_principles4

Используйте изображения, имеющие отношение к контексту.

Создавайте эффект погружения

В случае необходимости можно заслонять или косвенно указывать на определяющие изображения и миниатюры изображений с помощью цвета и перекрытия контентом.

style_imagery_principles5

Вводя пользователя в контакт с контентом на переднем плане, можно заслонить изображение на заднем плане.

Передовые методы

Используйте различные средства выражения

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

style_imagery_bestpractices_mediums1
Правильно.

Для особых объектов сначала рассмотрите возможность использования фотографий.

style_imagery_bestpractices_mediums2
Правильно.

Когда полная специфичность невозможна или неприменима, иллюстрация передает приближенное значение контента, дополняя восприятие.

Держитесь подальше от фотостоков

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

Для особенных объектов или брендированного контента используйте особенные изображения. В случаях использования более абстрактного контента давайте ему пояснения. Фотографии и клипарт из стоков не являются особенными и не объясняют контент.

whatismaterial_materialproperties_physicalproperties_thickness_01_yes
Правильно.

Старайтесь использовать изображения, рассказывающие оригинальные истории.

style_imagery_bestpractices_stock2
Неправильно.

Стоковые изображения могут казаться наигранными.

style_imagery_bestpractices_stock3
Правильно.

Для представления конкретных вещей используйте конкретные изображения.

style_imagery_bestpractices_stock4
Неправильно.

Не стоит при первой возможности использовать лишенные оригинальности стоковые фотографии.

Создайте центр внимания

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

style_imagery_bestpractices_focus1
Правильно.

Используйте цвет и композицию для создания в изображениях выраженного центра внимания.

style_imagery_bestpractices_focus2
Неправильно.

Не заставляйте пользователя выискивать смысл в изображении.

style_imagery_bestpractices_focus3
Правильно.

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

style_imagery_bestpractices_focus4
Неправильно.

Если центр внимания завуалирован, изобразительные качества картинки теряются.

style_imagery_bestpractices_focus5
Правильно.

Ярко выраженный центр внимания передает идею с первого взгляда.

style_imagery_bestpractices_focus6
Неправильно.

Отсутствие центра внимания делает изображение бессмысленным.

Создавайте повествования

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

style_imagery_bestpractices_narrative1
Правильно.

Изображение, рассказывающее историю, несравненно интереснее и информативнее.

style_imagery_bestpractices_narrative2
Неправильно.

Изображение без истории теряет возможность передать настроение, стиль бренда и идею.

style_imagery_bestpractices_narrative3
Правильно.

Идеи с правильным контекстом эффективнее доносят пользователю ваш посыл и стиль бренда.

style_imagery_bestpractices_narrative4
Неправильно.

Представление объекта, не связанное с контекстом, не вызывает интереса.

Интеграция в UI

Разрешение

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

style_imagery_integration_resolution1
Правильно.

Используйте изображения соответствующего размера.

style_imagery_integration_resolution2
Неправильно.

Изображения низкого качества.

Используйте градацию

Используйте альтернативную градацию для создания уровней различной визуальной ценности.

style_imagery_integration_scale1

В галерее используйте миниатюры различных размеров для передачи иерархии контента

style_imagery_integration_scale2

Поддерживайте использование нескольких контейнеров в одной экосистеме.

Защита текста

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

style_imagery_integration_text1
Правильно.

Темный фон в идеале должен иметь непрозрачность на уровне 20%-40%, в зависимости от контента. Светлый фон в идеале должен иметь непрозрачность на уровне 40%-60%, в зависимости от контента.

style_imagery_integration_text2
Неправильно.

Используя фон, не затемняйте изображение.

style_imagery_integration_text3
Правильно.

Для крупных участков ограничивайте зоны использования фона, чтобы не закрыть изображение полностью.

style_imagery_integration_text4
Неправильно.

Не используйте слишком много фона на больших изображениях.

style_imagery_integration_text5
Правильно.

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

style_imagery_integration_text6
Правильно.

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

Аватары и миниатюры

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

Аватары могут использоваться для представления людей. Предоставляйте пользователям возможности для индивидуализации собственных аватаров. Если пользователь не захочет персонализировать собственный аватар, предоставьте ему аватар, устанавливаемый по умолчанию, который бы привел его в восторг. Аватары могут использоваться для представления бренда, если в них используется определенный логотип.

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

style_imagery_integration_thumbs1

Благодаря аватарам приложение кажется более личным – и они занимают минимальное количество места.

style_imagery_integration_thumbs2

Брендированный аватар сообщает информацию с первого взгляда.

Определяющие изображения

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

style_imagery_integration_hero1
Особое изображение

Особое изображение — это выразительный первичный центр внимания в неоднородном макете.

style_imagery_integration_hero2
Встроенное определяющее изображение

Определяющие изображения создают обстановку для неоднородных фрагментов контента в макете. Они не являются первичным центром внимания.

Галереи

Изображения в галереях — это яркие визуальные определяющие изображения в однородном макете, расположенные в виде сетки или как отдельные изображения.

style_imagery_integration_gallery1

Сетка фотографий

style_imagery_integration_gallery2

Изображение в галерее

P.S. Это тоже может быть интересно:

    None Found

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.