Αντίο Σχεδιασμός Υλικών

Λαμβάνοντας υπόψη το σχεδιασμό υλικού για το επόμενο έργο σας; Παρακαλώ ξανασκεφτείτε.

Πριν διαβάσεις…

Αν νομίζετε ότι είστε πολύ ευαίσθητοι για να διαβάσετε κείμενο γραμμένο με κριτική σκέψη, παρακαλούμε να είστε προσεκτικοί αν πρόκειται να αφήσετε ένα σχόλιο. Υπήρχαν τόσες πολλές παρατηρήσεις που είναι απλά προϊόντα παράξενης, κλιμακωτής σύνδεσης με αυτό το "εργαλείο", το οποίο είχε ως αποτέλεσμα οι συγγραφείς να γράφουν άσχετο κείμενο, με συναισθηματικά καθοδηγούμενη αντίδραση. Θυμηθείτε ότι κανένα εργαλείο δεν είναι τέλειο και το κριτικό τους βοηθά μόνο να βελτιωθούν και ο κόσμος να γίνει μια καλύτερη θέση. Εκτός αυτού, τουλάχιστον, θυμηθείτε ότι αυτό είναι ένα άρθρο γνώμης (σε αντίθεση με πολλούς άλλους στο διαδίκτυο) ότι έχετε το δικαίωμα να διαφωνείτε.

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

Ο Παγκόσμιος Ιστός είναι μια γιγαντιαία ζούγκλα. Όλα είναι απλώς ένας παράγοντας θορύβου σε ένα απείρως μικρόσωμο σύμπαν, όπως ακριβώς και στη φύση.

Ας ξεκαθαρίσουμε πρώτα γιατί ο Σχεδιασμός Υλικών δεν είναι κατάλληλος για τις περισσότερες εφαρμογές, τουλάχιστον για τον υπόλοιπο 21ο αιώνα.

Λάθος Ίδρυμα

Ο ΑΣΧ δεν χτίστηκε με τόσο βαθιά γνώση σχεδιασμού που εκτείνεται σε αιώνες (Gestalt, Vitrivius κλπ). Χτίστηκε απλώς με μια σχέση με το υλικό στον πραγματικό κόσμο, εξ ου και το όνομα ... Αυτό που θεωρούσαν και προσπαθούσαν να αντιγράψουν ήταν το πραγματικό φαινόμενο του υλικού, κυρίως του χαρτιού, επειδή ήταν το υλικό αλφαβητισμού (υποθέτω).

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

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

Και το web, από μόνο του, είναι ένα γιγαντιαίο βασίλειο που είναι πολύ ξεχωριστό.

Shade Porn

Το MUI έχει αυτό το χαρτί που είναι παντού. Σε καμία άλλη λύση δεν έχω δει, οι οπτικές πληροφορίες πλημμυρίζουν για να στοιβάζουν τα πράγματα πάνω από το άλλο. Θέλω να πω ότι δεν κόβετε κομμάτια μιας εφημερίδας και στοιβάζετε αυτά τα κομμάτια το ένα πάνω στο άλλο, ενώ διαβάζετε το πρωί της Κυριακής;

Ελέγξτε αυτό από την πλατφόρμα Google Cloud που χρησιμοποιεί το MDG:

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

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

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

Ένα άλλο παράδειγμα είναι αυτό το πραγματικά ενδιαφέρον, αλλά παράξενο. Μπορείτε να βρείτε την ψευδαίσθηση σε αυτήν την εικόνα παρακάτω;

Η γραμμή εφαρμογών (στην κορυφή) εμφανίζεται πάνω από το κύριο περιτύλιγμα, αλλά όχι από την πλοήγηση. το οποίο εμφανίζεται στο ίδιο ύψος με το περιτύλιγμα. Πώς είναι δυνατό αυτό στον πραγματικό κόσμο;

Μπορείτε να κολλήσετε σε αυτό και ποτέ να μην πάτε οπουδήποτε, όπως και στον ΑΣΧ

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

Αλληλεπίδραση ανθρώπου-μηχανής

Οι ΑΣΧ έγιναν κυρίως (αλλά όχι αποκλειστικά) για κινητά (ειδικά για εφαρμογές Android στο Play Store). Το Mobile δεν σημαίνει μόνο "μικρότερες οθόνες". Σημαίνει επίσης αλληλεπίδραση με δάκτυλο έναντι ποντικιού. Το δάχτυλο είναι πολύ μεγαλύτερο από το ποντίκι και έχει διαφορετική ευαισθησία και δράσεις που εφαρμόζονται για να δουλέψουν σε μια συσκευή και στην οθόνη της. Επιπλέον, οι λειτουργίες που μπορούν να γίνουν σε μια οθόνη σε κινητά είναι πολύ πιο περιορισμένες από ό, τι στην επιφάνεια εργασίας λόγω προβλημάτων μεγέθους. Υπάρχουν τόσα πολλά στοιχεία που το MDG και το MUI αντιμετωπίζουν με καλό τρόπο, αλλά αυτά δεν αντιστοιχούν απαραίτητα στις ανάγκες των περισσότερων εφαρμογών και στο περιβάλλον πολύ καλά.

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

