Botões virtuais: tornando a interação humana-máquina mais intuitiva e eficiente

RESUMO Este artigo apresenta um sistema inovador de gesto virtual que imita a experiência do botão físico. O sistema calcula os botões virtuais e seus ângulos de rotação a partir da entrada de vários toques, aproveita a posição e o tamanho do botão como dimensões estendidas e incorpora princípios aprimorados de design da interface do usuário para obter um ajuste rápido e preciso de valores de ampla faixa com forte resistência à interferência. Implementado com sucesso no YAP Video Player, demonstra excelente experiência do usuário e amplo potencial de aplicativos em ambientes de interação desktop, móvel, automotivo, VR e futuros. TL; DR Physical vs. Digital: O debate da interface humana-máquina, tudo começou com uma conversa casual com minha irmã no início de 2024. Estávamos discutindo notícias sobre botões físicos retornando em veículos elétricos. Isso provocou minha curiosidade: por que os botões físicos ainda têm um lugar neste mundo dominado pela tela sensível ao toque? Depois de mergulhar profundamente em pesquisas, descobri que as telas sensíveis ao toque e os botões físicos têm vantagens distintas adequadas para diferentes cenários. O paradigma de toque + GUI, os dispositivos móveis modernos, usam predominantemente os designs de tela sensível ao toque + GUI com estas características: Forças: Interação Intuitiva: A manipulação direta dos elementos na tela parece natural. Aplicações versáteis: ADAPTS DE DESIGN altamente flexível a diversos casos de uso. Funcionalidade rica: suporta interações e fluxos de trabalho complexos. Limitações: dependência visual: o modelo “Localize-Then-Operate” consome atenção visual significativa (pense em navegação por menu de vários níveis). Alta carga cognitiva: as mesmas funções geralmente requerem padrões de interação diferentes entre os aplicativos. Falta de feedback tátil: falta as sensações físicas que os usuários esperam. Má resistência à interferência: projetado para ambientes estáveis ​​para desktop/móveis sem considerar vibração ou movimento. Physical Knobs: The Analog Advantage Traditional knobs offer compelling benefits: Simple operation: Perfect for adjusting continuous values ​​Muscle memory: Fixed positions enable eyes-free operation Clear physical boundaries: Tactile feedback includes resistance and detents Limited quantity: Cost, complexity, and reliability scaling: Each additional knob increases manufacturing costs, installation difficulty, maintenance overhead, mechanical failure probability, and space requirements Cognitive limitations: Too many knobs reduce muscle memory effectiveness Automotive Requisitos: uma interfaces de veículo de tempestade perfeita Demista: Operação simples Distração mínima Feedback tátil Resistência à interferência A análise revela um padrão claro: os ambientes automotivos requerem interfaces seguras, simples e resistentes a interferências. GUIs de mesa/celular tradicionais ficam aquém, enquanto os botões físicos se destacam. No entanto, devido às limitações de quantidade, os botões físicos geralmente são reservados para funções críticas ou de alta frequência (temperatura, volume, etc.). O desafio principal se torna: como podemos capturar os benefícios intuitivos dos botões físicos sem os custos associados e os requisitos espaciais? Abordagem da solução: projetar botões virtuais que simulam as experiências físicas do botão melhorar o design da interface do usuário para reduzir a dependência visual do design inicial: imitar os botões físicos Modelo Matemático I Desenvolvi um modelo matemático simples para maconha virtual. Um botão virtual pode ser completamente descrito por quatro parâmetros: posição central C, raio r, ângulo de rotação θ e valor correspondente V, representado como (c, r, θ, v). Cálculo do ângulo: a rotação do botão é calculada através de diferenças de ângulo cumulativo: Δθ = θ₁ – θ₀ Digite o modo de tela cheia Sair do modo de tela cheia mapeamento: o valor muda com o ângulo Alterações através de um modo de tela linear: v₁ = v₀ + α α × δθ Enter e a tela completa do modo de tela completa onde v₀, v₁, v₁, v₀ v₀ + α α × δθ Razão de conversão de parâmetro de sensibilidade do parâmetro ângulo a valor Algoritmo de implementação da tela sensível ao toque: calcule as distâncias entre todos os pontos de toque, selecione os dois pontos P₁ (x₁, y₁) e P₂ (x₂, y₂) com a distância máxima: o vetor primário (reduz o impacto do ruído): CENTO: C = (x₁+x₂)/2, (y₁ ₁ ₁ ia) e o ponto de em ruído). Ângulo de rotação: calcule Δθ através do ângulo do vetor primário Alterações de reimaginação A IU tradicional da interração segue um paradigma “localize-then-then-operado” baseado em visão. Os elementos da interface do usuário ocupam certas posições da tela, exigindo que os usuários localizem visualmente os elementos de destino (botões, menus) antes de interagir com eles (clicando, arrastando). Embora essa abordagem ofereça interação intuitiva e cenários versáteis de aplicação, ela também introduz alta carga cognitiva e pesada dependência visual. Esse modelo de design se originou e permanece adequado para ambientes de desktop e móveis – mas se torna um passivo sério quando aplicado a interfaces automotivas. Princípios de design da interface do botão virtual Para minimizar a dependência visual e garantir a segurança da direção, adotei esses princípios de design: sem posições fixas: os botões virtuais não têm posição fixa, mas sigo a posição do dedo, que pode reduzir a atenção visual necessária para o posicionamento. Grandes áreas de operação distinguíveis: designar uma área de operação suficientemente grande na tela (grande o suficiente para operações de rotação e com espaço redundante para distúrbios como solavancos). Qualquer gesto de rotação nessa área de operação é interpretado como rotação do botão. A área de operação pode ser distinguida através de aspectos visuais, auditivos e táteis. Por exemplo, a área de operação usa cores ou padrões proeminentes como plano de fundo; Emite sons de alerta quando os dedos tocam na área de operação; Ele fornece feedback contínuo de vibração durante a operação dentro da área e a vibração para quando os dedos saem da área de operação. Ativação com reconhecimento de contexto: Defina ações de ativação (despertar de voz, padrões específicos de deslizamento) para ativar as zonas de operação. Esses Windows flutuantes-Dismissis quando não são necessários. Sistema multi-knob: diferentes ações de ativação permitem diferentes botões virtuais sem custos adicionais de hardware. Diga “Ajuste o volume” → Zona de controle de volume aparece; Diga “Ajuste o assento” → Zona de controle do assento aparece. Zonas diferentes devem ser claramente distinguíveis (diferentes origens, diferentes sons de alerta ou diferentes padrões de vibração). Aprimoramento tátil: a vibração da tela e outras tecnologias de feedback háptico aumentam o realismo e a intuitividade do botão virtual. Resultados do protótipo Passei cerca de duas semanas completando o protótipo do botão virtual em um dispositivo Android. Achei notavelmente eficaz – a operação é semelhante aos botões físicos, intuitivos e naturais; E o desempenho é excelente, com uma experiência suave, mesmo em telefones de baixo custo, permitindo ajustes rápidos e precisos. Comparado aos componentes comumente usados ​​como deslizante ou passo para ajustar os valores em dispositivos móveis e cenários de mesa, o controle deslizante é rápido, mas impreciso, enquanto o Stepper é preciso, mas lento. E como utiliza o ângulo de rotação para ajustar os valores, possui resistência a interferência natural aos inchaços horizontais e verticais, tornando -o muito adequado para ambientes automotivos e outros ambientes instáveis. Projeto adicional: além dos botões físicos após a conclusão do design inicial, explorei possibilidades adicionais. O protótipo funcionou de forma excelente, mas usava apenas o ângulo de rotação para ajustar. De acordo com o modelo matemático, os botões virtuais ainda têm dois parâmetros C e R não usados ​​- eles também poderiam ser utilizados? Através da experimentação, descobri os limites de precisão operacional para diferentes tipos de gestos sob condições de atenção leve: rotação: mais preciso com a resistência de interferência mais forte (inchaços, vibrações). Limitado pelo ângulo de rotação por gesto e exigindo espaço de buffer de interferência, os valores controláveis ​​estão abaixo de 100, normalmente 30-80. Escala: menos preciso com a resistência à interferência variando pelo uso. Em telas pequenas, como telefones, os valores controláveis ​​são abaixo de 10. Tradução: resistência moderadamente precisa, mas baixa interferência. Em cenários de baixa interferência, os valores controláveis ​​são menores que os gestos de rotação; Em ambientes acidentados/vibratórios, torna-se amplamente ineficaz (muitos jogadores oferecem funcionalidade de deslizamento para Seek que falha em ambientes automotivos). Com base nesses experimentos, os gestos de rotação têm melhor desempenho em cenários de alta interferência (ambientes automotivos), enquanto outros gestos devem ser evitados. Em cenários normais (aplicativos de desktop, dispositivos portáteis), os gestos de rotação também são mais precisos e eficientes do que os métodos de ajuste existentes (steppers, sliders). No entanto, todos os gestos ficam aquém em cenários de alta precisão ou ampla gama. Considere as aplicações do timer: Mesmo limitando a um dia produz 24 × 60 × 60 = 86.400 segundos. Como os gestos individuais podem controlar com precisão apenas dezenas de valores, eles não podem mapear para 86.400 valores, forçando a redução da faixa ou o compromisso de precisão. O timer da Apple exemplifica isso dividindo o tempo de tempo em três rodas separadas – cada um com o manuseio de apenas dezenas de valores, mas exigindo três ajustes separados, resultando em baixa eficiência. O timer da Apple também fornece inspiração: o tratamento de uma seleção de hora/minuto/segunda como uma dimensão adicional transforma uma variável unidimensional com uma linha enorme em um sistema multidimensional com sub-ranges gerenciáveis. Esse princípio se estende aos botões virtuais, aproveitando os parâmetros não utilizados (C, R) para introduzir novas dimensões – o que eu chamo de extensão da dimensão. Através da extensão da dimensão, a capacidade representacional dos botões virtuais aumenta drasticamente. Caso de aplicação 1: Design aprimorado do timer usando raio do botão para selecionar horas, minutos ou segundos (raio < r₁ -> horas; r₁ ≤ raio ≤ r₂ -> minutos; raio> r₂ -> segundos), com ângulo de rotação ajustando valores específicos. O botão se torna três anéis concêntricos, com a escala de dedos permitindo uma alternância fácil entre diferentes anéis. Um gesto de rotação define o tempo de maneira rápida e precisamente. Caso de aplicação 2: Edição de vídeo avançada para edição de vídeo ou navegação por vigilância que requer várias velocidades de reprodução, além do mapeamento de unidade de tempo discreto, funções contínuas podem ser construídas (para simplificar, usando uma função linear como exemplo): unidade de rota (unidade de tempo r): unidade de linha de aretramento): unidade de rota): unidade de time rastreio (unidade de linha): unidade de linha de rota): unidade de tempo r): unidade de tempo r): unidade de time (unidade de tempo r). Caso 3: Yap Media Player no meu reprodutor de vídeo Yap, a posição do botão e o tamanho selecionam variáveis ​​simultaneamente. Durante a reprodução, os gestos no lado esquerdo usam botões virtuais maiores (disseminação mais larga) para controle de volume e botões menores para obter brilho. Da mesma forma, os gestos do lado direito usam botões grandes/médios/pequenos correspondentes a incrementos de busca de 1 segundos/30 segundos/10 minutos. Isso permite uma navegação rápida e precisa para qualquer posição de vídeo. Vídeos de demonstração: Baixe e tente (aplicativo gratuito, iOS/Android): Extensões de ambiente VR/AR Como os botões virtuais dependem apenas de posições da ponta dos dedos, eles são perfeitamente adequados para ambientes VR/AR. Através da visão omputora ou de outros métodos para rastrear as posições da ponta dos dedos em tempo real, as rotações do botão podem ser calculadas. Com mecanismos apropriados de ativação/desativação, a operação VR/AR contada se torna possível. Aguardando: o futuro da interação atualmente, estou me candidatando a uma patente para o gesto do botão. Acredito que os gestos do botão, como uma tecnologia fundamental de interação humana-máquina, serão amplamente aplicáveis ​​nos ambientes de interação de mesa, móveis, VR e futuros, tornando a interação humana-máquina mais eficaz e envolvente! Reflexão sobre a inovação Este artigo apresenta o processo de pensamento em ordem lógica, mas a inovação real é cheia de saltos e acaso! O processo de inovação é árduo e desafiador, mas a emoção quando a inspiração ocorre e o cumprimento de concluir um produto me dão a unidade de continuar inovando! PSAN Introdução Vídeo do botão virtual: Link do artigo original: botões virtuais: Tornando a interação humana-máquina mais intuitiva e eficiente Conteúdo técnico original | Por favor, credite ao compartilhar

Fonte