设计各种屏幕尺寸的软件界面

Question

现在我们有流行使用的1920x1200和1680x1050等屏幕,有些甚至使用2560x1600分辨率,而一些旧系统仍然依赖800x600分辨率.我正在编写一个在1680x1050上看起来不错的软件,但在1920x1200上看起来太小而在1024x768上太大了.您是否有建议如何设计各种屏幕尺寸的应用程序？

在我们在分辨率上几乎没有差异之前,情况要简单得多,但现在似乎没有好办法处理这个问题.

我知道这个问题更多的是关于设计/布局而不是编程,但我敢打赌这或多或少是程序员生活的一部分,所以我在这里发表了这篇文章.

Answer 1

应用程序应自动调整以适应各种窗口尺寸和屏幕尺寸。您不应该假设用户始终希望以全屏尺寸运行您的应用程序。即使所有用户都有巨大的屏幕，在某些情况下他们也可能希望并排显示多个窗口。

\n\n

当数据以列表/表格或图形格式（后者包括地图、图表和大多数所见即所得应用程序）布局时，针对多种窗口大小进行设计（如果不是开发）非常容易。显示表格或图形的窗格应随着窗口大小的调整而调整。通常，您可以根据需要添加水平和垂直滚动条，以允许用户在当前的任何窗格大小内平移数据。通过调整窗口大小来调整窗格大小通常意味着所有数据都可以通过滚动条访问。\xe2\x80\x99 不能很好地将数据分解为页面（例如，就像 Google 搜索结果的分解方式一样）。

\n\n

It\xe2\x80\x99s perfectly acceptable to have horizontal scrolling for a table (unlike for a web page dominated by prose) as long as the first column(s) that identifies the rows remains in view when the user scrolls horizontally. Likewise the column headers should remain in view when the user scrolls vertically. For graphics, changing window size generally should not change the level of zoom. Instead, show more data when zooming out and less when zooming in, while providing a separate zoom feature.

\n\n

For data laid out as a form, with fields and labels for a single record running down the pane, there really isn\xe2\x80\x99t a good way of handling multiple window sizes, and you have to choose a window size to design for. For usability, you should design so that at standard text size all fields are visible without scrolling when the window is sized to the lowest screen resolution you\xe2\x80\x99re likely to come across. Use tabs or other similar controls to fit all the required fields in that space. Generally, this implies a designed-for size of 1024x768, assuming your users may use your app on a laptop. It may be acceptable to have a form layout that requires some vertical scrolling at smaller resolutions (as is common on web apps), but users should never have to scroll horizontally for typical cases. Thus, in your case you may want to design for 1024x1050 if most of your users use desktops and only occasionally use laptops. Test that users realize they have to scroll when using a low resolution before proceeding with this. If you expect users to use the window regularly while viewing other windows (e.g., it\xe2\x80\x99s more like a properties dialog), that may set additional limits on the window size.

\n\n

With a form layout, the size of the text or the spaces between the fields should not change when the window is resized (although allowing the user to explicitly increase text size is a good idea). Resizing larger than the designed-for size should simply add blank margins to the right and bottom. In other words, there really isn\xe2\x80\x99t much point in resizing larger for form layout. That\xe2\x80\x99s okay. At least some of your users will make good use of unused screen space for something else (e.g., another window or app). Real power users with big screens may open two instances of the same window side by side and have each instance show a different tab so they can monitor as much as possible at once.

\n\n

Resizing smaller than the designed-for size for a form layout should cause scrollbars to appear and provide access to fields that are no longer in view. The latter situation should be an edge case if you\xe2\x80\x99ve chosen the lowest screen resolution you\xe2\x80\x99re likely to come across.

\n