Σχεδιαστικές τάσεις που ξεχωρίζουν

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

Ελπίζω να το απολαύσετε.

Η έρευνά μας είχε ως αποτέλεσμα 16 διαφορετικές τάσεις:
1 - Συγκεκριμένες ανατροφοδοτήσεις και μικροσυστοιχίες
2 - Εστίαση περιεχομένου
3 - Ορατή και προσβάσιμη πλοήγηση
4 - Visual Storytelling
5 - Προσαρμοσμένη απεικόνιση
6 - Ημι-επίπεδη σχεδίαση
7 - Ζωντανά χρώματα και κλίση
8 - Τολμηρή τυπογραφία
9 - Πειραματική διάταξη
10 - Φυσική Αλληλεπίδραση
11 - Μικτή πραγματικότητα
12 - Διεπαφές συνομιλίας
13 - Οπτική Βοήθεια
14 - Σημασία της μικροσκοπίας
15 - Πρόβλεψη
16 - Βελτιστοποιημένο παρενθετικό άγχος

Ας δούμε την ..

1 - Συγκεκριμένες ανατροφοδοτήσεις και μικροεπεμβάσεις

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

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

Σχεδιασμός animation animation από το Gis1on για το Norde

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

Uber Design Hero από τον Gene Ross για το UENO

2- Focus Focus

Οι φωτογραφίες προϊόντων που παρουσιάζονται στο κατάστημα είναι ο σημαντικότερος παράγοντας για την απόφαση αγοράς ή μη αγοράς.

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

Εφαρμογή ηλεκτρονικού εμπορίου από τον Alex Khoroshok για το Thunderrise

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

Ιστοσελίδα της Apple, παρακολουθήστε την οθόνη Series 3.

3 - Ορατή και προσβάσιμη πλοήγηση

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

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

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

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

Περίγραμμα πλοήγησης του καναλιού Google από τον Aurélien Salomon ➔

4- Visual Visual Storytelling

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

Για να κατανοήσουμε πραγματικά αυτή την τάση, πρέπει πρώτα να καταλάβουμε την ιστορία πίσω από αυτήν.

Βιβλία> Ταινίες> Κοινωνικά Μέσα> Tweets> Φωτογραφίες> Ιστορίες

  • Η πρώτη τεκμηριωμένη αφήγηση ξεκίνησε με βιβλία.
  • Στη συνέχεια, όταν εμφανίστηκαν ταινίες, οι άνθρωποι προσαρμόστηκαν εξαιρετικά γρήγορα, επειδή ήταν πιο εύκολο και πιο γρήγορο.
  • Στη συνέχεια ήρθε η εποχή των κοινωνικών μέσων ενημέρωσης. Οι άνθρωποι άρχισαν να μοιράζονται τις ιστορίες τους.
  • Ο αγγελιοφόρος MSN έδειξε ποια μουσική ακούτε, το Facebook έδειξε τι κάνετε ή αισθάνεστε. Στη συνέχεια, το Twitter ήρθε με τις πολύ σύντομες γραπτές ιστορίες.
  • Με το Instagram, η εποχή της κοινής χρήσης φωτογραφιών έχει αρχίσει. Οι φωτογραφίες λένε ιστορίες χωρίς να χάνουν χρόνο με την ανάγνωση.
  • Τώρα, βρισκόμαστε στο τελικό στάδιο, τα "σύντομα βίντεο που εξαφανίζονται μετά από μια μέρα", επομένως, οι ιστορίες.
Αποστέλλει ένα στιγμιότυπο από τον Dan Mazig για το MetaLab
"Αλλά η εφαρμογή μου δεν είναι μια εφαρμογή κοινωνικών μέσων ενημέρωσης, πώς μπορώ να εφαρμόσω αυτήν την τάση;"

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

Επιβίβαση κινουμένων σχεδίων από την Anastasiia Andriichuk

5. Προσαρμοσμένη απεικόνιση

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

Μεγάλες εταιρείες όπως το Google, το Dropbox, το Facebook, μεταξύ άλλων, προσάρμοσαν αυτήν την τάση ήδη. Δημιούργησαν μια γλώσσα εικονογράφησης για τον εαυτό τους, η οποία είχε ωραία αποτελέσματα. Κάθε φορά που δημιουργούν μια μίνι ιστοσελίδα (για δικαιώματα των γυναικών, για καρκίνο κλπ.), Διατηρούν αυτήν την οπτική γλώσσα και οι χρήστες που επισκέπτονται την ιστοσελίδα τους, κατανοούν υποσυνείδητα την προέλευση.

Πάρτε Dropbox για παράδειγμα - Χέρι σχεδίαση θέτει το χρήστη άνετα, απευθύνεται στο παιδί σε όλους μας, και κάνει το προϊόν φαίνεται πιο προσιτό και οικείο.

Αριστερά: από τον Brandon Land Right: από τον Jason Perez για το DropboxGIF της δυναμικής κύλισης από τον Sergey Valiukh για το tubik

