Σχεδίαση λειτουργικών εικονιδίων

Πρόχειρος κανόνας για μεταφορές εικονιδίων

"Αν πρέπει να σκεφτείτε για ένα εικονίδιο να 'το πάρετε', η μεταφορά είναι πολύ σύνθετη"

  • Σχεδίαση προτεινόμενων λειτουργικών εικονιδίων

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

    Φιγούρα 9-3Ένα προτεινόμενο λειτουργικό εικονίδιο για έναν επεξεργαστή κειμένου
    Φιγούρα 9-4Ένα προτεινόμενο λειτουργικό εικονίδιο για υπογράμμιση
  • Κάντε διακριτά τα σχήματα των εικονιδίων

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

    Παράδειγμα 9-1Διακριτά σχήματα από το θέμα εικονιδίων του GNOME

9.3.1. Προτεινόμενη διαδικασία σχεδίασης για εικονίδια εργαλειοθηκών και μενού

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

  1. Σχεδιάστε το βασικό περίγραμμα όσο πιο κοντά στα 48x48 εικονοστοιχεία:

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

  3. Χρησιμοποιήστε την ολοκληρωμένη εικόνα ως ένα εικονίδιο υψηλής αντίθεσης και μεγάλης γραμματοσειράς:

  4. Το GNOME θα το σμικρύνει αυτόματα ώστε να δημιουργήσει ένα εικονίδιο με υψηλή αντίθεση διαστάσεων 24x24:

  5. Ή μπορείτε να δημιουργήσετε με το χέρι μια έκδοση 24x24, που θα είναι ανώτερη σε αντίθεση και οξύτητα:

  6. Προσθέστε χρώμα και εξομάλυνση στο μεγάλης γραμματοσειράς και υψηλής αντίθεσης εικονίδιο:

  7. Προσθήκη διαβαθμίσεων για ένα ομαλό, ρεαλιστικό αποτέλεσμα:

  8. Προσθέστε μια πίπτουσα σκιά (γενική γωνία 120 μοιρών, απόστασης 4 εικονοστοιχείων, θόλωσης 4 εικονοστοιχείων, 40% αδιαφάνεια) και χρησιμοποιήστε την ολοκληρωμένη εικόνα ως εικονίδιο κανονικής αντίθεσης και μεγάλης γραμματοσειράς:

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

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

  11. Το GNOME θα το σμικρύνει αυτόματα ώστε να δημιουργήσει ένα εικονίδιο 24x24 με χαμηλή αντίθεση:

  12. Ή μπορείτε να δημιουργήσετε με το χέρι μια έκδοση 24x24, που θα είναι ανώτερη σε αντίθεση και οξύτητα:

