8 witryn z kolekcjami przepływów, bloków i komponentów UX/UI

Zawartość:

• Mobbin
• Refero Design PRO
• SaaSFrame
• Projektowanie FlowStep
• Archiwum UX
• Awwwards
• Przepływy stron
• Świetnie, bardzo ładnie

Projektując złożone interfejsy, ważne jest, aby uwzględnić nie tylko odniesienia wizualne, ale także przeprowadzić dogłębne badania użytkowników. Przy dużej liczbie ekranów kluczowe jest zrozumienie kroków każdego konkretnego przepływu i zaangażowanych ekranów. Pozwala to na stworzenie intuicyjnego i przyjaznego dla użytkownika interfejsu, który spełnia potrzeby użytkowników i upraszcza ich interakcję z produktem. Prawidłowa struktura przepływu i sekwencja ekranów przyczyniają się do zwiększenia wydajności interfejsu i poprawy wrażeń użytkownika.

Przygotowaliśmy wybór katalogów, które oferują odniesienia wizualne i pomagają w tworzeniu przepływów użytkownika. Te zasoby pomogą Ci uniknąć pominięcia ważnych ekranów i zapoznać się z implementacją konkretnych komponentów, modułów, scenariuszy i stron znanych marek. Korzystając z naszych rekomendacji, możesz poprawić doświadczenia użytkownika i zoptymalizować projekt swoich projektów.

• Mobbin – katalog aplikacji internetowych, na Androida i iOS;
• Refero – aplikacje internetowe i iOS;
• SaaSFrame – aplikacje internetowe i newslettery e-mail;
• FlowStep – aplikacje internetowe i Android;
• UX Archive – aplikacje internetowe i Android;
• Awwwards – elementy witryn promocyjnych;
• Page Flows – aplikacje internetowe i internetowe;
• Nice, Very Nice – bloki do stron internetowych.

Czytanie jest ważnym aspektem naszego życia, który przyczynia się do rozwoju myślenia, poszerzania horyzontów i doskonalenia umiejętności komunikacyjnych. Książki, artykuły i inne źródła informacji mogą wzbogacić nasze doświadczenia i dostarczyć nowych pomysłów. Ważne jest nie tylko czytanie, ale także analizowanie tego, co się czyta, aby zastosować zdobytą wiedzę w praktyce. W dzisiejszym świecie, gdzie informacje są dostępne w ogromnych ilościach, umiejętność wyboru wysokiej jakości i użytecznych materiałów staje się szczególnie istotna. Zanurzenie się w lekturze nie tylko pomaga rozwijać zdolności intelektualne, ale także znaleźć inspirację do kreatywności i rozwoju osobistego.

Przepływ użytkownika to sekwencja działań użytkownika podczas interakcji z aplikacją lub stroną internetową. Jest on niezbędny do stworzenia intuicyjnego interfejsu, który zapewnia komfortowe i efektywne korzystanie z produktu. Bez jasno zdefiniowanego przepływu użytkownika, tworzenie aplikacji i stron internetowych może prowadzić do dezorientacji, spadku satysfakcji użytkowników, a w rezultacie do spadku konwersji.

Przepływ użytkownika pomaga programistom i projektantom zrozumieć, w jaki sposób użytkownicy będą poruszać się po produkcie, jakie zadania chcą wykonać i jakie problemy mogą napotkać po drodze. Pozwala im to zoptymalizować interfejs poprzez uproszczenie interakcji i minimalizację liczby kroków wymaganych do osiągnięcia celu. Prawidłowo skonstruowany przepływ użytkownika przyczynia się do poprawy doświadczenia użytkownika i zwiększenia lojalności wobec marki.

Dlatego przepływ użytkownika jest integralną częścią procesu projektowania, ponieważ pomaga stworzyć logiczną strukturę, która spełnia oczekiwania użytkowników i przyczynia się do osiągnięcia celów biznesowych. Ignorowanie tego aspektu może prowadzić do tworzenia złożonych i trudnych w obsłudze aplikacji i stron internetowych, co negatywnie wpływa na ich sukces.

