Typowe elementy używane w projekcie przycisku interfejsu
Przyciski i elementy nawigacyjne są prawdopodobnie najczęściej używanymi obiektami interfejsu zarówno w wersji na komputery stacjonarne, jak i na urządzenia przenośne. Łączą interfejs, umożliwiając użytkownikom przejście z punktu A do punktu B jednym kliknięciem.
Co najważniejsze, przycisk musi dobrze wyglądać. Musi krzyczeć "Kliknij mnie!", Bo inaczej po prostu nie będzie tak efektywny jak powinien. Przyciski są zwykle używane do "" wyszukiwania "," przesyłania "," wysyłania "," kupowania "i" przesyłania ".
W tym artykule przyjrzymy się siedmiu typowym elementom przycisków w nowoczesnym projekcie interfejsu: tekstury, wzory, 3-D, piksele idealne uderzenia, wcięte tła, poświaty i światła.
Znajdziesz 35 fantastycznych przykładów tych technik, a także kilka mini-tutoriali do Photoshopa.
1. Tekstury
Korzystanie z tekstur to świetny sposób na dodanie do przycisków głębszej głębi i sprawienie, że wyróżnią się one nieco od reszty interfejsu (i ostatecznie sprawią, że będą bardziej klikalne). Poniżej znajduje się kilka świetnych przykładów tekstur w przyciskach.
ShelfLuv wykorzystuje całą teksturę, aby nadać wymiar swojemu interfejsowi, szczególnie w obszarach przycisków i pól tekstowych.
W całym tym interfejsie używana jest tekstura, ale jest ona cięższa w obszarze przycisku "Prześlij", dzięki czemu jest punktem centralnym.
Tekstura jest tu dobrze połączona ze ściętym przyciskiem, dzięki czemu wygląda naprawdę.
Faktura nie jest faktycznie używana na tym przycisku interfejsu, ale pojawia się w tle, dzięki czemu przycisk może się wyróżniać.
Tworzenie teksturowanego przycisku
Utwórz proste tło za pomocą narzędzia Kształt i dodając szum (Filtr → Hałas → Dodaj szum).
Ponownie wybierz narzędzie Kształt i narysuj prostokąt, upewniając się, że jego górna część jest ukryta poza krawędzią płótna.
Zmień kolor kształtu na niebieski. Użyłem # 00A3D9.
Powiel warstwę Shape i zmień jej rozmiar w tej samej pozycji. Zmień kolor na nieco ciemniejszy niebieski.
Duplikuj warstwę jeszcze raz. Ustaw warstwę pod dwiema ostatnimi warstwami Shape i zmień kolor na jasnoszary.
Zrób zdjęcie lub pobierz papierową teksturę (użyłem jednej z nich Lost & Takeed ). Przejdź do Plik → Umieść i zlokalizuj plik, aby umieścić go w dokumencie. Zmień rozmiar i umieść go nad niebieskimi kształtami.
Usuń nadmiar tekstury za pomocą narzędzia Zaznaczanie i zmień tryb mieszania tekstur. Eksperymentuj z różnymi trybami, ponieważ różne tekstury dają różne wyniki. Możesz także nieco obniżyć poziomy krycia.
Otwórz okno Styl warstwy, aby uzyskać ciemniejszy niebieski kształt, i zastosuj następujący styl cienia, aby dodać subtelny biały cień.
Teraz zastosuj obrys do kształtu, korzystając z poniższych ustawień.
Na koniec dodaj cień wewnętrzny do kształtu, aby nadać mu dodatkowy wymiar.
Dodaj tekst do przycisku i gotowe!
2. Wzory
Wzory to kolejny świetny sposób na dodanie do przycisków interfejsu nieco zainteresowania i głębi. Poniżej kilka przykładów wzorów w przyciskach, wszystkie subtelne, ale skuteczne.
Odcięcie po przekątnej jest używane po lewej stronie przycisku, aby oddzielić ikonę od typu.
W tym przycisku zastosowano przekątną linię, która pasuje do stylu vintage, dodając wymiar do projektu.
To jest moje ulubione użycie wzorca w tych przykładach. Chociaż nie są używane w samych przyciskach, wzór w szarym nagłówku dodaje wymiar całemu projektowi i ostatecznie pomaga wyróżnić pomarańczowe przyciski.
Tworzenie wzorzystego przycisku wstążki
Po utworzeniu teksturowanego tła za pomocą techniki z poprzedniego mini-samouczka, narysuj prostokąt za pomocą narzędzia Kształt i wypełnij go niebiesko-zielonym. Użyłem koloru # 008B8D.
Narysuj inny kształt o tej samej wysokości i kolorze.
Za pomocą narzędzia Lasso utwórz trójkąt, jak pokazano poniżej. Ustaw go nad krawędzią nowego kształtu i naciśnij klawisz "Usuń", aby usunąć obszar, którego nie potrzebujemy.
Powiel kształt i przejdź do Edycja → Przekształć → Odwróć w poziomie, aby skierować go w przeciwnym kierunku.
Ustaw dwa kształty pod większym kształtem, jak pokazano poniżej.
Kliknij prawym przyciskiem myszy jeden z twoich kształtów i otwórz okno Opcje mieszania / Styl warstwy. Zastosuj nakładkę gradientu podobną do tej przedstawionej poniżej. Możesz także dodać subtelny cień. Po zakończeniu kliknij prawym przyciskiem myszy warstwę i wybierz "Kopiuj styl warstwy". Wybierz inny kształt banera. Kliknij prawym przyciskiem myszy i wybierz "Wklej styl warstwy". Otwórz okno Styl warstwy i zmień kąt nachylenia gradientu z 180 ° na 0 °.
Za pomocą narzędzia Lasso utwórz zaznaczenie podobne do tego, które widać poniżej, aby dopasować dwa narożniki naszych kształtów. Wypełnij go jeszcze ciemniejszym kolorem.
Zduplikuj warstwę, odwróć ją w poziomie i umieść na drugiej stronie.
Utwórz wzór linii. Ewentualnie możesz użyć tego, który zrobiłem poniżej.
Wklej wzór na cały baner. Przytrzymując Command + Shift, kliknij miniaturki warstw we wszystkich warstwach banerów. To wybierze je wszystkie. Kliknij prawym przyciskiem myszy i wybierz "Wybierz odwrotność". Po zaznaczeniu warstwy wzorów linii naciśnij klawisz "Usuń", aby usunąć obszary, których nie potrzebujesz.
Zmień tryb mieszania warstwy wzoru na "Pomnóż", aby ukryć biel od warstwy. Teraz zmniejsz krycie do wartości od 25% do 75%. Eksperyment na najlepszy wynik.
Za pomocą narzędzia Kształt utwórz kilka linii podobnych do poniższych.
Usuń obszary, które znajdują się na tle obrazu.
Eksperymentuj z trybem mieszania dla każdej linii. Oto wynik:
3. 3-D
Trójwymiarowe przyciski są świetne, ponieważ dzięki nim przyciski wyglądają znacznie bardziej realistycznie. Są prawie niemożliwe do kliknięcia! Jedyną wadą jest to, że efekt jest dość żartobliwy i nie pasuje do wszystkich stron internetowych (takich jak korporacyjne). Poniżej znajduje się wybór pięknych przycisków 3-D.
Cienie i 1-pikselowe linie podświetlają określone obszary i sprawiają, że przycisk wygląda 3-D. To i kilka dobrych efektów CSS spowodowałoby użycie super-interaktywnego przycisku.
Nasz drugi element (wzory) jest również używany w tym projekcie, aby dodać wymiar do już bardzo trójwymiarowego przycisku.
Ten przycisk przyjmuje nieco inne podejście, polegając tylko na gradientach w celu uzyskania trójwymiarowego wyglądu.
Ten zestaw pokazuje różne wysokości, aby wskazać, czy przycisk znajduje się w stanie normalnym, aktywnym, czy aktywnym. Linie i tekstura nadają przyciskom bardziej naturalny wygląd.
Podobnie jak kilka innych przykładów w tej sekcji, kombinacja gradientów i obrysów sprawia, że te przyciski wyglądają 3-D.
Ten przycisk wygląda 3-D ze względu na jego "out of the box" projekt, owinięty wokół interfejsu użytkownika.
Tworzenie przycisku 3-D
Zacznij od narysowania kształtu narzędziem Rectangle o promieniu naroża 7 pikseli. Otwórz okno Styl warstwy i zastosuj nakładkę gradientu od ciemnej czerwieni do jasnoczerwonej. Użyj jeszcze jaśniejszej czerwieni na samym końcu paska gradientu, aby podświetlić górną część tego, co będzie naszym przyciskiem 3-D.
Teraz zastosuj obrys do przycisku. Zmień typ wypełnienia na "Gradient", aby zmienić kolor górnej i dolnej części obrysu. Przejdź od jasnej do ciemnoczerwonej (przeciwieństwo nakładki gradientowej).
Powinno to wyglądać jak na razie:
Duplikuj warstwę Shape. Nałóż oryginalną warstwę w dół o około 10 pikseli.
Zastosuj cień do oryginalnej warstwy, korzystając z ustawień widocznych na poniższym zrzucie ekranu.
Ponadto przyciemnij nakładkę gradientu, sprawiając, że każdy kolor w pasku gradientu będzie trochę ciemniejszy.
Powinieneś mieć coś, co wygląda tak:
Wybierz narzędzie Tekst i wpisz coś na przycisku. Otwórz okno Styl warstwy i zastosuj nakładkę gradientu podobną do poniższej:
Zastosuj cień wewnętrzny, korzystając z następujących ustawień:
Zastosuj cień przy użyciu tych ustawień:
I skończyliśmy! Powinieneś skończyć z czymś takim:
4. Doskonałe uderzenia pikseli
Sztuka doskonalenia pikseli stała się integralną częścią wszystkich aspektów projektowania interfejsu użytkownika, a nie tylko przycisków. Linie o jednym pikselu (lub obrysy) zapewniają głębię przycisków i nieco trójwymiarowy wygląd. Sprawiają one, że przyciski wyglądają na wcięte. Oto kilka genialnych przykładów tego.
Możesz wyraźnie zobaczyć, że biała (nałożona) linia 1-pikselowa jest używana jako podkreślenie u góry czerwonego przycisku, z ciemniejszą linią na dole. To sprawia, że wygląda nieco trójwymiarowo i dodaje wiele szczegółów do strony.
Typografia tego przycisku ma wewnętrzny cień, dzięki czemu przycisk wygląda tak, jakby znajdował się nad interfejsem.
Te przyciski tylko CSS3 (absolutnie nie ma Photoshopa) mają 1-pikselowe obrysy, które sprawiają, że wyróżniają się z tła i pojawiają się wcięte po kliknięciu.
Kolejny przykład 1-pikselowego obrysu światła u góry przycisku, który działa jako podświetlenie.
Ten zielony przycisk pokazuje nieco inne podejście, z wewnętrznym blaskiem działającym jako podświetlenie na górze przycisku. Uderzenie na zewnątrz tworzy bardzo cienki cień.
Kolejny przycisk łączący wyżej wymienione techniki.
Ten podstawowy przycisk ma cienki ruch i delikatny cień, dzięki czemu wyróżnia się prostym designem.
Ten przycisk ma subtelny blask wewnętrzny, dzięki któremu wyróżnia się z tła. Jego aktywny stan ma obniżoną nieprzezroczystość, co stanowi lewę.
Zapomnij o przycisku: ten cały projekt jest idealny pod względem pikseli, z nowoczesną typografią i liniami tworzącymi piękny interfejs użytkownika.
Utwórz przycisk Perfect Pixel
Wybierz narzędzie Kształt prostokąta (znajdujący się na pasku narzędzi u góry Photoshopa po wybraniu narzędzia Kształt) i nadaj mu promień naroża 5 pikseli. Narysuj czarny prostokąt podobny do poniższego.
Otwórz okno Styl warstwy i zastosuj nakładkę gradientu do kształtu. Użyłem ciemnej zieleni do lekko jaśniejszej zieleni.
Nadaj kształt gradientowemu skokowi, przechodząc od zielonego do coraz ciemniejszego zielonego.
Teraz nadaj kształtowi biały styl cienia, korzystając z ustawień przedstawionych poniżej.
A teraz cień, o rozmiarze 0 pikseli i kryciu zaledwie 5%.
Znajdź ikonę w Internecie (lub utwórz własną) i umieść ją w swoim dokumencie, przechodząc do Plik → Umieść, umieszczając go poprawnie. Zastosuj do niego nakładkę gradientu.
Daj cień wewnętrzny swojej ikony w odległości 1 piksela, a biały cień rzucaj o odległość 1 piksela. Dzięki temu ikona wygląda tak, jakby została wygrawerowana w przycisku.
Dodaj tekst do przycisku i zastosuj efekt cienia o niskiej przezroczystości w oknie Styl warstwy. Oto wynik:
5. Wcięte tła
Tło z wcięciem sprawia, że przycisk wygląda tak, jakby był w nim pochowany, dając głębię przycisku i wizualne zainteresowanie. Oto kilka świetnych przykładów tego.
To tło przycisku ma subtelny wewnętrzny cień, który sprawia, że wygląda na wcięty.
Odwrócone gradienty w tym tle powodują pojawienie się przycisków z wcięciem.
Połączenie pociągnięć i cieni daje głębsze wcięcia przycisków.
To tło przycisku ma kilka stylów, w tym gradient, cień wewnętrzny i cień.
To wcięte tło przycisku jest o wiele mniejsze niż to, co widzieliśmy, ale nadal stosuje te same techniki.
Po raz kolejny cień i cień wewnętrzny są używane do tworzenia wcięć.
6. Poświata
Blask jest dość trudną techniką do przeciągania w projektowaniu interfejsu i zwykle jest widoczny tylko w ciemnych interfejsach (chociaż zobaczymy jasny przykład poniżej). Te przykłady pokazują, w jaki sposób żar może być używany na różne sposoby.
Wewnątrz tego przycisku znajduje się poświata, co nadaje mu wszechstronny nastrój.
Blask jest sprytnie wykorzystywany do tego, aby typografia tego przycisku wyróżniała się na ciemnym tle. Blask sprawia, że paski ładowania wyglądają jak żywe.
Blaski są powszechnie używane w ciemnych interfejsach dla iPhone'a. Tutaj widzimy poświatę wokół typografii, gdy przycisk jest w stanie aktywnym.
Lekka i dość subtelna poświata nadaje temu przyciskowi dodatkowy impuls, który musi stać się piękny.
Tworzenie przycisku świecącego światła
Ponownie użyj narzędzia Kształt prostokąta, narysuj prostokąt, tym razem o promieniu naroża 3 pikseli. Zastosuj nakładkę gradientu podobną do poniższej. Nadaj środkowym kolorom pozycję "49" i "50".
Zastosuj następujący cień wewnętrzny.
Zastosuj następujący cień.
Zastosuj następujący blask zewnętrzny.
Dodaj trochę typografii do przycisku. Powinieneś skończyć z ładnym, czystym i niewiarygodnie łatwym do wytworzenia rezultatem:
7. Najważniejsze wydarzenia
Najważniejsze cechy zapewniają głębię przycisków, zainteresowanie wizualne i klikalność. Poniższe przykłady to potwierdzają.
W górnej połowie tego przycisku zastosowano prosty biały kształt o niskiej nieprzezroczystości, aby nadać mu nieco głębi i pomóc w dopasowaniu do czerwonego i szarego interfejsu.
Podobnie jak w przypadku wielu innych przycisków w tym poście, 1-pikselowy pociąg podkreśla to.
Jasne do ciemnego do lekkich gradientów służą jako podświetlenie i cień dla tych przycisków.
Ten post został napisany wyłącznie dla WDD przez Callum Chapman , człowiek z tyłu Sklep Picmix i Blog Circlebox .
Które projekty przycisków używasz najczęściej i dlaczego? Czy zauważyłeś wyższy współczynnik klikalności w przypadku niektórych projektów? Udostępnij poniżej ...