Αισθητική Android: Εγχειρίδιο σχεδίασης διεπαφής και εικονιδίων

• Τα εικονίδια του Google Play πρέπει να συμμορφώνονται με αυστηρές προδιαγραφές για το μέγεθος, τη μορφή και το στυλ, αφήνοντας την κάλυψη και τις σκιές στην πλατφόρμα.
• Μια αποτελεσματική διεπαφή Android συνδυάζει σαφή πλέγματα, ευανάγνωστη τυπογραφία και συνεπή χρήση χρωμάτων με τα οπτικά μοτίβα της πλατφόρμας.
• Το εικονίδιο εκκίνησης, τα εσωτερικά εικονίδια και η αρχική οθόνη είναι το κλειδί για την οπτική ταυτότητα και την πρώτη εντύπωση της εφαρμογής.
• Η σαφής γλώσσα, οι οπτικές λεπτομέρειες και οι διακριτικές κινούμενες εικόνες βελτιώνουν σημαντικά την εμπειρία χρήστη και την αντίληψη της ποιότητας.

Το περιεχόμενο αυτού του σεναρίου δημιουργείται αυστηρά για εκπαιδευτικούς σκοπούς. Η χρήση γίνεται με δική σας ευθύνη.

Αν σχεδιάζετε εφαρμογές για κινητά ή ξεκινάτε το πρώτο σας έργο, αργά ή γρήγορα θα αντιμετωπίσετε την ίδια πρόκληση: πώς να δημιουργήσετε μια σαφή, ελκυστική και συνεπή διεπαφή Android και πώς να σχεδιάσετε εικονίδια που λειτουργούν πραγματικά στο Google Play και εντός της εφαρμογής. Δεν πρόκειται μόνο για αισθητική. Έχει άμεσο αντίκτυπο στις λήψεις, την καθημερινή χρήση και την αντίληψη της επωνυμίας.

Σε αυτόν τον οδηγό, θα αναλύσουμε, βήμα προς βήμα, τους επίσημους κανόνες εικονιδίων του Google Play, τις αρχές σχεδιασμού διεπαφής Android και τις βέλτιστες πρακτικές για την εμπειρία χρήστη, την τυπογραφία, το χρώμα και τη γλώσσα . Θα χρησιμοποιήσουμε φιλικό τόνο, συγκεκριμένα παραδείγματα και πρακτικές προτάσεις, ώστε να μπορείτε να εφαρμόσετε όσα μαθαίνετε στην επόμενη εφαρμογή σας χωρίς να κολλήσετε σε περιττή τεχνική ορολογία.

Εικονίδια εφαρμογών Android στο Google Play: απαιτήσεις και βέλτιστες πρακτικές

Το εικονίδιο που εμφανίζεται στο Google Play δεν είναι απλώς για επίδειξη: είναι το πρόσωπο της εφαρμογής σας, η «συσκευασία» της στη βιτρίνα του καταστήματος . Επιπλέον, τηρεί πολύ αυστηρές τεχνικές προδιαγραφές και η μη συμμόρφωση με αυτές θα έχει ως αποτέλεσμα την απόρριψη της αίτησής σας από την κονσόλα προγραμματιστών.

Το Google Play έχει τυποποιήσει το σχήμα των εικονιδίων του για να διασφαλίσει μια ομοιόμορφη εμφάνιση σε όλες τις συσκευές, τα μεγέθη οθόνης και τα σχέδια διεπαφής. Αυτή η οπτική συνέπεια επιτρέπει στους χρήστες να εστιάζουν στο περιεχόμενο του εικονιδίου – την εικόνα ή το λογότυπο – αντί για αταίριαστα πλαίσια, περίεργες γωνίες ή ασυνεπείς σκιές.

Τεχνικές προδιαγραφές του εικονιδίου για το Google Play

Κατά την προετοιμασία του κύριου γραφικού της εφαρμογής σας για την καταχώριση στο Google Play, πρέπει να συμμορφώνεστε με αυτές τις βασικές παραμέτρους, τις οποίες η Google εφαρμόζει παγκοσμίως σε όλα τα εικονίδια καταστήματος:

• Τελικό μέγεθος : 512 × 512 pixel.
• Μορφή αρχείου : PNG 32-bit.
• Χρωματικός χώρος : sRGB.
• Μέγιστο μέγεθος : 1024 KB.
• Αρχικό σχήμα : πλήρες τετράγωνο χωρίς στρογγυλεμένες γωνίες.
• Παράλληλες σκιές : δεν πρέπει να προστεθούν στο αρχικό αρχείο, καθώς το Google Play δημιουργεί δυναμικά την εξωτερική σκιά.

Με άλλα λόγια, ανεβάζετε ένα καθαρό τετράγωνο, χωρίς στρογγυλεμένες γωνίες ή εξωτερικές σκιές . Από εκεί, το Google Play εφαρμόζει κάλυψη με στρογγυλεμένες γωνίες (με ακτίνα ισοδύναμη με το 30% του μεγέθους) και μια σκίαση για να το προσαρμόσει με συνέπεια σε ολόκληρη τη διεπαφή του καταστήματος.

Πλέγμα βασικών γραμμών και χρήση χώρου

Για την αποτελεσματική οργάνωση περιεχομένου εντός αυτών των 512 x 512 pixel, η Google προτείνει ένα πλέγμα βασικών γραμμών . Σκεφτείτε αυτό το πλέγμα ως έναν ευέλικτο οδηγό για την τοποθέτηση λογότυπων, συμβόλων ή εικονογραφήσεων χωρίς να αναγκάσετε την επωνυμία σας να γεμίσει ολόκληρο τον χώρο, εάν δεν χρειάζεται.

Στην πράξη, η Google λαμβάνει υπόψη μια εσωτερική περιοχή αναφοράς 384 × 384 pixel (75% των διαστάσεων του εικονιδίου) όπου θα πρέπει να βρίσκεται το κύριο μέρος του σχεδίου. Από εκεί:

• Μινιμαλιστικό γραφικό υλικό ή καθαρά λογότυπα : συνιστάται η χρήση τους εντός του πλέγματος των βασικών γραμμών, αφήνοντας ένα περιθώριο αναπνοής γύρω τους.
• Περισσότερες οργανικές εικόνες ή γραφικά : τείνουν να λειτουργούν καλύτερα αν εκτείνονται σε ολόκληρο το φόντο, καταλαμβάνοντας ολόκληρο το τετράγωνο.

