Merge "Docs: Localization of Design pages on DAC. Bug: 20503708" into mnc-preview-docs

page.title=Principios de diseño para Android

@jd:body

<p>Estos principios de diseño fueron creados por el

equipo de experiencia del usuario de Android para su propio uso, con el fin de tener siempre en cuenta lo mejor para los usuarios.

En cuanto a los desarrolladores y diseñadores de Android, continúan

utilizando las pautas de diseño más detalladas para los diferentes

tipos de dispositivos.</p>

<p>

Tenga en cuenta estos principios cuando ponga en práctica su propia

creatividad e ideas de diseño. Desvíese de lo tradicional con un propósito.

</p>

<h2 id="enchant-me">Cautívame</h2>

<div class="layout-content-row">

  <div class="layout-content-col span-7">

<h4 id="delight-me">Deléitame de formas sorprendentes</h4>

<p>Una superficie atractiva, una animación colocada en el lugar correcto o un efecto de sonido bien sincronizado suelen ser experiencias

placenteras. Los efectos sutiles contribuyen a crear un sentimiento de facilidad y la sensación de que se cuenta con una fuerza

poderosa.</p>

  </div>

  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_delight.png">

  </div>

</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">

  <div class="layout-content-col span-7">

<h4 id="real-objects-more-fun">Los objetos reales son más divertidos que los botones y los menús</h4>

<p>Permita que los usuarios toquen y manipulen directamente los objetos de su aplicación. Esto reduce el esfuerzo cognitivo

que se necesita para llevar a cabo una tarea que resulte satisfactoria a nivel emocional.</p>

  </div>

  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_real_objects.png">

  </div>

</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">

  <div class="layout-content-col span-7">

<h4 id="make-it-mine">Permíteme darle un toque personal</h4>

<p>A los usuarios les gusta agregar toques personales, ya que esto los ayuda a sentirse cómodos y a sentir que tienen el control. Ofrezca

opciones predeterminadas prácticas y atractivas, pero también tenga en cuenta personalizaciones opcionales y divertidas que no entorpezcan las

tareas principales.</p>

  </div>

  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_make_it_mine.png">

  </div>

</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">

  <div class="layout-content-col span-7">

<h4 id="get-to-know-me">Conóceme</h4>

<p>Con el paso del tiempo, conozca las preferencias de los usuarios. En lugar de pedirles a los usuarios que elijan las mismas cosas una y otra

vez, permita que puedan acceder fácilmente a las opciones que ya eligieron antes.</p>

  </div>

  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_get_to_know_me.png">

  </div>

</div>

<h2 id="simplify-my-life">Simplifica mi vida</h2>

<div class="layout-content-row">

  <div class="layout-content-col span-7">

<h4 id="keep-it-brief">Sé breve</h4>

<p>Utilice frases cortas con palabras simples. Las personas tienden a omitir las oraciones largas.</p>

  </div>

  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_keep_it_brief.png">

  </div>

</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">

  <div class="layout-content-col span-7">

<h4 id="pictures-faster-than-words">Las imágenes son más prácticas que las palabras</h4>

<p>Considere la idea de utilizar imágenes para explicar las ideas. Las imágenes atraen la atención de las personas y pueden ser mucho más eficientes

que las palabras.</p>

  </div>

  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_pictures.png">

  </div>

</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">

  <div class="layout-content-col span-7">

<h4 id="decide-for-me">Decide por mí, pero permíteme tener la última palabra</h4>

<p>Siga su instinto y actúe sin preguntar primero. Tener que elegir demasiadas veces y tomar muchas decisiones hace que las personas

se sientan molestas. Permita que los usuarios puedan deshacer sus elecciones en caso de que no sean lo que ellos desean.</p>

  </div>

  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_decide_for_me.png">

  </div>

</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">

  <div class="layout-content-col span-7">

<h4 id="only-show-when-i-need-it">Solo muéstrame lo que necesito, cuando lo necesito</h4>

<p>Los usuarios se sienten abrumados cuando se les presenta demasiada información al mismo tiempo. Divida las tareas y la información en fragmentos pequeños

y fáciles de digerir. Oculte las opciones que no son fundamentales en el momento y capacite a los usuarios sobre la marcha.</p>

  </div>

  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_information_when_need_it.png">

  </div>

</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">

  <div class="layout-content-col span-7">

