¿Cómo generar comentarios y cortes de manera eficiente para iOS y Android?
El propósito del diagrama de interfaz de usuario de alta fidelidad es que los desarrolladores lo consulten para dibujar la página. Esto es solo una forma de comprender la apariencia de la página, no algo de alta precisión. Solo con esto, los diseñadores no necesitan dibujar dos conjuntos de imágenes de diferentes tamaños como iOS y Android. Para el desarrollo, solo necesitan ver la página.
La función de la anotación y el recorte es que el desarrollo realizará un recorte en la interfaz de acuerdo con la dimensión de la anotación y la ubicación de los diagramas de UI de alta fidelidad. Entonces aquí está el problema, el desarrollo de iOS es diferente al de Android. ¿Cómo hacer dos conjuntos de anotaciones y cortes en un conjunto de diagramas de interfaz de usuario de alta fidelidad de iOS?
Como todos sabemos, el tamaño de píxel del diseño de iOS es 640*960/1136, y el tamaño de píxel del modo hdpi principal de Android es 480*800. Como se muestra en la figura, su relación de conversión es que el tamaño de píxel de iOS 75 es el tamaño de píxel de Android.
Muchos equipos de diseño crean mapas de Android basándose en esta relación 75, pero este no es un buen método. Es un método que se utiliza cuando el diseño y el desarrollo no son buenos amigos.
Sabemos que la unidad utilizada en el desarrollo de Android no son los píxeles, sino una unidad llamada dp/sp. No utilizan píxeles en absoluto. ¿De qué sirve ajustar 480*800 durante medio día? ¿De qué sirve etiquetarlo con un ancho de 300 píxeles? El diseño no entiende de desarrollo, el desarrollo no entiende de diseño, Android no entiende de iOS y iOS no entiende de Android. Muchos camaradas se conforman con esta "matriz de incomprensión mutua".
Utilizamos los dibujos de diseño producidos con un tamaño de 480*800 píxeles como punto de referencia. El método desarrollado para convertir el tamaño de un componente a tamaño dp es el tamaño de píxel*2/3. Es por eso que el tamaño de los componentes de Android debe ser divisible por 3. Por lo tanto, en el modo hdpi, en un dibujo de diseño de 480 * 800 píxeles, cuando los desarrolladores vean una anotación de 300 px de ancho, la definirán como un ancho de 200 dp. Sólo aquí los desarrolladores de Android pueden obtener un valor que realmente se utilizará para el desarrollo.
En todo este proceso, el diseñador crea el diagrama de dimensiones de iOS y lo etiqueta. El diseñador ajusta el diagrama de dimensiones de iOS a la dimensión de Android y lo etiqueta como px. y luego los convierte en dp. Este es un proceso largo.
De hecho, después de todo el proceso anterior, llegamos a una relación de conversión más simple: tamaño de píxel de iOS * 75 = tamaño de píxel de Android, tamaño de píxel de Android * 2/3 = tamaño de dp de Android. Luego se concluye que el tamaño de píxel de iOS * 75 * 2/3 = el tamaño de dp de Android. Entonces, algo que tiene 600 px de ancho en iOS, en el modo hdpi de Android, tiene exactamente 300 dp, que es exactamente 50. ¿Es fácil contar?
Bajo la guía de esta relación, podemos realizar anotaciones adecuadas para ambas plataformas en el mismo conjunto de diagramas de UI. El desarrollo de Android será sencillo siempre que conozca la relación de conversión entre algo marcado como 600 px e igual a 300 dp en modo hdpi. Por supuesto, tenga en cuenta las diferencias entre plataformas. Por ejemplo, iOS usa valores de color decimales, Android usa 16, iOS puede dibujar esquinas redondeadas y sombras y Android prefiere usar 9.png. Estas diferencias deben reflejarse en el mismo conjunto de anotaciones, para que los desarrolladores de ambos extremos puedan obtenerlas. lo que necesitan. (Si descubre que no puede marcar valores de color decimales y hexadecimales en la misma imagen en el software de anotación, puede usar anotaciones de texto para reemplazar uno de ellos, y la herramienta de captura de pantalla de QQ también tiene indicaciones de valores de color. Muchos métodos no serán descrito aquí.)
En este punto, ya puede hacer un conjunto de anotaciones para que el desarrollo de Android e iOS se puedan usar juntos.
Por supuesto, la premisa es que debes decirles a los desarrolladores cómo leer esta etiqueta y cómo usarla.
Echemos un vistazo al diagrama de corte
La conversión entre iOS y Android puede utilizar la relación de conversión de 75. En otras palabras, después de que el recorte de iOS se reduce en 75, el recorte de Android en modo hdpi también requiere recortes en otros modos de ppp, que se pueden convertir de acuerdo con la siguiente relación.
Encontraremos que la relación de conversión entre el modo xhdpi y el modo hdpi también es 75. En otras palabras, el tamaño del clip en modo xhdpi es el mismo que el de iOS. Por lo tanto, el recorte de iOS puede aplicar directamente el modo xhdpi de Android. En cuanto a otros modos excepto hdpi y xhdpi, si se requiere adaptación, la imagen debe procesarse por separado.
Cabe señalar que los píxeles cortados se pegarán después de escalarlos y lo más probable es que sea necesario reajustarlos. También hay varios bordes virtuales, especialmente aquellos con sombras transparentes, que deben reajustarse, pero esta carga de trabajo es obviamente mucho menor que reajustar la interfaz de usuario y volver a recortar.
Hasta ahora, hemos diseñado una interfaz de usuario de alta fidelidad adecuada para iOS. Basándonos en esta interfaz de usuario, hemos creado un conjunto de anotaciones adecuadas para desarrolladores de iOS y Android y luego generamos un conjunto de modos xhdpi adecuados. para iOS y Android, y luego ajustar un conjunto de recorte en modo hdpi adecuado para Android, básicamente se ha completado la mayor parte del trabajo.
¿Qué opinas de la carga de trabajo de este método? ¿Puede una persona hacer el trabajo de tres personas?
Reimprimir