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

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

Ξεκινήστε με ασπρόμαυρα περιγράμματα

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

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

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

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

Χρησιμοποιήστε πολύ ελεύθερο χώρο

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

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

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

Προσθέστε φυσικά χρώματα και αποχρώσεις

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

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

Χρησιμοποιήστε πολλά φυσικούς κανόνες, που ισχύουν όταν κρατάτε την κάρτα στα χέρια σας:

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

Κρατήστε το απλό

Τώρα, έχοντας υπόψη τις φυσικές ιδιότητες, προχωρήστε στο επόμενο βήμα - δημιουργώντας ένα κοινό στυλ κάρτας για ολόκληρη τη διεπαφή. Δεν ξέρετε από πού να ξεκινήσετε; Ένα εξαιρετικό σημείο εκκίνησης θα ήταν Οδηγός Σχεδιασμού Υλικώναπό την Google.

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

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

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

Επιλέξτε απλές γραμματοσειρές

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

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

Περιορισμός στοιχείων διεπαφής χρήστη

Θυμηθείτε: ένα φύλλο ισούται με μια ενέργεια.

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

Διατηρήστε τα σχήματα και το σχέδιο απλά—και πάλι, το Material Design είναι μια εξαιρετική επιλογή—και προσπαθήστε να μην κάνετε περισσότερα από ένα κουμπιά.

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

Σύναψη

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

Μετάφραση – Αίθουσα εφημεριών

26.12.2016

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

Ένας καλά εκτελεσμένος σχεδιασμός κάρτας μπορεί να βελτιώσει το UX (User Experience) της εφαρμογής σας. Σε αυτό το άρθρο θα περιγράψω 5 χρήσιμες τεχνικέςνα εφαρμόσει το σχέδιο καρτών και να δώσει μερικά ενδιαφέροντα παραδείγματα.

• Διαβάστε επίσης:

1. Ακολουθήστε τον κανόνα "Μία κάρτα - μία έννοια"

2. Ολόκληρη η επιφάνεια της κάρτας πρέπει να έχει δυνατότητα κλικ

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

Συμβουλή:είναι καλό όταν οι κάρτες ρίχνουν μια σκιά, δείχνοντας βάθος - αυτό είναι επιβεβαιώνει οπτικά τη δυνατότητα κλικ της κάρτας.

3. Κάντε τις κάρτες ελκυστικές

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

Όταν πρόκειται για το σχεδιασμό της κάρτας, πρέπει να εστιάσετε στα ακόλουθα σημεία:

εικόνες

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

Σκιές και κλίσεις

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

Τυπογραφία

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

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

Συμβουλή: Η κανονική γραμματοσειρά sans-serif είναι ιδανική για κάρτες.

• Διαβάστε επίσης:

4. Περιορίστε το περιεχόμενο της κάρτας

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

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

5. Εκμεταλλευτείτε τα κινούμενα σχέδια και την κίνηση

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

Οπτικές ενδείξεις

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

Οπτική ανατροφοδότηση

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

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

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

Η ιδέα να φτιάξεις ένα σχέδιο βασισμένο σε κάρτες είναι απλά υπέροχη.

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

Δεύτερο, φυσικά, αυτό το σχέδιο είναι επίσης αρκετά φιλικό προς το χρήστη.

Τρίτον, αυτό το σχέδιο φαίνεται υπέροχο σε όλους τους τύπους οθονών σε όλες τις πιθανές αναλύσεις.

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

Ξεκινήστε με ένα ασπρόμαυρο πλαίσιο

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

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

Προσπαθήστε να σκεφτείτε σαν τελικός χρήστης:

• Πού θα κάνετε κλικ για να πάτε στο επόμενο βήμα;
• Λαμβάνετε το περιεχόμενο που περιμένετε όταν κάνετε κλικ σε ένα στοιχείο κάρτας;
• Είναι εύκολη η πλοήγηση μεταξύ οθονών;

Χρησιμοποιήστε αυξημένη επένδυση

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

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

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

Χρήση βασικές αρχέςκαι τους νόμους της φυσικής για να οπτικοποιήσετε και να σχεδιάσετε κάθε κάρτα σαν να την κρατούσατε μπροστά σας στα χέρια σας:

• Ο φωτισμός πρέπει να ρίχνει ελαφριές σκιές στο κάτω μέρος και στις πλευρές της κάρτας.
• Το πιο σκοτεινό μέρος της κάρτας είναι η βάση της.
• Μην τοποθετείτε το περιεχόμενο πολύ κοντά στις άκρες.
• Τα στοιχεία με δυνατότητα κλικ θα πρέπει να βρίσκονται στα πιο εύκολα προσβάσιμα μέρη της κάρτας σε οποιαδήποτε ανάλυση. Θα πρέπει να είναι τόσο εύκολο να κάνετε κλικ με ένα ποντίκι όσο να κάνετε κλικ με ένα δάχτυλο σε ένα smartphone.
• Μία κάρτα - μία πληροφορία.

Δημιουργήστε απλά επίπεδα

Τώρα που έχετε ήδη ασχοληθεί με τη φυσική, φτιάξτε μια ενοποιημένη κάρτα για όλα τα μέρη της διεπαφής. Δεν ξέρετε από πού να ξεκινήσετε; Οδηγίες GoogleΜε Σχεδιασμός Υλικούείναι μια εξαιρετική αφετηρία.

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

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

