Jak zaprojektować menu strony internetowej
Opcje projektowania menu, dostosowywanie, wskazówki i przykłady
Poznaj 7 projektów menu witryny, dowiedz się, jak je dostosować i jak z nich korzystać.
Niniejszy przewodnik skupia się na projekcie menu - jak ono wygląda i jak działa. Jeśli chcesz dowiedzieć się, jak zaprojektować menu witryny, wyświetlić je na każdej stronie witryny lub utworzyć menu nawigacyjne dla określonej strony internetowej, zalecamy przeczytanie innego przewodnika:
Menu nawigacyjne to lista linków prowadzących do różnych stron witryny lub określonych sekcji w ramach danej strony internetowej. Pomaga odwiedzającym witrynę poruszać się między stronami witryny lub różnymi sekcjami określonej strony.
Ogólne wskazówki
>
Menu powinno pomagać odwiedzającym witrynę w szybkim i łatwym znajdowaniu informacji
>
Menu powinno być zwięzłe
>
Ograniczenie liczby pozycji menu do minimum
>
Dodaj nie więcej niż pięć pozycji menu do paska nawigacji.
>
Pozycje menu nie mogą być dłuższe niż jedno słowo
>
Najlepiej, jeśli to słowo jest krótkie
>
Nie należy przesadnie projektować paska nawigacyjnego menu, ponieważ nie powinien on odwracać uwagi użytkownika od treści witryny.
Przykłady dobrych projektów menu
OPCJE PROJEKTOWANIA MENU
Przezroczyste menu statyczne na okładce
Jak to wygląda:
Takie menu jest przypięte na górze strony, aby nie odwracać uwagi odwiedzających witrynę od treści, i mogą je łatwo znaleźć w razie potrzeby, ponieważ jest przymocowane w określonym miejscu na stronie.
Takie menu jest przypięte na górze strony, aby nie odwracać uwagi odwiedzających witrynę od treści, i mogą je łatwo znaleźć w razie potrzeby, ponieważ jest przymocowane w określonym miejscu na stronie.
Jak skonfigurować:
Dodaj blok ME301 do strony i zastosuj następujące ustawienia:
Ustawienia główne → Zachowanie pozycji menu: Bezwzględne.
Tło menu → Krycie tła menu: 0%.
Dodaj blok ME301 do strony i zastosuj następujące ustawienia:
Ustawienia główne → Zachowanie pozycji menu: Bezwzględne.
Tło menu → Krycie tła menu: 0%.
Kliknij tutaj, aby wyświetlić przykład przezroczystego statycznego menu na stronie internetowej
OPCJE PROJEKTOWANIA MENU
Menu stałe
Jak to wygląda:
Takie menu jest zawsze widoczne na stronie i można łatwo uzyskać do niego dostęp z dowolnego miejsca na stronie. Zwykle ma przezroczyste tło u góry strony (na okładce), które staje się nieprzezroczyste po przewinięciu.
Takie menu jest zawsze widoczne na stronie i można łatwo uzyskać do niego dostęp z dowolnego miejsca na stronie. Zwykle ma przezroczyste tło u góry strony (na okładce), które staje się nieprzezroczyste po przewinięciu.
Jak skonfigurować:
Dodaj blok ME301 do strony i zastosuj następujące ustawienia:
Ustawienia główne → Zachowanie pozycji menu: Fixed on scroll.
Tło menu → Kolor tła menu. Wybierzkolor.
Tło menu→ Kry cie tła menu: 0%.
Tło menu → Krycie tła menu przy przewijaniu: 80%.
Dodaj blok ME301 do strony i zastosuj następujące ustawienia:
Ustawienia główne → Zachowanie pozycji menu: Fixed on scroll.
Tło menu → Kolor tła menu. Wybierzkolor.
Tło menu→ Kry cie tła menu: 0%.
Tło menu → Krycie tła menu przy przewijaniu: 80%.
Kliknij tutaj, aby wyświetlić przykład stałego menu na stronie internetowej
OPCJE PROJEKTOWANIA MENU
Menu zamocowane na górze strony,
Menu pojawiające się przy przewijaniu
Menu pojawiające się przy przewijaniu
Jak to wygląda:
To menu jest podobne do opisanego powyżej. To, co je wyróżnia, to kolejne menu pojawiające się po przewinięciu i zawierające jeszcze więcej elementów. Na przykład górne menu nawigacyjne zawiera logo, kilka pozycji menu prowadzących do różnych stron witryny i kilka linków do mediów społecznościowych. Gdy użytkownik przewija stronę, pojawia się kolejny pasek menu, zawierający logo, wezwanie do działania i przycisk oddzwaniania.
To menu jest podobne do opisanego powyżej. To, co je wyróżnia, to kolejne menu pojawiające się po przewinięciu i zawierające jeszcze więcej elementów. Na przykład górne menu nawigacyjne zawiera logo, kilka pozycji menu prowadzących do różnych stron witryny i kilka linków do mediów społecznościowych. Gdy użytkownik przewija stronę, pojawia się kolejny pasek menu, zawierający logo, wezwanie do działania i przycisk oddzwaniania.
Jak to skonfigurować:
Dodaj blok ME301 do strony i zastosuj następujące ustawienia:
Menu One (znajdujące się na górze strony)
Ustawienia główne → Zachowanie pozycji menu: Bezwzględne.
Tło menu → Krycie tła menu: 0%.
Menu drugie (pojawiające się przy przewijaniu)
Ustawienia główne → Zachowanie pozycji menu: Fixed on scroll.
Ustawienia główne → Reveal menu when the page is scrolled down w pikselach: 600px.
Tło menu → Kolor tła menu. Wybierz kolor.
Tło menu → Krycie tła menu: 70%.
Dodaj blok ME301 do strony i zastosuj następujące ustawienia:
Menu One (znajdujące się na górze strony)
Ustawienia główne → Zachowanie pozycji menu: Bezwzględne.
Tło menu → Krycie tła menu: 0%.
Menu drugie (pojawiające się przy przewijaniu)
Ustawienia główne → Zachowanie pozycji menu: Fixed on scroll.
Ustawienia główne → Reveal menu when the page is scrolled down w pikselach: 600px.
Tło menu → Kolor tła menu. Wybierz kolor.
Tło menu → Krycie tła menu: 70%.
Kliknij tutaj, aby wyświetlić przykłady tych menu na stronie internetowej
OPCJE PROJEKTOWANIA MENU
Menu hamburgerów
Jak to wygląda:
Menu hamburgera to trzy poziome linie u góry ekranu. Kiedy użytkownik je kliknie, otwiera się, aby odsłonić menu nawigacyjne.
Do czego można go użyć:
Takie menu jest idealne dla Twojej witryny, jeśli chcesz, aby odwiedzający skupili się na treści bez rozpraszania się innymi elementami projektu. Menu hamburgera jest zwykle używane w mobilnej wersji strony internetowej. Możesz skonfigurować sposób wyświetlania menu na różnych urządzeniach.
Na przykład, możesz zdecydować się na zwykłe menu, które będzie wyświetlane tylko w wersji desktopowej witryny i sprawić, że menu hamburgera będzie widoczne wyłącznie na urządzeniach mobilnych.
Menu hamburgera to trzy poziome linie u góry ekranu. Kiedy użytkownik je kliknie, otwiera się, aby odsłonić menu nawigacyjne.
Do czego można go użyć:
Takie menu jest idealne dla Twojej witryny, jeśli chcesz, aby odwiedzający skupili się na treści bez rozpraszania się innymi elementami projektu. Menu hamburgera jest zwykle używane w mobilnej wersji strony internetowej. Możesz skonfigurować sposób wyświetlania menu na różnych urządzeniach.
Na przykład, możesz zdecydować się na zwykłe menu, które będzie wyświetlane tylko w wersji desktopowej witryny i sprawić, że menu hamburgera będzie widoczne wyłącznie na urządzeniach mobilnych.
Jak skonfigurować:
Dodaj blok ME401/402/403/404/405 do strony, ustaw zachowanie pozycji menu, kolor ikony menu i kolor tekstu pozycji menu.
Na przykład można zastosować następujące ustawienia:
Ustawienia główne → Zachowanie pozycji menu: Stałe przy przewijaniu.
Pozycja menu → Kolor. Wybierz czarny.
Tło menu → Kolor tła zwiniętego menu. Przezroczysty.
Tło menu → Kolor tła rozwiniętego menu . Wybierz biały.
Dodaj blok ME401/402/403/404/405 do strony, ustaw zachowanie pozycji menu, kolor ikony menu i kolor tekstu pozycji menu.
Na przykład można zastosować następujące ustawienia:
Ustawienia główne → Zachowanie pozycji menu: Stałe przy przewijaniu.
Pozycja menu → Kolor. Wybierz czarny.
Tło menu → Kolor tła zwiniętego menu. Przezroczysty.
Tło menu → Kolor tła rozwiniętego menu . Wybierz biały.
Kliknij tutaj, aby wyświetlić przykładowe menu hamburgera na stronie internetowej
OPCJE PROJEKTOWANIA MENU
Menu wielopoziomowe
Jak to wygląda:
Menu rozwijane pojawia się po kliknięciu pozycji menu.
Do czego można go używać:
Duże strony internetowe z zaawansowaną strukturą.
Menu rozwijane pojawia się po kliknięciu pozycji menu.
Do czego można go używać:
Duże strony internetowe z zaawansowaną strukturą.
Jak to skonfigurować:
Dodaj blok ME301 do strony, skonfiguruj menu podobne do opisanego powyżej, a następnie dodaj Elementy podrzędne w panelu Zawartość bloku.
1. Otwórz panel Content bloku → Menu items → Add subitems.
2. Kliknij ikonę plusa obok elementu, wprowadź tytuł podpunktu i przypisz łącze. Powtarzaj tę czynność do momentu dodania wszystkich niezbędnych podpozycji.
3. Otwórz panel Ustawienia bloku → Ustawienia podmenu. Zaznacz pole wyboru "Wyświetl ikonę menu drugiego poziomu".
Należy pamiętać, że sam element menu głównego nie będzie klikalny. Jeśli chcesz, aby był klikalny, utwórz zduplikowany element podrzędny w menu rozwijanym.
Dodaj blok ME301 do strony, skonfiguruj menu podobne do opisanego powyżej, a następnie dodaj Elementy podrzędne w panelu Zawartość bloku.
1. Otwórz panel Content bloku → Menu items → Add subitems.
2. Kliknij ikonę plusa obok elementu, wprowadź tytuł podpunktu i przypisz łącze. Powtarzaj tę czynność do momentu dodania wszystkich niezbędnych podpozycji.
3. Otwórz panel Ustawienia bloku → Ustawienia podmenu. Zaznacz pole wyboru "Wyświetl ikonę menu drugiego poziomu".
Należy pamiętać, że sam element menu głównego nie będzie klikalny. Jeśli chcesz, aby był klikalny, utwórz zduplikowany element podrzędny w menu rozwijanym.
Kliknij tutaj, aby wyświetlić przykład wielopoziomowego menu na stronie internetowej
OPCJE PROJEKTOWANIA MENU
Zakładki
Jak to wygląda:
Aktywna zakładka umożliwia użytkownikom przeglądanie powiązanych z nią treści bez opuszczania strony internetowej.
Do czego można jej użyć:
Zakładki umożliwiają wyświetlanie kilku kategorii tego samego typu treści, takich jak różne kategorie prac w portfolio.
Aktywna zakładka umożliwia użytkownikom przeglądanie powiązanych z nią treści bez opuszczania strony internetowej.
Do czego można jej użyć:
Zakładki umożliwiają wyświetlanie kilku kategorii tego samego typu treści, takich jak różne kategorie prac w portfolio.
Jak to skonfigurować:
Dodaj blok ME602 lub ME603 do strony. Bloki te można wykorzystać do tworzenia zakładek i wyświetlania treści, gdy użytkownik kliknie zakładkę na tej samej stronie. Poniżej należy dodać bloki w sekwencji, która zmieni się, gdy użytkownik kliknie określoną zakładkę.
Jak to działa:
1. Dodaj tytuły zakładek w panelu Content bloku ME602 lub ME603.
2. Dodaj identyfikatory bloków, które powinny być widoczne po kliknięciu zakładki (oddziel je przecinkiem, bez spacji).
Uwaga: Możesz skopiować identyfikator bloku w panelu Settings bloku - przewiń w dół do dołu panelu, aby go znaleźć.
Dodaj blok ME602 lub ME603 do strony. Bloki te można wykorzystać do tworzenia zakładek i wyświetlania treści, gdy użytkownik kliknie zakładkę na tej samej stronie. Poniżej należy dodać bloki w sekwencji, która zmieni się, gdy użytkownik kliknie określoną zakładkę.
Jak to działa:
1. Dodaj tytuły zakładek w panelu Content bloku ME602 lub ME603.
2. Dodaj identyfikatory bloków, które powinny być widoczne po kliknięciu zakładki (oddziel je przecinkiem, bez spacji).
Uwaga: Możesz skopiować identyfikator bloku w panelu Settings bloku - przewiń w dół do dołu panelu, aby go znaleźć.
Kliknij tutaj, aby wyświetlić przykład tego menu na stronie internetowej
OPCJE PROJEKTOWANIA MENU
Menu z koszykiem, wyszukiwaniem i ulubionymi
Jak to wygląda:
Wyświetla przedmioty w koszyku, przedmioty dodane do ulubionych oraz widżet wyszukiwania w menu w pobliżu sekcji nawigacji.
Do czego można go używać:
Menu jest przydatne dla Katalog produktów do zwięzłego wyświetlania koszyka, widżetu wyszukiwania w witrynie i Ulubionych.
Wyświetla przedmioty w koszyku, przedmioty dodane do ulubionych oraz widżet wyszukiwania w menu w pobliżu sekcji nawigacji.
Do czego można go używać:
Menu jest przydatne dla Katalog produktów do zwięzłego wyświetlania koszyka, widżetu wyszukiwania w witrynie i Ulubionych.
Jak to skonfigurować:
Dodaj blok ME401 do strony → Zakładka Zawartość → Koszyk, Wyszukiwanie i Ulubione → zaznacz pola wyboru, aby wyświetlić potrzebne ikony w menu.
Zaznacz pole wyboru "Nie pokazuj natywnych przycisków widżetów", aby wyświetlać ikony tylko w menu.
Dodaj blok ME401 do strony → Zakładka Zawartość → Koszyk, Wyszukiwanie i Ulubione → zaznacz pola wyboru, aby wyświetlić potrzebne ikony w menu.
Zaznacz pole wyboru "Nie pokazuj natywnych przycisków widżetów", aby wyświetlać ikony tylko w menu.
Następnie dodaj blok koszyka na zakupy ST100, blok widżetu wyszukiwania T985 i blok ulubionych ST110 i opublikuj stronę.
Gotowe.
Ta funkcja działa dla wszystkich bloków menu oznaczonych numerami ME4XX.
Ta funkcja działa dla wszystkich bloków menu oznaczonych numerami ME4XX.
Kliknij tutaj, aby wyświetlić przykład tego menu na stronie internetowej
Opcje wyświetlania:
Jeśli chcesz wyświetlać w menu zarówno ikony, jak i przycisk widżetu Ulubione, usuń zaznaczenie opcji "Nie pokazuj natywnych przycisków widżetu" na karcie Zawartość bloku ME401.
Jeśli chcesz wyświetlać w menu zarówno ikony, jak i przycisk widżetu Ulubione, usuń zaznaczenie opcji "Nie pokazuj natywnych przycisków widżetu" na karcie Zawartość bloku ME401.
Możesz ukryć ikonę widżetu dla bloków ST100 Koszyk i T985 Wyszukiwanie - w zakładce "Więcej ustawień" w ustawieniach bloku zaznacz pole wyboru "Nie pokazuj przycisku widżetu". Opublikuj stronę.
Gotowe! W menu wyświetlane są trzy ikony, a dla Ulubionych dostępny jest osobny widżet. W podobny sposób można skonfigurować widoczność koszyka lub widżetu wyszukiwania.
Kliknij tutaj, aby wyświetlić przykład tego menu na stronie internetowej
Oto kilka kluczowych opcji projektowania menu. Jeśli masz nowe pomysły i chcesz się nimi podzielić, wyślij link do swojej strony internetowej na adres team@tilda.cc z "Projekt menu" w temacie. Dziękujemy!
Powodzenia w eksperymentach projektowych!
Powodzenia w eksperymentach projektowych!
Strona internetowa, o której marzyłeś, zaczyna się właśnie tutaj
