Tworzenie prototypu witryny internetowej w Axure: przewodnik krok po kroku od Skillbox

Spis treści:

• Definiowanie prototypu witryny
• Tworzenie prototypu witryny: przewodnik krok po kroku
• Rozpoczęcie nowego projektu w Axure RP
• Struktura siatki i rozmiary ekranu
• Kluczowe komponenty wymagane do utworzenia prototypu
• Tworzenie nagłówka witryny
• Kluczowe komponenty struktury witryny
• Formowanie Interakcje
• Analiza i eksport utworzonego prototypu
• Wnioski:

Aby opracować prototyp prostej strony internetowej, a następnie otworzyć ją w przeglądarce i omówić z klientem, należy zapoznać się z interfejsem programu i jego głównymi funkcjami. Ponadto ważne jest zrozumienie koncepcji prototypów i podstaw projektowania UX.

W tym zakresie Skillbox oferuje szkolenie w ramach programu projektowania UX, które obejmuje nie tylko podstawową wiedzę, ale także możliwość odbycia stażu w organizacjach partnerskich. Przyjrzyjmy się teraz podstawom tego kierunku.

Definicja prototypu witryny internetowej

Prototyp to starannie opracowany model witryny internetowej. Z jego pomocą można wygodnie zaplanować organizację stron i sekcji, określić rozmieszczenie elementów informacyjnych na każdej z nich oraz skoordynować wszystkie szczegóły z klientem.

Prototypy są zazwyczaj opracowywane w wersji czarno-białej, co pozwala skupić się na organizacji i rozmieszczeniu elementów treści, a nie na estetyce.

Podczas spotkania z klientem opracowywany jest wstępny plan witryny na papierze. Następnie tworzony jest interaktywny prototyp, który jest omawiany z zespołem. W trakcie procesu pojawiają się pytania, identyfikowane są błędy i nieścisłości, które można poprawić. Ta metoda sprzyja efektywnemu wykorzystaniu czasu i zasobów.

Tworzenie prototypu strony internetowej: Przewodnik krok po kroku

W materiale zatytułowanym „Szkicowanie: Jak narysować stronę internetową na papierze” opracowaliśmy koncepcję projektu strony dla firmy sprzedającej klocki konstrukcyjne.

Szkic to ogólny plan, który pomaga uporządkować informacje na stronie. Na podstawie tego planu opracowywany jest klikalny prototyp. Axure RP może służyć jako wygodna platforma do tworzenia takich prototypów. To narzędzie idealnie nadaje się do tworzenia złożonych układów stron internetowych i aplikacji mobilnych.

Jeśli chcesz dowiedzieć się, jak samodzielnie stworzyć prototyp strony internetowej, zacznij od nauki obsługi programu Axure. Zapoznaj się z interfejsem i kluczowymi funkcjami.

Rozpoczęcie nowego projektu w Axure RP

Przeanalizujmy proces prototypowania na przykładzie witryny internetowej firmy z blogiem. Kluczowymi elementami takiej witryny będą strona główna, sekcja bloga i poszczególne wpisy.

Aby rozpocząć nowy projekt, wybierz z menu Plik → Nowy. Zazwyczaj Axure automatycznie tworzy nowy projekt z trzema pustymi stronami. Zmieńmy ich nazwy, aby pasowały do ​​struktury naszej przyszłej witryny.

Aby zmienić nazwę strony, wystarczy kliknąć prawym przyciskiem myszy jej nazwę w oknie Strony i wybrać opcję Zmień nazwę.

Struktura siatki i ekran Rozmiary

Strony internetowe dzisiaj Strony internetowe są projektowane tak, aby obsługiwać różnorodne urządzenia, w tym smartfony, tablety, komputery i laptopy. Ponieważ każde z tych urządzeń ma inną rozdzielczość ekranu, projektanci często tworzą wiele wersji tej samej strony internetowej, dostosowanych do różnych rozmiarów wyświetlaczy.

