Как сделать красную иконку на сером фоне менее резкой?

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

введите описание изображения здесь

Любые предложения по визуальной обработке, которые я могу применить к кнопке и/или значку (каждый из которых разделен ниже), чтобы сделать результат менее контрастным и конфликтующим?

введите описание изображения здесь введите описание изображения здесь

Ответы (3)

Когда цвета (оттенок) разные, но их светлота/темнота (значение) одинаковые, вы получаете этот «визуальный диссонанс», который вы видите в своем примере. Прямо сейчас красный цвет немного темнее серого. Вам нужно увеличить разницу в значении между двумя оттенками.

Ты мог:

  • осветлить седину
  • затемнить красный
  • сделать и то, и другое

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

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

Отличные предложения, и мне нравится техническое объяснение визуального диссонанса. Я смутно помню это из моего (ограниченного) обучения дизайну в архитектурной школе давным-давно ... думаю, мне следовало уделить больше внимания! ;-)

Я бы посмотрел на разные методы лечения треугольником. Треугольник/восклицательный знак является распространенным значком «ALERT» и облегчает распознавание пользователем. Не изобретайте велосипед. Просто сделайте так, чтобы колесо выглядело красиво :)

оповещение 1

оповещение 2

оповещение 3

Загвоздка в том, что они по-прежнему имеют одну и ту же проблему с разными оттенками, но схожими значениями друг над другом. Но идея верна. Я думаю, что если бы треугольник был намного светлее (или белым), это сработало бы неплохо.
Согласовано. Вот почему я начал играть со значениями на третьем изображении.

Проблема заключается в цветовом контрасте вашего красного и серого: они слишком близки, даже если оттенок отличается. Посмотрите на значение «B» в ползунках HSB.

Если вы сдвинете серый светлее или темнее, это поможет. Если сделать значок камеры контурным, проблема решена. Красный также может быть немного светлее или темнее (в отличие от серого), чтобы повысить контрастность.

Как сделать красную иконку на сером фоне менее резкой?
СпросиСетьПолитика конфиденциальности1y, 0v