Критика: какие цвета пользовательского интерфейса использовать в графическом дизайне?

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

Домашний экран

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

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

Спасибо

Я предполагаю, что страница на снимке экрана является одной из самых важных страниц приложения? Пара других может быть хороша, чтобы дать нам некоторую ссылку. Не могли бы вы предоставить цветовую палитру, которую вы используете?
Да, это правильно. Это домашний экран, главная лента, если хотите. Если вы нажмете на картинку, вы увеличите изображение продукта, оттуда вы можете нажать на название магазина, чтобы увеличить изображение магазина. Я загрузил цветовую палитру и два других экрана здесь .
Использование синего цвета в навигации и переключение цвета шрифта на белый меня не отвлекает.
Спасибо за это понимание. Я собираюсь начать экспериментировать с этим и начать тестировать то, что лучше всего работает на потенциальных пользователях :)

Ответы (3)

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

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

Я думаю, он начнет работать лучше, если немного по-другому относиться к эффектам/фото. До тех пор я не уверен, что какое-либо меню будет работать. Основная проблема — тени. Наличие направленных вверх теней не является обычным явлением в мире и создает очень запутанный вид. Я имею в виду, что мы обычно хотим, чтобы вершина стека была наверху, особенно если там находится меню. Но вместо этого наш мозг должен перестроиться, и в конечном итоге мы сначала смотрим на сыр Гауда и продвигаемся вверх по странице.

Я не думаю, что вы будете на 100% довольны своей навигацией, пока это не будет решено, потому что это слишком отвлекает.

Это действительно проницательно, не думал об этом таким образом.

Работая над пользовательским интерфейсом, я хотел бы указать вам на некоторые принципы UX здесь. Сделайте навигационную панель для ваших пользователей, а не для решения дизайнерских проблем. Сделайте его удобным для просмотра/чтения. Проверьте на дальтонизм и т. д. Ознакомьтесь с рекомендациями по интерфейсу iOS . Они помогут вашим пользователям, даже если ваш продукт — Android.

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