Mobbin

Mobbin to wiodący portal oferujący obszerny katalog ekranów. Platforma umożliwia użytkownikom wyszukiwanie interfejsów według określonych marek i kategorii, a także typów ekranów, takich jak logowanie, weryfikacja, koszyk i inne. Dodatkowo można wyszukiwać według elementów interfejsu użytkownika, w tym przycisków, kart i tabel, a także według scenariuszy interakcji, takich jak wdrażanie, tworzenie konta i zmiana hasła. Należy pamiętać, że przeglądanie ekranów wymaga rejestracji na stronie.

Istnieją trzy główne katalogi: webowy, Android i iOS. Główną wadą jest to, że te katalogi działają niezależnie od siebie. W rezultacie użytkownik na stronie danej firmy w systemie iOS nie będzie mógł zobaczyć, jak podobny ekran tego produktu prezentuje się w wersji na komputery. To ograniczenie utrudnia porównywanie rozwiązań i może negatywnie wpłynąć na komfort użytkowania.

Mobbin oferuje subskrypcję w cenie 8 USD miesięcznie, rozliczaną rocznie. Subskrypcja ta obejmuje dostęp do rozszerzonego katalogu ekranów i przepływów, możliwość tworzenia więcej niż trzech kolekcji z zakładkami oraz zaawansowane filtry. Dostępna jest również subskrypcja zespołowa w cenie 10 USD, która umożliwia tworzenie współdzielonych kolekcji. Z tej funkcji korzystają firmy takie jak Duolingo, Shopify, Pinterest, Revolut, Volvo i inne. Mobbin to doskonałe narzędzie dla projektantów i programistów, pozwalające im efektywnie organizować i udostępniać pomysły.

Katalogi Mobbin istnieją od lat i pozwalają użytkownikom znaleźć zbiory zrzutów ekranu utworzonych niedawno, np. rok temu lub pięć lat temu. Obrazuje to ewolucję języka wizualnego, zmiany w funkcjonalności i transformację interfejsów marek na różnych etapach ich rozwoju. Jeśli kolekcja nie była aktualizowana przez długi czas, użytkownicy mogą poprosić o jej aktualizację.

Otwierając ekrany do przeglądania, uzyskasz dostęp do funkcji Hotspot, która podświetla klikalne elementy interfejsu. Klikając kartę Prototyp znajdującą się obok Ekranów, możesz wyświetlić interaktywny prototyp wybranego przepływu. Jest to szczególnie wygodne, gdy trzeba szybko poruszać się po scenariuszu, bez konieczności szczegółowego studiowania każdego ekranu.

Refero Design PRO

Refero to jedno z największych źródeł poświęconych gromadzeniu Ekrany i elementy interfejsu. Strona internetowa zawiera katalogi uporządkowane według typów stron, modułów i elementów interfejsu użytkownika. W Refero i innych anglojęzycznych źródłach moduły te nazywane są wzorcami UX. Wszystkie ekrany są podzielone na dwie główne kategorie: web i iOS, co pozwala użytkownikom łatwo znaleźć odpowiednie rozwiązania dla swoich projektów. Katalog Refero charakteryzuje się imponującą różnorodnością, oferując szeroki wybór elementów interfejsu użytkownika. Kategoria stopki zawiera ponad 6000 opcji, co ułatwia znalezienie idealnego projektu dla każdego projektu. Dodatkowo katalog zawiera 880 karuzel, 200 podpowiedzi i 60 szkieletów, co podkreśla różnorodność i funkcjonalność tego zasobu. Tak szeroki wybór sprawia, że ​​Refero jest idealnym narzędziem dla programistów i projektantów, którzy chcą zoptymalizować swój przepływ pracy i poprawić jakość interfejsów.

