Мобильные кнопки того же цвета, что и фон холста

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

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

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

ИМО, они выглядят как кнопки просто отлично. Однако это не очень привлекательно для глаз
Заполнение цветом, как во втором примере, делает более очевидным, что это кнопки.

Ответы (3)

Это не обязательно «плохой визуальный дизайн», но я рекомендую вам попробовать одно из следующих действий:

  • инвертируйте кнопки, чтобы фон кнопки был оранжевым, а метки белыми — возможно, попробуйте также метки черного цвета, возможно, с непрозрачностью 70%.

  • раскрасьте весь фон в оранжевый цвет.

Если вы сделаете вышеупомянутые чередования, а затем поместите все 3 на экран и отойдете примерно на 3–4 метра, вы можете увидеть, что один из них остается очень очевидным, а другие - нет.

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

Предложение Саймона Уайта выглядит лучше. Какая-то конкретная причина использовать только один цвет? (за исключением темных границ.) Если нет, вы можете проверить веб-сайты цветовой палитры, такие как coolors.co или adobe color . Я обычно использую как минимум 3 цвета, даже в черно-белом дизайне, наличие светлого/темно-серого в нем имеет большое значение.

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

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

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