Den hetaste - och kanske mest talade om - gadget där ute idag är 3D-skrivaren. Det är ett verktyg som sannolikt kommer att revolutionera hur produkterna görs. Men det finns också ett annat tredimensionellt ämne som gör vågor i designvärlden - 3D-bilder.
Trots att webbdesign verkligen lever i två dimensioner, hindrar den inte designers från att böja sina kreativa muskler och skjuta gränserna på skärmen med fler objekt och projekt som har en verklig känsla. Låt oss ta en titt på hur du kan dra nytta av 3D-trenden.
Arbetar i tre dimensioner
När det gäller webbdesign är tredimensionella effekter sannolikt att de faktiskt bor i ett 2D-utrymme. (Speciellt för att försöka sätta ihop något som kräver speciella glasögon är inte särskilt effektivt. Hur skulle du veta vilka användare som hade dem?)
När det gäller användning kan 3D-effekter fungera ganska bra för en mängd olika sidalternativ. Från gränssnitt för spelstil till shopping och produktidentifiering kan ett gränssnitt som användare nästan berör, visa sig vara ganska användbart.
Det blir också trendigare att integrera 3D-effekter och stilar i designen. Precis som designers började tänka 3D för några år sedan stoppade den galna populariteten hos plattdesign trenden, för att efterlikna en verklig estetik kräver att tekniker som avskräcktes som platt fick fart. Effekter som drop-skuggor, vinkel och prägling är avgörande när det gäller att skapa skärpedjup i 2D till 3D-rymden.
En utvecklande trend
Så hur kan du göra det mesta av denna ständigt växande trend? Blanda och matcha den med andra trendstilar för maximal effekt.
Här är några saker att tänka på när det gäller att använda 3D-bilder:
- Lägg till en realistisk känsla för element som användare kommer att vilja röra
- Lägg till djup i spel eller videoelement
- Gör det till en del av gränssnittet med parallaxrullning
- Överväldiga inte användarna och håll dig till ett 3D-trick i designen
- Håll resten av designen enkel
- När det gäller användbarhet, vägleda användarna genom att navigera eller använda verktyg
Layering och materialpåverkan
Att arbeta med 3D-effekter ökar tack vare Material Design. Det Google-baserade konceptet har hjälpt till att återställa några av de tekniker och effekter som gick ur mode med mer platta och minimala stilar.
Detta inkluderar användningen av droppskuggor - ja, de är tillbaka. Men de tar noggrannare överväganden så att fallskuggor alltid mimar ljus från en? Källa.? Det betyder att skuggor ska se naturliga ut eftersom ett element har djup, inte existerande för att markera lite text eller ett objekt.
Medan du inte vill bli galen med skuggor är små skuggor på flera objekt OK. De bästa skuggorna är de som tjänar ett syfte men är inte uppenbara för den lediga användaren. Om någon kan? Se? skuggan, det är förmodligen för mycket. Välj skuggor som är bleka, mjuka och betona verkligheten.
Ett av nyckelbegreppen för materialdesign är idén om att lägga föremål på planen. Dokumentationen betonar även användningen av 3D-utrymme:
Materialmiljön är ett 3D-utrymme, vilket innebär att alla objekt har x-, y- och z-dimensioner. Z-axeln är vinkelrätt inriktad mot skärmens plan, varvid den positiva z-axeln sträcker sig mot betraktaren. Varje ark av material upptar en enda position längs z-axeln och har en standard 1 dp tjocklek, motsvarande en pixel tjocklek på skärmar med en pixeldensitet på 160.
På nätet används z-axeln för layering och inte för perspektiv. 3D-världen emuleras genom att manipulera y-axeln.
Så när man tänker på 3D, är det lika viktigt att överväga hur objekt rör sig och interagera, eftersom det är att tänka på designteknikerna som är inblandade i att skapa dem.
3D Illustrationer och Animation
En av de platser där du verkligen kan ta 3D-visuella till nästa nivå är med illustrationer, objektbilder och animeringar. Online-återförsäljare gör i synnerhet ett bra jobb med att integrera 3D-animerade effekter i produktsidor.
En av de bästa användningarna av detta är med 360 graders visningsalternativ för produkter som kunderna nästan kan flytta och undersöka med några klick eller kranar. Converse gör ett bra jobb med detta med sina sidor. Användare kan flytta varje show runt för att se den från någon vinkel, plus byta färger och andra alternativ allt på en duk som gör att användaren känner att han eller hon befinner sig i en miljö som håller skon och tittar på den.
Detta är en effektiv användning av 3D-visuella för webbdesign. Det är komplicerat och coolt men överväldigande användarvänligt. (Det är det verkliga tricket att göra detta - eller någon designteknik, faktiskt - fungerar på ett sätt som är meningsfullt för användarna.)
Tips och tricks
När det gäller 3D-visuella är det enklare att bättre. Du vill inte överväldiga användare med för många effekter eller element som bara är för show. Eftersom tredimensionell design är en visuell illusion på den platta webbsidan, är det viktigt att inte bli galen med tricks. Fokusera på användbarhet av innehållet och bestämma därifrån om 3D är rätt sätt att gå.
När det gäller att använda 3D, håll dessa tips i åtanke:
- Använd 3D för att skilja objekt från deras omgivande (lager)
- Syfta för subtila droppe skuggor eller prägling, och kom ihåg att överväga en? Naturlig? ljuskälla när det gäller vinklar och placering
- Det måste se riktigt ut
- Gradienter och höjdpunkter kan också skapa djup och läggning
- Använd 3D-effekter konsekvent över sidor
- Om 3D är associerad med en åtgärd, till exempel ett klick, ger signaler som hjälper användaren att förstå vad man ska göra (knappar är ett vanligt 3D-element)
- Skala element på lämpligt sätt; 3D är en illusion av verkligheten, så föremål ska känna sig riktiga? i storlek, vikt och miljö
Slutsats (och ett försiktighetsord)
Nu vad du vill undvika slutar med 3D typografi eller bildspråk som ser ut som ordkonst från tidiga ordbehandlare. (Du kan bli fast och sluta med detta resultat snabbare än du tror.)
Tricket till tredimensionella effekter är subtilt. Det borde finnas element i verkligheten och layering, men det borde inte vara ett uppenbart trick? eller effekt. Goda 3D-effekter uppmuntrar användarna att engagera och spela med gränssnittet tack vare en teknik som hjälper dem mer intuitivt att veta vad de ska göra.