notizia

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

Un mese fa, dopo aver ricevuto la spinta del sistema Huawei Hongmeng NEXT, abbiamo subito fatto un'esperienza pratica.

A sperimentarlo si sono alternati anche i partner della redazione di Aifaner. Sebbene tutti abbiano marche diverse di telefoni principali quotidiani, le loro valutazioni sull'Hongmeng purosangue sono generalmente le stesse:

Abbastanza setoso.

E puoi vedere l'argomento "#红梦NEXT liscio e setoso" su quasi tutte le piattaforme social. Ho la stessa sensazione, ma ho ancora alcune domande:

• Il risultato è una morbidezza setosa, che tipo di processo la causa?
• Non c'è molta differenza tra Hongmeng NEXT e il sistema della generazione precedente. Quindi quali sono le differenze nei dettagli?

Dopo un mese di esperienza approfondita, ho scoperto alcuni angoli e fessure del nuovo sistema Huawei. Forse queste ottimizzazioni, così sottili da essere appena percettibili, sono la radice della morbidezza setosa.

Quindi oggi daremo uno sguardo a Hongmeng NEXT in base alla "frequenza del tocco" di ciascun disegno, dal piccolo al grande, dal punto alla superficie, dallo statico al dinamico.

Le icone sono così importanti

Lo schermo è la finestra su Internet.

Penso che questa affermazione non sia sufficientemente precisa Ciò che può realmente essere chiamata una "finestra/canale" su un telefono cellulare dovrebbe essere un'applicazione.

WeChat, Weibo, Xiaohongshu e TikTok... quasi ogni ora si clicca su uno o più di essi. Rispetto ad altre parti del sistema, l'icona dell'app viene cliccata più spesso.

Il design delle icone delle app ha attraversato diverse fasi di sviluppo: scheumorfismo - planarità - regolazione libera di scheumorfismo e planarità.

Per dirla senza mezzi termini, salta avanti e indietro tra simulazione e stile conciso, ma non è altro che due nuclei di progettazione: trasmissione accurata delle informazioni + stile unificato.

Huawei ha progressivamente finalizzato il proprio stile di icone attraverso il sistema di terza generazione EMUI-HarmonyOS-HarmonyOS NEXT.

Il nuovo stile dell'icona si chiama "Simulazione della luce" e presenta 4 caratteristiche molto evidenti:

①Il contorno dell'icona è conciso e facile da capire e puoi sapere cosa fa a colpo d'occhio;

② Utilizzare elementi semitrasparenti e sfocati da impilare per presentare un senso di stratificazione, che è più leggero in termini di peso visivo rispetto alla pura quasi-materializzazione e più tridimensionale rispetto al puro stile piatto;

③ Rafforzare l'elaborazione delle luci sui bordi della grafica per migliorare la trama complessiva ed evidenziare gli elementi principali della grafica in modo che l'occhio possa trovare i punti chiave più rapidamente;

④Il colore del pannello posteriore delle icone ha una leggera sfumatura e gli oggetti rappresentati dall'illuminazione dall'alto verso il basso appaiono più naturali all'occhio umano, evitando l'impatto e la brusca pendenza di forti sfumature di colore.

Il design dell'applicazione dei quattro punti precedenti fa sì che i simboli delle icone sul desktop sembrino più unificati. La sensazione più intuitiva è che si tratti di qualcosa progettato da un team, non del risultato di discussioni di gruppo.

Naturalmente, il "quasi oggetto leggero" è solo una tendenza generale. Ci saranno sempre persone a cui piace uno stile più vicino alla realtà e tridimensionale, quindi puoi anche adattarlo manualmente a un altro: le ombre dei bordi. sono più pesanti, i dettagli sono più specifici e gli strati sono più dettagliati e i colori sono più luminosi.

▲ La sinistra è uno stile scheumorfico leggero e la destra è uno stile scheumorfico.

Non è difficile scoprire che anche le icone scheumorfe seguono ancora i principi di progettazione di cui sopra. Il tono unificato viene utilizzato anche nelle icone di sistema.

