Κοινά στοιχεία που χρησιμοποιούνται στο ξύλινο σχεδιασμό UI
Όλοι γνωρίζουμε ότι η υφή χρησιμοποιείται πολύ τόσο στον μοντέρνο όσο και στον vintage σχεδιασμό, αν και σε πολλές περιπτώσεις σχεδιασμού που παράγεται πριν από πολλά χρόνια, οι θορυβώδεις και εύθραυστες υφές ήταν αναπόφευκτες.
Όταν πρόκειται για ξύλινη υφή στο σχεδιασμό, όμως, είτε σε ένα προϊόν εκτύπωσης, είτε σε ένα στοιχείο διαδικτυακής ή κινητής διασύνδεσης χρήστη είτε σε μια γενική διάταξη, χρησιμοποιείται πάντα για να βελτιώσει την οπτική εμφάνιση.
Σε αυτό το άρθρο, θα εξετάσουμε πέντε κοινά στοιχεία στο σχεδιασμό UI που χρησιμοποιούν υφές ξύλου για να κάνουν ακριβώς αυτό.
Εκτός από τη συζήτηση αυτών των στοιχείων και θαυμάζοντας μερικά μάλλον σέξι σχέδια διεπαφής χρήστη που έχω συλλέξει από Αποσπάστε , θα μάθουμε επίσης πώς να αναπαράγουμε μερικά από αυτά τα αποτελέσματα ακολουθώντας μίνι tutorials εδώ στο άρθρο αυτό.
Αυτά τα πέντε κοινά στοιχεία στο σχεδιασμό UI είναι:
- Υφάσματα και ραφές,
- Χαρτί και σκιές,
- Χαρακτηρισμένη τυπογραφία και μοτίβα,
- Κομψά και μοντέρνα στοιχεία,
- Τρισδιάστατα εφέ.
1. Υφάσματα και ραφές
Το ύφασμα και οι ραφές είναι στοιχεία που τείνουν να ταιριάζουν απόλυτα με την ξύλινη υφή, επειδή και τα δύο είναι φυσικά, βιολογικά προϊόντα. (Βεβαίως, το βαμβάκι είναι υφαντό, κομμένο και βαμμένο και πολλά ξύλα σε αυτήν την βιτρίνα έχουν κοπεί, λειανθεί και επεξεργαστεί - αλλά παίρνετε αυτό που εννοώ!) Δείτε τα παρακάτω παραδείγματα που συνδυάζουν τα υφάσματα και τα ραμμένα στοιχεία με ξύλινες υφές.
Παραδείγματα
Αυτός ο πολύ ελαφρύς σχεδιασμός χρησιμοποιεί μια βασική "βελονιά" (απλά μια διακεκομμένη σύνδεση εγκεφαλικού επεισοδίου) για να κάνει το έμβλημα κύκλου και το banner να φαίνεται σαν να έχει ραμμένο στο χαμηλής αδιαφάνειας και χρωματισμένο υπόβαθρο με ξύλο. Αυτή η μικρή αφή λειτουργεί τόσο καλά για ένα τόσο απλό σχεδιασμό.
Η ραφή σε αυτό το σχέδιο είναι πολύ πιο ρεαλιστική, συνδυάζοντας ένα γεμάτο αδιαφάνεια ξύλινο φόντο με χαραγμένα στοιχεία, σκιές και πραγματικές υφασμάτινες υφές. Αυτή η βελονιά έχει μια σκιά σταγόνας (0 pixels σε μέγεθος και 1 pixel σε απόσταση 90 °), επιτρέποντας στη βελονιά να ξεχωρίζει και να ταιριάζει με τις λεπτομέρειες στο υπόλοιπο σχέδιο.
Η ψηφιακή ξύλινη υφή καθιστά αυτό το σχέδιο μοντέρνο, με τις λιτές κλίσεις και χαραγμένα στοιχεία που παράγουν μια ελαφρώς τρισδιάστατη και πιο ρεαλιστική εμφάνιση. Χρησιμοποιείται ένα επαναλαμβανόμενο μοτίβο για την παραγωγή ενός υπέροχου δερμάτινου αποτελέσματος για το σήμα στην επάνω αριστερή γωνία, το οποίο έχει ραμμένο χρησιμοποιώντας την ίδια ακριβώς τεχνική με αυτή που αναφέρθηκε παραπάνω (με τη σκιά απόκλισης 1 εικονοστοιχείου).
Μίνι-Tutorials
Δημιουργία μιας απλής γραμμής με διακεκομμένη γραμμή (Illustrator)
Σε αυτό το mini-tutorial, θα χρησιμοποιήσουμε το Illustrator (Ai) για να δημιουργήσουμε μια απλή γραμμική γραμμή με διαγραμμίσεις για να σχηματίσουμε έναν κύκλο, όπως στο πρώτο παράδειγμα αυτής της ενότητας. Ανοίξτε το Illustrator και επιλέξτε το εργαλείο Ellipse. Κρατώντας το πλήκτρο Shift για να κρατήσετε το σχήμα σας αναλογικά, σύρετε έξω έναν κύκλο, όπως παρακάτω.
Από το παράθυρο Stroke (Παράθυρο → Εγκεφαλικό) εφαρμόστε μια διαδρομή βάρους 2 σημείων με όριο κάμψης 4. Ελέγξτε την επιλογή "Dashed Line" και εισάγετε 12 σημεία στο πρώτο σας πεδίο παύλα.
Θα παρατηρήσετε ότι η γραμμή στη δεξιά πλευρά του σχήματος μας είναι στην πραγματικότητα δύο παύλες 12 σημείων μαζί. Για να το διορθώσουμε, ας δώσουμε λίγο περισσότερο το μοτίβο μας. Αλλάξτε την παύλα στα 3 σημεία και το κενό στα 12 σημεία και, στη συνέχεια, διπλασιάστε την παύλα στα 6 σημεία και κρατήστε το τελικό χάσμα 12 βαθμών. Θα πρέπει να καταλήξετε σε μια γραμμή με χαρά παρόμοια με αυτή που ακολουθεί (τα αποτελέσματα θα διαφέρουν ανάλογα με το μέγεθος του κύκλου σας).
Διπλασιάστε το σχήμα επιλέγοντάς το πρώτα, στη συνέχεια επιλέξτε Επεξεργασία → Αντιγραφή (Command + C) και, τέλος, Επεξεργασία → Επικόλληση στη θέση (Command + F). Με το νέο σχήμα που έχετε ακόμα επιλέξει, κρατήστε ταυτόχρονα τα πλήκτρα Alt + Shift και μειώστε το μέγεθος του σχήματος. Εάν κρατήσετε αυτά τα δύο πλήκτρα ταυτόχρονα, το σχήμα θα διατηρηθεί αναλογικά και θα μειωθεί ή θα αυξηθεί το μέγεθος από το κεντρικό σημείο, εξαλείφοντας την ανάγκη επανευθυγράμμισης.
Επιλέξτε τον μεγαλύτερο από τους δύο κύκλους. Καταργήστε τη διαδρομή και αλλάξτε το χρώμα πλήρωσης σε ένα καφέ (ή οποιοδήποτε άλλο χρώμα για αυτό το θέμα). Τώρα, επιλέξτε το μικρότερο από τους δύο κύκλους και αλλάξτε το χρώμα του εγκεφαλικού σε ένα καφέ καφέ.
Με τους μικρότερους από τους δύο κύκλους που έχετε επιλέξει ακόμα, αντιγράψτε το με αντιγραφή και επικόλληση. Αφού αντιγράψετε, τοποθετήστε το κάτω από το αρχικό σας σχήμα (Command + [) και σπρώξτε το σχήμα προς τα κάτω κάνοντας ένα βέλος στο πληκτρολόγιό σας μία φορά. στη συνέχεια αλλάξτε το χρώμα του εγκεφαλικού σε λευκό.
Μειώστε την αδιαφάνεια του κύκλου λευκού εγκεφαλικού σας άξονα στο 50% και την αδιαφάνεια του κύκλου καφέ εγκεφαλικού επεισοδίου σας στο 75%.
Δημιουργία ρεαλιστικής βελονιάς (Photoshop)
Σε αυτό το mini-tutorial, θα χρησιμοποιήσουμε μια πραγματική υφή υφάσματος και μερικά από τα ενσωματωμένα εφέ του Photoshop για να παράγουμε μια ρεαλιστική βελονιά. Ανοίξτε ένα νέο έγγραφο του Photoshop και τοποθετήστε μια υφή υφάσματος της επιλογής σας. Περικοπή της εικόνας έτσι ώστε να κάθεται σε λευκό φόντο.
Επιλέξτε το εργαλείο ορθογώνιας γραμμής και μετακινήστε μια επιλογή στο εσωτερικό του σχήματος της υφής του υφάσματος. Δημιουργήστε ένα νέο στρώμα και μετονομάστε το "Stitch". Μεταβείτε στην Επεξεργασία → Εγκεφαλικό επεισόδιο και εφαρμόστε μια μαύρη διαδρομή 1 εικονοστοιχείου στο σχήμα σας.
Επιλέξτε ξανά το εργαλείο ορθογώνιας μαρκαρίσματος και τοποθετήστε το πάνω από τη διαδρομή σας. Δεν έχει σημασία από πού ξεκινάτε. Με επιλεγμένη θέση, πατήστε το πλήκτρο Delete. Βεβαιωθείτε ότι έχετε αφαιρέσει το περιεχόμενο από το στρώμα της διαδρομής και όχι το στρώμα του υφάσματος.
Επαναλάβετε τη διαδικασία για το υπόλοιπο της γραμμής, όπως φαίνεται παρακάτω.
Υπάρχει μεγάλη πιθανότητα οι βελονιές να μην είναι συμμετρικές. αλλά αυτό είναι καλό, γιατί τα ράμματα σπάνια είναι!
Θα πρέπει να καταλήξετε σε κάτι που μοιάζει με αυτό:
Κάντε δεξί κλικ στο στιβαρό σας στρώμα και επιλέξτε "Blending Options" για να ανοίξετε το παράθυρο στυλ επιπέδων. Επιλέξτε την καρτέλα "Επικάλυψη χρώματος" και επιλέξτε ένα ανοιχτό γκρι χρώμα (χρησιμοποίησα #F1F1F1 ).
Τώρα επιλέξτε την καρτέλα Drop Shadow. Εφαρμόστε μια σκιά μαύρης σταγόνας με γωνία 90 °, απόσταση 1 pixel και μέγεθος 0 pixel. Μειώστε την αδιαφάνεια της σκιάς κάπου μεταξύ 20 και 60%.
Επιλέξτε το στρώμα υφάσματος και ανοίξτε το παράθυρο Στυλ στρώσεων. Εφαρμόστε μια προεπιλεγμένη Σκιά Drop με απόσταση 0 εικονοστοιχείων και μια Επικάλυψη μεταβαλλόμενης γραμμής από άσπρο σε μαύρο σε λευκό. Αλλάξτε τη λειτουργία Blending της Επικάλυψης κλίσης σε "Πολλαπλασιασμός" με αδιαφάνεια 15%. Μόλις εφαρμοστεί και προβληθεί στο 100%, θα πρέπει να καταλήξετε σε κάτι παρόμοιο με αυτό:
Παίξτε γύρω με τα χρώματα του υφάσματος σας χρησιμοποιώντας τις ρυθμίσεις απόχρωσης και χρωμάτων. Εδώ είναι το αποτέλεσμά μου:
2. Χαρτί και σκιές
Το χαρτί και οι σκιές γίνονται ολοένα και πιο δημοφιλείς ως στυλ σχεδιασμού, αλλά είναι ιδιαίτερα δημοφιλείς σε σχέδια με βαριά υφή, όπως αυτά με ξύλο. Η συλλογή έργων που ακολουθεί δείχνει ότι το χαρτί και οι σκιές χρησιμοποιούνται με διαφορετικούς τρόπους για να παρουσιάσουν μικρά κομμάτια πληροφοριών ή, σε ορισμένες περιπτώσεις, το κύριο περιεχόμενο του ιστότοπου.
Παραδείγματα
Αυτό το στιγμιότυπο, σε περίπτωση που δεν το είχατε παρατηρήσει, προέρχεται από ένα μικρό τμήμα του σχεδίου που είδαμε στο τέλος της ενότητας "Υφάσματα και ραφές" παραπάνω. Συνεχίζοντας το θέμα της ψηφιακά παραγόμενης υφής, ένα απλό λευκό σχήμα με μια στρεβλωμένη προσαρμοσμένη σκιά χρησιμοποιείται για να κάνει το χαρτί να μοιάζει σαν να είναι κυρτό.
Ένας πολύ ωραίος συνδυασμός ξύλινων και τσαλακωμένων υφασμάτων χαρτιού. Το χαρτί σε αυτό το UI χρησιμοποιείται για να παρουσιάσει ένα απόσπασμα πληροφοριών που χρειάζονται για μια συνταγή, με μερικά υπέροχα εικονίδια στυλ σιλουέτας που επιτρέπουν στο χρήστη να βλέπει, να κάνει σελιδοδείκτη και να μοιράζεται την πλήρη συνταγή.
Αυτό το σχέδιο είναι βαριάς υφής, συνδυάζοντας υφές ξύλου, χαρτιού και ταινιών για να δημιουργήσει ένα ελκυστικό περιβάλλον εργασίας χρήστη. Το φωτογραφικό ξύλο και η ταινία, σε συνδυασμό με τις ψηφιακά παραγόμενες υφές χαρτιού και τις σκιές, δουλεύουν καλά.
Αυτό είναι ένα από τα αγαπημένα μου UI δείγματα στη θέση. Εξαιρετικά ψηφιακό (συμπεριλαμβανομένης της ξύλινης υφής), ο σχεδιασμός χρησιμοποιεί πτώση και εσωτερικές σκιές για να δημιουργήσει ένα όμορφο πεδίο αναζήτησης. Ο σχεδιασμός χρησιμοποιεί επίσης τα ράμματα και το ύφασμα. Συνολικά, ένα πολύ φιλικό προς το χρήστη περιβάλλον που μοιάζει εξαιρετικό!
Αυτός ο σχεδιασμός φαίνεται να εμπνέεται από τους παραδοσιακούς φακέλους αεροπορικής αποστολής με το επαναλαμβανόμενο σχέδιο γύρω από το χαρτί. Το χαρτί έχει συρραφτεί (ψηφιακά) στο ξύλινο υπόβαθρο, καθιστώντας την διεπαφή χρήστη εμφανή σαν καρφίτσα και πινακίδα αντί για επίπεδη ιστοσελίδα.
Η μπεζ-κρέμα εικόνα και το φόντο πλοήγησης έχει μια λεπτή σκιά σταγόνας που την κάνει να φαίνεται σαν το χαρτί, ειδικά με το σφραγισμένο σήμα και τις ξεθωριασμένες σέπια φωτογραφίες που μοιάζουν με αυτές που έχουν τυπωθεί. Αυτό ταιριάζει απόλυτα με το υπόβαθρο με ξύλο και την αίσθηση της διεπαφής.
Μίνι-Tutorials
Δημιουργία εφέ απλού ψηφιακού χαρτιού (Photoshop)
Σε αυτό το mini-tutorial, θα χρησιμοποιήσουμε μια υφή ξύλου και βασικά εργαλεία του Photoshop για να δημιουργήσουμε ένα ψηφιακό αποτέλεσμα χαρτιού. Ξεκινήστε με τη δημιουργία ενός νέου εγγράφου με υφή ή επαναλαμβανόμενο μοτίβο.
Επιλέξτε το εργαλείο ορθογώνιου σχήματος και εισαγάγετε ένα σχήμα παρόμοιο με το παρακάτω, τοποθετώντας το ακριβώς στην κορυφή του καμβά.
Διπλασιάστε το σχήμα και μεταβείτε στην Επεξεργασία → Ελεύθερη μετασχηματισμός (ή πατήστε Command + T). Μειώστε το μέγεθος του σχήματος ενώ κρατάτε πατημένα τα πλήκτρα Alt + Shift για να διατηρήσετε το σχήμα ανάλογα και στη συνέχεια μειώστε το μέγεθος προς το κέντρο.
Σύρετε το άνω σημείο αγκύρωσης πάνω από την κορυφή του καμβά έτσι ώστε να επικαλύπτει την κορυφή του αρχικού σχήματος.
Αλλάξτε το χρώμα του νέου σχήματος σας σε ένα πολύ ελαφρύ μπεζ (σχεδόν λευκό). χρησιμοποίησα #FFFBF8 .
Διπλασιάστε το αρχικό σας σχήμα και αλλάξτε το χρώμα σε καθαρό μαύρο ( #000000 ).
Αυξήστε το μέγεθος του σχήματος έτσι ώστε να είναι μερικά pixel μεγαλύτερο από το αρχικό σχήμα. Δημιουργήστε έναν οδηγό - μπορείτε να σύρετε έναν οδηγό από τον χάρακα (Προβολή → Εμφάνιση χάρακας, αν δεν εμφανίζεται) - περίπου 10 έως 20 εικονοστοιχεία κάτω από το μαύρο σχήμα. Μεταβείτε στην Επεξεργασία → Μετασχηματισμός → Warp.
Σύρετε το κάτω άκρο αγκύρωσης προς τα κάτω προς τον οδηγό σας και, στη συνέχεια, επαναλάβετε το βήμα με την κάτω δεξιά άγκυρα.
Πατήστε Enter για να επιβεβαιώσετε τον μετασχηματισμό σχήματος. Κάντε δεξί κλικ στο εργαλείο "Στρώματα σχήματος" και επιλέξτε την επιλογή "Ράστερη στρώση".
Επανατοποθετήστε το στρώμα μαύρου σχήματος κάτω από τα άλλα δύο σχήματα, αλλά πάνω από το στρώμα ξύλου. Πηγαίνετε στο φίλτρο → Blur → Gaussian Blur και σκιάστε το μαύρο σχήμα κατά 10 pixels. Στη συνέχεια, κάντε κλικ στο "OK".
Μειώστε την αδιαφάνεια του μαύρου σχήματος στο 50%. Ανοίξτε το παράθυρο στυλ επιπέδων για το αρχικό λευκό σχήμα και κάντε κλικ στην καρτέλα Stroke. Εφαρμόστε μια διαδρομή 1 εικονοστοιχείου στο σχήμα χρησιμοποιώντας τον τύπο γεμίσματος κλίσης, πηγαίνοντας από μαύρο σε λευκό με γωνία 90 °.
Με αυτό που έχουμε κάνει, έχουμε το ψηφιακό αποτέλεσμα από χαρτί σε ξύλο! Αυτή είναι μια μεγάλη τεχνική που πρέπει να χρησιμοποιήσετε για ιστοσελίδες.
3. Χαρακτηρισμένη τυπογραφία και μοτίβα
Η χάραξη τυπογραφίας και μοτίβα είναι μια αρκετά κοινή τεχνική στον προηγμένο σχεδιασμό ιστοσελίδων και γίνεται όλο και πιο δημοφιλής στο καθημερινό σχεδιασμό. Ακολουθούν μερικά παραδείγματα που χρησιμοποιούν αυτό το στυλ καλά σε διασυνδέσεις με ξύλο.
Παραδείγματα
Αυτή η διεπαφή χρήστη της εφαρμογής Instagram έχει ένα grungy φόντο με ξύλο-υφή και ξεθωριασμένες ημι-διαφανείς εικόνες για να παράγουν μια φθαρμένη εμφάνιση vintage. Η τυπογραφία έχει πολλά διαφορετικά στυλ, επιτρέποντας στα γράμματα να ξεχωρίζουν και να δίνουν στο ξύλινο υπόβαθρο μια χαραγμένη αίσθηση.
Συνολικά, αυτό είναι ένα πραγματικά καθαρό ξύλινο περιβάλλον χρήστη, με μια μεγάλη και εξίσου μεγάλη συλλογή από διάφορα στυλ και τεχνικές. Το ένα που χρησιμοποιείται επανειλημμένα (και πολύ καλά) είναι το χαραγμένο αποτέλεσμα στην τυπογραφία και τα μοτίβα - όπως υποδεικνύεται στα φυτικά μοτίβα στην κορυφή του στιγμιότυπου οθόνης.
Η μεταλλική σήμανση είναι κρεμασμένη στην κεφαλή με ξύλινη ετικέτα εδώ για να χρησιμεύσει ως κύρια πλοήγηση. Για να δώσει τα σημάδια μια πιο ρεαλιστική εγχάρακτη επίδραση, ο σχεδιαστής έδωσε την τυπογραφία εσωτερική και σταγόνα σκιές.
Οι ξύλινες υφές χρησιμοποιούνται κυρίως σε αυτό το σχέδιο για τη γραμμή πλοήγησης (το ημερολόγιο, σε αυτή την περίπτωση). Η χαραγμένη τυπογραφία κάνει τον τίτλο να εμφανίζεται σαν να έχει χαραγμένη κάποια από την πέτρα για να δείξει την ξύλινη υφή.
Ένα άλλο παράδειγμα χαραγμένης τυπογραφίας σε πινακίδες, στην προκειμένη περίπτωση πινακίδες με υφή ξύλου αντί για μέταλλο.
Αυτό το ξύλινο περιβάλλον εργασίας χρησιμοποιεί κομψά και μοντέρνα στοιχεία, καθιστώντας δύσκολο να επιλέξετε αν θα το βάλετε σε αυτή ή την επόμενη κατηγορία. Το κουμπί "Αγορά" και το εικονίδιο της τσάντας για ψώνια έχουν πολύ λεπτομερή εγχάρακτη επίδραση, καθιστώντας τους υπέροχα clickable!
Μίνι-Tutorials
Πώς να χαράξουμε ένα μοτίβο στο ξύλο (Photoshop)
Σε αυτό το mini-tutorial, θα δημιουργήσουμε ένα εγχάρακτο ή χαραγμένο ξύλινο εφέ στο Photoshop. Ανοίξτε ένα νέο έγγραφο και εισαγάγετε μια υφή ξύλου.
Τοποθετήστε ένα από τα δικά σας μοτίβα ή χρησιμοποιήστε την εικόνα διάνυσμα αποθέματος.
Αφού τοποθετήσετε σωστά τον φορέα, κάντε δεξί κλικ στο στρώμα και επιλέξτε "Ράστερ Layer". Κάντε δεξί κλικ πάνω του και επιλέξτε την καρτέλα Overlay Overlay. Εφαρμόστε μια κλίση χρησιμοποιώντας δύο χρώματα που επιλέγονται από το ξύλινο φόντο, όπως φαίνεται παρακάτω.
Επιλέξτε την καρτέλα Drop Shadow και εφαρμόστε μια λευκή σκιά με μια κανονική λειτουργία Blending. Αλλάξτε τη γωνία της σκιάς σε 90 ° και η απόσταση και το μέγεθος σε 1 εικονοστοιχείο. Μπορείτε να διατηρήσετε τις άλλες ρυθμίσεις στις προεπιλεγμένες.
Επιλέξτε την καρτέλα Εσωτερική σκιά για να εφαρμόσετε μια σκιά στο εσωτερικό του σχεδίου σας. Αυτό θα μας επιτρέψει να δημιουργήσουμε το χαραγμένο αποτέλεσμα. Αφαιρέστε την αδιαφάνεια της σκιάς στο 20% και αλλάξτε τη γωνία σε 90 °. Αλλάξτε την απόσταση και το μέγεθος της σκιάς σε 3 εικονοστοιχεία το καθένα και διατηρήστε όλες τις άλλες ρυθμίσεις στην προεπιλογή.
Κάντε κλικ στο κουμπί "OK" και, στη συνέχεια, χαμηλώστε την αδιαφάνεια του στρώματος μοτίβου σας στο 80%, για να επιτρέψετε σε κάποια υφή φόντου να λάμψει σε όλη τη δόξα του. Θα πρέπει να καταλήξετε σε αυτό το αποτέλεσμα:
4. Κομψά και μοντέρνα στοιχεία
Παρά τις ξύλινες υφές που συνδέονται συχνά με το vintage και το ρετρό σχεδιασμό, αν τραβηχτούν σωστά, μπορούν επίσης να χρησιμοποιηθούν για να συμπληρώσουν τα μοντέρνα και κομψά στοιχεία, όπως μπορείτε να δείτε από τα παρακάτω παραδείγματα.
Παραδείγματα
Ακολουθεί ένα άλλο στιγμιότυπο οθόνης μιας διεπαφής που είδαμε στην προηγούμενη κατηγορία, παρουσιάζοντας ένα άλλο εντελώς διαφορετικό στυλ στοιχείο. Οι ολισθητήρες και οι γραμμές κύλισης σε αυτό το σχέδιο έχουν κομψή λευκή-ασημί και πράσινη κλίση για φιλική προς το χρήστη διεπαφή.
Εκτός από το ύφασμα και τα ράμματα και τις τεχνικές τυπογραφίας, αυτή η σχεδίαση έχει μερικά μοντέρνα στοιχεία, όπως γκρι-λευκά εγκεφαλικά επεισόδια 2 εικονοστοιχείων και τα μινιμαλιστικά εικονίδια που κάνουν μια ελκυστική και χρησιμοποιήσιμη διεπαφή τύπου iPad.
Μια άλλη από τις αγαπημένες μου διεπαφές. Συνδυάζει εικόνες με ύφασμα και ξύλο με λεπτές κλίσεις, εικονοκύτταρα, απλά εικονίδια και πανέμορφη τυπογραφία για πολλούς που δημιουργούν σημεία ενδιαφέροντος για τον χρήστη.
Μια εξαιρετικά λεπτομερή διεπαφή που συνδυάζει ξύλινες υφές, τρισδιάστατα εφέ, λάμψεις και γυαλιστερά στοιχεία για να παράγει ένα αποτέλεσμα που θα αναισθητοποιήσει τους χρήστες της. Γραμμές ενός εικονοστοιχείου χρησιμοποιούνται για την ενίσχυση του εφέ 3-D.
Οι λάμψεις, οι σκιές και τα εγκεφαλικά επεισόδια χρησιμοποιούνται για να ζωντανέψουν αυτό το ζωντανό ξύλινο περιβάλλον. Οι σύγχρονες εικόνες, όμως, είναι το κλειδί.
Αυτή η όμορφη μικρή διασύνδεση χρησιμοποιεί τα φυσικά προϊόντα του κόσμου και τα κομψά φουτουριστικά στοιχεία για να παράγει ένα UI που είναι ελκυστικό και εύκολο να καταλάβει. Ο θόρυβος προστίθεται στα σύγχρονα στοιχεία, επιτρέποντάς του να ταιριάζει με την κεφαλίδα με υφή ξύλου.
Αυτό το πληκτρολόγιο μας δίνει μια ξύλινη υφή βασισμένη σε ένα υπάρχον σύγχρονο στοιχείο: το προεπιλεγμένο iPhone UIKit. Το πληκτρολόγιο λειτουργεί με τον ίδιο ακριβώς τρόπο όπως το προεπιλεγμένο πληκτρολόγιο και έτσι δεν θα συγχύσει τους χρήστες.
Μίνι-Tutorials
Σε αυτό το mini-tutorial, θα δημιουργήσουμε ένα ξύλινο ρυθμιστικό UI χρησιμοποιώντας μια επιλογή των επιπέδων του Photoshop. Δημιουργήστε ένα νέο έγγραφο και εισαγάγετε μια ξύλινη υφή ή μοτίβο.
Επιλέξτε το εργαλείο Στρογγυλεμένο ορθογώνιο και σπρώξτε ένα μακρύ στενό σχήμα, παρόμοιο με αυτό που ακολουθεί. Η ακτίνα γωνίας του εργαλείου έχει οριστεί σε 15 εικονοστοιχεία.
Κάντε δεξί κλικ στο στρώμα Σχήματα και επιλέξτε "Επιλογές ανάμειξης". Επιλέξτε την καρτέλα Επικάλυψη με κλίση και προσθέστε ένα χρώμα κλίσης που επιλέγεται από το φόντο και έπειτα ένα ελαφρώς πιο σκούρο χρώμα. Στη συνέχεια, κάντε κλικ στο "OK".
Τώρα, επιλέξτε την καρτέλα Inner Shadow και εφαρμόστε μια μαύρη σκιά με αδιαφάνεια 30% και γωνία 120 °. Καταργήστε την απόσταση σε 1 εικονοστοιχείο και αφήστε τα υπόλοιπα σε 0. Αυτό θα δημιουργήσει μια σκιά στο εσωτερικό του σχήματος μας, κάνοντας το να μοιάζει σαν να ήταν χαραγμένο από το ξύλινο υπόβαθρο.
Επιλέξτε την καρτέλα Drop Shadow και εφαρμόστε μια λευκή σκιά με μια κανονική λειτουργία Blending. Αλλάξτε τη γωνία σε 90 ° και η απόσταση και το μέγεθος σε 1 εικονοστοιχείο. Αφήστε το υπόλοιπο στα 0 εικονοστοιχεία. Αυτό θα δώσει το σχήμα μας στο επίκεντρο κατά μήκος του πυθμένα, καθιστώντας το πιο τρισδιάστατο και ρεαλιστικό.
Μεγέθυνση στη γραμματοσειρά σας και επιλογή του εργαλείου Ellipse. Ενώ κρατάτε πατημένο το πλήκτρο Shift για να διατηρήσετε το στρογγυλό σχήμα, σύρετε έξω έναν κύκλο και τοποθετήστε το πάνω από τη μπάρα ολίσθησης.
Ανοίξτε το παράθυρο "Στυλ στρώσεων" για το νέο σχήμα κύκλου. Κάντε κλικ στην καρτέλα Επικάλυψη με κλίση (Gradient Overlay) και εφαρμόστε μια κλίση που πηγαίνει από ένα φως μεσαίο έως ανοιχτό γκρι. Δώστε του μια γωνία 90 °.
Επιλέξτε την καρτέλα Drop Shadow και εφαρμόστε μια σκιά στο σχήμα σας. Αλλάξτε την απόσταση σε 0 εικονοστοιχεία και το μέγεθος σε 10 εικονοστοιχεία.
Σμίκρυνση για να δείτε το ρυθμιστικό σας στο 100%. Εδώ είναι το αποτέλεσμα:
5. Τρισδιάστατα εφέ
Δεν υπάρχουν περιορισμοί στον τρισδιάστατο σχεδιασμό και είναι απίστευτα αποτελεσματικό με ξύλινες υφές. Αυτός ο συνδυασμός χρησιμοποιείται συνήθως για την παραγωγή "ράφια", όπως φαίνεται στις διεπαφές iPhone και iPad -ιδίως στην εφαρμογή iBook της Apple.
Παραδείγματα
Αυτά τα ράφια είναι εξαιρετικά ρεαλιστικά και οι σκιές (όπως αυτό στο εσωτερικό ράφι στην πάνω δεξιά γωνία) προέρχονται από μια μεγάλη ποικιλία από προσαρμοσμένες εργασίες (όχι ενσωματωμένα φίλτρα του Photoshop).
Τα αποτελέσματα σε αυτό το σχέδιο είναι αρκετά παρόμοια με αυτά του προηγούμενου. Αυτή τη φορά, τα αποτελέσματα φέρνουν μια καθαρότερη και πιο μοντέρνα εμφάνιση, ενώ η προηγούμενη είχε σκοπό να φαίνεται πιο ρεαλιστική και "χρησιμοποιημένη".
Αυτά τα ράφια του iPhone παρουσιάζουν παρόμοιες τεχνικές. Αυτή τη φορά, το αποτέλεσμα είναι τόσο σύγχρονο όσο και ρεαλιστικό, αποδίδοντας τέλεια ισορροπημένες φωτογραφίες με ψηφιακά εφέ.
Αυτό το κουμπί 3-D είναι απίστευτο! Με το συνδυασμό των ξύλινων υφασμάτων, οι λεπτομέρειες του ντιζάιν του σχεδιασμού έρχονται σε μεγάλη εστίαση. Αν ένα κουμπί όπως αυτό ήταν μπροστά σας, δεν υπάρχει τρόπος να μπορέσετε να αντισταθείτε στο να το δώσετε ώθηση!
Ένα απλό αλλά αποτελεσματικό εφέ 3-D έχει εφαρμοστεί σε αυτή τη γραμμή πλοήγησης, κάνοντας τα κουμπιά να εμφανίζονται σαν να αρχειοθετούν συρτάρια. S είναι ένα έξυπνα σχεδιασμένο στοιχείο για να εμπλακεί ο χρήστης στη διεπαφή.
Γράφτηκε αποκλειστικά για WDD από τον Callum Chapman, έναν σχεδιαστή και εικονογράφηση που εμπορεύεται ως Creative του Circlebox . Τρέχει επίσης το The Εμπνευσμένο Blog και Picmix Store
Μοιραστείτε μαζί μας τα σχέδια και εικονογραφήσεις των ξύλινων UI σας, καθώς και οποιαδήποτε άρθρα ή σεμινάρια που θα μπορούσαν να βοηθήσουν τους συναδέλφους σας αναγνώστες.