Материальный дизайн — Изображения
Перевод раздела Imagery официальной документации Google: http://www.google.com/design/spec/material-design/.
Изображения – это не просто украшение. Это мощный инструмент, который может помочь вам донести свои идеи и выделить свой продукт. Смелые, яркие и осмысленные изображения помогают привлечь внимание пользователя.
Неважно, хотите ли вы передать подавленное и приглушенное настроение или же яркое и красочное, представленные ниже принципы и передовые методы помогут вам результативно использовать изображения и наполнить жизнь ваши приложения, вне зависимости от используемого визуального бренда.
Содержание
- Принципы
- Передовые методы
- Интеграция в UI
Принципы
Используя иллюстрации и фотографии для улучшения пользовательского восприятия, выбирайте изображения, выражающие личное соответствие, информацию и доставляющие удовольствие.
Изображения могут отражать контекст и мир, в котором живет пользователь
Изображения могут передавать особую информацию, которая упрощает и ускоряет восприятие.
Эстетичное изображение контекста сделает ваш продукт уникальным и доставит удовольствие пользователю.
Уделяйте внимание контексту
Убедитесь, что изображения динамичны и связаны с контекстом. Используйте предиктивные визуальные средства для существенного улучшения восприятия пользователя.
Используйте изображения, имеющие отношение к контексту.
Создавайте эффект погружения
В случае необходимости можно заслонять или косвенно указывать на определяющие изображения и миниатюры изображений с помощью цвета и перекрытия контентом.
Вводя пользователя в контакт с контентом на переднем плане, можно заслонить изображение на заднем плане.
Передовые методы
Используйте различные средства выражения
В одном и том же продукте могут использоваться и иллюстрации, и фотографии. Фотография автоматически подразумевает некоторую степень специфичности и должна быть использована для демонстрации особых объектов и историй. Иллюстрации эффективны для представления идей и метафор в случаях, когда специфичная фотография может показаться чужеродной.
Для особых объектов сначала рассмотрите возможность использования фотографий.
Когда полная специфичность невозможна или неприменима, иллюстрация передает приближенное значение контента, дополняя восприятие.
Держитесь подальше от фотостоков
Используйте изображения для выражения своих идей и иллюстрации творческого совершенства.
Для особенных объектов или брендированного контента используйте особенные изображения. В случаях использования более абстрактного контента давайте ему пояснения. Фотографии и клипарт из стоков не являются особенными и не объясняют контент.
Старайтесь использовать изображения, рассказывающие оригинальные истории.
Стоковые изображения могут казаться наигранными.
Для представления конкретных вещей используйте конкретные изображения.
Не стоит при первой возможности использовать лишенные оригинальности стоковые фотографии.
Создайте центр внимания
В своих изображениях используйте графический центра внимания. Внимание может быть обращено как на отдельный объект, так и на доминирующую композицию. Следите за тем, чтобы пользователь с легкостью получал и усваивал идею.
Используйте цвет и композицию для создания в изображениях выраженного центра внимания.
Не заставляйте пользователя выискивать смысл в изображении.
Самые выразительные изображения содержат несколько значимых элементов и минимум отвлекающих факторов.
Если центр внимания завуалирован, изобразительные качества картинки теряются.
Ярко выраженный центр внимания передает идею с первого взгляда.
Отсутствие центра внимания делает изображение бессмысленным.
Создавайте повествования
Создайте затягивающую историю и ощущение образов, чтобы наделить ваше приложение человеческими качествами. Задавайте настроение, рассказывая истории с помощью образов. Настроение заставляет добиваться своих целей? Наводит тоску и тревогу? Создает ощущение праздника?
Изображение, рассказывающее историю, несравненно интереснее и информативнее.
Изображение без истории теряет возможность передать настроение, стиль бренда и идею.
Идеи с правильным контекстом эффективнее доносят пользователю ваш посыл и стиль бренда.
Представление объекта, не связанное с контекстом, не вызывает интереса.
Интеграция в UI
Разрешение
Проследите, чтобы ваши изображения имели корректные размеры на различных дисплеях и платформах. Материальный дизайн делает акцент на больших изображениях. В идеале, на ваших изображениях не должны быть заметны пиксели. Проведите тесты на экранах устройств с различными размерами и соотношениями сторон.
Используйте изображения соответствующего размера.
Изображения низкого качества.
Используйте градацию
Используйте альтернативную градацию для создания уровней различной визуальной ценности.
В галерее используйте миниатюры различных размеров для передачи иерархии контента
Поддерживайте использование нескольких контейнеров в одной экосистеме.
Защита текста
Чтобы сделать текст на изображении читабельным, добавьте ему вспомогательный фон.
Темный фон в идеале должен иметь непрозрачность на уровне 20%-40%, в зависимости от контента. Светлый фон в идеале должен иметь непрозрачность на уровне 40%-60%, в зависимости от контента.
Используя фон, не затемняйте изображение.
Для крупных участков ограничивайте зоны использования фона, чтобы не закрыть изображение полностью.
Не используйте слишком много фона на больших изображениях.
Цветные накладывающиеся элементы отличаются от защитного фона текста и могут быть использованы в качестве элемента дизайна. При создании вспомогательных цветных элементов, используйте Palette API, чтобы задать цветовую схему, связанную с вашим контентом.
Вы можете использовать цветовую палитру своего бренда в декоративных целях, чтобы улучшить восприятие изображений.
Аватары и миниатюры
Аватары и миниатюры представляют объекты или контент, изображая его буквально (с помощью фотографий) или концептуально (с помощью иллюстраций). Как правило, нажатие на них ведет к открытию основной области просмотра объекта или контента.
Аватары могут использоваться для представления людей. Предоставляйте пользователям возможности для индивидуализации собственных аватаров. Если пользователь не захочет персонализировать собственный аватар, предоставьте ему аватар, устанавливаемый по умолчанию, который бы привел его в восторг. Аватары могут использоваться для представления бренда, если в них используется определенный логотип.
Миниатюры намекают на получение дополнительной информации, позволяя пользователю украдкой взглянуть на контент, и помогают в навигации. Миниатюры позволяют вам использовать изображения в ограниченных пространствах.
Благодаря аватарам приложение кажется более личным – и они занимают минимальное количество места.
Брендированный аватар сообщает информацию с первого взгляда.
Определяющие изображения
Определяющие изображения обычно располагаются в видных местах, заметных без прокрутки. К примеру, баннер в верхней части экрана. Они используются для привлечения внимания пользователя и предоставления ему дополнительной информации о контенте или о бренде.
Особое изображение — это выразительный первичный центр внимания в неоднородном макете.
Определяющие изображения создают обстановку для неоднородных фрагментов контента в макете. Они не являются первичным центром внимания.
Галереи
Изображения в галереях — это яркие визуальные определяющие изображения в однородном макете, расположенные в виде сетки или как отдельные изображения.
Сетка фотографий
Изображение в галерее
P.S. Это тоже может быть интересно:
None Found