Il centro di controllo, l'interfaccia delle impostazioni e la barra di navigazione dell'applicazione di sistema dispongono tutti di icone di sistema, ma vengono facilmente trascurate perché di solito vengono visualizzate con del testo.

Questa è anche la prima difficoltà nel progettare le icone di sistema: come mantenerle coerenti con il layout del testo? La soluzione di Huawei è caratterizzare le immagini in modo che possano essere perfettamente collegate ai caratteri di sistema.

Può adattarsi in modo intelligente in base ai cambiamenti nello spessore del testo, garantendo che le icone possano adattarsi in modo flessibile ai diversi spessori del testo e mantenere la coerenza visiva.

Abbiamo scoperto anche un altro dettaglio durante l'esperienza. Le icone di sistema di Hongmeng NEXT hanno effetti più dinamici: flash stellare, torcia, condivisione Huawei, modalità protezione occhi, modalità risparmio energetico... tutti hanno effetti esclusivi.

Il nuovo sistema imposta 7 effetti dinamici per le icone, attraverso una combinazione di apparizione, scomparsa, rimbalzo, ridimensionamento, sostituzione, pulsazione e colori variabili.

Potresti pensare, qual è la relazione tra il design delle icone e la fluidità del sistema?

Da una piccola prospettiva, anche l'animazione delle icone fa parte del sistema e la coerenza e la consistenza dei movimenti influenzeranno la percezione dell'utente della fluidità del sistema; da una prospettiva ampia, le icone appaiono molto frequentemente nel sistema, e così via anche il numero di volte in cui gli utenti li toccano è molto elevato.

Un design unitario e armonioso ti consente di vedere l'ombra di un sistema nelle pagine che scorri avanti e indietro, evitando "disordine".

Pertanto, una progettazione coerente degli elementi statici è la base affinché il sistema diventi fluido.

come l'acqua

Una volta disposte le icone dell'applicazione e del sistema, esaminiamo gli scenari di utilizzo specifici.

L'adattamento dell'applicazione e dell'interfaccia utente del sistema dei telefoni cellulari a schermo intero è sempre criticato per essere troppo "violento". Rendono le applicazioni con proporzioni dello schermo standard sempre più grandi e non sfruttano appieno lo schermo grande per visualizzare più informazioni il doppio dell'area, proprio come la strategia pigra sui tablet nei primi anni.

Un'interfaccia comoda dovrebbe essere come l'acqua, che riempie sempre perfettamente il contenitore, qualunque sia il suo aspetto.

Questa soluzione di adattamento "simile all'acqua" viene chiamata "layout responsivo" da Huawei.

Quando la dimensione del contenitore della finestra cambia, gli elementi dell'interfaccia possono cambiare automaticamente per adattarsi alla modifica della dimensione del contenitore.

Huawei ottiene una transizione fluida e un adattamento dell'interfaccia allungando contemporaneamente lo sfondo della pagina, il testo, le icone, i componenti e altri elementi.

Componenti diversi possono essere ridimensionati in base a un rapporto fisso su pagine diverse.

Quando la pagina cambia, anche il layout dell'interfaccia utente cambierà di conseguenza. Memo è un buon esempio.

In modalità orizzontale l'interfaccia è divisa in due, con la barra delle directory a sinistra e il menu secondario a destra. Ciò non solo evita uno stiramento eccessivo e uno spazio bianco eccessivo nella visualizzazione di una singola directory, ma sfrutta anche appieno lo spazio orizzontale dello schermo.

Venendo all'adattamento di piccoli componenti più specifici, Hongmeng NEXT si adatta a diverse dimensioni modificando la propria forma e densità di informazioni.

Questo è molto simile all'idea progettuale dei widget del desktop: cambia la dimensione della cartella e usa schede di servizio di dimensioni diverse per adattarle allo spazio vuoto sul desktop.

Esistono molte soluzioni di layout responsive, ma la logica di fondo è esattamente la stessa:

• Adattati come l'acqua ferma
• transizione come l'acqua che scorre

Queste soluzioni di adattamento nascoste negli angoli facilitano anche l'integrazione di software e hardware.

Lo schermo diviso di Hongmeng NEXT è molto buono. Nella soluzione tradizionale, finché è possibile separare due schermi, l'attività è completata.

Ma su questa base, il nuovo sistema ritaglia anche gli angoli della piccola finestra secondo la stessa curvatura dell'angolo R dello schermo.

A dire il vero, il design delle finestre e degli schermi dovrebbe essere così, ma poiché ci sono troppe marche e modelli a cui il sistema Android deve adattarsi, l'adattamento perfetto è diventato un grosso problema.

E questo è anche un ulteriore vantaggio portato dal sistema purosangue Hongmeng: il sistema nativo è progettato per servire questa marca di modelli, e non c’è bisogno di prenderne in considerazione altri.

Riproduci arte 3D su uno schermo 2D

Un mese fa, se mi chiedessi "Quali aggiornamenti sono stati apportati all'interfaccia utente di Hongmeng NEXT?"

Posso solo dirvi che lo strato degli effetti speciali di "vetro smerigliato" è stato aggiunto in molti punti, ma l'aggiunta di un singolo elemento difficilmente migliora di un livello la fluidità del sistema.

Se vuoi raggiungerlo ed essere percepito come "setoso" dagli utenti, in realtà è un progetto sistematico e devi considerare tutto. Dopo un mese di esperienza, ho classificato il buon funzionamento di Hongmeng purosangue in due parti:

• Senso di stratificazione
• giocare con la forza

Diamo prima un'occhiata alla stratificazione. L'effetto vetro smerigliato (sfocato) ne fa parte. Di solito appare in scene come l'apertura e la chiusura di app, lo schermo negativo, la ricerca a discesa, la chiusura dello sfondo, lo schermo diviso e la divisione in movimento. linee.

Rispetto al sistema precedente, ci sono infatti molti più effetti di sfocatura, ma allo stesso tempo vengono aggiunti gli effetti dinamici e il ridimensionamento delle icone del desktop. Insieme, possono simulare il processo di messa a fuoco e sfocatura dell'occhio umano chiamare realtà durante l'interazione. Il sentimento è il risultato dell'effetto combinato dei due.

L'effetto sollevamento del desktop viene simulato tramite il ridimensionamento, che riflette anche in modo intuitivo la relazione gerarchica nel sistema.

L'apertura di app, la creazione di nuove attività, lo sblocco dello schermo, ecc. appartengono tutti ai livelli superiore e inferiore Hongmeng NEXT ha impostato diversi effetti di animazione per questo tipo di commutazione:

Inoltre, ci sono anche passaggi tra livelli incrociati e lo stesso livello e ci sono animazioni corrispondenti.

Suddividendo la relazione gerarchica e applicando diversi effetti speciali, uno è quello di migliorare il senso tridimensionale del sistema attraverso i livelli e rendere la transizione meno rigida, l'altro è integrare l'animazione non lineare in ogni transizione e l'operazione diventerà più semplice Più agevole, o almeno così sembra.

Il video dimostrativo sul sito ufficiale illustra bene l'effetto dell'animazione non lineare sulla fluidità.

L'ottimizzazione delle relazioni gerarchiche da parte di Huawei non si limita alle transizioni di pagina di grandi dimensioni, ma si concentra anche su icone piccole.

Possiamo vedere le seguenti animazioni one-shot ovunque nel nuovo sistema:

Che si tratti di evidenziare la casella di ricerca, ingrandire l'icona dell'app o attivare e disattivare i tasti funzione, è difficile vedere transizioni forzate su questo sistema. Può sempre utilizzare una serie di metodi come forma, colore, spostamento e ridimensionamento rendere la transizione più interessante. Il processo diventa più naturale.

