Πώς να προσθέσετε δεδομένα στα σχέδια σκίτσων σας

Sep 14, 2025
πως να

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

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

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

Σκάφος , από εργαστήρια εισβολής, στοχεύει στην εξουσία της ροής εργασίας του σχεδιασμού του μέλλοντος. Προσφέρει ένα αναπτυσσόμενο σύνολο εργαλείων, όλα κατασκευασμένα για να εξοικονομήσετε χρόνο και να προσθέσετε ρεαλισμό κατά το σχεδιασμό. Ο χρόνος προέρχεται από αμέτρητα αποθηκευμένα βήματα (αντίο αντίγραφο και επικόλληση!) Και ο ρεαλισμός προέρχεται από γρήγορη πρόσβαση σε πραγματικά δεδομένα και περιεχόμενο (αντίο Lorem ipsum!).

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

01. Ρυθμίστε το Artboard σας

Ας ξεκινήσουμε δημιουργώντας ένα νέο έγγραφο στο σκίτσο και τη δημιουργία ενός σχεδίου για να εργαστείτε μέσα. Σε ένα νέο έγγραφο, χτυπήστε Εισαγωγή & GT; Γραφή ή απλά το ΕΝΑ Πλήκτρο για να ενεργοποιήσετε το εργαλείο Artboard.

Στο δεξί παράθυρο θα δείτε ένα μενού γεμάτο με προκαθορισμένα μεγέθη γραφικών (δημιουργήθηκε για να ταιριάζει με τις δημοφιλείς συσκευές και σενάρια). Επιλέξτε το iPhone 6 και ένα τέχνης θα δημιουργηθεί για εσάς στο κέντρο του καμβά.

02. Σχεδιάστε μια κεφαλίδα

Αν και δημιουργούμε συγκεκριμένα μια λίστα επαφών σε αυτό το μάθημα, θα χρειαστούμε κάποια επιπλέον μπιτ διεπαφής για να ολοκληρώσουμε την ψευδαίσθηση. Με το εργαλείο ορθογώνιο ( Εισαγωγή & GT; Ορθογώνιο παραλληλόγραμμο ή R ), σύρετε μια κεφαλίδα στην κορυφή της γραφίδας. Τοποθετήστε τους τίτλους «Επαφές» και μερικά εικονίδια για καλή μέτρηση, όπως "Menu" και "Αναζήτηση" ενέργειες στην αριστερή και δεξιά γωνία της γραφίδας, αντίστοιχα.

03. Κατασκευάστε το υποσέλιδο

Add a tabbed footer, with a floating action button for adding a new contact

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

Πριν φτάσουμε στα δεδομένα, ας δούμε επίσης ένα γρήγορο υποσέλιδο με καρφίτσα, πλήρης με ένα FAB (πλωτό κουμπί δράσης) για την προσθήκη μιας νέας επαφής. Με το εργαλείο ορθογώνιο, αφήστε ένα λευκό ορθογώνιο και τοποθετήστε το στο κάτω μέρος της γραφίδας. Χρησιμοποιώντας το οβάλ εργαλείο ( Εισαγωγή & GT; Ωοειδής ή O ), Σχεδιάστε έναν κύκλο για το Fab.

04. Εισάγετε εικονίδια

Στη συνέχεια, εισάγετε μερικά εικονίδια για να εμφανίσετε το χρήστη από το οποίο μπορείτε να κάνετε κλικ στο κουμπί "Plus" μέσα στο εικονίδιο Fab, ένα "χρήστη" στην αριστερή καρτέλα και ένα εικονίδιο "Ιστορικό" στα δεξιά. Θα προσθέσουμε επίσης έναν δείκτη - μια απλή μαύρη γραμμή - για να δείξει ότι το Επαφές Η προβολή έχει επιλεγεί. Τώρα είναι επίσης ένας πολύ καλός χρόνος για να ορίσετε το χρώμα του γραφικού χρώματος (μαύρο), το οποίο μπορείτε να κάνετε επιλέγοντας το Artboard και στη συνέχεια να επιλέξετε ένα χρώμα στον επιθεωρητή.

05. Δημιουργία στοιχείου επαφής

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

06. Κάντε κάποια στρώματα κειμένου

Add text layers where the names and addresses of your contacts will sit

Προσθέστε στρώματα κειμένου όπου τα ονόματα και οι διευθύνσεις των επαφών σας θα καθίσουν

Δίπλα στο οβάλ, ας εισαγάγει επίσης ζεύγος στρώσεων κειμένου. Με Εισαγωγή & GT; Κείμενο ή απλά το T Πληκτρολογήστε το εργαλείο κειμένου για να εισαγάγετε ένα στρώμα που να διαβάζει το όνομα εδώ, και ένα άλλο κάτω από το οποίο διαβάζει το μήνυμα ηλεκτρονικού ταχυδρομείου εδώ '. Αυτά θα είναι τα στρώματα που γεμίζουμε με δεδομένα από τον πίνακα τύπου μέσα στο σκάφος.

07. Επιλέξτε ένα όνομα

Using the Type panel, populate the design with some random names

Χρησιμοποιώντας τον πίνακα τύπου, συμπληρώστε το σχέδιο με μερικά τυχαία ονόματα

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

08. Συμπληρώστε το στρώμα κειμένου ηλεκτρονικού ταχυδρομείου

Θα γεμίσουμε το στρώμα κειμένου ηλεκτρονικού ταχυδρομείου με τον ίδιο τρόπο που κάναμε τα ονόματα. Επιλέξτε το στρώμα "Email εδώ", ανοίξτε τον πίνακα τύπου και επιλέξτε Διεύθυνση ηλεκτρονικού ταχυδρομείου για να εισαγάγετε γρήγορα μια ρεαλιστική διεύθυνση ηλεκτρονικού ταχυδρομείου.

