Endringer i Apple.Com Design
Apple.com har gjennomgått noen tilpasninger til designen den siste uken eller så, endrer det, hvis du ikke betaler nær nok oppmerksomhet, har du kanskje ikke lagt merke til.
Selv om mange rapporter refererer til dette som et "redesign", synes jeg det er vanskelig å klassifisere det som sådan. Det er sikkert noen betydelige endringer, men endringene er ikke akkurat en fullstendig overhaling som det var tilfelle for CNN.com i slutten av 2009.
Ikke desto mindre er endringene viktige for webdesignere, så jeg vil kort se på dem her. Hvis det er noe om endringene jeg har forsømt å nevne, vær så snill å kommentere.
En nyutviklet navigasjonslinje
Den mest signifikante endringen (om enn fortsatt litt subtil) er utseendet på navigasjonslinjen. Apple har en av disse navigasjonsbjelker som, design-wise, alle elsker og envies. Det virker umulig at det kan bli bedre. Vel, de var på en eller annen måte i stand til å finne måter å gjøre det enda bedre og mer intuitivt.
Her er den gamle navigasjonslinjen:
Her er det nye:
Endringer inkluderer:
- Det er mørkere
- Gradienten har blitt erstattet av sterkere glanset utseende
- Logoens utseende er forenklet
- Søkeboksen er mindre (mer om det nedenfor)
Jeg tror det virkelig tar et flott team av designere for å gjøre det som virkelig er ganske signifikante endringer i utseendet på et svært viktig brukergrensesnitt, mens du fortsatt gir inntrykk av at ingenting har endret seg. Det viser bare at visuelle detaljer ofte ikke er like viktige som den generelle følelsen av designet.
Den fleksible søkeboksen (kun WebKit)
Å være åpenbart WebKit-forutinntatt, har Apple-designteamet tatt med noen WebKit-bare forbedringer, hvorav en er knyttet til søkeboksen.
I de fleste nettlesere vil klicken i søkeboksen lysere bakgrunnen til en mer lesbar hvit. I Chrome eller Safari animerer søkefeltet ved hjelp av CSS3-overganger å bli bredere og uten tvil litt mer brukbar. Skjermbildet nedenfor viser søkefeltet i Chrome etter at det har blitt animert for å bli bredere:
For å imøtekomme størrelsen på søkeboksen, endre størrelsen på de andre navigasjonselementene og logoen.
Jeg liker denne funksjonen; det legger til en følelse av intuitivitet. Men det har etter min mening en liten feil: Den går ikke tilbake til sin opprinnelige tilstand når du fjerner fokus. Selvfølgelig, hvis noe ble skrevet inn i søkeboksen, ville du ikke at størrelsen skulle skifte tilbake, men jeg tror det skulle gå tilbake til sin normale tilstand hvis den mister fokus og forblir tom.
Selvfølgelig, siden det er ekstremt usannsynlig at noen vil klikke inn i søkeboksen og ikke skrive noe, antar jeg at dette er en ubetydelig forsømmelse.
Navigasjonslinjens animerte post (kun WebKit)
En annen liten WebKit-eneste funksjon er den animerte oppføringen av navigeringslinjen. Jeg husker ikke å se denne effekten på deres side før, så jeg antar at dette er en ny funksjon. Den animerte oppføringen skjer bare på hjemmesiden, og bare én gang per nettlesersøkt. Dette er god praksis og en god leksjon for utviklere som legger til animerte effekter på grensene.
Som vist i skjermbildet, går navigasjonslinjen fra skjermbildet, sannsynligvis ved bruk av CSS3 keyframe-animasjon, sammen med JavaScript for å kontrollere når animasjonen skal eller ikke skal forekomme.
De animerte produktbrowsere (kun WebKit)
Et annet nylig tillegg er bruk av animasjon på noen av produktsidene. CSS3-baserte animasjoner brukes på Mac og iPod produktlesere, hvorav en er vist nedenfor:
Produktene animerer når du først kommer på siden, og hvis du bytter mellom underkategorier, skjuler de synlige produktene og nye hopper inn i deres sted. Dette gjøres via CSS3 keyframe-basert kode, hvorav noen er vist nedenfor:
På nettlesere som ikke er WebKit, bytter produktleserens animasjon til enkel JavaScript-basert fading. Selv om denne typen ting ikke er ideell under alle omstendigheter (siden det i hovedsak utgjør "kodeforking"), er det et realistisk alternativ for utviklere og designere i dag som vil kode for de beste nettleserne og gi mindre forbedret funksjonalitet for resten .
Søkeboks Auto-Suggest
[UPDATE] Som påpekt av en rekke personer i kommentarene, er auto-suggest ikke en ny funksjon. Vår inkludering av dette som en "ny funksjon" var basert på en annen artikkel som rapporterte at auto-foreslå var ny. Likevel beholder vi denne delen fordi det er en god funksjon som har potensial til å gjøre et nettsted litt mer brukbart, og gir et godt eksempel for andre utviklere og designere å følge, hvis det passer med prosjektet.
Den Ajax-drevne automatisk foreslå rullegardinmenyen vises når du skriver inn et søk:
Som vist i skjermbildet ovenfor, viser ikke bare nedtrekkssøke-søkeresultatene som samsvarer med de skrevne tegnene, men resultatene er ledsaget av produktbilder og beskrivelser. Jeg tror bildene er mer verdifulle på dette stedet enn beskrivelsene, men generelt har dette potensialet til å strømlinjeforme produktsøk og konverteringer.
Alt annet?
Det ser ut til å dekke de store endringene i den nylige redskapingen av Apple.com-designen. Er det noen andre vesentlige endringer i design eller kode som jeg ikke har nevnt her?
Dette innlegget ble skrevet utelukkende for Webdesigner Depot av Louis Lazaris, frilansskribent og webutvikler. Louis løper Imponerende Webs hvor han legger inn artikler og opplæringsprogrammer på webdesign. Du kan følg Louis på Twitter eller ta kontakt med ham gjennom nettstedet hans.
Hva synes du om endringene i Apple.com-design? Er det noen endringer som vi ikke har nevnt her?