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

Είχα την ευκαιρία να συνεργαστώ με πολλούς σχεδιαστές UI / UX καθ 'όλη τη διάρκεια της καριέρας μου και έχω παρατηρήσει ένα πολύ ενδιαφέρον πράγμα για το πώς δουλεύουν: Δεν χρησιμοποιούν καθιερωμένους οδηγούς για την ολοκλήρωση έργων. Εάν είστε νέος προγραμματιστής σε μια εταιρεία, τα μέλη της ομάδας μπορούν να σας στείλουν συνδέσμους σε ένα GitFlow ή το GitHubFlow και θα μάθετε όλα όσα πρέπει να γνωρίζετε για τη διαχείριση αποθετηρίων σε 10 λεπτά. Ως προγραμματιστές, μπορούμε να προσθέσουμε σε ένα project linters και όλοι θα ακολουθήσουν τον οδηγό στυλ αυτού του κώδικα. Αλλά τι μπορείτε να δώσετε στον σχεδιαστή σας για να διασφαλίσει ότι θα παραδώσει ό, τι θέλετε; Εμείς στο Pixel Point έγραψα αυτόν τον οδηγό για τους ίδιους σκοπούς.

Μην ξεχάσετε να διαβάσετε και άλλα μέρη:

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

Μέρος 3 - Κιτ UI, Εξαγωγή, Στοιχεία στοιχείων, Γραμμή-ύψος, Γραμματοσειρές, Προγραμματιστές και σχεδιαστές

Λογισμικό

Το Photoshop διαθέτει πολλά χρήσιμα πρόσθετα για να επισπεύσει τη δουλειά σας, αλλά συνιστούμε το Sketch ή το Adobe XD. Αυτά τα εργαλεία συνδυάζουν τα πλεονεκτήματα της χρήσης διανυσματικών γραφικών με τις εύκολα ρυθμιζόμενες ιδιότητες των εικόνων ράστερ. Είναι ιδιαίτερα χρήσιμες κατά το σχεδιασμό για κινητές εφαρμογές σε συσκευές με μεγάλες πυκνότητες εικονοστοιχείων. Σε αυτές τις περιπτώσεις, δεν θα χρειαστεί να ανησυχείτε για το προφίλ χρώματος, το μέγεθος των αρχείων του έργου σας θα είναι μικρότερο και θα χρησιμοποιήσετε πολλές λειτουργίες που θα σας βοηθήσουν να εργαστείτε αποτελεσματικότερα.

