Skip to main content

页面详情页

详情页通常用于显示某个具体业务对象的详细信息，例如一个订单、一个客户、一个产品等。详情页通常包含该业务对象的各个属性、状态、操作记录等详细信息，以便用户全面了解该对象的情况并进行相关操作。

页面结构​

页面详情的结构分为三部分：1.标题栏；2.标签定位栏；3.内容卡片。

标题栏​

告知用户当前所在的页面，包含：返回按钮、页面标题、以及根据业务所特有的页面提交、审核等按钮。

文案格式​

格式示例
xxxx > xxxx詳情合作夥伴 > 合作夥伴詳情

按钮类型​

按钮示例按钮说明
--
--

标签栏​

标签定位栏​

用于快速理解页面的结构和定位信息。

注意：标签文案和内容卡片标题的文案应该统一标签功能。

功能示例说明
字段未填写或填写完成当卡片中字段都填写或还未填写时
数据统计当卡片中可以统计数据时，比如：商品列表、会员列表、单据列表、附件列表等

内容区​

类型​

基础​

上下布局

左右布局

带边框​

布局模式​

表单宽度根据断点自适应。

列数断点变量表单宽度左右间距上下间距中间间距
21600pxxxl752px24px24px48px
21200pxxl552px24px24px48px
2992pxlg448px24px24px48px
2768pxmd336px24px24px48px
1576pxsm536px24px24px48px
1480pxxs432px24px24px48px

操作按钮​

根据卡片需要选择使用操作按钮并放置在合适的位置。

区块级操作​

突出

当操作较为重要时候可以使用主要按钮并放置在标题下方。

普通

弱化

字段级操作​

当仅需要对单一字段进行操作时，将操作按钮放置与该字段右对齐。

基本

带边框

数据添加​

需要新增列表信息时，可通过列表下的按钮直接新增列表进行编辑操作。

附件​

文件可单独放置在卡片中，附件内容可直接点击下载。

图片​

分组模式​

内联分组​

基本​

通过在区块之间添加分割线进行分组。

上下布局

左右布局

带边框​

通过再区块之间添加间距进行分组。

分组建议​

  • 根据业务类型进行字段分组/排序；
  • 根据字段类型进行字段分组/排序。

排版建议​

  • 建议一个卡片或者分组最多 7 个字段；
  • 建议文件、图片、富文本等组件单独一个分组。