Ændringer i Apple.Com Design
Apple.com har undergået nogle tilpasninger af dens design i den sidste uge eller deromkring, ændrer det, hvis du ikke betaler tæt nok opmærksomhed, har du måske ikke engang bemærket.
Selvom mange rapporter henviser til dette som et "redesign", synes jeg det er svært at klassificere det som sådan. Der er helt sikkert nogle betydelige ændringer, men ændringerne er ikke ligefrem en fuldstændig revision som det var tilfældet med CNN.com i slutningen af 2009.
Ikke desto mindre er ændringerne vigtige for webdesignere, så jeg vil kort se på dem her. Hvis der er noget om de ændringer, som jeg har forsømt at nævne, er du velkommen til at kommentere.
En nydesignet navigationslinje
Den væsentligste ændring (omend stadig en lidt subtil) er udseendet på navigationslinjen. Apple har en af de navigeringsstænger, der design-wise, alle elsker og misundelsesværdier. Det virker umuligt, at det kan forbedres. Nå var de på en eller anden måde i stand til at finde måder at gøre det endnu bedre ud og mere intuitivt.
Her er den gamle navigationslinje:
Her er den nye:
Ændringer omfatter:
- Det er mørkere
- Gradienten er blevet erstattet af et stærkere blankt look
- Logoets udseende er forenklet
- Søgefeltet er mindre (mere om det nedenfor)
Jeg tror, det tager virkelig et godt team af designere at gøre, hvad der virkelig er ret betydelige ændringer i udseendet af et meget vigtigt brugergrænseelement, mens det stadig giver indtryk af, at intet har ændret sig. Det viser kun, at visuelle detaljer ofte ikke er så vigtige som den overordnede følelse af designet.
Den fleksible søgefelt (kun WebKit)
At være naturligvis WebKit-forudindtaget, har Apples designteam inkluderet nogle WebKit-only forbedringer, hvoraf den ene er forbundet med søgefeltet.
I de fleste browsere vil klikken i søgefeltet lysere baggrunden for en mere læsbar hvid. I Chrome eller Safari animerer søgefeltet ved hjælp af CSS3 Transitions at blive bredere og muligvis lidt mere brugbar. Skærmbilledet nedenfor viser søgefeltet i Chrome, efter at det er animeret for at blive bredere:
For at imødekomme størrelsen af søgefeltet, ændrer de øvrige navigationsartikler og logoet sig selv.
Jeg kan godt lide denne funktion; det tilføjer en følelse af intuitivitet. Men det har efter min mening en lille fejl: Den går ikke tilbage til sin oprindelige tilstand, når du fjerner fokus. Selvfølgelig, hvis noget blev skrevet ind i søgefeltet, så ville du ikke have størrelsen til at ændre tilbage, men jeg tror, at det skulle vende tilbage til sin normale tilstand, hvis det taber fokus og forbliver tomt.
Selvfølgelig, da det er ekstremt usandsynligt, at nogen vil klikke i søgefeltet og ikke skrive noget, antager jeg, at dette er en ubetydelig udeladelse.
Navigationsbjælkens animerede post (kun WebKit)
En anden lille WebKit-eneste funktion er den animerede indgang i navigationslinjen. Jeg kan ikke huske at se denne effekt på deres websted før, så jeg antager, at dette er en ny funktion. Den animerede post sker kun på hjemmesiden og kun én gang pr. Browsersession. Dette er god praksis og en god lektion for udviklere, der tilføjer animerede effekter til deres grænseflader.
Som vist i skærmgriben ovenfor, går navigationslinjen fra off-screen, sandsynligvis ved hjælp af CSS3-keyframe-animation, sammen med JavaScript til at styre, når animationen skal eller burde ikke forekomme.
De animerede produktbrowsere (kun WebKit)
En anden nylig tilføjelse er brugen af animation på nogle af produktsiderne. CSS3-baserede animationer bruges på Mac og iPod produktbrowsere, hvoraf den ene er vist nedenfor:
Produkterne animerer, når du først kommer på siden, og hvis du skifter mellem underkategorier, skyller de synlige produkter væk, og nye hopper ind i deres sted. Dette sker via CSS3 keyframe-baseret kode, hvoraf nogle er vist nedenfor:
På browsere, der ikke er WebKit, skifter produktbrowserens animation til simpel JavaScript-baseret fading. Selv om denne slags ting ikke er ideel under alle omstændigheder (da det i det væsentlige udgør "kodeforking"), er det en realistisk mulighed for udviklere og designere i dag, der ønsker at kode for de bedst mulige browsere og give mindre forbedret funktionalitet til resten .
Søgeboks Auto-Suggest
[UPDATE] Som påpeget af en række personer i kommentarerne, er auto-suggestionen ikke en ny funktion. Vores inddragelse af dette som en "ny funktion" var baseret på en anden artikel, der rapporterede, at auto-suggest var ny. Ikke desto mindre opretholder vi dette afsnit, fordi det er en god funktion, der har potentiale til at gøre et websted lidt mere brugbart og giver et godt eksempel for andre udviklere og designere at følge, hvis de passer til deres projekt.
Den Ajax-drevne automatisk foreslåede rullemenu vises, når du skriver en søgeforespørgsel:
Som det fremgår af ovenstående skærmbillede, vises ikke kun drop-down-søgeresultaterne, der matcher de indtastede tegn, men resultaterne ledsages af produktbilleder og beskrivelser. Jeg tror, at billederne er mere værdifulde på dette sted end beskrivelserne, men generelt har dette potentiale til at strømline produktsøgning og konverteringer.
Ellers andet?
Det ser ud til at dække de store ændringer i den nylige genoparbejdning af Apple.com-designet. Er der andre væsentlige ændringer i designet eller koden, som jeg ikke har nævnt her?
Dette indlæg blev udelukkende skrevet til Webdesigner Depot af Louis Lazaris, freelance skribent og webudvikler. Louis løber Imponerende Webs hvor han stiller artikler og vejledninger om webdesign. Du kan Følg Louis på Twitter eller komme i kontakt med ham gennem hans hjemmeside.
Hvad synes du om ændringerne i Apple.com design? Er der nogen ændringer, som vi ikke har nævnt her?