关于前端:SAP-UI5-SimpleForm-layout-设计的一些推荐做法

3次阅读

共计 666 个字符,预计需要花费 2 分钟才能阅读完成。

如果表单仅蕴含一个组,请不要应用组题目 – 而是应用表单题目。
看个具体的例子:

如果表单是页面上的惟一元素并且它有多个组,则能够应用组题目来标识每一个组。

如果表单是页面上的几个元素之一,例如表格和列表,请应用表单题目作为其题目。

One Page, Many Forms

如果您想强调某些组十分不同,请在一个页面上应用多个表单,而不是应用一个蕴含多个组的表单。从视觉上看,这看起来比应用具备多个组的单个表单更加拆散。给每个表格一个有意义的题目。如有必要,您也能够应用组来构建每个表单。在这种状况下,还要给组一个题目。

下图是一个页面上领有若干个 form 的例子:

上面是一个 form 领有若干个 group 的例子:

Form 在不同尺寸类型下的布局

Size S (Smartphones and Dialogs)

保留默认行为(标签字段比率为 12:12:0 的单列布局)。

Size M (Tablet) – Full Screen

如果将表单放在分屏的详细信息局部,请应用标签字段比例为 4:7:1 的单列布局(标签应用 4 个网格列,字段应用 7 个网格列,1 空列应用的网格列)。

如果将表单搁置在全屏应用程序中,请应用标签字段比例为 3:5:4 的单列布局(标签应用 3 个网格列,字段应用 5 个网格列,以及 4 个网格列 由空列应用)。

正如在响应性(断点)局部中曾经解释的那样,大小 M 降落到 601 像素。在这种尺寸下,3:5:4 的办法可能不够宽,无奈包容更长的标签和字段。因而,如果您冀望长标签或输出值,请应用标签字段比率 4:8:0(标签应用 4 个网格列,字段应用 8 个网格列,空列应用 0 个网格列)。

上面是一个成果:

正文完
 0