notícias

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

Há um mês, depois de recebermos o impulso do sistema Huawei Hongmeng NEXT, imediatamente fizemos uma experiência prática.

Sócios do departamento editorial da Aifaner também se revezaram para vivenciar isso. Embora todos tenham várias marcas de telefones principais diários, suas avaliações do sangue puro Hongmeng são geralmente as mesmas:

Bastante sedoso.

E você pode ver o tópico "#红梦NEXT suave e sedoso" em quase todas as plataformas sociais. Tenho a mesma sensação, mas ainda tenho algumas dúvidas:

• A suavidade sedosa é o resultado. Que tipo de processo a causa?
• Não há muita diferença entre o Hongmeng NEXT e o sistema da geração anterior. Então, quais são as diferenças nos detalhes?

Após um mês de experiência aprofundada, descobri alguns cantos e recantos do novo sistema da Huawei. Talvez essas otimizações tão sutis que quase não são notadas sejam a raiz da suavidade sedosa.

Portanto, hoje daremos uma olhada no Hongmeng NEXT de acordo com a “frequência de toque” de cada design, do pequeno ao grande, do ponto à superfície, do estático ao dinâmico.

Os ícones são tão importantes

A tela é a janela para a Internet.

Acho que esta afirmação não é precisa o suficiente. O que realmente pode ser chamado de "janela/canal" em um telefone celular deveria ser um aplicativo.

WeChat, Weibo, Xiaohongshu e TikTok... um ou mais deles são clicados quase a cada hora. Em comparação com outras partes do sistema, o ícone do aplicativo é clicado com mais frequência.

O design dos ícones de aplicativos passou por vários estágios de desenvolvimento: skeuomorfismo - planicidade - ajuste livre de skeuomorfismo e planicidade.

Para ser franco, ele alterna entre simulação e estilo conciso, mas nada mais é do que dois núcleos de design: transmissão de informações com precisão + estilo unificado.

A Huawei finalizou gradualmente o seu próprio estilo de ícone através do sistema de terceira geração EMUI-HarmonyOS-HarmonyOS NEXT.

O novo estilo de ícone é chamado de “Simulação de Luz” e possui 4 características muito óbvias:

①O contorno do ícone é conciso e fácil de entender, e você pode saber rapidamente o que ele faz;

② Use elementos semitransparentes e desfocados para empilhar para apresentar uma sensação de camadas, que é mais leve em peso visual do que a quase materialização pura e mais tridimensional do que o estilo plano puro;

③ Fortalecer o processamento de realce nas bordas dos gráficos para aprimorar a textura geral e destacar os elementos principais dos gráficos para que o olho possa encontrar os pontos-chave mais rapidamente;

④A cor do painel traseiro do ícone tem um leve gradiente e os objetos representados pela iluminação de cima para baixo parecem mais naturais ao olho humano, evitando o impacto e a brusquidão de fortes gradientes de cores.

O design do aplicativo dos quatro pontos acima faz com que os símbolos dos ícones na área de trabalho pareçam mais unificados. A sensação mais intuitiva é que isso é algo projetado por uma equipe, não o resultado de discussões em grupo.

Claro, "quase-objeto leve" é apenas uma tendência geral. Sempre haverá pessoas que gostam de um estilo mais próximo do real e tridimensional, então você também pode ajustá-lo manualmente para outro - as sombras das bordas. são mais pesados, os detalhes são mais específicos e as camadas são mais detalhadas e com cores mais brilhantes.

▲ A esquerda é um estilo skeuomórfico leve e a direita é um estilo skeuomórfico.

Não é difícil descobrir que mesmo os ícones skeuomórficos ainda seguem os princípios de design acima. O tom unificado também é usado em ícones do sistema.

O centro de controle, a interface de configurações e a barra de navegação do aplicativo do sistema possuem ícones do sistema, mas são facilmente esquecidos porque geralmente aparecem com texto.

Esta é também a primeira dificuldade no design de ícones de sistema: como mantê-los consistentes com o layout do texto? A solução da Huawei é caracterizar as imagens para que possam ser perfeitamente conectadas às fontes do sistema.

Ele pode se adaptar de forma inteligente de acordo com as mudanças na espessura do texto, garantindo que os ícones possam se adaptar de forma flexível a diferentes espessuras de texto e manter a coerência visual.

Também descobrimos outro detalhe durante a experiência. Os ícones do sistema do Hongmeng NEXT têm efeitos mais dinâmicos: flash de estrela, lanterna, Huawei Share, modo de proteção ocular, modo de economia de energia... todos têm efeitos exclusivos.

O novo sistema define 7 efeitos dinâmicos para ícones, por meio de uma combinação de aparecimento, desaparecimento, salto, dimensionamento, substituição, pulsação e cores variáveis.

