Najnowsza aktualizacja Atomic.io zawiera przewijane pojemniki
Kilka miesięcy temu pokazałem, jak atomic.io może być użyty do prototypowania ruchu. Jednym z kluczowych punktów, które zrobiłem w utworze było "pokazywanie ruchu", a nie pozostawienie go wyobraźni klienta lub zespołu jest ważne. W rzeczywistości stało się to tak istotne, że na scenie pojawia się zupełnie nowa kategoria narzędzi UX / UI. Należą do nich: Apple Keynote, Adobe's Edge Animate, After Effects i UXPin, aby wymienić tylko kilka. Nowym dzieckiem na bloku jest Atomic.io, który był w otwartej wersji beta, kiedy po raz pierwszy napisałem o produkcie.
Zgrabną cechą otwartych betów jest umożliwienie producentowi oprogramowania zbieranie opinii użytkowników na temat zestawu funkcji, w tym brakujących funkcji, a następnie dodawanie ich do aplikacji i testowanie przed komercyjną wersją. W przypadku atomu jedną z rzeczy, które naprawdę mi brakowało, była możliwość przewijania zawartości w pionie lub w poziomie. Może to obejmować takie elementy, jak karty, pokazy slajdów lub praktycznie wszystko, co użytkownik przesunie lub przeciągnie w granicach interfejsu aplikacji lub witryny.
Musiało to być tematem wielu użytkowników, ponieważ przewijane pojemniki zostały właśnie wprowadzone do aplikacji w tym miesiącu i, muszę przyznać, tworzenie przewijanych treści w prototypie jest łatwe do uaktywnienia.
Oto jak…
02 z 03Jak utworzyć przewijanie w pionie treści w Atomowej
Najpierw musisz się zarejestrować na bezpłatną 30-dniową wersję próbną, a pod koniec tego okresu otrzymasz trzy plany cenowe.
Pierwszą rzeczą, którą musisz wiedzieć, to cała praca, którą będziesz wykonywać w przeglądarce, a aplikacja jest ściśle ukierunkowana na Google Chrome. Po zalogowaniu się zostaniesz przeniesiony do Projektowanie strona. Aby otworzyć aplikację, kliknijPrzycisk nowego projektu.
Gdy pojawi się interfejs, zobaczysz ograniczoną liczbę narzędzi, możliwość dodawania stron i warstw do stron, obszaru roboczego i, po prawej, panel właściwości kontekstowych.W tym przykładzie zacząłem od presetu iPhone 5, który jest 320 x 568. Następnie otwieram folder zawierający obrazy, które mają być przewijane i przeciągane na płótno. Zostały one automatycznie dodane do projektu i możesz zobaczyć, że są na poszczególnych warstwach, jeśli kliknij kartę Warstwy. Następnie wybrałem narzędzie Strzałka (zaznaczenie), wybrałem obraz i przeciągnąłem go do nowej pozycji, aby dodać trochę miejsca między nimi. Następnie wybrałem wszystkie obrazy i kliknąłem przycisk Distribute Vertically na pasku narzędzi. To równomiernie rozmieściło obrazy. Następnym krokiem jest wybranie całej zawartości do przewinięcia i do którejkolwiek z nich kliknij przycisk Kontener lub wybierz Utwórz kontener przewijania z przycisku Grupa wyskoczyć. Po utworzeniu kontenera - zobaczysz go w panelu Warstwy - kliknij pojemnik i przeciągnij dolny uchwyt w górę, do dołu płótna. Kliknij przycisk Podgląd u dołu panelu Właściwości, co spowoduje uruchomienie okna przeglądarki. Użyj kółka przewijania myszy, aby przewinąć zawartość. Aby wrócić do swojego projektu, kliknij przycisk Edytuj w prawym dolnym rogu okna przeglądarki. Przewijanie w poziomie jest równie łatwe do wykonania. W takim przypadku przeciągnij serię obrazów na płótno i przyciśnij je do siebie. Po zaznaczeniu obrazów klikam przycisk Dopasuj górne, aby upewnić się, że wszystkie są wyrównane względem siebie. Następnie przytrzymałem klawisz Shift i wybrałem każdą warstwę w panelu Warstwy. Po wybraniu obrazów, I kliknął przycisk "Kontener" i, w panelach Właściwości zaznaczonych poziomo w obszarze Zachowania. Następnie przetestowałem projekt w oknie przeglądarki, klikając przycisk Podgląd. Chociaż pokazałem, jak tworzyć poszczególne wersje przewijania w pionie i w poziomie, o ile umieścisz przewijaną zawartość w pojemniku, możesz mieć te pojemniki w oddzielnych obszarach ekranu. Na przykład strona internetowa może przewijać zawartość w pionie w bocznym menu i przewijać zawartość w poziomie w pokazie slajdów na tej samej stronie. W rzeczywistości kontener może mieć zarówno przewijanie pionowe, jak i poziome dla takich elementów, jak selektor zdjęć z kilkoma miniaturami. Aby dowiedzieć się więcej o tej funkcji w pliku atomic.io, sprawdź: Jak utworzyć przewijanie w poziomie zawartości w Atomowej