Secondo le statistiche ufficiali, le transizioni sono il tipo di effetto dinamico con la percentuale più alta nel sistema, raggiungendo oltre il 60%. Questo è anche uno dei motivi fondamentali per cui molte persone si sentiranno più a loro agio dopo aver iniziato con Hongmeng NEXT: puoi vederlo ovunque.

L'onnipresente "primavera vuota"

Ricordo che un collega ha condiviso con me un esempio:

La prima reazione dei bambini di oggi quando vedono uno schermo non è cercare il telecomando, ma cliccarlo o farlo scorrere con le dita.

Nell'era dello schermo intero, il modo di interagire con i prodotti digitali della nuova generazione è stato completamente modificato - lo scorrimento e il tocco sono diventati i metodi di input per la maggior parte dell'elettronica di consumo - e la stampa ad asse Z sta morendo.

A molte persone mancheranno i pulsanti dei feature phone perché si sentono meglio nella mano e hanno un'evidente conferma del tocco fisico.

Questo è anche il motivo per cui vengono criticati i touch screen: feedback insufficiente. I principali produttori utilizzano anche vari metodi come la vibrazione del motore (tattile) e gli effetti sonori (uditivi) per ripristinare movimenti fisici rassicuranti su uno schermo piatto.

L'animazione sull'icona di sistema è un miglioramento della conferma visiva.

Il "sistema di effetti dinamici della gravità" di Hongmeng NEXT simula la "forza" degli oggetti durante il movimento attraverso vari effetti dinamici per dare vita alle operazioni interattive.

Huawei ha incarnato la forza in sorgenti inesistenti, riempiendo ogni angolo di Hongmeng NEXT.

Ad esempio, quando si fa scorrere la pagina, ci saranno delle "molle" sui bordi superiore, inferiore, sinistro e destro. Dopo aver raggiunto il bordo, si verificherà un effetto di rimbalzo molto naturale, che ti dirà che hai raggiunto la fine.

Lasciare un certo spazio elastico può anche evitare tocchi accidentali ed evitare che il sistema sia troppo sensibile, il che richiede forza e cautela nelle operazioni millimetriche.

Inoltre, le molle virtuali ovunque possono anche favorire in una certa misura un'ampia gamma di operazioni fluide: l'intero corpo sarà collegato con un singolo movimento, che è vicino all'effetto di rimbalzo reale.

Ripristinare gli effetti di movimento del mondo fisico può ridurre i costi di apprendimento degli utenti, che possono iniziare rapidamente a utilizzare nuovi dispositivi e sistemi operando secondo le abitudini della vita "così è com'è".

Per coloro che hanno già familiarità con il funzionamento dei gesti o con il sistema Hongmeng, l'interazione con le mani è la più significativa.

C'è questa frase sul sito ufficiale degli sviluppatori Huawei:

Gli effetti di animazione dovrebbero sempre concentrarsi sulle operazioni e conformarsi alle aspettative psicologiche degli utenti, mentre i movimenti degli oggetti dovrebbero essere conformi al mondo reale.

Gli ingegneri di prodotto fanno del loro meglio per comprimere tutto nel mondo tridimensionale in uno schermo bidimensionale, mentre i product manager si scervellano per imitare il mondo reale su un display bidimensionale.

▲ Immagine da: rauno.com

In ultima analisi, lo studio approfondito dell’interaction design è in realtà una comprensione più profonda di noi stessi: quali scenari richiedono lo scivolamento? Come organizzare gli effetti speciali durante la transizione? Come coprire il 99% delle operazioni con un dito?

Se siete come me e passo dopo passo siete passati dalle macchinette a bottoni allo schermo intero, non è difficile scoprire che il sistema interattivo sui telefoni cellulari è in realtà più adatto a noi - non richiede quasi nessun pensiero o apprendimento, e potete semplicemente usarlo.

Quando non sei consapevole dell'esistenza dell'interazione del sistema, è il più grande complimento per un sistema, perché tutte le considerazioni di cui sopra nei dettagli hanno reso il prodotto un'estensione naturale del nostro corpo.