Diseño de interfaz de software para varios tamaños de pantalla

Question

Hoy en día tenemos pantallas como 1920x1200 y 1680x1050 de uso popular, y algunas incluso usan una resolución de 2560x1600, mientras que algunos sistemas anteriores aún cuentan con una resolución de 800x600. Estoy escribiendo un software que se ve bien en un 1680x1050, pero demasiado pequeño en un 1920x1200 y demasiado grande en un 1024x768. ¿Tiene sugerencias sobre cómo diseñar una aplicación para varios tamaños de pantalla?

Las cosas eran mucho más simples antes cuando teníamos pocas diferencias en las resoluciones, pero ahora parece que no hay una buena manera de manejar esto.

Sé que esta pregunta es más sobre el diseño/diseño que la programación, pero apuesto a que esto es más o menos parte de la vida de los programadores, así que hice esta publicación aquí.

Answer 1

Las aplicaciones se deben ajustar automáticamente a una variedad de tamaños de ventana y tamaños de pantalla. No debe suponer que los usuarios siempre querrán ejecutar su aplicación a pantalla completa. Incluso si todos sus usuarios tienen pantallas gigantescas, es posible que quieran mostrar varias ventanas una al lado de la otra en algunos casos.

Diseñar (si no está desarrollando) para múltiples tamaños de ventana es bastante fácil cuando los datos se presentan en una lista/formato tabular o gráfico (este último incluye mapas, diagramas y la mayoría de las aplicaciones WYSIWYG). El panel que muestra la tabla o el gráfico debe cambiar de tamaño a medida que cambia el tamaño de la ventana. En general, incluye barras de desplazamiento horizontales y verticales según sea necesario para permitir al usuario desplazarse por los datos dentro del tamaño de panel que haya en este momento. Cambiar el tamaño del panel con el tamaño de ventana generalmente implica que todos los datos son accesibles mediante barras de desplazamiento. No funciona bien dividir los datos en páginas (por ejemplo, como la forma en que se dividen los resultados de búsqueda de Google).

Es perfectamente aceptable tener desplazamiento horizontal para una tabla (a diferencia de una página web dominada por la prosa) siempre que la primera columna que identifica las filas permanezca visible cuando el usuario se desplaza horizontalmente. Del mismo modo, los encabezados de columna deben permanecer visibles cuando el usuario se desplaza verticalmente. Para los gráficos, cambiar el tamaño de la ventana generalmente no debe cambiar el nivel de zoom. En cambio, muestre más datos al alejarse y menos al acercar, mientras proporciona una función de zoom por separado.

Para los datos presentados como un formulario, con campos y etiquetas para un solo registro que se ejecuta en el panel, realmente no es una buena forma de manejar múltiples tamaños de ventana, y tiene que elegir un tamaño de ventana para diseñar . Para la usabilidad, debe diseñar de modo que en el tamaño de texto estándar, todos los campos estén visibles sin desplazarse cuando la ventana tenga el tamaño de la resolución de pantalla más baja que pueda encontrar. Use pestañas u otros controles similares para ajustarse a todos los campos requeridos en ese espacio. En general, esto implica un tamaño diseñado para 1024x768, suponiendo que sus usuarios puedan usar su aplicación en una computadora portátil. Es puede ser aceptable tener un diseño de formulario que requiere un desplazamiento vertical en resoluciones más pequeñas (como es común en aplicaciones web), pero los usuarios nunca deben tener que desplazarse horizontalmente para casos típicos. Por lo tanto, en su caso, es posible que desee diseñar para 1024x1050 si la mayoría de sus usuarios utilizan computadoras de escritorio y solo ocasionalmente usan computadoras portátiles. Pruebe que los usuarios se den cuenta de que deben desplazarse cuando usan una resolución baja antes de continuar con esto. Si espera que los usuarios usen la ventana regularmente mientras ve otras ventanas (por ejemplo, se parece más a un cuadro de diálogo de propiedades), eso puede establecer límites adicionales en el tamaño de la ventana.

Con un diseño de formulario, el tamaño del texto o los espacios entre los campos no deberían cambiar cuando se cambia el tamaño de la ventana (aunque es una buena idea permitir al usuario aumentar explícitamente el tamaño del texto). El tamaño más grande que el tamaño diseñado debe simplemente agregar márgenes en blanco a la derecha e inferior. En otras palabras, realmente no tiene mucho sentido cambiar el tamaño de forma más grande para el diseño del formulario. Esta bien. Al menos algunos de sus usuarios harán un buen uso del espacio de la pantalla sin usar para otra cosa (por ejemplo, otra ventana o aplicación). los usuarios de energía real con grandes pantallas pueden abrir dos instancias del mismo lado de la ventana a lado y tienen cada instancia mostrar una ficha diferente para que puedan monitorear tanto como sea posible al mismo tiempo.

Cambio de tamaño más pequeño que el tamaño diseñado para un diseño del formulario debe causar a las barras de desplazamiento aparecen y proporcionan acceso a los campos que ya no están a la vista. La última situación debería ser un caso extremo si ha elegido la resolución de pantalla más baja con la que probablemente se encuentre.

Answer 2

En general, diseña para la resolución de pantalla más baja que espera encontrar.

Tiene razón en que hay una multitud de resoluciones de pantalla razonables.

Tiene la opción de diseñar su interfaz de usuario para múltiples resoluciones de pantalla, y hacer que su aplicación elija el diseño apropiado en función de la resolución de pantalla real.