Projektowanie interfejsów użytkownika stawia przed projektantami wiele wyzwań, nie wszystkie z nich da się w przystępny sposób rozwiązać. Jednym z takich wyzwań jest stworzenie interaktywnego menu w formie listy rozwijanej. Jedno z najpopularniejszych typów menu, z którym najczęściej spotykamy się, jako użytkownicy Internetu, na stronach www. Adobe XD, czyli program do prototypowania stron internetowych oraz aplikacji mobilnych oferuje odpowiednie narzędzia, dzięki którym możliwe jest stworzenie podglądu docelowego wyglądu witryny. Stworzenie menu, które symulowałoby zachowanie listy rozwijanej niestety nie stanowi odrębnego narzędzia w tym programie, jednak możliwe jest zaprojektowanie tego typu nawigacji. W dzisiejszym artykule przedstawię państwu jak tego dokonać. Zapraszam do lektury.
Rozwijalne menu w Adobe XD
Dlaczego nie można wykonać go prosty sposób, tak jak każde inne elementy strony internetowej w programie Adobe XD? Program ten nie oferuje możliwości stworzenia wielokrotnych efektów „hover”, czyli najechania na dany element. Wiemy, że menu w typie „drop down” może składać się z kilku poziomów ze względu na kategorie, np. Motoryzacja -> Samochody Osobowe -> Marka: Peugeot -> Model: 207. W przypadku elementów znajdujących się w Adobe XD, zatrzymalibyśmy się na poziomie kategorii „Samochody Osobowe”. Jest jednak dobra wiadomość. Istnieje możliwość zasymulowania działania listy rozwijanej poprzez stworzenie kilku widoków danej strony internetowej. W poniższych akapitach znajdziecie państwo konkretne informacje jak to zrobić.
Projektowanie należy zacząć od stworzenia nowego dokumentu. Dla aplikacji webowych niech to będzie rozmiar Full HD, czyli 1920 px x 1080 px. Następnie rozpocznijmy projektowanie „headera”, czyli nagłówka strony. Jest to miejsce, w którym znajduje się logo, wyszukiwarka oraz menu strony. Jeżeli pragniesz się skupić wyłącznie na menu stwórz kilka głównych kategorii np. Strona główna, Blog, Kontakt, Oferta. Są to cztery podstrony, które zazwyczaj można spotkać na stronach internetowych. Gdy ukończycie dodawanie kategorii menu zadbajcie o to aby odległość między poszczególnymi elementami strony była taka sama, czyli np. 50 px. Dodaj hover effect dla każdego z elementów menu. Może to być zwiększenie przeźroczystości, zmiana koloru – cokolwiek.
W tym momencie należy rozpocząć zaprojektowanie listy rozwijanej. Tworzymy nowy obszar roboczy składający się z tych samych elementów. Zaznaczamy pierwszy obszar roboczy jako miejsce od którego należy rozpocząć symulacje strony (ikona domku). Tworzymy łącza między pierwszym elementem menu oraz nowopowstałym obszarem roboczym. Ma to stanowić symulacje działania, podczas wyboru danego elementu menu. Następnie należy dodać elementy listy rozwijanej. Dla przykładu, jeżeli chcemy stworzyć stronę internetową dla zakładu mechanicznego, w ofercie może znajdować się wymiana filtrów oleju, naprawa sprzęgła, wymiana sworzni wahacza (mamy duże pole manewru, zobacz przykład na screenshocie). Każde z elementów znajdujących się w liście rozwijanej powinno być zamknięte w komponencie, w którym znajdują się elementy takie jak tekst elementu, ikona, oraz jeżeli ktoś projektuje kolejne poziomy np. strzałka w prawo. Gdy już będziemy mieli gotowe elementy listy rozwijanej, możemy również zadbać o następny poziom menu (w tym wypadku już poziom 3, 4 itd.). Tworzymy je tak jak poprzednie poziomy, z uwzględnieniem efektu domyślnego oraz efektu hover. Dziękuję za przeczytanie powyższego artykułu. Jeżeli chcesz się bezpośrednio z nami skontaktować, zapraszamy! Skorzystaj z naszej skrzynki pocztowej, telefonu lub formularza kontaktowego znajdującego się na stronie KONTAKT.
