Αλλαγές στο σχεδιασμό της Apple.Com
Apple.com έχει υποστεί κάποιες προσαρμογές στο σχεδιασμό της την περασμένη εβδομάδα ή έτσι, αλλαγές που, αν δεν δίνετε αρκετή προσοχή, μπορεί να μην έχετε παρατηρήσει καν.
Παρόλο που πολλές αναφορές αναφέρονται σε αυτό ως "επανασχεδιασμό", νομίζω ότι είναι δύσκολο να ταξινομηθεί ως τέτοιο. Υπάρχουν σίγουρα μερικές σημαντικές αλλαγές, αλλά οι αλλαγές δεν είναι ακριβώς μια πλήρη αναθεώρηση όπως συνέβη στην περίπτωση του CNN.com στα τέλη του 2009.
Παρ 'όλα αυτά, οι αλλαγές είναι σημαντικές για τους σχεδιαστές ιστοσελίδων, οπότε θα τις εξετάσω σύντομα εδώ. Αν υπάρχει κάτι για τις αλλαγές που παραμελήσα να αναφέρω, μην διστάσετε να σχολιάσετε.
Μια ανασχεδιασμένη γραμμή πλοήγησης
Η πιο σημαντική αλλαγή (αν και εξακολουθεί να είναι κάπως λεπτή) είναι η εμφάνιση της γραμμής πλοήγησης. Η Apple έχει μία από αυτές τις γραμμές πλοήγησης που, από την άποψη του design-wise, ο καθένας αγαπάει και τον επιβλαβείς. Φαίνεται αδύνατο να βελτιωθεί. Λοιπόν, ήταν κατά κάποιον τρόπο σε θέση να βρουν τρόπους για να το κάνουν ακόμη πιο όμορφο και πιο διαισθητικό.
Εδώ είναι η παλιά γραμμή πλοήγησης:
Εδώ είναι το νέο:
Οι αλλαγές περιλαμβάνουν:
- Είναι πιο σκούρο
- Η κλίση έχει αντικατασταθεί από πιο τολμηρή εμφάνιση
- Η εμφάνιση του λογότυπου είναι απλοποιημένη
- Το πλαίσιο αναζήτησης είναι μικρότερο (περισσότερο στο κάτω μέρος)
Νομίζω ότι πραγματικά χρειάζεται μια μεγάλη ομάδα σχεδιαστών να κάνουν ό, τι πραγματικά είναι αρκετά σημαντικές αλλαγές στην εμφάνιση ενός πολύ σημαντικού στοιχείου UI, δίνοντας παράλληλα την εντύπωση ότι τίποτα δεν έχει αλλάξει. Απλώς δείχνει ότι οι οπτικές λεπτομέρειες συχνά δεν είναι τόσο σημαντικές όσο η συνολική αίσθηση του σχεδιασμού.
Το εύκαμπτο πλαίσιο αναζήτησης (μόνο στο WebKit)
Προφανώς η WebKit-μεροληψία, η ομάδα σχεδιασμού της Apple περιέλαβε ορισμένες βελτιώσεις μόνο στο WebKit, μία από τις οποίες συνδέεται με το πλαίσιο αναζήτησης.
Στα περισσότερα προγράμματα περιήγησης, κάνοντας κλικ στο πλαίσιο αναζήτησης θα φωτιστεί το φόντο του σε ένα πιο ευανάγνωστο λευκό. Στο Chrome ή το Safari, το κιβώτιο αναζήτησης ενεργοποιεί τη χρήση των μεταβάσεων CSS3 για να γίνει ευρύτερη και αναμφίβολα λίγο πιο χρήσιμη. Η πιατέλα οθόνης παρακάτω δείχνει το πλαίσιο αναζήτησης στο Chrome μετά την κίνηση του κινούμενου για να γίνει ευρύτερη:
Για να χωρέσει το μέγεθος του πλαισίου αναζήτησης, τα άλλα στοιχεία πλοήγησης και το λογότυπο αλλάζουν το μέγεθος τους.
Μου αρέσει αυτό το χαρακτηριστικό? προσθέτει ένα αίσθημα διαισθητικότητας. Αλλά έχει, κατά τη γνώμη μου, ένα μικρό ελάττωμα: Δεν επιστρέφει στην αρχική του κατάσταση αφού αφαιρέσετε την εστίαση. Φυσικά, αν γράψατε κάτι στο κουτί αναζήτησης, τότε δεν θα θέλατε να αλλάξει το μέγεθος, αλλά νομίζω ότι θα πρέπει να επιστρέψει στην κανονική του κατάσταση αν χάσει την εστία και παραμένει άδειο.
Φυσικά, δεδομένου ότι είναι εξαιρετικά απίθανο κάποιος να κάνει κλικ στο πλαίσιο αναζήτησης και να μην πληκτρολογήσει τίποτα, υποθέτω ότι πρόκειται για μια ασήμαντη παράλειψη.
Η κινούμενη καταχώρηση της γραμμής πλοήγησης (Μόνο WebKit)
Μια άλλη μικρή λειτουργία μόνο στο WebKit είναι η κινούμενη καταχώρηση της γραμμής πλοήγησης. Δεν θυμάμαι να βλέπω αυτό το αποτέλεσμα στον ιστότοπό τους πριν, έτσι υποθέτω ότι πρόκειται για ένα ακόμη νέο χαρακτηριστικό. Η κινούμενη καταχώρηση γίνεται μόνο στην αρχική σελίδα και μόνο μία φορά ανά περίοδο λειτουργίας προγράμματος περιήγησης. Αυτή είναι μια καλή πρακτική και ένα καλό μάθημα για τους προγραμματιστές που προσθέτουν κινούμενα εφέ στις διεπαφές τους.
Όπως απεικονίζεται στην οθόνη πιάσε παραπάνω, η γραμμή πλοήγησης μπαίνει από την οθόνη, πιθανώς χρησιμοποιώντας CSS3 animation keyframe, μαζί με JavaScript για να ελέγξει πότε θα έπρεπε ή δεν έπρεπε να εμφανιστεί η κινούμενη εικόνα.
Τα προγράμματα περιήγησης με κινούμενα προϊόντα (Μόνο WebKit)
Μια άλλη πρόσφατη προσθήκη είναι η χρήση κινούμενης εικόνας σε ορισμένες από τις σελίδες προϊόντων. Οι κινούμενες εικόνες που βασίζονται στο CSS3 χρησιμοποιούνται στο Μακ και iPod προγράμματα περιήγησης προϊόντων, ένα από τα οποία εμφανίζεται παρακάτω:
Τα προϊόντα ζωντανεύουν όταν φτάνετε για πρώτη φορά στη σελίδα και εάν αλλάζετε μεταξύ των υποκατηγοριών, τα ορατά προϊόντα ξεφεύγουν και τα νέα φτάνουν στη θέση τους. Αυτό γίνεται μέσω κώδικα που βασίζεται σε βασικό καρέ CSS3, μερικά από τα οποία φαίνεται παρακάτω:
Σε προγράμματα περιήγησης που δεν χρησιμοποιούν το WebKit, η κινούμενη εικόνα του προγράμματος περιήγησης του προϊόντος μεταβαίνει σε απλή εξασθένιση βασισμένη στο JavaScript. Αν και αυτό το είδος δεν είναι ιδανικό σε όλες τις περιστάσεις (δεδομένου ότι ουσιαστικά ισοδυναμεί με "code forking"), είναι μια ρεαλιστική επιλογή για προγραμματιστές και σχεδιαστές σήμερα που θέλουν να κωδικοποιήσουν τα καλύτερα δυνατά προγράμματα περιήγησης και να παρέχουν λιγότερη βελτιωμένη λειτουργικότητα για τα υπόλοιπα .
Αυτόματο προτεινόμενο πλαίσιο αναζήτησης
[UPDATE] Όπως επεσήμανε ένας αριθμός ανθρώπων στα σχόλια, η αυτόματη πρόταση δεν είναι ένα νέο χαρακτηριστικό. Η συμπερίληψή μας ως "νέου χαρακτηριστικού" βασίστηκε σε ένα άλλο άρθρο που ανέφερε ότι η αυτόματη πρόταση ήταν νέα. Παρόλα αυτά, θα διατηρήσουμε αυτήν την ενότητα επειδή είναι ένα καλό χαρακτηριστικό που έχει τη δυνατότητα να κάνει έναν ιστότοπο λίγο πιο χρήσιμο και αποτελεί καλό παράδειγμα για άλλους σχεδιαστές και σχεδιαστές που θα ακολουθήσουν, αν ταιριάζει με το έργο τους.
Εμφανίζεται το αναπτυσσόμενο μενού αυτόματου υπολογισμού με οδηγό Ajax κατά την πληκτρολόγηση ενός ερωτήματος αναζήτησης:
Όπως φαίνεται στην παραπάνω καταγραφή της οθόνης, το αναπτυσσόμενο μενού δεν δείχνει μόνο τα αποτελέσματα αναζήτησης που ταιριάζουν με τους πληκτρολογούμενους χαρακτήρες, αλλά τα αποτελέσματα συνοδεύονται από φωτογραφίες και περιγραφές προϊόντων. Νομίζω ότι οι φωτογραφίες είναι πιο πολύτιμες σε αυτό το σημείο από τις περιγραφές, αλλά γενικά αυτό έχει τη δυνατότητα να εξομαλύνει την αναζήτηση προϊόντων και τις μετατροπές.
Τίποτα άλλο?
Αυτό φαίνεται να καλύπτει τις μείζονες αλλαγές στην πρόσφατη επανασχεδίαση του σχεδιασμού της Apple.com. Υπάρχουν άλλες σημαντικές αλλαγές στο σχέδιο ή στον κώδικα που δεν ανέφερα εδώ;
Αυτή η ανάρτηση γράφτηκε αποκλειστικά για το Webdesigner Depot του Louis Lazaris, ανεξάρτητου συγγραφέα και web developer. Ο Λούις τρέχει Εντυπωσιακοί ιστότοποι όπου δημοσιεύει άρθρα και σεμινάρια σχετικά με το σχεδιασμό ιστοσελίδων. Μπορείς ακολουθήστε το Louis στο Twitter ή να έρθετε σε επαφή μαζί του μέσω της ιστοσελίδας του.
Τι πιστεύετε για τις αλλαγές στο σχεδιασμό της Apple.com; Υπάρχουν αλλαγές που δεν αναφέραμε εδώ;