Mejores prácticas al pedir a los equipos gráficos que diseñen la interfaz de usuario de la aplicación de Android

No estoy seguro de si esto es posible en Android que admite varios factores de forma en varios dispositivos. Este es uno de los escenarios más dolorosos que normalmente enfrentamos.

Escenario: Un equipo de diseño crea gráficos de interfaz de usuario para la aplicación con todos los widgets de interfaz de usuario con su posición predefinida como botones, edittext y así sucesivamente. Esta es la interfaz de usuario que necesitamos utilizar en nuestra aplicación.

Problema: No hay manera de vincular widgets de interfaz de usuario, por ejemplo un botón de envío sobre la posición real de enviar en la imagen. ¿Hay alguna forma de vincularlos? ¿Y funcionará en todos los factores de forma?

Solución actual: Recrear toda la interfaz de usuario con todo su componente desde cero utilizando diseños.

Como sé en iOS, uno realmente puede poner el widget sobre la parte superior con fondo transparente y funciona fuera de la caja. Esto es posible ya que se puede jugar con valores absolutos de x e y.

–EDITAR–

Supongo que no estaba tan claro de la descripción anterior. El problema no es qué diseño de Android utilizar, ya que significa esencialmente crear el diseño desde cero utilizando componentes que utilizan LinearLayout o RelativeLayout.

El verdadero problema es cuando estamos recibiendo un diseño de interfaz de usuario de diseñadores que no saben nada de Android o su plataforma aparte de la resolución de pantalla estándar decir 480X800, ¿cuál debe ser nuestro asesorar a ellos? Algo así como darme un diseño con todos los componentes como capas que luego se pueden extraer y utilizar en la disposición de Android desde cero.

Ok, ahora con la aclaración de su pregunta, tal vez pueda compartir algunas experiencias.

