23Jul
είναι ένα εργαλείο συρματοποίησης που μπορούμε να χρησιμοποιήσουμε για να σκιαγραφήσουμε μια μακέτα της διεπαφής χρήστη της εφαρμογής μας.Το μεγάλο πράγμα για το Pencil είναι ότι είναι ελαφρύ, εύκολο στη χρήση και στενά ενσωματωμένο στον Firefox.Πάνω από όλα είναι μια δωρεάν εφαρμογή ανοιχτού κώδικα!Στο τέλος του άρθρου θα σας δώσουμε μια απλή επίδειξη για το πώς να χρησιμοποιήσετε το Pencil για να δημιουργήσετε ένα σύρμα τύπου Brizzly.
Γιατί δημιουργούμε wireframes;
Ένα wireframe είναι ένα σκίτσο μιας ιδέας διάταξης σελίδας. Ένα wireframe επικεντρώνεται στο σχεδιασμό πληροφοριών μιας σελίδας για να εξασφαλίσει ότι ο σχεδιασμός ταιριάζει σε αυτό που χρειάζεται ο χρήστης.Ένα συρμάτινο πλαίσιο αποτελείται συνήθως από διαφορετικά σχήματα( όπως κουτιά, ωοειδή και διαμάντια) που αντιπροσωπεύουν περιεχόμενο, λειτουργικά στοιχεία και στοιχεία πλοήγησης.Αυτά τα σχήματα εμφανίζουν την τοποθέτησή τους στη σελίδα.
Αρχικά μπορεί να φαίνεται σαν χάσιμο χρόνου δημιουργώντας τραχεία σκίτσα μιας σελίδας.Ένα σύρμα πλαίσιο είναι σημαντικό για να τους χρήστες να επικεντρωθεί στο στοιχείο της σπουδαιότητας στη σελίδα σας.Δημιουργώντας ένα τραχύ σκίτσο μιας σελίδας, χωρίς φανταστικά οπτικά στοιχεία, μετατοπίζει την προσοχή του χρήστη σε σημαντικά στοιχεία όπως το μέγεθος, τη διάταξη και την τοποθέτηση των στοιχείων της σελίδας σας.Θα αρχίσουμε να έχουμε καλύτερη κατανόηση για το τι πραγματικά θέλει και χρειάζεται ο πελάτης από το λογισμικό όταν ο χρήστης αρχίσει να εστιάζει στα σημαντικά στοιχεία μιας σελίδας.Η δημιουργία ενός πλαισίου συρμάτων επιτρέπει σε εσάς και τους χρήστες σας να συνεργάζονται αποτελεσματικά και να εντοπίζουν πιθανά πιθανά προβλήματα σχεδιασμού νωρίς.
Ξεκινώντας με το μολύβι
Κατεβάστε το μολύβι από τη σελίδα πρόσθετων μολυβιών.Μόλις εγκαταστήσετε το μολύβι, είναι προσβάσιμο από το 'Εργαλεία' & gt;'Μολύβι σκίτσο'.
Αυτό είναι που μοιάζει με το Brizzly.Είναι μια πολύ καλή εφαρμογή Ιστού που συγκεντρώνει το Facebook και το Twitter σας σε μια σελίδα.
Αυτό είναι το τελικό αποτέλεσμα του πλαισίου σύρματος.Τα κύρια σχήματα σε αυτό το wireframe είναι, ορθογώνια, πλαίσια κειμένου και καρτέλες.Η επόμενη ενότητα του άρθρου θα δώσει ένα απλό παράδειγμα πώς να δημιουργήσετε κάθε σχήμα.
Δημιουργία ορθογωνίου
Το πρώτο βήμα της δημιουργίας ενός σχήματος πλαισίου σύρματος είναι να σύρετε ένα σχήμα από το μενού "Συλλογές σχήματος" πάνω στον καμβά.
Αλλάξτε το ορθογώνιο σε κατάλληλο πλάτος και ύψος.
Μπορούμε να προσαρμόσουμε το κείμενο, τα σύνορα και το χρώμα φόντου οποιουδήποτε σχήματος σε Pencil.Κάντε δεξί κλικ στο ορθογώνιο και επιλέξτε 'Ιδιότητες' για να ανοίξετε τα παράθυρα Ιδιότητες.Αυτή είναι η οθόνη ιδιοτήτων φόντου.Ρυθμίστε το χρώμα φόντου Rectangle σε λευκό( #FFFFFF).
Κάντε κλικ στην καρτέλα 'Οριοθέτηση' και προσαρμόστε τις ιδιότητες των συνόρων.Ρυθμίστε το χρώμα του περιγράμματος σε μαύρο( # 000000) και αλλάξτε το βάρος του περιγράμματος στο 1.
Η οθόνη ιδιοτήτων κειμένου ας προσαρμόσουμε τον τύπο, το μέγεθος, το στυλ, το βάρος, το χρώμα, τη φωτεινότητα και την αδιαφάνεια του κειμένου.
Δημιουργία καρτελών
Οι καρτέλες εγχώριου, βύσματος, εικόνας είναι τρεις καρτέλες που στοιβάζονται το ένα πάνω στο άλλο.Σύρετε τρεις "Πίνακες καρτελών" στο ορθογώνιο.Αλλάξτε το μέγεθος κάθε καρτέλας έτσι ώστε κάθε καρτέλα να εμφανίζεται δίπλα-δίπλα.
Ανοίξτε την οθόνη ιδιοτήτων κειμένου για να προσαρμόσετε το χρώμα γραμματοσειράς των καρτελών 'Εικόνες' και 'Σχέδιο'.Ρυθμίστε το σε Γκρίζο( # 989898).
Δημιουργία κειμένου
Σύρετε το σχήμα του κειμένου στον καμβά για να δημιουργήσετε το κάθε μενού.Μπορούμε να προσαρμόσουμε την εμφάνιση κειμένου με πρόσβαση στο παράθυρο ιδιοτήτων κειμένου.
Χρήσιμες Συμβουλές για την Αλλαγή Χρώματος
Το χρώμα είναι ένα από τα πιο σημαντικά στοιχεία για την παροχή ενός ευχάριστου συρματοπλέγματος.Ο ακριβέστερος τρόπος αλλαγής του χρώματος ενός σχήματος είναι ο προσδιορισμός του κώδικα HTML του χρώματος.Η αποτύπωση του κώδικα HTML για ένα συγκεκριμένο χρώμα μπορεί να είναι δύσκολη.Μπορούμε να χρησιμοποιήσουμε το φύλλο εξαπάτησης χρώματος HTML από το w3cschools.com για να αναζητήσουμε τον σωστό κώδικα HTML για ένα συγκεκριμένο χρώμα.
Επίσης, θέλουμε να χρησιμοποιήσουμε colorzilla για να διαλέξουμε χρώματα από την οθόνη και να την χρησιμοποιήσουμε σε Pencil.Κάντε κλικ στο εικονίδιο με το πώμα ματιών στην κάτω αριστερή γωνία του Firefox για να επιλέξετε χρώμα στην οθόνη.Μπορούμε επίσης να ανοίξουμε τον επιλογέα χρωμάτων της ColorZilla κάνοντας διπλό κλικ στο εικονίδιο σταγόνων ματιών.Απλά αντιγράψτε επικολλήστε τον κώδικα Hex στον κώδικα HTML του Pencil.
Συμπέρασμα
Το μολύβι είναι εύκολο στη χρήση εργαλειομηχανή.Η ενσωμάτωση μολυβιών με τον Firefox μας επιτρέπει να χρησιμοποιήσουμε άλλο plugin του Firefox για να δημιουργήσουμε ένα καλύτερο wireframe
Σύνδεσμοι
Κατεβάστε το μολύβι
Κατεβάστε το Colorzilla
W3C HTML Color Cheat Sheet