更好的UI设计，便于预订

Question

我正在使用 Twitter Bootstrap UI 为我的应用程序开发屏幕。

我创建了预约/预约页面。

此页面将由医院工作人员使用。他们希望快速填充数据，因为他们通过电话收集用户的所有数据，同时他们同时填写。

  

最终用户觉得这个页面看起来对他们和他们来说很难   希望从用户体验的角度改进这种设计。

我不知道设计。用户还可能想要查看可用日期＆amp;将来所选医生在同一页面的时间。

Answer 1

您可以从将逻辑上相互连接的元素组合在一起开始 我做了一个简单的例子：

然后你也可以用浅灰色边框包裹每一个块，并给它们一个标题，如“一般信息”，“提交日期”或任何适合你需要的。

Answer 2

我可以看到一些有用的改进：

1. 将一些相关元素组合在一起，以便更友好。
2. 您可以使用一些不同的背景颜色来增强用户界面。
3. 使用标签索引可以更快地从元素导航到另一个元素。
4. 您可以预先填写一些更常见的选项（工作人员会告诉您），这样他们就不必在每种情况下都改变一切。

Answer 3

如果你使用twitter bootstarp，我假设你正在使用span *和.row对吗？

您可以为每一行提供边框底部和边距20px / 40。并尝试使它像4列，所以负责人和类别应该是span6和父行中的边框底部+边距。

在那段时间之后，框中的四个使用span3，同样在底部放置边框和边距。

希望这会对你有所帮助。虽然“Antonis Grigoriadis”回答是正确的，但我只是以这种方式开始你：）