nouvelles

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

Il y a un mois, après avoir reçu le système Huawei Hongmeng NEXT, nous avons immédiatement fait une expérience pratique.

Les partenaires de la rédaction d’Aifaner se sont également relayés pour en faire l’expérience. Bien que tout le monde possède différentes marques de téléphones principaux au quotidien, leurs évaluations du Hongmeng de sang pur sont généralement les mêmes :

Assez soyeux.

Et vous pouvez voir le sujet « #红梦NEXT lisse et soyeux » sur presque toutes les plateformes sociales. J'ai le même sentiment, mais j'ai encore quelques questions :

• La douceur soyeuse est le résultat, quel type de processus en est la cause ?
• Il n'y a pas beaucoup de différence entre Hongmeng NEXT et le système de la génération précédente. Alors, quelles sont les différences dans les détails ?

Après un mois d’expérience approfondie, j’ai découvert certains coins et recoins du nouveau système de Huawei. Peut-être que ces optimisations si subtiles qu’elles sont à peine perceptibles sont à l’origine de cette douceur soyeuse.

Aujourd'hui, nous allons examiner Hongmeng NEXT en fonction de la « fréquence de contact » de chaque conception, du petit au grand, du point à la surface, du statique au dynamique.

Les icônes sont si importantes

L'écran est la fenêtre sur Internet.

Je pense que cette affirmation n'est pas assez précise. Ce que l'on peut réellement appeler une « fenêtre/canal » sur un téléphone mobile devrait être une application.

WeChat, Weibo, Xiaohongshu et TikTok... on clique sur un ou plusieurs d'entre eux presque toutes les heures Par rapport à d'autres parties du système, l'icône de l'application est la plus fréquemment cliquée.

La conception des icônes d'application a traversé plusieurs étapes de développement : skeuomorphisme - planéité - ajustement libre du skeuomorphisme et de la planéité.

Pour le dire franchement, il oscille entre simulation et style concis, mais ce n'est rien de plus que deux noyaux de conception : transmission précise des informations + style unifié.

Huawei a progressivement finalisé son propre style d'icône grâce au système de troisième génération EMUI-HarmonyOS-HarmonyOS NEXT.

Le nouveau style d'icône s'appelle "Light Simulation" et présente 4 caractéristiques très évidentes :

①Le contour de l'icône est concis et facile à comprendre, et vous pouvez savoir ce qu'il fait en un coup d'œil ;

② Utilisez des éléments semi-transparents et flous à empiler pour présenter une impression de superposition, qui est plus légère en termes de poids visuel que la quasi-matérialisation pure et plus tridimensionnelle que le style plat pur ;

③ Renforcez le traitement des surbrillance sur les bords des graphiques pour améliorer la texture globale et mettre en évidence les éléments principaux des graphiques afin que l'œil puisse trouver les points clés plus rapidement ;

④La couleur du panneau arrière de l'icône présente un léger dégradé et les objets représentés par un éclairage descendant semblent plus naturels à l'œil humain, évitant ainsi l'impact et la brusquerie de forts dégradés de couleurs.

La conception de l'application des quatre points ci-dessus rend les symboles d'icônes sur le bureau plus unifiés. Le sentiment le plus intuitif est qu'il s'agit de quelque chose de conçu par une équipe et non du résultat de discussions de groupe.

Bien sûr, le "quasi-objet léger" n'est qu'une tendance générale. Il y aura toujours des gens qui aimeront un style plus proche de la réalité et tridimensionnel, vous pouvez donc également l'ajuster manuellement à un autre - les ombres de bord. sont plus lourds, les détails sont plus spécifiques et les couches sont plus détaillées et des couleurs plus vives.

▲ La gauche est un style skeuomorphe léger et la droite est un style skeuomorphe.

Il n’est pas difficile de constater que même les icônes skeuomorphes suivent toujours les principes de conception ci-dessus. Le ton unifié est également utilisé dans les icônes du système.

