您如何克服大屏幕房地产设计的挑战?[关闭]


10

这个问题比较主观,但是我希望有一些新的看法。我习惯于为特定的屏幕尺寸(通常为1024x768)进行设计,以至于发现该尺寸不是问题。将尺寸扩展为1280x1024并不能为您带来足够的屏幕空间,无法为您带来显着的变化,但会给我更多的呼吸空间。基本上,我只是扩大了“网格大小”,并且略微缩小屏幕的相同基本设计仍然有效。

但是,在最近的几个项目中,我的客户都使用1080p(1920x1080)屏幕,他们希望解决方案能够尽可能多地使用该屏幕。1920像素的宽度几乎是我习惯使用的宽度的两倍,宽屏使我的一些旧设计方法无法正常使用。我遇到的问题是,面对如此多的空间,我遇到了一些重大问题。

  • 我应该使用几列?宽格式适用于以2:1:1拆分的3列拆分(即,内容列大于其他两个列)。但是,如果我选择三列,那么该多余的列怎么办?
  • 如何有效利用屏幕空间?试图将所有内容同时显示在屏幕上是一种诱惑,但是太多的信息实际上使应用程序更难使用。空格对于帮助理解复杂的信息很重要,但是太多的空格会使相关的概念显得过于分离。
  • 我通常使用具有复杂数据的Web应用程序,而可视化和表示形式是理解原始数据的关键。当您的用户还具有大屏幕(至少24英寸)时,某些信息不在视线范围内,您需要将指针移动很长一段距离。如何确保所需的所有内容都停留在视觉热点内?
  • 当宽度受限制时,像博客之类的简单网站实际上会做得更好,这会导致大量的房地产浪费。我有点想知道是否将文本框和文本预览并排放置对于这种类型的屏幕的管理员侧来说是否会有很大的好处?(1:1两列拆分)。

对于您的答案,我知道设计中的几乎所有内容都是“取决于”的。我正在寻找的是:

  • 您使用的一般原则
  • 您的设计方法是如何改变的

我发现我必须重新训练自己如何使用这种不同的格式。迄今为止,我一直努力解决的每个分辨率难题都约为25%:640至800(增加25%),800至1024(增加28%)和1024至1280(增加25%)。但是,从1280到1920的跃迁在空间上增加了50%,相当于从640跃升到1024。这是没有常用的中等大小来帮助逐步学习课程的。


您是否可以使UI控件更大以填充空白...?
FrustratedWithFormsDesigner

@沮丧:除非您设计用于触摸屏,否则这不会破坏目的吗?
Michael K'2

@Michael:好吧,OP似乎不想更改可见控件的数量,因为它会使程序更难使用,也不希望有任何空白空间。如果没有功能填充该空间,那么该空间需要填充...吗?
FrustratedWithFormsDesigner

2
要做更多的是尝试扩大对新控件和与网站交互方式的了解。仅仅使一切变得更大就失败了。然后,您会遇到“大红色按钮综合症”或感觉像您正在阅读一个大标题的文本。当试图平衡设计的关注点时,这确实是一个复杂的问题。
Berin Loritsch 2011年

1
@Berin:如果他们对超大尺寸的接口尺寸提出了具体要求,那只是唯一的重大变化,请告诉他们您对布局和设计有所担心,并询问他们是否对如何最佳利用空间有想法。毕竟他们是用户,他们一定有提出此特定请求的理由。也许他们会说“将仪表板小部件放在空白处”或类似的内容……向带有巨大空白的样机屏幕截图发送文本,并说“您想要在这里做什么?”。确保了解您对此设计的关注。
FrustratedWithFormsDesigner

Answers:


1

这就是我解决这个问题的方法。

我将从将数据分块为逻辑块开始。我什至可以为每个逻辑块创建一个不同的ascx文件。每个块都会知道其显示方式(最小/最大宽度)。我会这样做b / c,我不喜欢重写代码,如果有可能需要扩展应用程序以支持多种分辨率,那么这将使控制变得更轻松。

接下来,我将为更大的分辨率创建一个新的样式表。使按钮和标题更大。在元素周围添加更多空白。这种在两种分辨率类型之间切换的方法只是交换了样式表。

现在是困难的部分,即布局。就像您说的那样,该数量的房地产布局将大不相同。解决方案是允许用户将元素放置在所需的位置,例如iGoogle页面。用户可以根据需要选择2或3列。因为我不知道您要构建哪种类型的屏幕,所以我不知道这是否真的适合您。

第二个答案是聘请UI专家来帮助您设计这些页面。过去与UI专家一起工作过,我可以说在这种事情上获得专家意见是100%值得的。他们可以在客户查看产品之前查明问题并提出解决方案。

如果必须自己做,则可以将固定的物品放在侧面,并让中间区域扩大以填充其余的空间。在中间部分有任何可以增长的数据。

不确定这对您有多大帮助,但我希望它能给您一些想法。


这可能是我在UI和程序员中都得到的最合理的答案。这比UI所有人告诉我的“使一切变大”要有用得多。注意:aspx是一个技术特定术语,但是将UI分块成单独的文件是正确的方法。
Berin Loritsch 2011年


2

我不是UI专家,但是每天都使用Eclipse使用1920x1080屏幕。Eclipse有一个非常容易配置的界面,以下是我在1280和1920之间切换时的一些观察结果:

  • 在这两种分辨率下,我都希望看到正在使用相同尺寸的窗口。在较小的分辨率下,我倾向于隐藏多余的面板,而在较高的分辨率下,我放置更多的面板。
  • 我希望按钮稍大一些。它们将在较大的显示器上按比例减少占用的空间,并使我的鼠标动作更快。
  • 我经常扩展预览以使用整个屏幕,即左侧的代码,右侧的预览。最终是两列格式。除此之外,我在页脚中使用了3列:
    1. 左:文件导航
    2. 中心:代码(最大,可能是屏幕宽度的2/3)
    3. 右:代码导航和任务
    4. 页脚:状态(控制台,服务器等。很短,可能是屏幕高度的1 / 5-1 / 6)

有时我还会在2列模式下将视图和控制器彼此并排放置,但这绝对是特定于程序员的。:)

在大屏幕上时,我想使用它来查看尽可能多的信息,同时仍然易于查找。组件周围的更多空间有助于区分信息集合。选项卡上的图标是一种有助于引起人们注意每个组件含义的方法。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.