2024-08-22
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Nachdem wir vor einem Monat den Anstoß für das Huawei Hongmeng NEXT-System erhalten hatten, machten wir sofort eine praktische Erfahrung.
Auch Partner aus der Aifaner-Redaktion wechselten sich ab, um es zu erleben. Obwohl jeder unterschiedliche Marken von täglichen Haupttelefonen hat, sind ihre Bewertungen des reinblütigen Hongmeng im Allgemeinen dieselben:
Ziemlich seidig.
Und das Thema „#红梦NEXT glatt und seidig“ ist auf fast jeder sozialen Plattform zu sehen. Ich habe das gleiche Gefühl, habe aber noch ein paar Fragen:
Nach einem Monat intensiver Erfahrung entdeckte ich einige Ecken und Winkel des neuen Systems von Huawei. Vielleicht sind diese Optimierungen, die so subtil sind, dass sie kaum wahrnehmbar sind, die Ursache für die seidenweiche Glätte.
Deshalb werfen wir heute einen Blick auf Hongmeng NEXT entsprechend der „Berührungsfrequenz“ jedes Designs, von klein bis groß, von Punkt bis Oberfläche, von statisch bis dynamisch.
Symbole sind so wichtig
Der Bildschirm ist das Fenster zum Internet.
Ich denke, diese Aussage ist nicht genau genug. Was man auf einem Mobiltelefon eigentlich als „Fenster/Kanal“ bezeichnen kann, sollte eine Anwendung sein.
WeChat, Weibo, Xiaohongshu und TikTok … einer oder mehrere davon werden fast stündlich angeklickt. Im Vergleich zu anderen Teilen des Systems wird das App-Symbol am häufigsten angeklickt.
Das Design der App-Icons hat mehrere Entwicklungsstufen durchlaufen: Skeuomorphismus – Flachheit – freie Anpassung von Skeuomorphismus und Flachheit.
Um es ganz klar auszudrücken: Es springt zwischen Simulation und prägnantem Stil hin und her, aber es sind nichts weiter als zwei Designkerne: genaue Informationsvermittlung + einheitlicher Stil.
Huawei hat durch das EMUI-HarmonyOS-HarmonyOS NEXT-System der dritten Generation schrittweise seinen eigenen Icon-Stil verfeinert.
Der neue Symbolstil heißt „Lichtsimulation“ und weist vier sehr offensichtliche Merkmale auf:
①Die Symbolübersicht ist prägnant und leicht verständlich, und Sie können auf einen Blick erkennen, was es bewirkt.
② Verwenden Sie zum Stapeln halbtransparente und unscharfe Elemente, um ein Gefühl der Schichtung zu vermitteln, das ein geringeres visuelles Gewicht als die reine Quasi-Materialisierung und dreidimensionaler als der reine flache Stil hat.
③ Verstärken Sie die Hervorhebungsverarbeitung an den Rändern von Grafiken, um die Gesamttextur zu verbessern und die Kernelemente von Grafiken hervorzuheben, damit das Auge die wichtigsten Punkte schneller finden kann.
④Die Farbe der Symbolrückseite weist einen leichten Farbverlauf auf, und die durch die Beleuchtung von oben nach unten dargestellten Objekte erscheinen für das menschliche Auge natürlicher, wodurch die Wirkung und Abruptheit starker Farbverläufe vermieden wird.
Das Anwendungsdesign der oben genannten vier Punkte lässt die Symbolsymbole auf dem Desktop einheitlicher aussehen. Das intuitivste Gefühl ist, dass dies etwas ist, das von einem Team entworfen wurde, und nicht das Ergebnis von Gruppendiskussionen.
Natürlich ist „Licht-Quasi-Objekt“ nur ein allgemeiner Trend. Es wird immer Leute geben, die einen Stil mögen, der näher an der Realität und dreidimensional ist, also kann man ihn auch manuell an einen anderen anpassen – die Randschatten sind schwerer, die Details sind spezifischer und die Ebenen sind detaillierter und die Farben sind leuchtender.
▲ Die linke Seite ist ein leichter skeuomorpher Stil und die rechte Seite ist ein skeuomorpher Stil.
Es ist nicht schwer festzustellen, dass selbst skeuomorphe Symbole immer noch den oben genannten Designprinzipien folgen. Der einheitliche Ton wird auch in Systemsymbolen verwendet.
Das Kontrollzentrum, die Einstellungsoberfläche und die Navigationsleiste der Systemanwendung verfügen alle über Systemsymbole, die jedoch leicht übersehen werden, da sie normalerweise mit Text angezeigt werden.
Dies ist auch die erste Schwierigkeit beim Entwerfen von Systemsymbolen: Wie können sie mit dem Textlayout konsistent gehalten werden? Die Lösung von Huawei besteht darin, Bilder so zu charakterisieren, dass sie nahtlos mit Systemschriftarten verbunden werden können.
Es kann sich intelligent an Änderungen der Textstärke anpassen und so sicherstellen, dass sich Symbole flexibel an unterschiedliche Textstärken anpassen und die visuelle Kohärenz aufrechterhalten können.
Wir haben während des Erlebnisses auch ein weiteres Detail entdeckt. Die Systemsymbole von Hongmeng NEXT haben dynamischere Effekte: Sternblitz, Taschenlampe, Huawei-Freigabe, Augenschutzmodus, Energiesparmodus ... alle haben exklusive Effekte.
Das neue System setzt 7 dynamische Effekte für Symbole durch eine Kombination aus Erscheinen, Verschwinden, Springen, Skalieren, Ersetzen, Pulsieren und variablen Farben.
Sie fragen sich vielleicht: Welche Beziehung besteht zwischen Icon-Design und Systemkompetenz?
Aus einer kleinen Perspektive ist die Symbolanimation ebenfalls Teil des Systems, und die Kohärenz und Konsistenz der Bewegungen beeinflusst die Wahrnehmung der Glätte des Systems durch den Benutzer. Aus einer großen Perspektive erscheinen Symbole sehr häufig im System Die Häufigkeit, mit der Benutzer sie berühren, ist ebenfalls sehr hoch.
Ein einheitliches und harmonisches Design ermöglicht es Ihnen, den Schatten eines Systems auf den Seiten, die Sie hin- und herwechseln, zu erkennen und so „Unordnung“ zu vermeiden.
Daher ist eine konsequente statische Elementgestaltung die Grundlage für ein reibungsloses System.
wie Wasser
Lassen Sie uns anhand der Anwendungs- und Systemsymbole einen Blick auf die spezifischen Nutzungsszenarien werfen.
Die Anwendungs- und System-UI-Anpassung von Vollbild-Mobiltelefonen wird immer als zu „gewalttätig“ kritisiert. Sie machen die Anwendungen mit dem Standard-Bildschirmverhältnis nur größer und breiter und nutzen den großen Bildschirm nicht voll aus, um mehr Informationen anzuzeigen doppelt so groß, genau wie die Lazy-Strategie auf Tablets in den Anfangsjahren.
Eine komfortable Schnittstelle sollte wie Wasser sein, das den Behälter immer perfekt füllt, egal wie er aussieht.
Diese „wasserähnliche“ Anpassungslösung wird von Huawei „Responsive Layout“ genannt.
Wenn sich die Größe des Fenstercontainers ändert, können sich Schnittstellenelemente automatisch ändern, um sich an die Änderung der Containergröße anzupassen.
Huawei erreicht einen reibungslosen Übergang und eine reibungslose Anpassung der Benutzeroberfläche, indem der Seitenhintergrund, Text, Symbole, Komponenten und andere Elemente gleichzeitig gestreckt werden.
Verschiedene Komponenten können nach einem festen Verhältnis auf verschiedenen Seiten skaliert werden.
Wenn sich die Seite ändert, ändert sich auch das Layout der Benutzeroberfläche entsprechend. Memo ist ein gutes Beispiel.
Im Querformat ist die Benutzeroberfläche zweigeteilt, mit der Verzeichnisleiste auf der linken Seite und dem sekundären Menü auf der rechten Seite. Dies vermeidet nicht nur eine Überdehnung und übermäßigen Leerraum in der Anzeige eines einzelnen Verzeichnisses, sondern nutzt auch den horizontalen Bildschirmraum vollständig aus.
Bei der Anpassung spezifischer kleiner Komponenten passt sich Hongmeng NEXT an unterschiedliche Größen an, indem es seine eigene Form und Informationsdichte ändert.
Dies ist der Designidee von Desktop-Widgets sehr ähnlich: Ändern Sie die Größe des Ordners und verwenden Sie Servicekarten unterschiedlicher Größe, um den leeren Platz auf dem Desktop auszufüllen.
Es gibt viele Responsive-Layout-Lösungen, aber die zugrunde liegende Logik ist genau dieselbe:
Diese in den Ecken versteckten Adaptionslösungen erleichtern zudem die Integration von Soft- und Hardware.
Der geteilte Bildschirm von Hongmeng NEXT ist sehr gut. Bei der herkömmlichen Lösung ist die Aufgabe erledigt, solange zwei Bildschirme getrennt werden können.
Auf dieser Grundlage schneidet das neue System aber auch die Ecken des kleinen Fensters auf die gleiche Krümmung wie die R-Ecke des Bildschirms.
Um ehrlich zu sein, sollte das Design von Fenstern und Bildschirmen so sein, aber da es zu viele Marken und Modelle gibt, an die sich das Android-System anpassen muss, ist die perfekte Anpassung zu einem großen Problem geworden.
Und das ist auch ein zusätzlicher Vorteil, den das reinblütige Hongmeng-System mit sich bringt: Das native System ist darauf ausgelegt, diese Modellmarke zu bedienen, und es besteht keine Notwendigkeit, andere zu berücksichtigen.
Spielen Sie 3D-Kunst auf einem 2D-Bildschirm
Wenn Sie mich vor einem Monat gefragt hätten: „Welche Verbesserungen gab es an der Benutzeroberfläche von Hongmeng NEXT?“
Ich kann Ihnen nur sagen, dass an vielen Stellen die Spezialeffektschicht „Milchglas“ hinzugefügt wurde, aber das Hinzufügen eines einzelnen Elements ist schwierig, die Glätte des Systems um eine Ebene zu verbessern.
Wenn Sie dies erreichen und von Benutzern als „seidig“ wahrgenommen werden möchten, handelt es sich tatsächlich um ein systematisches Projekt, bei dem Sie alles berücksichtigen müssen. Nach einem Monat Erfahrung habe ich den reibungslosen Betrieb des reinblütigen Hongmeng in zwei Teile eingeteilt:
Schauen wir uns zunächst die Schichtung an. Der Milchglaseffekt (unscharf) ist ein Teil davon. Er erscheint normalerweise in Szenen wie dem Öffnen und Schließen von Apps, dem Negativ-Einzelbildschirm, der Dropdown-Suche, dem Schließen des Hintergrunds, dem geteilten Bildschirm und dem Verschieben von Teilen Linien.
Im Vergleich zum Vorgängersystem gibt es zwar viel mehr Unschärfeeffekte, aber gleichzeitig kommen die dynamischen Effekte und die Skalierung von Desktop-Symbolen hinzu, die den Prozess der Fokussierung und Defokussierung des menschlichen Auges simulieren können Rufen Sie die Realität während der Interaktion auf. Gefühl ist das Ergebnis der kombinierten Wirkung beider.
Durch die Skalierung wird der Lifting-Effekt des Desktops simuliert, der auch die hierarchischen Beziehungen im System intuitiv widerspiegelt.
Das Öffnen von Apps, das Erstellen neuer Aufgaben, das Entsperren des Bildschirms usw. gehören zu den oberen und unteren Ebenen. Hongmeng NEXT hat für diese Art des Umschaltens mehrere Animationseffekte festgelegt:
Darüber hinaus gibt es auch Wechsel zwischen Level-übergreifenden und gleichen Levels sowie entsprechende Animationen.
Durch die Unterteilung der hierarchischen Beziehung und die Anwendung verschiedener Spezialeffekte soll zum einen der dreidimensionale Sinn des Systems durch Ebenen verbessert und der Übergang weniger starr gestaltet werden. Zum anderen sollen nichtlineare Animationen in jeden Übergang integriert werden, wodurch die Bedienung vereinfacht wird . Glatter, so scheint es.
Das Demonstrationsvideo auf der offiziellen Website veranschaulicht gut die Auswirkung nichtlinearer Animationen auf die Sprachkompetenz.
Huaweis Optimierung hierarchischer Beziehungen beschränkt sich nicht nur auf große Seitenübergänge, sondern konzentriert sich auch auf kleine Icons.
Überall im neuen System können wir die folgenden One-Shot-Animationen sehen:
Egal, ob es sich um das Hervorheben des Suchfelds, das Zoomen des App-Symbols oder das Ein- und Ausschalten der Funktionstasten handelt, es ist schwierig, erzwungene Übergänge auf diesem System zu erkennen. Es kann immer eine Reihe von Methoden wie Form, Farbe, Verschiebung und Skalierung verwenden Machen Sie den Übergang interessanter.
Laut offizieller Statistik sind Übergänge der dynamische Effekttyp mit dem höchsten Anteil im System und erreichen mehr als 60 %. Dies ist auch einer der wesentlichen Gründe dafür, dass sich viele Menschen nach der Einnahme von Hongmeng NEXT geschmeidiger fühlen – das sieht man überall.
Der allgegenwärtige „Leeren-Frühling“
Ich erinnere mich, dass ein Kollege ein Beispiel mit mir geteilt hat:
Die erste Reaktion heutiger Kinder beim Anblick eines Bildschirms besteht nicht darin, nach der Fernbedienung zu suchen, sondern sie mit den Fingern anzuklicken oder zu bewegen.
Im Zeitalter des Vollbildmodus wurde die Art und Weise, wie die neue Generation mit digitalen Produkten interagiert, völlig verändert – Schieben und Tippen sind zu den Eingabemethoden für die meisten Unterhaltungselektronikgeräte geworden – und die Z-Achsen-Presse stirbt aus.
Viele Menschen werden die Tasten von Feature-Phones vermissen, weil sie besser in der Hand liegen und eine deutliche physische Berührungserkennung ermöglichen.
Dies ist auch der Grund, warum Touchscreens kritisiert werden: unzureichendes Feedback. Große Hersteller nutzen außerdem verschiedene Methoden wie Motorvibrationen (taktil) und Soundeffekte (auditiv), um beruhigende körperliche Bewegungen auf einem Flachbildschirm wiederherzustellen.
Die Animation auf dem Systemsymbol ist eine visuelle Bestätigungsverbesserung.
Das „Gravity Dynamic Effect System“ von Hongmeng NEXT simuliert die „Kraft“ von Objekten während der Bewegung durch verschiedene dynamische Effekte, um interaktive Operationen zum Leben zu erwecken.
Huawei hat Kraft in nicht existierende Federn verkörpert und jeden Winkel von Hongmeng NEXT ausgefüllt.
Wenn Sie beispielsweise die Seite verschieben, treten an der oberen, unteren, linken und rechten Grenze „Federn“ auf. Nach Erreichen der Grenze tritt ein ganz natürlicher Rückpralleffekt auf, der Ihnen anzeigt, dass Sie das Ende erreicht haben.
Das Belassen eines gewissen elastischen Raums kann auch versehentliche Berührungen verhindern und verhindern, dass das System zu empfindlich wird, was von uns Kraftaufwand und Vorsicht bei Vorgängen im Millimeterbereich erfordert.
Darüber hinaus können die virtuellen Federn überall bis zu einem gewissen Grad auch einen weiten Bereich reibungsloser Bedienung fördern: Der gesamte Körper wird mit einer einzigen Bewegung verbunden, was dem echten Rückpralleffekt nahe kommt.
Durch die Wiederherstellung der Bewegungseffekte der physischen Welt können die Lernkosten der Benutzer gesenkt werden, und sie können schnell mit neuen Geräten und Systemen beginnen, indem sie nach den „So ist es“-Gewohnheiten im Leben vorgehen.
Für diejenigen, die bereits mit der Gestenbedienung oder dem Hongmeng-System vertraut sind, ist die Interaktion mit den Händen am bedeutsamsten.
Auf der offiziellen Huawei-Entwickler-Website gibt es diesen Satz:
Animationseffekte sollten sich immer auf den Betrieb konzentrieren und den psychologischen Erwartungen der Benutzer entsprechen, und Objektbewegungen sollten der realen Welt entsprechen.
Produktingenieure versuchen ihr Bestes, alles in der dreidimensionalen Welt auf einen zweidimensionalen Bildschirm zu komprimieren, während Produktmanager sich den Kopf zerbrechen, um die reale Welt auf einem zweidimensionalen Display nachzubilden.
▲ Bild von: rauno.com
Letztlich ist das vertiefte Studium des Interaktionsdesigns tatsächlich ein tieferes Verständnis unserer selbst: Welche Szenarien erfordern ein Gleiten? Wie arrangiere ich die Spezialeffekte während des Übergangs? Wie kann man 99 % der Operationen mit einem Finger abdecken?
Wenn Sie wie ich sind und Schritt für Schritt von Tastenmaschinen auf Vollbildschirme umgestiegen sind, fällt es nicht schwer, herauszufinden, dass das interaktive System auf Mobiltelefonen tatsächlich besser für uns geeignet ist – es erfordert fast kein Nachdenken und Lernen, und Sie können es einfach Benutze es.
Wenn Sie sich der Existenz einer Systeminteraktion nicht bewusst sind, ist das das größte Kompliment für ein System, denn alle oben genannten Überlegungen im Detail haben das Produkt zu einer natürlichen Erweiterung unseres Körpers gemacht.
Sammeln und organisieren Sie die neuesten Nachrichteninformationen und stellen Sie sie für alle kostenlos zur Verfügung.
