---
order: 3
category:
  zh-CN: 设计指引
  en-US: Guide
title: 
  zh-CN: Banner 首屏
  en-US: Banner
---

Banner 是整个展示页面最重要的组成部分之一，一般介绍产品的名称和简介，并且体现整体产品的风格走向。

高度为 750px 为例： Banner 一屏的设计尺寸为 1200\*750px，半屏的设计尺寸为 1200\*375px（多用于技术类的产品），主要由单屏和多屏滚动两种类型：

## 单屏布局一

<img class="preview-img" align="right" alt="单屏布局一" description="" src="https://gw.alipayobjects.com/zos/rmsportal/doqiWMyWYcCPFBMrXJLn.jpg">

1）全屏背景图；

2）标题、文案和按钮与页面居中对齐；

## 单屏布局二

<img class="preview-img" align="right" alt="单屏布局二" description="" src="https://gw.alipayobjects.com/zos/rmsportal/JOxMWSQxCWoKakcYZWcI.jpg">

1）主图在页面左侧，标题、文案和按钮在页面右侧；

2）建议文案和button部分左对齐；

## 单屏布局三

<img class="preview-img" align="right" alt="单屏布局三" description="" src="https://gw.alipayobjects.com/zos/rmsportal/ZGjSLLsUrJFbFVrUxaft.jpg">

1）主图在页面右侧，标题、文案和按钮在页面左侧；

2）建议文案和button部分左对齐；

## 单屏布局四

<img class="preview-img" align="right" alt="单屏布局四" description="" src="https://gw.alipayobjects.com/zos/rmsportal/YEneEHFzGvSNtGSFJALF.jpg">

1）主图在页面下方；

2）标题、文案和button与页面居中对齐；

## 多屏滚动类

<img class="preview-img" align="right" alt="多屏滚动类" description="" src="https://gw.alipayobjects.com/zos/rmsportal/rtlntsHdPmorumOLIHVY.jpg">

1）多屏Headers组合，底部有走马灯滚动轮播；

2）建议滚动屏不超过5个；


## 半屏类型

<img class="preview-img" align="right" alt="半屏类型" description="" src="https://gw.alipayobjects.com/zos/rmsportal/ItuPxLqTgqgEhMaxexvp.jpg">

1）半屏的设计尺寸为1200*375px；

2）排版方式和类别与整屏的相同（在此列举其中一种）；