Το σημαντικό είναι να μην πιέζετε το λογότυπό σας σε σημείο παραμόρφωσης για να φτάσει στην άκρη . Εάν η επωνυμία σας λειτουργεί καλύτερα με λευκό χώρο, τοποθετήστε την σε ομοιόμορφο φόντο, σεβόμενοι το πλέγμα. Και εάν έχετε μια πλούσια εικονογράφηση, μην την συρρικνώνετε τόσο πολύ που να φαίνεται χαμένη στο κέντρο. Αφήστε την να γεμίσει τον χώρο.

Τι δεν πρέπει να κάνετε με το εικονίδιο του Google Play

Εκτός από τους κανόνες μεγέθους και μορφής, υπάρχουν ορισμένες απαγορευμένες πρακτικές που παραβιάζουν τις πολιτικές του Google Play και προκαλούν σύγχυση στους χρήστες. Θα πρέπει να αποφεύγετε:

• Συμπεριλάβετε κείμενο ή γραφικά στοιχεία που υποδεικνύουν ηλικιακή ταξινόμηση .
• Χρησιμοποιήστε κείμενο ή γραφικά για να διαφημίσετε προσφορές, εκπτώσεις ή κίνητρα για την εγκατάσταση της εφαρμογής.
• Τοποθετήστε σφραγίδες ή κονκάρδες που υποδεικνύουν συμμετοχή σε προγράμματα του Google Play .
• Επινόηση banner, σημάτων ή ισχυρισμών που ενδέχεται να παραπλανήσουν τον χρήστη σχετικά με τη φύση ή την απόδοση της εφαρμογής.

Όλο αυτό το περιεχόμενο ανήκει στη σελίδα του προϊόντος (στιγμιότυπα οθόνης, περιγραφικό κείμενο, βίντεο…) και όχι στο κύριο εικονίδιο , το οποίο θα πρέπει να είναι σαφές, καθαρό και διαχρονικό.

Σκιές, γωνίες και προσαρμογή επωνυμίας

Μόλις ανεβάσετε το περιεχόμενό σας, το Google Play δημιουργεί αυτόματα μια ομοιόμορφη σκίαση και στρογγυλεύει τις γωνίες . Αυτό σημαίνει ότι:

• Δεν πρέπει να προσθέτετε εξωτερικές σκιές . Αυτό θα διατάρασσε την οπτική ομοιομορφία με τα άλλα εικονίδια και θα αντιέγραφε αυτό το εφέ.
• Μπορείτε να συμπεριλάβετε εσωτερικές σκιές ή εφέ φωτισμού μέσα στην εικόνα, εφόσον είναι σύμφωνες με τις οδηγίες Material Design και δεν ανταγωνίζονται τη συνολική σκιά της πλατφόρμας.
• Δεν πρέπει να στρογγυλεύετε μόνοι σας τις γωνίες του αρχείου. Αφήστε το PNG σε τέλεια τετράγωνη μορφή και αφήστε την Google να κάνει τα υπόλοιπα.

Εάν το λογότυπό σας βασίζεται σε μεγάλο βαθμό σε ένα συγκεκριμένο σχήμα (για παράδειγμα, μια ασπίδα, ένα χάπι, ένας εύκολα αναγνωρίσιμος κύκλος), μην το επιβάλλετε σε φόντο πλήρους κάλυψης. Τοποθετήστε το μέσα στο πλέγμα γραμμών κλειδιού σε ένα συμπαγές φόντο που ευθυγραμμίζεται με την ταυτότητα της επωνυμίας σας και αποφύγετε τη διαφάνεια του φόντου. Εάν υπάρχει, το χρώμα της διεπαφής του Google Play θα είναι εμφανές και πιθανότατα δεν θα ταιριάζει με την επωνυμία σας.

Λειτουργία παλαιού τύπου και μετεγκατάσταση παλιών εικονιδίων

Όταν η Google παρουσίασε αυτό το ενοποιημένο σύστημα εικονιδίων, καθιέρωσε μια μεταβατική περίοδο. Τα στοιχεία που δεν είχαν προσαρμοστεί στις νέες προδιαγραφές εγκαίρως υποβιβάστηκαν σε μια παλαιότερη λειτουργία : κλιμακώθηκαν αυτόματα στο 75% του πλέγματος (384 px εντός 512 px) για να διατηρηθεί κάποια συνέπεια.

• Διαβάσε επίσης αυτόν τον χρήσιμο οδηγό: Προστασία ψηφιακών περιουσιακών στοιχείων: Φωτογραφίες, βίντεο και έγγραφα

Για τους προγραμματιστές που χρησιμοποιούν το API του Google Play, οι ημερομηνίες μετεγκατάστασης διεκπεραιώνονταν σταδιακά . Για ένα διάστημα, ήταν υποχρεωτική η ενημέρωση της προδιαγραφής εικονιδίων από το Play Console και μόνο τότε οι προγραμματιστές μπορούσαν να ανεβάσουν το νέο PNG χρησιμοποιώντας τη μέθοδο Edits.images:upload. Μετά από μια συγκεκριμένη προθεσμία, το API άρχισε να εφαρμόζει πάντα τη νέα προδιαγραφή και να απορρίπτει τα παλαιότερα εικονίδια.

Προς το παρόν, στην πράξη, δεν μπορείτε να ανεβάσετε ένα εικονίδιο που δεν συμμορφώνεται με τους τρέχοντες κανόνες . Εάν δείτε σφάλματα κατά την ανέβασμα από το API, θα πρέπει να ελέγξετε το μέγεθος, τη μορφή, το βάρος και το σχήμα του αρχείου πριν προσπαθήσετε ξανά.

Διαφορές στυλ μεταξύ Android, iOS και Windows: πλαίσιο για τις διεπαφές σας