Στην πραγματικότητα, το καθήκον είναι να δημιουργηθεί ένα ψηφιακό αντικείμενο που θα μοιάζει με υλικό. Και αν ο χρήστης θέλει να το αγγίξει, τότε θα θέλει να κάνει κλικ σε αυτό. Ναι, η ιδέα είναι τόσο απλή.

Μείνετε σε απλές διεπαφές

Όσον αφορά την τυπογραφία sans serifs- πάντα η απάντηση. Αποφύγετε τη χρήση γραμματοσειρών που είναι πολύ λεπτές ή δυσανάγνωστες, καθώς το κείμενο θα είναι αρκετά δύσκολο να διαβαστεί.

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

Μειώστε τον αριθμό των στοιχείων διεπαφής χρήστη

Επαναλαμβάνω: μια κάρτα - μια ενέργεια.

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

Σύναψη

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

Σε αυτό το άρθρο, λοιπόν, θα σας εξηγήσω τι είναι το “card design” και πώς επηρεάζει γενικά το web design.

Υψος κινητές τεχνολογίεςοδήγησε σταδιακά σε μια αλλαγή στην αρχιτεκτονική του ιστότοπου προς την ανταπόκριση και την προσαρμοστικότητα. Αυτές οι δύο παράμετροι έχουν γίνει υποχρεωτικές. Αυτά τα γεγονότα συνέβαλαν μεγάλη επιτυχία"κάρτες" - ένας από τους κύριους τομείς του σχεδιασμού ιστοσελίδων το 2015.

Ωστόσο, μπορούμε με βεβαιότητα να πούμε ότι οι χάρτες δεν είναι απλώς μια μόδα σχεδιασμού, είναι το μέλλον της ανάπτυξης ιστού, όπως είναι ο καλύτερος τρόποςοργανώνουν και προβάλλουν περιεχόμενο με συνεκτικό τρόπο. Σε αυτό το άρθρο, λοιπόν, θα σας εξηγήσω τι είναι το “card design” και πώς επηρεάζει γενικά το web design. Πάμε!

Σχεδιασμός καρτών ανά τους αιώνες

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

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

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

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

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

Τι είναι οι χάρτες στο Διαδίκτυο;

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

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

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

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

Γιατί πρέπει να χρησιμοποιήσετε κάρτες;

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

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

Οι χάρτες εισάγουν τη σειρά: Οι χάρτες εισάγουν επίπεδα οργάνωσης για περιεχόμενο.

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

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

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

Τρέχουσες τάσειςκαι προσεγγίσεις στην ανάπτυξη Ιστού

Μάθετε τον αλγόριθμο για γρήγορη ανάπτυξη από την αρχή στη δημιουργία ιστοσελίδων

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

Ποιος χρησιμοποιεί τις κάρτες;

Ντρίμπλα

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

Pinterest

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

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

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

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

The Guardian

Η διάσημη βρετανική εφημερίδα The Guardian εφάρμοσε ένα σχέδιο κάρτας στον ιστότοπό της προκειμένου να «σκέφτεται διαφορετικά και να βελτιώσει την ανακάλυψη και την προώθηση περιεχομένου».

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

Σύναψη

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

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

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

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

Ξεκινήστε με μια ασπρόμαυρη διάταξη

Ξεκινήστε το σχέδιό σας με ένα ασπρόμαυρο πλαίσιο. Σκεφτείτε κάθε κάρτα και ποιο περιεχόμενο θα κρύβεται πίσω από αυτήν.

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

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

Αφήστε περισσότερο κενό διάστημα μεταξύ των καρτών

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

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

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

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

Προσθέστε φυσικά χρώματα και σκιές

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

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

Η χρήση ορισμένων βασικών κανόνων φυσικής θα σας επιτρέψει να παρουσιάσετε το σχέδιο κάθε κάρτας πιο φυσικά:

Ο φωτισμός πρέπει να ρίχνει μερικές σκιές στο φόντο και στο κάτω μέρος.

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

Τα κουμπιά και οι παροτρύνσεις για δράση θα πρέπει να τοποθετούνται έτσι ώστε να είναι εύκολη η αλληλεπίδρασή τους.

Δεν πρέπει να υπάρχουν περισσότερα από ένα πληροφοριακά μηνύματα σε μία κάρτα.

Δημιουργήστε απλά επίπεδα

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

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

Χρησιμοποιήστε απλές γραμματοσειρές

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

Τι άλλο είναι σημαντικό για την αναγνωσιμότητα; Φροντίστε να συμπεριλάβετε αντίθεση μεταξύ του χρώματος της γραμματοσειράς και του φόντου κάθε κάρτας.

Περιορίστε τον αριθμό των στοιχείων διεπαφής χρήστη

Μία κάρτα - μία δράση. Αυτό είναι αξίωμα.

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

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

Ίσως ένα κουμπί είναι το μόνο στοιχείο διεπαφής που χρειάζεστε.

συμπεράσματα

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

Το αποτέλεσμα είναι ένα σχέδιο κάρτας που είναι φιλικό προς το χρήστη και φαίνεται εκπληκτικό.