09. Ένα τυχαίο πρόσωπο

Select a source from which headshots can be pulled

Επιλέξτε μια πηγή από την οποία μπορούν να τραβήξουν headshots

Τη στιγμή, θέλουμε να γεμίσουμε αυτόν τον γκρίζο κύκλο με μια πραγματική φωτογραφία avatar, την οποία θα κάνουμε με τον πίνακα των φωτογραφιών. Ξεκινήστε επιλέγοντας το στρώμα κύκλου και, στη συνέχεια, ανοίξτε τις «Φωτογραφίες» από το παράθυρο CRAFT. Εδώ, έχετε μερικές επιλογές, όπως η προμήθεια από έναν τοπικό φάκελο, dropbox ή το ιστό σε μεγάλο βαθμό.

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

10. Δημιουργήστε μια λίστα επαφών

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

11. Διπλασιάστε

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

Έχουμε δύο επιλογές: εσωτερική επιλογή και συγκεκριμένη μέτρηση. Το πρώτο σας επιτρέπει να επιλέξετε την περιοχή που θέλετε η λίστα, στη συνέχεια να το γεμίσει με όμως πολλά αντικείμενα. Το δεύτερο σάς επιτρέπει να ορίσετε την ακριβή μέτρηση («Θέλω ένα πλέγμα x αντικείμενα ευρεία και y αντικείμενα ψηλά»).

12. Χρησιμοποιώντας εσωτερική επιλογή

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

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

13. Αλλαγή μεγέθους του στρώματος

Resize the Duplicate Control layer, and the contacts will multiply to fill the space

Αλλαγή μεγέθους του διπλού στρώματος ελέγχου και οι επαφές πολλαπλασιάζονται για να γεμίσουν το χώρο

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

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

14. Διορθώστε τη απόσταση

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

15. Προσθέστε μια δροσερή κεφαλίδα

Με τη λίστα μας πλήρη και συμπληρωμένη με πραγματικούς λαούς, ας διπλασιάσουμε ξανά στη διασύνδεση και εισάγετε κάποια φλόγα, ίσως με τη μορφή μιας πλήρους κεφαλίδας φωτογραφιών. Θα ξεκινήσουμε επιλέγοντας το αρχικό σχήμα «κεφαλίδα-BG» που σχεδιάσαμε με το εργαλείο ορθογώνιο και το μετράμε προς τα κάτω προς την πρώτη επαφή στη λίστα. Η κεφαλίδα θα πρέπει πιθανώς να σταματήσει γύρω στο 20px από το πρώτο στοιχείο, αφού αυτό είναι το ίδιο υδρορροή που χρησιμοποιήσαμε στη λίστα μας.

16. Βρείτε τη σωστή εικόνα

Unsplash is an impressive online photo resource

Ασφαλής είναι ένας εντυπωσιακός διαδικτυακός πόρος φωτογραφιών

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

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

17. Χρώματα Tweaking

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

Η φωτογραφία που μου αρέσει είναι λίγο φωτεινό, οπότε θα το γυρίσω κάτω μια εγκοπή προσθέτοντας ένα σκούρο ημιδιαφανές γεμίσει πάνω από την εικόνα. Το σκίτσο σάς επιτρέπει να "στοίβες" γεμίζει ένα μόνο σχήμα, οπότε το μόνο που πρέπει να κάνουμε είναι να κάνετε κλικ στο εικονίδιο Little '+' στο τμήμα γεμίζει τον επιθεωρητή. Έχω προσθέσει ένα μαύρο στρώμα 50 τοις εκατό πάνω από την εικόνα, η οποία τώρα φαίνεται σωστή.

18. Έγινε!

There you have it – a realistic mockup full of data

Εκεί το έχετε - ένα ρεαλιστικό mockup γεμάτο δεδομένα

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

πως να - Τα πιο δημοφιλή άρθρα

Πώς να σχεδιάσει την προοπτική

πως να Sep 14, 2025

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

Δημιουργήστε ένα blog με το πλέγμα και το flexbox

πως να Sep 14, 2025

Τα τελευταία δύο έως τρία χρόνια έχουν δει διάταξη προχωρήσει προς τα �..

Ζωγραφική εκφραστική πορτρέτο τέχνης με περιόδους 5

πως να Sep 14, 2025

Το κιβώτιο είναι ένα δημοφιλές εργαλείο ψηφιακής τέχνης (για περισσότ�..

10 εκπληκτικά πράγματα που μπορείτε να κάνετε με τα στρώματα

πως να Sep 14, 2025

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

Εξαγωγή μετά από εφέ κινούμενα σχέδια σε HTML5

πως να Sep 14, 2025

Το Animation στον Ιστό είναι εδώ για να μείνει. Είναι σε όλα από τις λεπτές κ..

Δημιουργία διακοσμητικών πλακιδίων στον σχεδιαστή ουσίας

πως να Sep 14, 2025

Σελίδα 1 από 2: Σχεδιασμός και υφή 3D πλακάκια δαπέδου ..

Στρατηγική της εμπειρίας του κύριου χρήστη

πως να Sep 14, 2025

Στρατηγική UX Είναι μια διαδικασία που πρέπει να ξεκινήσει πριν �..

Η απίστευτη δύναμη του FlexBox

πως να Sep 14, 2025

Το FlexBox ή η εύκαμπτη διάταξη του κιβωτίου, είναι μια ισχυρή μονάδα διάτ�..

Κατηγορίες