Você pode estar pensando: qual é a relação entre o design dos ícones e a fluência do sistema?

De uma perspectiva pequena, a animação de ícones também faz parte do sistema, e a coerência e consistência dos movimentos afetarão a percepção do usuário sobre a suavidade do sistema, de uma perspectiva ampla, os ícones aparecem com muita frequência no sistema e no sistema; o número de vezes que os usuários os tocam também é muito alto.

Um design unificado e harmonioso permite ver a sombra de um sistema nas páginas que você alterna, evitando “desordem”.

Portanto, o design consistente dos elementos estáticos é a base para que o sistema se torne suave.

como água

Com os ícones do aplicativo e do sistema definidos, vejamos os cenários de uso específicos.

A adaptação da UI do aplicativo e do sistema de telefones celulares em tela cheia é sempre criticada por ser muito "violenta". Eles apenas tornam os aplicativos com proporção de tela padrão cada vez maiores e não aproveitam ao máximo a tela grande para exibir mais informações. o dobro da área, assim como a estratégia preguiçosa dos tablets nos primeiros anos.

Uma interface confortável deve ser como a água, que sempre enche o recipiente perfeitamente, não importa sua aparência.

Esta solução de adaptação “semelhante à água” é chamada de “layout responsivo” pela Huawei.

Quando o tamanho do contêiner da janela muda, os elementos da interface podem mudar automaticamente para se adaptarem à mudança no tamanho do contêiner.

A Huawei consegue uma transição suave e adaptação da interface ao esticar simultaneamente o plano de fundo da página, o texto, os ícones, os componentes e outros elementos.

Diferentes componentes podem ser dimensionados de acordo com uma proporção fixa em páginas diferentes.

Quando a página muda, o layout da IU também muda de acordo. Memo é um bom exemplo.

No modo paisagem, a interface é dividida em duas, com a barra de diretórios à esquerda e o menu secundário à direita. Isso não apenas evita o alongamento excessivo e o espaço em branco excessivo em uma exibição de diretório único, mas também aproveita ao máximo o espaço horizontal da tela.

Chegando à adaptação de pequenos componentes mais específicos, o Hongmeng NEXT se adapta a diferentes tamanhos, alterando sua própria forma e densidade de informações.

Isso é muito semelhante à ideia de design dos widgets da área de trabalho: altere o tamanho da pasta e use cartões de serviço de tamanhos diferentes para caber no espaço vazio da área de trabalho.

Existem muitas soluções de layout responsivas, mas a lógica subjacente é exatamente a mesma:

• Adapte-se como água parada
• transição como água corrente

Estas soluções de adaptação escondidas nos cantos também facilitam a integração de software e hardware.

A tela dividida do Hongmeng NEXT é muito boa. Na solução tradicional, desde que duas telas possam ser separadas, a tarefa está concluída.

Mas com base nisso, o novo sistema também corta os cantos da pequena janela para a mesma curvatura do canto R da tela.

Para ser sincero, o design das janelas e telas deveria ser assim, mas como o sistema Android precisa se adaptar a muitas marcas e modelos, a adaptação perfeita se tornou um grande problema.

E essa também é uma vantagem adicional trazida pelo sistema Hongmeng puro-sangue: o sistema nativo foi projetado para atender esta marca de modelos, não havendo necessidade de considerar outros.

Reproduza arte 3D em uma tela 2D

Há um mês, se você me perguntasse "Quais atualizações ocorreram na interface do Hongmeng NEXT?"

Posso apenas dizer que a camada de efeitos especiais de “vidro fosco” foi adicionada em muitos lugares, mas a adição de um único elemento é difícil de melhorar a suavidade do sistema em um nível.

Se você deseja alcançá-lo e ser percebido como “sedoso” pelos usuários, na verdade é um projeto sistemático e você deve considerar tudo. Após um mês de experiência, classifiquei o bom funcionamento do sangue puro Hongmeng em duas partes:

• Sentido de camadas
• brincar com força

Vejamos primeiro as camadas. O efeito de vidro fosco (desfocado) geralmente aparece em cenas como abertura e fechamento de aplicativos, tela negativa, pesquisa suspensa, fechamento de fundo, tela dividida e divisão em movimento. linhas.

Em comparação com o sistema anterior, existem de fato muito mais efeitos de desfoque, mas, ao mesmo tempo, a animação e o dimensionamento adicionados dos ícones da área de trabalho podem simular o processo de foco e desfocagem do olho humano. O que chamamos de realidade durante a interação O sentimento é o. resultado do efeito combinado dos dois.

O efeito lifting da área de trabalho é simulado por meio de dimensionamento, que também reflete intuitivamente o relacionamento hierárquico do sistema.

Abrir aplicativos, criar novas tarefas, desbloquear a tela, etc., todos pertencem aos níveis superior e inferior. Hongmeng NEXT definiu vários efeitos de animação para este tipo de comutação:

