Κοινά στοιχεία που χρησιμοποιούνται στο σχεδιασμό των κουμπιών διεπαφής
Τα κουμπιά και τα στοιχεία πλοήγησης είναι πιθανώς τα πιο συχνά χρησιμοποιούμενα αντικείμενα διασύνδεσης τόσο στον επιτραπέζιο όσο και στον κινητό σχεδιασμό. Τραβούν μια διεπαφή μαζί, επιτρέποντας στους χρήστες να φτάσουν από το Α στο Β με ένα μόνο κλικ.
Το πιο σημαντικό, ένα κουμπί πρέπει να δείχνει καλά. Πρέπει να φωνάξει "Κάντε κλικ με!", Ή αλλιώς απλά δεν θα είναι τόσο αποτελεσματική όσο χρειάζεται. Τα κουμπιά χρησιμοποιούνται συνήθως για "" Αναζήτηση, "" Υποβολή, "" Αποστολή, "" Αγορά "και" Μεταφόρτωση ".
Σε αυτό το άρθρο, θα εξετάσουμε επτά κοινά στοιχεία κουμπιών στο μοντέρνο σχεδιασμό διεπαφών: υφές, μοτίβα, 3-D, pixel-τέλεια εγκεφαλικά επεισόδια, χαραγμένα φόντα, λάμψεις και highlights.
Θα βρείτε 35 φανταστικά παραδείγματα αυτών των τεχνικών καθώς και μια χούφτα μίνι tutorials για το Photoshop.
1. Υφές
Η χρήση της υφής είναι ένας πολύ καλός τρόπος για να προσθέσετε λίγο βάθος στα κουμπιά και να τα ξεχωρίσετε λίγο από το υπόλοιπο της διασύνδεσης (και τελικά να τα κάνετε πιο clickable). Παρακάτω είναι μερικά εξαιρετικά παραδείγματα υφής σε κουμπιά.
Το ShelfLuv χρησιμοποιεί υφή για να προσθέσει διάσταση στη διασύνδεσή του, ειδικά στα πεδία κουμπιών και πεδίων κειμένου.
Η υφή χρησιμοποιείται σε όλη αυτή τη διασύνδεση, αλλά είναι πιο βαρύ στην περιοχή του κουμπιού "Μεταφόρτωση", καθιστώντας το ένα σημείο εστίασης.
Η υφή εδώ αναμιγνύεται καλά με το κουμπωμένο κουμπί, καθιστώντας το πραγματικό.
Η υφή δεν χρησιμοποιείται στην πραγματικότητα σε αυτό το κουμπί UI αλλά εμφανίζεται στο παρασκήνιο, επιτρέποντας στο κουμπί να ξεχωρίζει.
Δημιουργία ενός κουμπιού με υφή
Δημιουργήστε ένα απλό φόντο χρησιμοποιώντας το εργαλείο Σχήμα και προσθέτοντας θόρυβο (Φίλτρο → Θόρυβος → Προσθήκη θορύβου).
Επανατοποθετήστε το εργαλείο σχήματος και σχεδιάστε ένα ορθογώνιο, βεβαιώνοντας ότι η κορυφή του είναι κρυμμένη από την άκρη του καμβά.
Αλλάξτε το χρώμα του σχήματος σε μπλε χρώμα. Χρησιμοποίησα # 00A3D9.
Διπλασιάστε το στρώμα σχήματος και αλλάξτε το μέγεθος στην ίδια θέση. Αλλάξτε το χρώμα σε ένα ελαφρώς πιο σκούρο μπλε χρώμα.
Διπλώστε ξανά το στρώμα. Τοποθετήστε το στρώμα κάτω από τα τελευταία δύο στρώματα Σχήματος και αλλάξτε το χρώμα σε ανοιχτό γκρι.
Φωτογραφήστε ή κατεβάστε μια υφή χαρτιού (χρησιμοποίησα ένα από Lost & Taken ). Μεταβείτε στο Αρχείο → Τοποθετήστε και εντοπίστε το αρχείο για να το τοποθετήσετε στο έγγραφο. Αλλάξτε το μέγεθος και τοποθετήστε το πάνω στα μπλε σχήματα.
Καταργήστε την υπερβολική υφή χρησιμοποιώντας το εργαλείο Marquee και αλλάξτε τη λειτουργία ανάμειξης της υφής. Πειραματιστείτε με διαφορετικούς τρόπους, επειδή διαφορετικές υφές παράγουν διαφορετικά αποτελέσματα. Μπορεί επίσης να θέλετε να μειώσετε λίγο τα επίπεδα αδιαφάνειας.
Ανοίξτε το παράθυρο στυλ επιπέδου για το πιο σκούρο μπλε σχήμα σας και εφαρμόστε το παρακάτω στυλ σκιά Drop για να προσθέσετε μια λεπτή λευκή σκιά.
Τώρα εφαρμόστε ένα Stroke στο σχήμα σας χρησιμοποιώντας τις παρακάτω ρυθμίσεις.
Τέλος, προσθέστε μια εσωτερική σκιά στο σχήμα, για να την δώσετε σε περαιτέρω διάσταση.
Προσθέστε κάποιο κείμενο στο κουμπί και τελειώσατε!
2. Μοτίβα
Τα μοτίβα είναι ένας άλλος πολύ καλός τρόπος για να προσθέσετε λίγο ενδιαφέρον και βάθος στα κουμπιά διασύνδεσης. Ακολουθούν μερικά παραδείγματα μοτίβων σε κουμπιά, όλα τα λεπτά αλλά και αποτελεσματικά.
Στην αριστερή πλευρά του κουμπιού χρησιμοποιείται εδώ μια διαγώνια αντανάκλαση για να διαχωρίσετε το εικονίδιο από τον τύπο.
Σε αυτό το κουμπί χρησιμοποιείται μια διαγώνια γραμμή, προσαρμόζοντας την εμφάνιση του vintage, προσθέτοντας διάσταση στο σχέδιο.
Αυτή είναι η αγαπημένη μου χρήση ενός σχεδίου σε αυτά τα παραδείγματα. Παρόλο που δεν χρησιμοποιείται στα ίδια τα κουμπιά, το μοτίβο στην γκρίζα κεφαλίδα προσθέτει διάσταση σε ολόκληρο το σχέδιο και τελικά βοηθά τα πορτοκαλί κουμπιά να ξεχωρίζουν.
Δημιουργία ενός κουμπιού με κορδέλα με μοτίβο
Αφού δημιουργήσετε ένα υφή φόντου χρησιμοποιώντας την τεχνική στο προηγούμενο μίνι σεμινάριο, σχεδιάστε ένα ορθογώνιο χρησιμοποιώντας το εργαλείο Shape και συμπληρώστε το με μπλε-πράσινο. Χρησιμοποίησα το χρώμα # 008B8D.
Σχεδιάστε ένα άλλο σχήμα με το ίδιο ύψος και χρώμα.
Χρησιμοποιώντας το εργαλείο Lasso, δημιουργήστε ένα τρίγωνο, όπως φαίνεται παρακάτω. Τοποθετήστε το πάνω από την άκρη του νέου σχήματος και πατήστε το πλήκτρο "Διαγραφή" για να αφαιρέσετε την περιοχή που δεν χρειαζόμαστε.
Διπλασιάστε το σχήμα και μεταβείτε στην επιλογή Επεξεργασία → Μετατροπή → Αναστροφή Οριζόντια για να την αντιμετωπίσετε προς την αντίθετη κατεύθυνση.
Τοποθετήστε τα δύο σχήματα κάτω από το μεγαλύτερο σχήμα, όπως φαίνεται παρακάτω.
Κάντε δεξί κλικ σε ένα από τα σχήματα σας και ανοίξτε το παράθυρο Blending Options / Layer Style. Εφαρμόστε μια Επικάλυψη κλίσης παρόμοια με αυτήν που φαίνεται παρακάτω. Μπορείτε επίσης να προσθέσετε μια λεπτή Shadow Drop. Αφού γίνει, κάντε δεξί κλικ στο στρώμα και επιλέξτε "Στυλ στυλ αντιγραφής". Επιλέξτε το άλλο σχήμα πανό. Κάντε δεξί κλικ και επιλέξτε "Επικόλληση στυλ στρώματος". Ανοίξτε το παράθυρο στυλ στρώματος και αλλάξτε τη γωνία της επικάλυψης κλίσης από 180 ° σε 0 °.
Χρησιμοποιώντας το εργαλείο Lasso, δημιουργήστε μια επιλογή παρόμοια με αυτήν που βλέπετε παρακάτω, για να ταιριάξετε τις δύο γωνίες των σχημάτων μας. Γεμίστε το με ακόμα πιο σκούρο χρώμα.
Διπλασιάστε το στρώμα, γυρίστε το οριζόντια και τοποθετήστε το στην άλλη πλευρά.
Δημιουργήστε ένα σχέδιο γραμμής. Εναλλακτικά, θα μπορούσατε να χρησιμοποιήσετε αυτό που έκανα παρακάτω.
Επικολλήστε το μοτίβο σε ολόκληρο το banner σας. Κρατώντας Command + Shift, κάντε κλικ στις μικρογραφίες στρώματος όλων των στρώσεων πανό σας. Αυτό θα επιλέξει όλα αυτά. Κάντε δεξί κλικ και επιλέξτε "Select Inverse". Με το επιλεγμένο επίπεδο σχεδίου γραμμής, πατήστε το πλήκτρο "Delete" για να αφαιρέσετε τις περιοχές του μοτίβου που δεν χρειάζεστε.
Αλλάξτε τη λειτουργία Blending του στρώματος μοτίβου σε "Πολλαπλασιασμός" για να αποκρύψετε το λευκό από το στρώμα. Τώρα μειώστε την αδιαφάνεια έως κάπου μεταξύ 25 και 75%. Πειραματιστείτε για το καλύτερο αποτέλεσμα.
Χρησιμοποιώντας το εργαλείο σχήματος, δημιουργήστε ορισμένες γραμμές παρόμοιες με τις παρακάτω.
Αφαιρέστε τις περιοχές που κάθονται στο φόντο της εικόνας.
Πειραματιστείτε με τη λειτουργία Blending για κάθε γραμμή. Εδώ είναι το αποτέλεσμα:
3. 3-D
Τα τρισδιάστατα κουμπιά είναι υπέροχα επειδή κάνουν τα κουμπιά να φαίνονται πολύ πιο ρεαλιστικά. Είναι σχεδόν αδύνατο να μην κάνετε κλικ! Το μόνο μειονέκτημα είναι ότι το αποτέλεσμα είναι μάλλον παιχνιδιάρικο και έτσι δεν ταιριάζει σε όλες τις ιστοσελίδες (όπως οι εταιρικές). Παρακάτω είναι μια επιλογή από μερικά ωραία κουμπιά 3-D.
Οι σκιές και οι γραμμές 1-pixel εδώ υπογραμμίζουν ορισμένες περιοχές και κάνουν το κουμπί να εμφανίζεται 3-D. Αυτό και μερικά καλά αποτελέσματα CSS θα έκαναν ένα σούπερ-διαδραστικό κουμπί.
Το δεύτερο στοιχείο μας (μοτίβα) χρησιμοποιείται επίσης σε αυτό το σχέδιο για να προσθέσετε διάσταση σε ένα ήδη πολύ 3-D κουμπί.
Αυτό το κουμπί παίρνει μια ελαφρώς διαφορετική προσέγγιση, στηριζόμενη μόνο σε κλίσεις για την εμφάνιση του 3-D.
Αυτό το σετ εμφανίζει διαφορετικά ύψη για να υποδείξει αν το κουμπί βρίσκεται στην κανονική του κατάσταση, στην κατάσταση αιωρήματος ή στην ενεργό κατάσταση. Οι γραμμές και η υφή δίνουν στα κουμπιά μια πιο ζωντανή εμφάνιση.
Όπως μερικά άλλα παραδείγματα σε αυτήν την ενότητα, ένας συνδυασμός κλίσεων και κτυπήματος κάνει αυτά τα κουμπιά να φαίνονται 3-D.
Αυτό το κουμπί φαίνεται 3-D λόγω του σχεδιασμού του "έξω από το κουτί", που τυλίγεται γύρω από το περιβάλλον χρήστη.
Δημιουργία κουμπιού 3-D
Ξεκινήστε σχεδιάζοντας ένα σχήμα με το εργαλείο Rectangle, με ακτίνα γωνίας 7 pixel. Ανοίξτε το παράθυρο στυλ στρώματος και εφαρμόστε μια επικάλυψη μεταβαλλόμενης κλίσης από το σκοτεινό κόκκινο στο ανοιχτό κόκκινο. Χρησιμοποιήστε ένα ακόμα ελαφρύτερο κόκκινο στο άκρο της γραμμής κλίσης για να επισημάνετε την κορυφή του κουμπιού μας 3-D.
Τώρα εφαρμόστε μια παλινδρόμηση στο κουμπί. Αλλάξτε τον τύπο γεμίσματος σε "Gradient" έτσι ώστε να μπορείτε να αλλάξετε το χρώμα των επάνω και κάτω μέρος της διαδρομής. Πηγαίνετε από ένα φως σε σκούρο κόκκινο (το αντίθετο της Επικάλυψης με κλίση).
Θα πρέπει να φαίνεται κάτι τέτοιο μέχρι στιγμής:
Διπλασιάστε το στρώμα σχήματος. Βάλτε το αρχικό στρώμα προς τα κάτω κατά περίπου 10 pixel.
Εφαρμόστε μια Σκιά Drop στο αρχικό επίπεδο χρησιμοποιώντας τις ρυθμίσεις που βλέπετε στην παρακάτω εικόνα.
Επίσης, σκουραίνει την Επικάλυψη με διαβαθμίσεις κάνοντας το κάθε μεμονωμένο χρώμα στη γραμμή κλίσης λίγο πιο σκούρο.
Θα πρέπει να έχετε κάτι που μοιάζει με αυτό:
Επιλέξτε το εργαλείο κειμένου και πληκτρολογήστε κάτι στο κουμπί. Ανοίξτε το παράθυρο στυλ στρώματος και εφαρμόστε μια επικάλυψη με κλίση παρόμοια με αυτή που φαίνεται παρακάτω:
Εφαρμόστε μια εσωτερική σκιά χρησιμοποιώντας αυτές τις ρυθμίσεις:
Εφαρμόστε μια Σκιά Drop χρησιμοποιώντας αυτές τις ρυθμίσεις:
Και τελειώσαμε! Θα πρέπει να καταλήξετε σε κάτι τέτοιο:
4. Pixel-Perfect Strokes
Η τέχνη της τελειοποίησης εικονοστοιχείων έχει γίνει αναπόσπαστο μέρος όλων των πτυχών του σχεδιασμού διεπαφής χρήστη, όχι μόνο κουμπιά. Γραμμές ενός εικονοστοιχείου (ή εγκεφαλικά επεισόδια) δίνουν βάθος κουμπιών και ελαφρώς 3-D εμφάνιση. Επίσης, τα κουμπιά φαίνονται χαραγμένα. Εδώ είναι μερικά λαμπρά παραδείγματα αυτού.
Μπορείτε να δείτε ξεκάθαρα ότι μια λευκή (επικαλυμμένη) γραμμή 1 pixel χρησιμοποιείται ως επισήμανση στο πάνω μέρος του κόκκινου κουμπιού, με πιο σκοτεινή γραμμή στο κάτω μέρος. Αυτό το κάνει να φαίνεται ελαφρώς 3-D και προσθέτει πολλές λεπτομέρειες στη σελίδα.
Η τυπογραφία σε αυτό το κουμπί έχει μια εσωτερική σκιά, κάνοντας το κουμπί να εμφανίζεται σαν να κάθεται επάνω από τη διεπαφή.
Αυτά τα κουμπιά μόνο CSS3 (απολύτως χωρίς Photoshop) έχουν διαδρομές 1 εικονοστοιχείου που τα κάνουν να ξεχωρίζουν από το φόντο και να εμφανίζονται οδοντωτά όταν κάνουν κλικ.
Ένα άλλο παράδειγμα ενός ελαφρού εγκεφαλικού επεισοδίου 1 pixel στο επάνω μέρος του κουμπιού για να λειτουργήσει ως προβολή.
Αυτό το πράσινο κουμπί δείχνει μια ελαφρώς διαφορετική προσέγγιση, με μια εσωτερική λάμψη να λειτουργεί ως ένδειξη στην κορυφή του κουμπιού. Το εγκεφαλικό επεισόδιο στο εξωτερικό δημιουργεί μια πολύ λεπτή σκιά.
Ακόμα ένα κουμπί που συνδυάζει τις προαναφερθείσες τεχνικές.
Αυτό το βασικό κουμπί έχει μια λεπτή διαδρομή και μια λεπτή σκιά σταγόνας για να ξεχωρίζει από το απλό σχέδιο.
Αυτό το κουμπί έχει μια λεπτή εσωτερική λάμψη για να το ξεχωρίσει από το φόντο. Η ενεργή του κατάσταση έχει μειωμένη αδιαφάνεια, η οποία κάνει το τέχνασμα.
Ξεχάστε το κουμπί: όλο αυτό το σχέδιο είναι pixel-τέλεια, με τη σύγχρονη τυπογραφία και τις γραμμές του για μια όμορφη διεπαφή χρήστη.
Δημιουργήστε ένα κουμπί Pixel Perfect
Επιλέξτε το εργαλείο Rectangle Shape (που βρίσκεται στη γραμμή εργαλείων στην κορυφή του Photoshop όταν είναι επιλεγμένο το εργαλείο Shape) και δίνετε ακτίνα ακτίνας 5 pixel. Σχεδιάστε ένα μαύρο ορθογώνιο παρόμοιο με το παρακάτω.
Ανοίξτε το παράθυρο στυλ στρώματος και εφαρμόστε μια επικάλυψη κλίσης στο σχήμα. Χρησιμοποίησα ένα σκούρο πράσινο με ένα ελαφρώς ελαφρύτερο πράσινο.
Δώστε στο σχήμα μια εγκεφαλική κλίση, πηγαίνοντας από ένα πράσινο σε ένα πάντα ελαφρώς πιο σκοτεινό πράσινο.
Τώρα δώστε στο σχήμα ένα λευκό στυλ Inner Shadow, χρησιμοποιώντας τις ρυθμίσεις που βλέπετε παρακάτω.
Και τώρα μια σκιά Drop, με μέγεθος 0 pixel και αδιαφάνεια μόλις 5%.
Εντοπίστε ένα εικονίδιο στο Internet (ή δημιουργήστε το δικό σας) και τοποθετήστε το στο έγγραφό σας πηγαίνοντας στο File → Place, τοποθετώντας το σωστά. Εφαρμόστε μια επικάλυψη με μεταβλητή κλίση σε αυτό.
Δώστε στην εσωτερική σκιά του εικονιδίου σας απόσταση 1 εικονοστοιχείου και τη λευκή Σκιά απόθεσης σε απόσταση 1 pixel. Αυτό κάνει το εικονίδιο να μοιάζει με το χαραγμένο στο κουμπί.
Προσθέστε κάποιο κείμενο στο κουμπί και εφαρμόστε ένα φαινόμενο σκιάσης χαμηλής αδιαφάνειας χρησιμοποιώντας το παράθυρο στυλ επιπέδου. Εδώ είναι το αποτέλεσμα:
5. Εδάφους με εσοχή
Ένα περιθωριακό υπόβαθρο κάνει ένα κουμπί να μοιάζει σαν να είναι θαμμένο σε αυτό, δίνοντας το πλήθος του κουμπιού και το οπτικό ενδιαφέρον. Παρακάτω είναι μερικά εξαιρετικά παραδείγματα για αυτό.
Αυτό το φόντο του κουμπιού έχει μια λεπτή εσωτερική σκιά για να εμφανιστεί οδοντωτά.
Οι ανεστραμμένες κλίσεις σε αυτό το φόντο κάνουν τα κουμπιά να εμφανίζονται οριακά.
Ένας συνδυασμός των εγκεφαλικών επεισοδίων και των σκιάς σταγόνων δίνει αυτά τα κουμπιά με μεγαλύτερο βάθος.
Αυτό το φόντο του κουμπιού έχει διάφορα στυλ, όπως μια κλίση, εσωτερική σκιά και σκιά σταγόνας.
Αυτό το φόντο με κουκκίδες είναι πολύ μικρότερο από αυτό που έχουμε δει αλλά εξακολουθεί να ακολουθεί τις ίδιες τεχνικές.
Και πάλι, μια σκιά σταγόνας και μια εσωτερική σκιά χρησιμοποιούνται για να δημιουργήσουν μια εσοχή.
6. Ανάβει
Οι λάμπες είναι μια αρκετά δύσκολη τεχνική για να αποσυρθούν στο σχεδιασμό της διεπαφής και συνήθως παρατηρούνται μόνο σε σκοτεινές διεπαφές (αν και θα δούμε ένα ελαφρύ παράδειγμα παρακάτω). Αυτά τα παραδείγματα δείχνουν πώς οι λάμπες μπορούν να χρησιμοποιηθούν με διάφορους τρόπους.
Χρησιμοποιείται μια λάμπα στο εσωτερικό αυτού του κουμπιού, δίνοντάς του μια ορατότητα.
Οι λάμπες χρησιμοποιούνται έξυπνα για να ξεχωρίζουν η τυπογραφία σε αυτό το κουμπί από το σκούρο φόντο. Και οι λάμπες κάνουν τις ράβδοι φόρτωσης να φαίνονται ζωντανές.
Οι λάμπες χρησιμοποιούνται συνήθως σε σκοτεινές διεπαφές για το iPhone. Εδώ βλέπουμε μια λάμψη γύρω από τη τυπογραφία όταν το κουμπί βρίσκεται σε ενεργό κατάσταση.
Η ελαφριά και αρκετά λεπτή λάμψη δίνει αυτό το κουμπί την πρόσθετη ώθηση που χρειάζεται για να γίνει όμορφη.
Δημιουργία ενός ελαφρού λαμπερού κουμπιού
Χρησιμοποιώντας ξανά το εργαλείο σχήμα ορθογωνίου, σχεδιάστε ένα ορθογώνιο, αυτή τη φορά με ακτίνα γωνίας 3 pixel. Εφαρμόστε μια Επικάλυψη κλίσης παρόμοια με αυτή που ακολουθεί. Δώστε στο κέντρο τα χρώματα σας θέση "49" και "50".
Εφαρμόστε την ακόλουθη εσωτερική σκιά.
Εφαρμόστε την ακόλουθη σκιά πτώσης.
Εφαρμόστε την ακόλουθη εξωτερική λάμψη.
Προσθέστε κάποια τυπογραφία στο κουμπί. Θα πρέπει να καταλήξετε με ένα ωραίο, καθαρό και απίστευτα εύκολο στην παραγωγή αποτέλεσμα όπως αυτό:
7. Στιγμιότυπα
Τα κυριότερα σημεία δίνουν το πλήθος των κουμπιών, το οπτικό ενδιαφέρον και την δυνατότητα κλικ. Τα παρακάτω παραδείγματα το αποδεικνύουν.
Ένα απλό άσπρο σχήμα χαμηλής αδιαφάνειας χρησιμοποιείται στο πάνω μισό αυτού του κουμπιού για να το δώσει λίγο βάθος και να το βοηθήσει να ταιριάζει στο συνολικό κόκκινο και γκρι περιβάλλον.
Όπως συμβαίνει με πολλά άλλα κουμπιά σε αυτήν τη δημοσίευση, ένα εγκεφαλικό επεισόδιο 1 εικονοστοιχείου τονίζει αυτό.
Οι διαβαθμίσεις φωτός σε σκοτεινό έως ελαφρύ χρησιμεύουν ως ένδειξη και σκίαση για αυτά τα κουμπιά.
Αυτή η ανάρτηση γράφτηκε αποκλειστικά για το WDD από Ο Callum Chapman , ο άνθρωπος πίσω Picmix Store και Ιστολόγιο Circlebox .
Ποια σχέδια κουμπιών χρησιμοποιείτε περισσότερο και γιατί; Βρήκατε υψηλότερο ρυθμό κλικ για ορισμένα σχέδια; Παρακαλώ μοιραστείτε παρακάτω ...