Ändringar i Apple.Com Design
Apple.com har genomgått vissa justeringar av sin design under den senaste veckan eller så, ändrar det, om du inte betalade noggrann uppmärksamhet, kanske du inte ens har märkt det.
Även om många rapporter refererar till detta som en "redesign", tycker jag att det är svårt att klassificera det som sådant. Det finns säkert några betydande förändringar, men förändringarna är inte precis en fullständig översyn vilket var fallet för CNN.com i slutet av 2009.
Ändå är förändringarna viktiga för webbdesigners, så jag ska kort titta på dem här. Om det finns något om de förändringar som jag har försummat att nämna, var god att kommentera.
En nyutvecklad navigeringsrad
Den viktigaste förändringen (om än fortfarande en ganska subtil) är utseendet på navigeringsfältet. Apple har en av dessa navigeringsstänger som, design-wise, alla älskar och envies. Det verkar omöjligt att det kan förbättras. Tja, de kunde på något sätt hitta sätt att göra det ännu bättre och mer intuitivt.
Här är den gamla navigeringsfältet:
Här är det nya:
Ändringar inkluderar:
- Det är mörkare
- Gradienten har ersatts av en starkare glansig look
- Logotypens utseende förenklas
- Sökrutan är mindre (mer om det nedan)
Jag tror att det verkligen tar ett bra team av designers att göra vad som verkligen är ganska signifikanta förändringar i utseendet på ett mycket viktigt användargränssnitt, samtidigt som man får intryck av att inget har förändrats. Det visar bara att visuella detaljer ofta inte är lika viktiga som den övergripande känslan av designen.
Den flexibla sökrutan (endast WebKit)
Att vara uppenbarligen WebKit-partisk har Apple-designteamet inkluderat några förbättringar av WebKit, varav en är associerad med sökrutan.
I de flesta webbläsare kommer klickningen i sökrutan att lysa bakgrunden till en mer läsbar vit. I Chrome eller Safari animerar sökrutan med CSS3 Transitions att bli bredare och möjligen lite mer användbar. Skärmbilden nedan visar sökrutan i Chrome efter att den har animerats för att bli bredare:
För att rymma storleken på sökrutan ändras de andra navigeringsobjekten och logotypen.
Jag gillar den här funktionen; det lägger till en känsla av intuitivitet. Men det har enligt min mening ett litet fel: det går inte tillbaka till sitt ursprungliga tillstånd när du tar bort fokus. Självklart, om något var skrivet i sökrutan så skulle du inte vilja att storleken ändras, men jag tror att den ska återgå till sin normala status om den förlorar fokus och förblir tom.
Naturligtvis, eftersom det är extremt osannolikt att någon kommer att klicka i sökrutan och inte skriva någonting, antar jag att det här är en obetydlig försummelse.
Navigationsfältets animerade inmatning (endast WebKit)
En annan liten WebKit-bara funktion är den animerade inmatningen i navigeringsfältet. Jag kommer inte ihåg att se den här effekten på sin webbplats innan, så jag antar att det här är en annan ny funktion. Den animerade posten händer bara på hemsidan och endast en gång per webbläsarsession. Detta är bra träning och en bra lektion för utvecklare att lägga animerade effekter till sina gränssnitt.
Som visualiseras i skärmstången ovan, går navigeringsfältet från skärmen, förmodligen med hjälp av CSS3-nyckelbildsanimering, tillsammans med JavaScript för att styra när animationen ska eller ska inte inträffa.
De animerade produktbläddrarna (endast WebKit)
Ett annat senare tillägg är användningen av animering på några av produktsidorna. CSS3-baserade animeringar används på Mac och iPod produktbläsare, varav en visas nedan:
Produkterna animerar när du först kommer till sidan, och om du växlar mellan underkategorier, skar de synliga produkterna bort och nya hoppa in i deras plats. Detta görs via CSS3 keyframe-baserad kod, av vilka några visas nedan:
På webbläsare utan webbläsare växlar produktbläsarens animering till enkel JavaScript-baserad blekning. Även om den här typen av saker inte är idealisk under alla omständigheter (eftersom det i huvudsak utgör "code forking") är det ett realistiskt alternativ för utvecklare och designers idag som vill koda för bästa möjliga webbläsare och ge mindre förbättrad funktionalitet för resten .
Sökrutan Auto-Suggest
[UPDATE] Som påpekats av ett antal personer i kommentarerna är auto-suggesten inte en ny funktion. Vårt införande av detta som en "ny funktion" grundades på en annan artikel som rapporterade att auto-suggest var ny. Vi kommer ändå att behålla det här avsnittet eftersom det är en bra funktion som har potential att göra en webbplats lite mer användbar och utgör ett bra exempel för andra utvecklare och designers att följa om det passar deras projekt.
Den Ajax-drivna auto-suggest-rullgardinsmenyn visas när du skriver en sökfråga:
Som visas i skärmbilden ovan, visas inte bara nedrullningsresultaten, som matchar de typade tecknen, men resultaten följs av produktbilder och beskrivningar. Jag tycker att bilderna är mer värdefulla på denna plats än beskrivningarna, men överlag har det potential att effektivisera produktsökning och omvandlingar.
Något annat?
Det verkar täcka de stora förändringarna i den senaste re-tooling av Apple.com-designen. Finns det några andra väsentliga förändringar i designen eller koden som jag inte nämnde här?
Detta inlägg skrevs uteslutande för Webdesigner Depot av Louis Lazaris, en frilansskribent och webbutvecklare. Louis körs Imponerande Webs där han postar artiklar och handledning om webbdesign. Du kan följ Louis på Twitter eller ta kontakt med honom via hans hemsida.
Vad tycker du om ändringarna i Apple.com-designen? Finns det några ändringar som vi inte har nämnt här?