16 από τα καλύτερα εργαλεία σχεδίασης και σχεδίασης της Google το 2020

Η εργασία στον Ιστό συνήθως σημαίνει ότι θα συνεργάζεστε με την Google σε κάποιο σχήμα ή μορφή. Και καθώς το Google Chrome βρίσκεται μπροστά από τον ανταγωνισμό, οι σχεδιαστές και οι προγραμματιστές πρέπει να σκεφτούν πώς θα λειτουργήσει το έργο τους με το πρόγραμμα περιήγησης. Πώς θα φαίνεται; Ποιες τεχνολογίες υποστηρίζει, πόσο ασφαλές είναι και πώς θα λειτουργήσει;

Ευτυχώς, το Chrome παρέχει εργαλεία για να διασφαλίσει ότι οποιοσδήποτε ιστότοπος ή εφαρμογή θα είναι στα καλύτερά του. Τα DevTools επιτρέπουν στους σχεδιαστές και τους προγραμματιστές να αποκτήσουν πληροφορίες για μια ιστοσελίδα: μπορείτε να χειριστείτε το DOM, να ελέγξετε το CSS, να πειραματιστείτε σε σχέδια με ζωντανή επεξεργασία, να εντοπίσετε σφάλματα JavaScript και να ελέγξετε την απόδοση. (Δείτε περισσότερα σχετικά με τον τρόπο χρήσης αυτών Εργαλεία ιστού Google εδώ, και αν ξεκινάτε από το μηδέν δείτε τη λίστα με τα κορυφαία μας κατασκευαστές ιστοσελίδων , πολύ).



Όμως η Google προσφέρει περισσότερα από απλώς το πρόγραμμα περιήγησης. Διαθέτει εργαλεία και πόρους για να βοηθήσει σχεδόν κάθε πτυχή της ζωής σας στο σχεδιασμό και την ανάπτυξη. Θέλετε να μάθετε πώς να βελτιώσετε την απόδοση; Ο φάρος είναι εδώ για να σας βοηθήσει. Θέλετε να δημιουργήσετε ιστότοπους για κινητά με καλύτερη απόδοση; Τότε πείτε γεια στο AMP. Θέλετε να δημιουργήσετε όμορφα PWA; Στη συνέχεια, το Flutter, το Material Design και το Workbox είναι έτοιμα να μπουν.



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

πώς να περιστρέψετε ένα επίπεδο photoshop

01. Φάρος

Η απόδοση είναι βασικός παράγοντας για την επιτυχία ενός ιστότοπου και Φάρος είναι το εργαλείο της Google για τη βελτίωση της ποιότητας των ιστοσελίδων (το δικαίωμα φιλοξενία ιστοσελίδων η υπηρεσία θα βοηθήσει επίσης). Λοιπόν, πώς χρησιμοποιείτε το φάρο και τι μπορεί να κάνει; Στην απλούστερη μορφή του, μπορείτε να εκτελέσετε το Lighthouse από την καρτέλα 'Έλεγχοι' και να επιλέξετε από μια επιλογή επιλογών, συμπεριλαμβανομένων επιτραπέζιων υπολογιστών ή κινητών, εκτός από πλαίσια επιλογής για απόδοση, προσβασιμότητα και SEO, για να δημιουργήσετε μια τελική αναφορά με προτεινόμενες βελτιώσεις.



02. Πολυμερές

Πολυμερές είναι γνωστό για τη δουλειά του με στοιχεία ιστού, αλλά το έργο έχει πλέον επεκτείνει το ρεπερτόριό του για να συμπεριλάβει μια συλλογή βιβλιοθηκών, εργαλείων και προτύπων. Τι περιλαμβάνεται; Το LitElement είναι ένα πρόγραμμα επεξεργασίας που διευκολύνει τον ορισμό των στοιχείων ιστού, ενώ το lit-html είναι μια βιβλιοθήκη templating HTML που επιτρέπει στους χρήστες να γράφουν πρότυπα HTML επόμενης γενιάς στο JS. Επιπλέον, θα βρείτε επίσης ένα κιτ PWA Starter, την αρχική βιβλιοθήκη Polymer και σύνολα στοιχείων ιστού.

03. Εξερεύνηση API

Η Google διαθέτει μια τεράστια βιβλιοθήκη API για προγραμματιστές, αλλά η εύρεση αυτού που χρειάζεστε δεν είναι εύκολη υπόθεση. Εδώ είναι που Εξερεύνηση API της Google μπαίνει για να προσφέρει ένα χέρι βοήθειας. Υπάρχει μια μεγάλη λίστα που μπορεί να μετακινηθεί, αλλά, για ταχύτερη πρόσβαση, υπάρχει ένα πλαίσιο αναζήτησης για το φιλτράρισμα της λίστας API. Κάθε καταχώριση συνδέεται με μια σελίδα αναφοράς με περισσότερες λεπτομέρειες σχετικά με τον τρόπο χρήσης του API.

