简介

为提高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或者选中时的颜色。

色号

功能

说明

#F2F6FF

品牌色主浅色

背景、step、主导航菜单选中态颜色

#0052FF

品牌色主色

强调或者需要品牌透出的场景，例如主按钮、品牌相关图标色、主标签、核心控件选中态等时的颜色。

#0045D9

品牌色主深色

鼠标Hover或者选中时的颜色。

中立色

中立色采用灰色或饱和度低的颜色，用于界面设计中背景、边框、分割线、ICON、中立插图等。

色号	功能	说明
#E8E9EC	浅分割线	表格分割线、卡片分割线。
#F6F8FB	填充色浅	填充色、表格总计栏、子级卡片头部色、子级卡片填充色。
#EEF0F3	填充色	背景色、表头填充色、Tag默认底色。
#E6E8EB	填充色深	鼠标Hover态、浅分隔冲突、容器背景。
#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位、广告宣传图等运营服务区域。