9.3.2. Προβλήματα προς αποφυγή

  • Αποφύγετε τα εικονίδια που υποδηλώνουν κάποιο όνομα

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

    Φιγούρα 9-5Το αρχικό εικονίδιο με προτεινόμενο όνομα για το Ναυτίλο
  • Μην συμπεριλάβετε χαρακτηριστικό κείμενο σε εικονίδια

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

    Φιγούρα 9-6Κείμενο στο αρχικό εικονίδιο του Gedit
  • Μην βασίζεστε σε πληροφορίες που οι χρήστες σας δεν έχουν

    Τυχαία εικονίδια εμφανίζονται να μην έχουν σχέση με την εφαρμογή (εκτός από ίσως κάποια περίεργη σύνδεση στο μυαλό του προγραμματιστή). Αυτά τα εικονίδια δεν πρέπει ποτέ να χρησιμοποιηθούν και θα μπερδέψουν πιθανόν τον χρήστη περισσότερο από ότι θα τον βοηθήσουν. Ο σκοπός του εικονιδίου δεν πρέπει να είναι να "φαίνεται όμορφο"· αυτό είναι απλά μια πολύ επιθυμητή παρενέργεια.

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

    Φιγούρα 9-7Ένα φαινομενικά τυχαίο εικονίδιο για το SodiPodi
  • Μην συμπεριλάβετε άσχετες πληροφορίες

    Να θυμάστε ότι τα εικονίδια συχνά προβάλλονται σε μικρότερη μορφή. Υπερβολικές πληροφορίες μπορεί να κάνουν το εικονίδιο ακατανόητο όταν μικραίνει σε μέγεθος (π.χ. όταν τοποθετείται σε ένα πλαίσιο ή στη λίστα εργασιών). Υπερβολικές πληροφορίες επίσης διευκολύνουν τους χρήστες να μπερδευτούν σχετικά με τον σκοπό της εφαρμογής. Για παράδειγμα, σε έλεγχο χρήσης πολλοί χρήστες νόμισαν μια παλιότερη έκδοση του εικονιδίου Evolution (παρακάτω) θα ξεκινούσε έναν επεξεργαστή κειμένου. Παραπλανήθηκαν από το μολύβι και το χαρτί, που μπορεί να ιδωθεί ως άσχετη πληροφορία: υπονοείται ότι το πρόγραμμα αλληλογραφίας θα σας επιτρέψει να γράψετε μηνύματα καθώς και να δεχτείτε. Ένα καλύτερο εικονίδιο θα μπορούσε να ήταν ένας απλός φάκελος. Πιο σημαντικό στο μυαλό του σχεδιαστή του εικονιδίου θα πρέπει να υπήρχε μια σκέψη των ελάχιστων απαραίτητων οπτικών στοιχείων για την έκφραση του σκοπού του προγράμματος.

    Φιγούρα 9-8Άσχετες πληροφορίες -το εικονίδιο του Evolution

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

    Φιγούρα 9-9Άσχετες πληροφορίες - το παλιό εικονίδιο του Gnumeric
  • Μην συμπεριλάβετε μέρη του σώματος στο εικονίδιο

    Επειδή το GNOME σκοπεύει να είναι μια διεθνής επιφάνεια εργασίας, χρειάζεται να αποφύγει εικόνες που είναι δυνητικά προσβλητικές ή συγκρούονται με άλλους πολιτισμούς. Μια πρώτη πηγή προσβλητικών εικόνων είναι ποικίλα μέρη του σώματος σε έναν αριθμό διαφορετικών διαμορφώσεων. Πέρα από προσβλητικές χειρονομίες με παλάμες, βραχίονες ή δάκτυλα· μέρη του σώματος θεωρούνται "καθαρά" σε έναν πολιτισμό (όπως τα μάτια), ενώ θεωρούνται κακόγουστα ή χυδαία σε κάποιον άλλον (όπως η μύτη). Με βάση μια έρευνα εικονιδίων στο GNOME, τα μέρη του σώματος εμφανίζονται συχνά στα λιγότερο επικοινωνιακά εικονίδια (συχνά "δείχνοντας" σε κάποιο στοιχείο στο εικονίδιο)· χρησιμοποιούνται ως μια αναποτελεσματική βοήθεια για φτωχή μεταφορά. Σε αυτές τις καταστάσεις μέρη του σώματος δεν πρέπει να χρησιμοποιούνται. Ακόμα σε καταστάσεις όπου η μεταφορά είναι κατάλληλη (για παράδειγμα ένα μάτι που αντιπροσωπεύει την εμφάνιση της εφαρμογής sawfish) είναι καλύτερο να αποφύγετε τη χρήση μέρους του σώματος. Συχνά μέρη του σώματος χρησιμοποιήθηκαν στο GNOME για προτείνουν μια ανθρώπινη "επιλογή" ή "χρήση" από κάτι. Αυτό είναι κανονικά ένα περιττό σημείο για τον σχεδιαστή του εικονιδίου. Τα άτομα προσπαθούν φυσικά να καταλάβουν αντικείμενα αναφορικά με τον εαυτόν τους (εμφανίστε σε κάποιον ένα ρόπαλο και θα σκεφτεί να χτυπήσει κάτι με το ρόπαλο, εμφανίστε ένα εργαλείο και θα σκεφτεί τη χρήση του, κλπ). Για παράδειγμα, ο επιλογέας γραμματοσειράς εμφανίζει ένα δάκτυλο που δείχνει σε ένα "F" υποδεικνύοντας στον χρήστη να επιλέξει μεταξύ μιας σειράς γραμματοσειρών. Ένα καλύτερο εικονίδιο θα ήταν το κείμενο "Aa" που παρουσιάζεται με μια κομψή γραμματοσειρά (προκαλώντας την προσοχή στη γραμματοσειρά παρά στο κείμενο). Ο χρήστης δεν χρειάζεται να του πούνε να "επιλέξει" τη γραμματοσειρά, μπορεί να το συμπεράνει εύκολα.

    Φιγούρα 9-10Χρήση τμημάτων σώματος- το εικονίδιο του επιλογέα γραμματοσειράς
    Φιγούρα 9-11Ένα καλύτερο εικονίδιο για τον επιλογέα γραμματοσειράς
  • Μην βασίζετε τη μεταφορά της εικόνας σε λογοπαίγνια

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

    Φιγούρα 9-12Λογοπαίγνιο - εικονίδιο παρακολούθησης ημερολογίου συστήματος
  • Μην χρησιμοποιείτε βίαιες εικόνες

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

    Φιγούρα 9-13Εικονίδιο τερματισμού με καταστροφική εμφάνιση