Share
Z-Layout är ett bra sätt att starta nästan alla webbdesignprojekt eftersom det tar upp kärnkraven för en effektiv webbplats: branding, hierarki, struktur och uppmaning till handling. Medan den klassiska "Z-Layout" inte kommer att vara den perfekta lösningen för varje webbsida där ute, är det verkligen en layout som är effektiv nog för att motivera införandet i någon webbdesigners arsenal av layoutidéer.
Att uppnå bättre förståelse för hur olika layouter kan ändra användarbeteende är en av de centrala principerna för att skapa en effektiv användarupplevelse.
Det här inlägget markerar det första i en serie där vi undersöker det stora utbudet av layoutparadigmer som finns i världen av webbdesign. Målet: att bättre förstå Varför du kan välja ett layoutkoncept över en annan. I denna serie tittar vi också på "F" -formade mönstret, den öppna layouten och några av lådans layouter som säkert ger dig några bra idéer. Att uppnå bättre förståelse för hur olika layouter kan ändra användarbeteende är en av de centrala principerna för att skapa en effektiv användarupplevelse.
Förslaget till Z-Layout är faktiskt ganska enkelt: super-pålägg bokstaven Z på sidan. Placera de objekt som du vill att läsaren ska se först längst upp i Z. Ögnet följer naturligtvis Z-vägen, så målet är att placera din "call to action" i slutet. Hela vägen kan du inkludera bitar av information som bygger upp till call-to-action. Låt oss ta en titt på diagrammet:
Observera att vi har numrerat de viktigaste punkterna längs vägen - dessa representerar den ordning i vilken en läsare kan se sidinnehållet. Låt oss se hur det här översätts till en faktisk layout:
Låt oss nu lägga över Z-diagrammet ovanpå layouten:
Enkelt, eller hur? Det är verkligen inget komplicerat om denna layout - men det flyttar snabbt och effektivt ögat från punkt 1 till punkt 4 i en logisk ordning - avslutas med ett kraftfullt tillvägagångssätt. Det finns fortfarande några saker som vi kan göra för att krydda denna layout upp men ... så låt oss lägga till några saker i designen:
Här kan du se att den nya "sign up" -knappen i navigeringen sticker ut mer. "Slider" som vi har lagt till i leaderboardområdet hjälper till att hålla användarens uppmärksamhet inom ramen för ramen. De 2 ikonerna bredvid innehållsblocken i punkt 3 hjälper också till att göra dem lite mer visuellt intressanta. Återigen - det här är enkelt som det kan vara, men enkelt kan vara bra när det gäller webbdesign! Du kan laga komplexitet som du vill, men förbise inte kraften i en enkel och effektiv layout.
Z-Layout behöver absolut inte vara den sista konkreta lösningen för alla sidor, men som jag nämnde tidigare är det ofta en bra hoppa av punkt för något designprojekt eftersom det klarar av de fyra stora principerna för en effektiv design:
Det fungerar eftersom de flesta västläsare kommer att skanna en webbplats på samma sätt som de skulle skanna en bok - uppifrån och ner, åt vänster till höger. Från den här enkla grunden kan du ganska mycket gå någonstans: Lägg till flera samtal till handling, krympa Z-höjden, förläng det, gör vad du vill ha det meningsfullt för webbplatsens mål.
Låt oss ta en titt på några bra sajtdesigner som använder Z-Layout som grundstruktur. En sak som du vill notera i dessa exempel är hur z-layouten kan anpassa sig. Åtgärden till handling kanske inte alltid är densamma (vissa webbplatser kanske vill driva dig till sin portfölj mer än de vill "registrera dig"); Innehållet längs vägen kan se markant annorlunda än vårt exempel. Saken att märka är hur berättande aspekten bärs över: 1, 2, 3, Action! Genom att flytta ögat längs Z-banan ökar chansen att en tittare slutar göra vad du vill att de ska göra, ökat.
Medan du ser på dessa exempel, försök hitta Z-sökvägen som designern vill att du ska följa.
Evernote ser komplex vid första anblicken, men en närmare inspektion visar en z-väg som slutar med "nedladdning" -knappen. 
Mycket enklare, Daina Reed-webbplatsen levererar ett par snabba bitar av information, och ber om en "komma i kontakt" -åtgärd. 
Banan på CodeMonkey börjar på logotypen och slutar på "Komma igång". 
Det är lite svårare att se här på grund av duokromet paletten, men z-layouten skapar den allmänna ramen. 
Detta exempel slutar med en ljus, fet prismärke. 
Förmodligen en av de tydligaste användningarna av Z-Layout, träffar Blue Acorn-designen varje punkt längs banan. 
Kampanjmonitorens design blandar upp layouten, men 1, 2, 3, 4 steg är alla intakta. Det är viktigt att notera att Z-Layout inte är det enda layoutparadigmet som finns där ute. Heck, det finns ungefär lika många layouter som det finns bokstäver i alfabetet. Z-Layout är en av de grundläggande layouterna eftersom den är så enkel att använda som en grund, men du vill alltid lita på dina instinkter när det är dags att göra ett slutligt layoutbeslut.
... Oavsett vilken specifik layoutdesign som helst, är tittarna mer benägna att först titta på de största, ljusaste och mest kontrasterade elementen på en sida.
Det har varit en massa intressanta studier gjorda på ögonspårning som föreslår att man försöker förutspå ögonrörelse över en webbplats är ungefär lika stor som att skicka 1000 barn i en godisaffär. Flera studier har också visat att den "F" -formade layouten (som vi kommer att granska nästa i denna serie) är effektivare för att styra en betraktarens ögonrörelse över en sida. Den enkla sanningen är att, oberoende av någon specifik layoutdesign, är tittarna mer benägna att först titta på de största, ljusaste och mest kontrasterade elementen på en sida. Tänk på detta; om ditt mål är att styra en tittare genom Z-Layout, ge dem inte mer möjlighet att bli distraherade under vägen än de redan har.
Där Z-Layout verkligen lyser är i designprojekt där enkelhet och uppmaning är de viktigaste principerna. Att försöka tvinga en Z-Layout på en komplicerad innehållsstruktur kommer nog inte fungera bra men att Z-mönstret kan bilda en ram för en mycket grundläggande webbplats kan ge en orderordning som kan bidra till att öka din konverteringsfrekvens.
Kolla in "F" -formad mönsterpost!
åh! Kolla in en lista med lagermallar som använder Z-Layout här.
Accentsconagua