代码之家 › 专栏 › 技术社区 › 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: __________

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

推荐文章

Thinkpad · Excel引用基于字符串的范围

3 年前

DwightD · Python 3中的用户输入和排序列表

7 年前

Hans Daigle · Python交互式控制台使用curses lib getstr()函数不等待用户输入

7 年前

ÐÐ¸ÐºÐ¸ÑÐ° Ð¨Ð¸ÑÐºÐ¸Ð½ · 如何从字符串(Python3)创建函数[已关闭]

7 年前

Wacky Mode-On · Python:3-在找到关键字后将字符串设为变量?

7 年前

P S · 在laravel 5.5中输入不起作用时重定向回

7 年前

Paul · 如何在输入值中包含图像

7 年前

Mose · c++中带有输入函数的Lambda auto给出错误

7 年前

Henri Wurm · 首先将第一个输入保存到文件夹中,然后引用它

7 年前

Andres Concha · 如何使用Vue设置和获取输入组件的值。js?

7 年前