Pequeña historia: envié a nuestro diseñador a las Directrices de la interfaz de usuario de Android ( http://developer.android.com/guide/practices/ui_guidelines/index.html ), pero tampoco tuvo tiempo de leerlo o no lo hizo Cuídate ¡Jajaja! Hombre … tuvimos un tiempo duro con la primera aplicación por eso!

Es cierto que en el sitio Web de Android hay mucha información sobre cómo hacer el diseño, pero está dispersa por todo el lugar (una forma de encontrar información, que tal vez sólo nosotros, los desarrolladores están acostumbrados a la derecha?).

Así que aquí están mis sugerencias, basadas en lo que tengo del sitio Web de Android y la experiencia:

  1. Hacer un tablero de la historia de la aplicación para definir la apariencia básica, dónde serán los controles de la interfaz de usuario, etc.
  2. Debido a que una aplicación necesita un buen icono de lanzador, primero envíe a su diseñador las plantillas de iconos en el sitio web de Android ( http://developer.android.com/shareables/icon_templates-v4.0.zip )
  3. Siéntese con el Diseñador (o haga una reunión de Skype) y asegúrese de que él / ella entiende todo acerca de las densidades, ldpi, mdpi, hdpi y xhdpi y la diferencia entre PIXELS y DPIs. Asegúrese de que él / ella entiende que muy bien para evitar futuros problemas. (Consulte http://developer.android.com/guide/practices/screens_support.html )
  4. Pídales que trabajen con Vectores, ya que necesitará 3 tamaños diferentes para cada recurso.
  5. Explíqueles las convenciones de nomenclatura y la estructura de carpetas. Pídales que nombre los archivos usando los prefijos ic_ y que guarde las cosas en su lugar apropiado. Pueden utilizar las funciones de Photoshop como tareas automatizadas para guardar los recursos en diferentes tamaños en la carpeta derecha y, a continuación, enviarle un archivo zip con los recursos.
  6. Las directrices recomiendan a los diseñadores trabajar primero con los recursos de mdpi , y luego obtener otros tamaños para probar.
  7. Pídale a su diseñador que cree un "Prototipo Funcional" de la Aplicación. Si trabajó en Photoshop, hay formas de utilizar Dreamweaver para exportar el diseño a un sitio web real que puede explorar y pasar por las actividades. Y usted puede tener una página de descarga para descargar el conjunto completo de
    Actualizar los recursos en sus carpetas correspondientes como un zip.
  8. Dígales que Android utiliza estilos y temas que son similares a CSS, y que necesitará colores en HEX. Pide un documento con los colores para degradados, etc. (puedes usar EyeDropper en Chrome o CollorZilla en Firefox para extraerlos del Prototipo Funcional también).
  9. Crear una gran cantidad de dispositivos diferentes en el emulador con diferentes densidades de pantalla y tamaños.

Por último, no hay una "fórmula mágica" … enviar correos electrónicos o incluso ejemplos no funcionará a veces … lo mejor que puedes hacer es dedicar un tiempo para llegar a la misma página con tu diseñador, esa inversión de tiempo Se pagará muy rápidamente.

Lo que he mencionado aquí ha funcionado para nosotros, y créanme … He cambiado todo el aspecto de la aplicación y se ve muy bien y vamos a decir que el 99% como el diseño en sí.

Buena suerte (y paciencia)!

Te siento. Sin embargo, cuando tenemos que entender y probablemente apreciar que iOS está disponible en tan sólo muchos tamaños de pantalla. Android por otro lado no lo es. Al diseñar para el androide, es imperativo que no hagamos ninguna suposición sobre los tamaños del pixel de otra manera la vida va a conseguir más complicada. Lo mejor es mantener el tamaño agnóstico, utilizar tamaños relativos. Es similar al proceso de diseño de páginas html que se pueden mostrar en cualquier tamaño.

También, muéstreles cómo funcionan las imágenes de .9.png y cómo pueden crear esas imágenes. Te ahorra mucho tiempo, si no tienes que crear las imágenes por ti mismo. Además, los diseñadores tienden a ser mucho más creativos con las posibilidades de 9 parches.

Es posible con AbsoluteLayout Pero se deprecia.

No es ideal tener un diseño fijo. Puede diseñarlo, tal vez un retrato y una versión de paisaje, pero todavía hay varias relaciones de aspecto de las pantallas, por lo que o bien cortar y tener algo cortado, o ajustar a la pantalla, y obtener los bordes vacíos en una dirección.

Sugeriré el uso de un RelativeLayout.

Con layouts relativos puede "referirse" a otros componentes usando sus @ids y decirles que estén por encima, por debajo de, toRightOf, toLeftOf de otros componentes de UI al mismo nivel (dentro del mismo RelativeLayout) y usted puede alinearlos a su padre View's Superior, Inferior, Izquierda o Derecha.

Ejemplo:

El site_row.xml, un archivo de diseño que he creado para una fila en una lista:

Android: background = "@ drawable / row_selector">

<ImageView android:id="@+id/image_view_venue_row_thumb" android:layout_width="48dp" android:layout_height="48dp" android:scaleType="fitCenter" android:adjustViewBounds="true" android:src="@drawable/ic_default_map" android:background="@drawable/image_place_holder" android:layout_alignParentTop="true" android:layout_marginTop="4dip" android:layout_marginLeft="4dip" android:layout_marginRight="6dip" android:layout_gravity="center_horizontal" /> <ImageView android:id="@+id/image_view_more_arrow" android:layout_width="18dp" android:layout_height="18dp" android:src="@drawable/ic_view_more" android:layout_gravity="center_vertical" android:layout_centerVertical="true" android:layout_alignParentRight="true" /> <TextView android:id="@+id/text_view_venue_row_distance" android:text="0.5 Miles" android:layout_width="75dp" android:layout_height="wrap_content" android:minWidth="44dp" android:maxWidth="44dp" style="@style/VenueRowDistance" android:layout_centerVertical="true" android:layout_toLeftOf="@id/image_view_more_arrow" /> <TextView android:id="@+id/text_view_venue_row_name" android:singleLine="false" android:focusable="false" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="left" style="@style/VenueRowName" android:layout_toRightOf="@id/image_view_venue_row_thumb" android:layout_toLeftOf="@id/text_view_venue_row_distance" android:layout_alignParentTop="true" /> <TextView android:id="@+id/text_view_venue_row_description" android:singleLine="false" android:focusable="false" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="left" style="@style/VenueRowDescription" android:layout_below="@id/text_view_venue_row_name" android:layout_toRightOf="@id/image_view_venue_row_thumb" android:layout_toLeftOf="@id/text_view_venue_row_distance" /> 

Esto producirá un diseño que se mantendrá constante sin importar qué orientación o tamaño de pantalla tenga.

Paisaje.

Retrato.

Espero eso ayude.

La mejor solución a este problema es un Linear Layout.

Lo que hago en estos casos es tener anidados horizontales Lineal Layouts dentro Vertical lineal Layouts, y ajustar las posiciones utilizando pesos, alrededor de mi control de botón real en blanco TextViews.

Depende de lo que esté desarrollando – si desarrolla juego o algo más con diseño personalizado completo, no hay pautas especiales, pero si desea utilizar controles estándar, aquí hay algunos enlaces útiles:

Primero y segundo

Yo voto GLes 1.0.

La mayoría de la audiencia de blanco, más fácil grok y código más familiar. La mayoría de los programadores sueñan en vértices, índices y caras gracias a los niños ricos.

  • Margen de botón personalizado de Android
  • La vista personalizada de Android vuelve a la posición original al actualizar
  • Cuadro de diálogo de alerta dentro de asynctask en android
  • Android: cómo posicionar una imagen ligeramente fuera de una vista
  • ¿Qué significa layout_height = "0dp"?
  • ¿Cómo lo hago solamente paisaje para las tabletas y solamente el retrato para los teléfonos?
  • Elemento de fila personalizada de Android para ListView
  • Android BLE: ¿Identificar el tipo de característica?
  • Mover hacia arriba la vista de texto sólo cuando el teclado virtual abierto en android
  • Menús horizontales
  • Manteniendo una vista en la parte inferior con la biblioteca de SlidingUpPanel
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.