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

鸟枪与顺序输入布局

user-input css input layout

James Jones · 技术社区 · 15 年前

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

猎枪

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

相继的

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

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

2 回复 | 直到 15 年前

user151323 15 年前

序列具有更好的可用性。

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

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

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

Darryl Hein IrishChieftain 15 年前

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

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

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

推荐文章

Nifas · Python:将用户输入用作dict键时出现键错误

6 年前

M.J · 石头剪刀的java(eclipse)代码,选择简单的输入,并生成石头剪刀的输出

6 年前

LalaJava · Java方法字符模式-初学者

6 年前

Penny Pang · 如何在给定条件下将json字典转储到多个文件中

6 年前

gomathi subramanian · 如何在python自动化期间提供凭据作为用户输入运行时?

6 年前

LM358 · 在生成前或生成后事件中请求用户输入-Visual Studio

7 年前

Richard Yudkiss · 重置之前,基本计算器需要多个输入

7 年前

f.lechleitner · R-多行上的readline提示

7 年前

JoshingYou · 我无法运行此程序[已关闭]

7 年前

Nic · 用于记录用户选择的响应图像

7 年前