Głównym założeniem platformy Refero i podobnych witryn jest skupienie się na konkretnej marce. W zależności od specyficznych potrzeb firmy, jej strona wyświetla dostępne punkty widzenia, w tym wersje internetowe i aplikacje na iOS. Dodatkowo strony, bloki i komponenty interfejsu użytkownika są pogrupowane według różnych przypadków użycia. Pozwala to użytkownikom łatwo znaleźć potrzebne elementy i dostosować je do swoich potrzeb, usprawniając interakcję z produktami marki i promując bardziej efektywne wykorzystanie zasobów.

Każda firma może mieć wiele produktów, dlatego elementy takie jak czcionki i kolory nie są wyświetlane na uniwersalnej stronie marki, lecz na konkretnych ekranach. Pozwala nam to uwzględnić unikalne cechy wizualne każdego produktu i zapewnić spójność projektu.

Bez rejestracji dostępna jest tylko ograniczona wersja katalogu. Po zalogowaniu uzyskasz dostęp do pełnej oferty produktów, a także możesz zapisać tysiące ekranów w zakładkach. Funkcja zakładek nie oferuje zaawansowanego filtrowania, ale pozwala na porządkowanie ekranów według formatu webowego i iOS. Rejestracja zapewnia pełny dostęp do treści i łatwość obsługi.

Wersja darmowa pozwala na wyszukiwanie do pięciu zapytań dziennie, a także na przeglądanie ograniczonej liczby ekranów z informacjami o katalogu i firmie. Ta wersja jest idealna dla użytkowników, którzy chcą zapoznać się z głównymi funkcjami i możliwościami platformy bez ponoszenia kosztów.

Płatna wersja usługi kosztuje 8 dolarów miesięcznie (rozliczana rocznie) lub 12 dolarów miesięcznie. Obejmuje ona nieograniczone wyszukiwanie, dostęp do całej biblioteki, regularne aktualizacje treści i rekomendacje podobnych ekranów. Użytkownicy płatnej subskrypcji otrzymują zaawansowane funkcje umożliwiające efektywne wyszukiwanie i korzystanie z zasobów.

SaaSFrame

SaaSFrame to platforma przeznaczona dla projektantów UX/UI specjalizujących się w tworzeniu optymalnych doświadczeń użytkownika dla aplikacji SaaS. Kluczową zaletą platformy są unikalne i nowoczesne studia przypadków, a także obszerny katalog ekranów newsletterów e-mail. Dzięki temu projektanci mogą znaleźć inspirację i pomysły na ulepszenie interfejsów i zwiększenie interakcji użytkowników z aplikacjami.

Katalog można filtrować według typów treści, w tym interfejsów, stron marketingowych i wiadomości e-mail, a także według używanych technologii, takich jak Webflow, Framer, WordPress i inne. Każda kategoria pozwala na wyświetlenie do trzech ekranów dla każdego produktu, co pozwala na analizę trzech ekranów aplikacji, trzech ekranów witryny i trzech ekranów poczty e-mail. Ułatwia to wyszukiwanie i wybór odpowiednich treści dla Twoich potrzeb.

Wersja płatna oferuje dostęp do wszystkich katalogów, funkcjonalność filtrowania, możliwość zapisywania zakładek, a także przeglądania wersji przepływowej i mobilnej. Wersja Pro kosztuje 10 USD miesięcznie przy płatności rocznej lub 14 USD miesięcznie przy jednorazowej subskrypcji.

FlowStep Design

FlowStep obsługuje dwa Platformy mobilne – iOS i Android. Katalog nie zawiera obrazów, ale dostępne są screencasty, czyli nagrania ekranowe poszczególnych przepływów. Pozwala to użytkownikom na dokładne zrozumienie funkcjonalności i możliwości aplikacji.