Além disso, também existem alternâncias entre níveis cruzados e o mesmo nível, e há animações correspondentes.

Ao subdividir a relação hierárquica e aplicar diferentes efeitos especiais, um deles é melhorar o sentido tridimensional do sistema através de camadas e tornar a transição menos rígida. O outro é integrar animação não linear em cada transição, e a operação se tornará. mais fácil, ou assim parece.

O vídeo de demonstração no site oficial ilustra bem o efeito da animação não linear na fluência.

A otimização das relações hierárquicas da Huawei não se limita a grandes transições de páginas, mas também se concentra em pequenos ícones.

Podemos ver as seguintes animações únicas em todo o novo sistema:

Seja destacando a caixa de pesquisa, ampliando o ícone do aplicativo ou ligando e desligando as teclas de função, é difícil ver transições forçadas neste sistema. Ele sempre pode usar uma série de métodos como forma, cor, deslocamento e escala. fazer a transição acontecer. O processo se torna mais natural.

Segundo estatísticas oficiais, as transições são o tipo de efeito dinâmico com maior proporção no sistema, chegando a mais de 60%. Esta também é uma das razões fundamentais pelas quais muitas pessoas se sentirão mais tranquilas depois de começarem a usar o Hongmeng NEXT - você pode ver isso em todos os lugares.

A onipresente "primavera vazia"

Lembro que um colega compartilhou um exemplo comigo:

A primeira reação das crianças de hoje ao ver uma tela não é encontrar o controle remoto, mas clicar ou deslizar com os dedos.

Na era da tela cheia, a forma de interação da nova geração com produtos digitais foi completamente iterada - deslizar e tocar tornaram-se os métodos de entrada para a maioria dos produtos eletrônicos de consumo - e a imprensa do eixo Z está morrendo.

Muitas pessoas sentirão falta dos botões dos feature phones porque eles se sentem melhor na mão e têm uma confirmação óbvia do toque físico.

Esta é também a razão pela qual as telas sensíveis ao toque são criticadas: feedback insuficiente. Os principais fabricantes também usam vários métodos, como vibração motora (tátil) e efeitos sonoros (auditivos) para restaurar movimentos físicos tranquilizadores em uma tela plana.

A animação no ícone do sistema é um aprimoramento de confirmação visual.

O "sistema de efeito dinâmico de gravidade" do Hongmeng NEXT simula a "força" dos objetos durante o movimento por meio de vários efeitos dinâmicos para dar vida às operações interativas.

A Huawei incorporou força em fontes inexistentes, preenchendo todos os cantos do Hongmeng NEXT.

Por exemplo, ao deslizar a página, haverá “molas” nos limites superior, inferior, esquerdo e direito. Depois de atingir o limite, haverá um efeito rebote muito natural, informando que você chegou ao fim.

Deixar uma certa quantidade de espaço elástico também pode evitar toques acidentais e evitar que o sistema seja muito sensível, o que exige que usemos força e sejamos cautelosos em operações milimétricas.

Além disso, as molas virtuais em todos os lugares também podem promover uma ampla gama de operação suave até certo ponto: todo o corpo estará ligado a um único movimento, que está próximo do efeito rebote real.

Restaurar os efeitos de movimento do mundo físico pode reduzir os custos de aprendizagem dos usuários, e eles podem começar rapidamente com novos dispositivos e sistemas operando de acordo com os hábitos de vida do tipo "é assim que as coisas são".

Para quem já está familiarizado com a operação por gestos ou com o sistema Hongmeng, a interação com as mãos é a mais significativa.

Existe esta frase no site oficial do desenvolvedor da Huawei:

Os efeitos de animação devem sempre focar nas operações e estar em conformidade com as expectativas psicológicas dos usuários, e os movimentos dos objetos devem estar em conformidade com o mundo real.

Os engenheiros de produto fazem o possível para comprimir tudo o que existe no mundo tridimensional em uma tela bidimensional, enquanto os gerentes de produto quebram a cabeça para imitar o mundo real em uma tela bidimensional.

▲ Foto de: rauno.com

Em última análise, o estudo aprofundado do design de interação é, na verdade, uma compreensão mais profunda de nós mesmos: quais cenários exigem deslizamento? Como organizar os efeitos especiais durante a transição? Como cobrir 99% das operações com um dedo?

Se você é como eu e passou passo a passo das máquinas de botões para telas cheias, não é difícil descobrir que o sistema interativo em telefones celulares é realmente mais adequado para nós - quase não há necessidade de pensar e estudar, apenas use isto.

Quando você não tem consciência da existência da interação do sistema, é o maior elogio a um sistema, pois todas as considerações detalhadas acima fizeram do produto uma extensão natural do nosso corpo.