Για να σχεδιάσετε μια καλή διεπαφή Android, είναι χρήσιμο να κατανοήσετε πώς συγκρίνεται με άλλα συστήματα. Κάθε πλατφόρμα έχει τη δική της οπτική προσωπικότητα, προτιμώμενες γραμματοσειρές και τρόπο χειρισμού εικονιδίων και στοιχείων . Η προσαρμογή σε αυτό το στυλ βοηθά την εφαρμογή σας να «αισθάνεται σαν στο σπίτι της».

Το Android χαρακτηρίζεται από μια λαμπρή, καθαρή αισθητική : εύτακτες συνθέσεις, σαφείς ιεραρχίες, στοιχεία με καλή κατανομή μεταξύ τους και ανεπαίσθητες λεπτομέρειες που προσθέτουν λάμψη χωρίς να κατακλύζουν το σύστημα. Η γραμματοσειρά Roboto—που δημιουργήθηκε ειδικά για το σύστημα—είναι ένα από τα πιο αναγνωρίσιμα χαρακτηριστικά της πλατφόρμας, που συμπληρώνεται από ένα σύνολο χρωμάτων, υψών και σκιών που συνάδουν με το Material Design.

Το iOS, από την πλευρά του, έχει σταδιακά εγκαταλείψει τον σκευομορφισμό υπέρ ενός ελαφρύτερου, επικεντρωμένου στο περιεχόμενο στυλ . Τα χειριστήρια έχουν μειωθεί στο ελάχιστο, τα φόντα είναι ανοιχτόχρωμα, οι γραμματοσειρές όπως η Neue Helvetica (και αργότερα η San Francisco) χρησιμοποιούνται σε ελαφρύ βάρος και οι επικαλύψεις με διαφάνειες δημιουργούν μια απρόσκοπτη μετάβαση μεταξύ των οθονών.

Τα Windows Phone (και η κληρονομιά τους στη σύγχρονη διεπαφή της Microsoft) προτιμούν έναν επίπεδο, έντονα τυπογραφικό σχεδιασμό , με εικονίδια σε στυλ εικονογράμματος, συμπαγή χρώματα (με έντονη την παρουσία του λευκού) και ένα σαφώς καθορισμένο πλέγμα πλακιδίων. Οι πληροφορίες παρουσιάζονται χωρίς διακοσμητικά στοιχεία: ό,τι έχει σημασία παραμένει, το περιττό εξαφανίζεται.

Εγγενείς έναντι προσαρμοσμένων διεπαφών στο Android

Όταν ξεκινάτε ένα έργο Android, είναι σύνηθες να αναρωτιέστε αν θα χρησιμοποιήσετε εγγενή στοιχεία (κουμπιά, λίστες, τυπικές κεφαλίδες) ή αν θα δημιουργήσετε μια εντελώς προσαρμοσμένη διεπαφή με εξατομικευμένους γραφικούς πόρους. Η λογική προσέγγιση είναι συνήθως κάπου ενδιάμεσα.

Τα εγγενή στοιχεία έχουν πολλά πλεονεκτήματα: διαθέτουν ήδη μεγέθη, χρώματα, τυπογραφία και καταστάσεις αλληλεπίδρασης σχεδιασμένες για χρηστικότητα και προσβασιμότητα . Οι χρήστες είναι εξοικειωμένοι με αυτά, επομένως η καμπύλη εκμάθησης είναι μικρότερη και η αίσθηση εξοικείωσης αυξάνεται. Επιπλέον, επιταχύνουν σημαντικά την ανάπτυξη: δεν χρειάζεται να σχεδιάζετε κάθε κουμπί από την αρχή.

Ωστόσο, αν θέλετε η εφαρμογή σας να έχει έναν ισχυρό οπτικό χαρακτήρα — για παράδειγμα, ένα προϊόν που εστιάζει σε μεγάλο βαθμό στην εμπειρία χρήστη και στις αισθητικές λεπτομέρειες — θα χρειαστεί να προσαρμόσετε περισσότερα στοιχεία. Εδώ μπαίνουν στο παιχνίδι τα πεδία κειμένου με συγκεκριμένες υφές, τα κουμπιά με ιδιαίτερη ανάγλυφη εκτύπωση ή οι κάρτες με μοναδικές σκιές και γωνίες που δεν είναι άμεσα εφικτά με τα τυπικά γραφικά στοιχεία.

Αυτή η προσαρμογή συνήθως απαιτεί περισσότερη προσπάθεια σχεδιασμού και ανάπτυξης . Είναι απαραίτητο να προβλεφθεί ο τρόπος με τον οποίο αυτές οι εικόνες θα προσαρμοστούν σε διαφορετικά μεγέθη οθόνης, πυκνότητες pixel και προσανατολισμούς. Και, φυσικά, να διασφαλιστεί ότι η απόδοση δεν θα υποφέρει (η υπερβολική χρήση μεγάλων bitmap μπορεί να κάνει την εφαρμογή αργή και να απαιτεί μεγάλη μνήμη).

Στις περισσότερες περιπτώσεις, η πιο λογική στρατηγική είναι να ξεκινήσετε με μια εγγενή βάση και να επιλέξετε προσεκτικά ποια στοιχεία αξίζει να προσαρμόσετε : ίσως την αρχική οθόνη, ορισμένα κουμπιά πλήκτρων ή ορισμένες καταχωρίσεις ναυαρχίδων. Με αυτόν τον τρόπο, διατηρείτε καλή χρηστικότητα και λογικούς χρόνους ανάπτυξης χωρίς να θυσιάζετε μια ισχυρή οπτική ταυτότητα.

Οπτική ταυτότητα: μάρκα, εικονίδια και αρχική οθόνη

Μια εφαρμογή δεν υπάρχει μεμονωμένα: αποτελεί μέρος της συνολικής ταυτότητας μιας εταιρείας ή ενός προϊόντος . Τα χρώματα, οι γραμματοσειρές και τα φόντα πρέπει να συνδυάζονται με όλα τα άλλα σημεία επαφής της επωνυμίας (ιστότοπος, καμπάνιες, φυσικά προϊόντα κ.λπ.).