<h4 id="always-know-where-i-am">Siempre debo saber dónde me encuentro</h4>

<p>Haga que los usuarios sientan que conocen el camino de regreso. Para ello, diseñe las distintas partes de su aplicación de modo tal que se vean diferentes y

utilice transiciones para mostrar la relación entre las pantallas. Proporcione comentarios sobre las tareas que están en curso.</p>

  </div>

  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_navigation.png">

  </div>

</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">

  <div class="layout-content-col span-7">

<h4 id="never-lose-my-stuff">Nunca pierdas lo que es mío</h4>

<p>Guarde aquellas cosas que los usuarios crearon y permítales acceder a ellas desde cualquier lugar. Recuerde las configuraciones,

los toques personales y las creaciones en todos los teléfonos, las tablets y las computadoras. Esta es la forma de hacer que las actualizaciones

sean lo más simple del mundo.</p>

  </div>

  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_never_lose_stuff.png">

  </div>

</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">

  <div class="layout-content-col span-7">

<h4 id="looks-same-should-act-same">Si se ve igual, debe funcionar de la misma manera</h4>

<p>Ayude a los usuarios a distinguir las diferencias funcionales al lograr que se vean diferentes en lugar de sutiles.

Evite los modos, que son sitios que lucen similar pero actúan diferente ante la misma entrada.</p>

  </div>

  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_looks_same.png">

  </div>

</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">

  <div class="layout-content-col span-7">

<h4 id="interrupt-only-if-important">Solo interrúmpeme si es importante</h4>

<p>Al igual que un buen asistente personal, evite a los usuarios los pormenores poco importantes. Las personas desean estar

concentradas y, a menos que sea fundamental y esté sujeta a un plazo de tiempo, una interrupción puede resultar agobiante y frustrante.</p>

  </div>

  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_important_interruption.png">

  </div>

</div>

<h2 id="make-me-amazing">Permíteme ser asombroso</h2>

<div class="layout-content-row">

  <div class="layout-content-col span-7">

<h4 id="give-me-tricks">Ofréceme trucos que funcionen en todos lados</h4>

<p>Las personas se sienten muy bien cuando descubren cosas por sí mismos. Logre que su aplicación sea más simple de utilizar al

aprovechar los patrones visuales y la memoria muscular de otras aplicaciones de Android. Por ejemplo, el gesto de deslizar rápidamente

puede ser un buen acceso directo de navegación.</p>

  </div>

  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_tricks.png">

  </div>

</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">

  <div class="layout-content-col span-7">

<h4 id="its-not-my-fault">No es mi culpa</h4>

<p>Sea sutil cuando les solicite a los usuarios que realicen correcciones. Ellos desean sentirse inteligentes cuando usan la

aplicación que usted creó. Si hacen algo mal, bríndeles instrucciones claras de recuperación, pero evite darles detalles técnicos.

Sería incluso mejor que usted lo solucione en segundo plano.</p>

  </div>

  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_error.png">

  </div>

</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">

  <div class="layout-content-col span-7">

<h4 id="sprinkle-encouragement">Fomenta lo simple</h4>

<p>Desglose las tareas complejas en pasos más pequeños que se puedan cumplir fácilmente. Ofrezca comentarios sobre las acciones,

incluso si es simplemente un halago sutil.</p>

  </div>

  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_sprinkle_encouragement.png">

  </div>

</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">

  <div class="layout-content-col span-7">

<h4 id="do-heavy-lifting-for-me">Haz el trabajo pesado por mí</h4>

<p>Haga que los principiantes se sientan como expertos al permitirles hacer cosas que pensaron que nunca podrían hacer. Por

ejemplo, a través de los accesos directos en los que se combinan múltiples efectos de fotografías, puede lograr que las fotografías de principiantes se vean maravillosas

en solo algunos pasos.</p>

  </div>

  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_heavy_lifting.png">

  </div>

</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">

  <div class="layout-content-col span-7">

<h4 id="make-important-things-fast">Haz que lo importante sea rápido</h4>

<p>No todas las acciones son iguales. Decida qué es lo más importante en su aplicación y haga

que los usuarios lo puedan encontrar fácilmente y utilizar de forma rápida, como el obturador de una cámara o el botón de pausa de un reproductor de música.</p>

  </div>

  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_make_important_fast.png">

  </div>

</div>

page.title=Material Design

page.tags=Material,design

page.type=design

page.image=design/material/images/MaterialLight.png

@jd:body

<!-- developer docs box -->

<a class="notice-developers right" href="{@docRoot}training/material/index.html">

  <div>

    <h3>Documentos para desarrolladores</h3>

    <p>Creación de aplicaciones con Material Design</p>

  </div>

</a>

<!-- video box -->

<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">

<div>

    <h3>Video</h3>

    <p>Introducción a Material Design</p>

</div>

</a>

<!-- video box -->

<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">

<div>

    <h3>Video</h3>

    <p>Papel y tinta: los materiales más importantes</p>

</div>

</a>

<!-- video box -->

<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">

<div>

    <h3>Video</h3>

    <p>Material Design en la aplicación Google I/O</p>

</div>

</a>

<p itemprop="description">Material Design es una guía integral para el diseño visual, de movimientos y

de interacción en distintas plataformas y dispositivos. Android ahora es compatible con las aplicaciones de

Material Design. Para usar Material Design en sus aplicaciones de Android, siga las pautas descritas

en la <a href="http://www.google.com/design/spec">especificación de Material Design</a> y use los

nuevos componentes y funcionalidades disponibles en Android 5.0 (nivel de API 21) y versiones posteriores.</p>

<p>En Android, se proporcionan los siguientes elementos que le permitirán crear aplicaciones en Material Design:</p>

<ul>

  <li>un tema nuevo;</li>

  <li>nuevos widgets para vistas complejas;</li>

  <li>nuevas API (interfaces de programación de aplicaciones) para sombras y animaciones personalizadas.</li>

</ul>

<p>Para obtener más información sobre la implementación de Material Design en Android, consulte

<a href="{@docRoot}training/material/index.html">Creación de aplicaciones con Material Design</a>.</p>

<h3>Tema Material</h3>

<p>El tema Material le ofrece un nuevo estilo para su aplicación, widgets del sistema que le permiten configurar

la paleta de colores y animaciones predeterminadas para información táctil y transiciones de actividades.</p>

<!-- two columns -->

<div style="width:700px;margin-top:25px;margin-bottom:20px">

<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">

  <img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" />

  <div style="width:140px;margin:0 auto">

  <p style="margin-top:8px">Tema Dark Material</p>

  </div>

</div>

<div style="float:left;width:250px;margin-right:0px;">

  <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" />

  <div style="width:140px;margin:0 auto">

  <p style="margin-top:8px">Tema Light Material</p>

  </div>

</div>

<br style="clear:left"/>

</div>

<p>Para obtener más información, consulte <a href="{@docRoot}training/material/theme.html">Uso del tema

Material</a>.</p>

<h3>Listas y tarjetas</h3>

<p>Android proporciona dos widgets nuevos para mostrar listas y tarjetas con estilos y

animaciones de Material Design:</p>

<!-- two columns -->

<div style="width:700px;margin-top:25px;margin-bottom:20px">

<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">

  <img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />

  <p>El nuevo widget <code>RecyclerView</code> es una versión más acoplable de <code>ListView</code>

 que admite diferentes tipos de diseños y proporciona mejoras en el rendimiento.</p>

</div>

<div style="float:left;width:250px;margin-right:0px;">

  <img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />

  <p>El nuevo widget <code>CardView</code> le permite mostrar extractos de información importante dentro de

 tarjetas que tienen apariencia y estilo coherentes.</p>

</div>

<br style="clear:left"/>

</div>

<p>Para obtener más información, consulte <a href="{@docRoot}training/material/lists-cards.html">Creación de listas

y tarjetas</a>.</p>

<h3>Visualización de sombras</h3>

<p>Además de las propiedades X e Y, las vistas de Android ahora poseen una

propiedad Z. Esta propiedad nueva representa la elevación de una vista, que determina lo siguiente:</p>

<ul>

<li>El tamaño de la sombra: las vistas con valores Z más elevados proyectan sombras más grandes.</li>

<li>El orden del dibujo: las vistas con valores Z más elevados aparecen sobre las otras vistas.</li>

</ul>

