W artykule:
Przyciski i wezwania do działania wypełniają stosunkowo mało nieruchomości, ale są jednymi z najważniejszych elementów projektowych każdej strony internetowej. Biorąc pod uwagę ich znaczenie, uzyskanie przycisków i wezwań do działania jest czymś w rodzaju wielkiej sprawy.
Jednak projektowanie przycisków może być trudne. Przy projektowaniu przycisków należy wziąć pod uwagę wiele czynników – rozmiar, kolor, ikony, kształt, rozmieszczenie i tekst — a przyciski wezwania do działania są jeszcze bardziej krytyczne, aby uzyskać poprawność.
W tym poście omówimy podstawy projektowania przycisków dla Twojej witryny WordPress. Rozważymy również czynniki, które należy wziąć pod uwagę, gdy przyciski będą używane jako część wezwania do działania. Na koniec zostawimy Ci kod, którego możesz użyć do tworzenia przycisków i pokażemy, jak używać tego kodu w WordPress.
Trzy zasady projektowania skutecznych przycisków strony internetowej
Zacznijmy od podstaw. Jeśli chcesz tworzyć skuteczne przyciski, musisz przestrzegać kilku najlepszych praktyk.
Te najlepsze praktyki mogą wydawać się zdrowym rozsądkiem, a to dlatego, że tak naprawdę są. Jeśli jednak nigdy nie myślałeś o projektowaniu przycisków, może się okazać, że naruszasz niektóre z tych zasad.
Zasada # 1: Przyciski Powinny Wyglądać Jak, Dobrze, Przyciski!
Aby projekt strony internetowej działał zgodnie z przeznaczeniem, przyciski muszą być łatwe do wybrania. Rzućmy okiem na to, jak Google robi to na swojej stronie docelowej dla swojego produktu analitycznego.
Chociaż nie wszyscy kochają projektowanie materiałów Google, przyciski na powyższym obrazku są niewątpliwe. Przyciski powinny się wyróżniać. Przyciski, które nie są wyraźnie przyciskami, mogą odczuwać znacznie niższy współczynnik klikalności.
Zasada # 2: działania przycisków powinny być jasne
Podczas projektowania przycisków, działanie związane z każdym przyciskiem musi być jasne. Spójrz na obrazek powyżej. Działanie związane z każdym przyciskiem jest jasne. Użyj tekstu lub ikon na przyciskach, aby jasno i zwięźle opisać działania, które każdy przycisk ma wykonać.
Nie musisz tego robić z SMS-em. Czasami ikony mogą być równie skuteczne. Na przykład, patrząc na ten sam przykład, widzimy ten przycisk stylu ikony po prawej stronie:
Ikona na tym przycisku komunikuje się w następujący sposób: „Hej! Tu jest więcej rzeczy!”Informuje nas, że dostępne są dodatkowe opcje, które można zobaczyć, klikając przycisk.
Zasada # 3: Projekt przycisku powinien być spójny
Po trzecie, podczas projektowania przycisków upewnij się, że wszystkie przyciski, które wykonują podobną akcję, mają podobny wygląd. Spójrzmy jeszcze raz na Google.
Na obrazie znajdują się trzy różne wzory przycisków. Każdy projekt przycisku robi coś innego. Zielone przyciski są wezwaniem do działania-pozwalają zarejestrować się w usłudze i są najbardziej widoczne. Niebieskie strzałki pozwalają dowiedzieć się więcej o każdej usłudze. Przycisk ikona wyświetla więcej opcji dostępnych na tej samej stronie internetowej.
Na całej tej stronie wzór ten jest spójny:
- Okrągłe przyciski ikon wykonują czynności na stronie.
- Przyciski” dowiedz się więcej ” są niebieskie i zawierają strzałkę (a czasem jakiś tekst).
- Przyciski Call-to-action są kwadratowe i zielone.
Podczas projektowania przycisków dla witryny opracuj system, w którym różne projekty przycisków mają różne cele i są spójne w stosowaniu tych projektów.
Jak wyróżnić przyciski Call-To-Action
Przyciski zawarte w elementach call-to-action (CTA) różnią się nieco od pozostałych przycisków na twojej stronie internetowej. To dlatego, że przyciski CTA powinny być zaprojektowane tak, aby zachęcać do określonej akcji, a nie po prostu służyć jako funkcjonalny element interfejsu użytkownika. Aby przyciski CTA były jak najbardziej skuteczne, należy pamiętać o tych wytycznych:
Użyj kolorów, które są w wysokim kontraście do koloru tła i wyróżniają się na tle innych przycisków typu UI w witrynie.
Spraw, aby przyciski CTA były łatwe do zobaczenia i znalezienia, rozmiarując je obficie i pozostawiając mnóstwo białych spacji wokół przycisków CTA.
Używaj pilnego języka podczas pisania kopii przycisków CTA, zwłaszcza jeśli składasz ograniczoną ofertę czasową.
Tworzenie przycisków z kodem
Zawsze możesz użyć wtyczki do tworzenia przycisków, ale kodując je samodzielnie, masz pełną kontrolę nad wyglądem i zachowaniem przycisków. Tak więc, mając na uwadze podstawowe zasady projektowania przycisków, przyjrzyjmy się, w jaki sposób można utworzyć trzy wspólne projekty przycisków za pomocą kodu: prostokątne przyciski tekstowe, przyciski ikon kół oraz przyciski łączące tekst i ikony.
Jak utworzyć prostokątne przyciski tekstowe z kodem
Przyciski tekstowe są bardzo łatwe do utworzenia, a jeśli sam napiszesz Kod, możesz je dostroić, aby wyglądały tak, jak lubisz.
Zacznijmy od znaczników HTML dla prostego przycisku tekstowego.
Aby połączyć ten przycisk ze stroną, Dodaj adres URL do elementu kotwicy, usuwając znak funta i zastępując go adresem URL, w ten sposób: href="http://example.com/page-to-link-to".
Tekst przycisku można zmienić, zastępując Kup Teraz w znacznikach przycisku z preferowaną kopią. Poniżej rozpiętość zawiera mniejszy tekst szczegółowy. Po prostu usuń cały tekst poza zakresem, jeśli nie chcesz wyświetlać tekstu szczegółowego.
Następnie musimy dodać trochę CSS do stylu przycisku:
Aby zmienić wygląd każdego przycisku, po prostu edytuj CSS w punktach wskazanych w komentarzach. Powyższy kod CSS utworzy zielony przycisk z szarą ramką i zaokrąglonymi rogami, jak pokazano na powyższym obrazku.
Jak utworzyć przyciski ikon kół z kodem
Przyciski te są inspirowane przyciskami ikon w Google Analytics. Na szczęście są dość łatwe do stworzenia.
Po pierwsze, musimy dodać ikonę czcionki na naszej stronie internetowej. Możemy to zrobić na kilka różnych sposobów. Jeśli tworzysz przyciski w zwykłym dokumencie HTML, po prostu upuść ten link w dokumencie Głowa aby zaimportować czcionkę Awesome.
Z drugiej strony, jeśli dodajesz przyciski bezpośrednio do WordPress, a Twój motyw nie zawiera ikon Font Awesome, możesz je zapytać, instalując Enqueue Font Awesome CDN, darmową wtyczkę do WordPressa.
Teraz możemy napisać znaczniki, których użyjemy dla naszych przycisków ikon. Aby utworzyć cztery ikony na powyższym obrazku, użyjemy tego kodu:
Klasa fa fa-kąt-lewy zastosowany do pierwszego i element jest tym, co ładuje ikonę. W ten sposób ikony są ładowane za pomocą Font Awesome i możesz zobaczyć pełną listę ikon na stronie Font Awesome.
Ten kod może być używany do generowania przycisków zawierających dowolną ikonę Font Awesome. Na przykład, aby utworzyć ikonę Facebooka, użyjesz następującego kodu:
Na koniec stosujemy CSS, aby zmienić nasze znaczniki w przyciski:
Jeśli chcesz użyć tego kodu na własnej stronie, komentarze w powyższym CSS pomogą Ci dostroić wygląd przycisków. Zauważ, że możesz zmienić wyrównanie ikon z jednej ikony do drugiej. Aby to zrobić, musisz dodać odpowiednią klasę do ikony, jak pokazano w znacznikach HTML i dostosować wypełnienie zastosowane do ikony za pomocą ostatniej sekcji CSS.
Aby wyśrodkować ikonę, nie dodawaj żadnej z klas poprzedzonych prefiksem rusz się.-.
Jak tworzyć kwadratowe przyciski z tekstem i ikonami
Z CSS już na miejscu z przycisków ikona i tekst, tworzenie przycisków, które łączą zarówno tekst i ikony jest proste. Wszystko, co musimy zrobić, to dodać ikonę znacznika naszego przycisku tekstowego, w ten sposób:
Jak widać, użyliśmy nowej ikony i ponownie użyliśmy klasy ze stylizacji przycisku ikony, przesuń-w lewo, aby utworzyć odstęp między ikoną a pobliskim tekstem.
Dodawanie przycisków do WordPressa
Istnieją dwa kroki, aby dodać przyciski do witryny WordPress. Najpierw musisz załadować CSS. Po drugie, dodajesz znaczniki na poście lub stronie, na której ma się pojawić przycisk.
Masz kilka opcji dodawania CSS do swojej witryny.
- Możesz użyć motywu podrzędnego i dodać CSS do motywu podrzędnego styl.css plik.
- Teraz, gdy WordPress 4.7 się rozwinął, możesz dodać CSS do Dodatkowe CSS sekcja WordPress customizer.
- Możesz użyć niestandardowej wtyczki CSS.
Wniosek
Kodowanie przycisków dla witryny WordPress jest dość proste i daje możliwość wypróbowania różnych kolorów, kopiowania przycisków, ikon i wzorów, aby zmaksymalizować skuteczność elementów interfejsu użytkownika i wezwań do działania.
Tagi:
