Ponieważ user experience dominuje w większości naszych dyskusji na temat projektowania stron internetowych, ważne jest, abyśmy przyjrzeli się temu, co nazywamy menu “hamburger”.
Na wypadek, gdybyś to przegapił, poruszyłem już sprawność menu hamburgerowego. Omówiłem najlepsze sposoby deklowania strony internetowej za pomocą szeregu minimalizujących sztuczek i narzędzi. Zapoznałem się również z najlepszymi praktykami menu nawigacyjnego, które obejmowały rozumowanie, dlaczego menu hamburgerowe może być odpowiednie dla projektu Twojej witryny WordPress.
Teraz, gdy już ustaliliśmy, jak potężnym elementem projektu może być Menu hamburgerowe dla stron internetowych, skupmy się na tym, co jeszcze możesz zrobić, aby zwiększyć jego obecność poprzez animację.
Hamburger menu pomaga nam osiągnąć wiele celów:
- Elegancki i minimalistyczny design
- Nacisk na ważniejsze treści lub elementy nawigacyjne
- Uproszczona komunikacja między witryną a odwiedzającym
- Spójność projektu mobilnego i desktopowego
Ponadto menu hamburgerowe stało się rozpoznawalnym symbolem dla wielu użytkowników. To teraz ułatwia pracę jako projektant / programista. Schowaj nawigację za symbolem menu, a następnie wykorzystaj kreatywną energię na wszystko otoczenie nawigacja-w tym animacja samego menu.
Animacja – bez względu na to, jak mała jest-pomaga przyciągnąć uwagę odwiedzających do menu, które może być proste ze swojej natury, ale wciąż warte uwagi. A zabezpieczając ich uwagę na nawigacji, możesz skuteczniej kierować odwiedzających przez lejek konwersji.
Myślisz, że animacja może nie pasować do twojego menu hamburgerowego, a może po prostu nie jesteś pewien, jak może to coś zmienić? Zobacz przykładowe animacje hamburgerów w akcji:
- MoreSleep
- DesignCouch
- The St. Louis Browns
- Masi Tupungato
- Threadslike
- Podręcznik Pracownika Zaarly
- Rokkan
- Maecia
- DeModern
- Newton Running
Uwaga: Ponieważ ten post został pierwotnie opublikowany, niektóre z poniższych witryn zaktualizowały swój wygląd strony internetowej i mogą nie używać menu hamburgera lub sama strona już nie istnieje. Zapoznaj się z animowanymi obrazami, aby zapoznać się z przykładami menu hamburgera wymienionymi w treści.
1. MoreSleep
Dla każdego, kto lubi pomysł korzystania z menu hamburgerowego, ale jest trochę zdenerwowany odejściem od standardowej nawigacji, którą wielu użytkowników zna, sprawdź tę Na MoreSleep. Nawigacja pozostaje starannie schowana wewnątrz symbolu hamburgera. Gdy ktoś kliknie, ten standardowy układ nawigacji spada na miejsce, nadając tej stronie fajną animację, trzymając się bardziej tradycyjnej stylistyki.
2. Design Kanapa
Ten projekt menu hamburgerowego bawi się tradycyjnymi układami nawigacyjnymi. Animacja na tym w Design Couch jest prosta i czysta, gdy oglądamy haprzycisk mburger zmienia się na “X”, podczas gdy nawigacja spada na miejsce. Po kolejnym kliknięciu przycisku nawigacja ukrywa się, a ” X ” wraca do trzech linii, które mówią nam, gdzie znajdują się pozycje menu.
3. The St. Louis Browns
Strona St. Louis Browns hamburger menu idealnie komponuje się z designem.
Ta witryna o tematyce baseballowej dla St. Louis Browns wprowadza kreatywny obrót w menu hamburgerów, zamieniając standardowy symbol z trzema liniami na baseball obok słowa ” MENU.”Animacja dla tego jest sama w sobie, dość prosta: jednym kliknięciem baseballu na ekranie pojawia się półprzezroczysta nakładka, a menu nawigacyjne spada pionowo.
4. Masi Tupungato
Strona internetowa Masi Tupungato zawiera klasyczny projekt menu hamburgerowego.
Strona internetowa winnicy MASI Tupungato sprawia, że animacja jest prosta, czysta i wciągająca. Najedź kursorem na symbol menu hamburgera i zobacz, jak ikona się kręci. Kliknij symbol i obserwuj, jak zmienia się w “X”. najedź kursorem na każdą z opcji Strony i obserwuj, jak obok nich pojawiają się linie akcentu.
5. Threadslike
W argumencie za użyciem animacji i kolorów, które dobrze pasują do marki, Threadslike robi to z animowanym menu hamburgera. Animacja i wynikowe menu pełnoekranowe są podobne do tego, co zrobiła Winnica MASI Tupungato,ale ważne jest, aby zauważyć, jak dobrze efektowna nakładka biało-czarna łączy się z ogólną stylizacją tej witryny.
6. Podręcznik Pracownika Zaarly
Podręcznik pracownika Zaarly jest całkiem fajny. Cała strona poświęcona jest wprowadzaniu pracowników w Zaarly w wyjątkowy i kreatywny sposób. Ich wykorzystanie animowanego i kolorowego menu hamburgerowego tylko zwiększa urok poznawania kultury tej firmy.
7. Rokkan
Ponieważ strona internetowa Rokkan już świetnie wykorzystuje animację, ma sens tylko to, że dodaliby ją trochę do swojego menu hamburgerowego. W przeciwieństwie do wielu przykładów menu hamburgerowych, Rokkan umieszcza unikalny obrót niekoniecznie NA animacji nawigacji, ale w sposobie prezentacji strony i opcji najechania kursorem.
8. Maecia
Menu hamburgera na stronie Maecia zawiera siatkę kliknięć.
Menu hamburgerowe francuskiej agencji cyfrowej Maecia to rzecz piękna. To sprawia, że wiele rzeczy jest w porządku. Na początek, reaguje. Po drugie, animacja jest prosta i odzwierciedla inne rodzaje animacji, które znajdziesz na stronie. Wreszcie, zamiast polegać wyłącznie na małych ruchach, aby wskazać kursor strony, świetnie wykorzystali również kolor, który, jak sądzę, jest świetny dla zwiększenia zaangażowania.
9. DeModern
DeModern strona ma fajną asymetrycznie zaprojektowaną hamburger menu.
Oto kolejny przykład Europejskiej Agencji, DeModern, wprowadzającej do menu hamburgerów własną markę. Oprócz stworzenia czegoś, co początkowo wydaje się prostym, ale stylizowanym, wysuwanym menu, animacje przejścia strony odzwierciedlają tę samą stylizację, tworząc bardzo elegancki i przemyślany projekt.
10. Newton Running
Ponieważ strona internetowa Newton Running skupia się na butach do biegania, sensowne jest, że chcieliby mieć silny ruch w nawigacji, aby odzwierciedlić ten podstawowy motyw. To specjalne menu hamburgerowe tworzy prawie zupełnie inną stronę internetową dla ich nawigacji i działa pięknie.
Wrapping Up
Jak niedawno widzieliśmy w testach przeprowadzonych wokół umieszczenia logo, wszelkie zmiany, które odbiegają od oczekiwanych i potencjalnie zakłócają wrażenia użytkownika, mogą mieć szkodliwy wpływ na Twoją stronę internetową.
Jednak w każdym z powyższych przypadków menu hamburgerów nadal znajduje się w górnej części strony internetowej, w której użytkownik spodziewałby się ich znaleźć. Mimo to nadal ważne jest, aby test podziału A / B upewnił się, że menu hamburgerowe – a tym bardziej animowane – jest odpowiednie dla Twojej witryny. Niektóre badania sugerują, że menu hamburgerowe może być tak samo skuteczne jak standardowa nawigacja, o ile są połączone ze słowem “MENU”.
Hamburger menu może być świetnym sposobem na oczyszczenie witryny i kreatywne kierowanie ruchem za pośrednictwem ścieżki konwersji, ale nie kosztem doświadczenia użytkownika. Ponownie, to do ciebie, aby dowiedzieć się, co działa najlepiej dla użytkowników, więc umieścić w czasie, aby znaleźć to słodkie miejsce między lokalizacji menu, Ikony, sformułowania, i animacji.
Nota wydawcy: Ten post został zaktualizowany pod kątem dokładności i trafności. [Pierwotnie Opublikowany: Marzec 2017 / Zmieniony: Luty 2022]
Tagi:
