简介

为提高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组件等，突出品牌特征。次级品牌色层级低于品牌，多用与子品牌、子服务、行业等衍生业务。

若应用没有强烈的品牌色要求，可采用开发商工作台提供的品牌色规范。

• 中立色

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

• 字体色

用于标题、内容、提示等字体颜色。

• 功能色

需要引起用户注意的UI设计，例如流程中的进度、提醒、成功等。

文字

• 字体

无线端因平台基础属性机制问题，iOS和Android分别定义了不同的官方字体。通常第三方应用App不定义单独字体，涉及过程中可使用各自平台的官方字体库。

1. 字号

文字应清晰地显示在页面中，核心内容字号设置为12、14、16、18、20、22，遵循2x的递增或递减序列，最小字号10；运营大标题字号遵循4x的序列规则。

• 行高

为确保字体的最佳视觉效果，行高设置为字号值的1.5倍。

圆角

图片

• 设计规范

• 禁止使用无版权素材图片

• 图片画质清晰，设计稿输出≥2倍的设计尺寸。

• 图片包含的景象必须清晰，色彩鲜明。

• 图片避免拉伸和裁切人物头部等。

• 出现网络加载失败或加载延迟问题时，需要在图片区域使用占位图，占位图背景颜色为#EEF0F3。

• 应用场景

图片主要应用在每个应用页面的Banner位、广告宣传图等运营服务区域。

基础组件

标签栏

底部Tab按钮需要做兼容适配，保证按钮单击区域不与手机物理键盘重叠。

轻提示

轻提示Toast用于对操作结果进行轻量级反馈，无需用户操作即可自行消失，适用于页面内容变化不直接反应操作结果的场景。

对话框

显示需要特定用户决策或确认的关键信息，用户快速判断并进行相关操作。应用于二次确认、重要提醒、状态提示等场景。对话框组件设计规范：

• 显示在屏幕中心位置。

• 最大高度为屏幕高度的60%。

• 对话框中的操作按钮区分主次。

文本框

用户在文本框中可以输入字母、数字或符号，支持跨行输入。

步骤条

步骤条也称为步骤导航，体现操作过程的方向和其中的各个关键环节，步骤条可以让用户清晰了解当前操作以及在整个任务流程中的进度。

选项卡

选项卡用于内容筛选，是一种快速切换导航的方式，在屏幕同一空间内两部分或两部分以上内容之间进行切换。选项卡设计规范：

• 标签页名称：名称应简洁明了，一般不超过六个汉字。

• 默认选择：至少有一个默认选择，每次刷新切换到第一个选项。

• 排序：具有相关性内容的选项卡应当放在相邻位置。

单选按钮

用于在多个选项中选中单个状态。

多选按钮

用户通过单击来选中或取消选项，不限制选中的数量。

典型页面示例

通用首页样式

行业首页样式

交通出行、医疗卫生、旅游休闲、公共安全、政务办事、教育职考行业首页样式待补充。

通用页面样式

表单和流程页面样式

缺省页面样式

资源下载

设计文件

为方便设计师快速完成应用界面设计，开发商工作台提供一套标准基础组件和典型页面设计模板，请参见H5应用设计规范.sketch。

开发源码

查看前端组件代码