UI na rozdelenej obrazovke sa stali populárnym spôsobom zobrazovania obsahu. Často si myslíme, že sa používajú v oblastiach, v ktorých chceme, aby si používatelia vybrali medzi dvoma možnosťami. Vidíme však aj iné tvorivé využitie tejto techniky. Napríklad rozdelená obrazovka sa môže veľmi dobre využiť aj ako úplné rozloženie stránky alebo dokonca ako animácia prechodu.
Tu je 10 príkladov používateľského rozhrania rozdelenej obrazovky, doplnených zdrojovým kódom, ktorý môžete upraviť podľa svojich potrieb. Každý z nich má čo ponúknuť.
Rozhodnúť sa
Toto je bezpochyby najbežnejší spôsob použitia rozdelenej obrazovky. Návštevník webovej stránky má dve možnosti. Tu farby na obrázku na pozadí poskytujú pekné oddelenie, zatiaľ čo zaoblené logo v strede ich spája dohromady.
Rozdelenie jazdca
Rozdelená obrazovka tiež vytvára zaujímavý prechodný efekt, ako vidíme v nasledujúcom príklade prezentácie. Posúvanie nadol spôsobí, že sa každá polovica obrazovky rozdelí a odhalí ďalší obrázok vo fronte. Výsledkom je veľmi plynulé a špičkové užívateľské rozhranie.
Rozloženie stránky so statickým bočným panelom
Vďaka displejom v rozlíšení HD a 4K začínajú nové dizajnéri využívať viac dizajnérov, ktorí využívajú tento priestor na obrazovke. Toto vzorové rozloženie poskytuje statický bočný panel s tučným obrázkom na pozadí. Vyzerá to však skvele aj na menších obrazovkách, pretože tento bočný panel sa stáva hlavičkou. Je atraktívny a funkčný.
Pre porovnanie
Ďalším trendom, ktorý získava pôdu, je použitie rozdelenej obrazovky na porovnanie obrázkov „pred“ a „po“. Tu máme nastavenie, ktoré umožňuje používateľom jednoducho pohnúť myšou, aby videli rozdiely medzi dvoma obrázkami. Používaním iba malého kódu JavaScript je toto používateľské rozhranie zaujímavým zvratom v technike.
Alternatívna galéria
Efekt posúvania „napoly na polovicu“ v tomto príklade dodáva jedinečný dojem. Zdá sa, že karty a fotografie sa pri posúvaní striedavo ukladajú na seba. A keďže používa menej ako 150 riadkov čistého CSS, čas načítania by nemal byť veľkým problémom.
Rozloženie časopisu
Tento dizajn napodobňuje niečo, čo nájdete v tlačovom časopise. Tučný titulok a úvodný text naľavo poskytujú vynikajúci kontrast k fotografickému a viac stĺpcovému článku napravo. Celkovo to vyzerá veľmi štýlovo a profesionálne.
Zhrnutie služieb
Táto koncepcia je z pohľadu značky skutočne cool. Používa rozdelenú obrazovku na stránke, na ktorej je vľavo statická správa o značke, v kombinácii s posúvacím zoznamom služieb ponúkaných napravo. Je to len iný spôsob, ako sa trochu vymaniť z davu.
Efekty posúvania rozdelenej obrazovky
Veľmi často vidíme krásne rozloženie rozdelenej obrazovky, ale nie z hľadiska interaktivity. Nasledujúci príklad pridáva chýbajúcu zložku s niektorými prechodmi v základnom merítku, keď nad ňou prejdete kurzorom myši. Dobrá vec na tom je, že poskytuje užívateľovi trochu extra vizuálneho podnetu.
3D karusel
Prechody medzi snímkami v tomto karuseli doslova dodávajú rozdeleným obrazovkám nový rozmer. Každá snímka je „rozdelená“ na polovicu, zatiaľ čo ďalšia snímka je odhalená v chladnom 3D formáte. Tu je určitá kvalita podobná stroju, ktorá by mohla byť skvelou voľbou pre strojársku alebo priemyselnú spoločnosť.
Split Reveal
Postup rolovania po stránke sa môže nudiť veľmi rýchlo. Je prekvapujúce, že v tomto postupe nespíme. Občas je dobré priniesť niečo iné ako vysídlenie, napríklad tento efekt zverejnenia. Animácia dodáva zážitku trochu osobnosti a vzrušenia. Môže dokonca pomôcť prilákať návštevníkov, aby sa viac zúčastnili na vašich stránkach.
Rozdeľ je rozdiel
To, čo začalo ako spôsob výberu medzi A alebo B, sa stalo niečím iným. Rozdelené návrhy a animácie ponúkajú dizajnérom ďalšiu tvorivú cestu na podporu interakcie. Aj keď ich stále vidíme vo svojej tradičnej podobe, zisťujeme tiež, že sa používajú na vylepšenie vecí, ako je napríklad posúvanie obsahu a galérie obrázkov. Dokonca sa používa na napodobňovanie techník tlačového dizajnu.
Dúfajme, že príklady uvedené vyššie budú inšpirovať spôsoby, ako pridať rozdelené užívateľské rozhranie k vašim vlastným projektom. Bavte sa experimentovaním a implementáciou funkcií, ktoré vyzerajú skvele a pridávajú do zmesi niečo jedinečné.
