Jak zacząć się z UXPin
Gdy wkraczamy w dziedzinę projektowania mobilnego, projektowania aplikacji i elastycznego projektowania, coraz bardziej koncentrujemy się na UX (User Experience) i modelowaniu szkieletowym, interaktywnym prototypowaniu i makietach. Istnieje mnóstwo narzędzi wymierzonych w tę niszę i pełnią one pełną gamę od złożonych, pełnych funkcjonalności potworów do rzadkich i ledwo przydatnych. Jednym z narzędzi, które przykuło moją uwagę, jest UXPin, ponieważ został opracowany przez projektantów dla projektantów.
Zanim przejdziemy do przodu … zastrzeżenie. Jeśli twoja organizacja woli posiadać oprogramowanie, to UXPin nie jest dla ciebie. Cała praca wykonana w tej aplikacji odbywa się w przeglądarce, a zapisywane projekty są zapisywane na Twoim koncie.
Aby rozpocząć korzystanie z UXPin, uruchom przeglądarkę i przejdź do UXPin. Stąd możesz zapisać się na bezpłatny abonament lub zorganizować miesięczny plan na podstawie przewidywanych potrzeb. Proces rejestracji jest dość łatwy i po ustawieniu nazwy użytkownika i hasła, jesteś gotowy do rozpoczęcia.
Jak rozpocząć projekt w UXPin
Po zalogowaniu się przybywasz do pulpitu nawigacyjnego i stąd możesz zdecydować o utworzeniu nowego modelu krawędziowego, nowego projektu mobilnego lub projektu Responsive Web Design. Istnieją również wtyczki do UXPin, które pozwolą Ci wprowadzić projekty Photoshop lub Sketch. W tym celu: Jak utworzyć baner z tekstem i dodać przycisk e-mail do banera. Aby to osiągnąć, wybrałem opcję Utwórz nowy szkielet.
Jak korzystać z interfejsu UXPin
Powierzchnia projektu podzielona jest na cztery obszary. W czarnym obszarze po lewej stronie znajduje się szereg narzędzi, które umożliwiają powrót do deski rozdzielczej, otwarcie elementów, których będziesz używać, otwarcie panelu Smart Elements, wyszukiwanie elementów, dodawanie notatek do strony i dodawanie członków zespołu. Na dole znajduje się przycisk otwierający krótki samouczek, drugi umożliwiający dostęp do konta i drugi, który uzyskuje dostęp do najczęściej zadawanych pytań, zadajemy pytania, a nawet przekazujemy opinie.
W niebieskim obszarze wzdłuż góry znajduje się szereg narzędzi i właściwości. Ciemniejsze przyciski po prawej stronie pozwalają na powtórzenie projektu, dostosowanie ustawień projektu, udostępnienie strony i wykonanie symulacji strony w przeglądarce.
Panel Elementy to miejsce, w którym chwytasz bity i kawałki za powierzchnię projektową, nazywasz projekt i dodajesz lub usuwasz strony.
Biblioteka Elements jest miłym zaskoczeniem dla projektantów UX. To menu podręczne umożliwia wybór spośród 30 bibliotek, od iOS do Androida Lolipop. Masz również dostęp do elementów Bootstrap i Fundacji, a także ikony Font Awesome, ikony gestów na urządzenia mobilne i zbiór widżetów społecznościowych.
04 z 09Jak dodać element do strony UXPin
Aby rozpocząć, przeciągnąłem element Box na powierzchnię projektową, a po zwolnieniu myszy - Panel właściwości otwiera się. Przycisk Właściwości pozwala nazwać element i ustawić jego wysokość i wysokość. Możesz także dodać dopełnienie do elementu, zaokrąglić rogi i dostosować jego krycie. Kliknięcie przycisku Kolor tła powoduje otwarcie selektora kolorów RGBA.
Możesz również przypisać czcionkę, obramowanie i wzór do wybranego elementu. Lightning Bolt daje możliwość dodania interaktywności do wybranego elementu.
05 z 09Jak dodawać i formatować tekst w UXPin
Aby dodać tekst, przeciągnij element tekstowy na powierzchnię projektu i wprowadź tekst. Kliknij właściwość Tekst , aby otworzyć właściwości czcionki i sformatować tekst. Jeśli potrzebujesz bloku tekstowego, dodaj element tekstowy i kliknij przycisk GENERUJ LOREM IPSUM przycisk we właściwościach czcionki.
06 z 09Jak dodać obraz do strony UXPin
Istnieje kilka sposobów na wykonanie tego zadania. Możesz użyć Narzędzie obrazu na pasku narzędzi dodaj element Obraz z biblioteki lub przeciągnij i upuść obraz z pulpitu na element na powierzchni projektowej, jak pokazano powyżej.
07 z 09Jak dodać przycisk do strony UXPin
Chociaż istnieje element Button, wprowadzanie " Przycisk "Do Szukaj obszar, jak pokazano powyżej, otwiera wszystkie przyciski znajdujące się we wszystkich bibliotekach. Przeciągnij tę, która działa dla Ciebie na powierzchnię projektową i użyj Właściwości, aby zmienić kolor, czcionkę, a nawet Promień obramowania. Aby zmienić tekst wewnątrz przycisku, kliknij raz na tekst i wprowadź nowy tekst.
08 09Jak dodać interakcję do strony UXPin
To nie jest tak skomplikowane, jak może się wydawać. W przypadku wprowadzania wiadomości e-mail dodałem element wejściowy, zmieniłem jego rozmiar, wprowadziłem tekst i sformatowano tekst. Po wybraniu elementu Input kliknij przycisk Właściwości i, gdy Właściwości elementu kliknij przycisk Widoczność przycisk - gałka oczna - w prawym górnym rogu panelu.
Wybierz przycisk i kliknij Przycisk interakcji - Błyskawica - we właściwościach. Po otwarciu panelu Interakcje wybierz Nowa interakcja. Wybierz Kliknij z wyskakującego Wyzwalacza. W obszarze Akcja wybierz opcję Pokaż element. Zostaniesz zapytany, który element ma pokazać. Kliknij raz na stanowisko strzeleckie i kliknij element wejściowy. Po zidentyfikowaniu elementu możesz teraz określić, czy chcesz animować element. W tym przypadku postanowiłem pokazać pole wprowadzania z łatwością i poszło z domyślną wartością czasu trwania 300ms.
Chcę również, aby przycisk został przesunięty o około 65 pikseli w prawo po kliknięciu. Wybrałem przycisk, otworzyłem panel Interakcje i wybrałem Nowa interakcja. Użyłem tych ustawień:
- Spust: Kliknij
- Akcja: Przenieś do
- Kieruj się: 65 px na osi x
- Animacja: Liniowy
- Trwanie: 300 ms
Aby usunąć interakcję, wybierz element i otwórz panel Interakcje. Wybierz interakcję w panelu i kliknij Kosz, aby go usunąć.
09 09Jak sprawdzić swoją stronę w UXPin
Ze względu na to, że pracujesz w przeglądarce, testowanie jest proste. Kliknij Symuluj projekt przycisk. Strona otworzy się w przeglądarce i możesz przetestować sposób. Zostanie również dodany panel po lewej stronie strony, który pozwala na komentarze, mapę witryny, jeśli jest wiele stron, testowanie użyteczności, udostępnianie na żywo, edycja i powrót do pulpitu nawigacyjnego.
U dołu strony znajduje się kolejny mały panel, który pozwala wyświetlać elementy interaktywne, wyświetlać lub ukrywać komentarze i udostępniać link do projektu innym osobom.
