Primero, algunos antecedentes: todos los teléfonos inteligentes en estos días tienen lo que se llama "Proporción de píxeles del dispositivo" . Esencialmente, significa que un navegador web en un teléfono inteligente interpretará la resolución de la pantalla de manera diferente a la resolución física real del dispositivo. Por ejemplo, un iPhone 6 tiene una resolución física de 750 x 1334píxeles con una proporción de píxeles del dispositivo de 2. Esto significa que los navegadores del iPhone 6 interpretarán la resolución como 375 x 667. Para obtener más información sobre la proporción de píxeles del dispositivo, las pantallas de retina y dppx, puede leer sobre esto en el enlace de arriba o buscarlo en Google.
La pregunta: cuando uno está diseñando (en Photoshop o lo que sea) un diseño para un diseño móvil (por ejemplo, una página web móvil), el documento/lienzo/mesa de trabajo debería ser (usando el iPhone 6 como ejemplo) 750 x 1334(la resolución física) o 375 x 667( la resolución lógica)?
Cosas para considerar:
750 x 1334documento, ignorando por completo la proporción de píxeles del dispositivo.¿Cuál es el enfoque correcto? ¿Qué es más fácil de crear para el diseñador? ¿Con qué es más fácil trabajar para el desarrollador? ¿Hay un término medio?
¿Hay un término medio?
Ojalá no. O tendremos que trabajar en 3 resoluciones n_n.
Esto significa que los navegadores del iPhone 6 interpretarán la resolución como 375 x 667.
Los navegadores no interpretan la resolución. Utilizan la resolución "declarada" por el dispositivo.
En términos generales, esta es la resolución que necesita usar. Estos son los "puntos de freno" de algunos marcos en general. Si un CSS encuentra un tamaño de 375x667 px, utilizará las consultas de medios adecuadas para un dispositivo móvil.
La resolución adicional debe tenerse en cuenta para casos especiales, específicamente para imágenes que deben ser especialmente nítidas, y se declaran con las consultas de medios 2x, por ejemplo, eche un vistazo a esto: https://css-tricks.com/snippets /css/retina-display-media-consulta/
Para textos, por ejemplo, la resolución adicional la maneja internamente el dispositivo. Usan, por ejemplo, 16 px "estándar" para el tamaño y usan los píxeles adicionales en la pantalla para hacer un texto más nítido.
Algunas personas diseñan en una imagen de mapa de bits de alta resolución. No me gusta mucho el caso. Para una vista previa en un dispositivo móvil en sí mismo estará bien, pero las dimensiones de la imagen, como referencia, son falsas.
Por lo tanto, es mejor exportar un activo a 2x de resolución (por eso es importante trabajar en vectores) que traducir todo el diseño a 1/2x.
Depende mucho de lo que estés haciendo exactamente, cuáles sean tus expectativas y tu flujo de trabajo específico.
Cuando diseño para dispositivos móviles (o escritorio) en Photoshop, ya sea para un sitio web o una aplicación nativa, siempre es una maqueta. No exporto ningún activo de ese diseño. Todo el diseño se recreará en código y todos los activos específicos se colocarán en Photoshop como objetos inteligentes de un archivo externo y serán vectoriales o se crearán con el tamaño correcto.
Si está diseñando un diseño en Photoshop y luego cortando ese diseño y extrayendo activos directamente de ese PSD, entonces definitivamente debería estar trabajando en tamaños de píxeles reales. Pero como dijiste, los tamaños de fuente, los márgenes, etc. deben volver a calcularse cuando se implementan en el código, lo que agrega una capa adicional de trabajo (y la posibilidad de errores). Si, como yo, su PSD es solo una maqueta o una guía, y sus activos se crean por separado, entonces es más fácil trabajar con tamaños de píxeles virtuales , pero debe tener en cuenta que básicamente está trabajando en una maqueta de menor resolución.
Principalmente hago todo el diseño y el desarrollo yo mismo, por lo que no necesito preocuparme por comunicar esto a un desarrollador, pero lo mismo se aplica si le entrega sus archivos a un desarrollador, todos deben tener claro el flujo de trabajo antes de comenzar ( o al menos antes de entregar los archivos).
El enfoque recomendado sería diseñar en la resolución lógica, ya que es más fácil exportar activos escalados a diferentes tamaños cuando comienza desde 1x.
Aquí hay un video que explica por qué: https://vimeo.com/169809377
Yorik