10 bezpłatnych interfejsów użytkownika do wdrażania CSS i JavaScript

Celem onboardingu jest zapoznanie nowych użytkowników z interfejsem. Jest to dostępne w wielu różnych stylach i nie ma na to właściwego sposobu. Ale jeśli przyjrzysz się, jak witryny i aplikacje przeprowadzają onboarding, możesz znaleźć pomysły na własną pracę.

A dzięki tym bezpłatnym interfejsom użytkownika do wdrażania CSS i JavaScript będziesz mieć mnóstwo pomysłów, które oferują zarówno inspirację, jak i fragmenty kodu, które pomogą Ci zacząć.

1. Slajdy karuzelowe

Wprowadzanie z rotacyjną karuzelą jest niezwykle popularne na urządzeniach mobilnych, na których miejsce na ekranie jest ograniczone. Ale ten efekt może działać równie dobrze na stronach internetowych, w których musisz szybko przekazywać informacje.

Sprawdź to demo slajdów karuzeli stworzone przez Nicka Wanningera, aby zobaczyć, co mam na myśli.

Jest to całkowicie darmowy przykład onboardingu stworzony przy użyciu Flickity i podstawowego kodu CSS. Działa to zarówno na urządzeniach mobilnych, jak i stacjonarnych, więc jest to doskonały wybór, jeśli potrzebujesz responsywnego rozwiązania.

2. Reaguj na codzienny interfejs użytkownika

Jako prosty projekt do ćwiczeń, Jack Oliver stworzył ten długopis React Daily UI od podstaw. I jest to jedno z najbardziej eleganckich doświadczeń onboardingowych, jakie widziałem.

Interfejs zawiera fikcyjny tekst, ponieważ nie jest przeznaczony do praktycznego użytku w świecie rzeczywistym, ale jest bardzo przejrzysty i powinien pozostawić wystarczająco dużo miejsca, aby zmieścić prawie wszystko na stronie.

Należy zauważyć, że nie mogłem uruchomić tego na telefonie komórkowym za pomocą przeciągnięć i wydaje się, że obecnie rozpoznaje tylko krany. Ale w przypadku rozwiązania typu „tylko kliknięcie” jest naprawdę fajnie.

3. Ekrany wprowadzające

To pióro ma nie tylko niesamowity interfejs do wdrażania, ale także niestandardowe animacje do uruchamiania.

Deweloper Jeff Ham zna się na interfejsie i stworzył ten nieskazitelny ekran wprowadzający. Opiera się na JavaScript, aby tworzyć animacje „następnego ekranu” i przełączać zdarzenia dla kliknięć/dotknięć użytkownika.

Jednym z fajnych dodatków do tego interfejsu jest niebieski przycisk Dalej na dole. Pozwala to użytkownikowi przejść ekran po ekranie z dużym CTA na widoku. Założę się, że zwiększy to całkowitą liczbę osób dokonujących konwersji i poprawi ogólną jakość doświadczenia.

4. Zarząd

Ten fragment kodu Boardal jest dość wyjątkowy, ponieważ nie jest to coś, co często widujesz.

Wykorzystuje okno modalne z zawartością dołączaną, aby pomóc użytkownikom szybciej przejść przez witrynę. Jest to niestandardowy projekt stworzony wyłącznie do testowania i jest to jeden z najfajniejszych sposobów na ulepszenie procesu wdrażania.

Zauważ, że działa to najlepiej na pulpicie, ponieważ opiera się na efekcie modalnym (nie jest idealny dla mniejszych ekranów).

Jeśli więc podoba Ci się projekt i chcesz w prosty sposób ulepszyć wdrażanie do swojej witryny, daj Boardal szansę.

5. Wycieczka z przewodnikiem

Zazwyczaj wprowadzanie jest traktowane jako proces, w którym krok po kroku wprowadza się nowe strony i funkcje dla użytkownika. Ale osobiście uważam, że wycieczki z przewodnikiem są o wiele bardziej przydatne.

Jeśli chcesz zacząć od prostego fragmentu, ta wycieczka z przewodnikiem jest idealna. Opiera się na komponentach Bootstrap i używa małych podpowiedzi z przyciskami „dalej”, aby przyspieszyć wycieczkę.