Όσον αφορά το λογότυπο, είναι καλύτερο να αποφύγετε τον πειρασμό να το επαναλαμβάνετε ασταμάτητα σε κάθε οθόνη . Είναι πιο αποτελεσματικό να το κρατάτε για στρατηγικά σημεία: την οθόνη υποδοχής, τη σελίδα σύνδεσης, την ενότητα “Σχετικά με εμάς” ή ίσως μια συγκεκριμένη κεφαλίδα. Με αυτόν τον τρόπο, η επωνυμία είναι παρούσα αλλά δεν παρεμβαίνει στην πλοήγηση ούτε κατακλύζει τον χρήστη.

Μέσα σε αυτό το σύστημα, δύο στοιχεία παίζουν ιδιαίτερα σημαντικό ρόλο στην πρώτη εντύπωση: το εικονίδιο εκκίνησης και η οθόνη εκκίνησης . Είναι τα πρώτα πράγματα που βλέπει ο χρήστης πριν καν αλληλεπιδράσει με το πραγματικό σας περιεχόμενο.

Εικονίδιο έναρξης: το προϊόν σας στη βιτρίνα του καταστήματος

Το εικονίδιο εκκίνησης χρησιμεύει ως οπτικό σημείο αναφοράς της εφαρμογής στην αρχική οθόνη και στο κατάστημα . Πρέπει να ξεχωρίζει ανάμεσα σε δεκάδες άλλες εφαρμογές, να μεταφέρει την βασική λειτουργικότητα του προϊόντος και να ευθυγραμμίζεται με το συνολικό στυλ της επωνυμίας.

Ένα καλό εικονίδιο εφαρμογής βασίζεται συνήθως σε απλά σχήματα, λίγα στοιχεία και μεγάλη προσοχή στη λεπτομέρεια . Είναι σημαντικό να θυμάστε ότι θα εμφανίζεται τόσο σε μεγάλα μεγέθη (καταχώριση καταστήματος) όσο και σε μικρά μεγέθη (πλέγμα εφαρμογής), επομένως πρέπει να σχεδιάζετε έχοντας κατά νου την επεκτασιμότητα: σε μικρά μεγέθη, οι μικρές λεπτομέρειες εξαφανίζονται και η συνολική εμφάνιση πρέπει να παραμένει ευανάγνωστη.

Κάθε λειτουργικό σύστημα έχει τις δικές του ιδιαιτερότητες:

• Android : εικονίδια με αναπαράσταση στραμμένη προς τα εμπρός, μια ελαφριά αίσθηση όγκου και βάθους μέσα από σκιές και διαφάνειες, ενσωματωμένα με το στυλ Material.
• iOS : απλοποιημένη αναπαράσταση, συνήθως ένα μόνο κύριο στοιχείο σε αδιαφανές φόντο, χωρίς υπερβολικές λεπτομέρειες. Το σύστημα στρογγυλοποιεί τις γωνίες και εφαρμόζει διακριτικές επισημάνσεις.
• Windows Phone : Εικονίδια σε στυλ εικονογράμματος, εξαιρετικά απλά, σε επίπεδα χρώματα (συχνά λευκό) σε φόντο που μπορεί να αλλάζει ανάλογα με το θέμα του χρήστη. Η διαφάνεια του εικονογράμματος είναι το κλειδί.

Εσωτερικά εικονίδια: διακριτική αλλά κρίσιμη λειτουργικότητα

Μόλις εισέλθετε στην εφαρμογή, ενεργοποιούνται τα εσωτερικά εικονίδια : αυτά τα μικρά σύμβολα που συνοδεύουν κουμπιά, καρτέλες, μενού ή μηνύματα. Δεν είναι τόσο φανταχτερά όσο το εικονίδιο εκκίνησης, αλλά έχουν μια βασική λειτουργία: να κάνουν τη διεπαφή πιο κατανοητή και αποτελεσματική.

Τα εσωτερικά εικονίδια χρησιμοποιούνται κυρίως σε τρία σενάρια: ως οπτική ενίσχυση πληροφοριών (για παράδειγμα, ένα εικονίδιο ειδοποίησης δίπλα σε ένα σημαντικό μήνυμα), ως συμπλήρωμα σε διαδραστικά στοιχεία (κουμπιά με εικονίδιο και κείμενο, καρτέλες με εικονόγραμμα) και ως οπτική σύνοψη όταν το κείμενο είναι πολύ μεγάλο ή περίπλοκο.

Ένα καλό εικονίδιο εσωτερικού χώρου θα πρέπει να επικοινωνεί από μόνο του την ενέργεια ή την έννοια που αντιπροσωπεύει. Εδώ είναι που παίζει ρόλο το περιεχόμενο: το ίδιο εικονίδιο κάδου απορριμμάτων μπορεί να σημαίνει “διαγραφή ενός στοιχείου” ή “άδειασμα όλων” ανάλογα με την τοποθέτησή του και τα στοιχεία που ομαδοποιεί οπτικά. Εάν ο χώρος δεν επιτρέπει ετικέτες κειμένου, η σαφήνεια γίνεται ακόμη πιο σημαντική.

Συνιστάται επίσης να τηρείτε τα τυπικά σύμβολα κάθε πλατφόρμας . Οι χρήστες Android ήδη συνδέουν ένα εικονίδιο μεγεθυντικού φακού με την «αναζήτηση», ένα εικονίδιο δισκέτας ή cloud με την «αποθήκευση», ένα εικονίδιο μολυβιού με την «επεξεργασία» και ούτω καθεξής. Η επαναχρησιμοποίηση αυτού του οπτικού λεξιλογίου μειώνει την καμπύλη εκμάθησης και βελτιώνει τη χρηστικότητα.

Αρχική οθόνη (αρχική οθόνη)

Η αρχική οθόνη εμφανίζεται συνήθως κατά τη φόρτωση της εφαρμογής . Η χρήση της έχει πλέον ελαχιστοποιηθεί: ιδανικά, ο χρήστης θα πρέπει να μεταβεί στο πραγματικό περιεχόμενο το συντομότερο δυνατό. Επομένως, η παρουσία της είναι συνήθως σύντομη, διαρκεί μόνο ένα ή δύο δευτερόλεπτα.

Είναι σύνηθες να συμπεριλαμβάνεται το όνομα της εφαρμογής, το λογότυπο και, προαιρετικά, ένας δείκτης φόρτωσης (περιστρεφόμενος διακόπτης, γραμμή, σύντομη κινούμενη εικόνα). Δεν έχει νόημα να γεμίζετε αυτήν την οθόνη με πληροφορίες εάν πρόκειται απλώς να εξαφανιστούν σχεδόν αμέσως.

