Πώς να κάνετε ένα κουμπί "Παραγγελία επανάκλησης. Σχεδιασμός Υλικού: Γιατί ένα Πλωτό Κουμπί Δράσης δεν είναι η Βέλτιστη Πρακτική στο Σχεδιασμό UX
Μέχρι τώρα, έχει γίνει μια ανακάλυψη για όσους εργάζονται με εφαρμογές στην πλατφόρμα Android και σχεδιάζουν διεπαφές χρήστη. Παρουσιάστηκε από την Google πριν από μερικά χρόνια. Ο στόχος του υλικού σχεδιασμού ήταν να δημιουργήσει μια οπτική γλώσσα που θα συνδύαζε τις αρχές του κλασικού σχεδιασμού με την καινοτομία.
Η ιδέα φαίνεται πολλά υποσχόμενη και πολλά υποσχόμενη. Ο σχεδιασμός υλικού είναι η πιο πρόσφατη προσπάθεια να γίνει η εμπειρία χρήστη (UX) άνετη και ταυτόχρονα αποτελεσματική. Η Google έχει κάνει φανταστική δουλειά σε αυτόν τον τομέα: χρησιμοποιεί ένα ελάχιστο σύνολο στοιχείων σχεδίασης, χρησιμοποιεί μοναδικά στοιχεία, φωτεινά χρώματα, κινούμενα σχέδια και δημιουργεί ένα φιλικό προς τον χρήστη περιβάλλον.
Μαζί με αυτό, οι σχεδιαστές εξασκούν το λεγόμενο κουμπί floating action (FAB). Είναι ένα στρογγυλό κουμπί, η εμφάνιση του οποίου είναι πολύ γνωστή στους χρήστες Android. Είναι ένα άλλο χαρακτηριστικό στοιχείο σχεδιασμού υλικού. Το FAB εμφανίζεται στην κορυφή της διεπαφής της εφαρμογής και παρακινεί τους χρήστες να προβούν σε μια συγκεκριμένη στοχευμένη ενέργεια.
Στην πραγματικότητα, το FAB είναι, αφού σκοπός του είναι να πείσει ένα άτομο να κάνει κάτι (για παράδειγμα, να κατεβάσει ή να ανεβάσει συγκεκριμένο περιεχόμενο). Το κουμπί δράσης αιωρούμενου στόχου τοποθετείται συνήθως στη δεξιά γωνία της οθόνης. Είναι πολύ δύσκολο να μην το παρατηρήσετε, καθώς έχει φωτεινό και ελκυστικό σχέδιο. Το FAB παρακινεί τον χρήστη να εκτελέσει τις πιο δημοφιλείς ενέργειες στην εφαρμογή. Ωστόσο, υπάρχουν ορισμένα προβλήματα κατά τη χρήση αυτών των κουμπιών.
Τι συμβαίνει με τα κουμπιά δράσης κυμαινόμενου στόχου;Τα FAB είναι μια έξυπνη προσέγγιση για την παρακίνηση του χρήστη να αναλάβει δράση, επειδή είναι δύσκολο να τα χάσει. Ωστόσο, μπορεί να είναι η λάθος λύση για τον σχεδιασμό της εμπειρίας χρήστη γενικά. Παρακάτω είναι μερικοί λόγοι για τους οποίους τα αιωρούμενα κουμπιά ενεργειών μπορούν να έχουν αρνητικό αντίκτυπο στο UX.
Τα FAB μπορούν να παρεμβαίνουν στους χρήστεςΌπως αναφέρθηκε παραπάνω, τα κουμπιά κινούμενων ενεργειών στόχου τοποθετούνται συνήθως στην κάτω δεξιά γωνία της οθόνης. Στις περισσότερες περιπτώσεις, τοποθετούνται πάνω από το περιεχόμενο της εφαρμογής, επικαλύπτοντας κάποιο μέρος της.
Φυσικά, τα μεγέθη FAB είναι πραγματικά μικρά, επομένως κρύβουν μόνο ένα μικρό μέρος του περιεχομένου από τα μάτια του χρήστη. Ωστόσο, ρίξτε μια ματιά στην εφαρμογή Google Photos (στιγμιότυπα οθόνης παρακάτω), όπου το κουμπί δράσης κυμαινόμενου στόχου καλύπτει ένα σημαντικό μέρος της φωτογραφίας.
Για να δει τι κρύβεται κάτω από το κουμπί, ο χρήστης θα πρέπει να κάνει κύλιση προς τα κάτω στη σελίδα. Τι γίνεται όμως αν βρίσκεται ήδη στο κάτω μέρος της σελίδας; Τότε η κύλιση θα είναι αδύνατη και ο χρήστης θα πρέπει να προσθέσει κάποιο περιεχόμενο για να κάνει ορατό το κρυφό μέρος της φωτογραφίας.
Είναι σημαντικό να αναγνωρίσετε ότι ένα κουμπί δράσης κυμαινόμενου στόχου, παρά το μικρό του μέγεθος, μπορεί να κρύψει μέρος του περιεχομένου της εφαρμογής από τα ανθρώπινα μάτια. Αυτό μπορεί να έχει αρνητικές συνέπειες για την εμπειρία του χρήστη.
Ο σχεδιασμός τους αποτρέπει την πλήρη βύθισηΤα κουμπιά δράσης κυμαινόμενου στόχου ξεχωρίζουν αισθητά στο γενικό φόντο. Σε πολλές περιπτώσεις, αυτό δημιουργεί εμπόδια στην εφαρμογή του πιο σημαντικού χαρακτηριστικού της εμπειρίας χρήστη - της πλήρους βύθισης στην ατμόσφαιρα της εφαρμογής.
Και πάλι, η εφαρμογή Φωτογραφίες της Google χρησιμεύει ως παράδειγμα. Όταν ένα άτομο το ανοίγει, μπαίνει στη συλλογή του χρήστη, όπου μπορεί απλά να δει τις φωτογραφίες. Σε αυτήν την περίπτωση, η λειτουργία αναζήτησης, η οποία αντιπροσωπεύεται από το FAB, μπορεί να είναι χρήσιμη, αλλά δεν αποτελεί προτεραιότητα.
Το κουμπί δράσης αιωρούμενου στόχου τον αποσπά από την έντονη προβολή φωτογραφιών καταλαμβάνοντας χώρο στην οθόνη και αποκλείοντας ορισμένα μέρη των εικόνων. Σε τέτοιες περιπτώσεις, το κουμπί δεν πρέπει να ξεχωρίζει τόσο πολύ.
Μπορεί να είναι άχρησταΌπως εξηγούν οι ίδιοι οι ειδικοί της Google, ένα αιωρούμενο κουμπί προτρέπει τον χρήστη να προβεί σε μια στοχευμένη ενέργεια. Ωστόσο, οι προγραμματιστές μερικές φορές ξεχνούν πόσο συχνά ένα άτομο εκτελεί αυτήν την ενέργεια ενώ χρησιμοποιεί την εφαρμογή.
Ο χρυσός κανόνας του σχεδιασμού της εμπειρίας χρήστη είναι να διατηρείται ορατά σημαντικά και συχνά χρησιμοποιούμενα στοιχεία και σχεδόν αόρατα τα στοιχεία που χρησιμοποιούνται σπάνια. Ωστόσο, όπως μπορούμε να δούμε στο παράδειγμα της εφαρμογής Gmail (στιγμιότυπο οθόνης παραπάνω), οι προγραμματιστές δεν έλαβαν υπόψη αυτόν τον κανόνα.
Στην οθόνη της εφαρμογής, βλέπουμε ένα κουμπί, κάνοντας κλικ στο οποίο, ο χρήστης μπορεί γρήγορα να προχωρήσει στη σύνταξη ενός email. Ωστόσο, σύμφωνα με πρόσφατες έρευνες, περίπου οι μισοί χρήστες βλέπουν αλληλογραφία μόνο χρησιμοποιώντας κινητές συσκευές. Με άλλα λόγια, δεν γράφουν συχνά γράμματα χρησιμοποιώντας smartphone ή tablet.
Ο πελάτης δεν ήθελε να συνδέσει τέτοια λειτουργικότητα. Απλώς χρειαζόταν ένα κουμπί, αφού πατήσει στο οποίο, θα εμφανιζόταν ένα παράθυρο με μια φόρμα παραγγελίας. Τα κουμπιά επανάκλησης είναι ένα πολύ χρήσιμο πράγμα. Χάρη σε αυτά, ένα άτομο μπορεί να παραγγείλει μια κλήση στον εαυτό του χωρίς να ξοδέψει τα χρήματά του, κάτι που είναι σημαντικό για το άτομό μας :). Μάλιστα, ένα τέτοιο κουμπί μπορεί να κατασκευαστεί τόσο για την επιστροφή στην κορυφή της σελίδας όσο και για το κουμπί βοήθειας κ.λπ. Το κύριο στοιχείο εδώ θα είναι - animation, παλλόμενο εφέ.
09/09/2016 Προστέθηκε ένα νέο κουμπί, το εφέ κυματισμού δεν λειτούργησε στο παλιό στο νέο Chrome.
Η εγκατάσταση ενός κινούμενου κουμπιού στον ιστότοπό σας είναι πολύ εύκολη. Όλα τα κινούμενα σχέδια γίνονται με CSS, χωρίς πρόσθετα σενάρια και πρόσθετα. Αν και υπάρχει πολύς κώδικας, όλα είναι αρκετά απλά.
ΑΓΑΠΗΤΕ ΔΑΣΤΕΡΑ! Έχετε τη συνείδησή σας, εάν χρησιμοποιείτε αυτό το κουμπί, τότε τουλάχιστον ανεβάστε την εικόνα του ακουστικού στη φιλοξενία σας και μην αντιγράψετε ανόητα τον σύνδεσμο στον ιστότοπό μου. Θα δοξάσω τέτοιους τεχνίτες και τις τοποθεσίες τους σε ολόκληρο το Διαδίκτυο 🙂
Πρώτα πρέπει να προσθέσετε σήμανση HTML. Θα έχουμε κανονικό σύνδεσμο. Στη σωστή θέση στον ιστότοπό σας, στην κεφαλίδα ή στο υποσέλιδο, εισαγάγετε την ακόλουθη γραμμή.
Το κουμπί έχει σχεδιαστεί για τη σύνδεση ενός παραθύρου τροπικού τρόπου από άλλο άρθρο. Εάν συνδέετε συνδέσμους τρίτων, τότε το ίδιο το κουμπί έχει ένα συμβάν στον κώδικα HTML του
onclick="return false"
Τώρα πρέπει να προσθέσουμε τα στυλ CSS στο αρχείο στυλ.
#popup__toggle(bottom:25px;right:10px;position:fixed;z-index:999;) .img-circle(background-color:#29AEE3;box-sizing:content-box;-webkit-box-sizing:content -box;) .circlephone(box-sizing:content-box;-webkit-box-sizing:content-box;border: 2px solid #29AEE3;width:150px;ύψος:150px;κάτω:-25px;δεξιά:10px; position:absolute;-webkit-border-radius:100%;-moz-border-radius: 100%;border-radius: 100%;opacity: .5;-webkit-animation: circle-anim 2.4s infinite ease-in -out !important;-moz-animation: circle-anim 2.4s infinite ease-in-out !important;-ms-animation: circle-anim 2.4s infinite ease-in-out !important;-o-animation: κύκλος- anim 2.4s infinite ease-in-out !important;animation: circle-anim 2.4s infinite ease-in-out !important;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition : all .5s; transition: all 0.5s;) .circle-fill(box-sizing:content-box;-webkit-box-sizing:content-box;background-color:#29AEE3;width:100px;height:100px ;bottom:0px;right:35px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;-webkit-animation : circle-fill-anim 2.3s infinite ease-in-out;-moz-animation: circle-fill-anim 2.3s infinite ease-in-out;-ms-animation: circle-fill-anim 2.3s infinite ease-in -out;-o-animation: circle-fill-anim 2.3s infinite ease-in-out;animation: circle-fill-anim 2.3s infinite ease-in-out;-webkit-transition: all .5s;-moz- transition: all .5s;-o-transition: all .5s;transition: all 0.5s;) .img-circle(box-sizing:content-box;-webkit-box-sizing:content-box;width:72px; ύψος:72px;κάτω: 14px;δεξιά: 49px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px στερεό διαφανές;αδιαφάνεια : .7;) .img-circleblock(box-sizing:content-box;-webkit-box-sizing:content-box;width:72px;height:72px;background-image:url(images/mini.png); φόντο-θέση: κέντρο κέντρο;background-repeat:no-repeat;animation-name: tossing;-webkit-animation-name: tossing;animation-duration: 1,5s;-webkit-animation-duration: 1,5s;animation-itation -count: infinite;-webkit-animation-iteration-count: infinite;) .img-circle:hover(opacity: 1;) @keyframes παλμός (0% (μετατροπή: κλίμακα(0.9); αδιαφάνεια: 1;) 50% (μετασχηματισμός: κλίμακα(1); αδιαφάνεια: 1 ) 100% (μετατροπή: κλίμακα(0,9); αδιαφάνεια: 1;)) παλμός @-webkit-keyframes (0% (-webkit-transform: κλίμακα(0,95); αδιαφάνεια: 1;) 50% (-webkit-transform: κλίμακα(1);αδιαφάνεια: 1;) 100% (-webkit-transform: scale(0.95); αδιαφάνεια: 1;)) @keyframes tossing ( 0% (transform: rotate(-8deg);) 50% (transform: rotate(8deg);) 100% (transform: rotate(-8deg);)) @-webkit-keyframes tossing ( 0% (-webkit-transform: rotate(-8deg);) 50% (-webkit-transform: rotate (8deg);) 100% (-webkit-transform: rotate(-8deg);)) @-moz-keyframes κύκλος-anim ( 0% (-moz-transform: rotate(0deg) scale(0. 5) λοξή (1 μοίρες); αδιαφάνεια: .1;-moz-αδιαφάνεια: 0.1;-κιτ ιστού-αδιαφάνεια: 0.1;-ο-αδιαφάνεια: 0.1;) 30% (-moz-transform: περιστροφή (0 deg) κλίμακα (0,7) λοξή (1 deg); αδιαφάνεια: .5;-moz-αδιαφάνεια: .5;-webkit-αδιαφάνεια: .5;-o-αδιαφάνεια: 0.5;) 100% (-moz-transform: περιστροφή (0 deg) scale(1) skew(1deg);αδιαφάνεια: .6;-moz-opacity: .6;-webkit-opacity: .6;-o-opacity: .1;)) @-webkit-keyframes κύκλος-anim ( 0 % (-webkit-transform: rotate(0deg) scale(0.5) scw(1deg);-webkit-opacity: .1;) 30% (-webkit-transform: rotate(0deg) scale(0.7) λοξό(1deg)); -webkit-opacity: .5;) 100% (-webkit-transform: rotate(0deg) scale(1) skew(1deg);-webkit-opacity: .1;)) @-o-keyframes κύκλος-anim ( 0 % (-o-μετασχηματισμός: περιστροφή (0 μοίρες) kscale(0,5) λοξή (1 deg);-o-αδιαφάνεια: 0,1;) 30% (-o-μετασχηματισμός: περιστροφή (0 deg) κλίμακα (0,7) λοξή (1 deg); -o-αδιαφάνεια: 0,5;) 100% (-o-transform: rotate(0deg) scale(1) skew(1deg);-o-opacity: .1;)) @keyframes circle-anim ( 0% (transform : περιστροφή (0 μοίρες) κλίμακα (0,5) λοξή (1 μοίρες); αδιαφάνεια: 0,1;) 30% (μετασχηματισμός: περιστροφή (0 μοίρες) κλίμακα (0,7) λοξή (1 μοίρα); αδιαφάνεια: 0,5;) 100% (μετασχηματισμός: περιστροφή (0deg) κλίμακα(1) λοξή(1deg); αδιαφάνεια: .1;)) @-moz-keyframes circle-fill-anim ( 0% (-moz-transform: rotate(0deg) scale(0.7) skew(1deg); αδιαφάνεια: .2;) 50% (-moz -transform: rotate(0deg) -moz-scale(1) skew(1deg); αδιαφάνεια: 0.2;) 100% (-moz-transform: rotate(0deg) scale(0.7) skew(1deg); αδιαφάνεια: 0.2 ;)) @-webkit-keyframes κύκλος-γέμισμα-anim ( 0% (-webkit-transform: rotate(0deg) scale(0.7) skew(1deg)); (0 deg) κλίμακα(1) λοξή(1deg); αδιαφάνεια: 0.2; ) 100% (-webkit-transform: rotate(0deg) scale(0.7) λοξή(1deg); αδιαφάνεια: .2;)) @-o- keyframes circle-fill-anim ( 0% (-o-transform: rotate(0deg) scale(0.7) skew(1deg); αδιαφάνεια: .2;) 50% (-o-transform: rotate(0deg) scale(1)) skew(1deg); αδιαφάνεια: 0.2;) 100% (-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: 0.2;)) @keyframes circle-fill-anim ( 0% ( μετασχηματισμός: περιστροφή (0 μοίρες) κλίμακα (0,7) λοξή (1 μοίρες); αδιαφάνεια: 0,2;) 50% (μετασχηματισμός: περιστροφή (0 μοίρες) κλίμακα (1) λοξή (1 μοίρες); αδιαφάνεια: 0,2;) 100% (μετασχηματισμός: περιστροφή (0 μοίρες) κλίμακα (0,7) λοξή (1 μοίρες); αδιαφάνεια: 0,2;))
Οι πρώτες 7 γραμμές είναι υπεύθυνες για την εμφάνιση του κουμπιού και μετά το animation. Στην πρώτη γραμμή, μπορείτε να ορίσετε τη θέση του κουμπιού και στην έκτη γραμμή, να καθορίσετε τη διαδρομή προς την εικόνα στην παράμετρο background-image:url(mini.png).
Αυτό είναι το μόνο που χρειάζεστε για να εγκαταστήσετε ένα τέτοιο κουμπί. Εάν κατανοείτε το CSS, μπορείτε να προσαρμόσετε το κουμπί και, εάν είναι απαραίτητο, να το αλλάξετε εντελώς ώστε να ταιριάζει στις ανάγκες και το στυλ του ιστότοπού σας.
Για να συνδέσετε ένα modal παράθυρο σε αυτό το κουμπί, το άρθρο θα σας βοηθήσει -. Εάν τα κάνετε όλα σύμφωνα με τις οδηγίες, δεν θα έχετε προβλήματα.
Αυτό είναι όλο, ευχαριστώ για την προσοχή σας. 🙂
ΥΣΤΕΡΟΓΡΑΦΟ.
Αποφάσισα να δημιουργήσω ένα πρόσθετο που θα σας βοηθήσει να έχετε το επιθυμητό αποτέλεσμα χωρίς κανένα πρόβλημα. Μπορείτε να πάτε να δείτε:
Το αιωρούμενο κουμπί είναι ένας νέος τρόπος για να προσθέσετε μια έρευνα, μια διαφήμιση ή κάποιο άλλο πρόσθετο περιεχόμενο χωρίς να προσθέσετε αλλαγές στον σχεδιασμό του ιστότοπού σας. Η λειτουργικότητα όλων αυτών υλοποιείται ως αιωρούμενο κουμπί στον ιστότοπό σας και αφού κάνετε κλικ στο κουμπί, θα ανοίξει ένα πρόσθετο παράθυρο modal με το απαραίτητο περιεχόμενο. Για να βελτιώσετε τη χρηστικότητα, μπορείτε να χρησιμοποιήσετε τον πίνακα διαχείρισης, τις ρυθμίσεις και τις επιλογές πλοήγησης, καθώς και ορισμένα δεδομένα για στατιστικά και αναλυτικά στοιχεία.
Η προσθήκη κουμπιού wordpress που ονομάζεται Floating button θα προσθέσει ένα τέτοιο αιωρούμενο κουμπί στον ιστότοπό σας.
Το πρόσθετο εγκαθίσταται με τον ίδιο τρόπο όπως οποιοδήποτε άλλο: μεταβείτε στην ενότητα "Προσθήκες" - "Προσθήκη νέου". Στη συνέχεια, στη γραμμή αναζήτησης, εισάγουμε το κουμπί Floating και το εγκαθιστούμε.
ΣύνθεσηΜετά την εγκατάσταση, μια πρόσθετη καρτέλα Κυμαινόμενο κουμπί εμφανίζεται στα δεξιά στην κονσόλα διαχείρισης του ιστότοπού σας στο WordPress:
Κάντε κλικ σε αυτό και ξεκινήστε τη διαμόρφωση του αιωρούμενου κουμπιού:
1. Κατάσταση κουμπιού - ενεργοποιήστε και απενεργοποιήστε την οθόνη του κουμπιού.
2. Πηγή ρυθμίσεων - αυτή η ρύθμιση είναι υπεύθυνη για την περαιτέρω λειτουργικότητα του πρόσθετου. Εάν επιλέξετε "Τοπικές ρυθμίσεις", τότε η λειτουργικότητα θα είναι πολύ περιορισμένη, επομένως συνιστάται να επιλέξετε τη δεύτερη επιλογή "Ρυθμίσεις από το probtn.com".
3. Τώρα πρέπει να εγγραφείτε στον ιστότοπο των προγραμματιστών plugin - αυτό δεν θα πάρει πολύ χρόνο, αλλά η λειτουργικότητα του κουμπιού wordpress θα επεκταθεί σημαντικά.
Εγγραφή στον ιστότοπο προγραμματιστήΠηγαίνουμε στη σελίδα https://admin.probtn.com/login/new και συμπληρώνουμε τη διεύθυνση email, το όνομα χρήστη και τον κωδικό πρόσβασης και κάνουμε κλικ στο κουμπί "Δημιουργία":
Αυτό ολοκληρώνει την εγγραφή, προχωράμε σε περαιτέρω ρυθμίσεις του πρόσθετου, αλλά ήδη απευθείας στον ιστότοπο στον οποίο μόλις εγγραφήκαμε.
Μετά την εγγραφή και την είσοδο στον ιστότοπο, βλέπουμε την ακόλουθη σελίδα:
Τα δύο κουμπιά στο κάτω μέρος είναι υπεύθυνα για τη δημιουργία ενός αιωρούμενου κουμπιού, το δεύτερο για τη δημιουργία μιας δημοσκόπησης που θα εμφανιστεί όταν κάνετε κλικ στο αιωρούμενο κουμπί.
Ας ξεκινήσουμε με τη δημιουργία, οπότε κάντε κλικ στο "Create Floating Button". Αρχικά, καθορίζουμε το όνομα του κουμπιού:
Σημειώστε ότι μπορείτε να επιλέξετε ένα εικονίδιο από τον υπολογιστή σας ή να παράσχετε έναν σύνδεσμο προς μια εικόνα. Για ομορφιά, συνιστάται η χρήση μιας εικόνας με ένα μικρό διαφανές φόντο.
Στο επόμενο στάδιο, επιλέγουμε την πλατφόρμα για την εμφάνιση του κουμπιού. Εγκαταστήσαμε το πρόσθετο στον ιστότοπο, επομένως θα επιλέξουμε την επιλογή εμφάνισης στον τομέα, την οποία θα καθορίσουμε:
Ολοκληρώνουμε την αρχική ρύθμιση πατώντας το κουμπί «Υποβολή».
Καθορίστε την ενέργεια αφού κάνετε κλικ στο αιωρούμενο κουμπί και συνεχίστε τη ρύθμιση της προσθήκηςΜετά τη δημιουργία, το κουμπί μας εμφανίζεται στην κονσόλα στα αριστερά:
Στην ενότητα ΕΡΓΑΛΕΙΟ, καθορίστε τη διεύθυνση που θα ανοίξει σε ένα αναδυόμενο παράθυρο αφού κάνετε κλικ στο κουμπί:
Ή καθορίζουμε μια έρευνα που μπορεί να δημιουργηθεί κάνοντας κλικ στο σύνδεσμο "Δημιουργία έρευνας":
Αποθηκεύουμε όλες τις αλλαγές που έγιναν σε κάθε βήμα. Ένα αιωρούμενο κουμπί που είναι εγκατεστημένο στον ιστότοπο μπορεί να μοιάζει με αυτό:
Και όταν κάνετε κλικ σε αυτό, εμφανίζεται το ακόλουθο αναδυόμενο παράθυρο:
Υπάρχουν πολλές επιλογές για τη χρήση αυτής της προσθήκης WordPress: μπορείτε να δημιουργήσετε μια ξεχωριστή σελίδα στην οποία θα τοποθετήσετε μια διαφήμιση, μια έρευνα ή οποιεσδήποτε πληροφορίες δεν μπορούν να χωρέσουν στο σχεδιασμό του ιστότοπου. Γενικά οτιδήποτε!
ΥΣΤΕΡΟΓΡΑΦΟ εάν χρειάζεστε βοήθεια για τη ρύθμιση ή την εγκατάσταση, γράψτε τις ερωτήσεις σας στα σχόλια. Η βοήθεια είναι δωρεάν!
Γεια σας αγαπητοί επισκέπτες!
Συνεχίζω να δημοσιεύω τεχνικά άρθρα.
Και σήμερα θα αγγίξω ένα ενδιαφέρον θέμα στο οποίο θα συζητήσουμε το κουμπί για κύλιση στην κορυφή της σελίδας στον ιστότοπο. Θα μιλήσουμε για τη σημασία αυτού του κουμπιού, όπως μου αρέσει να κάνω. Θα δείξω επίσης τις πιο ενδιαφέρουσες και αποτελεσματικές υλοποιήσεις αυτής της συνάρτησης.
ΧρειάζεστεΝομίζω ότι δεν αξίζει να δείξω πώς φαίνεται στους ιστότοπους, αφού σχεδόν κάθε πόρος το έχει. Αυτό είναι ένα απλό κουμπί με ένα επάνω βέλος ή μια λέξη που, όταν κάνετε κλικ, θα σας μεταφέρει γρήγορα στην ανώτατη περιοχή του ιστότοπου.
Αυτή η λειτουργία είναι ένα συγκεκριμένο στοιχείο που, σε ορισμένες περιπτώσεις, βελτιώνει τη χρηστικότητα του ιστότοπου. Σε ποιες περιπτώσεις, θα αναλύσουμε τώρα μαζί σας.
Η πρώτη πιο σημαντική και ίσως η μοναδική περίπτωση που χρειάζεται το κουμπί επάνω είναι η παρουσία τεράστιου όγκου περιεχομένου στη σελίδα. Εάν η σελίδα είναι μεγάλη, τότε είναι μάλλον δύσκολο να μετακινηθείτε στην κορυφή.
Είτε πρέπει να χρησιμοποιήσετε τη γραμμή κύλισης, κάτι που λίγοι άνθρωποι χρησιμοποιούν. Τουλάχιστον δεν το χρησιμοποιώ καθόλου, καθώς αυτή είναι μια επιπλέον κίνηση του ποντικιού και δεν είναι πολύ βολικό. Ή πρέπει να γυρίσετε το βίντεο στο ποντίκι, το οποίο είναι πολύ μεγάλο και ενοχλητικό με την πάροδο του χρόνου.
Επομένως, εάν ο ιστότοπός σας έχει πραγματικά μεγάλα άρθρα, τότε το κουμπί μπορεί να εγκατασταθεί, αλλά πρέπει να το κάνετε έτσι ώστε να είναι εύκολο να κάνετε κλικ σε αυτό και είναι πιο εύκολο να το κάνετε από το να περιστρέψετε το βίντεο ή να χρησιμοποιήσετε τη γραμμή κύλισης στο πρόγραμμα περιήγησης. Σε μια άλλη περίπτωση, ποια θα ήταν η χρησιμότητα του εάν ήταν ισοδύναμο με τυπικές ενέργειες;
Με βάση αυτό, υπάρχουν τα πιο κοινά και πιο ισχυρά κουμπιά κύλισης προς τα πάνω που λειτουργούν πραγματικά. Μία από αυτές τις επιλογές είναι το κουμπί επάνω, όπως στο κοινωνικό δίκτυο Vkontakte. Προχωράμε στην εφαρμογή αυτής της μεθόδου.
Κουμπί επάνω, όπως το VkontakteΈνα χαρακτηριστικό γνώρισμα αυτού του κουμπιού είναι η ευκολία χρήσης του. Μοιάζει με μια γραμμή κύλισης στην αριστερή πλευρά του ιστότοπου, η οποία καταλαμβάνει όλο το ύψος του πόρου.
Αυτή η επιλογή έχει ήδη αποδειχθεί, καθώς δεν υπάρχουν πρακτικά χρήστες που να μην τη χρησιμοποιούν στα κοινωνικά δίκτυα. Δίκτυα Vkontakte. Αυτή η υλοποίηση είναι βολική στο ότι δεν χρειάζεται να στοχεύσετε τον κέρσορα του ποντικιού σε κάποιο κουμπί. Απλώς κάντε κλικ στην αριστερή περιοχή του ιστότοπου και η σελίδα θα μετακινηθεί στην κορυφή. Δεν χρειάζεται καν να ακολουθήσετε τον κέρσορα, μπορείτε απλά να μετακινήσετε το ποντίκι στην άκρη της οθόνης και να κάνετε κλικ μία φορά.
Δεν θα λειτουργήσει για να κάνετε την ίδια ακριβώς υλοποίηση με το Vkontakte, αλλά εδώ είναι μια κατά προσέγγιση έκδοση - εύκολα.
Για να το εφαρμόσετε, απλά πρέπει να τοποθετήσετε το σενάριο στον ιστότοπο.
Για να φορτώσετε το σενάριο, μπορείτε να τοποθετήσετε τον ίδιο τον κώδικα ανάμεσα στις ετικέτες ή πριν από την ετικέτα κλεισίματος στο αρχείο footer.php. Ή μπορείτε απλώς να ανεβάσετε το αρχείο με το σενάριο στη φιλοξενία και, στη συνέχεια, απλώς να ανεβάσετε το αρχείο στον ιστότοπο.
Εάν θέλετε να τοποθετήσετε το σενάριο και να μην υποφέρετε από τη λήψη, τότε σας δίνω τον ίδιο τον κώδικα του σεναρίου.
JavaScript
$(document).ready(function() ( $("body").append("^ Top"); $ (window).scroll (function () ( if ($ (this).scrollTop () > 300) ( $ (".button-up").fadeIn(); ) else ($ (".button-up").fadeOut(); ) )); $(".button-up").click(function( )( $("body,html").animate(( scrollTop: 0 ), 100); return false; )); $(".button-up").hover(function() ( $(this).animate (( "opacity":"1", )).css(("background-color":"#E1E7ED","color":"#45688E")); ), function()( $(this).animate (( "opacity":"0.7" )).css(("background":"none","color":"#45688E");; )); ));
$(έγγραφο) . έτοιμο(συνάρτηση()( $("σώμα" ) . append("^ Επάνω" ); $(παράθυρο) . scroll(function()( αν ($ (αυτό ). scrollTop () > 300 ) ( $(".button-up") . ξεθωριάζω(); ) άλλο ( $(".button-up") . fadeout(); } ) ; $(".button-up") . κλικ(συνάρτηση()( $("body,html") . έμψυχος(( κύλιση Επάνω : 0 } , 100 ) ; επιστροφή ψευδής ; } ) ; $(".button-up" ) . hover(function()( $(αυτό) . έμψυχος(( "αδιαφάνεια" : "1" , ) ) . css (( "background-color" : "#E1E7ED" , "color" : "#45688E" ) ; ) , λειτουργία () ( $(αυτό) . έμψυχος(( "αδιαφάνεια" : "0,7" ) ) . css (( "background" : "none" , "color" : "#45688E" ) ; ; } ) ; } ) ;
|
Σε αυτόν τον κώδικα, μπορείτε να αλλάξετε ορισμένες παραμέτρους για τον εαυτό σας.
- Η γραμμή 4 είναι υπεύθυνη για την εμφάνιση της ίδιας της περιοχής για την κύλιση της σελίδας. Περιέχει τα βασικά στυλ για την εμφάνιση του κουμπιού. Κατ 'αρχήν, αυτές οι παράμετροι πρέπει να ταιριάζουν σχεδόν σε όλους. Αλλά ίσως χρειαστεί να τα επεξεργαστείτε μόνοι σας.
- Στη γραμμή 7, μέσα σε παρένθεση, υπάρχει ο αριθμός 300, ο οποίος είναι υπεύθυνος για τη στιγμή που εμφανίζεται το κουμπί. Δηλαδή, το κουμπί θα εμφανιστεί μόνο μετά από κύλιση προς τα κάτω κατά 300 pixel. Συνιστώ να επιλέξετε μια τιμή εδώ, ώστε η κύλιση να είναι δυνατή μόνο όταν το κύριο μενού του ιστότοπου ή κάποια άλλα σημαντικά στοιχεία στην πλοήγηση εξαφανιστούν από την προβολή.
- Στη γραμμή 17, η τιμή 100 είναι η ταχύτητα κύλισης. Όσο μικρότερη είναι η τιμή, τόσο πιο γρήγορη είναι η επιστροφή στην κορυφή της σελίδας.
Αυτός ο κώδικας μπορεί να τοποθετηθεί ανάμεσα στις ετικέτες στο επάνω μέρος του ιστότοπου. Εάν ο ιστότοπος είναι σε WordPress, τότε αυτή η περιοχή βρίσκεται στο αρχείο προτύπου header.php. Μπορεί επίσης να τοποθετηθεί πριν από την ετικέτα κλεισίματος στο κάτω μέρος του ιστότοπου (αρχείο footer.php). Προτείνω την τελευταία επιλογή, καθώς θα επιταχύνει τη φόρτωση του ιστότοπου. Θα μοιάζει με αυτό.
Μια ακόμη πιο αποτελεσματική επιλογή είναι να φορτώσετε αυτό το σενάριο από ένα ξεχωριστό αρχείο. Μπορείτε να κατεβάσετε το αρχείο από το παρακάτω κουμπί. Βρίσκεται μέσα στο αρχείο.
Στη συνέχεια, ανεβάστε αυτό το αρχείο στη φιλοξενία. Μπορείτε να το ανεβάσετε στο φάκελο θεμάτων ή μπορείτε να το ανεβάσετε στη ρίζα του ιστότοπου. Κατά παράδοση, το κάνω αυτό στον φάκελο προτύπου. Στη συνέχεια θα πρέπει να γράψετε στο ίδιο σημείο τον κώδικα που θα φορτώσει αυτό το αρχείο. Για να το κάνετε αυτό, χρησιμοποιήστε την ακόλουθη γραμμή.
JavaScript
|
Σε αυτό, θα χρειαστεί να αντικαταστήσετε τη διαδρομή προς το αρχείο με τη δική σας στη δεύτερη γραμμή. Στη συνέχεια, επικολλήστε αυτόν τον κωδικό στην ίδια περιοχή πριν από την ετικέτα κλεισίματος όπως φαίνεται παρακάτω.
Μετά την επεξεργασία του αρχείου, αν το κάναμε σε υπολογιστή, το ανεβάζουμε στο hosting με την αντικατάσταση του αρχικού αρχείου. Μετά από αυτό, ένα απλό κουμπί επάνω στον ιστότοπό σας θα λειτουργήσει.
Για να επεξεργαστείτε τις παραμέτρους σε αυτό το αρχείο, πρέπει να το ανοίξετε με το πρόγραμμα επεξεργασίας Σημειωματάριο.
Αυτή η επιλογή είναι πολύ καλή για την απλότητά της, τόσο στη λειτουργία όσο και στην εγκατάσταση στον ιστότοπο. Μια πιο προηγμένη επιλογή είναι όταν, εκτός από την κύλιση προς τα πάνω, είναι δυνατή η επιστροφή στο μέρος από το οποίο έγινε η κύλιση. Είναι αυτή η επιλογή που εφαρμόζεται στο κοινωνικό. Δίκτυα Vkontakte. Πώς να το κάνετε, δείτε παρακάτω.
Η δεύτερη μέθοδος κουμπιού επάνω από το VkontakteΣύμφωνα με αυτή τη μέθοδο, κατέγραψα ένα λεπτομερές εκπαιδευτικό βίντεο.
Αυτή η επιλογή είναι τώρα στο ιστολόγιό μου. Δεν έχω καταφέρει ακόμα να αναλύσω τη χρησιμότητά του. Αλλά, αν σταθεί σε έναν από τους γίγαντες του Runet, τότε μπορούμε με ασφάλεια να υποθέσουμε ότι υπάρχει κάποια αίσθηση από αυτόν. Φυσικά, σε μια τέτοια κλίμακα, αυτό είναι άσκοπο. Αλλά σε έναν μικρό πόρο, μπορείτε να σκεφτείτε προσεκτικά πριν τον εγκαταστήσετε. Κοιτάζω όμως το μέλλον, γι' αυτό πήρα μια τέτοια απόφαση.
Η εφαρμογή της δεύτερης μεθόδου είναι λίγο πιο περίπλοκη, αλλά η διαδικασία θα πρέπει να σας είναι ήδη γνωστή εάν έχετε κάνει άλλες τεχνικές πτυχές στον πόρο σας.
Αποτελείται από 3 στάδια:
Αρχικά, πρέπει να τοποθετήσουμε ένα σενάριο που θα κάνει την κύλιση ομαλή και θα αλλάξει το χρώμα κατά την τοποθέτηση του δείκτη, τόσο της ίδιας της περιοχής όσο και του χρώματος της κουκουβάγιας "Επάνω", ανάλογα με την απόσταση κύλισης της σελίδας προς τα κάτω.
Μπορείτε να ακολουθήσετε 2 τρόπους, όπως στην πρώτη περίπτωση. Είτε τοποθετήστε το ίδιο το σενάριο στην επιθυμητή περιοχή (δείτε την παραπάνω παράγραφο) είτε φορτώστε το σενάριο μέσω ενός αρχείου. Επιπλέον, θα κάνουμε τα πάντα μέσω της δεύτερης μεθόδου, ώστε να είναι αποτελεσματική.
Κάντε λήψη του αρχείου σεναρίου χρησιμοποιώντας το παρακάτω κουμπί.
Τοποθετείτε το αρχείο στη φιλοξενία και ανεβάζετε το αρχείο μέσω του κώδικα στο κάτω μέρος του ιστότοπου, όπως κάνατε πριν. Το όνομα του αρχείου είναι ακριβώς το ίδιο όπως στην 1η μέθοδο, ώστε να μπορείτε να πάρετε την ίδια γραμμή κώδικα για έξοδο.
⇓ Πίσω ⇑ Επάνω
< div class = "leftbar-wrap" > < a href = "#0" id = "scroll-back" > < span class = "active-area" > < span class = "bar-desc-niz" >⇓Πίσω< / span > < / span > < / a > < a href = "#" class = "left-controlbar" > < span class = "active-area" > < span class = "bar-desc-top" >⇑ Πάνω< / span > < / span > < / a > |
Μπορείτε να το τοποθετήσετε στο κάτω μέρος του ιστότοπου, πριν από την ετικέτα κλεισίματος στο αρχείο footer.php.
Στη συνέχεια καταχωρούμε τα στυλ σχεδίασης στο αρχείο στυλ μας (style.css) και ανεβάζουμε όλα τα αλλαγμένα αρχεία στη φιλοξενία. Εδώ είναι τα στυλ.
/* περιγραφή του κοντέινερ */.leftbar-wrap ( θέση: σταθερό; ύψος: 100%; επάνω: 0; πλάτος: 99 px !important; αριστερά: 0; ) /* περιγραφή του επάνω κουμπιού */.left-controlbar ( ύψος : 100%; οθόνη: μπλοκ; διακόσμηση κειμένου: κανένα; ) /* περιγραφή του κουμπιού πίσω */#scroll-back ( εμφάνιση: μπλοκ; ύψος: 100%; επάνω: 0; εμφάνιση: κανένα; στοίχιση κειμένου: κέντρο; ) /* περιγραφή της στήλης χρώματος φόντου και για τα δύο κουμπιά */.active-area ( πλάτος: 100 εικονοστοιχεία; ύψος: 100%; εμφάνιση: μπλοκ; στοίχιση κειμένου: κέντρο; ) /* ορίστε τη διαφάνεια χρώματος φόντου όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τις σελίδες της ενεργής περιοχής */.leftbar-wrap:hover .active-area ( φόντο: #E1E7ED !important; opacity:0.7 !important; ) /* κάντε την επισήμανση λίγο πιο φωτεινή όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την ετικέτα */.leftbar- wrap .active-area:hover ( ) /* στο κέντρο της ετικέτας στα κουμπιά */.bar-desc-niz ( επάνω: 26% !σημαντικό; θέση: σχετική; εμφάνιση: inline-block; ) .bar-desc-top ( κορυφή: 10% !σημαντικό; θέση : σχετική; οθόνη: ενσωματωμένο μπλοκ; )
/* περιγραφή κοντέινερ */ περιτύλιγμα αριστερής γραμμής ( θέση : σταθερή ; ύψος: 100% κορυφή: 0; πλάτος : 99 εικονοστοιχεία !σημαντικό ; αριστερά: 0 /* περιγραφή του κουμπιού "Επάνω" */ αριστερή γραμμή ελέγχου ( ύψος: 100% οθόνη : μπλοκ ; κείμενο-διακόσμηση : κανένα /* περιγραφή του κουμπιού "Πίσω" */ #κύλιση προς τα πίσω ( οθόνη : μπλοκ ; ύψος: 100% κορυφή: 0; οθόνη : καμία ; text-align : κέντρο ; /* περιγραφή της στήλης χρώματος φόντου και για τα δύο κουμπιά */ ενεργή περιοχή ( πλάτος: 100 px ύψος: 100% οθόνη : μπλοκ ; text-align : κέντρο ; /* ορίστε τη διαφάνεια του χρώματος φόντου όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την ενεργή περιοχή της σελίδας */ Leftbar-wrap:hover .active-area ( φόντο : #E1E7ED !σημαντικό ; αδιαφάνεια : 0,7 !σημαντικό ; /* κάντε την επισήμανση λίγο πιο φωτεινή όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τη λεζάντα */ Leftbar-wrap .active-area:hover ( /* κεντράρετε την ετικέτα στα κουμπιά */ bar-desc-niz ( κορυφή : 26% !σημαντικό ; θέση : σχετική ; οθόνη : inline-block ; bar-dec-top ( κορυφή : 10% !σημαντικό ; θέση : σχετική ; οθόνη : inline-block ; |
Ανάλογα με το σχεδιασμό και τη δομή του πόρου σας, θα χρειαστεί να αλλάξετε ελαφρώς ορισμένες από τις παραμέτρους σε αυτά τα στυλ. Για παράδειγμα, στις γραμμές 47 και 53, αλλάξτε την εσοχή των λέξεων "Πίσω" και "Επάνω" από την κορυφή της σελίδας, αντίστοιχα
Αφού επεξεργαστούμε όλα τα αρχεία, μπορούμε να τα ανεβάσουμε με ασφάλεια στη φιλοξενία και αυτή η μέθοδος θα λειτουργήσει. Μπορείτε να δείτε την εφαρμογή του στο blog μου. Κάντε το για την υγεία σας.
Προχωράμε στην επόμενη μέθοδο. Αυτή η επιλογή θα περιέχει ήδη ένα απλό κουμπί στην κάτω δεξιά περιοχή της οθόνης, κάνοντας κλικ στο οποίο θα μετακινηθεί το επάνω μέρος της σελίδας.
Ο τρίτος τρόπος του κουμπιού προς την κορυφή χωρίς πρόσθετοΗ υλοποίηση του κουμπιού είναι επίσης πολύ απλή και λειτουργεί 100% σε έναν ιστότοπο WordPress. Όσο για το HTML του ιστότοπου ή άλλης μηχανής, δεν μπορώ να πω. Δοκιμή.
Πρέπει να αντιγράψετε τον παρακάτω κώδικα με το σενάριο στο κάτω μέρος του ιστότοπου πριν από την ετικέτα κλεισίματος /
JavaScript
$(document).ready(function()( $("#back-top").hide(); $(function () ( $(window).scroll(function () ( if ($(this).scrollTop () > 100) ( $("#back-top").fadeIn(); ) else ( $("#back-top").fadeOut(); ) )); $("#back-top a" ).click(function () ( $("body,html").animate(( scrollTop: 0 ), 400); return false; )); )); ));< p id = "back-top" > < a href = "#top" > < span > < / span > < / a > < / p > |
Το Material Design είναι μια σχεδιαστική γλώσσα που εισήχθη από την Google πριν από ένα χρόνο και αποτελεί την τολμηρή προσπάθεια της εταιρείας να δημιουργήσει μια ενοποιημένη εμπειρία χρήστη σε όλες τις συσκευές και τις πλατφόρμες. Χαρακτηρίζεται από έντονα χρώματα, μια φιλελεύθερη αλλά βασική χρήση των σκιών για την ένδειξη των επιπέδων διεπαφής χρήστη και την ομαλή κίνηση που προσφέρει μια αρκετά καλή εμπειρία στο Android (και σε ορισμένες εφαρμογές Google στο iOS).
Ωστόσο, ένα πράγμα σχετικά με το Material Design με απασχολεί από τότε που παρουσιάστηκε πέρυσι: το αιωρούμενο κουμπί δράσης.
Τα FAB (Floating action buttons), σύμφωνα με την Google, είναι κυκλικά κουμπιά που επιπλέουν πάνω από τη διεπαφή χρήστη και «χρησιμοποιούνται για την προώθηση της δράσης». Λειτουργούν ως κουμπιά παρότρυνσης για δράση που έχουν σχεδιαστεί για να εκτελούν τις ενέργειες που κάνουν οι χρήστες σε αυτήν την οθόνη πιο συχνά.
Και λόγω του τολμηρού οπτικού στυλ του Material Design, το FAB είναι πολύ δύσκολο να αγνοηθεί - και εκεί βρίσκεται το πρόβλημα. Ενώ στην πράξη, υπό ιδανικές συνθήκες, το FAB φαίνεται να παρέχει καλό UX, η υπερβολική χρήση του FAB θα είναι επιζήμια για το UX της εφαρμογής συνολικά. Εδώ είναι μερικοί λόγοι.
Το αποτέλεσμα της βύθισης προέρχεται από την εμπειρία
Τα FAB ξεχωρίζουν οπτικά - βρίσκονται κυριολεκτικά πάνω από οποιοδήποτε στοιχείο διεπαφής χρήστη στην οθόνη. Επίσης, η προσθήκη FAB θα οδηγούσε αυτόματα σε λιγότερο καθηλωτικό UX, επηρεάζοντας ιδιαίτερα τις εφαρμογές (ή τις οθόνες) των οποίων ο σκοπός είναι να παρέχουν ένα διαδραστικό αποτέλεσμα.
Ένα παράδειγμα είναι η νέα εφαρμογή φωτογραφιών από την Google.
Η εφαρμογή φωτογραφιών ανοίγει ως γκαλερί με ένα αιωρούμενο κουμπί αναζήτησης. Αλλά το θέμα είναι ότι όταν ανοίγω την εφαρμογή φωτογραφιών, θέλω απλώς να… δω τις φωτογραφίες μου. Έτσι, το αιωρούμενο κουμπί αναζήτησης αποσπά την προσοχή του χρήστη από την καθηλωτική προβολή φωτογραφιών, που είναι ο κύριος σκοπός της εφαρμογής. Καθιερώθηκε, η έξυπνη αναζήτηση είναι μια μοναδική δυνατότητα της εφαρμογής φωτογραφιών Google. Σημαίνει όμως αυτό ότι πρέπει να του δοθεί το υψηλότερο επίπεδο, μόνιμο FAB στην εφαρμογή; (Πιστεύω πως όχι.)
Παραδόξως, η Google συμφωνεί μαζί μου. Στη σελίδα Material Design FABs, η Google εξηγεί ότι "δεν χρειάζεται κάθε οθόνη ένα αιωρούμενο κουμπί εντολής".
Και στη συνέχεια προσθέτει ότι «η κύρια ενέργεια είναι να αγγίξετε την εικόνα στη γκαλερί, σε αυτήν την περίπτωση το κουμπί δεν χρειάζεται.
Αυτό μπορεί να φαίνεται σαν την άλλη όψη του νομίσματος, αλλά υπάρχει μια άλλη, πιο σημαντική ιδιότητα του FAB που στέκεται εμπόδιο στη χρησιμότητά του. Καταλαμβάνοντας χώρο στην οθόνη, το FAB ουσιαστικά μπλοκάρει το περιεχόμενο.
Λοιπόν, το FAB είναι απλώς ένα μικρό στρογγυλό κουμπί, σωστά; Πόσο περιεχόμενο μπορεί να αποκλείσει;
Αν κοιτάξετε το στιγμιότυπο οθόνης της εφαρμογής φωτογραφιών, θα συνειδητοποιήσετε ότι οι μηχανές αναζήτησης FAB μπλοκάρουν περίπου το 50 τοις εκατό της μικρογραφίας - σίγουρα αρκετά για να καλύψει μερικά πρόσωπα. Αυτό ουσιαστικά δημιουργεί την ανάγκη για μια επιπλέον κύλιση για κάθε τέταρτη μικρογραφία της τελευταίας σειράς στην οθόνη. Και αυτό δεν είναι το χειρότερο.
Το FAB μπλοκάρει το κουμπί "Αγαπημένα" και την ημερομηνία. Ο χρήστης Dumazy δημοσίευσε μια ανάρτηση στο Graphic Design Stack Exchange σχετικά με ένα πρόβλημα που αντιμετώπισε όταν το FAB απέκλεισε το αστέρι "αγαπημένα" καθώς και τον χρόνο οθόνης της εφαρμογής του. Αυτό δείχνει το πρόβλημα με όλες τις εφαρμογές προβολής λίστας και γίνεται ιδιαίτερα προβληματικό όταν το τελευταίο στοιχείο στη λίστα δεν μπορεί να πραγματοποιήσει κύλιση προς τα πάνω. Αυτό σημαίνει ότι πρέπει να θυσιαστεί μια ολόκληρη στήλη (αλλαγή της θέσης του αστερίσκου κ.λπ.) για να παρέχεται η σωστή χρηστικότητα της οθόνης.
Κατά συνέπεια, το FAB καταλαμβάνει πολύ περισσότερο ακίνητο οθόνης από ό,τι υποδηλώνει το μέγεθός του.
Η δράση προώθησης μάλλον δεν χρησιμοποιείται τόσο συχνά.Όταν σχεδιάζετε το UX, θυμηθείτε τον κανόνα 80/20, που λέει ότι οι χρήστες θα χρησιμοποιούν το 20% των χαρακτηριστικών στο 80% του χρόνου. Με άλλα λόγια, το μεγαλύτερο μέρος της προσπάθειας θα πρέπει να καταβληθεί στο σχεδιασμό των λίγων στοιχείων που οι χρήστες θα χρησιμοποιούν τις περισσότερες φορές.
Η FAB στην πραγματικότητα το κάνει αυτό - θεωρητικά. Τι γίνεται όμως αν η "Προώθηση Δράσης" δεν χρησιμοποιείται τόσο συχνά;
Πάρτε, για παράδειγμα, την εφαρμογή Google Gmail.
Το FAB Gmail της εφαρμογής είναι ένα κουμπί σύνταξης, το οποίο προϋποθέτει ότι η κύρια ενέργεια των χρηστών είναι να συνθέσουν ένα μήνυμα ηλεκτρονικού ταχυδρομείου.
Είναι όμως;
Πολλαπλές μελέτες έχουν δείξει ότι τουλάχιστον το 50% των email διαβάζονται σε φορητή συσκευή και σχεδόν καμία δεν λέει το ίδιο για τη δημιουργία email. Με άλλα λόγια, όπως επιβεβαιώνει η καθημερινή μας εμπειρία, οι περισσότεροι χρήστες κινητών συσκευών τείνουν να χρησιμοποιούν τις εφαρμογές email τους για να διαβάζουν μηνύματα ηλεκτρονικού ταχυδρομείου.
Μπορεί να υπάρχουν πολλά άτομα που χρησιμοποιούν κινητές συσκευές για να απαντήσουν σε μηνύματα ηλεκτρονικού ταχυδρομείου, αλλά αυτό συμβαίνει μόνο μετά το άνοιγμα του email (σημειώστε ότι αυτό σημαίνει ότι θα παρακάμψουν το FAB). Αυτή η συμπεριφορά χρήστη, που πιθανώς προκαλείται από τον μάλλον ατελή μηχανισμό εισαγωγής εικονικού πληκτρολογίου και την αυτόματη αντικατάσταση, σημαίνει ότι η κύρια ενέργεια που κάνουν οι χρήστες είναι η ανάγνωση (και η απάντηση σε) email και όχι η δημιουργία νέων.
Τι κάνει λοιπόν το κουμπί "Σύνταξη email" FAB; Σε σπάνιες περιπτώσεις, δίνει ευχαρίστηση στους χρήστες όταν θέλουν να δημιουργήσουν ένα email χρησιμοποιώντας αυτήν την εφαρμογή. Αλλά τον υπόλοιπο χρόνο, καταλαμβάνει μόνο χώρο στην οθόνη, μπλοκάρει το «αστέρι» και τον χρόνο και αποσπά συνεχώς την προσοχή με ένα έντονο κόκκινο χρώμα.
Θέλουμε FAB; Διαγράψτε το προηγούμενο - το χρειαζόμαστε καθόλου;Φυσικά, δεν μειώνουν όλες οι εφαρμογές FAB την εμπειρία χρήσης Υλικών Εφαρμογών. Υπάρχουν μερικά εξαιρετικά παραδείγματα FAB που έχουν νόημα και βελτιώνουν το UX αυτών των εφαρμογών.
Οι Χάρτες Google είναι ένα εξαιρετικό παράδειγμα ενός καλά εφαρμοσμένου FAB. Η κύρια ενέργεια που κάνουν οι χρήστες στους Χάρτες είναι να λάβουν οδηγίες, επομένως είναι καλή ιδέα να χρησιμοποιήσετε το FAB για αυτόν ακριβώς τον σκοπό.
Λάβετε όμως υπόψη ότι οι Χάρτες είναι μια μάλλον ειδική περίπτωση όπου οι χρήστες περιεχομένου ενδιαφέρονται σχεδόν πάντα να φτάσουν στο κέντρο της οθόνης (όπου η μπλε κουκκίδα σας επισημαίνει τη θέση). Στις περισσότερες εφαρμογές, ωστόσο, μια προβολή πλέγματος ή λίστας σημαίνει ότι οι χρήστες αλληλεπιδρούν με περιεχόμενο που βρίσκεται οπουδήποτε στην οθόνη, συμπεριλαμβανομένου του σημείου που θα βρίσκονταν κανονικά τα FAB.
Σημειώστε επίσης ότι τα παραπάνω στιγμιότυπα οθόνης λένε μόνο ένα μέρος της ιστορίας: στην πραγματική χρήση, τα FAB παραμένουν στη θέση τους ακόμα και όταν ο χρήστης κάνει κύλιση (τις περισσότερες φορές). Όπως έχει τονίσει επανειλημμένα η Google στο Material Design, η σχεδίαση κίνησης είναι εξίσου σημαντική με τη σχεδίαση διεπαφής χρήστη.
Η έλλειψη κίνησης - έμφαση στον χώρο της οθόνης - στο πλαίσιο της μετακίνησης περιεχομένου δημιουργεί ένα υψηλότερο επίπεδο απόσπασης της προσοχής που δεν μπορούν να δείξουν τα στιγμιότυπα οθόνης.
Έτσι, αφού δεν έχουμε σχεδόν καθόλου παραδείγματα καλής υλοποίησης FAB, τίθεται το ερώτημα: χρειάζονται;
Όταν εξετάζουμε τα μειονεκτήματα της ύπαρξης FAB σε εφαρμογές, μπορούμε να το συνοψίσουμε σε μια απλή κατανόηση: οι χρήστες όχι μόνο εκτελούν ενέργειες σε εφαρμογές, αλλά καταναλώνουν επίσης περιεχόμενο.
Ο σχεδιασμός FAB στο Υλικό Σχεδιασμός βασίζεται στην προϋπόθεση ότι οι χρήστες εκτελούν μια συγκεκριμένη ενέργεια τις περισσότερες φορές, και ως εκ τούτου θα πρέπει να τους δοθεί ανυψωμένη κατάσταση με τη μορφή ενός κουμπιού ανώτατου επιπέδου. Αλλά σε πολλές εφαρμογές, οι χρήστες εστιάζουν επίσης στην κατανάλωση περιεχομένου: στην εφαρμογή φωτογραφιών, οι χρήστες θέλουν να προβάλλουν φωτογραφίες. στην εφαρμογή Gmail, οι χρήστες θέλουν να διαβάζουν τα email τους. και στην εφαρμογή Facebook, οι χρήστες θέλουν να διαβάζουν τα μηνύματα των φίλων τους.
Το FAB είναι επομένως μια σχεδιαστική φιλοσοφία (ή τουλάχιστον σχεδιαστική επιλογή) που υποτάσσει τη βέλτιστη κατανάλωση περιεχομένου στη δράση. Και πρέπει να αναρωτηθούμε: είναι απαραίτητος ένας τέτοιος συμβιβασμός; Θέλουμε καν να κάνουμε έναν τέτοιο συμβιβασμό;
Όταν τα FAB οδηγούν σε κακή UX τις περισσότερες φορές, όταν είναι δύσκολο να καταλάβεις τη μοναδική ενέργεια που χρησιμοποιείται περισσότερο σε μια εφαρμογή και όταν πρέπει να βρεις παρακάμψεις (όταν το FAB εξαφανίζεται κατά την κύλιση ή επικαλύπτει άλλα στοιχεία κατά το σάρωση) θα έλεγα ότι η απάντηση είναι όχι.
Το Material Design της Google είναι μια αρκετά καλή ενοποιημένη, βασική γλώσσα σχεδιασμού, αλλά η FAB δεν είναι η καλύτερη σε αυτό.