Aby wybrać kolory dla sklepu Shopify, zacznij od trzech ról: neutralna podstawa ułatwiająca czytanie, główny kolor wyrażający markę oraz kolor akcentu zarezerwowany dla ważnych akcji Efektywna paleta zawiera niewiele kolorów, pozostaje spójna na wszystkich stronach, a także zachowuje wystarczający kontrast zarówno na komputerze stacjonarnym, jak i mobilnym.
Nadaj określoną rolę każdemu kolorowi
Kolor musi pełnić stabilną funkcję w interfejsie Jeśli ten sam niebieski służy jako tło, link, przycisk dodatkowy i komunikat o błędzie, odwiedzający nie wie już, na co patrzeć.
Neutralne kolory
Biaława, bardzo jasnoszara, prawie czarnoniebieska lub ciemnoszara struktura tła i teksty Zajmują większość strony i dają miejsce na wytworzone efekty wizualne.
Główny kolor
Łączy logo, pewne tytuły, elementy graficzne i mocne obszary Musi pozostać rozpoznawalny bez inwazji na cały sklep.
Kolor akcentu
Zarezerwuj go na ważne przyciski, przydatne odznaki lub informacje o priorytetach.jego rzadkość daje mu większy wpływ niż nasycenie.
Funkcjonalne kolory
Sukces, błąd, alert, przerwa lub walidacja muszą pozostać zrozumiałe Zawsze dodawaj tekst lub ikonę: sam kolor nie wystarczy.
Prosta metoda sześcioetapowa
Nie decyduj się z samego logo Stylowy kolor na wizytówce może stać się męczący, gdy obejmuje pełny ekran Przetestuj paletę z prawdziwymi tytułami, zdjęciami, cenami, wariacjami i przyciskami.
Trzy przykłady zrównoważonych palet
Przykłady te służą jako punkt wyjścia Właściwa kombinacja zależy od produktów, fotografii, pozycjonowania i kolorów już powiązanych z marką.
Premium trzeźwy
Midnight blue, bardzo jasne tło i matowy złoty akcent Nadaje się do prezentacji high-end, jeśli złoto pozostaje dekoracyjne lub otrzymuje wystarczająco ciemny tekst.
Ciepły naturalny
Głęboka zieleń, kość słoniowa i terakota Ta paleta dobrze współpracuje z naturalnymi materiałami, pod warunkiem zachowania czytelności małych tekstów.
Dynamiczny nowoczesny
Granatowy, jasnoniebieski i pomarańczowy Niebieski organizuje interfejs; pomarańczowy zwraca uwagę na wybraną akcję, nie pojawiając się na każdym komponencie.
Słodki artykuł redakcyjny
Fioletowy antracyt, różowawo-biały i stłumiony malinowy Paleta miękka pozostaje profesjonalna, jeśli teksty i przyciski zachowują wyraźną różnicę w luminancji.
Kontrast: zasada, która jest przed estetyką
Dla tekstu codziennego dążyć do co najmniej współczynnika kontrastu 4,5:1 Dla naprawdę dużego tekstu minimalny próg wynosi 3:1. muszą pozostać również rozróżnialne niezbędne ikony, obramowania i informacje wizualne Progi te pochodzą z zaleceń WCAG W3C.
| Element | Zalecana kontrola | Częsty błąd |
|---|---|---|
| Wspólny tekst | Kontrast co najmniej 4,5:1 z dnem | Szary zbyt jasny na białym tle |
| Główny przycisk | Czytelny tekst, zarys lub możliwy do zidentyfikowania kształt | Biały tekst na jasny kolor zbyt jasny |
| Link w akapicie | Kontrastowy kolor i podkreślenie lub inna wskazówka | Różnica dostrzegalna tylko przez kolor |
| Komunikat o błędzie | Kolor, ikona i wyraźny tekst | Pole oznaczone jedynie czerwoną obwódką |
| Stan klawiatury | Widoczny kontur ostrości na wszystkich tłach | Focus usunięty ze względów estetycznych |
Jak zastosować paletę w Shopify?
W edytorze motywów Shopify schematy kolorów obejmują tła, tekst, linki, obramowania i przyciski Zastosuj kilka spójnych diagramów do zgodnych sekcji, zamiast tworzyć nową kombinację dla każdego bloku.
Główny jasny schemat
Białe lub bardzo jasne tło, ciemny tekst, widoczne linki Użyj go do większości kolekcji, arkuszy produktów i treści.
Ciemny wzór
Zarezerwuj go przy stopce, wkładce redakcyjnej lub mocnej sekcji Wymuś wyraźne teksty i komórki, aby zachować własny kolor.
Schemat akcentu
Używaj go okazjonalnie do ogłoszenia lub wezwania do działania Sprawdź wszystkie stany: normalny, odwiedzany, zawisł, wyłączony i ostrość.
Konsekwentne kasowanie
Odbierz markę bez obciążania płatności Kontrast, zrozumienie pól i ciągłość ze sklepem pozostają priorytetami.
Aby rozszerzyć tę pracę, skonsultuj się również przewodnik po przyciskach akcji i przewodnik po doświadczeniach mobilnych.
Błędy, które powodują, że sklep jest niespójny
Pomnóż akcenty
Rywalizują ze sobą trzy jasne kolory używane z taką samą intensywnością Odwiedzający nie potrafi już rozróżnić przycisku, odznaki i informacji wtórnych.
Kolor wszystkie tła
Wytworzone zdjęcia tracą precyzję, a strona staje się męcząca, neutralna podstawa zapewnia ogólnie bardziej stabilną ramę.
Zmień w zależności od stron
Niebieski przycisk na stronie głównej, zielony na formularzu i pomarańczowy w koszyku osłabia wizualną naukę kursu.
Zapomnij o stanach technicznych
Odwiedzone linki, wyłączone przyciski, błędy, fokusy i wybrane warianty powinny być testowane, szczególnie po dodaniu aplikacji.
Którą usługę wybrać według potrzeb?
Lista kontrolna przed walidacją kolorów
- Paleta zawiera podstawę, główny kolor i akcent.
- Każdy kolor zachowuje tę samą rolę na wszystkich stronach.
- Obecny tekst osiąga wystarczający kontrast ze swoim tłem.
- Przyciski pozostają czytelne we wszystkich stanach.
- Linki nie są identyfikowane wyłącznie na podstawie ich koloru.
- Komunikaty o błędach wykorzystują również tekst lub ikonę.
- Wyprodukowane zdjęcia pozostają wierne i dobrze oderwane od tła.
- Schemat ciemny nie narzuca białego tekstu na mapy świetlne.
- Paleta jest kontrolowana przy szerokości 375 px.
- Witamy, kolekcje, karty, koszyk i kasa są testowane.
Często zadawane pytania dotyczące kolorów sklepu Shopify
Ile kolorów należy stosować w sklepie Shopify?
Często wystarczą trzy główne role: neutralna podstawa, kolor marki i akcent Dodatkowe odcienie mogą być stosowane do obramowań, wtórnych tła i stanów funkcjonalnych, nie stając się nowymi dominującymi kolorami.
Który kolor sprzedaje się najbardziej?
Brak koloru gwarantuje większą sprzedaż Przejrzystość oferty, widoczność przycisku, kontrast i spójność podróży liczą się bardziej niż tzw. uniwersalny kolor konwersji.
Czy przycisk Dodaj do koszyka musi być zielony?
Nie. Przede wszystkim musi odróżniać się od otoczenia, pozostać spójny z marką i prezentować czytelny tekst Ten sam kolor akcji powinien zachować tę samą rolę na głównych stronach.
Czy możemy użyć czarnego tła na całym sklepie?
Tak, jeśli produkty, teksty, pola i stany interaktywne pozostają doskonale czytelne Ciemny wszechświat wymaga większej liczby kontroli i może być mniej dostosowany do niektórych fotografii lub kategorii.
Jakie kontrasty należy uszanować w przypadku tekstów?
Celuj w co najmniej 4,5:1 dla tekstu codziennego i 3:1 dla tekstu naprawdę dużego Informacje funkcjonalne i ważne wskaźniki wizualne również powinny pozostać rozróżnialne.
Jak zmienić kolory w Shopify?
Otwórz edytor motywów, następnie ustawienia motywów i sekcję Kolory W zależności od motywu możesz zarządzać schematami kolorów i stosować je do kompatybilnych sekcji.
Czy powinniśmy dokładnie używać kolorów logo?
Nie.Logo stanowi podstawę, ale interfejs potrzebuje neutralnych, kontrastów i stanów funkcjonalnych Niektóre kolory logo mogą być zachowane jako akcenty, a nie główne tła.
Jak przetestować nową paletę bez zakłócania sklepu?
Pracuj nad kopią motywu, zastosuj paletę do kilku reprezentatywnych szablonów, a następnie sprawdź komputer, telefon komórkowy, odmiany, koszyk, formularze i kasę przed uruchomieniem.
Zbuduj przejrzystą paletę przed dekoracją sklepu
SiteQuiVend może analizować spójność kolorów, kontrast tekstu i przycisków oraz zastosowanie w głównych modelach Shopify. Celem jest wybranie naprawdę niezbędnej interwencji, od ukierunkowanej korekty po bardziej globalny remont.