Σε ορισμένες περιπτώσεις, χρησιμοποιείται μια διαφορετική προσέγγιση: η εμφάνιση μιας «κενής» έκδοσης της επόμενης οθόνης στην αρχική οθόνη , χωρίς μεταβλητό κείμενο ή δυναμικά δεδομένα, για να δημιουργηθεί μια αίσθηση συνέχειας και να μειωθεί το οπτικό άλμα όταν ολοκληρωθεί η φόρτωση. Στα Windows Phone, για παράδειγμα, το ίδιο το σύστημα δημιουργεί μια αρχική οθόνη με βάση ένα μεγεθυμένο εικονίδιο εφαρμογής.

Σχεδιασμός πλεγμάτων σε διεπαφές για κινητά

Κάτω από κάθε καλή διεπαφή βρίσκεται ένα αόρατο πλέγμα που οργανώνει όλα τα στοιχεία . Αυτή η δομή ορίζει τα περιθώρια, τα ελάχιστα μεγέθη κουμπιών, την απόσταση μεταξύ των γραμμών κειμένου και την εσωτερική απόσταση των κοντέινερ. Χωρίς πλέγμα, μια εφαρμογή μπορεί να φαίνεται τυχαία και ανοργάνωτη, ακόμα κι αν τα γραφικά είναι όμορφα.

Το πλέγμα βασίζεται σε μια τετράγωνη ενότητα που επαναλαμβάνεται σε ολόκληρη την οθόνη. Αυτή η ενότητα μπορεί να υποδιαιρεθεί σε μικρότερες μονάδες για να επιτευχθεί μεγαλύτερη απόσταση. Κατά τη φάση σχεδιασμού, συνήθως απεικονίζεται ως γραμμές-οδηγοί. Στην τελική έκδοση, αυτές δεν είναι πλέον ορατές, αλλά ο «ρυθμός» τους γίνεται αντιληπτός σε μια καθαρότερη, πιο ισορροπημένη και πιο εύχρηστη διεπαφή.

Πλέγμα σε Android

Στο Android, η τυπική βασική μονάδα έχει μέγεθος 48dp , περίπου 9 mm², που θεωρείται το ελάχιστο συνιστώμενο μέγεθος για στοιχεία αφής. Ο σχεδιασμός κουμπιών και περιοχών με δυνατότητα αγγίγματος με τήρηση αυτού του ελάχιστου ορίου βοηθά στη διασφάλιση της εύκολης πρόσβασης με το δάχτυλο.

• Διαβάσε επίσης αυτόν τον χρήσιμο οδηγό: Τεχνικός οδηγός για τον οπίσθιο φωτισμό και την εξοικονόμηση μπαταρίας

Μια ενότητα των 8dp χρησιμοποιείται συχνά για την απόσταση . Για παράδειγμα, το περιεχόμενο κάθε γραμμής μπορεί να έχει 4dp άνω και κάτω περιθώριο, επομένως όταν δύο γραμμές στοιβάζονται, δημιουργείται ένα συνολικό διάστημα 8dp μεταξύ των περιεχομένων τους. Τα τυπικά πλευρικά περιθώρια είναι περίπου 16dp (δύο ενότητες των 8dp), δημιουργώντας ένα ομοιόμορφο πλαίσιο και στις δύο πλευρές.

Πλέγμα στο iPhone

Το iOS χρησιμοποιεί επίσης ένα έμμεσο πλέγμα: η βασική ενότητα έχει συνήθως μέγεθος 44px , διασφαλίζοντας ότι τα κουμπιά και οι γραμμές λίστας είναι εύκολα προσβάσιμα. Αυτή η ενότητα συχνά υποδιαιρείται σε μονάδες των 11px, οι οποίες επαναλαμβάνονται για να ορίσουν την κατακόρυφη απόσταση και τον ρυθμό των λιστών, των καρτών και των μπλοκ περιεχομένου.

Πλέγμα στο Windows Phone

Στα Windows Phone, το πλέγμα είναι ιδιαίτερα εμφανές λόγω της χρήσης αναλογικών πλακιδίων στην αρχική οθόνη. Η τυπική βασική ενότητα είναι 25px, με απόσταση 12px μεταξύ των στοιχείων. Η επανάληψη αυτού του τύπου δημιουργεί γραμμές και στήλες που μπορούν να ομαδοποιηθούν για να δημιουργήσουν πιο σύνθετες συνθέσεις, διατηρώντας πάντα μια πολύ σαφή δομή.

Η αυστηρή εφαρμογή αυτών των πλεγμάτων σε λίστες, μικρογραφίες, κουμπιά και γραφικά διασφαλίζει την εμφάνιση τάξης, απλότητας και οπτικής σταθερότητας σε όλες τις οθόνες της εφαρμογής.

Τυπογραφία σε Android και άλλες πλατφόρμες

Η τυπογραφία δεν αφορά μόνο την επιλογή μιας όμορφης γραμματοσειράς: είναι το κύριο εργαλείο για να κάνετε το κείμενο ευανάγνωστο . Η επιλογή της οικογένειας γραμματοσειρών, το μέγεθος, η απόσταση μεταξύ των γραμμών, το πλάτος των στηλών και η αντίθεση με το φόντο επηρεάζουν άμεσα την αναγνωσιμότητα.

Στις κινητές συσκευές, αυτό το σημείο είναι κρίσιμο επειδή τις χρησιμοποιούμε συχνά σε εξωτερικούς χώρους, σε έντονο φως ή σε άμεσο ηλιακό φως . Εάν η αντίθεση μεταξύ κειμένου και φόντου είναι κακή, η ανάγνωση γίνεται πραγματική δοκιμασία. Επιπλέον, οι μικρές οθόνες απαιτούν ιδιαίτερη προσοχή στο μέγεθος των γραμματοσειρών και στην απόσταση μεταξύ τους.

Serif ή sans-serif

