Γραφικά προϊόντος 6 Τεχνικές για να κάνουν τις εικόνες πιο ενημερωτικές

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

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

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

1. Αναπτύξτε το περιεχόμενό σας

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

Όταν προσπαθείτε να επιδείξετε ένα εκπαιδευτικό λογισμικό (όπως το εκπαιδευτικό πρόγραμμα Photoshop) μπορεί να είναι δύσκολο να το κάνετε μεταφέρετε το μήνυμα σε γραπτό κείμενο. Οι επισκέπτες θα προσγειωθούν στο άρθρο σας και αμέσως θα αρχίσουν να υποτιμούν συνειδητά το υλικό μέσα σε ένα κλάσμα του δευτερολέπτου. Το Web Designer Wall έχει ένα φανταστικό σεμινάριο για την κατασκευή στρογγυλών εικόνων CSS3 συνοδευόμενων από εύχρηστο γραφικό. Αυτό περιλαμβάνει ορισμένες ετικέτες και μια κοντινή λήψη του αποτελέσματος.

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

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

2. Επισημάνετε τα Σημαντικά Χαρακτηριστικά

Επειδή κάθε κομμάτι του λογισμικού / τεχνολογίας θα έχει τόσες δυνατότητες, είναι σχεδόν αδύνατο να εξηγήσουμε κάθε κομμάτι. Όχι μόνο αυτό, αλλά είναι πολύ απίθανο οι επισκέπτες σας να ενδιαφέρονται να διαβάζουν 20+ ετικέτες στο γραφικό πληροφοριών σας. Προσέξτε τα πιο ενδιαφέροντα χαρακτηριστικά και χρησιμοποιήστε ετικέτες για να εξηγήσετε λίγο περισσότερο σε βάθος.

Όταν γράφετε το αντίγραφο ιστού για το περιεχόμενο της ετικέτας αποφύγετε τη θαμπή γλώσσα όποτε είναι δυνατόν. Αν οι επισκέπτες κοιτάζουν την πιο πρόσφατη έκδοση της αίτησής σας, μπορεί να μην ενδιαφέρονται πολύ για τις αλλαγές στο χρωματικό σύστημα. Πώς αυτό θα επηρεάσει την καθημερινή τους ροή εργασίας; Αντ 'αυτού ίσως υπογραμμίστε τι είναι επωφελής για αυτούς, όπως ένας νέος πίνακας διασύνδεσης ή συνδεσιμότητα πολλαπλών χρηστών. Αυτά θα πρέπει γενικά να είναι αφηρημένα χαρακτηριστικά που δεν μπορείτε να δείτε μόνο από “κοιτάζοντας” στο προϊόν.

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

Ακολουθεί ένα παράδειγμα από τη σελίδα ενημέρωσης του Mozilla Firefox.

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

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

Επίσης, παρατηρήστε πώς η λειτουργία Panorama εμφανίζεται στα αριστερά προσφέρει ένα μικρό “Μάθε περισσότερα” Σύνδεσμος. Αυτή είναι ίσως η καλύτερη πρακτική που μπορείτε να ακολουθήσετε όταν δημιουργείτε γραφικά πληροφοριών! Αν έχετε εναλλακτικές σελίδες ή άγκυρες στην ίδια σελίδα, οι επισκέπτες σας θα μπορούσαν να κάνουν κλικ σε αυτούς τους συνδέσμους για να καταλάβουν περισσότερα σχετικά με περίπλοκα χαρακτηριστικά.

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

3. Απλές, διακριτικές ετικέτες

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

Οι υπολογιστές Apple είναι ίσως το καλύτερο παράδειγμα απλών στοιχείων της ετικέτας. Μπορεί να παρατηρήσετε αυτές τις ακριβείς τεχνικές στα γραφικά σας όταν κοιτάτε πάνω σε ταμπλέτες, φορητούς υπολογιστές ή το περίφημο iPhone. Τα χαρακτηριστικά τους και οι τεχνικές προδιαγραφές τους είναι γενικά οι ίδιοι με τους άλλους κατασκευαστές υπολογιστών μεγάλης μάρκας. Ωστόσο, τα γραφικά μοντέλα τους είναι τόσο αυθεντικά ώστε τα προϊόντα πωλούνται πρακτικά.

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

4. Εικόνα με δυναμικό περιεχόμενο

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

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

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

5. Εκκαθάριση στιγμιότυπων οθόνης και φωτογραφιών προϊόντων

Είναι δυνατόν να συμπεριλάβετε όλες τις καλύτερες ετικέτες και χαρακτηριστικά για τα προϊόντα σας, αλλά εξακολουθείτε να λείπει από τις πωλήσεις. ο τα στιγμιότυπα οθόνης και οι φωτογραφίες που επιλέγετε για το γραφικό σας είναι τελικά εξίσου σημαντικές με όλες τις λεπτότερες λεπτομέρειες. Στα Windows και στο Mac OS X υπάρχουν τρόποι να τραβήξετε στιγμιότυπα οθόνης ολόκληρης της επιφάνειας εργασίας με συντομεύσεις πληκτρολογίου. Χρησιμοποιώντας αυτή τη μέθοδο σε συνδυασμό με κάποια στιγμή στο Photoshop μπορείτε να συγκεντρώσετε πολύ ενδιαφέροντα demos.

