Spanish, Mexican 字幕

← Introducción al diseño adaptativo

埋め込みコードを取得する
10言語

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

  1. Bueno. Así que ahora tenemos
    los wireframes implementadas
  2. para ambas pantallas.
  3. Pero, ¿qué tal se ve en la tableta?
  4. Bueno, por desgracia,
    cuando tomamos el UI del teléfono
  5. y lo estiramos en una tableta,
    no queda bien.
  6. Aquí hay un montón
    de espacio blanco vacío.
  7. Podemos aprovechar más esta pantalla,
    mostrando información más útil.
  8. Por ejemplo,
    ¿por qué tenemos que hacer clic
  9. para ver los detalles, cuando podrían
    caber en esta pantalla fácilmente?
  10. Además, si el usuario desea examinar
    la lista completa de los pronósticos,
  11. sus ojos tienen que ir así,
  12. lo cual es una experiencia de lectura
    desagradable.
  13. Si queremos que el usuario
    lea algún contenido,
  14. debemos mantener la anchura más estrecha,
    para que la puedan escanear rápidamente.
  15. Estas consideraciones forman parte
    del diseño adaptativo.
  16. Diseño adaptativo
    significa diseñar tu aplicación
  17. teniendo en cuenta que será usado
    a través de una gama
  18. de diferentes dispositivos
    con diferentes tamaños de pantalla.
  19. Pero ¿cómo lo hacemos?
    y ¿qué significa construir
  20. para dispositivos de pantalla grande
    como tabletas?
  21. Bueno, te puedo mostrar algunos ejemplos
    de cómo las aplicaciones se adaptan
  22. por medio del diseño de múltiples paneles.
  23. En la Guía de diseño de Android,
    hay una sección
  24. sobre diseños de múltiples paneles.
  25. Una manera es combinar múltiples vistas.
  26. Por ejemplo, en la aplicación Contactos,
    tienes la lista de contactos
  27. y la tarjeta de contacto
    para obtener más detalles.
  28. En la tableta,
    se pueden poner lado a lado.
  29. Esto también es conocido
    como el master detail flow.
  30. Esta es la lista principal
    y este es el panel de detalles.
  31. En la aplicación de configuraciones,
    tenemos otro ejemplo;
  32. el anchor de la columna se ajusta
  33. basándose en el anchor
    de la pantalla disponible.
  34. En la aplicación de calendario,
    tenemos paneles
  35. que se apilan verticalmente
    en la orientación vertical
  36. y horizontalmente
    en la orientación horizontal.
  37. También hay otros ejemplos
    a los que le puedes dar un vistazo.
  38. Si deseas más información
    sobre cómo diseñar para tabletas
  39. o el diseño adaptativo en general,
    puedes hacer clic en los enlaces de abajo
  40. para obtener más detalles.
  41. En este curso, primero estamos aprendiendo
    a construir el UI del teléfono
  42. y después el UI de la tableta.
  43. Pero en realidad,
    cuando lo estamos diseñando,
  44. hemos pensado en el diseño adaptativo
    desde el primer día.
  45. Cuando estás construyendo
    tu propia aplicación,
  46. es mala práctica diseñar y construir
    por completo tu aplicación de teléfono
  47. y después pensar en el UI de la tableta.
  48. Puesto que a menudo el UI de la tableta
    tiene un impacto
  49. en el diseño del teléfono,
  50. así como en las decisiones arquitectónicas
    hechas aquí.