04. Φτερουγίσματα

Εργαλεία Google Flutter



Δημιουργήστε όμορφες εφαρμογές με το Flutter(Πιστωτική εικόνα: Flutter)

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

05. Google GitHub

Όπως θα γνωρίζουν οι περισσότεροι, το GitHub είναι η πλατφόρμα / αποθετήριο φιλοξενίας για την αποθήκευση και κοινή χρήση κώδικα και αρχείων. Και ευτυχώς Η Google έχει τη δική της θέση στην πλατφόρμα με πάνω από 260 αποθετήρια για κοσκίνισμα. Χρησιμοποιήστε το φίλτρο για να μειώσετε τον χρόνο αναζήτησης και να πλησιάσετε το αποθετήριο με το οποίο θέλετε να παίξετε ή να συνεισφέρετε.

06. Μαριονέτα

Ενσωματωμένος κόμβος, Μαριονέτα προσφέρει ένα API υψηλού επιπέδου που σας επιτρέπει να έχετε πρόσβαση σε χωρίς κεφαλή Chrome - ουσιαστικά το Chrome χωρίς το περιβάλλον εργασίας χρήστη, το οποίο οι προγραμματιστές μπορούν στη συνέχεια να ελέγχουν μέσω της γραμμής εντολών. Τι μπορείτε λοιπόν να κάνετε με το Puppeteer; Μερικές επιλογές είναι διαθέσιμες για τη δημιουργία στιγμιότυπων οθόνης και PDF σελίδων, την αυτοματοποίηση της υποβολής φόρμας και τη δημιουργία ενός αυτοματοποιημένου περιβάλλοντος δοκιμών.

07. Κουτί εργασίας

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

08. Codelabs

Χρειάζεστε πρακτική καθοδήγηση για ένα προϊόν Google; Codelabs παρέχει «μια καθοδηγημένη, εκπαιδευτική, πρακτική εμπειρία κωδικοποίησης». Ο ιστότοπος χωρίζεται σε κατηγορίες και εκδηλώσεις, καθιστώντας το γρήγορο και εύκολο να βρείτε αυτό που θέλετε. Περιλαμβάνει Analytics, Android, Βοηθό, επαυξημένη πραγματικότητα, Flutter, G Suite, Search, TensorFlow και εικονική πραγματικότητα. Ορίστε μια επιλογή και λάβετε τον κωδικό και τις οδηγίες που χρειάζεστε για να δημιουργήσετε μικρές εφαρμογές.

09. Χρώμα εργαλείο

Εργαλεία Google Chrome

Διαλέξτε μια παλέτα, οποιαδήποτε παλέτα(Πιστωτική εικόνα: Color Tool)

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

10. Σχεδίαση σπριντ

ο Σχεδίαση Sprint Kit είναι για όσους μαθαίνουν πώς να συμμετέχουν ή να τρέχουν σπριντ σχεδιασμού. Φαίνεται να καλύπτει όλες τις βάσεις γνώσεων, από πρώτους έως έμπειρους διαμεσολαβητές σπριντ. Μάθετε σχετικά με τη μεθοδολογία ή μεταβείτε κατευθείαν στο στάδιο του σχεδιασμού, συμπεριλαμβανομένης της σύνταξης συνόλων, της συλλογής δεδομένων και της έρευνας, καθώς και τι πρέπει να κάνετε μετά το σπριντ. Περιλαμβάνει επίσης μια σειρά πόρων όπως εργαλεία, πρότυπα, συνταγές και την επιλογή υποβολής της δικής σας μεθόδου. Επίσης, πιθανότατα θα χρειαστείτε κάπου για να αποθηκεύσετε και να μοιραστείτε πόρους, οπότε βεβαιωθείτε ότι έχετε αποθήκευση στο cloud η επιλογή είναι στο σημείο.

11. Βιβλίο οδηγιών People + AI

Αυτός ο οδηγός είναι το έργο της πρωτοβουλίας People + AI Research στο Google και φαίνεται να προσφέρει βοήθεια σε όσους θέλουν να κατασκευάσουν προϊόντα AI με επίκεντρο τον άνθρωπο. Ο περιεκτικός οδηγός χωρίζεται σε έξι κεφάλαια που καλύπτουν τις ανάγκες των χρηστών, τη συλλογή και αξιολόγηση δεδομένων, τα διανοητικά μοντέλα, την εμπιστοσύνη, τα σχόλια και τη χαριτωμένη αποτυχία. Κάθε κεφάλαιο συνοδεύεται από ασκήσεις, φύλλα εργασίας και τα εργαλεία και τους πόρους που απαιτούνται για την πραγματοποίησή του.

