Uma experiência de computador é adaptável desde o início, oferecendo suporte a vários tamanhos em telas conectadas ou em janelas. Crie uma interface adaptável para oferecer suporte a toda a gama de dispositivos Android. Os layouts adaptáveis são essenciais para experiências em computadores, permitindo que os usuários redimensionem as janelas dos apps sem problemas.
Para preparar seu app para uma experiência de computador, comece adaptando a interface dele e depois passe para o design de interação de entrada e densidade. Para mais informações, consulte Layouts adaptáveis. Para praticar com um laboratório de design, consulte o Laboratório de design adaptável.
Pense em painéis
Adote uma abordagem baseada em painéis para o layout usando agrupamento e contenção. O conteúdo pode ser organizado usando contêineres visuais ou agrupamento implícito com espaços em branco. Esses painéis oferecem flexibilidade, já que podem ser expandidos, restringidos, ocultos, movidos ou exibidos como pop-ups. Projetar com painéis simplifica o processo de criação de experiências coesas em vários dispositivos móveis e pode ser integrado às grades atuais para otimizar alinhamentos de layout complexos.
O que fazer
Escala
Embora as telas grandes ofereçam mais espaço para conteúdo, é preciso considerar o espaço extra e fatores ergonômicos, como a distância de visualização. A tipografia precisa ser um pouco maior para o conforto dos usuários que podem estar mais distantes ou digitando em um teclado.
Os elementos e tipos da interface são dimensionados em telas estendidas e conectadas e podem ter escalas diferentes devido às resoluções de tela.
Use uma ou duas etapas acima nos seus designs de escala tipográfica atuais ou considere implementar uma escala tipográfica especializada projetada para computadores e telas maiores. Ajustes opinativos podem ser feitos nos seus designs para melhorar a qualidade editorial.
A imagem também aumenta e ocupa toda a tela. Isso permite que o usuário veja a planta com mais detalhes, mas não usa o espaço de forma eficiente. Tenha isso em mente ao estruturar os elementos da interface.
Conteúdo e elementos da interface
Agora que o conteúdo está agrupado e dimensionado, parte da interface também pode mudar ou ser atualizada para se ajustar melhor aos pontos de interrupção.
Em cada painel de conteúdo, decida se e como ele vai se adaptar. Analise o conteúdo. Se uma linha de lista mudar para um card, o conteúdo vai perder a eficiência de interação e a capacidade de leitura? Os componentes podem se comportar de maneira diferente em vários pontos de interrupção. Você pode adaptar a largura ou a visibilidade deles ou até mesmo trocar componentes.
Decida a largura máxima de cada elemento da interface e copie dentro de um painel. Os elementos da interface não podem ser esticados até a largura total nem distorcidos. Defina o padding e as margens máximas nos painéis. O texto precisa ser fácil de ler, limitando o comprimento das linhas. Limite o texto curto a cerca de 60 caracteres, enquanto o conteúdo longo pode ser maior.
O que fazer
Use a divulgação progressiva otimizada. Mais conteúdo pode aparecer quando o usuário aumenta o tamanho da janela? Considere se o conteúdo adicional aumenta a produtividade com menos cliques ou cria confusão.
O conteúdo em cada painel pode mudar de layout, dependendo do conteúdo, ao ser redistribuído para diferentes colunas e estruturas de grade. Por exemplo, uma grade vertical com um carrossel pode ser atualizada para uma grade de alvenaria com um carrossel de recursos. Considere a mudança vertical para elementos e combine com restrições e mudanças de apresentação. Talvez você não queira mudar componentes assim, dependendo do consumo de conteúdo.
Considere permitir que o usuário ajuste o layout de acordo com a preferência dele para máxima legibilidade e produtividade.
Navegação
Depois de adaptar o conteúdo e os elementos da interface, decida como os painéis de conteúdo interagem entre si e com a hierarquia de navegação. Em vez de tocar para navegar até o conteúdo detalhado, você pode usar o espaço adicional da tela para mostrar detalhes e conteúdo de apoio lado a lado.
- Se uma barra de navegação estiver em uso, a barra inferior precisará ser atualizada para uma coluna de navegação na lateral da tela para aumentar a ergonomia. Não estique uma barra de navegação na parte de baixo.
- Para a navegação secundária, como guias, considere fixá-las em uma largura máxima para facilitar a navegação com precisão.
- As barras de apps também podem ser fixadas no painel de conteúdo correspondente, mas não confunda a hierarquia de navegação.
Densidade
Uma experiência de computador pode mudar a densidade de interação e a densidade visual devido à precisão de entrada e ao tamanho da tela.
- É possível aumentar a densidade de elementos visuais, como dados de tabela, sem sobrecarregar o usuário em comparação com um layout de smartphone compacto. Considere qualquer densidade de conteúdo opcional e sempre permita o escalonamento de texto no layout. Não defina tamanhos de tipo fixos.
- Os componentes precisam ter um destino de clique mais exato. Alvos de clique intrínsecos ao redor dos componentes podem levar a cliques incorretos.
Entradas
Mais entradas significam mais padrões de interação para seus usuários.
Quando um usuário tem um mouse e um teclado, o app precisa considerar o estado de passar o cursor e o foco.
- Adicione estados ao passar o cursor para entradas de ponteiro, como um mouse e uma caneta stylus.
- Capture estados de foco para elementos quando os usuários navegarem usando a tecla Tab para acessibilidade.
- Considere os estados do cursor, já que ele também pode ajudar a comunicar a interação e o estado do app ao usuário.
Estados adicionais podem aumentar a eficiência.
- A funcionalidade de clique com o botão direito do mouse pode incluir menus de contexto para acesso rápido a recursos.
- As dicas flutuantes podem ajudar a integrar usuários.
- Os atalhos do teclado ajudam usuários avançados a aumentar a produtividade.
