Portuguese, Brazilian feliratok

← 05-15 Nick Butcher Falando sobre Telas Pequenas

05-15 Nick Butcher Falando sobre Telas Pequenas

Beágyazókód kérése
5 Languages

Showing Revision 13 created 09/30/2014 by Fran Ontanaya.

  1. Então, o último inconveniente do celular
    é a tela pequena. Essa pode parecer
  2. a restrição óbvia, e basicamente
    significa que não podemos
  3. colocar muita coisa num
    smartphone com tela
  4. bem pequena, mas há duas
    técnicas realmente fantásticas
  5. que podemos usar para ajudar
    a otimizar nossa pequena UI.
  6. - Sim, elas se chamam
    combinação e refluxo.
  7. E vamos conversar com um
    desenvolvedor de design Android
  8. chamado Nick Butcher,
    que parte do time Android,
  9. sobre como fazer esse trabalho
    nos seu aplicativos.
  10. - Então, Android não é um
  11. tamanho único para todos os OS.
    Ele vem em diferentes tamanhos
  12. e formas. Desde telefones pequenos
    a grandes tablets, televisores
  13. e outros. A grande notícia é que
    Android foi construído
  14. desde sua base para ser capaz
    de se enquadrar nessa variedade
  15. e te dar ferramentas para lidar com isso.
  16. Então, desde o início Android
    te permitiu redimensionar
  17. sua interface pra cima e pra baixo
    em diferentes aparelhos.
  18. O problema é que redimensionamento
    tem suas limitações.
  19. Então vou te guiar através
    de uns erros comuns
  20. que nós vemos quando se confia
    muito em redimensionamento
  21. e daí vou mostrar meios
    alternativos
  22. para lidar com isso.
  23. Então, o primeiro problema que vemos
    com freqüência é o de ter linhas
  24. de comprimento excessivas. Então,
    nesse aplicativo, o texto e as imagens
  25. estão corendo na largura total
    da tela do aparelho.
  26. Num aparelho menor, do tamanho de um
    celular, isso pode ser tranqüilo.
  27. Mas quando você vai além
  28. de um certo tamanho, se torna
    desconfortável. Especialmente
  29. se você estiver olhando larguras de
    linhas de texto, você gostaria de ter
  30. entre 45 e 75 caracteres de texto
    para manter uma experiência
  31. de leitura confortável.
    O usuário pode facilmente
  32. passar os olhos no texto.
    E nesse aplicativo
  33. podemos ver claramente
    que isso é excedido.
  34. O outro problema que vemos
    comumente é o de conteúdo
  35. desequilibrado. Então, nesse exemplo
  36. vamos ver que há muito conteúdo
    acumulado no canto esquerdo
  37. superior da tela e há espaços
    em branco imensos
  38. no resto da tela. Isso leva a
  39. uma sensação perturbadora,
  40. que faz seu aplicativo se completamente
    inadequado para o esse aparelho.
  41. E o ultimo problema que vemos
    com freqüência é mais de uma
  42. oportunidade quase perdida,
    de não fazer o melhor uso
  43. do que está disponível para você.
    Então nesse exemplo,
  44. podemos ter um aplicativo
    que mostra várias fotos.
  45. Como podemos ver, há esses pequenos
    ícones, todos agrupados
  46. em um lado só. É realmente uma pena
  47. não usar essas belas telas
    grandes, quando todo
  48. esse espaço extra está disponível pra você
  49. Então você vai querer evitar isso.
  50. Esse são os erros freqüentes
    que vemos por confiar muito
  51. em redimensionamentos, e a resposta
    para como lidar com esses
  52. problemas é apenas adotar um design
    móvel responsivo
  53. para responder às características
    do aparelho. Então aqui
  54. estão três técnicas que você pode usar
  55. para fazer isso. A primeira técnica
    é uma bem simples de combinação.
  56. Isso, se você tiver espaço sobrando,
  57. combinando diferentes telas
    numa tela única
  58. para aparecer melhor, para
    preencher o espaço.
  59. Então nesse exemplo, nós temos
    uma visão geral detalhada típica,
  60. num celular isso estaria em
    duas telas separadas.
  61. Então clicando numa lista de item,
    por exemplo, isso pode te mostrar
  62. detalhes subsequentes. Num equipamento
    maior, com largura suficiente,
  63. nós podemos mostrar essas duas coisas
    de uma vez só. Isso evitará o problema
  64. de ter aquelas linhas em excess e fará
  65. uma uso melhor do espaço da tela.
  66. A segunda técnica é que chamamos
    refluxo de macro.
  67. Ela pega os maiores blocos do
    seu aplicativo e os remaneja
  68. ou os reorganiza na tela para
  69. um melhor uso do espaço.
  70. Então nesse exemplo, nós simplesmente
    movemos algo, tipo, um cabeçalho grande
  71. e uma caixa de texto, ao invés de serem
    colocados vertivalmente encima
  72. um do outro, para serem colocados
    horizontalmente, um ao lado do outro.
  73. Isso também dá mais espaço a imagens
    para serem mostradas
  74. nos espaços maiores de tela,
  75. bem como evitar excessivas linhas longas
  76. quando num equipamento geográfico.
  77. Isso não é útil apenas para equipamentos
    de tamanhos diferentes,
  78. você também pode usar esse truque quando
  79. estiver trocando de equipamento
    de diferentes orientações.
  80. E a última técnica que eu quero passar
  81. é algo que chamo de refluxo de micro.
  82. Essa técnica realmente se foca nos
    blocos individuais
  83. dentro do seu design e delega
    responsabilidades àqueles
  84. blocos individuais para otimizá-los,
    dentro de uma certa medida
  85. de espaço. Então, uns exemplos
  86. de como fazer isso. Aqui do lado esquerdo,
  87. temos uma lista tipo aplicativo,
    que tendo espaço suficiente,
  88. pode levar a excesso de extensão de linhas
    ou visões muito desequilibradas.
  89. Ao invés disso, cada lista individual
    sabe disso,
  90. dentro de um espaço suficiente,
    como se desenhar.
  91. Então quando se dá um certo espaço,
    uma certa largura ao equipamento,
  92. ele muda sua apresentação. Ao invés
  93. de ser uma lista de items, digamos,
    pode mudar para uma tabela,
  94. uma representação de tabela.
    Isso o permitirá ter, saber
  95. preencher melhor o espaço. O segundo
    exemplo é se você não puder,
  96. ou se simplesmente não for possível
  97. introduzir mais conteúdo, você pode
    colocar num ponto de margem.
  98. Então, esse aplicativo
    forma-e-tipo à direita
  99. quando você vai além do celular,
  100. depois de um certo tamanho,
    quando não há mais
  101. conteúdo a ser mostrado na tela,
  102. nós simplesmente introduzimos
    um ponto de margem para que
  103. não seja excessivamente longo
    ou excessivamente desequilibrado.
  104. - Então, o Nick abacou de nos contar
    uma técnicas de UI realmente
  105. fantásticas para telas pequenas. Mas telas
    pequenas afetam muito mais
  106. do que apenas a UI. Na verdade, afeta
    bastante a UX do seu celular.
  107. - Sim, simplesmente pegar a web ou tela
    de trablaho e encolher para caber
  108. numa tela pequena provavelmente
    não é a maneira correta de se fazer.
  109. - Sim, você realmente precisa pensar
    em mobilidade primeiro e
  110. otimizar o fluxo para um smartphone. Então
    como fazemos isso? Wireframing.
  111. Wireframing.