Aby uprościć proces, opracujemy prototyp dla ekranów o szerokości 1140 pikseli i większej. Aby mieć pewność, że wszystkie elementy witryny wyglądają schludnie i harmonijnie, w procesie projektowania wykorzystamy siatkę udostępnioną przez framework CSS Bootstrap 4.

Aby ustawić wymaganą szerokość ekranu, skorzystamy z prowadnicy, którą można wyodrębnić z linijki znajdującej się po prawej stronie obszaru roboczego. Proces ten jest podobny do tego wykonywanego w programie Photoshop.

Aby zoptymalizować czas i uniknąć konieczności ręcznego ustawiania wszystkich linii pomocniczych dla układu, skorzystamy z funkcji automatycznego tworzenia: przejdź do menu Ułóż, wybierz Siatka i linie pomocnicze i kliknij Utwórz linie pomocnicze. W otwartym oknie dialogowym określ wymagane wymiary.

W rezultacie tworzymy siatkę odpowiadającą wymaganej szerokości ekranu, która umożliwia wygodne rozmieszczenie treści.

Kluczowe komponenty potrzebne do stworzenia prototypu

Po utworzeniu siatki możesz rozpocząć opracowywanie prototypu. Ten proces wykorzystuje komponenty z biblioteki dostępnej w oknie o nazwie „Biblioteki”.

Aby użyć elementu, należy przeciągnąć go z okna z bibliotekami do głównego obszaru roboczego.

Tworzenie nagłówka

Nagłówek witryny to górna część strony, która tradycyjnie zawiera logo organizacji, numery telefonów i menu nawigacyjne. Aby pracować z elementami, zaznacz Pole 1, przeciągnij je do obszaru roboczego i ustaw wymagane wymiary.

Po ustaleniu wymiarów nagłówka przejdziemy do umieszczenia logo, numeru telefonu i menu nawigacyjnego. Tymczasowo użyjemy ciemnego prostokąta do przedstawienia logo, które nazwiemy Pole 2.

Aby wyświetlić numer telefonu firmy, użyjemy elementu nagłówka trzeciego poziomu i utworzymy przycisk, który inicjuje połączenie z formularzem opinii, korzystając z wcześniej przygotowanego elementu Przycisk.

Używamy elementu tekstu akapitu do utworzenia i wypełnienia menu.

W prototypach zawierających wiele stron, używanie tradycyjnego nagłówka może być uciążliwe. Każda nowa strona będzie musiała zostać utworzona od podstaw lub skopiowana z poprzedniej. Jeśli konieczne będzie wprowadzenie zmian, nagłówek będzie musiał zostać edytowany na każdej stronie osobno. Aby ułatwić ten proces, projektanci korzystają z panelu Wzorce, znajdującego się w prawym dolnym rogu.

Wzór to unikalny widżet, którego można używać na wielu stronach, ale jego zawartość można edytować tylko raz. Idealnie nadaje się do tworzenia elementów takich jak nagłówek, stopka witryny, formularz zamówienia, menu i inne powtarzające się elementy. Zaprojektowany przez nas nagłówek można przekonwertować na wzorzec, co znacznie upraszcza jego dodawanie do innych stron i pozwala edytować zawartość jednym kliknięciem.

Wybierz górną część witryny, a następnie kliknij prawym przyciskiem myszy i wybierz opcję „Konwertuj na wzorzec”. w menu, które się otworzy.

Aby ustawić nagłówek na nowej stronie, po prostu przeciągnij na nią odpowiedni widget.

Kluczowe elementy struktury witryny

Kluczowe bloki są tworzone przy użyciu głównych elementów. Na pierwszym ekranie umieścimy nagłówek, tekst wezwania do działania, przycisk i obraz.

