Eles oferecem acesso rápido a informações e ações que os usuários precisam para realizar tarefas. Com um gesto de deslizar no mostrador do relógio, o usuário pode acompanhar o progresso das metas de condicionamento físico, conferir a previsão do tempo e muito mais. Inicie um app ou execute tarefas essenciais rapidamente nos blocos.
Criar designs responsivos e otimizados
Para ajudar você a adaptar os layouts de design a tamanhos de tela maiores, atualizamos o comportamento dos nossos layouts e componentes para ter um comportamento responsivo integrado, incluindo margens e padding baseados em porcentagem.
Se você estiver usando nossos modelos do ProtoLayout, poderá herdar essas atualizações automaticamente com a versão Beta mais recente da biblioteca Wear ProtoLayout do Jetpack. Além disso, você só precisa fornecer layouts em que adicionou conteúdo ou componentes extras após um ponto de interrupção de tamanho de tela. Para orientações e recomendações completas sobre como aproveitar um tamanho de tela maior, consulte nossas orientações sobre blocos. Os blocos têm uma altura de tela fixa. Por isso, ajustamos o padding para maximizar o espaço limitado da tela sem criar cortes indesejados.
Verificar se os componentes preenchem a largura disponível
Todos os componentes precisam ser criados de forma responsiva. Ao definir a altura e a largura como "expand", elas preenchem o espaço disponível. Inclua as margens necessárias para evitar que o conteúdo seja cortado pela tela arredondada.
Criar designs adaptáveis e diferenciados
Para aproveitar ao máximo o espaço extra em telas maiores, adicione um ponto de interrupção de tamanho em 225 dp. Esse ponto de interrupção permite revelar mais conteúdo, incluir mais botões ou dados ou mudar o layout para se adequar melhor à tela maior.
Isso exige um design diferente para cada ponto de interrupção. O design de tela maior (225 dp ou mais) pode incluir os seguintes elementos adicionais:
Mostrar o slot de título oculto anteriormente
Isso é recomendado em layouts com duas linhas antes do ponto de interrupção, em que o slot de título precisa ser removido para garantir o destino de toque mínimo de 48 dp.
Aumentar o tamanho ou mudar o estado dos componentes atuais
Isso pode ser feito para mostrar mais detalhes ou tornar o conteúdo mais fácil de ler rapidamente.
Adicionar slots de componentes no layout atual
Ao adicionar componentes, o layout oferece mais opções ou detalhes adicionais. Mas não deixe de garantir que o conteúdo continue fácil de entender.
Adicionar mais conteúdo na parte de baixo
Em alguns casos, é mais sensato adicionar botões de ação ou conteúdo na seção inferior, em vez de adicionar componentes no slot principal.
Atenção : um tamanho de tela maior nunca deve mostrar menos informações do que telas menores. Isso é especialmente relevante para comportamentos personalizados adicionados no ponto de interrupção.
Um exemplo comum disso é quando os componentes ou tamanhos de texto são aumentados além do ponto de interrupção e acabam mostrando menos nas telas maiores. As telas sempre precisam mostrar mais valor com o aumento do tamanho.
Comportamento responsivo e adaptável
O comportamento responsivo e adaptável depende dos três slots (seções) do layout.
Slot de ícone e título do app
Não há mudança de comportamento no ícone do app fornecido pelo sistema. O slot de título se adapta automaticamente ao tamanho maior da tela, mostrando mais caracteres. Há margens internas proporcionais (porcentagem) na seção superior para evitar cortes quando o tamanho da tela aumenta.
Slot principal (componentes)
Todos os componentes no slot principal precisam definir a largura e a altura como "expand" para que se adaptem automaticamente ao tamanho maior da tela. Há margens internas proporcionais (percentuais) na seção principal do slot e em cada linha dentro desse slot em alguns casos para evitar cortes quando o tamanho da tela aumenta. Se você usar uma combinação de raio do canto e layout, o slot principal poderá exigir margens maiores.
Slot na parte de baixo
Não há mudança de comportamento no botão ou texto da parte de baixo, mas a largura do botão e das caixas de texto se adaptam automaticamente ao tamanho maior da tela e ganham caracteres. Há margens internas proporcionais (porcentagem) no slot da parte de baixo para evitar cortes quando o tamanho da tela aumenta. Quando não há um slot na parte de baixo, uma margem padrão é adicionada automaticamente.
Crie experiências diferenciadas
Um layout totalmente personalizável, com 60 ou mais permutações integradas, permite uma personalização praticamente ilimitada. Os blocos são criados em um sistema baseado em slots. Assim, você pode substituir um slot do layout canônico por qualquer conteúdo ou componente e definir o componente como uma das muitas variantes e combinações de cores. Nesse caso, mantenha o comportamento responsivo e siga nossas recomendações de design.
Essas personalizações precisam ser limitadas e não podem desviar do modelo de mosaico. Isso mantém a consistência quando os usuários rolam o carrossel de blocos nos dispositivos Wear OS.