Εάν το προϊόν σας είναι πολύ περίπλοκο, θα πρέπει να προσπαθήσετε συνθέτουν μερικές διαφορετικές εικόνες. Το παραπάνω παράδειγμα από τον ιστότοπο του Tweetbot χρησιμοποιεί μπλε κύκλους για να υποδείξει μια ενέργεια χτυπήματος στην εφαρμογή. Αντί για ένα στιγμιότυπο οθόνης με πολλές ετικέτες, μπορείτε να χρησιμοποιήσετε μια μικρή συλλογή εικόνων jQuery για να συνδυάσετε 3-5 διαφορετικά γραφικά. Αυτό σας δίνει περισσότερες ευκαιρίες επικεντρωθεί σε διαφορετικές προοπτικές του προϊόντος ενώ στους επισκέπτες προσφέρεται μια πολύ πλουσιότερη εμπειρία.

Όταν φωτογραφίζετε μια λήψη από τον υπολογιστή ή το smartphone, η εικόνα αποθηκεύεται πάντα με ζουμ 100%. Οι επεξεργαστές εικόνων, όπως το Photoshop, έχουν τη δυνατότητα να ξαναδιαμορφώσουν αυτές τις εικόνες, αλλά συχνά χάνουν λεπτομέρειες. Πώς μπορείτε λοιπόν να τοποθετήσετε ένα τέτοιο γραφικό στην μικρή ιστοσελίδα σας; Μία από τις καλύτερες τεχνικές είναι μεγέθυνση στην οποία κλιμακώνετε την εφαρμογή κάτω και δημιουργείτε μεγεθυμένα τμήματα των πιο σημαντικών κομματιών. Αυτή η τεχνική εμφανίζεται συχνότερα στο λογισμικό από τα φυσικά προϊόντα - Έχω περιγράψει λεπτομερώς τη διαδικασία σχεδιασμού παρακάτω.

6. Δημιουργία εφέ "Zoom Lens"

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

Ένα από τα καλύτερα παραδείγματα αυτής της τεχνικής είναι στην αρχική σελίδα εφαρμογών Things for Mac. Το γραφικό έχει την εφαρμογή μειωμένη μικρό έτσι ώστε να ταιριάζει απόλυτα στη σελίδα, μαζί με μια μικρή σκιά σταγόνα. Ωστόσο, σε μερικούς από τους σημαντικούς τομείς θα παρατηρήσετε έναν κύκλο με το εσωτερικό περιεχόμενο πολύ μεγαλύτερο. Έχουν προσθέσει ακόμη και μια λευκή εσωτερική λάμψη για να εμφανιστεί ως αντανακλασμένο φως που λάμπει μέσα από ένα φακό!

Μπόνους: Εφέ Effect Photoshop Tutorial για το "Zoom Lens"

Για να αρχίσετε να τραβάτε ένα στιγμιότυπο οθόνης που θέλετε να χρησιμοποιήσετε για το γραφικό σας. Έχω λάβει μια γρήγορη οθόνη της αρχικής σελίδας του Hongkiat. Πρόκειται να περικόψω μόνο το παράθυρο του προγράμματος περιήγησης και να αλλάξω το μέγεθος σε περίπου 700px. Πρέπει να αλλάξετε το μέγεθος του πλάτους ώστε να ταιριάζει μέσα στην περιοχή περιεχομένου του ιστοτόπου σας. Τώρα κάντε ένα νέο στρώμα επάνω από αυτό το υπόβαθρο και κάντε μια κυκλική επιλογή ενώ κρατάτε στροφή για να το κρατήσετε ανάλογο. Συμπληρώστε με οποιοδήποτε χρώμα θέλετε.

Βήμα 1

Διατηρώντας τον επιλεγμένο κύκλο, αλλάξτε το% fill στον πίνακα των επιπέδων στο 0%. Κάτω από το στρώμα FX προσθέστε ένα μαύρο εγκεφαλικό επεισόδιο 1px-2px και μια λευκή εσωτερική λάμψη. Μπορείτε να μειώσετε την αδιαφάνεια για λιγότερο λευκό φωτισμό.

Βήμα 2

Ακόμα διατηρώντας τον επιλεγμένο κύκλο μετακινήστε στο στρώμα φόντου σας και πατήστε ctrl (Για χρήστες Mac, είναι εντολή ή κλειδί cmd.) + c για αντιγραφή. Στη συνέχεια, δημιουργήστε ένα νέο στρώμα πάνω από το φόντο, αλλά κάτω από τον μεγεθυντικό κύκλο και επικολλήστε το. Μπορείτε εναλλακτικά να πατήσετε το ctrl + j για να αντιγράψετε ένα νέο στρώμα με μόνο την επιλογή in-tact.

Πατήστε ctrl + t για να ανοίξετε το εργαλείο μετασχηματισμού. Τώρα μεγεθύνετε το νέο διπλότυπο επίπεδο ενώ κρατάτε το βάρδια να κρατήσει τα πάντα αναλογικά και alt για να κρατήσει το κέντρο στάσιμο.

Βήμα 3

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

Πατήστε Ctrl + Shift + i για να αντιστρέψετε την τρέχουσα επιλογή. Τώρα, πατήστε το πλήκτρο διαγραφής για να ξεκαθαρίσετε τα επιπλέον σκουπίδια από το screenshot μας. Για λίγο αποτέλεσμα προσθέστε το μενού στρώματος FX για να προσθέσετε μια μικρή σκιά σταγόνας. Μπορείτε επίσης να σχεδιάσετε μια λεπτή κάθετη γραμμή 1px και χρησιμοποιώντας το φίλτρο Liquify (Φιλτράρισμα> Απορρίμματα) δημιουργούν μια μικρή λαβή!

συμπέρασμα

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

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