iOS Μέγεθος αρχείου οδηγιών ανθρώπινης διεπαφής για Photoshop και Σκίτσο (http://apple.co/28YytHY)

Ονομασία περιουσιακών στοιχείων

Χρησιμοποιήστε μια σημείωση παύλα για τα στοιχεία σας

Η Google συνιστά αυτό για όλα τα αρχεία, συμπεριλαμβανομένων των HTML, PDF και .jpg. Ακολουθεί ένα βίντεο Google WebMasters για αυτό: youtu.be/AQcSFsQyct8. Ενώ είναι δυνατό να μετονομάσετε τα πάντα στην πλευρά του backend, είναι καλύτερο να διατηρήσετε τα ονόματα συνεπή.

  • Χρησιμοποιήστε μόνο λατινικούς χαρακτήρες.
  • Μην χρησιμοποιείτε χώρους.
  • Χρησιμοποιήστε μόνο πεζά.
  • Χρησιμοποιήστε @ 2x ή @ 3x postfix για να προετοιμάσετε εικόνες για συσκευές με διαφορετικές πυκνότητες εικονοστοιχείων.
  • Χρησιμοποιήστε τους ίδιους κανόνες για τα ονόματα των φακέλων σας.

Βελτιστοποίηση εικόνας

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

Προσπαθήστε να χρησιμοποιήσετε το SVG

Όταν χρησιμοποιείτε το SVG για τα εικονίδια ή τις εικόνες σας, δεν χρειάζεται να ανησυχείτε για συσκευές με διαφορετικές πυκνότητες εικονοστοιχείων ή για προετοιμασίες εκδόσεων όπως @ 2x και @ 3x. Ένα άλλο πλεονέκτημα είναι ότι τα γραφικά SVG χρησιμοποιούν λιγότερο χώρο και μπορούν να συμπιεστούν αποτελεσματικά από το gzip από την πλευρά του διακομιστή.

Σκεφτείτε δύο φορές πριν στείλετε ένα στοιχείο μεγαλύτερο από 1MB σε έναν προγραμματιστή

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

  • Χρησιμοποιήστε το .jpg για φωτογραφίες χωρίς διαφάνεια και όταν μπορείτε να θυσιάσετε την ποιότητα υπέρ του μεγέθους.
  • Για την καλύτερη δυνατή υποστήριξη ποιότητας και διαφάνειας, χρησιμοποιήστε το .png.
  • Για κινούμενα σχέδια, χρησιμοποιήστε μορφές βίντεο ή GIF. Λάβετε υπόψη ότι τα GIF είναι πολύ παλιά μορφή, επομένως το αρχείο βίντεο σας θα είναι υψηλότερο σε ποιότητα αλλά μικρότερο σε μέγεθος.

Εργαλεία βελτιστοποίησης

Χρησιμοποιήστε εργαλεία βελτιστοποίησης όπως Kraken, ImageOptim ή Optimage. Εργαλεία όπως το Photoshop και το Σκίτσο αποθηκεύουν τα μεταδεδομένα εικόνας από προεπιλογή και δεν χρησιμοποιούν τους βέλτιστους αλγόριθμους για να κάνουν την εικόνα σας να μοιάζει ίδια, αλλά να πάρει λιγότερο χώρο.

Πόσο καλά εκτελεί το Kraken.io;

Το Kraken έχει μερικές διαφορετικές επιλογές στη λειτουργία Expert για βελτιστοποίηση της εικόνας σας.

Kraken επιλογές

Καθορίστε ποιο επίπεδο συμπίεσης είναι αποδεκτό για μη στατικές εικόνες

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

Μην φτιάχνετε σπρέι

Ένα sprite είναι ένα αρχείο .jpg, SVG ή .png που περιέχει όλα τα απαραίτητα γραφικά του ιστότοπού σας και βοηθά στην αποτροπή πρόσθετων αιτημάτων διακομιστή για την ανάκτηση στοιχείων. Είναι ένα χρήσιμο τέχνασμα βελτιστοποίησης, αλλά μην προσπαθήσετε να δημιουργήσετε σπρέι μόνοι σας. Ένας προγραμματιστής θα κάνει ένα αυτόματα, καθώς θα χρειαστεί όχι μόνο sprites, αλλά και τη θέση και τα μεγέθη κάθε στοιχείου του sprite. Θα πονάρετε πολύ τον προγραμματιστή εάν ζητήσετε να μετρήσει κάθε στοιχείο χειροκίνητα. Η αυτόματη δημιουργία Sprite βοηθά να κρατήσετε τα εικονίδια στην πραγματική τους κατάσταση και σας εμποδίζει να δημιουργήσετε εκδόσεις @ 2x ή @ 3x. Ακόμα κι αν δεν χρησιμοποιείτε SVG sprites, αυτό θα σας εξοικονομήσει από τον πόνο της προσθήκης νέων εικόνων σε ένα υπάρχον sprite.

SVG

Μετατρέψτε το κείμενο SVG σε καμπύλες. διαφορετικά, θα λάβετε αντικείμενα κειμένου στην προεπιλεγμένη γραμματοσειρά (δημιουργήστε επιλογές περιγράμματος στο Adobe Illustrator).

Βεβαιωθείτε ότι δεν έχετε εισαγάγει μια εικόνα base64 στο SVG σας. Μπορεί να εμφανιστεί όταν προσπαθείτε να εξάγετε ως rasterized εικόνα SVG.

Παράδειγμα εικόνας base64 που έχει εισαχθεί στο SVG σας

Βελτιστοποιήστε το SVG αφαιρώντας όλες τις περιττές πληροφορίες με το SVGOMG. Συνήθως, το αρχείο SVG σας θα περιέχει μερικές πληροφορίες (όπως τον τίτλο και την περιγραφή) από προεπιλογή. Θα έχει κωδικοποιήσει τον κώδικα αντί για ελάχιστες εν σειρά, αχρησιμοποίητες ομάδες ή άδεια δοχεία. Μπορείτε να καταργήσετε όλα αυτά χωρίς να χάσετε την ποιότητα εάν χρησιμοποιείτε το SVGOMG.

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

Από αριστερά προς τα δεξιά: Εξαγωγή SVG με σταθερό ύψος και πλάτος, εξαγωγή SVG με ύψος και πλάτος 100%

Favicon

  • Προετοιμάστε δύο αρχεία με διαφορετικές διαστάσεις.
  • Ονομάστε το πρώτο favicon.png και ορίστε το μέγεθος σε 32x32. Όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν .png για favicons, και δεν χρειάζεται να τα μετατρέψετε σε μορφή ico.
  • Ονομάστε το δεύτερο αρχείο favicon-180x180.png και ορίστε το μέγεθος σε 180x180 για εικονίδια για κινητά.

Πολλά άρθρα σε απευθείας σύνδεση ισχυρίζονται ότι πρέπει να προετοιμάσετε πολλές favicons με διαφορετικά μεγέθη, όπως 16x16, 24x24 ή 48x48. Δεν χρειάζεται να ανησυχείτε γι 'αυτό, επειδή 32x32 και 180x180 δουλεύουν καλά στις περισσότερες περιπτώσεις. Τα προγράμματα περιήγησης θα αλλάξουν επίσης το μέγεθος του υπάρχοντος εικονιδίου σας, εάν είναι απαραίτητο. Μην ξεχάσετε να χρησιμοποιήσετε επίσης εργαλεία βελτιστοποίησης εικόνας για favicons, επίσης.

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

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

Μέρος 3 - Κιτ UI, Εξαγωγή, Στοιχεία στοιχείων, Γραμμή-ύψος, Γραμματοσειρές, Προγραμματιστές και σχεδιαστές

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