νέα

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Πριν από ένα μήνα, αφού λάβαμε την ώθηση του συστήματος Huawei Hongmeng NEXT, κάναμε αμέσως μια πρακτική εμπειρία.

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

Αρκετά μεταξένιο.

Και μπορείτε να δείτε το θέμα "#红梦NEXT απαλό και μεταξένιο" σχεδόν σε κάθε κοινωνική πλατφόρμα. Έχω την ίδια αίσθηση, αλλά εξακολουθώ να έχω μερικές ερωτήσεις:

• Η μεταξένια απαλότητα είναι αποτέλεσμα, τι είδους διαδικασία την προκαλεί;
• Δεν υπάρχει μεγάλη διαφορά μεταξύ του Hongmeng NEXT και του συστήματος προηγούμενης γενιάς, λοιπόν, ποιες είναι οι διαφορές στις λεπτομέρειες;

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

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

Τα εικονίδια είναι τόσο σημαντικά

Η οθόνη είναι το παράθυρο στο Διαδίκτυο.

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

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

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

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

Η Huawei ολοκλήρωσε σταδιακά το δικό της στυλ εικονιδίων μέσω του συστήματος τρίτης γενιάς EMUI-HarmonyOS-HarmonyOS NEXT.

Το νέο στυλ εικονιδίων ονομάζεται "Light Simulation" και έχει 4 πολύ προφανή χαρακτηριστικά:

①Το περίγραμμα του εικονιδίου είναι συνοπτικό και κατανοητό, και μπορείτε να μάθετε τι κάνει με μια ματιά.

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

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

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

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

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

▲ Το αριστερό είναι ένα ελαφρύ σκευομορφικό στυλ και το δεξί είναι ένα σκευομορφικό στυλ.

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

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

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

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

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

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

Ίσως σκέφτεστε, ποια είναι η σχέση μεταξύ του σχεδιασμού εικονιδίων και της ευχέρειας του συστήματος;

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

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

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

σαν το νερό

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

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

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

Αυτή η λύση προσαρμογής "όπως το νερό" ονομάζεται "responsive layout" από τη Huawei.

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

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

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

Όταν αλλάξει η σελίδα, η διάταξη του UI θα αλλάξει επίσης ανάλογα.

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

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

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

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

• Προσαρμόστε σαν στάσιμο νερό
• μετάβαση σαν νερό που ρέει

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

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

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

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

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

Παίξτε τρισδιάστατη τέχνη σε οθόνη 2D

Πριν από ένα μήνα, αν με ρωτούσατε "Τι αναβαθμίσεις έχουν γίνει στο UI του Hongmeng NEXT;"

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

Αν θέλετε να το πετύχετε και να γίνετε αντιληπτοί ως «μεταξωτοί» από τους χρήστες, είναι στην πραγματικότητα ένα συστηματικό έργο και πρέπει να λάβετε υπόψη τα πάντα. Μετά από ένα μήνα εμπειρίας, ταξινόμησα την ομαλή λειτουργία του καθαρόαιμου Hongmeng σε δύο μέρη:

• Αίσθηση layering
• παίξε με τη δύναμη

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

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

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

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

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

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

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

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

Μπορούμε να δούμε τα ακόλουθα κινούμενα σχέδια μιας λήψης παντού στο νέο σύστημα:

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

Σύμφωνα με επίσημα στατιστικά στοιχεία, οι μεταβάσεις είναι ο τύπος δυναμικού εφέ με το υψηλότερο ποσοστό στο σύστημα, φθάνοντας πάνω από 60%. Αυτός είναι επίσης ένας από τους βασικούς λόγους για τους οποίους πολλοί άνθρωποι θα αισθάνονται πιο ομαλά αφού ξεκινήσουν με το Hongmeng NEXT - μπορείτε να το δείτε παντού.

Το πανταχού παρόν "κενό ελατήριο"

Θυμάμαι ότι ένας συνάδελφος μοιράστηκε ένα παράδειγμα μαζί μου:

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

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

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

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

Η κινούμενη εικόνα στο εικονίδιο του συστήματος είναι μια βελτίωση οπτικής επιβεβαίωσης.

Το «σύστημα δυναμικών εφέ βαρύτητας» του Hongmeng NEXT προσομοιώνει τη «δύναμη» των αντικειμένων κατά τη διάρκεια της κίνησης μέσω διαφόρων δυναμικών εφέ για να ζωντανέψει τις διαδραστικές λειτουργίες.

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

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

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

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

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

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

Υπάρχει αυτή η πρόταση στον επίσημο ιστότοπο προγραμματιστών της Huawei:

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

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

▲ Φωτογραφία από: rauno.com

Σε τελική ανάλυση, η εις βάθος μελέτη του σχεδιασμού αλληλεπίδρασης είναι στην πραγματικότητα μια βαθύτερη κατανόηση του εαυτού μας: Ποια σενάρια απαιτούν ολίσθηση; Πώς να τακτοποιήσετε τα ειδικά εφέ κατά τη μετάβαση; Πώς να καλύψετε το 99% των επεμβάσεων με ένα δάχτυλο;

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

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