如果表單僅包含一個組，請不要使用組標題 - 而是使用表單標題。
看個具體的例子：

![](https://img-blog.csdnimg.cn/img_convert/5d4c6812c8535adbb050f4ddf2e1bce8.png)

如果表單是頁面上的唯一元素並且它有多個組，則可以使用組標題來標識每一個組。

![](https://img-blog.csdnimg.cn/img_convert/cc102a58011f5eeff50fb7314058f458.png)

如果表單是頁面上的幾個元素之一，例如表格和列表，請使用表單標題作為其標題。

![](https://img-blog.csdnimg.cn/img_convert/46a9d80a6e05e4e3b19d57a0ee70bcdf.png)

# One Page, Many Forms

如果您想強調某些組非常不同，請在一個頁面上使用多個表單，而不是使用一個包含多個組的表單。 從視覺上看，這看起來比使用具有多個組的單個表單更加分離。 給每個表格一個有意義的標題。 如有必要，您也可以使用組來構建每個表單。 在這種情況下，還要給組一個標題。

下圖是一個頁面上擁有若干個 form 的例子：

![](https://img-blog.csdnimg.cn/img_convert/eb4b3c924ad411aa18c9ec9092719467.png)

下面是一個 form 擁有若干個 group 的例子：
![](https://img-blog.csdnimg.cn/img_convert/1014213c4196c8798c8417b952a8a253.png)

# Form 在不同尺寸型別下的佈局

## Size S (Smartphones and Dialogs)

保留預設行為（標籤欄位比率為 12:12:0 的單列布局）。

![](https://img-blog.csdnimg.cn/img_convert/66ba272a0bfc97be54a5fa679e3d5482.png)

# Size M (Tablet) – Full Screen

如果將表單放在分屏的詳細資訊部分，請使用標籤欄位比例為 4:7:1 的單列布局（標籤使用 4 個網格列，欄位使用 7 個網格列，1 空列使用的網格列）。

![](https://img-blog.csdnimg.cn/img_convert/bca4cb090baa8da2af298cceffa5d128.png)

如果將表單放置在全屏應用程式中，請使用標籤欄位比例為 3:5:4 的單列布局（標籤使用 3 個網格列，欄位使用 5 個網格列，以及 4 個網格列 由空列使用）。

![](https://img-blog.csdnimg.cn/img_convert/ee918abc0af940d2bf5e925c602909d4.png)

正如在響應性（斷點）部分中已經解釋的那樣，大小 M 下降到 601 畫素。 在這種尺寸下，3:5:4 的方法可能不夠寬，無法容納更長的標籤和欄位。 因此，如果您期望長標籤或輸入值，請使用標籤欄位比率 4:8:0（標籤使用 4 個網格列，欄位使用 8 個網格列，空列使用 0 個網格列）。

下面是一個效果：

![](https://img-blog.csdnimg.cn/img_convert/f6818d83a3063ad525c42a45e2565b0f.png)

SAP UI5 SimpleForm layout 設計的一些推薦做法

相關文章