Εικονογράμματα
Μικρά, απλά γραφικά στοιχεία που ενισχύουν βασικά στοιχεία του ιστού, επικοινωνώντας ιδέες γρήγορα και αποτελεσματικά.
Κυριολεκτικά, λειτουργικά και γεωμετρικά — τα εικονογράμματά μας αποστάζουν τις ιδέες στην πιο καθαρή τους μορφή, μεταφέροντας σαφή σκοπό και διαχρονική απλότητα.
Τύπος
Τα εικονογράμματα του Spaceship διατίθενται σε δύο τύπους: regular και comp. Ο τύπος comp συνδυάζει ένα κανονικό εικονόγραμμα με ένα εικονίδιο από τη Βιβλιοθήκη Εικονογραφίας του Spaceship, επιτρέποντάς μας να αποδίδουμε πιο σύνθετες και συγκεκριμένες έννοιες.
Εκδόσεις
Όλα τα εικονογράμματα του Spaceship είναι διαθέσιμα σε δύο εκδόσεις: filled (κύρια) και outlined (δευτερεύουσα). Η περιγραμμική έκδοση θα πρέπει να χρησιμοποιείται μόνο όταν ένα εικονόγραμμα χρειάζεται μικρότερο οπτικό βάρος από τα γειτονικά εικονογράμματα, το κείμενο ή τα στοιχεία UI. Αυτό βοηθά στη δημιουργία οπτικής ιεραρχίας σε σύνθετες διατάξεις.
Κατασκευή
Τα εικονογράμματα βασίζονται σε ένα σύνολο κανόνων, από το βασικό πλέγμα έως τις παραμέτρους διαβάθμισης και περιγράμματος, ώστε να διασφαλίζονται συνεπή και ισορροπημένα αποτελέσματα.
Μέγεθος
Τα εικονογράμματα του Spaceship έχουν σχεδιαστεί ώστε να είναι κλιμακώσιμα, διατηρώντας την οπτική συνέπεια και εξασφαλίζοντας τη βέλτιστη αναγνωσιμότητα. Υπάρχουν πέντε μεγέθη εικονογραμμάτων στο design system μας.
Χρώματα
Τα εικονογράμματα γενικά χρησιμοποιούν μία μόνο απόχρωση. Η μόνη εξαίρεση είναι ο τύπος comp, ο οποίος μπορεί να περιλαμβάνει χρώματα επωνυμίας ή ειδοποιήσεων, για τα οποία θα βρείτε περισσότερες πληροφορίες παρακάτω. Για να διασφαλιστεί η συνέπεια σε περιβάλλοντα UI, τα εικονογράμματα ακολουθούν τις χρωματικές αναφορές του Spaceship Design System.
Προεπιλεγμένο χρώμα
Το γκρι είναι το προεπιλεγμένο χρώμα για τα εικονογράμματα και θα πρέπει να χρησιμοποιείται για την αναπαράσταση μηνυμάτων, ενεργειών ή λειτουργιών. Σε εξαιρετικές περιπτώσεις, μπορεί επίσης να χρησιμοποιηθεί για προϊόντα. Τα περιγραμμικά εικονογράμματα είναι διαθέσιμα μόνο στο προεπιλεγμένο χρώμα.
Χρώματα επωνυμίας
Το SPS Blue, το SPS Dark Gray ή το λευκό μπορούν επίσης να χρησιμοποιηθούν αντί του προεπιλεγμένου χρώματος όταν χρειάζεται μεγαλύτερη οπτική επίδραση ή για να ενισχυθεί η ταυτότητα του Spaceship. Δείτε τη σελίδα χρωμάτων για περισσότερες λεπτομέρειες.
Χρώματα προϊόντων
Το κύριο χρώμα του προϊόντος θα πρέπει να χρησιμοποιείται για εικονογράμματα σε περιβάλλοντα αφιερωμένα στο προϊόν (σελίδες προϊόντων, κάρτες προϊόντων κ.λπ.) για όλα τα τρέχοντα και επερχόμενα προϊόντα.
Χρώματα ειδοποιήσεων
Αυτά τα χρώματα θα πρέπει να χρησιμοποιούνται για να ενισχύουν ένα μήνυμα ειδοποίησης. Η έκδοση comp θα πρέπει να χρησιμοποιείται μόνο σε γενικά μηνύματα συστήματος και όχι σε καταστάσεις προειδοποίησης.
Καθοδήγηση
Ακολουθούν μερικά παραδείγματα για το τι πρέπει να αποφεύγετε κατά τη δημιουργία και τη χρήση εικονογραμμάτων.
Μην αφήνετε βασικά στοιχεία του κανονικού εικονογράμματος να πέφτουν στη κάτω δεξιά γωνία.
Μην χρησιμοποιείτε σύνθετες ή πολύχρωμες διαβαθμίσεις στις γεμάτες εκδόσεις.
Μην αναμειγνύετε γεμάτα και περιγραμμικά στοιχεία στον τύπο comp.
Μην χρησιμοποιείτε άλλα χρώματα στις γεμάτες εκδόσεις πέρα από αυτά που προσδιορίζονται παραπάνω.
Μην χρησιμοποιείτε κανένα χρώμα στις περιγραμμικές εκδόσεις πέρα από το προεπιλεγμένο χρώμα.
Μην συνδυάζετε το προεπιλεγμένο χρώμα με οποιοδήποτε άλλο χρώμα εκτός από το βασικό χρώμα επωνυμίας του Spaceship και τα χρώματα ειδοποιήσεων.