Webbdesign med en skärm-estetik är en trend som fortsätter att utvecklas och växa. En delad skärmdesign kan vara bra av ett antal skäl, inklusive mobilkompatibilitet och användarvänlighet. Plus, många av dessa mönster ser bara bra ut!
Skift i trenden visar att det finns så många olika sätt att skapa en effektiv splitskärmsdesign som användarna kommer att älska. Tänk på din introduktion till split-screen design i den nya och förbättrade tiden!
Fördelar med Split Screen Design
De fungerar bra när det finns två bitar innehåll som användaren behöver se direkt. Split skärmdesign fortsätter att växa i popularitet eftersom de kan vara mycket effektiva. De fungerar bra när det finns två bitar innehåll som användaren behöver se direkt. Samma idé gäller innehåll som kräver att användaren väljer att fortsätta, till exempel att välja en innehållsväg.
Designers använder skärmdesign eftersom de är effektiva. De främsta anledningarna till att använda en delad skärmdesign är att:
- Uppmuntra användaren att göra ett val - välj detta eller så
- Markera en vertikal bild
- Skapa en gemensam upplevelse på skrivbord och mobila enheter
- Upprätta ett visst visuellt flöde (till ett samtal till handling)
- Skapa ett designmönster som arbetar med andra designtekniker och trender
- Skapa en bild som skiljer sig från så många helskärmshemsidor eller differentierar mellan olika typer av innehåll på en webbplats
Det fina med splitskärmsdesign är att de arbetar med det lyhörda formatet vackert. Du får dubbelt innehåll på skrivbord och staplat innehåll på mobila skärmar. Oavsett enheten känner användaren inte att han eller hon saknat något genom att ändra enhetstyp.
?Klassisk? Split Screen Design
Det kan vara lite snart att ringa skärmdesignen estetisk? Classic ?, men med tanke på den takt som webbdesigntrender rör sig, är det inte bortom det.
Vi har skrivit om split-screen design här sedan 2015. Den var utrustad som en topp design trend i 2017 och en trend du behöver försöka 2018. Så vad väntar du på?
Det här är därför vi gillade det då (och nu):
- Split-skärmdesign kan vara ett bra val för lyhörda ramar. På större skärmar är designen uppdelad men när det gäller mindre skärmar kan panelerna staplas.
- Det är lätt att arbeta i animering och effekter som uppmuntrar klick baserat på innehållet.
- Två symmetriska paneler gör det enkelt att skapa en modulär kontur för hela webbplatsdesignen och organisera innehållet i blocken.
Utveckling av delade skärmar
Det finns ett skifte till fler minimalt utformade splitskärmar. Medan de första delade skärmdesignerna var ganska enkla - och symmetriska - är det inte hela historien längre. Designers använder fortfarande några av jämvikten splittrar, men arbetar också i splittringar som inte är nere i mitten av skärmen.
Vissa har mer zig-zag mönster, nätbaserade splittringar (tänk tre fjärdedelar och kvartskärmar) och splittrar skärmar med ojämna innehållsviktar. Det finns också en övergång till fler minimalt utformade splitskärmar.
Ursprungligen splittrade skärmar tenderade att vara lite viktiga eftersom de var utformade för att ta användaren på en resa genom en lämplig innehållskanal och innehållet behöver hjälpa dem att komma dit. Nu blir det valet effektiviserat ännu mer. (Det finns även några delade skärmdesigner som använder det visuella mönstret utan ett sådant eller det här valet, som exemplet ovan).
Split-skärmar med flera klickområden
En av de största förändringarna i split-screen designutvecklingen är att det finns flera klickytor i några av de nyare mönster. Där ursprungligen delade skärmar hade två CTA per skärm, innehåller dessa splittringar ofta annan information - och klickbara områden.
Exemplet ovan visar en delad skärm med en stark bild och meddelanden som är kopplade till e-handelslänkar. Det ser bra ut på skrivbord - med den stora bilden att dra dig in och staplar bara en trevlig mobil, vilket gör en mer trevlig shoppingupplevelse.
Inte så uppenbara Split-skärmar
Inte alla delade skärmdesigner är super uppenbara. (Tänk på att detta är lika mycket av en användarupplevelse trend som en visuell.)
I minimala konstruktionsscheman kan en delad bildskärm etableras med hjälp av ett rutnät, men utan färg eller bilder, skärmarna? ser ut som en. Owl Studios, ovan, gör det här bra. Ovanför rullningen ser det ut som en enkelskärmsdesign, under rullningen och på mobilen, blir splittret uppenbart.
Denna split-screen design är vacker och mycket användbar på alla enheter. Det är precis vad du borde försöka åstadkomma med denna webbdesigntendens.
Ett försiktighetsord
Medan du arbetar med vertikala splitskärmar kan du skapa några fantastiska användarupplevelser, du bör vara försiktig med horisontella delar. Dessa kan bli besvärliga och gå lite haywire snabbt!
De flesta användare förväntar sig samma webbplats på alla enheter.Exemplet ovan är faktiskt en bra webbplats och använder principerna för delad skärm långt under rullningen, men de två första skärmarna? misslyckas. Det finns nästan för mycket vitt utrymme och inte tillräckligt med meddelanden för att uppmuntra att rulla och den mobila UX saknas. Designen skulle fungera bättre med en vertikal split skärm här, behålla det vita utrymmet och CTA med videon bredvid den.
En horisontell delad skärm lämnar ofta dig med bilder med ett brett bildområde som inte är lång. Detta är ett svårt bildförhållande för att göra arbete på mobila skärmar. Medan du kan få det att fungera med en solid plan och olika uppsättningar av grödor, kan det leda till två olika användarupplevelser.
De flesta användare förväntar sig samma webbplats på alla enheter. Om du planerar att skapa olika upplevelser - även i bilder eller text - ha en bra konversation om det med ditt team och se till att detta är det bästa designvalet för projektet.
6 Split-Screen Designs Vi Älskar
Reach Digital
Paradise Pad
Nikos Pandazaras
Weima
Dr Roebuck s
Slutsats
Kan du se att du använder en skärmdesign i dina projekt? Om innehållstypen är rätt kan detta vara en mycket effektiv designteknik. Och det finns så många olika sätt att få det att fungera. Lycka till!