Συντριπτικοί Δείκτες Ανατροφοδότησης

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

Αλλά, Θεέ μου, αυτό μπορεί εύκολα να είναι συντριπτικό:

Επιβιώσατε να κοιτάτε αυτό για περισσότερο από 10s, πόσο μάλλον να το χρησιμοποιείτε για πολύ;

Από τη στιγμή που αναπτύχθηκαν MDG για τελικούς καταναλωτές σε κινητές συσκευές (κυρίως για εφαρμογές Android), η συχνότητα χρήσης θεωρήθηκε αρκετά χαμηλή (ανά εφαρμογή). Έτσι έκαναν πολλές αλληλεπιδράσεις οπτικά αρκετά ανθεκτικές (όπως όταν αγγίζετε / κάνετε κλικ υπάρχει μια κινούμενη εικόνα κύκλου που δείχνει πού κάνετε κλικ). Αυτό συμβαίνει επειδή οι χρήστες που δεν γνωρίζουν πραγματικά τη δυναμική μιας εφαρμογής για κινητά θα μπορούσαν εύκολα να κατανοήσουν τις αλληλεπιδράσεις τους με τα άμεσα σχόλια. Έτσι, ακόμη και όταν χρησιμοποιούν διαφορετικές εφαρμογές, υπάρχει συνοχή σε όλη την εμπειρία.

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

Έτσι, υπάρχουν τόσες πολλές διαφορές που πρέπει να ληφθούν υπόψη κατά το σχεδιασμό κυρίως για επιφάνεια εργασίας σε σχέση με κινητά και υψηλής συχνότητας χρήσης / χαμηλής συχνότητας χρήσης.

Κακή αριθμός στοιχείων που προέρχονται από δεδομένα

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

Τα έντυπα είναι ίσως τα πιο χρησιμοποιημένα συστατικά της εποχής μας και ως εκ τούτου είναι δύσκολο να σχεδιαστούν και να οικοδομηθούν συνεκτικά. Η βιβλιοθήκη MUI δεν έχει ούτε ένα στοιχείο το οποίο ασχολείται με αυτό (έχει μόνο τα βασικά στοιχεία εισόδου) Το παράδειγμα έχει ληφθεί από το Ant.design ως καλό

Η Ξεχασμένη Άγκυρα δεν αναφέρεται καν

Η ενότητα αυτή προστίθεται μετά τη δημοσίευση του άρθρου (25 Ιανουαρίου 2018)

Στο MDG, υπάρχουν 4 (τέσσερις) διαφορετικές ενότητες αφιερωμένες στα κουμπιά.

Δεν υπάρχουν, ωστόσο, πληροφορίες σχετικά με ένα από τα πιο θεμελιώδη στοιχεία της ιστορίας της HTML: άγκυρα:

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

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

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

συμπέρασμα

Οι Οδηγίες Σχεδιασμού Υλικού και οι βιβλιοθήκες που δημιουργήθηκαν κατά το παρελθόν απευθύνονται σε πολλά από τα ζητήματα που χρειαζόταν από τότε οι χρήστες του διαδικτύου του 21ου αιώνα. Πρώτα απ 'όλα αυτά είναι απλώς μια «συνοχή» της συνολικής εμπειρίας. Όταν χρησιμοποιούμε 100s διαφορετικών UI, εμείς ως χρήστες θέλουμε να γνωρίζουμε τι είναι ένα κουμπί, και τι είναι ένα μενού βασικά ...

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

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

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

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

Χάρη στον κ. Doruk Demircioğlu αναφέροντας το εξής: https://adele.uxpin.com/

  • https://react.semantic-ui.com/introduction
  • https://ant.design/docs/spec/introduce
  • https://www.lightningdesignsystem.com/ (προστέθηκε στις 25 Ιανουαρίου 2018)
  • http://grommet.io/
  • http://www.oracle.com/webfolder/ux/middleware/alta/index.html
  • https://www.sap.com/sweden/products/fiori.html
  • https://primer.github.io/
  • https://purecss.io/
  • https://foundation.zurb.com/
  • https://vmware.github.io/clarity/
  • http://rizzo.lonelyplanet.com/
  • πολλά περισσότερα…