Le centre de contrôle, l'interface des paramètres et la barre de navigation des applications système comportent tous des icônes système, mais elles sont facilement négligées car elles apparaissent généralement avec du texte.

C'est aussi la première difficulté dans la conception des icônes système : comment les garder cohérentes avec la disposition du texte ? La solution de Huawei consiste à caractériser les images afin qu'elles puissent être connectées de manière transparente aux polices système.

Il peut s'adapter intelligemment en fonction des changements d'épaisseur du texte, garantissant que les icônes peuvent s'adapter de manière flexible aux différentes épaisseurs de texte et maintenir une cohérence visuelle.

Nous avons également découvert un autre détail au cours de l'expérience. Les icônes système de Hongmeng NEXT ont des effets plus dynamiques : flash étoile, lampe de poche, partage Huawei, mode protection des yeux, mode économie d'énergie... tous ont des effets exclusifs.

Le nouveau système définit 7 effets dynamiques pour les icônes, grâce à une combinaison d'apparition, de disparition, de rebond, de mise à l'échelle, de remplacement, de pulsation et de couleurs variables.

Vous vous demandez peut-être quelle est la relation entre la conception d’icônes et la maîtrise du système ?

D'un point de vue restreint, l'animation des icônes fait également partie du système, et la cohérence et l'homogénéité des mouvements affecteront la perception par l'utilisateur de la fluidité du système. D'un point de vue plus large, les icônes apparaissent très fréquemment dans le système, et le le nombre de fois où les utilisateurs les touchent est également très élevé.

Un design unifié et harmonieux vous permet de voir l'ombre d'un système dans les pages que vous passez d'avant en arrière, évitant ainsi le « fouillis ».

Par conséquent, une conception cohérente des éléments statiques est la base pour que le système devienne fluide.

comme l'eau

Une fois les icônes d'application et de système présentées, examinons les scénarios d'utilisation spécifiques.

L'adaptation de l'application et de l'interface utilisateur du système des téléphones mobiles plein écran est toujours critiquée pour être trop "violente". Elle rend simplement les applications avec un format d'écran standard plus grandes et plus larges, et ne tire pas pleinement parti du grand écran pour afficher plus d'informations avec deux fois la superficie, tout comme la stratégie paresseuse sur les tablettes dans les premières années.

Une interface confortable doit être comme l’eau, qui remplit toujours parfaitement le récipient, quelle que soit son apparence.

Cette solution d'adaptation « semblable à l'eau » est appelée « mise en page réactive » par Huawei.

Lorsque la taille du conteneur de fenêtre change, les éléments d'interface peuvent automatiquement changer pour s'adapter au changement de taille du conteneur.

Huawei réalise une transition fluide et une adaptation de l'interface en étirant simultanément l'arrière-plan de la page, le texte, les icônes, les composants et d'autres éléments.

Différents composants peuvent être mis à l'échelle selon un rapport fixe sur différentes pages.

Lorsque la page change, la mise en page de l'interface utilisateur changera également en conséquence. Memo en est un bon exemple.

En mode paysage, l'interface est divisée en deux, avec la barre de répertoire à gauche et le menu secondaire à droite. Cela évite non seulement un étirement excessif et un espace blanc excessif dans un seul affichage de répertoire, mais permet également d'utiliser pleinement l'espace horizontal de l'écran.

En ce qui concerne l'adaptation de petits composants plus spécifiques, Hongmeng NEXT s'adapte à différentes tailles en modifiant sa propre forme et sa densité d'informations.

Ceci est très similaire à l'idée de conception des widgets de bureau : modifiez la taille du dossier et utilisez des cartes de service de différentes tailles pour s'adapter à l'espace vide du bureau.

Il existe de nombreuses solutions de mise en page réactives, mais la logique sous-jacente est exactement la même :

• Adaptez-vous comme de l'eau plate
• transition comme l'eau qui coule