Kolekcje przepływów są uporządkowane według filtrów obejmujących różne branże, takie jak biznes, finanse, zakupy i inne, a także scenariusze, w tym wyszukiwanie, ustawienia i profile. Katalog przepływów jest kompaktowy, a każda kategoria zawiera od pięciu do stu screencastów, co pozwala użytkownikom szybko znaleźć potrzebne treści. Dzięki temu nasz zasób jest wygodnym narzędziem do nauki i wdrażania skutecznych praktyk biznesowych oraz scenariuszy użytkowników.

Aby uzyskać dostęp do treści, wymagana jest bezpłatna rejestracja. Po rejestracji użytkownicy mogą polubić i zapisać interesujące sprawy na swoim koncie.

Przeczytaj dodatkowe materiały:

Dobry projekt opiera się na pięciu kluczowych zasadach, które pomagają tworzyć estetyczne i funkcjonalne rozwiązania. Pierwszą zasadą jest prostota. Skuteczny projekt powinien być zwięzły, unikając zbędnej złożoności, co pozwala użytkownikom łatwiej przyswajać informacje. Drugą zasadą jest kontrast. Właściwe użycie kontrastu pomaga podkreślić ważne elementy i poprawić czytelność. Trzecią zasadą jest hierarchia. Tworzenie hierarchii wizualnej pomaga kierować wzrok użytkownika na kluczowe części projektu, zapewniając lepszą nawigację. Czwartą zasadą jest spójność. Użycie spójnych czcionek, kolorów i stylów tworzy harmonijny odbiór i wzmacnia markę. Piątą zasadą jest adaptowalność. Projekt musi być responsywny, aby poprawnie wyświetlał się na różnych urządzeniach, zapewniając wygodę wszystkim użytkownikom. Przestrzeganie tych zasad pomoże stworzyć wysokiej jakości i efektywny projekt, który przyciągnie uwagę i poprawi doświadczenia użytkownika.

UX Archive

UX Archive oferuje starannie wyselekcjonowane interfejsy mobilne dla platform iOS i Android. Kolekcja obejmuje znane produkty, takie jak Twitter, Reddit, Revolut, Unsplash, GitHub, Discord i Shopify. Warto zauważyć, że większość interfejsów została opublikowana w 2020 roku i od tego czasu nie była aktualizowana. Dzięki temu UX Archive jest cennym źródłem wiedzy do badania projektowania UX w aplikacjach mobilnych i analizowania podejść stosowanych przez wiodące firmy w swoich aplikacjach.

Po rejestracji w katalogu użytkownicy mają dostęp do ponad 150 aplikacji i ponad tysiąca przepływów. Mogą je również zapisywać w ulubionych i przesyłać obrazy. Dzięki temu łatwiej znajdziesz potrzebne zasoby i z nich skorzystasz.

Awwwards

Awwwards oferuje nie tylko główny katalog stron, ale także wygodne wyszukiwanie według elementów. Po rejestracji użytkownicy mogą zapisywać ulubione ekrany jako zakładki i tworzyć kolekcje oparte na własnych preferencjach. Pomaga to uporządkować inspiracje i uprościć proces znajdowania pomysłów na przyszłe projekty.

Zaletami katalogu jest to, że wiele elementów jest prezentowanych w formacie wideo i odtwarzanych automatycznie. Znacznie oszczędza to czas i pozwala użytkownikom lepiej zorientować się w cechach wizualnych elementów, prezentując je w animacji.

Katalog elementów zawiera różne moduły, takie jak logowanie, menu, galeria, strona 404 i inne. Dostępne są również funkcje projektowe, takie jak kompozycja, schematy kolorów i ilustracje, a także elementy interakcji, takie jak animacje i przewijanie. Platforma Awwwards publikuje głównie strony promocyjne, dlatego katalog nie oferuje skryptów. Dostępny jest jednak konfigurowalny filtr według nagród, który ułatwia znalezienie najlepszych przykładów projektowania stron internetowych.

Przepływy stron

