O Trackr é um app de gerenciamento de tarefas de amostra. Embora seja utilizado principalmente para explorar padrões comuns de IU do ponto de vista do suporte à acessibilidade, o Trackr é também uma das amostras nas quais demonstramos as práticas recomendadas do Modern Android Development. Recentemente, adaptamos o app para as telas grandes. Então, vamos dar uma olhada em como a aplicação do Material Design e de padrões responsivos produziu uma experiência do usuário mais refinada e intuitiva em dispositivos com telas grandes.
Navegação Antes : na tela Tasks, era possível acessar as opções Archive e Settings no menu da barra inferior do app. Nas telas grandes, o controle do menu é um alvo de toque minúsculo em um local inconveniente, e a barra inferior do app fica excessivamente esticada.
À esquerda: navegação em telefone. À direita: navegação em tablet. Depois : quando a tela é mais larga, agora mostramos um trilho de navegação . Também posicionamos o botão de ação flutuante (que abre a tela New Task) no trilho de navegação e removemos totalmente a barra inferior do app.
Trilho de navegação em telas grandes. Embora essa mudança tenha sido feita para o uso em dispositivos maiores, ela também beneficia os telefones no modo paisagem porque permite um espaço vertical maior para a visualização da lista de tarefas.
Trilho de navegação em telefone na orientação paisagem. Layouts de dois painéis Antes : as telas Tasks e Archive ocupavam toda a largura da tela, e tocar em um item substituía a lista pelos detalhes do item selecionado. Nas telas grandes, os elementos da IU eram esticados ou agrupados de um lado, e não havia um equilíbrio na aparência da tela.
A aparência é natural nos telefones, mas a utilização do espaço nas telas grandes fica abaixo da ideal. Depois : as telas Tasks e Archive mostram uma IU de lista/detalhes utilizando SlidingPaneLayout . Escrevemos sobre como fazer isso em um artigo anterior relacionado às mudanças que fizemos no app Google I/O. Confira esse artigo se tiver interesse pelos detalhes técnicos.
A tela Task Detail também tinha um botão de ação flutuante (para abrir a tela Edit Task). Mas, com o trilho de navegação visível, isso resultaria em dois botões de ação flutuantes, o que não é ideal. Em vez disso, ocultamos o segundo botão de ação flutuante e adicionamos um botão de edição à barra de ferramentas na parte superior direita.
Os dois painéis utilizam melhor o espaço da tela. Edit Task e New Task Antes : durante a edição de uma tarefa, a IU Edit Task substituía os detalhes da tarefa e ocupava toda a tela. Assim como em Task Detail, havia um desequilíbrio na aparência dessa tela. A IU New Task tinha o mesmo problema (na verdade, New Task e Edit Task são o mesmo destino em nosso gráfico de navegação).
À esquerda: Edit Task em telefones. À direita: Edit Task em tablets. Depois : nas telas grandes, usamos um DialogFragment para que a IU Edit Task flutuasse sobre o restante do conteúdo.
A IU flutuante coloca em foco o objetivo atual do usuário. Originalmente, tentamos exibir essa IU no painel de detalhes, substituindo Task Detail. Embora isso tenha sido bem simples, logo percebemos que não estávamos satisfeitos com essa abordagem por alguns motivos:
Isso não fazia sentido para a criação de uma nova tarefa, um recurso agora universalmente acessível no trilho de navegação. Podíamos fazer de New Task um destino separado e dar ao recurso um comportamento diferente, mas essa não parecia uma boa solução. Edit Task tem uma aparência muito similar a Task Detail, só que com os campos em estado editável. Em um layout de dois painéis, quando substituímos Task Detail por Edit Task no painel de detalhes, a mudança é praticamente imperceptível. Não há ênfase visual suficiente onde deveria haver. Por outro lado, DialogFragment gera o engajamento do usuário e coloca o foco em primeiro plano. Não queremos sair de Edit Task (ou New Task) até que o usuário salve as mudanças ou que haja confirmação de que as mudanças podem ser descartadas. Isso era fácil de interceptar quando a única saída era usar o botão "Voltar". Mas, com o novo design dos apps, temos outros casos com os quais nos preocupar: o usuário pode tocar em algo no trilho de navegação ou em uma tarefa diferente no painel de lista. Desativar temporariamente todos esses elementos seria muito complicado. Com DialogFragment, todos eles ficam por trás da caixa de diálogo, e o usuário não pode interagir com eles, que é exatamente o que queríamos. A IU New Task usa o mesmo padrão de Task Edit. O importante aqui é saber que o design mais simples pode ter lacunas de funcionalidade quando você o experimenta em um dispositivo. Quando isso acontecer, pare um pouco, concentre-se na experiência do usuário e procure por um padrão de design que facilite isso.
Em andamento Concluído Com o aumento da popularidade de tablets e dispositivos dobráveis, criar uma IU responsiva é mais importante do que nunca. Mostramos como a adição de um trilho de navegação e o uso de SlidingPaneLayout não só melhora a aparência do app Trackr, como também melhora drasticamente a usabilidade e cria experiências que não seriam possíveis em um celular. Também mostramos como, às vezes, é necessário repensar o design de acordo com a usabilidade e não só com o espaço da tela a fim de atender às necessidades dos usuários.
Esperamos que você goste do novo Trackr aprimorado! Confira o código em github.com/android/trackr .
Um comentário :
Onyx-Circle
Onyx Circle AG brings talents and companies together. Our broad network within the industries makes us a strong partner
when it comes to tracking down and connecting with experts.Digitalization
Digitization is permanently changing all areas of our economy and the relevant labor markets. Methods of networked planning, implementation
and management through the use of software dominate in the areas of construction and real estate management as well as in the industrial
sectors through the increased use of automation.
Postar um comentário