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?

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:

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:

- 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):

- 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:

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.

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:

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