Κατασκευή ιστοσελίδων. Τάσεις στο web design για το 2018. Μέρος 6o . Σχεδιασμός Αφής

• Σχεδιασμός Αφής. Τι είναι;

• Στοιχεία Σχεδιασμού “Borderless”

• Multilayer Σχεδιασμοί

• Κίνηση και Animation με Νόημα

• Φωτογραφία με Λεπτομέρειες

• Φυσικός Φωτισμός

• Συνδυασμός όλων μαζί

Σχεδιασμός Αφής

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

Η τάση ξεκίνησε με την εμφάνιση του Material Design, των οδηγιών σχεδίασης της Google που υπαγορεύουν τον τρόπο εμφάνισης και εργασίας των interface τους.

Αλλά η σχεδίαση αφής ξεπερνά τα βασικά στοιχεία του Material Design. Το κλειδί στη λειτουργία της σχεδίασης αφής είναι να δημιουργείται αρκετός χώρος ώστε τα φυσικά αντικείμενα να φαίνονται πραγματικά σε έναν ψηφιακό χώρο.

Τι είναι;

Ο σχεδιασμός αφής δεν είναι ο ίδιος με τους σκευομορφικούς τρόπους που αποτελούσαν το πρότυπο στις αρχές του 2010. Βασίζεται περισσότερο σε επίπεδα ή σχεδόν επίπεδα στοιχεία, διατηρώντας σκιές και εφέ για να τα “ανυψώνουν” από την οθόνη.

Τα περισσότερα απτικά σχέδια δημιουργούν μια ψευδαίσθηση τρισδιάστατων αντικειμένων σε ψηφιακό χώρο.

Οι οδηγίες Material Design της Google παρέχουν μια καλή σύνοψη για το τι πρέπει να είναι ο σχεδιασμός αφής: «Το υλικό στηρίζεται στην απτική πραγματικότητα, εμπνευσμένη από τη μελέτη του χαρτιού και του μελανιού, αλλά τεχνολογικά προηγμένη και ανοιχτή στη φαντασία και τη μαγεία.

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

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

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

Στοιχεία Σχεδιασμού “Borderless”

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

Τα layers και τα στοιχεία μπορούν να διασχίσουν τα επίπεδα και να μεταβούν στον “χώρο” άλλων στοιχείων, με κείμενο σε πολλαπλές οθόνες και στοιχεία που βρίσκονται σχεδόν σε δύο θέσεις ταυτόχρονα. (Ο σχεδιασμός της ιστοσελίδας Epicurrence κάνει πολλά από αυτά, συνδυάζοντάς τα με γευστικά εφέ παράλλαξης για να εξασφαλίσει ότι ο χρήστης ξέρει τι να κάνει και συνεχίζει να κινείται μέσα στον ιστότοπο.)

Είτε αφορά την κατασκευή μιας ιστοσελίδας ή την κατασκευή ενός ηλεκτρονικού καταστήματος (e-shop) και κάθε προωθητική ενέργεια για αυτά δεν στηρίζονταιστην χρήση borderless σχεδιασμού; Η ψευδαίσθηση της απεραντοσύνης ενός κόσμου χωρίς όρια αποτελεί την γραφιστική βάση για νοητική προβολή όλων των προσπαθειών μας για διαφήμιση στο internet . Πλάθουμε ιστορίες στοχεύοντας στο συναίσθημα μέσω των εικόνων στοχεύοντας στον μεταιχμιακό εγκέφαλο στον οποίο εδράζουν τα συναισθήματα και από τον οποίο λαμβάνονται οι αποφάσεις ενώ με τον λόγο – κείμενο στοχεύουμε στο νεοφλοιό του εγκεφάλου που ενώ αυτός είναι υπεύθυνος για την γλωσσική μας ικανότητα και τον χειρισμό της αναλυτικής ορθολογικής σκέψης δεν είναι αυτός που λαμβάνει τις αποφάσεις.

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

Λόγω της ιδέας ότι το ψηφιακό και το πραγματικό είναι ένα, αυτά τα σχέδια δεν μπορούν να κλειστούν σε κουτί. Όπως και η σκέψη μας δεν πρέπει να κλείνεται σε κουτιά. Οι λύσεις τις περισσότερες φορές εξάλλουν δεν είναι out of the box ;

Multilayer Σχεδιασμοί

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

Οι περισσότεροι σχεδιαστές εφαρμόζουν αυτή την ιδέα με σκιές. Ακόμα και η Apple δοκίμασε ένα πιο απτό μοτίβο σχεδίασης με το iOS 11, το οποίο κυκλοφόρησε αρχές Σεπτεμβρίου.

Σχεδόν κάθε μέρος του interface χρησιμοποιεί στοιχεία στυλ κάρτας στοιβαγμένα σε φόντο με ξεχωριστές σκιές για διαχωρισμό. (Το App Store συγκεκριμένα χρησιμοποιεί αυτή τη μορφή, προσφέροντας μια εντελώς νέα και διαφορετική εμπειρία χρήστη. Σκεφτείτε απλά πόσο ενδιαφέρον θα ήταν να αναζητήσετε τα αναλυτικά στοιχεία της Apple για να δείτε πόσο αποτελεσματική είναι η σχεδίαση λίγους μήνες μετά την κυκλοφορία.)

Το Material Design χρησιμοποιεί την ίδια φιλοσοφία σχεδίασης με κουμπιά και στοιχεία UI που φαινομενικά αιωρούνται πάνω από αντικείμενα και layers, συχνά σε ένα διάστημα μεταξύ αντικειμένων και στρωμάτων. Σημειώστε το ξεχωριστό layering των αντικειμένων σε κάτι τόσο απλό όσο ένας χάρτης Google.

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

Κίνηση και Animation με Νόημα

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

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

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

Όταν χρησιμοποιείτε εφέ parallax και κύλισης, τα στρώματα πρέπει να κινούνται με τρόπο που να μιμείται τον τρόπο αλληλεπίδρασης δύο κομματιών χαρτιού στον πραγματικό κόσμο. Τα στρώματα είναι ανεξάρτητα και κινούνται μόνοι τους, αλλά επίσης αλληλεπιδρούν με ένα τρισδιάστατο αποτέλεσμα.

Φωτογραφία με Λεπτομέρειες

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

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

Φυσικός Φωτισμός

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

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

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

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

Συνδυασμός όλων μαζί

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

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

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

Πηγή της σειράς των παρόντων άρθρων με τίτλο Κατασκευή ιστοσελίδων. Τάσεις στο web design για το 2018 είναι από την UXPin.