Σε περιβάλλοντα χαμηλής ανάλυσης και μικρά μεγέθη, οι γραμματοσειρές sans-serif, οι οποίες είναι πιο καθαρές και πιο ανοιχτές, τείνουν να λειτουργούν καλύτερα . Παρόλα αυτά, οι γραμματοσειρές serif μπορούν να χρησιμοποιηθούν για μεγάλους τίτλους όπου οι γραμμές δεν εμποδίζουν την αναγνωσιμότητα. Γενικά, είναι καλύτερο να αποφεύγετε τις υπερβολικά διακοσμητικές γραμματοσειρές σε μικρά μεγέθη.

Αναγνωσιμότητα, ανάλυση και ελάχιστα μεγέθη

Τα σύγχρονα τηλέφωνα υψηλής τεχνολογίας διαθέτουν οθόνες υψηλής πυκνότητας, γεγονός που μειώνει εν μέρει το πρόβλημα. Υπάρχουν όμως και πιο μέτριες συσκευές όπου οι γραμματοσειρές αποδίδονται με μικρότερη ακρίβεια . Όσο μικρότερη και πιο σύνθετη είναι η γραμματοσειρά, τόσο μεγαλύτερος είναι ο κίνδυνος να εμφανίζεται ανομοιόμορφα.

Στο Android, το μέγεθος του κειμένου μετριέται σε sp (κλιμακωτά pixel) , τα οποία σας επιτρέπουν να προσαρμόσετε την κλίμακα ανάλογα με την πυκνότητα της οθόνης και τις προτιμήσεις προσβασιμότητας του χρήστη. Τα τυπικά μεγέθη για το κείμενο της διεπαφής κυμαίνονται από 12sp έως 22sp, με συγκεκριμένες τιμές που επιλέγονται με βάση την ιεραρχία (τίτλοι, υπότιτλοι, κυρίως κείμενο, σημειώσεις κ.λπ.).

Σε iOS, με οθόνες Retina, οι κύριοι τίτλοι μπορούν να έχουν μέγεθος περίπου 34px, οι σημαντικές ετικέτες στα κουμπιά περίπου 28px και το μικρότερο κείμενο περίπου 14px. Για την ανάγνωση κειμένου, συνιστάται να μην πέφτετε κάτω από 20px .

Στα Windows Phone, όπου η διεπαφή βασίζεται σε μεγάλο βαθμό στην τυπογραφία, συνιστάται να χρησιμοποιείτε όχι λιγότερο από 20px για λιγότερο σημαντικό κείμενο, ενώ για τίτλους μπορείτε εύκολα να φτάσετε σε μεγέθη 70px ή και περισσότερο.

Τυπογραφικές ιεραρχίες

Όπως κάθε άλλο οπτικό στοιχείο, η τυπογραφία μπορεί και πρέπει να οργανωθεί σε επίπεδα ιεραρχίας . Το μέγεθος είναι το πιο προφανές εργαλείο, αλλά μπορείτε επίσης να παίξετε με το βάρος (έντονο, κανονικό, ανοιχτόχρωμο) και το χρώμα για να επισημάνετε τις διαφορές στη σημασία.

Ένας τίτλος ενότητας θα πρέπει να ξεχωρίζει από τους υπόλοιπους. Μέσα σε μια γραμμή λίστας, για παράδειγμα, ο κύριος τίτλος μπορεί να είναι με πιο έντονη γραμματοσειρά , μια σύνοψη με κανονική γραμματοσειρά και η ημερομηνία με πιο ανοιχτόχρωμη γραμματοσειρά. Ο ορισμός αυτών των ιεραρχιών από την αρχή βοηθά στη δημιουργία συνεπών συστημάτων κειμένου σε όλη την εφαρμογή.

Πηγές για κάθε λειτουργικό σύστημα

Κάθε πλατφόρμα έχει το δικό της σύνολο προτιμώμενων γραμματοσειρών συστήματος, οι οποίες παρέχουν συνέχεια με το υπόλοιπο περιβάλλον :

• Android : Για πολύ καιρό το Droid Sans ήταν το σημείο αναφοράς, αλλά αυτή τη στιγμή η οικογένεια αστέρων είναι το Roboto , με ένα ευρύ φάσμα βαρών (από πολύ ανοιχτό έως μαύρο) σχεδιασμένο για οθόνες υψηλής πυκνότητας.
• iOS : Η Neue Helvetica ήταν η προεπιλεγμένη γραμματοσειρά για χρόνια. Τώρα συνυπάρχει με (και σε πολλές περιπτώσεις αντικαθιστά) το Σαν Φρανσίσκο. Επιπλέον, το iOS προσφέρει περισσότερες από 260 οικογένειες γραμματοσειρών διαθέσιμες εγγενώς.
• Windows Phone : Η χαρακτηριστική γραμματοσειρά είναι Segoe UI , ιδανική για το επίπεδο, γεωμετρικό της στυλ. Υπάρχουν και άλλες συμπληρωματικές γραμματοσειρές για συγκεκριμένες γλώσσες ή πεζά και κεφαλαία.

Ενώ είναι δυνατό να συμπεριλάβετε προσαρμοσμένες γραμματοσειρές στην εφαρμογή σας, αξίζει να θυμάστε ότι η ποικιλία δεν είναι συνώνυμη με την ποιότητα . Πολλές γραμματοσειρές δεν είναι βελτιστοποιημένες για οθόνες ή ποικίλες πυκνότητες και μπορούν να μειώσουν το τελικό αποτέλεσμα εάν δεν δοκιμαστούν σωστά.

Χρώμα σε διεπαφές και εικονίδια Android

Το χρώμα είναι ένα από τα πιο ισχυρά και, ταυτόχρονα, πιο ευαίσθητα εργαλεία στο σχεδιασμό διεπαφών. Χρησιμεύει στη δημιουργία ιεραρχίας, στην προσέλκυση προσοχής, στη μετάδοση καταστάσεων και στην ενίσχυση της ταυτότητας της επωνυμίας . Ωστόσο, η κακή χρήση μπορεί να προκαλέσει σύγχυση, να κουράσει τα μάτια ή να συγκρουστεί με τις πολιτισμικές προσδοκίες.

Δεσμευμένα χρώματα και η σημασία τους

Υπάρχουν ορισμένα χρώματα που θεωρούνται δεσμευμένα λόγω των πρακτικά καθολικών συνδηλώσεών τους:

• Κόκκινο : σοβαρά σφάλματα, σημαντικές ειδοποιήσεις, κίνδυνος.
• Κίτρινο : προειδοποιήσεις, ενέργειες που απαιτούν προσοχή ή αποφάσεις με συνέπειες.
• Πράσινο : Επιτυχία, επιβεβαίωση ότι μια λειτουργία ολοκληρώθηκε με επιτυχία.

Η αδιάκριτη χρήση τους —για παράδειγμα, ένα κόκκινο κουμπί για μια θετική ενέργεια— μπορεί να δημιουργήσει αντιφάσεις στο μυαλό του χρήστη. Κρατήστε τα για τις χρήσεις που αναμένουν οι άνθρωποι .

Χρώμα σε κείμενα, φόντα και διαδραστικά στοιχεία

Στο κείμενο, το χρώμα βοηθά στην επισήμανση συνδέσμων και σχετικού περιεχομένου , ελαχιστοποιώντας παράλληλα την παρουσία δευτερογενών πληροφοριών. Είναι σημαντικό να διατηρείται η συνέπεια: εάν επιλέξετε ένα χρώμα για τους συνδέσμους, να χρησιμοποιείτε πάντα το ίδιο, ώστε ο χρήστης να τους αναγνωρίζει αυτόματα.

• Διαβάσε επίσης αυτόν τον χρήσιμο οδηγό: Κρυπτογράφηση εφαρμογών: Προστασία ταυτότητας στη συσκευή

Όσον αφορά τα φόντα, ο βασικός συνδυασμός είναι η αντίθεση και η καταπόνηση των ματιών . Για εφαρμογές που χρησιμοποιούνται εντατικά ή για εκτεταμένη ανάγνωση, τα ανοιχτόχρωμα φόντα με σκούρο κείμενο γενικά λειτουργούν καλύτερα. Τα σκούρα φόντα μπορούν να αποτελέσουν μια καλή επιλογή όταν το κύριο περιεχόμενο είναι ιδιαίτερα οπτικό (φωτογραφίες, βίντεο), καθώς κάνουν τις εικόνες να ξεχωρίζουν περισσότερο.

Για τα διαδραστικά στοιχεία (κουμπιά, επιλεγμένες σειρές, διακόπτες), το χρώμα είναι ένα απαραίτητο εργαλείο ανατροφοδότησης . Μια αλλαγή στην απόχρωση ή την ένταση όταν πατηθεί υποδεικνύει με σαφήνεια πού έγινε το άγγιγμα, κάτι που είναι κρίσιμο σε μικρές οθόνες χωρίς κέρσορα. Τα απενεργοποιημένα στοιχεία συνήθως αναπαρίστανται με πιο ανοιχτούς τόνους ή διαφάνεια , ενισχύοντας την ιδέα ότι δεν θα αντιδράσουν στην αφή.

Κεφαλίδες και Θέματα Συστήματος

Οι κεφαλίδες (γραμμές εργαλείων, γραμμές εφαρμογών) καταλαμβάνουν έναν ιδιαίτερα ορατό χώρο, επομένως το χρώμα που επιλέγετε για αυτές έχει σημαντικό αντίκτυπο. Θα πρέπει να εναρμονίζεται με το φόντο και τα στοιχεία που περιέχει (τίτλοι, εικονίδια, μενού) και να είναι ομοιόμορφο σε διαφορετικές οθόνες.

Ορισμένες εφαρμογές, όπως ορισμένες εφημερίδες ή μέσα ενημέρωσης, χρησιμοποιούν χρωματικές παραλλαγές στις επικεφαλίδες για να διαφοροποιήσουν οπτικά τις ενότητες . Αυτό μπορεί να ενισχύσει τον προσανατολισμό των χρηστών και, ταυτόχρονα, να επεκτείνει την οπτική γλώσσα της επωνυμίας.

Τα Android και Windows Phone προσφέρουν ανοιχτόχρωμα και σκούρα θέματα που επηρεάζουν το συνολικό χρωματικό συνδυασμό των εφαρμογών. Στα Windows Phone, ο χρήστης επιλέγει ακόμη και το θέμα και το χρώμα έμφασης, και η εφαρμογή μπορεί να αποφασίσει αν θα σεβαστεί αυτήν την προτίμηση ή θα επιβάλει τη δική της χρωματική παλέτα. Στο Android, η επιλογή εξαρτάται περισσότερο από τον σχεδιαστή: αποφασίζοντας αν θα χρησιμοποιήσει ένα ανοιχτόχρωμο θέμα, ένα σκούρο θέμα ή έναν συνδυασμό και των δύο.

Το iOS, ωστόσο, δεν λειτουργεί σε επίπεδο παγκόσμιου θέματος με τον ίδιο τρόπο, αν και έχει εισαγάγει μια σκοτεινή λειτουργία σε ολόκληρο το σύστημα. Παραδοσιακά, προτιμούσε πολύ ανοιχτό φόντο, απαλό γκρι και μπλε για εμφανή στοιχεία όπως συνδέσμους και ενεργά κουμπιά.

Γλώσσα στη διεπαφή: κείμενα, σφάλματα και τόνος

Ο σχεδιασμός της διεπαφής δεν αφορά μόνο τα χρώματα και τα κουμπιά. Αυτό που λέει το κείμενο και ο τρόπος που το λέει επηρεάζει την εμπειρία του χρήστη όσο και η οπτική εμφάνιση. Ετικέτες κουμπιών, μηνύματα σφάλματος, βοήθεια με βάση τα συμφραζόμενα, τίτλοι οθονών… όλα αθροίζονται.

Το κακογραμμένο κείμενο ενός κουμπιού μπορεί να κάνει τους χρήστες να παρερμηνεύσουν την ενέργεια που προορίζεται να εκτελέσει , οδηγώντας τους σε δισταγμό ή ακόμα και σε λάθος. Το κλειδί είναι να χρησιμοποιείτε σαφή, άμεση γλώσσα, αποφεύγοντας την περιττή τεχνική ορολογία και να πηγαίνετε κατευθείαν στο θέμα: πρώτα στις σημαντικές πληροφορίες, χωρίς να μακρηγορείτε.

