Щоб вибрати кольори для магазину Shopify, почніть з трьох ролей: нейтральна основа, що полегшує читання, основний колір, що виражає бренд, і акцентний колір, зарезервований для важливих ді Ефективна палітра містить мало кольорів, залишається узгодженою на всіх сторінках і підтримує достатній контраст як на робочому столі, так і на мобільному пристрої.
Надайте кожному кольору певну роль
Колір повинен виконувати стабільну функцію в інтерфейсі Якщо той же синій служить фоном, посиланням, вторинною кнопкою і повідомленням про помилку, відвідувач більше не знає, на що дивитися.
Нейтральні кольори
Брудно-білі, дуже світло-сірі, майже чорно-сині або темно-сірі структурують фони та текст Вони займають більшу частину сторінки та дають простір створеним візуальним ефектам.
Основний колір
Він пов'язує логотип, певні заголовки, графічні елементи і сильні зон Він повинен залишатися впізнаваним, не вторгаючись у весь магазин.
Колір акценту
Зарезервуйте його для важливих кнопок, корисних значків або пріоритетної інформаці е рідкість надає йому більше впливу, ніж насиченість.
Функціональні кольори
Успіх, помилка, оповіщення, перерва або перевірка повинні залишатися зрозумілим Завжди додавайте текст або значок: одного кольору недостатньо.
Простий шестикроковий метод
Не вирішуйте тільки з логотипа Стильний колір на візитці може стати стомлюючим, коли він закриває повний екран Перевірте палітру справжніми заголовками, фотографіями, цінами, варіаціями і кнопками.
Три приклади збалансованих палітр
Ці приклади служать відправною точко правильне поєднання залежить від продуктів, фотографії, позиціонування та кольорів, які вже пов’язані з брендом.
Преміум тверезий
Опівнічний синій, дуже світлий фон і акцент матового золот ідходить для презентації високого класу, якщо золото залишається декоративним або отримує достатньо темний текст.
Теплий натуральний
Глибокий зелений, слонова кістка і теракота Ця палітра добре працює з натуральними матеріалами, за умови збереження читабельності невеликих текстів.
Динамічний модерн
Темно-синій, яскраво-синій і помаранчеви оній організовує інтерфейс; помаранчевий звертає увагу на обрану дію, не з'являючись на кожному компоненті.
Солодка редакція
Фіолетовий антрацит, рожево-білий і приглушена малин ахильна палітра залишається професійною, якщо тексти і кнопки зберігають чітку різницю в яскравості.
Контраст: правило, яке стоїть перед естетикою
Для повсякденного тексту прагніть принаймні до коефіцієнта контрастності 4, 5:1.Для дійсно великого тексту мінімальний поріг становить 3:1.Необхідні піктограми, межі та візуальна інформація також повинні залишатися помітними Ці пороги походять з рекомендацій WCAG W3C.
| Елемент | Контроль рекомендовано | Часта помилка |
|---|---|---|
| Загальний текст | Контрастність не менше 4, 5:1 з дном | Сірий занадто світлий на білому тлі |
| Головна кнопка | Читаний текст, контур або ідентифікована форма | Білий текст на яскравому кольорі занадто світлий |
| Посилання в абзаці | Контрастний колір і підкреслення або інша підказка | Відмінність, відчутна лише за кольором |
| Повідомлення про помилку | Колір, значок і явний текст | Поле, позначене лише червоною облямівкою |
| Стан клавіатури | Видимий контур фокусування на всіх фонах | Фокус видалено з естетичних міркувань |
Як застосувати палітру в Shopify?
У редакторі тем Shopify колірні схеми включають фони, текст, посилання, рамки та кнопк астосуйте кілька узгоджених діаграм до сумісних розділів, а не створюйте нову комбінацію для кожного блоку.
Головна чітка схема
Білий або дуже світлий фон, темний текст, видимі посилання Використовуйте його для більшості колекцій, аркушів продукції та вмісту.
Темний візерунок
Зарезервуйте його біля нижнього колонтитула, редакційної вставки або сильного розділ римуйте чіткі тексти та клітинки, щоб зберегти власний колір.
Акцентна схема
Використовуйте його час від часу для оголошення або заклику до ді ивiрте всі стани: нормальний, відвіданий, наведене на, вимкнений і фокус.
Послідовна перевірка
Поверніть бренд без завищення плати Контрастність, розуміння полів і спадкоємність з магазином залишаються пріоритетними.
Щоб розширити цю роботу, також проконсультуйтеся посібник із кнопки дій і посібник із мобільного досвіду.
Помилки, які роблять магазин непослідовним
Множити акценти
Три яскраві кольори, що використовуються з однаковою інтенсивністю, конкурують один з одни відвідувач більше не може розрізнити кнопку, значок і другорядну інформацію.
Колір всіх фонів
Виготовлені фотографії втрачають точність, і сторінка стає втомлююче нейтральна основа зазвичай забезпечує більш стабільний кадр.
Змінюватись залежно від сторінок
Синя кнопка на домашній сторінці, зелена на картці і помаранчева в кошику послаблює візуальне навчання курсу.
Забудьте про технічні стани
Відвідані посилання, вимкнені кнопки, помилки, фокуси та вибрані варіанти слід протестувати, особливо після додавання програми.
Яку послугу вибрати відповідно до потреб?
Контрольний список перед перевіркою кольорів
- Палітра включає основу, основний колір і акцент.
- Кожен колір зберігає однакову роль на всіх сторінках.
- Поточний текст досягає достатнього контрасту з його фоном.
- Кнопки залишаються читабельними в усіх своїх станах.
- Посилання не ідентифікуються лише за кольором.
- Повідомлення про помилки також використовують текст або піктограму.
- Виготовлені фотографії залишаються вірними та добре відстороненими від фону.
- Темна схема не накладає білий текст на світлові карти.
- Контроль палети здійснюється на ширині 375 px.
- Вітальний прийом, колекції, картки, кошик і оформлення замовлення перевіряються.
Поширені запитання про кольори магазину Shopify
Скільки кольорів слід використовувати в магазині Shopify?
Часто досить трьох головних ролей: нейтральна основа, фірмовий колір і акцент Додаткові відтінки можна використовувати для бордюрів, вторинних фонів і функціональних станів, не стаючи новими домінуючими кольорами.
Який колір продається найбільше?
Жоден колір не гарантує більше продаже існість пропозиції, видимість кнопки, контрастність і узгодженість подорожі мають більше значення, ніж так званий універсальний колір конверсії.
Кнопка Додати в кошик має бути зеленою?
N Перш за все, він повинен відрізняти себе від навколишнього середовища, залишатися узгодженим з брендом і представляти читабельний текс одинаковий колір дії повинен зберігати ту ж роль на головних сторінках.
Чи можемо ми використовувати чорний фон на всьому магазині?
Так, якщо продукти, тексти, поля та інтерактивні стани залишаються ідеально читабельним темний всесвіт вимагає більше елементів керування і може бути менш придатним для певних фотографій або категорій.
Які контрасти слід поважати для текстів?
Прагніть принаймні 4, 5:1 для повсякденного тексту та 3:1 для справді великого текст Функціональна інформація та важливі візуальні показники також повинні залишатися помітними.
Як змінити кольори в Shopify?
Відкрийте редактор тем, потім налаштування теми і розділ Кольори Залежно від теми ви можете керувати кольоровими схемами і застосовувати їх до сумісних розділів.
Чи варто використовувати кольори логотипу точно?
Н Логотип забезпечує основу, але інтерфейс потребує нейтральних, контрастів і функціональних стани Деякі кольори логотипу можна зберегти як акценти, а не основні фони.
Як протестувати нову палітру, не порушуючи магазин?
Працюйте над копією теми, застосуйте палітру до кількох репрезентативних шаблонів, а потім перевірте комп’ютер, мобільний телефон, варіації, кошик, форми та оформлення замовлення перед запуском.
Побудуйте чітку палітру перед тим, як прикрасити магазин
SiteQuiVend може аналізувати узгодженість кольорів, контраст тексту та кнопок, а також застосування на основних моделях Shopif Мета полягає в тому, щоб вибрати втручання, яке дійсно необхідно, від цілеспрямованої корекції до більш глобального перегляду.
