用户界面 - 如何设计具有许多动态字段的表单



我们有一个表单,允许用户动态添加字段的输入。例如,如果您有用于跟踪项目的窗体,则希望动态地向该项目添加任务。只是为了澄清我的语言:您动态地为任务字段添加输入。问题是,我们有50个这样的字段。我们当前的解决方案显示所有 50 个字段,并在字段旁边加上加号 (+),以允许他们为该字段添加另一个输入框。字段的标签位于字段的左侧,添加的每个输入框都位于当前输入框的下方。

请相信

动态添加输入是正确的解决方案,请相信它已经过深思熟虑,请相信这是用户想要的,请相信我们已经走上了其他各种道路,这是最好的解决方案。

我的问题是关于演示的:你会怎么做?

请保留UI设计的答案。我们已经弄清楚了数据库模式。


更新

Current Solution是一个基于Web的应用程序,它使用JavaScript来动态添加新的输入,看起来与Corey Trager的绘图非常相似:

Task     [.............] +  
         [.............] +  
         [.............] +  
         [.............] +
Foo      [.............] +
         [.............] +
         [.............] +
Repeat 50 times...

那么,你描述的内容看起来像这样吗? 如果没有,你能尝试"画"它吗?

Task     [.............] +  
         [.............] +  
         [.............] +  
         [.............] +
Foo      [.............] +
         [.............] +
         [.............] +

这是网页还是其他技术?

这可能完全不合时宜,但取决于字段的要求,以及这是配置还是数据输入接口。

如果确实需要打开字段进行数据输入,则可以将它们定义为字段名称和值的列表,并根据需要使用单击编辑在每个元素上动态放置输入框。

该解决方案可以减少视觉噪音并节省垂直空间。如您所见,表单输入比纯文本占用更多空间。您可以通过捕获选项卡事件并触发下一个字段的单击以编辑功能来满足键盘用户的需求。

它可能看起来像这样。(刚刚点击Foo编辑内容)

Name   : Joe Blogs
Phone  : 555-1234
Cheese : Stilton
        -----------
Foo     | SNAFU   |    
        -----------
Bar    : fubar
Fifty  : Whatever
(+) Add new field...

如果这是一个配置页面,即您添加新字段以在流程的另一个屏幕或阶段上填写,则可以按顺序定义字段列表,然后将其显示给用户以进行数据输入。

              -------------------------------------------------
Define Fields | name, phone, cheese, foo, bar ..(etc).. fifty |
              -------------------------------------------------

然后,根据当前UI,字段将显示在一个巨大的网格中。

从@zachary的建议思考:

使用默认/上次保存的字段数显示为用户设计的表单。在窗体的底部放置一个具有 + 图标和单词"添加字段"(+ 添加字段)的 DropDownButton。

下拉此按钮将显示所有可用字段的列表。当用户选择其中一个时,表单将增长(足以容纳新字段),带有标签的新字段将显示在表单底部,添加字段按钮将显示在新字段下方。


编辑:

为了遵循ASCII图的主题,这就是我认为我的建议的样子。

任务 [............]
        [ + 添加任务 ▼]

噗  
��        [ + 添加 Foo  ▼]

小 + 最后一个任务字段附近的图标,带有"添加新任务"的链接。单击时,新任务域将显示在当前最后一个任务下方。

我会使用拖放方法,允许用户灵活定位。即使使用Web应用程序也可以做到这一点。例如,请参阅Dropthings(http://www.dropthings.com/)。这提供了在 ASP.NET 环境中实现拖放所需的所有代码。

您使用什么环境?

如果这是一个Web应用程序,那么您可以使用Javascript来动态管理其他字段。根据您是否可以异步处理表单,您可以使用 Ajax,这将简化表单管理的某些方面。

基本上,每个任务都需要一个单独命名的任务,然后您需要为他们选择附加的每个新字段附加一个新的唯一命名的表单输入元素。然后,您必须在提交表单之前使用 Javascript 遍历表单,或者在提交表单后遍历 POST 数据。

当然,这引入了Javascript作为Web应用程序的要求,这并不总是可行的。

好的,既然您已经将我的图表添加到您的问题中,我的答案是......

我并不是说这更好,但这是一种替代方案。 这是一种用单击代替水平滚动的另一种方式。 与其通过垂直滚动从"任务"导航到"foo"再到"条形图",不如使用"选项卡",即使您必须将它们堆叠几行高。 它确实使以随机顺序导航变得更加容易。 您甚至可以从此选项卡式视图来回切换到当前的"全部显示"视图。

[task][foo][another tab][another tab][etc][etc][etc][etc][etc][etc]
[row2][fred][another tab][etc][etc][etc][etc][etc][etc][etc]
[row3][another tab][wilma][etc][etc][etc][etc][etc][etc][etc]
[task1     ]+
[task2     }+
[task3     ]+ 

您能不能不使用类似于面孔簿实现的系统,该系统只有一个文本框,但允许向其添加多个项目?有一些预编码的解决方案,例如这个,它是针对mootools v1.2的,或者这个是针对jQuery的。您甚至可以允许自动完成系统中已有的任务。

相关内容

  • 没有找到相关文章

最新更新