Ces solutions d'adaptation cachées dans les coins facilitent également l'intégration des logiciels et du matériel.

L'écran partagé de Hongmeng NEXT est très bon. Dans la solution traditionnelle, tant que deux écrans peuvent être séparés, la tâche est accomplie.

Mais sur cette base, le nouveau système coupe également les coins de la petite fenêtre selon la même courbure que le coin R de l'écran.

Pour être honnête, la conception des fenêtres et des écrans devrait être ainsi, mais comme il y a trop de marques et de modèles auxquels le système Android doit s'adapter, une adaptation parfaite est devenue un gros problème.

Et c'est aussi un avantage supplémentaire apporté par le système Hongmeng de sang pur : le système natif est conçu pour servir cette marque de modèles, et il n'est pas nécessaire d'en considérer d'autres.

Jouez de l'art 3D sur un écran 2D

Il y a un mois, si vous me demandiez « Quelles mises à niveau ont été apportées à l'interface utilisateur de Hongmeng NEXT ? »

Je peux seulement vous dire que la couche d'effets spéciaux de « verre dépoli » a été ajoutée à de nombreux endroits, mais l'ajout d'un seul élément est difficile à améliorer la douceur du système d'un niveau.

Si vous voulez y parvenir et être perçu comme « soyeux » par les utilisateurs, il s'agit en fait d'un projet systématique, et vous devez tout considérer. Après un mois d'expérience, j'ai classé le bon fonctionnement de Hongmeng de sang pur en deux parties :

• Sens de la superposition
• jouer avec force

Examinons d'abord la superposition. L'effet de verre dépoli (flou) en fait partie. Il apparaît généralement dans des scènes telles que l'ouverture et la fermeture d'applications, un écran négatif, une recherche déroulante, la fermeture de l'arrière-plan, un écran partagé et une division mobile. lignes.

Par rapport au système précédent, il existe en effet beaucoup plus d'effets de flou, mais en même temps, les effets dynamiques et la mise à l'échelle des icônes du bureau sont ajoutés. Ensemble, ils peuvent simuler le processus de mise au point et de défocalisation de l'œil humain. appeler la réalité lors de l'interaction Le sentiment est le résultat de l'effet combiné des deux.

L'effet de levage du bureau est simulé grâce à une mise à l'échelle, qui reflète également intuitivement la relation hiérarchique au sein du système.

Ouvrir des applications, créer de nouvelles tâches, déverrouiller l'écran, etc. appartiennent tous aux niveaux supérieur et inférieur. Hongmeng NEXT a défini plusieurs effets d'animation pour ce type de commutation :

De plus, il existe également des commutateurs entre les niveaux croisés et le même niveau, ainsi que des animations correspondantes.

En subdivisant la relation hiérarchique et en appliquant différents effets spéciaux, l'une consiste à améliorer le sens tridimensionnel du système à travers des couches et à rendre la transition moins rigide. L'autre consiste à intégrer une animation non linéaire dans chaque transition et l'opération deviendra plus facile. . Plus fluide, du moins semble-t-il.

La vidéo de démonstration sur le site officiel illustre bien l'effet de l'animation non linéaire sur la fluidité.

L'optimisation des relations hiérarchiques par Huawei ne se limite pas aux grandes transitions de pages, mais se concentre également sur les petites icônes.

Nous pouvons voir les animations one-shot suivantes partout dans le nouveau système :

Qu'il s'agisse de mettre en surbrillance le champ de recherche, de zoomer sur l'icône de l'application ou d'activer et de désactiver les touches de fonction, il est difficile de voir les transitions forcées sur ce système. Il peut toujours utiliser une série de méthodes telles que la forme, la couleur, le déplacement et la mise à l'échelle. rendre la transition plus intéressante. Le processus devient plus naturel.

Selon les statistiques officielles, les transitions constituent le type d'effet dynamique dont la proportion est la plus élevée dans le système, atteignant plus de 60 %. C'est également l'une des raisons fondamentales pour lesquelles de nombreuses personnes se sentiront plus en douceur après avoir commencé avec Hongmeng NEXT - vous pouvez le voir partout.

