Modifiche al design di Apple.Com
Apple.com ha subito alcune modifiche al suo design nell'ultima settimana o giù di lì, cambiamenti che, se non stavi prestando abbastanza attenzione, potresti non averlo notato.
Sebbene molti rapporti si riferiscano a questo come a una "riprogettazione", penso che sia difficile classificarlo come tale. Ci sono certamente alcuni cambiamenti significativi, ma i cambiamenti non sono esattamente una revisione completa come nel caso di CNN.com alla fine del 2009.
Ciononostante, i cambiamenti sono significativi per i web designer, quindi li esaminerò brevemente qui. Se c'è qualcosa sui cambiamenti che ho dimenticato di menzionare, sentiti libero di commentare.
Una barra di navigazione ridisegnata
Il cambiamento più significativo (anche se ancora un po 'sottile) è l'aspetto della barra di navigazione. Apple ha una di quelle barre di navigazione che, dal punto di vista del design, tutti amano e invidiano. Sembra impossibile che possa essere migliorato. Bene, erano in qualche modo in grado di trovare modi per renderlo ancora più bello e più intuitivo.
Ecco la vecchia barra di navigazione:
Ecco il nuovo:
Le modifiche includono:
- È più scuro
- Il gradiente è stato sostituito da un aspetto lucido più audace
- L'aspetto del logo è semplificato
- La casella di ricerca è più piccola (più su quella sotto)
Penso che ci voglia davvero un grande team di designer per realizzare quelle che sono davvero delle modifiche significative all'aspetto di un elemento dell'interfaccia utente molto importante, dando comunque l'impressione che nulla sia cambiato. Ciò dimostra che i dettagli visivi spesso non sono importanti quanto la sensazione generale del design.
La casella di ricerca flessibile (solo WebKit)
Essendo ovviamente influenzato da WebKit, il team di progettazione Apple ha incluso alcuni miglioramenti solo per WebKit, uno dei quali è associato alla casella di ricerca.
Nella maggior parte dei browser, facendo clic nella casella di ricerca, si illuminerà il suo sfondo con un bianco più leggibile. In Chrome o Safari, la casella di ricerca si anima utilizzando le transizioni CSS3 per diventare più ampia e probabilmente un po 'più utilizzabile. La schermata seguente mostra la casella di ricerca in Chrome dopo che si è animata per diventare più ampia:
Per adattarsi alle dimensioni della casella di ricerca, gli altri elementi di navigazione e il logo si ridimensionano.
Mi piace questa funzione; aggiunge una sensazione di intuitività. Ma ha, a mio avviso, un piccolo difetto: non torna al suo stato iniziale dopo aver rimosso la messa a fuoco. Ovviamente, se qualcosa è stato digitato nella casella di ricerca, non vorresti che la dimensione tornasse, ma penso che dovrebbe tornare al suo stato normale se perde lo stato attivo e rimane vuota.
Certo, dal momento che è estremamente improbabile che qualcuno faccia clic nella casella di ricerca e non digiti nulla, suppongo si tratti di un'omissione insignificante.
Voce animata della barra di navigazione (solo WebKit)
Un'altra piccola caratteristica di solo WebKit è la voce animata della barra di navigazione. Non ricordo di aver visto questo effetto sul loro sito prima, quindi presumo che questa sia un'altra nuova funzionalità. La voce animata si verifica solo nella home page e solo una volta per sessione del browser. Questa è una buona pratica e una buona lezione per gli sviluppatori che aggiungono effetti animati alle loro interfacce.
Come visualizzato nella schermata precedente, la barra di navigazione passa da una schermata all'altra, probabilmente utilizzando l'animazione dei fotogrammi chiave CSS3, insieme a JavaScript per controllare quando l'animazione dovrebbe o non dovrebbe verificarsi.
I browser dei prodotti animati (solo WebKit)
Un'altra aggiunta recente è l'uso dell'animazione su alcune pagine del prodotto. Le animazioni basate su CSS3 sono usate su Mac e iPod browser di prodotti, uno dei quali è mostrato di seguito:
I prodotti si animano al tuo arrivo sulla pagina e se passi da una sottocategoria, i prodotti visibili scappano via e quelli nuovi saltano al loro posto. Questo viene fatto tramite il codice basato su keyframe CSS3, alcuni dei quali è mostrato di seguito:
Sui browser non WebKit, l'animazione del browser del prodotto passa alla semplice dissolvenza basata su JavaScript. Sebbene questo tipo di cose non sia l'ideale in ogni circostanza (dal momento che essenzialmente equivale a "forgiare il codice"), è un'opzione realistica per gli sviluppatori e i progettisti che desiderano codificare per i migliori browser possibili e fornire funzionalità meno avanzate per il resto .
Casella di ricerca Suggerimento automatico
[AGGIORNAMENTO] Come sottolineato da un numero di persone nei commenti, l'auto-suggerimento non è una nuova funzionalità. La nostra inclusione di questa come "nuova funzionalità" era basata su un altro articolo che riportava che l'auto-suggerimento era nuovo. Ciononostante, terremo questa sezione perché è una buona funzionalità che ha il potenziale per rendere un sito web un po 'più utilizzabile e fornisce un buon esempio per altri sviluppatori e designer da seguire, se si adatta al loro progetto.
Il menu a discesa suggerimento automatico basato su Ajax viene visualizzato durante la digitazione di una query di ricerca:
Come mostrato nella schermata sopra, non solo il menu a discesa mostra i risultati di ricerca che corrispondono ai caratteri digitati, ma i risultati sono accompagnati da foto e descrizioni dei prodotti. Penso che le foto siano più preziose in questo punto rispetto alle descrizioni, ma nel complesso questo ha il potenziale per ottimizzare la ricerca e le conversioni dei prodotti.
Qualunque altra cosa?
Ciò sembra coprire i principali cambiamenti nel recente re-tooling del design Apple.com. Ci sono altre modifiche significative al design o al codice che non ho menzionato qui?
Questo post è stato scritto esclusivamente per Webdesigner Depot da Louis Lazaris, scrittore freelance e sviluppatore web. Louis corre Web impressionanti dove pubblica articoli e tutorial sul web design. Puoi segui Louis su Twitter o mettersi in contatto con lui attraverso il suo sito web.
Cosa ne pensi delle modifiche al design di Apple.com? Ci sono dei cambiamenti che non abbiamo menzionato qui?