Zawartość
- Konfigurowanie naszego prototypu
- Poruszanie się po stronach
- Uzyskiwanie danych wejściowych użytkownika
- Interakcje i animacje
- Motyw
- Końcowe przemyślenia
Zadaniem projektanta stron internetowych jest nie tylko tworzenie pięknych witryn internetowych. Muszą także pomyśleć o przepływie informacji i o tym, jak uczynić aplikację internetową łatwą w użyciu. Często kończą się za pomocą narzędzia takiego jak InVision lub Balsamiq, aby stworzyć makietę, która daje wyobrażenie o tym, jak będzie się zachowywać strona internetowa.
Mimo że te aplikacje wykonują dobrą robotę, wynik nadal nie jest prawdziwą witryną internetową. Utrudnia to weryfikację i eksperymentowanie z interakcjami, sprawdzanie, jak „czuje się” projekt i komunikowanie odpowiednim interesariuszom, jak będzie wyglądało końcowe doświadczenie.
W tym artykule będę pracować z AngularJS, platformą open source do tworzenia aplikacji internetowych, która może być używana do tworzenia na żywo makiet z możliwością nawigacji w mgnieniu oka. Dowiemy się, jak poruszać się po różnych stronach, jak używać danych wprowadzonych przez użytkownika w danych wejściowych, a także przyjrzymy się animacjom i interakcjom, tworzeniu motywów i dodawaniu zachowań do różnych elementów HTML, takich jak przyciski.
Konfigurowanie naszego prototypu
Pierwszą rzeczą, jaką musimy zrobić, jest utworzenie nowego „index.html”, który będzie punktem wejścia do naszej aplikacji.Oprócz linkowania do konkretnych plików CSS i JavaScript potrzebnych do naszego prototypu, zawsze musimy odwoływać się do jQuery, angular.js, angular-animate i angular-ux - w tej kolejności.
Potrzebujemy również sposobu na udostępnienie katalogu, w którym będzie się znajdować plik „index.html” i inne pliki. W tym celu możemy użyć polecenia npm serv lub python -M SimpleHTTPServer.
Teraz musimy skonfigurować aplikację Angular. Będzie to jedyny JavaScript, którego potrzebujemy do kodowania, aby nasz prototyp działał. Dobrą rzeczą jest to, że to tylko przypadek kopiowania i wklejania.
body ng-app = "prototype" ng-ctrl = "MainCtrl"> / body> // app.js angular.module ('prototype', ['ngAnimate', 'ux']) .controller ('MainCtrl', function ($ scope) {$ scope.data = {};});
Nasza prototypowa aplikacja jest skonfigurowana. Czas zacząć się uczyć, co możemy teraz z tym zrobić.
Poruszanie się po stronach
Pierwszą rzeczą, której potrzebują wszystkie prototypy, jest możliwość poruszania się po różnych stronach. W ten sposób dowiemy się i zweryfikujemy przepływ informacji oraz sposób interakcji użytkownika z naszą aplikacją.
W tym celu możemy użyć dyrektywy ux-page z biblioteki angular-ux, którą dodaliśmy wcześniej.
body> ux-page name = "Home" home> ng-include src = "'home.html'"> / ng-include> / ux-page> ux-page name = "Szczegóły"> ng-include src = " 'detail.html' "> / ng-include> / ux-page> / body>! - home.html ->! -… -> a href =" "ux-go =" Szczegóły "> Przejdź do strony Szczegóły / a>
W tym przypadku tworzymy dwie różne strony. Zawartość każdej z tych stron jest w osobnych plikach, które uwzględniamy za pomocą dyrektywy ng-include. Zauważ, że dodaliśmy atrybut home do strony ux, która będzie główną (domyślnie wyświetlana). Moglibyśmy również umieścić zawartość HTML w pliku index.html. Tworzenie nowych plików dla każdej strony pomaga zachować czytelność i łatwość konserwacji.
Następnie w „home.html” mamy link, który kieruje użytkownika do strony Szczegóły. W tym celu używamy dyrektywy ux-go z nazwą strony, którą chcemy przeglądać. Pamiętaj, że musisz umieścić href = "" w linku, aby był klikalny.
Uzyskiwanie danych wejściowych użytkownika
Inną ważną częścią prototypowania jest możliwość zapisania niektórych informacji o użytkowniku w celu wyświetlenia i wykorzystania później w aplikacji.
W tym celu możemy dodać dyrektywę ng-model do dowolnego istniejącego elementu input>:
! - home.html -> input type = "text" ng-model = "data.message" name = "name" />
Oznacza to, że cokolwiek użytkownik wpisze w wejściu o nazwie nazwa, zostanie zapisane w zmiennej wiadomości z naszych danych. Pamiętaj, aby zawsze zapisywać wprowadzone wartości w jakiejś zmiennej wewnątrz danych.
Możemy po prostu wyświetlić te informacje na dowolnej stronie naszego prototypu za pomocą {{}}:
! - details.html -> p> Wiadomość wprowadzona przez użytkownika to {{data.message}} / p>
Interakcje i animacje
Chcemy również mieć możliwość zobaczenia, jak będą przebiegać interakcje w witrynie, którą tworzymy prototyp. Oznacza to, że musimy sprawić, by nasza makieta pokazywała i ukrywała zawartość oraz dodawała animacje dla przejść między różnymi stanami aplikacji.
Aby pokazać i ukryć część zawartości strony, możesz użyć dyrektyw ng-show i ng-hide wraz z niektórymi wartościami logicznymi (tak / nie), które wskażą, czy treść ma być wyświetlana, czy nie.
button ng-click = "data.contentShown = true"> Pokaż zawartość / przycisk> div ng-show = "data.contentShown"> p> To jest treść! / p> a href = "" ng-click = "dane .contentShown = false "> Ukryj zawartość / a> / div>
Po pierwsze, używamy ng-click do obsługi zdarzenia kliknięcia przycisku Pokaż treść. W tym przypadku ustawiamy zmienną contentShown na wartość true. Następnie, używając ng-show, mówimy po prostu, że zawartość div.content zostanie wyświetlona, jeśli contentShown ma wartość true. ng-hide działa tak samo jak ng-show.
Teraz chcemy animować sposób wyświetlania lub ukrywania tej zawartości, aby uzyskać pełniejszy obraz tego, jak aplikacja będzie się czuć użytkownikowi. W tym celu użyjemy ngAnimate. Klasy ng-hide-remove i ng-hide-add są dodawane chwilowo, gdy element jest odpowiednio pokazywany lub ukrywany.
Dlatego możemy napisać animację dla naszej zawartości div. W następujący sposób:
// Treść jest wyświetlana .content.ng-hide-remove {// bounceIn klatki kluczowe pochodzą z animate.css lib animation: bounceIn 1s; -webkit-animation: bounceIn 1s; } // Treść jest ukrywana .content.ng-hide-add {animation: bounceOut 1s; -webkit-animation: bounceOut 1s; }
Możesz dowiedzieć się więcej o dodawaniu animacji na stronie z dokumentami ngAnimate.
Jeśli chcesz animować zmiany na stronach, możesz zastosować to samo podejście, które zastosowaliśmy podczas wyświetlania i ukrywania stron. Nadal chcemy używać ng-show, ale tutaj będziemy musieli użyć głównej klasy div na danej stronie.
Motyw
Podczas tworzenia prototypów chcesz jednocześnie wypróbować różne motywy (kolory, typografię, rozmiary itd.), Aby zobaczyć, co działa najlepiej.
W tym celu możesz użyć funkcji ux-theme z angular-ux:
div ux-themeable> h1> Title / h1> p> To jest tekst / p> / div>
Najpierw musisz dodać dyrektywę ux-themeable do nadrzędnego elementu HTML, który chcesz motywować. Następnie, aby zmienić kompozycje, musisz określić nazwę kompozycji jako parametr zapytania w prototypowym adresie URL.
Na przykład, jeśli przejdziesz do http: // localhost: 3000 / # /? Page = Details & uxTheme = option1, div.content będzie mieć dodatkową klasę option1, co oznacza, że możemy ją stylizować w następujący sposób:
div.content.option1 h1 {rozmiar czcionki: 38px; } div.content.option1 p {color: red}
Końcowe przemyślenia
Dzięki technikom, których się dzisiaj nauczyliśmy, jesteśmy gotowi do tworzenia naszych prototypów na żywo, po których można się poruszać. Gdy zaczniesz go używać, z chęcią uzyskam opinię na temat tego procesu! Prześlij mi swoje przemyślenia i sugestie na Twitterze pod adresem @mgonto.
Słowa: Martin Gontovnikas
Martin Gontovnikas jest rzecznikiem programistów w Auth0. Ten artykuł został pierwotnie opublikowany w numerze 269 magazynu net.
Lubiłem to? Przeczytaj to!
- 10 najlepszych narzędzi do tworzenia makiet internetowych w 2015 roku
- Kompletny przewodnik po projektowaniu logo
- Przydatne i inspirujące szablony ulotek
