【问题标题】:Designing software interface for various screen sizes [closed]为各种屏幕尺寸设计软件界面
【发布时间】:2010-05-30 10:01:08
【问题描述】:

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

以前我们在分辨率上的差异很小的时候事情要简单得多,但现在似乎没有什么好的方法来处理这个问题。

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

【问题讨论】:

  • 您使用什么技术来构建界面?您是在构建传统的桌面应用程序,还是在构建 Web 应用程序?还是别的什么?
  • @Greg Hewgill:我正在构建一个使用 JavaScript、HTML (5)、CSS (3) 和 PHP 的复杂 Web 应用程序。

标签: interface user-interface usability


【解决方案1】:

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

当数据以列表/表格或图形格式(后者包括地图、图表和大多数 WYSIWYG 应用程序)布局时,为多种窗口大小设计(如果不开发)非常容易。显示表格或图形的窗格应随着窗口大小的调整而调整。通常,您会根据需要包含水平和垂直滚动条,以允许用户在当前任何窗格大小内平移数据。使用窗口调整大小来调整窗格大小通常意味着所有数据都可以通过滚动条访问。将数据拆分为页面效果不佳(例如,就像 Google 搜索结果的拆分方式一样)。

当用户水平滚动时,只要标识行的第一列仍然在视图中,对表格进行水平滚动是完全可以接受的(与以散文为主的网页不同)。同样,当用户垂直滚动时,列标题应保持在视图中。对于图形,更改窗口大小通常不应更改缩放级别。相反,在缩小时显示更多数据,在放大时显示更少数据,同时提供单独的缩放功能。

对于以表格形式布局的数据,在窗格中运行单个记录的字段和标签,确实没有处理多个窗口大小的好方法,您必须选择要设计的窗口大小。为了可用性,您应该设计成在标准文本大小下,当窗口大小调整为您可能遇到的最低屏幕分辨率时,所有字段都可见,无需滚动。使用选项卡或其他类似控件以适应该空间中的所有必填字段。通常,这意味着设计为 1024x768 的大小,假设您的用户可能在笔记本电脑上使用您的应用程序。 可能可以接受需要在较小分辨率下进行一些垂直滚动的表单布局(这在 Web 应用程序中很常见),但对于典型情况,用户永远不必水平滚动。因此,在您的情况下,如果您的大多数用户使用台式机并且只是偶尔使用笔记本电脑,您可能希望设计为 1024x1050。测试用户是否意识到他们在使用低分辨率时必须滚动,然后再继续。如果您希望用户在查看其他窗口时定期使用该窗口(例如,它更像是一个属性对话框),则可能会对窗口大小设置额外的限制。

对于表单布局,文本的大小或字段之间的空间在调整窗口大小时不应改变(尽管允许用户显式增加文本大小是个好主意)。将尺寸调整为大于设计尺寸时,只需在右侧和底部添加空白边距。换句话说,为表单布局调整更大的大小确实没有多大意义。没关系。至少您的一些用户会充分利用未使用的屏幕空间来做其他事情(例如,另一个窗口或应用程序)。拥有大屏幕的真正高级用户可能会并排打开同一窗口的两个实例,并让每个实例显示不同的选项卡,以便他们可以一次尽可能多地进行监控。

将尺寸调整为小于为表单布局设计的尺寸应该会导致滚动条出现并提供对不再可见的字段的访问。如果您选择了可能遇到的最低屏幕分辨率,则后一种情况应该是一种极端情况。

【讨论】:

    【解决方案2】:

    一般来说,您设计的屏幕分辨率是您期望遇到的最低分辨率。

    您是正确的,因为有多种合理的屏幕分辨率。

    您可以选择针对多种屏幕分辨率设计用户界面,并让您的应用程序根据实际屏幕分辨率选择适当的布局。

    【讨论】:

    • 为所有不同的屏幕尺寸设计不同的布局是不是有点复杂?这种方法与随着屏幕变大而使界面变大怎么样?
    • @Tower:随着屏幕变大,使界面组件变大是一种选择。有时,更好的选择是具有更多界面组件的不同布局。这取决于用户界面。
    猜你喜欢
    • 2016-07-02
    • 2016-07-02
    • 1970-01-01
    • 1970-01-01
    • 2015-12-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-10-14
    相关资源
    最近更新 更多