Τα μυστικά για αποτελεσματικό σχεδιασμό με βάση την κάρτα
Έτσι θέλετε να πάρετε on-trend με μια κάρτα-interface interface; Αυτή είναι ίσως μια μεγάλη ιδέα. οι κάρτες είναι μια δημοφιλής και φιλική προς το χρήστη επιλογή για όλους τους τύπους ψηφιακού σχεδιασμού σε διαφορετικά μεγέθη συσκευών.
Το κλειδί για ένα σχέδιο κάρτας δημιουργεί κάτι που οι χρήστες θέλουν να κάνουν κλικ. (Αυτό είναι το κλειδί για μια μεγάλη κάρτα.) Μια κάρτα θα πρέπει να χρησιμεύει ως δοχείο για ένα συγκεκριμένο κομμάτι περιεχομένου - σύνδεσμος περιεχομένου, εγγραφή, συσκευή αναπαραγωγής βίντεο και ούτω καθεξής - με τους οποίους επιθυμούν να αλληλεπιδρούν οι χρήστες.
Δείτε πώς το σχεδιάζετε ...
Ξεκινήστε με ένα ασπρόμαυρο περίγραμμα
Ακούγεται πολύ απλό: αρχίστε με ένα ασπρόμαυρο σύρμα για το σχέδιο. Σκεφτείτε για την πρόθεση της κάρτας και ποια μέρη της θα είναι κλικ ή tappable. (Η όλη κάρτα μπορεί να χρησιμεύσει ως σύνδεσμος.)
Σχεδιάστε στοιχεία όπως διαστήματα, εικόνες και τυπογραφία, ώστε να μπορείτε να δείτε την κάρτα χωρίς χρώμα ή εξωραϊσμό. Σκεφτείτε το ως τη φάση της "κάρτας παιχνιδιού" του σχεδιασμού. Όλα τα στοιχεία της κάρτας υπάρχουν. Φαίνεται σαν ένα πλαίσιο που είναι εύκολο να καταλάβει κανείς;
Σκεφτείτε πώς θα το χρησιμοποιήσετε από αυτό το στάδιο. Πού θα πατήσετε για μια ενέργεια; Είναι το σχέδιο και το αποτέλεσμα σαφές; Πώς επιστρέφετε ή προχωράτε; Οι απαντήσεις σε αυτές τις ερωτήσεις πρέπει να είναι σχετικές χωρίς συμβουλές, όπως ένα κόκκινο κουμπί "κάντε κλικ εδώ" που αναβοσβήνει στην οθόνη.
Όπως συμβαίνει με οποιοδήποτε άλλο έργο, εάν το περίγραμμα δεν λειτουργεί ασπρόμαυρα, ο τελικός σχεδιασμός πιθανότατα δεν θα είναι και αυτός.
Χρησιμοποιήστε υπερβολική απόσταση
Η μεγαλύτερη πρόκληση όταν πρόκειται για κάρτες είναι η δημιουργία ενός συμπαγούς σχεδίου που δεν αισθάνεται γεμάτο. Αυτός είναι ο τόπος όπου έρχονται τα κενά. Και θα θελήσετε να χρησιμοποιήσετε περισσότερο από ό, τι αισθάνεται άνετα στην αρχή.
Η προσθήκη κενών θέσεων θα δώσει στα στοιχεία περισσότερα περιθώρια αναπνοής, κάνοντας τη συνολική κάρτα πιο ευρύχωρη και αυξάνοντας την αναγνωσιμότητα.
Γενικά, ίσως θελήσετε να ξεκινήσετε με το διπλάσιο διάστημα που μπορεί κανονικά να θεωρήσετε μεταξύ των στοιχείων. Οι υδρορροές πρέπει να είναι πολύ ευρείες και η απόσταση μεταξύ των γραμμών θα μπορούσε να χρησιμοποιήσει και το επιπλέον δωμάτιο. Ο επιπλέον χώρος θα σας βοηθήσει να δημιουργήσετε ένα ανοιχτό σχέδιο και να οργανώσετε το περιεχόμενο με μεγαλύτερη σαφήνεια. Η κάρτα έχει έναν αρκετά περιορισμένο καμβά και πρέπει να ταιριάζει σε μία οθόνη ενός τηλεφώνου και σε ένα τμήμα παρόμοιας μορφής της οθόνης σε μεγαλύτερες συσκευές, όπως tablet ή επιτραπέζιους υπολογιστές. Οι κάρτες μπορούν επίσης να ανταγωνίζονται άλλες κάρτες για προσοχή στις μεγαλύτερες οθόνες. Η προσθήκη κενών θέσεων θα βοηθήσει ολόκληρο το σχέδιο να αισθάνεται πιο ανοικτό και εύκολο να βουτήξει.
Προσθέστε φυσικό χρώμα και σκίαση
Τώρα είστε έτοιμοι να σκεφτείτε το χρώμα και τη σκίαση για το σχεδιασμό. Διατηρήστε τη φυσική εμφάνιση και μιμούνται την πραγματικότητα στις σκιές και στυλ του σχεδιασμού.
Όχι, δεν μιλάμε για σπερμομορφισμό εδώ, μιλάμε για τη δημιουργία χρώματος με φυσικά περιγράμματα και σκιές. Σκεφτείτε πώς θα προβληθεί μια κάρτα. Ο χρήστης θα πρέπει να έχει το ίδιο συναίσθημα σαν να τον κρατούσε πραγματικά.
Χρησιμοποιήστε μερικούς από τους βασικούς κανόνες της φυσικής για να φανταστείτε (και να σχεδιάσετε) κάθε κάρτα όπως θα τηρούσε:
- Ο φωτισμός πρέπει να ρίχνει μερικές σκιές στο πίσω και στο κάτω μέρος.
- Το πιο σκοτεινό μέρος του σχεδίου είναι πιθανό στο κάτω μέρος χάρη στις συνθήκες φωτισμού, οι οποίες κανονικά προέρχονται από πάνω.
- Αποφύγετε το περιεχόμενο σε περιοχές που απαιτούνται για τη συγκράτηση της κάρτας.
- Τα σημεία επαφής (και οι συναφείς ενέργειες παρότρυνσης για δράση) πρέπει να είναι σημεία εστίασης και να αλληλεπιδρούν εύκολα. (Ακριβώς όπως το πρόσωπο της κάρτας παιχνιδιού βρίσκεται στο επίκεντρο του σχεδίου.)
- Μια κάρτα αντιστοιχεί σε ένα κομμάτι πληροφοριών.
Δημιουργήστε απλά επίπεδα
Τώρα που σκέφτεστε τη φυσική, μεταβείτε στο επόμενο επίπεδο με απλή layering για να δημιουργήσετε ένα ενοποιημένο στυλ κάρτας για ολόκληρο το περιβάλλον. Δεν είστε σίγουροι από πού να αρχίσετε; Η Google Οδηγίες σχεδιασμού υλικού είναι ένα καλό σημείο εκκίνησης.
"Στο σχεδιασμό του υλικού, οι φυσικές ιδιότητες του χαρτιού μεταφράζονται στην οθόνη. Το φόντο μιας εφαρμογής μοιάζει με την επίπεδη, αδιαφανή υφή ενός φύλλου χαρτιού.
Η συμπεριφορά μιας εφαρμογής μιμείται την ικανότητα του χαρτιού να αναδιαμορφώνεται, να ανακατεύεται και να συνδέεται μαζί σε πολλαπλά φύλλα. Τα στοιχεία που ζουν εκτός των εφαρμογών, όπως η κατάσταση ή οι ράβδοι συστήματος, λαμβάνουν διαφορετική μεταχείριση. Είναι ξεχωριστά από το περιεχόμενο της εφαρμογής κάτω από αυτά και δεν φέρουν τις φυσικές ιδιότητες του χαρτιού.
Σπάστε το κάτω και πηγαίνει πίσω στο να κάνετε ένα ψηφιακό αντικείμενο να φαίνεται και να αισθάνεται φυσικό. Και αν οι χρήστες θέλουν να το αγγίξουν, θα θέλουν να το κάνουν. Η ιδέα είναι απλά τόσο απλή.
Προσέχετε απλές γραμματοσειρές
Όταν πρόκειται για την τυπογραφία, οι απλοί sirifs είναι συχνά η απάντηση. Αποφύγετε τις υπερβολικά λεπτές ή συμπυκνωμένες επιλογές επειδή μπορεί να είναι κάπως πιο σκληρές στα μάτια.
Οι περισσότερες κάρτες λειτουργούν καλύτερα με δύο επιλογές γραμματοσειράς (ακόμα και αν προέρχονται από την ίδια οικογένεια) - κάτι για το κύριο σώμα και άλλο για την επικεφαλίδα ή την παρότρυνση για δράση. Ο σημαντικότερος παράγοντας όσον αφορά την τυπογραφία είναι να θυμάστε να συμπεριλάβετε αρκετή αντίθεση ώστε τα στοιχεία κειμένου να είναι ευανάγνωστα. Θυμηθείτε να συμπεριλάβετε την αντίθεση μεταξύ των γραμματοσειρών και την αντίθεση μεταξύ των στοιχείων φόντου και κειμένου για κάθε κάρτα.
Περιορισμός στοιχείων UI
Επαναλάβετε μετά από μένα: μία κάρτα ισούται με μία ενέργεια.
Έτσι, αυτό πιθανώς σημαίνει ότι δεν χρειάζεται να συμπεριλάβετε μια δέσμη στοιχείων διεπαφής χρήστη, όπως κουμπιά σε όλο το σχέδιο.
Μπορεί να μην χρειαστεί καν ένα κουμπί σε όλα σε ένα σχέδιο σε σχήμα καρτών.
Αλλά αν νομίζετε ότι οι χρήστες χρειάζονται μια οπτική αναφορά, ένα κουμπί είναι αρκετό. Διατηρήστε το σχήμα και το σχεδιασμό απλά - και πάλι, η προσέγγιση Σχεδιασμού Υλικού είναι μια καλή επιλογή - και να κολλήσετε σε ένα μόνο κουμπί.
Ένα κουμπί είναι ίσως το μόνο στοιχείο UI που χρειάζεστε. Αυτός είναι ο σχεδιαστικός σας στόχος.
συμπέρασμα
Δεν υπάρχει μια μαγική φόρμουλα για την τέλεια κάρτα, αλλά υπάρχουν κάποιες επιλογές σχεδιασμού που μπορείτε να κάνετε, ώστε να ενθαρρύνετε κάθε χρήστη να κάνει κλικ (ή να αγγίξει). Κρατήστε το σχέδιό σας στο επίκεντρο της πραγματικότητας, ακολουθήστε μια μινιμαλιστική προσέγγιση με άφθονο χώρο και αντίθεση, δώστε έμφαση στην απλή τυπογραφία και δημιουργήστε μια ενιαία ενέργεια για κάθε κάρτα.
Μετά από αυτό το περίγραμμα θα σας βοηθήσουμε να φανταστείτε καλύτερα και να κατανοήσετε τα έργα τύπου καρτών που επιθυμούν να αλληλεπιδράσουν οι χρήστες. Συνδυάστε αυτές τις ιδέες με τη θεωρία του σχεδιασμού και τις τρελλές δεξιότητές σας για ένα μεγάλο έργο που θα είναι διασκεδαστικό για τους χρήστες και την αισθητική στην τάση.