<div style="width:290px;margin-left:35px;float:right">

  <div class="framed-nexus5-port-span-5">

  <video class="play-on-hover" autoplay>

    <source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>

    <source src="{@docRoot}design/videos/ContactsAnim.webm"/>

    <source src="{@docRoot}design/videos/ContactsAnim.ogv"/>

  </video>

  </div>

  <div style="font-size:10pt;margin-left:20px;margin-bottom:30px">

    <em>Para volver a reproducir la película, haga clic en la pantalla del dispositivo.</em>

  </div>

</div>

<p>Para obtener más información, consulte <a href="{@docRoot}training/material/shadows-clipping.html">Definición

de vistas de recorte y sombras</a>.</p>

<h3>Animaciones</h3>

<p>Las nuevas API de animaciones le permiten crear animaciones personalizadas para la información táctil en los controles de IU,

además de realizar cambios en el estado de las vistas y transiciones entre actividades.</p>

<p>Estas API le permiten hacer lo siguiente:</p>

<ul>

<li style="margin-bottom:15px">

responder a los eventos táctiles de sus vistas mediante animaciones de <strong>información táctil</strong>;

</li>

<li style="margin-bottom:15px">

ocultar y mostrar vistas con animaciones con <strong>efecto circular</strong>;

</li>

<li style="margin-bottom:15px">

alternar entre actividades con animaciones personalizadas de <strong>transición de actividades</strong>;

</li>

<li style="margin-bottom:15px">

crear animaciones más naturales con <strong>movimiento curvo</strong>;

</li>

<li style="margin-bottom:15px">

animar los cambios en una o más propiedades de las vistas con las animaciones de <strong>cambio de estado de la vista</strong>;

</li>

<li style="margin-bottom:15px">

mostrar animaciones en los <strong>elementos de diseño de la lista de estados</strong> entre los cambios de estado de las vistas.

</li>

</ul>

<p>Las animaciones de la información táctil se concentran en diferentes vistas estándar, como los botones. Las nuevas API

le permiten personalizar estas animaciones y agregarlas a sus vistas personalizadas.</p>

<p>Para obtener más información, consulte <a href="{@docRoot}training/material/animations.html">Definición de animaciones

personalizadas</a>.</p>

<h3>Elementos de diseño</h3>

<p>Estas nuevas capacidades para los elementos de diseño le permiten implementar aplicaciones de Material Design:</p>

<ul>

<li>Los <strong>dibujables en vector</strong> se pueden escalar sin perder definición y son perfectos

para los iconos de las aplicaciones de un solo color.</li>

<li>El <strong>teñido de los dibujables</strong> le permite definir mapas de bits como máscaras alfa y pintarlos con

un color durante el tiempo de ejecución.</li>

<li>La <strong>extracción de color</strong> le permite extraer automáticamente colores prominentes de una

imagen del mapa de bits.</li>

</ul>

<p>Para obtener más información, consulte <a href="{@docRoot}training/material/drawables.html">Trabajo con

elementos de diseño</a>.</p>

page.title=Confirmación y reconocimiento

page.tags=dialog,toast,notification

@jd:body

<p>En algunos casos, cuando un usuario invoca una acción desde su aplicación, se recomienda <em>confirmar</em> o proporcionar un <em>reconocimiento</em> de dicha acción a través del texto.</p>

<div class="layout-content-row">

  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/confirm_ack_confirming.png">

    <p><strong>Confirmación</strong> es solicitarle al usuario que verifique que realmente desea proceder con una acción que acaba de invocar. En algunos casos, la confirmación se presenta junto con una advertencia o mensaje con información importante relacionada con la acción que el usuario debe aprobar.</p>

  </div>

  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/confirm_ack_acknowledge.png">

    <p>El <strong>reconocimiento</strong> hace referencia al hecho de mostrar un determinado texto para informarle al usuario que la acción que acaba de invocar ya se completó. De este modo, se elimina la incertidumbre sobre las operaciones implícitas que lleva a cabo el sistema. En algunos casos, el reconocimiento se presenta junto con una opción para deshacer la acción.</p>

  </div>

</div>

<p>Comunicarse con los usuarios de este modo permite reducir la incertidumbre respecto de acciones pasadas o futuras. Mediante la confirmación o el reconocimiento también se puede evitar que los usuarios cometan errores de los que podrían arrepentirse.</p>

<h2>Cuándo se debe solicitar una confirmación o proporcionar un reconocimiento de las acciones de los usuarios</h2>

