Empurrar impusável

No momento, os telefones celulares são cada vez mais usados ​​não só para consumo de conteúdo, mas também para criação.



E os desenvolvedores se deparam com a questão - como colocar a interface de um grande aplicativo em uma tela pequena de um telefone celular?



imagem


Abaixo do corte está uma história sobre como resolver o problema de uma interface complexa para aplicativos musicais. O aplicativo foi feito para a plataforma VK Mini Apps , mas, talvez, os princípios gerais sejam adequados para outras plataformas também.



História das interfaces do editor de música



Editores de música são programas complexos com muitos gráficos. Mesmo a mais simples "Uma árvore de Natal nasceu na floresta" consiste em várias faixas para bateria, baixo, piano, e cada uma das faixas contém centenas de notas.



Tudo isso deve ser colocado de alguma forma na tela, e todos os elementos devem ser editáveis.



A IU geralmente se parece com isto:



imagem


Os próprios princípios de UX / UI para programas musicais não mudaram por muitos anos. Era assim que eles eram há 30 anos:



imagem


- na verdade, mais cores e botões foram adicionados.



Como as interfaces móveis evoluíram?



No caminho extenso padrão.



A interface do aplicativo de desktop foi retirada e reduzida em tamanho, e a funcionalidade foi cortada impiedosamente.



Aqui está um exemplo de uma versão móvel do FL Studio (este é um dos melhores DAWs):



imagem


- os botões são muito pequenos para serem pressionados com o dedo, os elementos não cabem na tela e estão parcialmente ocultos nos menus suspensos e as imagens das faixas são muito pequenas para serem vistas.



Dificuldades em portar a interface para telas pequenas



Para esclarecer a profundidade do problema, considere um equalizador convencional de 10 bandas.



A maioria das pessoas o usa sem saber o que é. Por exemplo, aqui está o equalizador integrado ao serviço Yandex Music:



imagem


para uma pressão conveniente com os dedos, os botões e as barras de rolagem devem ter pelo menos 1 cm de tamanho. O equalizador tem 10 barras de rolagem, ou seja, sua largura total deve ser de 10 cm.



Mas isso é mais do que a largura dos telefones celulares! E este é apenas um dos muitos controles.



Acontece que você precisa fazer tudo pequeno e inconveniente para pressionar ou tornar visível apenas uma pequena parte dos controles e descartar o resto ou ocultá-los em menus suspensos, etc.



Encontrar uma solução



Existem abordagens para ajudá-lo a criar interfaces complexas, mas fáceis de usar, para telas pequenas?



Certo.



São cartas. E não só nos celulares, mas também no desktop.



imagem


Os mapas usam camadas de escala e visibilidade para os elementos. Mostra milhões de objetos interativos em uma tela pequena.



A maioria os usa intuitivamente, o que confirma a utilidade dessa abordagem de UX / UI.



Exemplo de solução



Foi decidido colocar as faixas umas sobre as outras e adicionar escala a todo o Piano roll junto com os controles.



Na estática, ele se parece com outros aplicativos do campo da música:



imagem




Mas na dinâmica fica claro que seu comportamento é muito diferente:



Abra o vídeo de trabalho com o aplicativo



O projeto do vídeo pode ser aberto no VKontakte para testar:



  • abrir no aplicativo
  • funciona tanto em telefones quanto dentro de mensagens de feed do VKontakte


A



aplicação total da abordagem de escalonamento da IU permitiu que um grande número de elementos coubesse em uma tela pequena.



  • todos os elementos estão "próximos" e rapidamente acessíveis
  • o usuário tem a oportunidade de ver todo o projeto como um todo, e não em partes que cabem em uma pequena tela



All Articles