Material Design на русском. Часть 43 — Коммуникация: Изображения

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.

Принципы

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

Информативность

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

Приятный опыт

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

Сознательность

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

Использование

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

Используй разные примемы

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

Иллюстрации могут пояснять какие-то абстрактные вещи или понятия. На этом примере “Учись откуда угодно” трудно было бы выразить фотографией.

Тут фотографии лучше отражают конкретные темы.

Точка фокуса

У изображения должна быть точка фокуса, поскольку она влияет на то, как фотография может быть обрезана под разлифные форматы. Фокусной точкой может быть что угодно: объект или живое существо в композиции. Просто четко представляй себе то, на чем должен быть фокус у изображения.

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

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

Про размеры изображений

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

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

Правильно: Старайся экспортировать картинки так, чтобы получить наименьший размер файла, но не потерять в качестве.

Неправильно: Избегай маленького размера файла, который негативно повлияет на качество картинки. Избегай пикселизации изображений.

Доступность

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

Неправильно: На этой картинке нет ни подписи ни альтернативного текста. Без этого пользователи с включенным режимом доступности просто услышат слово «изображение», без каких-либо деталей.

Как можно использовать картинки?

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

Для обучения пользователей

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

На этом примере показан рецепт, а изображение помогают пользователю понять то, как приготовить еду.

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

Картинки также помогают пользователям лучше понимать контекст. На этом примере картинки помогают лучше понять и различить категории интересов.

Для сравнения товаров

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

Единый стиль съемки помогает проще сравнивать товары.

Для поднятия настроения

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

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

Для донесения контекста

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

Тут изображения используются для передачи контекста статьи.

Hero изображения

Использование

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

Размещение

Подобные картинки размещаются на самом приметном и видном месте экрана: сверху или в центре.

Правильно: Можешь использовать одну картинку, чтобы дать контекст контенту.

Правильно: Ты можешь сделать из ряда hero изображений карусель, чтобы показать продукт в разных ракурсах.

Миниатюрные изображения

Использование

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

Миниатюры используются для:

Намекнуть на дополнительную информацию
Предоставить возможность посмотреть на контент (можно тапнуть на них и открыть, например, категорию)
Помощь в навигации

Миниатюры могут быть обрезаны под любую форму.

Тут ты видишь категории с их миниатюрами, которые показаны в форме круга.

Размещение

Текст или элементы действия размещаются обычно над миниаютрами, например, в карточках.

Миниатюры расположены в виде горизонтального списка

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

Информативные изображения

Использование

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

Аватарки

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