简介
为提高H5应用的用户操作体验，开发商工作台拟定了一套H5应用设计指南，指南包含准则和规范两部分。准则是从平台设计角度讲解设计体验指南，规范则定义了应用设计过程中需要遵循的标准，保证所有应用基本框架的一致性，同时遵循开发商工作台设计理念，向用户传达“直观、高效、温暖”的应用操作体验，最大程度适应和支持不同需求，实现用户与服务方的共赢。
计准则
符合移动端设计风格
H5应用的设计应符合移动端设计规范，不可直接采用PC端设计样式，需要针对特殊机型做设计适配。
导航框架清晰明确
- 顶部导航
H5应用系统提供统一的顶部导航样式，服务方无需独立开发，设计者即可在更多操作中按规则自定义添加操作按钮。
- 自定义底部标签栏
底部标签用于平级区域功能的展示和切换，设计者可在底部标签栏添加标签分页（tab），标签数量不少于2个，最多显示5个标签，且当前选项内容需要做高亮区分。
反馈结果及时告知用户
H5应用中，页面操作的结果应及时告知用户，当有交互动作例如单击、滑动、拖拉等都需要显示操作状态，页面加载过程中也需要展示加载状态，减少用户等待过程中的焦虑。
文案信息清晰、准确
界面文案词汇应简单、前后一致、易于理解。文案内容含义易于用户理解和操作，避免使用生僻、专业用语或者有歧义的词汇，增加用户的认知负荷，造成歧义和误解。
基础设计规范
LOGO
应用LOGO遵循简洁、易识别的设计原则，使用最能代表应用本身含义的单个图片元素，图形简洁明了，易于用户理解，不使用复杂的图形。LOGO图片清晰、大小适中，确保画面的识别性和整体美观度。
- 设计规范
遵循栅格规则，语义表述清晰，极简易懂，色彩醒目，具有自己的风格特征：
- LOGO基础图形十字栅格框大小为36*36px，圆角3，导出尺寸为108px*108px。
- LOGO图形与容器上线左右保持一定的间距。
- 容器内只有一个焦点核心元素，不能使用界面截图。
- 如需更大尺寸的LOGO，按上述规则绘制LOGO后等比放大。
- 使用场景
应用LOGO展示在首页、应用列表等页面中。
页面布局
- 基础布局
为达到最佳视觉效果，页面整体设计画板宽度为375px。页面信息内容设计时，需预留左右边距，提高页面信息可读性。
- 间距
设计和开发过程中，在元素（模块）与模块之间正确使用规律的间距能提升页面视觉元素的秩序感，快速完成视觉搭建和页面设计布局，挖掘更多丰富且具有整体一致性的设计方案。
H5应用设计的常规间距为4的倍数，即最小数字单位为4，适用于横向、纵向布局。使用场景包含但不限于功能组件、页面布局、Logo/Icon、插画等。
颜色
颜色是指UI界面设计中使用的色彩体系，包括品牌色、中立色、字体色、功能色四个部分。
- 品牌色
代表品牌对外形象及VI识别。根据品牌特性定义主色数量，可以使用一种或者多种颜色。品牌色主要用于页面主Button、主要搜索组件、价格组件、ICON组件等，突出品牌特征。次级品牌色层级低于品牌，多用与子品牌、子服务、行业等衍生业务。
若应用没有强烈的品牌色要求，可采用开发商工作台提供的品牌色规范。
色号 |
功能 |
说明 |
| #F2F6FF | 品牌色主浅色 | 背景、step、主导航菜单选中态颜色 |
| #0052FF | 品牌色主色 | 强调或者需要品牌透出的场景，例如主按钮、品牌相关图标色、主标签、核心控件选中态等时的颜色。 |
| #0045D9 | 品牌色主深色 |
鼠标Hover或者选中时的颜色。 |
- 中立色
中立色采用灰色或饱和度低的颜色，用于界面设计中背景、边框、分割线、ICON、中立插图等。
色号 |
功能 |
说明 |
| #E8E9EC | 浅分割线 |
表格分割线、卡片分割线。 |
| #F6F8FB | 填充色浅 | 填充色、表格总计栏、子级卡片头部色、子级卡片填充色。 |
| #EEF0F3 | 填充色 | 背景色、表头填充色、Tag默认底色。 |
#000000 透明度40% |
蒙层 |
蒙层 |
- 字体色
用于标题、内容、提示等字体颜色。
色号 |
功能 |
说明 |
#C4C5C6 |
禁用色 | 禁用提示 |
| #98999B | 辅助信息 | 预填充、辅助说明 |
#56595B |
辅助标题或者内容 |
Lable标题、二级正文 |
| #16191C | 主标题或者内容 | 正文、卡片标题、页面标题 |
- 功能色
需要引起用户注意的UI设计，例如流程中的进度、提醒、成功等。
色号 |
功能 |
说明 |
| #24B64A | 成功色 | 常态文字、Icon色 |
| #008FFF | 提示色 |
常态文字、Icon色 |
| #FF8500 | 警告色 | 常态文字、Icon色 |
| #E51C1C | 错误色 |
常态文字、Icon色 |
| #10AD9F | 帮助色 | 常态文字、Icon色 |
#3B5FE7 |
链接色 | 常态文字、Icon色 |
文字
- 字体
无线端因平台基础属性机制问题，iOS和Android分别定义了不同的官方字体。通常第三方应用App不定义单独字体，涉及过程中可使用各自平台的官方字体库。
- 字号
文字应清晰地显示在页面中，核心内容字号设置为12、14、16、18、20、22，遵循2x的递增或递减序列，最小字号10；运营大标题字号遵循4x的序列规则。
- 行高
为确保字体的最佳视觉效果，行高设置为字号值的1.5倍。
圆角
图片
- 设计规范
- 禁止使用无版权素材图片
- 图片画质清晰，设计稿输出≥2倍的设计尺寸。
- 图片包含的景象必须清晰，色彩鲜明。
- 图片避免拉伸和裁切人物头部等。
- 出现网络加载失败或加载延迟问题时，需要在图片区域使用占位图，占位图背景颜色为#EEF0F3。
- 应用场景
图片主要应用在每个应用页面的Banner位、广告宣传图等运营服务区域。
基础组件
标签栏
底部Tab按钮需要做兼容适配，保证按钮单击区域不与手机物理键盘重叠。
轻提示
轻提示Toast用于对操作结果进行轻量级反馈，无需用户操作即可自行消失，适用于页面内容变化不直接反应操作结果的场景。
对话框
显示需要特定用户决策或确认的关键信息，用户快速判断并进行相关操作。应用于二次确认、重要提醒、状态提示等场景。对话框组件设计规范：
- 显示在屏幕中心位置。
- 最大高度为屏幕高度的60%。
- 对话框中的操作按钮区分主次。
文本框
用户在文本框中可以输入字母、数字或符号，支持跨行输入。
步骤条
步骤条也称为步骤导航，体现操作过程的方向和其中的各个关键环节，步骤条可以让用户清晰了解当前操作以及在整个任务流程中的进度。
选项卡
选项卡用于内容筛选，是一种快速切换导航的方式，在屏幕同一空间内两部分或两部分以上内容之间进行切换。选项卡设计规范：
- 标签页名称：名称应简洁明了，一般不超过六个汉字。
- 默认选择：至少有一个默认选择，每次刷新切换到第一个选项。
- 排序：具有相关性内容的选项卡应当放在相邻位置。
单选按钮
用于在多个选项中选中单个状态。
多选按钮
用户通过单击来选中或取消选项，不限制选中的数量。
典型页面示例
通用首页样式
行业首页样式
交通出行、医疗卫生、旅游休闲、公共安全、政务办事、教育职考行业首页样式待补充。
通用页面样式
表单和流程页面样式
缺省页面样式
资源下载
设计文件
为方便设计师快速完成应用界面设计，开发商工作台提供一套标准基础组件和典型页面设计模板，请参见H5应用设计规范.sketch。
开发源码
查看前端组件代码
