4 způsoby, jak navrhnout perfektní Split obrazovky domovské stránky
Jedna obrazovka rozdělená na dvě.
Technologie rozdělené obrazovky je již dlouho známa ve filmovém průmyslu, s ranými příklady, které se datují do tichých filmových dnů počátku 20. století a jsou dnes populárním přístrojem ve filmu a televizi.
Rozložení rozdělené obrazovky se používá v případě, že prvky s plnou obrazovkou jsou rozděleny do dvou nebo více vertikálních částí. Scéna z filmu "Scott Pilgrim vs. svět"
Nicméně jde o relativně novou techniku pro web design. Rozdělené obrazovky se staly populární až kolem poloviny roku 2016 a nyní máme stále více webů, které používají tento návrhový vzor. Existuje několik důvodů, proč se takový návrhový vzor stal tak populárním:
- Má krásnou estetickou kvalitu. Při správném spuštění může uživatelům nabídnout nádherný zážitek ze sledování.
- Je to dobrá volba pro citlivé rámce. Rozložení obrazovky lze přizpůsobit různým obrazovkám, dokonce i malým. Pokud jde o menší obrazovky, jako jsou mobilní displeje, mohou být panely skládané.
- Pomáhá navigaci. Pomocí jednoduchých konstrukčních technik můžete přitáhnout pozornost uživatele na určitou část obrazovky nebo jej povzbudit ke kliknutí.
Když Split Screen funguje jako nejlepší
Split-screen je zvláště dobrý, když máte dvě věci k propagaci. Například pokud stránky nabízejí dvě naprosto odlišné varianty. Tento přístup umožňuje návrhářům vyzdvihnout obě věci a dovolit uživateli rychle vybrat mezi nimi.
Jedna obrazovka, dvě zprávy v příručkách Dropbox
Když byste se měli vyvarovat rozdělení obrazovky
Projekty s rozdělenými obrazovkami se nerozšíří tak, jak se obsah rozšiřuje, a proto se nedoporučuje používat je na obsahově náročné rozvržení. Je důležité, aby obrazovky byly jednoduché, protože složité rozdělené obrazovky způsobují, že uživatelské rozhraní vypadá přetížené informacemi. To je důvod, proč rozložení obrazovky by bylo perfektně vhodné pro minimalistické návrhy webových stránek.
Jak se rozhodnout, zda je rozdělená obrazovka pro vás dobrá
Pokud uvažujete o technice rozdělené obrazovky pro vaše webové stránky, doporučuji vám, abyste si položili několik otázek:
- Je vhodný pro váš obsah?
- Bude mít dostatek negativního prostoru pro to, aby rozložení fungovalo?
- Pomohou vaši uživatelé rozvržení nebo je zaměnit?
- Bude v pořádku rozdělit pozornost uživatelů na polovinu?
Nejdůležitější je mít na paměti, že obsah je král a rozdělená obrazovka by měla být jednoduchým způsobem, jak doručit lidem zprávu.
Techniky návrhu pro rozdělené obrazovky
1. Pár vibrujících barev a dramatická typografie
Díky plošnému a materiálovému designu jsou nyní živé barvy a dramatická typografie. Vibrující barvy jsou vizuálně stimulující a dramatická typografie zvyšuje obsah textu. Jednoduše je kombinujte a vytvořte vizuálně zajímavý design. Baesman to udělal mistrovsky. Věnovali oběma prvkům stejnou důležitost a současně umožnili uživateli rychle volit mezi nimi.
Jasné barvy a zajímavé dvojice typografií mohou zvýšit zájem
2. Připojte pozornost uživatele k tlačítku CTA
Mnohem víc než jen jednoduchý grafický trend, rozdělení obrazovky na dvě odlišné části poskytuje originální způsob, jak přenést uživatele do vašeho webu. Je to skvělá volba, pokud chcete vytvořit větší kontaktní místo pro výzvy k akci. V níže uvedeném příkladu můžete vidět, jak negativní prostor vytváří vertikální dělení, čímž dává stejnou váhu dvěma různým možnostem.
Vertikální rozdělení umožňuje zdůraznit dvě odlišné CTA, aniž by to upřednostňovalo
3. Vytvořte vizuální tok mezi "obrazovkami"
Pokud rozdělená obrazovka představuje jeden objekt, je důležité vytvořit spojení mezi kontejnery obsahu. Jedním z možných způsobů je barva. Jednoduše duplikujte odlišnou barvu, abyste vytvořili vizuální tok mezi dvěma obrazovkami. To funguje zvláště dobře s barvou značky nebo odstínem s velkým kontrastem. Pomocí barvy je možné komunikovat silnější spojení mezi dvěma částmi obsahu.
Dalším možným způsobem, jak vytvořit silné spojení, je navrstvení jednoho prvku, například kopírování textu na obrazovkách:
Přesahující text spojuje dvě obrazovky
V neposlední řadě můžete pro tento účel použít barevný překryv:
Zvažte levou část obrazovky
4. Použijte animaci k povzbuzení uživatelů k jednání
Jemné animace a interaktivní efekty povzbuzují uživatele, aby klikli. Podívejte se na design použitý pro " Čechov žije "Níže. Návrh vás prosí, abyste klikli, abyste našli svou postavu.
Závěr
Trvá přibližně tři sekundy, než může návštěvník rozhodnout o vašem webu. Následně by vaše rozvržení mělo být vždy příjemné pro návštěvníky, pokud chcete snížit míru odchodů. Technologie Split-screen vám s tím může pomoci. Projekty s rozdělenými obrazovkami jsou zábavné, funkční a citlivé způsoby, jak vytvořit dokonalý design.