Na następnym ekranie pojawi się sekcja poświęcona zaletom produktu. Pokażemy obraz i wyjaśnimy, czym wyróżnia się on na tle podobnych produktów. Dla przejrzystości użyjemy elementu Placeholder dla zdjęcia, a ikony będą wyświetlane jako elipsa.

Używamy slidera do prezentacji projektów firmy. Elementy sterujące można łatwo tworzyć za pomocą linii poziomych. Aby to zrobić, przeciągnij linię poziomą do obszaru roboczego, a następnie kliknij szare kółko obok linii i wybierz żądany styl wyświetlania.

Recenzje firm można wygodnie formatować jako karty.

Tworzenie interakcji

W Axure każdy element prototypu może działać jako wyzwalacz różnych akcji, umożliwiając przypisanie określonej logiki behawioralnej do obiektu. Takie podejście pozwala na dokładniejsze modelowanie funkcjonalności witryny.

Dowiedzmy się, jak utworzyć klikalne menu w prototypie, które umożliwi nawigację po witrynie za pomocą linków u góry strony. Aby rozpocząć, kliknij sekcję „Blog” i wybierz akcję „OnClick” we Właściwościach elementu.

Zdarzenie OnClick jest wyzwalane, gdy użytkownik kliknie element, co jest doskonałym rozwiązaniem do tworzenia hiperłączy. Skonfigurujmy je tak, aby po kliknięciu przeskakiwało do sekcji bloga w bieżącym oknie.

Najpierw wybieramy opcję „Otwórz link”, następnie określamy „W bieżącym oknie” i wybieramy żądaną sekcję bloga, którą chcemy otworzyć. Oto przewodnik krok po kroku, jak go skonfigurować:

Analiza i eksportowanie utworzonego prototypu

Utworzony prototyp można natychmiast uruchomić w przeglądarce, udostępnić za pośrednictwem serwerów Axure lub wyeksportować w formacie HTML.

Zapoznaj się ze sposobem tworzenia prototypu działa i wygląda w przeglądarce internetowej, korzystając z funkcji podglądu. widoki.

W tym przykładzie, przedstawionym w Axure i zaimplementowanym w Google Chrome, po prawej stronie znajduje się pasek nawigacyjny, który pokazuje organizację witryny i, w razie potrzeby, umożliwia dodawanie komentarzy.

Utworzony prototyp można łatwo umieścić na serwerze Axure, po czym wystarczy podać klientowi link. Dodatkowo możliwe jest generowanie plików HTML, które można wykorzystać zarówno na komputerze lokalnym, jak i na własnej stronie internetowej.

Aby opublikować prototyp, należy kliknąć przycisk „Publikuj” w prawym górnym rogu i wybrać opcję „Publikuj w Axure Share”. Jeśli chcesz pobrać prototyp na swój komputer, wybierz opcję „Generuj pliki HTML”.

Wniosek:

Nauka podstawowych funkcji Axure nie jest szczególnie trudna. Właśnie dlatego to oprogramowanie jest szeroko wykorzystywane nie tylko przez specjalistów od projektowania UX, ale także przez kierowników projektów, marketerów i copywriterów. Znacznie redukuje czas i koszty zasobów.

Na przykład, menedżer tworzy prototyp podczas rozmowy z klientem, a następnie przekazuje projektantowi jasne instrukcje dotyczące tego, co należy zrobić, co pomaga zmniejszyć liczbę iteracji.

Oprócz podstawowych funkcji, Axure oferuje możliwość tworzenia złożonych interakcji, okien pop-up i responsywnych prototypów. Najczęściej te funkcje są wykorzystywane przez projektantów UX w kontekście złożonych i dużych projektów.

Możesz zostać projektantem UX, nauczyć się tworzyć prototypy, tworzyć przejrzystą strukturę strony internetowej, a także lepiej zrozumieć potrzeby użytkowników i znaleźć przystępne, intuicyjne rozwiązania, biorąc udział w kursie projektowania UX na uniwersytecie online Skillbox.