- 1.参考
- 2.尺寸大小
尺寸 | 格式 | 大小 | 背景色 | 行动点 | 圆角 | 透明度 |
上传尺寸：1380x450px （1 倍图是 460x150px，为保证图片显示品质要求传 3 倍图） | JPG/PNG | 小于 1000KB 需保持图片高清 | 不限制 | 非必须，若有需符合 | 不支持 | 不支持 |
⚠️ 仅需上传一张图，系统会根据图片自适应进行等比拉伸或裁切
- 3.宣传栏自适应规则
- •桌面端宣传栏自适应宽度跨度会从 308-470px（1 倍图）、iPad 宣传栏宽度跨度会从 280-600px（1 倍图）
- •裁切规则：
- ◦当 Banner 容器宽度小于 460px（1 倍图），图片从右往左侧裁切
- ◦当 Banner 容器宽度大于 460px（1 倍图），图片宽度同容器宽度，图片上下裁切
- ◦图片显示均保证等比拉伸
- •核心内容区域可放置内容包括：产品 Logo、主标题、副标题、行动点、主图形
- •右侧区域建议放置简单的辅助图形，辅助图形随宣传栏宽度自适应过程中会被裁切
- 4.正确示例
示例 1
示例 2
- 5.错误示例
错误 ❌ ：人物右侧过空，整体重心偏左 | 错误 ❌ ：英文文字过小，识别困难，最小文字字号：30px |
错误 ❌ ：图片上传品质不够，造成模糊 | 错误 ❌ ：重要文案信息需放左侧，排版需严格按照规范，否则会导致重要信息被裁切 |
错误 ❌ ：文案信息偏右 | 错误 ❌ ：按钮不符合规范，在切换宣传栏时按钮大小样式不统一，体验不佳 |
- 6.文案规范
目前，根据中英文、数据排版的标准规则，请在物料准备及产品设计时，注意在"中英文之间添加半角空格"、"中文与数字之间添加半角空格"，例如：
错误 ❌ | 正确 ✅ |
PRD文档 | PRD 文档 |
超过3000人 | 超过 3000 人 |
字数建议：内容清晰简短
- •建议中文标题控制在 20 个汉字以内；中文辅助文案控制在 30 个汉字以内
- •建议其他语言字符标题控制在 40 个字符以内，辅助文案控制在 60 个字符以内
- 7.按钮规范
按钮样式为以下三种
按钮尺寸
- •文字大小：30px 字体：PingFang 字重：Medium 文字左右 Padding：48px
- •按钮高度：66px 按钮形态：全圆角 按钮颜色不限制
- •按钮在文字区域，与文字左对齐，距离左侧边距 60px
示例
样式一：用于希望强调的按钮
样式二：常规按钮
样式三：宣传栏底色为深色时按钮显示样式
- 1.移动端示例
- 2.桌面端示例
- 3.iPad 示例
- 4.Figma 源文件