Przepływy stron to obszerny zbiór nagrań przepływów i zrzutów ekranu odzwierciedlających różne scenariusze korzystania z konkretnego produktu. Katalog jest dostępny w dwóch wersjach: na komputery stacjonarne i urządzenia mobilne, z osobnymi opcjami wyszukiwania dla każdej z nich, nawet dla produktów tej samej marki. Warto zauważyć, że filtry nie rozróżniają systemów iOS i Android, co upraszcza proces wyszukiwania i analizy.

Dostępny jest również katalog newsletterowy z możliwością filtrowania według branży. Warto jednak zauważyć, że większość materiałów w tym katalogu jest dostępna wyłącznie w ramach subskrypcji.

Rozszerzony katalog jest dostępny wyłącznie w wersji płatnej. Przejście na plan płatny kosztuje 39 USD kwartalnie lub 99 USD rocznie. Dla firm zatrudniających od 3 do 10 pracowników koszty dostępu wahają się od 199 do 600 USD. Wersja płatna zapewnia dostęp do dodatkowych funkcji i ulepszonych treści, co znacznie zwiększa efektywność korzystania z katalogu.

Strona marki zawiera nagrania ekranowe prezentujące postęp poszczególnych przepływów. Poszczególne ekrany znajdują się pod nagraniami. Średnia długość skryptowanego screencastu wynosi 3–4 minuty, a prędkość odtwarzania można dostosować, aby zwiększyć tempo oglądania.

Studia przypadków są regularnie aktualizowane, ale jeśli zauważysz, że nagranie jest nieaktualne, możesz wysłać prośbę o jego aktualizację. Pomoże to zachować aktualność informacji i poprawić jakość treści.

Świetnie, bardzo ładnie

Świetnie to przydatne źródło dla projektantów stron internetowych, które oferuje dostęp do niezbędnych narzędzi, bibliotek, przypadki, samouczki i szablony. Strona zawiera również zbiór nowoczesnych modułów interfejsu użytkownika, które mogą pomóc w ulepszeniu wizualnego wyglądu projektów internetowych.

Katalog zawiera podstawową wyszukiwarkę różnych typów modułów, takich jak nawigacja, ceny, wyszukiwanie, listy, polecenia, rejestracja i inne. Chociaż nie ma dodatkowych filtrów, każda wybrana strona modułu zawiera listę słów kluczowych, umożliwiając użytkownikom zawężenie wyszukiwania i znalezienie bardziej szczegółowych komponentów interfejsu użytkownika. Ułatwia to użytkownikom znalezienie potrzebnych elementów i sprzyja efektywniejszemu korzystaniu z katalogu.

Z poziomu modułu użytkownicy mogą uzyskać dostęp do strony marki, na której wyświetlane są wszystkie bloki katalogu. Umożliwia to użytkownikom łatwe przeglądanie pełnego asortymentu i dostęp do wszystkich produktów powiązanych z wybraną marką. Strona marki zawiera szczegółowe opisy produktów, ich cechy i zdjęcia, co pomaga w podjęciu bardziej świadomego wyboru.

Dowiedz się więcej o projektowaniu na naszym kanale Telegram. Subskrybuj aktualizacje i bądź na bieżąco z najciekawszymi nowinkami i trendami w świecie designu!

Studiowanie materiałów związanych z tematem może znacznie poszerzyć Twoją wiedzę i zrozumienie. Zalecamy skupienie się na istotnych źródłach informacji, które pomogą Ci zgłębić temat. Różnorodne zasoby dostarczą Ci przydatnych spostrzeżeń i praktycznych porad. Bądź na bieżąco z najnowszymi trendami i odkryciami w tej dziedzinie.

• 15 najlepszych projektów projektowych lata 2023: Wybór redakcji
• Jak wykorzystać sieci neuronowe w projektowaniu UX/UI?
• „Myślałem, że nie znajdę pracy bez wyższego wykształcenia. A teraz jestem projektantem UX w USA!”
• „Interfejs”: Podstawy projektowania systemów humanitarnych