6- Ημι-επίπεδη σχεδίαση

Σε σύγκριση με το ημι-επίπεδη σχεδίαση σε επίπεδη σχεδίαση, οι προοπτικές είναι πιο κατανοητές με τη χρήση γνωστών απτικών ιδιοτήτων και σκιών.

Ένα άλλο μάθημα ιστορίας σχεδιασμού έρχεται:

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

Κατανοώντας ότι πρόκειται για μια ψηφιακή οθόνη και δεν χρειάζεται να τα κάνουμε τόσο ρεαλιστικά, μια νέα εποχή έχει αρχίσει: Flat design.

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

Τώρα είναι η εποχή του Semi Flat Design. Αυτή είναι η εποχή της κίνησης και της εστίασης. Θέλουμε οι χρήστες μας να εστιάσουν σε αυτό που είναι σημαντικό. Έτσι, χρησιμοποιούμε σκιές σε αντικείμενα που έχουν σημασία. Το βάθος δίνεται από την κίνηση και τη σκιά. Οι σκιές δεν είναι τόσο δραματικές όσο η σχεδίαση υλικών.

ai shopping cards motion από τον Wojciech Zieliński

7- Ζωντανά χρώματα και κλίση

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

Φωτεινά, ζωντανά χρώματα είναι πάντα διασκεδαστικά, ενεργητικά και ζωντανά, ενώ τα παστέλ είναι πιο χαλαρωτικά και διακριτά.

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

Εξόρυξη άγριας σελίδας προσγείωσης από τον Ghani Pradita για το PaperpillarWIP - Εφαρμογή FX από το KREATIVA Studio

8- Τολμηρή τυπογραφία

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

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

Αυτό είναι μια τάση για μεγάλο χρονικό διάστημα, αλλά με το iPhone X, ανακτάται η δημοτικότητα του.

Διαβάστε την αίτηση από το JPstyle για το New Beee

9- Πειραματική διάταξη

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

Ιστοσελίδα του Anthony Sho από τον Zhenya Rynzhuk για το Sochnik

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

Ιστοσελίδα του Pablo Llanquin (FREEBIE) του Jardson Almeida ️

10- Φυσική Αλληλεπίδραση

5 αισθήσεις βλέπουν, ακούν, δοκιμάζουν, μυρίζουν, αγγίζουν. Χρησιμοποιούμε το να βλέπουμε και να αγγίζουμε ως επί το πλείστον και μερικές φορές να ακούμε. Απευθυνόμαστε σε οθόνες τηλεφώνου. Αυτή η τάση εξηγεί πώς τα τηλέφωνα μας αγγίζουν. Λέγεται Haptic Feedback.

Αυτή η αλληλεπίδραση άρχισε πραγματικά με ελεγκτές PS4, XBOX και PSP. Όταν σκοράρει κάποιος στόχος ή συντριβεί σε παιχνίδι αυτοκινήτου, ο ελεγκτής δονείται. Αυτό σας δίνει μια επιπλέον αίσθηση του παιχνιδιού.

Η απτική ανατροφοδότηση χρησιμοποιείται πλέον από πολλές εφαρμογές για κινητά, ακόμη και από το App Store.

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

Haptic Guidance Patterns από τον Liam Tucker

11- Μικτή πραγματικότητα

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

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

Airbnb AR Map Concept από τον Isil Uzum

12- Διεπαφές συνομιλίας

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

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

Messenger Bots & Augmented Video Call Concept από τον Isil Uzum

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

Οθόνη εισόδου εγγραφής.

13- Οπτική Βοήθεια

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

Instagram> Φίλτρα

Airbnb> Επαγγελματίες Φωτογράφοι

Καλό παράδειγμα: Airbnb (Επαγγελματική φωτογραφία)Κακό παράδειγμα: Sahibinden.com (ερασιτεχνική φωτογραφία)

14- Σημασία της μικροσκοπίας

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

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

Ημερολόγιο (επικύρωση ημερομηνίας) από τον Emmanuel Torres404 Εικόνα από τον Mike Piechota για το Netguru

15- Πρόβλεψη

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

Η εφαρμογή Spotify προτείνει μου τραγούδια σύμφωνα με τις προηγούμενες επιλογές μου.Το Netflix

16- Βελτιστοποιημένο παρενθετικό άγχος

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

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

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

Αριστερά: Προφορτωτής και τραβήξτε προς τα κάτω για να ανανεώσετε την κινούμενη εικόνα από τον Jakub Antalík για το Frame.io / Right: iFly A380 από την Airbus on-boarding UI εξερεύνηση από τον Gleb Kuznetsov

Σημείωση συγγραφέων:

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

Μην ξεπεράσετε παρακαλώ :)

P.s: Αυτό το άρθρο είναι αποτέλεσμα της έρευνας των ομάδων σχεδιασμού Commencis. (Πήρα πολλή βοήθεια από την υπέροχη ομάδα μου ).