公告系统设计指南
公告模板的类型
A.导航公告
横屏配置切图尺寸
定制横屏公告系统需上传顶部导航栏背景、左侧标签栏卡片背景和弹窗背景图切图，切图均为三倍图 @3X 大小，文件类型：JPG. PNG.
横屏配置定制化建议
字符必须清晰可见。因此，当背景图为浅色时，建议使用深色描述字符；当背景图为深色时，建议使用浅色描述字符。
正确的定制化样式
文字颜色与背景颜色对比明确，便于阅读，同时采用了强调色和辅助色，使得整体结构清晰。
错误的定制化样式
文字颜色与背景颜色对比模糊，不便阅读，主次颜色较为相近，整体结构层次不够明确。
竖屏配置切图尺寸
定制竖屏公告系统需上传顶部导航栏背景、标签栏卡片背景、弹窗背景图和返回上一级按钮切图，切图均为三倍图 @3X 大小，文件类型：JPG. PNG.
竖屏配置定制化建议
字符必须清晰可见。因此，当背景图为浅色时，建议使用深色描述字符；当背景图为深色时，建议使用浅色描述字符。
正确的顶部导航栏样式
文字颜色与背景颜色对比明确，便于阅读，同时采用了强调色和辅助色，使得整体结构清晰。
错误的顶部导航栏样式
文字颜色与背景颜色对比模糊，不便阅读，主次颜色较为相近，整体结构层次不够明确。
返回上一级按钮上的文字图标均为按钮切图的一部分，切图时需注意：
正确的返回上一级按钮
按钮切图上需包含文字或图标 icon 内容。
错误的返回上一级按钮
只有按钮的背景切图，按钮含义不清晰。
全局文本类型和字体建议
全局文本类型按照颜色配置可分为 4 种，分别为默认文字、辅助文字、公告高亮文字和公告链接文字，字体可自行上传配置，版权问题由厂商自行承担。
正确的文本颜色配置
正文文字颜色清晰易读，辅助文字和公告高亮文字颜色对比明确，公告链接文字颜色使用正确。
错误的文本颜色配置
正文文字颜色放在错误的背景颜色上，不易辨认，辅助文字和公告高亮文字颜色对比不够强烈，公告链接文字没有可点击跳转感。
全局更多可配置区域与切图尺寸
除了字体和文字颜色，全局还有更多可定制细节如关闭按钮、小红点、空状态插图和公告状态标签，切图均为三倍图 @3X 大小，文件类型：JPG. PNG.
B.开屏公告
横屏配置切图尺寸
定制横屏公告系统需上传顶部导航栏背景和弹窗背景图切图，切图均为三倍图 @3X 大小，文件类型：JPG. PNG.
横屏配置定制化建议
标题颜色与背景颜色对比明确，配置的内容图片和文本比例和谐，横屏游戏推荐图片高度不超过弹窗高度的二分之一，以便在首屏展示更多公告 信息。
正确的定制化样式
文字颜色与背景颜色对比明确，便于阅读，同时采用了强调色和辅助色，使得整体结构清晰。
错误的定制化样式
标题颜色与背景颜色对比模糊，不便阅读；配置的内容图片高度过高，重要文本信息无法首屏展示。
竖屏配置切图尺寸
定制竖屏公告系统需上传顶部导航栏背景和弹窗背景图切图，切图均为三倍图 @3X 大小，文件类型：JPG. PNG.
竖屏配置定制化建议
字符必须清晰可见。因此，当背景图为浅色时，建议使用深色描述字符；当背景图为深色时，建议使用浅色描述字符。
正确的顶 部导航栏样式
文字颜色与背景颜色对比明确，便于阅读，同时采用了强调色和辅助色，使得整体结构清晰。
错误的顶部导航栏样式
文字颜色与背景颜色对比模糊，不便阅读，主次颜色较为相近，整体结构层次不够明确。
全局文本类型和字体建议
全局文本类型按照颜色配置可分为 4 种，分别为默认文字、辅助文字、公告高亮文字和公告链接文字，字体可自行上传配置，版权问题由厂商自行承担。
正确的文本颜色配置
正文文字颜色清晰易读，辅助文字和公告高亮文字颜色对比明确，公告链接文字颜色使用正确。
错误的文本颜色配置
正文文字颜色放在错误的背景颜色上，不易辨认，辅助文字和公告高亮文字颜色对比不够强烈，公告链接文字没有可点击跳转感。
全局更多可配置区域与切图尺寸
除了字体和文字颜色，全局需配置空状态插图作为空白公告兜底图，切图为三倍图 @3X 大小，文件类型：JPG. PNG.
C.跑马灯公告
跑马灯背景风格
跑马灯背景长度可配置为：自适应铺满和自定义长度，两者呈现风格也不相同。如图例：
自适应铺满可配置内容
可配置滚屏区域长度和跑马灯显示位置。
自定义长度可配置内容
可配置滚屏区域长度和跑马灯显示位置。
全局更多可配置区域与切图尺寸
除了位置，跑马灯还可定制文字颜色、背景颜色和公告图标，自定义公告图标需上传切图，切图为三倍图 @3X 大小，文件类型：JPG. PNG.
字符必须清晰可见。自定义文字颜色和背景颜色时，需考虑到两者的对比度是否便于阅读。
正确的颜色定制化
文字颜色与背景颜色对比明确，便于阅读。
错误的颜色定制化
文字颜色与背景颜色对比模糊，不便阅读。
D.图片公告
相关配置文档敬请期待~