Użytkownik może zamknąć wycieczkę w dowolnym momencie, jeśli się zdenerwuje lub przestanie się tym przejmować. To sprawia, że ​​jest to wycieczka opcjonalna, więc mniej osób będzie zirytowanych tym procesem.

Ogólnie rzecz biorąc, jest to moja preferowana metoda wdrażania, chociaż jej skonfigurowanie wymaga trochę więcej wysiłku. Ale to demo daje przynajmniej szablon na początek.

6. Wycieczka materiałowa

Jedną z alternatywnych metod zwiedzania jest prezentacja z automatycznym postępem, która podkreśla określone funkcje.

Najlepszym przykładem, jaki znalazłem, jest ten długopis stworzony przez Gregora Adamsa. Opiera się na wytycznych dotyczących materiałów i wykorzystuje podświetlone kółka do zaprezentowania części strony. Ta technika jest idealna, jeśli masz bardzo złożone interfejsy z wieloma funkcjami.

Zaciemniając całą stronę, skupiasz uwagę na jednym obszarze na raz. To natychmiast przykuwa uwagę użytkownika, co jest dokładnie tym, co musisz zrobić, aby uzyskać dobre wdrożenie.

Wiem, że to nie będzie pasować na wszystkich stronach internetowych, ale jeśli podoba Ci się interfejs, gorąco polecam wypróbowanie go.

7. Wdrażanie aplikacji na Androida

Aplikacje mobilne zazwyczaj wymagają procesu wdrażania bardziej niż strony internetowe. Często zdarza się, że projektanci mobilnego interfejsu użytkownika wpychają funkcje na mniejszy ekran, co może przytłaczać użytkowników bez wprowadzenia z przewodnikiem.

Ten przewodnik wprowadzający autorstwa Mata Swainsona jest małym, ale wymownym przykładem tego, co można zrobić z aplikacjami na smartfony.

Opiera się na modelu Androida, ale z pewnością nie jest to jedyny styl, którego możesz użyć. Podoba mi się, jak obsługuje natywne przesuwanie, które działa nawet w mobilnych przeglądarkach internetowych.

Dodatkowo mały wskaźnik postępu u góry jest miłym akcentem. Zdecydowanie prosta strona wprowadzająca, ale warto ją zapisać, jeśli szukasz inspiracji.

8. Wprowadzenie do jonów

Z Ionic można wiele zrobić, a ten długopis jest świetnym przykładem.

Deweloper Clifford Fajardo stworzył wbudowane intro Ionic działające wyłącznie na frameworku JavaScript. Obsługuje wszystkie interakcje mobilne, takie jak dotknięcia, przeciągnięcia, a nawet obsługuje opcje dwukrotnego dotknięcia, jeśli chcesz tej funkcji.

Ionic jest używany głównie do tworzenia aplikacji mobilnych i działa również bardzo dobrze w przypadku witryn mobilnych. Nie mogę powiedzieć, że ten ekran startowy pasowałby do każdej witryny, ale to dobry wybór, jeśli ponad 50% Twoich odbiorców pochodzi z urządzeń mobilnych.

9. Forma pionowa

Z lekką animacją UI z galaretką i naprawdę prostym projektem, ta pionowa forma jest wyjątkową ucztą.

Wykorzystuje właściwości CSS flex do pełnego efektu wraz z niektórymi niestandardowymi animacjami JavaScript i CSS. To prawda, uważam, że treść jest trochę cienka, więc nie oferuje zbyt wiele w zakresie szczegółowego wprowadzenia.

Możesz jednak wziąć ten interfejs i naprawdę uczynić go własnym bez większego wysiłku, więc pozostawia wiele wyobraźni.

10. Etykietka wycieczki z przewodnikiem

Oto jeszcze jeden przykład wycieczki z przewodnikiem, ale ten wykorzystuje pełne pole podpowiedzi, które zostało naprawione na stronie.

Jeśli sprawdzisz fragment, zobaczysz, że nie jest on wbudowany w żaden konkretny interfejs. Jest to raczej pływająca podpowiedź z poradami i krokami postępu dla użytkownika.

Połączenie tego interfejsu użytkownika z pewnym stałym skryptem pozycjonowania podpowiedzi pozwoliłoby łatwo przenosić tę rzecz po interfejsie z podpowiedziami wskazującymi na wszystkie główne funkcje. Aby ten szablon działał, trzeba będzie trochę go dostosować, ale w przypadku prostego interfejsu użytkownika jest piękny.