- 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 源文件