Spanish, Mexican feliratok

← 05-15 Nick Butcher sobre las pantallas pequeñas

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

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

  1. Así que la última limitación de móvil es
    la pequeña pantalla. Esto puede parecer
  2. la limitación del móvil obvia
    y significa que no podemos adaptarnos
  3. tanto a una pantalla realmente pequeña
  4. de smartphone, pero hay
    dos fantásticas técnicas
  5. que podemos usar que nos ayudan a optimizar nuestra pequeña interfaz.
  6. >>Sí, se llaman combinación y ajuste. Y
  7. vamos a hablar de
    un desarrollador de Android
  8. llamado Mick Butchard; está
    en el equipo de Android,
  9. sobre cómo hacer funcionar
    esto en tus aplicaciones.
  10. >>Así que Android no es
  11. un de un solo tamaño para todo.
    Viene en muchos tamaños y formas
  12. diferentes. Desde los teléfonos pequeños
    a las grandes tabletas, televisiones y
  13. más. La estupenda noticia es que
    Android ha sido desarrollado
  14. desde cero hasta admitir
    esta variedad y darte
  15. herramientas para manejarla.
    Así que, desde
  16. el primer momento, Android
    te ha permitido graduar tu
  17. interfaz de usuario arriba y abajo
    entre diferentes dispositivos. El problema
  18. es que las propuestas de regulación solo
    te servirán a ti hasta ahora.
  19. Así que voy a indicarte algunos de
  20. los inconvenientes que vemos a confiar
  21. en estas estrategias de regulación,
    y después voy a hablar de algunas
  22. formas alternativas
    de tratar con ello. Pues el primer
  23. problema que generalmente
    vemos es tener un exceso
  24. de longitud en las líneas.
    En esta aplicación, el texto y
  25. las imágenes están ocupando
    todo el ancho de pantalla
  26. del dispositivo. En uno más pequeño,
    del tamaño de un teléfono, estaría bien.
  27. Pero cuando vas más allá de un cierto
  28. tamaño esto resulta incómodo.
    Especialmente cuando
  29. estás mirando la longitud de las líneas
    de texto, intentas tener entre 45 y
  30. 75 caracteres de texto para mantener
  31. una experiencia de lectura cómoda.
    El usuario puede fácilmente
  32. explorarlo. Y en esta aplicación
  33. podemos ver que se sobrepasa esto.
  34. El siguiente problema que
    solemos encontrar es el
  35. de contenido desequilibrado.
    Así, en este ejemplo
  36. podemos ver que hay mucho contenido amontonado en la parte superior izquierda,
  37. y entonces dejando una enorme cantidad de espacio en blanco
  38. a lo largo del resto de la pantalla.
    Esto lleva a
  39. una sensación de desequilibrio, que
  40. hace a tu aplicación parecer
    nada optimizada para este
  41. dispositivo. Y el último problema
    que solemos encontrar es más
  42. bien casi una oportunidad perdida,
    de no hacer el mejor uso
  43. del verdadero espacio disponible para ti.
    Así que en este
  44. ejemplo podríamos tener una aplicación
    que muestra muchas fotos.Como
  45. podemos ver, están estas diminutas
    vistas en miniatura agrupadas
  46. en un lado. Realmente es una pena no
  47. hacer uso de estas hermosas pantallas grandes,cuando todo este
  48. espacio extra está disponible
    para ti. Así que
  49. quieres evitar esto. Pues estos son
  50. algunos de los inconvenientes comunes que vemos a confiar
  51. en estrategias de regulación,
    y la respuesta a tratar con
  52. estos problemas es en verdad
    adoptar un diseño
  53. de móvil que responda
    a las características del dispositivo. Pues
  54. he aquí tres técnicas que puedes usar para
  55. hacerlo. La primera es simplemente
  56. de combinación. Si tienes espacio extra,
  57. combinar objetos de
    distintas pantallas en una sola
  58. para compensar, llenar el espacio. Así
  59. que en este ejemplo, tenemos
    la típica vista con el máximo detalle
  60. que en un teléfono podría estar
    en dos pantallas separadas.
  61. Haciendo clic en un ítem de una lista
    por ejemplo podría mostrar
  62. más detalles. En un dispositivo
    más grande con suficiente anchura,
  63. podríamos ver ambas cosas a la vez. Esto
  64. nos evitará el problema de tener
    exceso de longitud de líneas para hacer
  65. mejor uso del espacio real
    de la pantalla. La segunda
  66. técnica es una que llamamos macrorreflujo. Esto
  67. es tomar los principales bloques
    de la construcción de tu aplicación y
  68. reasignarlos u organizarlos de nuevo
    en la pantalla para
  69. hacer mejor uso del espacio. Así que
  70. en este ejemplo, simplemente movemos
    algo como una gran imagen de
  71. encabezamiento y contenidos en vez
    de apilarlos verticalmente encima
  72. de otros para apilarlo horizontalmente
    unos junto a otros.
  73. Esto también deja más espacio a
    la imagen para exhibir
  74. la mayor proporción de
    espacio real en pantalla, así como
  75. evitar ese exceso de longitud en las líneas
  76. cuando lo hay en
    un dispositivo apaisado. Así que esto
  77. no solo es útil para dispositivos de
    distintos tamaños,
  78. puedes usar este tipo de truco cuando
  79. vas a alternar entre diferentes
    orientaciones en el mismo dispositivo.
  80. Y la última técnica que quiero
  81. revisar es algo que llamamos microrreflujo.
  82. La técnica se centra
    en los bloques individuales
  83. dentro de tu diseño y
    delega responsabilidad a esos
  84. bloques individuales para optimizarse
    a sí mismos dada una cierta
  85. cantidad de espacio. Un par de ejemplos
  86. de cómo hacerlo. Aquí a la izquierda,
  87. tenemos una aplicación tipo lista
    que, con suficiente espacio
  88. podría llevar a esas líneas
    demasiado largas o a vistas
  89. muy desequilibradas. En su lugar,
    cada ítem de la lista entiende eso
  90. dada una cierta cantidad de espacio,
    cómo extenderse a sí mismo.
  91. Una vez que sobrepasa
    un cierto tamaño,una cierta cantidad de
  92. anchura disponible en el dispositivo
    cambiará su representación. En vez de
  93. ser un ítem de la lista,
    podría cambiar, digamos, una matriz,
  94. la representación de un matriz.
    Esto te permitirá tener, sabes,
  95. llenar mejor el espacio.
    El segundo ejemplo, es si
  96. no puedes,si no hay forma de introducir
  97. más contenido puedes
    introducir un margen
  98. en su lugar. Así que en
    esta aplicación tipo formulario a la
  99. derecha cuando vamos
    más allá del teléfono
  100. superado un cierto tamaño, cuando no hay
  101. más contenido que mostrar en pantalla
  102. simplemente introducimos un margen y así
  103. no acaba siendo
    excesivamente largo o desequilibrado.
  104. >>Pues Nick nos acaba de hablar
    sobre algunas increíbles
  105. técnicas de interfaz de usuario para
    pantallas pequeñas. Estas afectan a más
  106. que simplemente la interfaz. De hecho,
    a la experiencia de usuario o tu M. >>Sí
  107. simplemente tomar una web o
    aplicación de escritorio y reducirla para
  108. que encaje en una pequeña pantalla sm,
    probablemente no es la mejor manera.
  109. >>Sí, realmente necesitas pensar en
    el móvil primero y optimizar
  110. tu flujo para el smartphone. Así que,
    ¿cómo hacemos esto? Líneas de dibujo.
  111. >>Modo esquema de líneas de dibujo