Οδηγός Handoffs για τέλειο σχεδιασμό Pixel. Μέρος ΙΙΙ.

Συσκευές UI

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

Σε ένα κιτ UI, θα πρέπει να απεικονίσετε το έργο σας: χρώματα; τυπογραφία; εξαρτήματα όπως κουμπιά, εισόδους και ρυθμιστικά. και διαφορετικά κράτη, όπως το hover, το ενεργό και το default. Χρησιμοποιήστε το μοντέλο D.R.Y. ("Μην επαναλάβετε τον εαυτό σας") όταν εξετάζετε εάν θέλετε να τοποθετήσετε ένα συγκεκριμένο στοιχείο στο κιτ UI. Εάν έχετε δύο παρόμοια στοιχεία στους πίνακες τέχνης, μετακινήστε το σε ένα κιτ UI. Στους πίνακες ζωγραφικής των σχεδιαστών που δεν χρησιμοποιούν τα κιτ UI, θα βρείτε συνήθως δύο, τρία ή τέσσερα διαφορετικά κουμπιά με πολύ μικρές και άσχετες διαφορές. Σε αυτές τις περιπτώσεις, ο προγραμματιστής θα εφαρμόσει πιθανώς όλα αυτά αντί να δημιουργήσει μια ενοποιημένη έκδοση.

Σας προτείνουμε Craft για τη δημιουργία της βιβλιοθήκης UI του έργου σας. Για μεγαλύτερα έργα, είναι καλή ιδέα να έχετε μια έκδοση HTML και CSS ενός κιτ UI και να τα χρησιμοποιήσετε ως αναφορά για άλλα στοιχεία.

CRAFT plugin (συλλογή επαναχρησιμοποιήσιμων στοιχείων στο έργο)

Εξαγωγή

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

  • Έλεγχος επίσκεψης
  • Zeplin
  • Συμπλί
  • Μέτρο σκίτσου
Zeplin: σύγχρονο όργανο για την επιθεώρηση του σχεδιασμού

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

Παλιά τρόπο. Δημιουργία σχολίων σε στρώματα του Photoshop

Στοιχεία στοιχείων

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

  • Προκαθορισμένο
  • Υπαίθρια: Η κατάσταση του στοιχείου με ποντίκι
  • Ενεργό: Η κατάσταση του στοιχείου κατά το πάτημα
  • Focus: Η κατάσταση του στοιχείου που στοχεύεται επί του παρόντος από το πληκτρολόγιο ή ενεργοποιείται από το ποντίκι (δηλ. Εισροές, περιοχές κειμένου)
  • Επισκεφθέντα: Η κατάσταση των συνδέσμων που έχουν ήδη επισκεφθεί
Παραδείγματα στοιχείων αναφέρει

Υψος γραμμής

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

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

Η βέλτιστη πρακτική υπαγορεύει τη χρήση γραμμής ύψους παρόμοιας με τις γραμματοσειρές. Μην χρησιμοποιείτε πολλά διαφορετικά, προσαρμοσμένα υψώματα γραμμής σε ολόκληρο τον ιστότοπο. Κάθε γραμματοσειρά έχει μια προεπιλεγμένη τιμή ύψους γραμμής. Για παράδειγμα, ο Roboto έχει 1,4x ύψος γραμμής μεγέθους γραμματοσειράς. αν έχετε μέγεθος γραμματοσειράς 16px, το ύψος γραμμής θα είναι 22px. Ακόμα και αν αποφασίσετε να μην χρησιμοποιήσετε την προεπιλεγμένη τιμή, προσπαθήστε να χρησιμοποιήσετε την ίδια αναλογία σε ολόκληρο τον ιστότοπο. Οι τυπικές τιμές είναι 1,3-1,6 μεγέθους γραμματοσειρών. Οι προγραμματιστές θα το αρέσουν, επειδή προτιμούν να ορίσουν την τιμή παγκόσμιου ύψους γραμμής και να το ξεχάσουν, συνεχίζοντας να εργάζονται με μόνο μεγέθη γραμματοσειρών.

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

  • Μέγεθος γραμματοσειράς: 36px
  • Ύψος γραμμής: 1.4

Chrome, Safari, Opera: Υπολογίστε μόνο ακέραιες τιμές και περικοπή πλωτήρα. 36px * 1.4 = 50.4 και θα περικοπεί σε 50px.

Firefox: Υπολογίστε με float. 36px * 1.4 = 50.4, και θα παραμείνει 50,4px. Αν έχετε δύο γραμμές κειμένου όπως στο παρακάτω παράδειγμα, θα είναι 100,8px. Η κύρια διαφορά με το Safari και το Chrome είναι ότι αν επιλέξετε ένα ύψος γραμμής όπως το 1,41, θα πάρετε 100px. στον Firefox, θα είναι μέγεθος δοχείου 101.533px.

Το takeaway εδώ είναι ότι ο Firefox χρησιμοποιεί πιο ακριβείς τιμές ύψους γραμμής, όπως το 1,33333. Εάν αυτό δεν σας αφορά, κολλήστε με τους πολύ καλούς αριθμούς, όπως το 1,3.

Γραμματοσειρές

Αρχικά, δοκιμάστε να βρείτε αποδεκτές γραμματοσειρές στις Γραμματοσειρές Google. Τα προγράμματα περιήγησης υποστηρίζουν διαφορετικές μορφές γραμματοσειρών. Αυτό σημαίνει ότι για να χρησιμοποιήσετε ορισμένες προσαρμοσμένες γραμματοσειρές, ο προγραμματιστής θα πρέπει να τις προετοιμάσει με ειδικές υπηρεσίες για τη μετατροπή του ttf / otf σε woff, woff2 ή eot. Κατά τη διάρκεια αυτής της διαδικασίας, οι γραμματοσειρές μπορούν να χάσουν την ποιότητα. Επομένως, η σύστασή μου είναι να χρησιμοποιήσετε προσαρμοσμένες γραμματοσειρές μόνο αν γνωρίζετε ότι οι προγραμματιστές σας δεν θα αποτύχουν στη διαδικασία. Πρέπει να ξέρουν πώς να εργάζονται με τις γραμματοσειρές.

Εδώ είναι μερικά πράγματα που πρέπει να θυμάστε σχετικά με τη χρήση των γραμματοσειρών:

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

Προγραμματιστές και σχεδιαστές

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

Πιστεύουμε ότι είναι πάντα δυνατό για τους προγραμματιστές και τους σχεδιαστές να βρουν έναν λογικό συμβιβασμό και να συνεργαστούν αποτελεσματικά μαζί για να μειώσουν το κόστος / το χρόνο των έργων τους.

Αγγίξτε το κουμπί ❤ αν βρείτε αυτό το άρθρο χρήσιμο!

Μέρος 1 - Λογισμικό, Ονομασία, Βελτιστοποίηση εικόνας, Sprites, SVG, Favicon

Μέρος 2 - Πλέγμα, Υπεύθυνος σχεδιασμός, Κινούμενα σχέδια, Πρωτότυπα

Οποιεσδήποτε ερωτήσεις ή σχόλια; Σύνδεση μέσω Pixel Point