代码之家 › 专栏 › 技术社区 › James Jones

鸟枪与顺序输入布局

user-input css input layout

3

James Jones · 技术社区 · 15 年前

我想确定下面两个布局中哪一个是更好的布局。我希望可用性是主要关注点。哪个一个更好(在可用性方面)并且 为什么? 这样比较好吗?

猎枪

尽可能多地使用水平屏幕宽度,而不会导致水平滚动。明显的好处是垂直滚动将最小化/消除,屏幕不动产将最大化。

相继的

每行一个输入。缺点是,滚动可能比散弹枪布局要多得多。

              Shotgun                                Sequential
|----------------------------------|    |-----------------------------------|
|                                  |    |                                   |
|  Input1: ______  Input2: ______  |    |  Input1: ______                   |
|                                  | vs |                                   |
|  Input3: ______  Input4: ______  |    |  Input2: ______                   |
|                                  |    |                                   |
|----------------------------------|    |  Input3: ______                   |
                                        |                                   |
                                        |  Input4: ______                   |
                                        |                                   |
                                        |-----------------------------------|

2 回复 | 直到 15 年前

1

3

user151323 15 年前

序列具有更好的可用性。

在两种布局中,用户都能识别线条。在散弹枪的情况下,每一行大约二需要的东西 额外的心理处理 理解。在连续的情况下,每行大约 单一的 概念是 简单的 .

在一条线上有多个概念不仅可以分散注意力,而且还需要额外的脑力来识别概念之间可能的关系,分析输入是否是相关的,直到分析子例程说“否”。

通常情况下,每个空间面积中元素比例高的密集界面比“空白”界面更容易疲劳和减速。元素包括任何UI实体,可以是活动输入元素、被动文本注释或图形元素。

2

0

Darryl Hein IrishChieftain 15 年前

我同意城里新来的,除了田块更适合彼此在一起的时候。例如,当您为一些人输入名字和姓氏时,例如:

First Name: __________    Last Name: __________
First Name: __________    Last Name: __________
First Name: __________    Last Name: __________

如果这些是连续的,就很难理解并将字段分组在一起(在您的头脑中)。