Πρέπει επίσης να λάβετε υπόψη τον χρήστη σας . Δεν είναι το ίδιο να μιλάς σε έναν τεχνικό εμπειρογνώμονα με κάποιον που δεν είναι εξοικειωμένος με την τεχνολογία, ούτε σε ένα παιδί με ένα στέλεχος. Σε πολλές περιπτώσεις, η αντικατάσταση μιας ψυχρής λέξης με μια πιο προσιτή (για παράδειγμα, “enter” αντί για “access”) μαλακώνει σημαντικά την αλληλεπίδραση.

Η επικοινωνία λαθών απαιτεί ιδιαίτερη προσοχή. Αυτές οι καταστάσεις είναι εγγενώς αγχωτικές για τον χρήστη, επομένως η χρήση φιλικού τόνου, η αποφυγή της επίρριψης ευθυνών στον χρήστη και η σαφής εξήγηση του τι πρέπει να γίνει μπορούν να κάνουν τη διαφορά μεταξύ απογοήτευσης και κατανόησης. Ορισμένες εφαρμογές ψυχαγωγίας χρησιμοποιούν ακόμη και το χιούμορ για να μειώσουν την ένταση, υπό την προϋπόθεση ότι αυτό ταιριάζει με την ταυτότητα της επωνυμίας τους.

Εάν η εφαρμογή σας είναι διαθέσιμη σε πολλές γλώσσες, ελέγξτε προσεκτικά πώς το μεταφρασμένο κείμενο ταιριάζει στο σχεδιασμό. Ορισμένες γλώσσες έχουν πολύ μεγαλύτερες λέξεις , κάτι που μπορεί να προκαλέσει την αποκοπή τους, την επικάλυψη ή τη διακοπή της διάταξης. Η δοκιμή σε πραγματικό περιβάλλον είναι απαραίτητη.

Οπτικές λεπτομέρειες, κινούμενα σχέδια και μικρές «απολαύσεις» διεπαφής

Μόλις η δομή γίνει σαφής και η διεπαφή λειτουργήσει, ήρθε η ώρα να βελτιώσουμε εκείνες τις οπτικές λεπτομέρειες που διαχωρίζουν μια καλή εφαρμογή από μια αξιομνημόνευτη . Αυτές είναι λεπτές αποχρώσεις που ο χρήστης συχνά αντιλαμβάνεται υποσυνείδητα, αλλά οι οποίες αναβαθμίζουν την εμπειρία.

Για παράδειγμα, είναι καλή ιδέα να σχεδιάζετε κενές οθόνες με προσοχή : αρχικές καταστάσεις χωρίς δεδομένα, λίστες χωρίς περιεχόμενο, κοντέινερ εικόνων πριν από τη φόρτωση. Αντί να αφήνετε απλώς ένα “Καμία ένδειξη”, μπορείτε να εκμεταλλευτείτε την ευκαιρία για να καθοδηγήσετε τον χρήστη (“Ξεκινήστε δημιουργώντας το πρώτο σας στοιχείο”) και ακόμη και να χρησιμοποιήσετε απλές εικόνες.

Είναι επίσης καλή ιδέα να δώσετε προσοχή σε εφήμερα στοιχεία που εμφανίζονται για λίγο στην οθόνη, όπως ενδείξεις φόρτωσης ή μηνύματα επιβεβαίωσης. Εάν η σύνδεση είναι αργή, ο χρήστης μπορεί να αφιερώσει περισσότερο χρόνο από τον αναμενόμενο κοιτάζοντας αυτήν την οθόνη, επομένως αξίζει τουλάχιστον κάποια προσοχή στο σχεδιασμό.

Έπειτα, υπάρχουν τα λεγόμενα «οπτικά μυστικά»: μικρές γραφικές υποδείξεις που εμφανίζονται μόνο όταν εκτελούνται συγκεκριμένες ενέργειες , όπως σύρσιμο για ανανέωση ή παρατεταμένο πάτημα ενός στοιχείου. Δεν είναι απαραίτητα, αλλά όταν ο χρήστης τα ανακαλύψει, δημιουργούν μια πολύ ευχάριστη αίσθηση κοινής εμπειρίας.

Τα κινούμενα σχέδια, όταν χρησιμοποιούνται σωστά, ζωντανεύουν τη διεπαφή. Μπορούν να χρησιμεύσουν ως ανατροφοδότηση δράσης (ένα στοιχείο που γλιστράει από την οθόνη όταν διαγράφεται, δείχνοντας πού πηγαίνει), ως ομαλές μεταβάσεις μεταξύ οθονών που βοηθούν στην πλοήγηση ή ως ενημερωτικός πόρος για την επισήμανση νέων λειτουργιών ή την εξήγηση μιας χειρονομίας. Και μερικές φορές, είναι απλώς οπτικές απολαύσεις που κάνουν την καθημερινή χρήση πιο ευχάριστη.

Ωστόσο, είναι καλύτερο να μην το παρακάνετε: οι κινούμενες εικόνες πρέπει να είναι γρήγορες, διακριτικές και ουσιαστικές . Εάν εμποδίζουν την αλληλεπίδραση ή προκαλούν αποπροσανατολισμό, θα λειτουργήσουν εναντίον σας.

Τελικά, ο σχεδιασμός διεπαφών και εικονιδίων για Android περιλαμβάνει τον συνδυασμό τεχνικών προτύπων (όπως οι αυστηρές προδιαγραφές εικονιδίων του Google Play), αρχών UX (πλέγματα, μεγέθη αφής, τυπογραφικές ιεραρχίες), αποφάσεων ταυτότητας (χρώματα, σχήματα, τόνος φωνής) και μια καλή δόση ενσυναίσθησης για τον τελικό χρήστη. Εάν δώσετε προσοχή τόσο στη βάση – δομή, αναγνωσιμότητα, προσβασιμότητα – όσο και σε αυτές τις μικρές οπτικές και γλωσσικές λεπτομέρειες που εξανθρωπίζουν την εφαρμογή, θα έχετε πολύ περισσότερες πιθανότητες η εφαρμογή σας να ξεχωρίζει στο κατάστημα, να είναι διαισθητική από την πρώτη χρήση και να κερδίζει μια μόνιμη θέση στις αρχικές οθόνες των χρηστών σας.