Чтобы выбрать цвета для магазина Shopify, начните с трех ролей: нейтральная основа, облегчающая чтение, основной цвет, который выражает бренд, и акцентный цвет, зарезервированный для важных действий. эффективная палитра содержит мало цветов, остается последовательной на всех страницах и сохраняет достаточный контраст как на рабочем столе, так и на мобильном телефоне.
Дайте определенную роль каждому цвету
Цвет должен выполнять стабильную функцию в интерфейсе Если тот же синий служит фоном, ссылкой, вторичной кнопкой и сообщением об ошибке, посетитель больше не знает, на что смотреть.
Нейтральные цвета
Не совсем белый, очень светло-серый, почти черный синий или темно-серый структурируют фоны и тексты Они занимают большую часть страницы и дают место создаваемым визуальным эффектам.
Основной цвет
Он соединяет логотип, определенные названия, графические элементы и сильные области. Он должен оставаться узнаваемым, не вторгаясь во весь магазин.
Цвет акцента
Зарезервируйте его для важных кнопок, полезных значков или информации о приоритетах. Его редкость дает ему больше влияния, чем насыщенность.
Функциональные цвета
Успех, ошибка, предупреждение, разрыв или проверка должны оставаться понятными Всегда добавляйте текст или значок: одного цвета недостаточно.
Простой шестиэтапный метод
Не выбирайте только из логотипа Стильный цвет на визитке может утомить, когда она закрывает полный экран. протестируйте палитру с реальными названиями, фотографиями, ценами, вариациями и кнопками.
Три примера сбалансированных палитр
Эти примеры служат отправной точкой Правильное сочетание зависит от продуктов, фотографии, позиционирования и цветов, уже связанных с брендом.
Премиум трезвый
Полуночный синий, очень светлый фон и матовый золотой акцент. подходит для презентации высокого класса, если золото остается декоративным или получает достаточно темный текст.
Теплое естественное
Глубокий зеленый, слоновая кость и терракота. эта палитра хорошо работает с натуральными материалами, при условии, что вы сохраните читаемость небольших текстов.
Динамичный модерн
Темно-синий, ярко-синий и оранжевый. синий организует интерфейс; оранжевый привлекает внимание к выбранному действию, не появляясь на каждом компоненте.
Сладкая редакция
Фиолетовый антрацит, розовато-белый и приглушенная малина Мягкая палитра остается профессиональной, если тексты и кнопки сохраняют явную разницу в яркости.
Контраст: правило, которое стоит перед эстетикой
Для повседневного текста стремитесь к соотношению контрастности как минимум 4,5:1. Для действительно большого текста минимальный порог составляет 3:1. необходимые значки, границы и визуальная информация также должны оставаться различимыми. эти пороги исходят из рекомендаций WCAG W3C.
| Элемент | Рекомендуется контроль | Частая ошибка |
|---|---|---|
| Общий текст | Контраст не менее 4,5:1 с нижней частью | Серый слишком светлый на белом фоне |
| Основная кнопка | Читаемый текст, контур или идентифицируемая форма | Белый текст на ярком цвете слишком светлый |
| Ссылка в абзаце | Контрастный цвет и подчеркивание или другая подсказка | Разница, ощутимая только по цвету |
| Сообщение об ошибке | Цвет, значок и откровенный текст | Поле, отмеченное только красной каймой |
| Состояние клавиатуры | Видимый контур фокуса на всех фонах | Фокус удален по эстетическим соображениям |
Как применить палитру в Shopify?
В редакторе тем Shopify цветовые схемы включают фоны, текст, ссылки, границы и кнопки. применяйте несколько согласованных диаграмм к совместимым разделам, а не создавайте новую комбинацию для каждого блока.
Основная четкая схема
Белый или очень светлый фон, темный текст, видимые ссылки. Используйте его для большинства коллекций, листов продуктов и контента.
Темный узор
Зарезервируйте его в нижнем колонтитуле, редакционной вставке или строгом разделе. Заставляйте четкие тексты и ячейки сохранять свой цвет.
Акцентная схема
Используйте его время от времени для объявления или призыва к действию. проверьте все состояния: нормальные, посещаемые, зависающие, отключенные и сосредоточенные.
Последовательный выезд
Верните бренд, не завышая плату. контраст, понимание полей и непрерывность работы с магазином остаются приоритетами.
Чтобы продлить эту работу, также проконсультируйтесь руководство по кнопкам действий и путеводитель по мобильным впечатлениям.
Ошибки, которые делают магазин непоследовательным
Умножайте акценты
Три ярких цвета, используемые с одинаковой интенсивностью, конкурируют друг с другом Посетитель уже не может различить кнопку, значок и вторичную информацию.
Раскрасьте все фоны
Фотографии, которые производятся, теряют точность, и страница становится утомительной, Нейтральная основа обычно обеспечивает более стабильную рамку.
Изменяются в зависимости от страниц
Синяя кнопка на главной странице, зеленая на форме и оранжевая в корзине ослабляют визуальное обучение курсу.
Забудьте о технических состояниях
Посещенные ссылки, отключенные кнопки, ошибки, фокусы и выбранные варианты следует протестировать, особенно после добавления приложения.
Какую услугу выбрать в соответствии с потребностями?
Контрольный список перед проверкой цветов
- В палитре - основа, основной цвет и акцент.
- Каждый цвет сохраняет одинаковую роль на всех страницах.
- Текущий текст достигает достаточного контраста со своим фоном.
- Кнопки остаются читаемыми во всех своих состояниях.
- Ссылки не идентифицируются исключительно по их цвету.
- Сообщения об ошибках также используют текст или значок.
- Созданные фотографии остаются верными и хорошо оторванными от фона.
- Темная схема не навязывает белый текст световым картам.
- Поддон контролируется при ширине 375 пкс.
- Проверяются прием, коллекции, карты, корзина и касса.
Часто задаваемые вопросы о цветах магазина Shopify
Сколько цветов следует использовать в магазине Shopify?
Часто достаточно трех главных ролей: нейтральная основа, цвет бренда и акцент. дополнительные оттенки могут быть использованы для границ, вторичного фона и функциональных состояний, не становясь новыми доминирующими цветами.
Какой цвет продается больше всего?
Никакой цвет не гарантирует больше продаж Ясность предложения, видимость кнопки, контрастность и последовательность путешествия считаются больше, чем так называемый универсальный цвет преобразования.
Должна ли кнопка "Добавить в корзину" быть зеленой?
Нет. Прежде всего, он должен отличаться от окружающей среды, оставаться согласованным с брендом и представляемым читаемым текстом. один и тот же цвет действия должен сохранять ту же роль на главных страницах.
Можем ли мы использовать черный фон на всем магазине?
Да, если продукты, тексты, поля и интерактивные состояния остаются прекрасно читаемыми Темная вселенная требует большего контроля и может быть менее подходящей для определенных фотографий или категорий.
Какие контрасты следует уважать для текстов?
Нацеливайтесь как минимум на 4,5:1 для повседневного текста и 3:1 для действительно большого текста Функциональная информация и важные визуальные индикаторы также должны оставаться различимыми.
Как изменить цвета в Shopify?
Откройте редактор тем, затем настройки тем и раздел Цвета В зависимости от темы вы можете управлять цветовыми схемами и применять их к совместимым разделам.
Должны ли мы использовать цвета логотипа точно?
Нет. логотип обеспечивает основу, но интерфейс нуждается в нейтральных, контрастных и функциональных состояниях. некоторые цвета логотипа могут быть сохранены в качестве акцентов, а не основного фона.
Как протестировать новую палитру, не нарушая работу магазина?
Работайте над копией темы, примените палитру к нескольким репрезентативным шаблонам, затем проверьте компьютер, мобильный телефон, варианты, корзину покупок, формы и оформление заказа, прежде чем приступить к работе.
Постройте четкую палитру перед украшением магазина
SiteQuiVend может анализировать согласованность цвета, контраст текста и кнопок, а также применение на основных моделях Shopify. Цель состоит в том, чтобы выбрать действительно необходимое вмешательство, от целенаправленной коррекции до более глобальной перестройки.