L'omniprésente « source du vide »

Je me souviens qu'un collègue m'a partagé un exemple :

La première réaction des enfants d'aujourd'hui lorsqu'ils voient un écran n'est pas de chercher la télécommande, mais de cliquer dessus ou de la faire glisser avec leurs doigts.

À l'ère du plein écran, la manière dont la nouvelle génération interagit avec les produits numériques a été complètement réitérée - le glissement et le tapotement sont devenus les méthodes de saisie pour la plupart des appareils électroniques grand public - et la presse à axe Z est en train de mourir.

De nombreuses personnes manqueront les boutons des téléphones multifonctions car ils se sentent mieux dans la main et ont une confirmation tactile évidente.

C’est aussi la raison pour laquelle les écrans tactiles sont critiqués : un feedback insuffisant. Les grands constructeurs utilisent également diverses méthodes telles que les vibrations du moteur (tactile) et les effets sonores (auditifs) pour restituer des mouvements physiques rassurants sur un écran plat.

L'animation sur l'icône du système est une amélioration de la confirmation visuelle.

Le « système d'effets dynamiques gravitationnels » de Hongmeng NEXT simule la « force » des objets pendant le mouvement à travers divers effets dynamiques pour donner vie aux opérations interactives.

Huawei a incarné la force dans des sources inexistantes, remplissant chaque recoin de Hongmeng NEXT.

Par exemple, lorsque vous faites glisser la page, il y aura des « ressorts » sur les limites supérieure, inférieure, gauche et droite. Après avoir atteint la limite, il y aura un effet de rebond très naturel, vous indiquant que vous avez atteint la fin.

Laisser un certain espace élastique peut également éviter les contacts accidentels et empêcher le système d'être trop sensible, ce qui nous oblige à utiliser la force et à être prudent dans les opérations au niveau millimétrique.

De plus, les ressorts virtuels partout peuvent également favoriser dans une certaine mesure une large gamme de fonctionnement fluide : tout le corps sera lié avec un seul mouvement, ce qui est proche de l'effet de rebond réel.

La restauration des effets de mouvement du monde physique peut réduire les coûts d'apprentissage des utilisateurs, et ils peuvent rapidement démarrer avec de nouveaux appareils et systèmes en fonctionnant selon les habitudes de la vie « c'est comme ça ».

Pour ceux qui sont déjà familiers avec les opérations gestuelles ou le système Hongmeng, l'interaction avec les mains est la plus importante.

Il y a cette phrase sur le site officiel des développeurs Huawei :

Les effets d’animation doivent toujours se concentrer sur les opérations et être conformes aux attentes psychologiques des utilisateurs, et les mouvements des objets doivent être conformes au monde réel.

Les ingénieurs produits font de leur mieux pour compresser tout ce qui se trouve dans le monde tridimensionnel sur un écran bidimensionnel, tandis que les chefs de produit se creusent la tête pour imiter le monde réel sur un écran bidimensionnel.

▲ Photo de : rauno.com

En dernière analyse, l'étude approfondie de la conception des interactions est en fait une compréhension plus profonde de nous-mêmes : quels scénarios nécessitent un glissement ? Comment organiser les effets spéciaux pendant la transition ? Comment couvrir 99% des opérations avec un seul doigt ?

Si vous êtes comme moi et que vous êtes passé progressivement des machines à boutons aux pleins écrans, il n'est pas difficile de constater que le système interactif sur les téléphones mobiles nous convient en fait mieux - il ne nécessite presque aucune réflexion ni apprentissage, et vous pouvez simplement utilisez-le.

Lorsque vous n'êtes pas conscient de l'existence d'une interaction système, c'est le plus grand compliment d'un système, car toutes les considérations détaillées ci-dessus ont fait du produit une extension naturelle de notre corps.