pepsi μηδενική ζάχαρη έναντι μέγιστη pepsi

12. Βοηθός Google

Εργαλεία Google Chrome

Ο Βοηθός του Google βοηθάει πολύ(Πιστωτική εικόνα: Chrome)

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

13. PageSpeed ​​Insights

Πληροφορίες για το PageSpeed αναλύει το περιεχόμενο ιστού και, στη συνέχεια, προσφέρει προτάσεις για το πώς να το κάνει πιο γρήγορο. Απλώς προσθέστε μια διεύθυνση URL, πατήστε το κουμπί ανάλυσης και περιμένετε να συμβεί η μαγεία. Ελέγξτε τα Έγγραφα για να λάβετε μια καλύτερη εικόνα σχετικά με τον τρόπο λειτουργίας του PageSpeed ​​API και πώς να ξεκινήσετε να το χρησιμοποιείτε.

14. AMP στο Google

ΑΜΠΕΡΑΖ είναι το εργαλείο της Google για τη δημιουργία σελίδων για κινητές συσκευές που φορτώνουν γρήγορα και (ελπίζουμε) ότι θα φτάσουν στην κορυφή της κατάταξης αναζήτησης. Μάθετε πώς μπορείτε να δημιουργήσετε γρήγορους ιστότοπους πρώτους χρήστες, να ενσωματώσετε AMP σε προϊόντα Google, να χρησιμοποιήσετε το Google AMP Cache για να κάνετε τις σελίδες AMP ταχύτερες και να δημιουργήσετε έσοδα από σελίδες AMP με άλλα προϊόντα Google.

15. Google DevTools

Εργαλεία Google Chrome

Υπάρχουν πολλά που μπορείτε να κάνετε με τα DevTools(Πιστωτική εικόνα: Chrome)

Κάθε σχεδιαστής και προγραμματιστής γνωρίζει (ή τουλάχιστον πρέπει να γνωρίζει) ότι το Chrome διαθέτει ένα σύνολο εργαλείων ενσωματωμένων απευθείας στο πρόγραμμα περιήγησης. DevTools του Chrome είναι ιδανικά για τον έλεγχο των στοιχείων που αποτελούν μια σελίδα, τον έλεγχο CSS, την επεξεργασία σελίδων εν κινήσει και πολλά άλλα.

Η καρτέλα Στοιχεία είναι η εισαγωγή στο DevTools. Εμφανίζει τον κώδικα HTML που αποτελεί την επιλεγμένη σελίδα. Λάβετε μια εικόνα για τις ιδιότητες κάθε div ή ετικέτας από την επιλεγμένη σελίδα και ξεκινήστε τη ζωντανή επεξεργασία. Αυτό είναι ιδανικό για πειραματισμούς με σχέδια. Ελέγξτε τη διάταξη - αν χρησιμοποιείτε Flexbox ή Grid - και ρίξτε μια ματιά σε σχετικές γραμματοσειρές με παραδείγματα και εξετάστε κινούμενες εικόνες.

Αλλού, μπορείτε να δείτε και να αλλάξετε CSS. Η καρτέλα Στυλ στον πίνακα 'Στοιχεία' παραθέτει τους κανόνες CSS που εφαρμόζονται στο τρέχον επιλεγμένο στοιχείο στο Δέντρο DOM. Ενεργοποιήστε και απενεργοποιήστε τις ιδιότητες (ή προσθέστε νέες τιμές) για να πειραματιστείτε με σχέδια. Αυτό είναι το τέλειο εργαλείο για να διασφαλίσετε ότι όλα λειτουργούν όπως αναμένεται πριν εφαρμόσετε τυχόν αλλαγές στο ζωντανό σχέδιο.

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

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

16. Σχεδιασμός υλικών

Εργαλεία Google Chrome

macbook pro μαλακές θήκες 13 ιντσών
Το υλικό είναι ένα ζωτικό κομμάτι του κιτ σχεδιασμού(Πιστωτική εικόνα: Chrome)

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

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

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

Και οι προγραμματιστές δεν έχουν ξεχαστεί, με λεπτομέρειες και σεμινάρια σχετικά με τον τρόπο δημιουργίας διαφορετικών πλατφορμών - Android, iOS, Web και Flutter. Και, τέλος, υπάρχει μια σελίδα αφιερωμένη σε μια σειρά πόρων για να συμβάλει στην υλοποίηση του επιλεγμένου σχεδιασμού σας.

Αυτό το άρθρο δημοσιεύτηκε αρχικά στο περιοδικό net. Αγορά τεύχος 326 .

Διαβάστε περισσότερα: