更好的UI設計，方便預訂

Question

我正在使用Twitter Bootstrap UI爲我的應用程序開發屏幕。

我創建了預約/預約頁面。

本頁面將被醫院工作人員使用。他們希望快速填充數據，因爲他們通過電話收集用戶的所有數據，同時他們同時填充數據。

最終用戶覺得這個頁面看起來有些困難，他們和他們 希望從用戶體驗角度來改進此設計。

我對設計一無所知。用戶還可能希望將來在同一頁面中檢查選定醫生的可用日期&。

Answer 1

我可以看到一些改善，這將有助於：

1. 集團的一些相關元素結合在一起，以更加友好的眼球。
2. 您可以使用一些不同的背景顏色來增強UI。
3. 使用Tab索引可以更快地從一個元素導航到另一個元素。
4. 你可以預先選擇一些更常用的選項（工作人員會告訴你），所以他們不必在每種情況下都改變一切。

Answer 2

如果您使用的是twitter bootstarp，我假設您使用的是span *和.row的權利？

您可以爲每一行提供一個邊框底部和邊距20px/40。並嘗試使它像4列，所以負責人和類別應該是span6和邊界底部+邊界在父行。

之後，時間框中的四個使用span3，同樣在底部放置邊框和邊距。

希望能對你有所幫助。雖然「安東尼斯Grigoriadis」answere是正確的，我只是開始你的方式:)

Answer 3

你可以將邏輯上相互連接的元素放在一起。
我做了一個簡單的例子：

那麼你也可以包裝每塊薄淺灰色邊框，讓他們像「一般信息」，「提交日期」標題或任何將滿足您的需求。