4 sposoby zaprojektowania idealnego ekranu podzielonego ekranu
Jeden ekran podzielony na dwa.
Technika podzielonego ekranu od dawna jest znana w przemyśle filmowym, a wczesne przykłady sięgają dni kina niemego z początku XX wieku, i jest to nadal popularne urządzenie w dzisiejszym filmie i telewizji.
Układ podzielonego ekranu jest używany, gdy elementy pełnoekranowe są podzielone na dwie lub więcej części pionowych. Scena z filmu "Scott Pilgrim vs the World"
Jest to jednak stosunkowo nowa technika dla branży projektowania stron internetowych. Podział ekranów stał się popularny dopiero w połowie 2016 roku, a teraz mamy coraz więcej stron internetowych, które wykorzystują ten wzorzec projektowy. Jest kilka powodów, dla których ten wzór stał się tak popularny:
- Ma przyjemną estetykę. Po prawidłowym wykonaniu może zaoferować użytkownikom wspaniałe wrażenia wizualne.
- Jest to dobry wybór dla responsywnych frameworków. Projekt podzielonego ekranu może być dostosowany do różnych ekranów, nawet małych. Jeśli chodzi o mniejsze ekrany, takie jak wyświetlacze mobilne, panele mogą być układane w stos.
- Pomaga w nawigacji nawigacyjnej. Korzystając z prostych technik projektowania, możesz zwrócić uwagę użytkownika na określoną część ekranu lub zachęcić ich do kliknięcia.
Kiedy Split Screen działa najlepiej
Podzielony ekran jest szczególnie dobry, gdy masz dwie rzeczy do promowania. Na przykład, gdy witryna oferuje dwie zupełnie przeciwne odmiany. Takie podejście pozwala projektantom nadać znaczenie obu tym celom i umożliwić użytkownikowi szybkie wybieranie między nimi.
Jeden ekran, dwie wiadomości w Przewodniku Dropbox
Kiedy powinieneś unikać podzielonego ekranu
Projekty z podziałem ekranu nie rozszerzają się wraz ze wzrostem zawartości, dlatego nie zaleca się stosowania ich w układach zawierających duże ilości treści. Ważne jest, aby ekrany były proste, ponieważ złożone ekrany dzielą sprawiają, że interfejs wygląda na przeciążony informacjami. Właśnie dlatego układ podzielonego ekranu idealnie pasowałby do minimalistycznych projektów stron internetowych.
Jak zdecydować, czy podzielony ekran jest dobry dla Ciebie
Jeśli zastanawiasz się nad techniką podzielonego ekranu dla swojej witryny, radzę zadać sobie kilka pytań:
- Czy pasuje do twoich treści?
- Czy będzie wystarczająco dużo miejsca, aby układ działał?
- Czy Twoi użytkownicy docenią układ, czy to je zmyli?
- Czy podzielenie uwagi użytkowników na połowę będzie w porządku?
Najważniejszą rzeczą, o której należy pamiętać, że treść jest królem i podzielonym ekranem powinna być prosta metoda dostarczania wiadomości ludziom.
Techniki projektowania dla ekranów podzielonych
1. Para żywe kolory i typografia dramatyczna
Dzięki Płaskim i Materialnym Projektom żywe kolory i dramatyczna typografia to obecnie wielkie trendy. Żywe kolory są wizualnie stymulujące, a dramatyczna typografia poprawia zawartość tekstu. Po prostu połącz te dwa elementy, aby stworzyć wizualnie interesujący projekt. Baesman zrobił to po mistrzowsku. Przywiązywały jednakową wagę do obu elementów, jednocześnie umożliwiając użytkownikowi szybkie wybieranie między nimi.
Jasne kolory i ciekawe pary typograficzne mogą wzbudzić zainteresowanie
2. Narysuj uwagę użytkownika na przycisku CTA
Znacznie więcej niż prosty trend graficzny, podzielenie ekranu na dwie odrębne części zapewnia oryginalny sposób poprowadzenia użytkownika przez twoją witrynę. Jest to doskonała opcja, gdy chcesz stworzyć większy punkt skupienia dla wezwań do działania. W poniższym przykładzie możesz zobaczyć, jak przestrzeń ujemna tworzy podział pionowy, aby nadać równą wagę dwóm różnym opcjom.
Podział pionowy pozwala podkreślić dwa różne wezwania do działania bez faworyzowania
3. Utwórz wizualny przepływ pomiędzy "ekranami"
Kiedy podzielony ekran reprezentuje pojedynczy obiekt, ważne jest ustanowienie połączenia między kontenerami zawartości. Jednym z możliwych sposobów jest użycie koloru. Wystarczy powielić wyraźny kolor, aby ustalić wizualny przepływ pomiędzy dwoma ekranami. Działa to szczególnie dobrze w przypadku koloru marki lub odcienia o dużym kontraście. Używając koloru, możliwe jest komunikowanie silniejszego połączenia między dwiema treściami.
Innym możliwym sposobem utworzenia silnego połączenia jest nawarstwianie pojedynczego elementu, takiego jak kopiowanie tekstu na ekranach:
Nakładający się tekst łączy dwa ekrany
Ostatni, ale nie mniej ważny, możesz użyć do tego celu kolorowej nakładki:
Rozważ lewą część ekranu
4. Użyj animacji, aby zachęcić użytkowników do działania
Dobra animacja i interaktywne efekty zachęcają użytkowników do kliknięcia. Spójrz na projekt zastosowany do " Czechow jest żywy "Strona poniżej. Projekt prosi o kliknięcie, aby znaleźć swoją postać.
Wniosek
Potrzeba około 3 sekund, aby odwiedzający podjął decyzję dotyczącą Twojej witryny. W związku z tym Twoje układy powinny zawsze być przyjazne dla odwiedzających, jeśli chcesz zmniejszyć współczynniki odrzuceń. Technika podzielonego ekranu może ci w tym pomóc. Projekty z podziałem ekranu są zabawne, funkcjonalne i responsywne, aby stworzyć ciekawy design.