<p>No es necesario que se solicite una confirmación o se proporcione un reconocimiento para todas las acciones. Utilice este diagrama de flujo cuando tenga que tomar decisiones relacionadas con el diseño.</p>

<img src="{@docRoot}design/media/confirm_ack_flowchart.png">

<h2>Confirmación</h2>

<div class="layout-content-row">

  <div class="layout-content-col span-6">

    <h4>Ejemplo: Google Play Books</h4>

    <img src="{@docRoot}design/media/confirm_ack_ex_books.png">

    <p>En este ejemplo, el usuario solicitó eliminar un libro de su biblioteca de Google Play. Aparecerá una <a href="{@docRoot}design/building-blocks/dialogs.html#alerts">alerta</a> para confirmar esta acción porque es importante que el usuario comprenda que el libro ya no estará disponible desde ningún dispositivo.</p>

    <p>Cuando diseñe un cuadro de diálogo de confirmación, asegúrese de que el título sea significativo y que incluya la acción solicitada.</p>

  </div>

  <div class="layout-content-col span-7">

    <h4>Ejemplo: Android Beam</h4>

    <img src="{@docRoot}design/media/confirm_ack_ex_beam.png">

    <p>No es necesario que las confirmaciones se presenten en todas las alertas con dos botones. Luego de iniciar Android Beam, se le solicita al usuario que seleccione el contenido que desea compartir (en este ejemplo, se trata de una fotografía). Si el usuario decide no continuar, simplemente se descartará el teléfono de la lista.</p>

  </div>

</div>

<h2>Reconocimiento</h2>

<div class="layout-content-row">

  <div class="layout-content-col span-6">

    <h4>Ejemplo: Borrador de Gmail abandonado y guardado</h4>

    <img src="{@docRoot}design/media/confirm_ack_ex_draftsave.png">

    <p>En este ejemplo, si el usuario navega con los botones Back o Up desde la pantalla de redacción de Gmail, posiblemente ocurrirá algo inesperado: el borrador actual se guardará automáticamente. Esto se mostrará a través de un reconocimiento en forma de aviso. Dicho aviso desaparece luego de algunos segundos.</p>

    <p>En este caso, no se puede incluir la opción de deshacer porque el almacenamiento fue iniciado por la aplicación, no por el usuario. Gracias a esto, se puede continuar redactando el mensaje de forma rápida y fácil con solo navegar hasta la lista de borradores.</p>

  </div>

  <div class="layout-content-col span-6">

    <h4>Ejemplo: Conversación de Gmail eliminada</h4>

    <img src="{@docRoot}design/media/confirm_ack_draft_deleted.png">

    <p>Después de que el usuario elimina una conversación de la lista de Gmail, aparece un mensaje de reconocimiento con la opción de deshacer la acción. Dicho reconocimiento seguirá en pantalla hasta que el usuario lleve a cabo una acción no relacionada, como desplazarse por la lista.</p>

  </div>

</div>

<h2>Sin confirmación ni reconocimiento</h2>

<div class="layout-content-row">

  <div class="layout-content-col span-6">

    <h4>Ejemplo: Hacer +1</h4>

    <img style="padding: 33px 0 30px;" src="{@docRoot}design/media/confirm_ack_ex_plus1.png">

    <p><strong>No se necesita confirmación</strong>. Si el usuario hizo +1 sin querer, esto no es un problema. Simplemente, puede tocar el botón de nuevo para deshacer la acción.</p>

    <p><strong>No se necesita un reconocimiento</strong>. El usuario verá que el botón +1 parpadea y cambia a color rojo. Esa es una señal muy clara.</p>

  </div>

  <div class="layout-content-col span-7">

    <h4>Ejemplo: Eliminación de una aplicación de la pantalla de inicio</h4>

    <img src="{@docRoot}design/media/confirm_ack_ex_removeapp.png">

    <p><strong>No se necesita confirmación</strong>. Esta es una acción intencionada: el usuario debe arrastrar y colocar un elemento en un destino relativamente grande y aislado. Por lo tanto, es poco probable que se cometan errores. No obstante, si el usuario se arrepiente de la decisión que tomó, solo demorará algunos segundos en recuperar lo eliminado.</p>

    <p><strong>No se necesita un reconocimiento</strong>. El usuario sabrá que la aplicación ya no aparecerá en la Pantalla de inicio porque él mismo la hizo desaparecer al arrastrarla.</p>

  </div>

</div>