京东APP交互设计规范.pdf

上海设计部 交互 设计 规范 2017/09 手机京东客户端 更新日期更新日期 更新内容更新内容 撰写人撰写人 2016.10.21 新增新手引导（详见P24-26）新增视频控件（详见P35-46)吴彩虹 2016.11.28 含编辑操作的页面返回提示（详见P69-70)吴彩虹 2016.12.30 语音识别控件（详见P71-73)吴彩虹 2017.03.16 页面流转：从侧面切出页面（详见P6）滑动控件：页面左右滑动（详见P73）吴彩虹 2017.06.28 组件：刷新（详见P49）魏帅丽 2017.07.27 新增提示控件页面位置的规范说明（详见P16-P22）购物车控件：商品加入购物车（详见P74-P76）魏帅丽 2017.08.14 页面流转：下拉列表浮层 补充一级功能入口配置规则（详见P11）提示控件：模态弹窗 补充关闭按钮位置说明（详见P21）视频控件：预览视频 补充wifi环境下流量确认浮层的说明（详见P37）视频控件：内嵌视频 补充页面滑动和跳转的相关逻辑（详见P40）页面返回：多层级页面的返回 新增多层级页面返回的状态说明（详见P70-73）红点提醒机制 新增红点显示及消失的机制规范说明（详见P81-P83）魏帅丽 2017.09.22 组件：悬浮响应按钮 补充悬浮响应按钮位置限制条件、页面兜底区域说明、返回顶补充说明（详情见P50-51）底部导航栏：点击选中态的选项卡操作说明（详情见P84）鲍男平 上海设计部 更新日志 目录 上海设计部 页面流转 从侧面切入切出的页面 06 09 侧拉浮层 从底部弹出收起的页面 08 下拉浮层 10 下拉列表浮层 11 向上展开浮层 12 控件组件 提示控件：纯文本提示 16 18 提示控件：双确认按钮提示 提示控件：单确认提示 17 提示控件：双确认按钮提示（包含自定义内容）19 提示控件：模态弹窗 21 提示控件：模态浮层 22 提示控件：气泡浮层 23 28 选择控件：单选 提示控件：新功能引导 24 选择控件：多选 30 选择控件：开关 32 选择控件：滚轮 33 选择控件：操作清单 34 视频控件：预览视频 35 视频控件：内嵌视频 39 47 组件：键盘 视频控件：播放器 43 组件：验证码 48 组件：刷新 49 组件：悬浮响应按钮 50 上海设计部 内容加载 常见加载方式 54 61 状态展示 允许进行的操作 59 补充建议 手势操作 66 68 图片 缓存 67 目录 74 语音识别控件 77 滑动控件：页面左右滑动 78 购物车控件：商品加入购物车 70 页面返回：多层级页面的返回 81 红点提醒机制 84 底部导航栏 上海设计部 页面流转 页面流转丨从侧面切入切出的页面 上海设计部 全页在页面左侧边缘从左向右滑动，该从左侧向右划出屏幕，返回上一级页面，滑动时，当前页面内容不执行滑动操作 交互说明 同一流程中为上下级关系的页面，在iOS系统中，支持左侧边缘右滑切出。如搜索结果页商详页 使用场景 示例：从商详页返回搜索结果页 6 上海设计部 手势回退动效参考pageflow1.MP4 iPhone手势回退效果“打开新页面”动效应与“手势侧滑回退”动效方向相反 侧面切入的新页面 手势侧滑回退 点返回按钮回退 7 页面流转丨从底部弹出收起的页面 上海设计部 切入：全页从下往上弹出 切出：全页从上往下收起【上下滚动】移动屏幕内的页面内容 交互说明 主流程中的旁支流程，如登陆 使用“取消”“关闭”“完成”返回上一级 以“完成”返回时，向服务器提交内容 使用场景 示例：自下方升起的登陆页 关闭 8 页面流转丨侧拉浮层 上海设计部 切入：点击触发控件，浮层向左划入页面，覆盖部分原页面，其余部分显示为半透明遮罩 切出：【点击遮罩/右划浮层】，浮层向右划出页面，露出原页面，半透明遮罩消失 交互说明 用于承载主流程页面中较复杂的旁支内容或功能。如，列表页筛选器，商详页历史浏览记录*当旁支内容与功能需要被频繁调用时，使用侧拉浮层更轻量 使用场景 示例：列表页筛选器二级页面，选择分类 全部分类 9 页面流转丨下拉浮层 上海设计部 切入：点击触发控件，浮层向下滑出，页面其余部分显示为半透明遮罩 切出：点击遮罩处，浮层向上收起，半透明遮罩消失 交互说明 头部较短的拓展菜单 使用场景 示例：秒杀分类浮层 10 页面流转丨下拉列表浮层 上海设计部 切入：点击“”触发控件，下拉列表向下滑出，页面其余部分无遮罩 切出：点击页面非浮层区域，列表向上收起 交互说明 注：使用进行功能收纳时，用户无法直观看到隐藏功能，对于某些强需求操作可能会消弱其使用率，因此需要合理考虑此控件的使用，常用功能不适于隐藏 使用场景 示例 个数限制、规则 导航栏右侧最多放置2个一级功能入口；当存在12个一级功能入口时，右侧直接展示；当存在3-5个一级功能入口时，可根据业务需要露出最重要的一级功能入口，其余收起在“”，也可全部收起在“”中 展开列表建议 个数：尽量限制在2-5个，若多于五个，可咨询相应交互师沟通解决方案；内容项：常见全局功能如消息、返回首页、分享.，其他选项需结合实际场景、需求度、所在页面路径层级等因素判断必要性，切忌为了使用.而添加过多干扰功能；排序：全局功能常用有“消息”入口，在较深层级中常用有“首页”，频道常用“购物车”，此三者权重较高，具体情况可与相应的交互设计师沟通解决方案；红点机制（详见红点机制规范）当浮层列表中消息入口产生点标/数标时，触发控件显示点标/数标；消息入口点标/数标消失时，触发控件上同样消失。内外的消息提示样式需保持一致。11 页面流转丨向上展开浮层 上海设计部 切入：点击触发控件，浮层由下之上滑出，页面其余部分显示为半透明遮罩 切出：点击遮罩处或浮层关闭button，浮层向下收起，半透明遮罩消失 交互说明 适用于承载页面中唤醒的某些轻量操作内容或选项，不适用于较复杂冗长的内容展示和操作。使用场景 12 页面流转丨向上展开浮层 上海设计部 样式一：底部多项操作栏 适用于触发浮层时可以直接进入下一步操作的情况（有多种继续操作的路径，不需要返回页面进行其他操作即可继续），减少用户跳转页面的次数，此时底栏需要显示多项操作入口，按照优先级做视觉差异化处理。例如商详页选择商品属性后直接加入购物车。样式二：底部单项操作栏 适用于触发浮层时可以直接进入下一步操作的情况（单一路径的操作，不需要返回页面进行其他操作即可继续），减少用户跳转页面的次数，此时底栏需要显示与当前操作有关的关键信息和操作入口。例如购物车中多选选择换购商品、选择延保服务。形式样例 样式一：底部多项操作栏 样式二：底部单项操作栏 示例：商详页选择商品属性 13 页面流转丨向上展开浮层 上海设计部 样式三：无底部操作栏 适用于浮层内仅用于展示内容或在浮层内进行轻量操作，无下一步操作的情况，此时需要用户关闭浮层回到页面继续其他操作。形式样例 样式三：无底部操作 示例：商详页领取优惠券、选择促销 14 上海设计部 控件组件 验证码组件 验证码组件 提示控件丨纯文本提示 上海设计部 触发：操作完成/系统报错 行为：纯文本提示浮层页面居中出现，出现2s后，提示信息自动消失；提示toast为非模态，其展示期间不影响页面其他操作如滑动、点击；交互说明 适用于承载信息量较少的纯告知信息（完成/失败/异常等)1.当用户完成某操作时给予反馈 2.系统问题的反馈（如网络异常）使用场景 示例：商详页点击关注，提示关注成功 16 描述反馈类型：成功/警告等（根据具体场景，非必配）精简的反馈信息，控制在7个字内 提示控件丨单确认按钮提示 上海设计部 触发：操作完成/系统报错 行为：单确认按钮提示浮层页面居中出现，出现后点击【确认】按钮，弹窗消失 交互说明 适用于承载需要仔细确认的告知信息 1.当用户操作引发流程失败时告知错误原因 2.较长的告知信息，如警告信息 使用场景 示例：iOS系统设置：飞行模式下检测软件更新 17 提示控件丨双确认按钮提示 上海设计部 触发：操作完成/系统报错 行为：双确认按钮提示浮层页面居中出现，点击【确认】，上一步操作生效，弹窗消失；点击【取消】，撤销上一步操作，弹窗消失 交互说明 告知用户影响APP使用的重要信息 1.当操作引发有风险的结果时（如，清除操作）2.报错时给出解决方案入口（如，缺货商品提示移除）使用场景 示例：iOS系统设置：飞行模式下检测软件更新 18 提示控件丨双确认按钮提示（包含自定义内容）上海设计部 触发：操作完成/系统报错 行为：双确认按钮提示浮层页面居中出现，点击【确定】（高优先级操作），上一步操作生效，弹窗消失；点击【取消】（低优先级操作），撤销上一步操作，弹窗消失 交互说明 告知用户影响APP使用的重要信息，信息中包含文字无法清晰表达的承载内容 1.当操作引发有风险的结果时（如，取消订单时相关商品优惠券不可返还）2.推荐内容曝光（如，身边热卖商品推荐）使用场景 19 上海设计部 示例：购物车页结算商品无货时给出提示 示例：结算页商品价格变化 示例：待付款订单页：取消订单时若涉及到资产不可逆的情况，给出提示 20 提示控件丨模态弹窗 上海设计部 触发：点击了需要拓展的功能控件，弹出模态弹窗，模态弹窗页面居中出现，其余部分为半透明遮罩 行为：点击关闭按钮/黑色半透明浮层区域时，弹窗关闭；发生跳转后，弹窗及遮罩消失 交互说明 区别提示型警示弹窗，多数用于内容拓展和展示，对用户干扰较大，谨慎使用 必备控件：关闭按钮，位置建议如下，具体情况可与相应的交互设计师沟通解决方案：当弹窗较小，建议关闭按钮放置在弹窗正下方；当弹窗较大（超过2/3屏），建议关闭按钮放置在弹窗右上角 使用场景 示例：签到领金豆时给予更多信息提示 21 自定义区域 自定义区域 提示控件丨模态浮层 上海设计部 触发：活动推送/功能引导 行为：点击关闭按钮 时，浮层关闭；点击操作控件，执行相应操作。交互说明 特定场景下活动推送，如游戏、发放红包、礼包等；页面新功能引导说明（可用于多个引导同时存在）；使用场景 示例：搜索流程京豆红包领取结果 22 提示控件丨气泡浮层 上海设计部 触发：点击了与该功能相关的其他操作时；需要进行强引导时；行为：触发该功能则气泡消失，或气泡显示3-4秒后自动消失。交互说明 对于较隐藏的功能入口或操作，可使用气泡弹窗指向进行一次性引导，气泡浮层在形式上干扰性弱，且有效指引用户注意力；适用于页面上仅有一处功能需要进行引导时；使用场景 示例：秒杀频道，使用气泡引导用户查看订阅的入口位置 23 提示控件丨新功能引导_浮层引导 上海设计部 触发：当新功能模块首次进入用户视线范围时，展示引导内容 行为：点击引导目标进入目标落地页，返回时引导消失；点击“我知道了”或空白区域，引导消失 交互说明 对于特定场景下强推的功能入口或操作，可使用全覆盖浮层进行一次性引导，有效指引用户注意力 使用场景 24 提示控件丨新功能引导_气泡引导 上海设计部 触发：当新功能模块首次进入用户视线范围时，展示引导内容 行为：若未点击气泡或引导目标，气泡5s后自动消失 若滑动页面，气泡随页面一起移动，气泡不消失 若点击引导目标，执行该目标功能，气泡消失（详见下一页操作示意）若点击气泡，气泡消失（详见下一页操作示意）若点击页面空白区域（非可点击区域），气泡不消失 若点击页面可点击区域（有跳转），用户进入其它页面，返回后气泡消失 若点击页面可点击区域（无跳转，如：点击关注），气泡不消失 交互说明 对于页面中新增功能模块或原功能模块位置的场景，给用户轻提示引导告知，可使用干扰性较小的气泡进行一次性引导 使用场景 25 提示控件丨新功能引导_气泡引导 上海设计部 若点击引导目标，执行该目标功能，气泡消失 若点击气泡，气泡消失；若该场景为重引导提示，可配置气泡落地页，气泡样式需做特殊处理（如：双十一主会场入口，气泡提示“新上线女装会场”，可点击气泡直接进入女装会场 气泡点击逻辑 26 上海设计部 少用警示弹窗 方案：融入UI设计(在我们的APP中可以用toast)场景一：告知用户任务在正常进行中 方案：用任务清单 场景二：二次确认用户自主发起的操作 方案：告知不严重的问题用toast，告知严重的问题用警示弹窗 场景三：用户无能为力的问题 27 选择控件丨单选 上海设计部 用户点选一项后视为成功选择,当选单在次级页面时，记录选择并返回 当控件在一级页面时，或表单页有其他表单项时，选择完成无页面跳转 交互说明 当用户需要在多个选项中选择一项 使用场景 示例：结算页：选择发票信息，应用了2组单选控件 28 选择控件丨多选 上海设计部 点击【选项】即记录选中，可同时点选多个选项 点击【确定】保存选择结果并返回上一级，不点击【确定】则不保存选项 备选：增加【重置】功能按钮，点击【重置】清除用户之前所有选择 交互说明 多按钮筛选项，例如商品列表筛选页 使用场景 示例：搜索筛选页，选择筛选选项 31 选择控件丨开关 上海设计部 用户【点击开关】，滑块另一侧滑动，开启或关闭选项 交互说明 打开或关闭某功能；或在同一属性的“是/否”中二选一。有时伴随次级表单项的展开。使用场景 示例：列表页筛选器筛选京东配送/有货商品（同属性“是/否”选择）关闭状态 开启状态 打开次级表单 不打开次级表单 32 选择控件丨滚轮控件 (单选或多选）上海设计部 点击【触发控件】，滚轮从下方弹出，页面其余部分显示为半透明遮罩 点击【取消】或【遮罩处】，不记录选择并返回 点击【确认】，记录选择并返回 交互说明 当用户需要在多个选项中选择一项或多项，选项有连续关系，且选项数量不至于过多；使用该控件时也需要考虑选项内容长度，避免因字数过多而无法显示的情况；使用场景 示例：结算页选择送货时间 33 选择控件丨操作清单 上海设计部 点击【触发控件】，按钮列表从下方弹出，页面其余部分显示为半透明遮罩 点击【任意按钮】，进入下一步流程 点击【遮罩处】，按钮列表向下收起，返回原页面 交互说明 选择完成任务的不同方式，触发操作流程 或二次确认有潜在风险的操作 使用场景 示例：搜索筛选页，选择筛选选项 34 视频控件丨预览视频 上海设计部 进入页面时自动加载视频预览（Wi-Fi环境下），点击可进入播放器播放（竖屏横屏），操作过程中播放进度不间断 交互说明 适用于包含视频内容的信息流页面（如：店铺头条买家秀）使用场景 35 视频控件丨预览视频 上海设计部 视频展示位置可根据页面需求定义，屏幕中仅展示一个视频预览 页面滑动交互逻辑 36 视频控件丨预览视频 上海设计部 视频模块交互说明 视频模块尺寸 视频模块内容 视频初始状态：Wi-Fi环境下自动加载视频预览，非Wi-Fi环境下显示暂停状态，可点击播放 加载结果：加载成功正常播放；加载失败，可点击重试；视频丢失，显示异常页面 视频尺寸：可根据需求自定义，需确保信息元素完整展示（由视觉提供宽高极限值）37 流量提醒：参照现有弹窗规范 默认不勾选以后直接播放，用户主动勾选并确认后，下次不再提示，直接进入加载中状态 视频控件丨预览视频 上海设计部 视频模块交互说明 视频尺寸：可根据需求自定义，需确保信息元素完整展示（由视觉提供宽高极限值）38 视频控件丨内嵌视频 上海设计部 进入页面时视频为暂停状态，可点击直接在页面中播放，可切换横屏播放 交互说明 适用于包含视频内容的主题页（如：导购详情页活动详情页），视频内容的状态不影响用户浏览其他内容 使用场景 39 页面1 视频控件丨内嵌视频 上海设计部 当视频在暂停状态时，视频可随页面滚动 当视频在播放状态时，保证视频始终在屏幕中展示 页面滑动及跳转交互逻辑 40 当播放中视频完全滑出屏幕时，页面吸底显示播放小窗口，视频播放不间断 若视频播放结束，则播放小窗自动关闭 页面1 页面1 页面1 页面2 点击切换至视频位置，缩略图消失，视频播放不间断 点击关闭按钮，页面位置不变 点击页面内其他版块，跳转到新页面 若内嵌视频长度较长、或处于场景氛围需求，当用户在页面之间切换时，小窗视频一直在右下角展示，视频播放不间断，直至视频播放结束或用户主动关闭，具体方案可与项目交互设计师商议后决定 页面3 页面2 若内嵌视频较短、或视频只与当前页面内容相关，当用户离开有内嵌视频的页面后，视频播放中断，其他页面无小窗视频，再次回到内嵌视频页，视频从头播放，具体方案可与项目交互设计师商议后决定 页面3 视频初始状态：显示暂停状态，可点击播放 加载结果：加载成功正常播放；加载失败，可点击重试；视频丢失，显示异常页面 交互行为：5秒内无操作，隐藏工具条，仅保留视频区域内容 单击视频区域，显示（隐藏）工具条 双击视频区域，切换播放暂停状态 视频控件丨内嵌视频 上海设计部 视频模块交互说明 视频模块内容 41 非wifi环境 视频尺寸：宽度固定（建议与屏幕宽度一致，可左右预留20px以内空间，具体由视觉定义），高度可自定义（提供参考尺寸：1:1/4:3/16:9）视频控件丨内嵌视频 上海设计部 视频模块交互说明 42 视频控件丨播放器_竖屏播放器 上海设计部 竖屏播放器交互说明 视频内容展示如图所示 视频尺寸：屏幕固定，高度可自定义，且居中展示 交互行为：5秒内无操作，隐藏工具条，仅保留视频区域内容 单击视频区域，显示（隐藏）工具条 双击视频区域，切换播放暂停状态 点击空白区域返回，视频播放不间断 43 视频控件丨播放器_竖屏播放器 竖屏播放器交互说明 上海设计部 播放器状态：如下图所示 44 视频控件丨播放器_横屏播放器 上海设计部 横屏播放器模块交互说明 视频内容展示如图所示 视频尺寸：屏幕固定，高度可自定义，且居中展示 交互行为：5秒内无操作，隐藏工具条，仅保留视频区域内容 单击视频区域，显示（隐藏）工具条 双击视频区域，切换播放暂停状态 点击空白区域返回，视频播放不间断 45 视频控件丨播放器_横屏播放器 上海设计部 横屏播放器交互说明 播放器状态：如下图所示 46 组件丨键盘 上海设计部 1.触发：用户点击输入框或前一步操作（如：验证码弹窗弹起时，自动调起键盘），键盘自底部升起，根据所需输入内容调起不同类型键盘（中文/英文/数字）2.键盘出现时不影响页面内其它操作，如：滑动页面、点击跳转等 3.滑动页面或点击页面空白区域时键盘收起 4.（备选）支持键盘上方添加自定义栏，如：取消、完成，点击【完成】记录输入内容并收起键盘，点击【取消】不记录输入内容并收起键盘；5.当页面内同时存在多个可编辑项，在可继续编辑下一项时，键盘return键需定义为“下一项”，点击激活下一个编辑区域。交互说明 登录、注册、填写信息等需要用户进行信息输入的地方，包括键盘输入、复制和粘贴等。使用场景 示例：搜索商品 1.默认态尽量在文本框内提供提示文字，输入信息后提示文字消失 2.尽可能减少用户手动输入，尽可能为用户提供选择，如：提供联想词。3.对于规律化的内容，和可调用的信息，请使用拓展组件，如：日期输入、地域输入、联系人信息等。4.（适用于输入信息量较大的场景或多个编辑项同时存在）对于需要保存的信息，用户未保存就退出当前页时，注意给予未保存警示弹窗。5.（适用于仅存在单个编辑项）对于已编辑的信息，若未保存就退出当前页时，可不必警示保存。其它说明 x 完成 取消 47 组件丨验证码 上海设计部 详见右图 交互说明 用户在某些操作中需要输入验证码，防止恶意用户的非法行为。验证码机制阻碍了良性用户顺利进行下一步操作，是一项与用户目标无关的任务，应在风险允许的范围内尽量减轻用户负担。当前京东手机客户端的典型使用场景有：多次登陆账户失败 领取优惠券 抽奖 使用京东资产 某些商品的购买 使用场景 示例：多次登陆账户失败 首次加载 主动刷新验证码 验证码验证 48 组件丨刷新 上海设计部 下拉刷新 用户将页面向下下拉超过一定范畴并松手，则触发刷新，并给予提示；当用户将页面下拉未超过范畴时松手，则不触发刷新；点击刷新 在当前页面点击刷新功能区域时，当前页面触发刷新，并给予反馈提示；交互说明 适用于页面信息可能会频繁更新的页面 使用场景 示例：购物车的编辑状态页 向下滑动页面 在首页时，点击“首页”tab 示例：首页点击刷新 49 1.当页面中存在可供用户编辑的项目时，若用户对这些项目主动做了编辑，例如选中、调整数量等，此时页面进行刷新后，不对用户的主动操作产生影响，项目依旧保持刷新前的状态 2.（仅适用于对于页面中某个项目的横向滑动操作后）此时触发刷新功能，横向滑动操作收起，该页面回到横向滑动操作前状态 其它说明 1 刷新后项目依旧保持刷新前的状态 2 示例：我的优惠券编辑状态页 项目横向滑动操作 1 触发下拉刷新，横向滑动操作收起 2 刷新后，页面回到横向滑动操作前状态 3 组件丨悬浮响应按钮 上海设计部 点击单个悬浮响应按钮，唤起该按钮对应的操作事件结果。交互说明 悬浮响应按钮是悬浮在 界面上的图标，用来响应用户可能需要完成的操作，为用户操作提供便利。常见的使用场景有页面内锚点定位（如返回顶部、定位到“为你推荐”楼层）、跳转至页面外（如购物车、足迹、关注）。使用场景 50 个数：最多三个，多于三个，建议与交互设计师确认优先级后进行功能取舍。使用规范 排序：按优先级从上至下排序，若有“返回顶部”控件，则“返回顶部”因其功能特性建议放在最靠近页面结尾处即最悬浮按钮最下面的位置。位置区域：如下图，距离屏幕右边线 x、页面底边线 y、高度 H（H=h*n+y*n）的右下方区域，同时在页面兜底区内，页面兜底区高度DH。出现位置：只有一个按钮时，靠近页面底边线放置；其它情况相应的交互设计师沟通解决方案。示例：首页 示例：搜索结果列表 有底部导航栏 无底部导航栏 组件丨悬浮响应按钮（页面兜底区补充说明）上海设计部 静态兜底区，无点击操作热区。交互说明 使用悬浮响应按钮的页面。使用场景 51 高度：页面兜底区高度D悬浮响应按钮的高度H，即n*（h+y）。使用规范 位置区域：内容区底边线到页面底边线。（内容区说明：包含有效信息及操作的页面区域）有底部导航栏 无底部导航栏 底部兜底区-错误示范 底部兜底区正确示范 带悬浮按钮的底部兜底区正确示范 组件丨悬浮响应按钮（返回顶部补充说明）上海设计部 显示时机：页面滚动超过3屏时，右下角出现“返回顶部”的悬浮响应按钮，位置在最下方。若该位置已有按钮，则该按钮被“返回顶部”按钮推至上一个位置。操作行为：点击“返回顶部”按钮，页面直接回滚至顶部。消失时机：页面滚回至3屏尾部，“返回顶部”按钮消失。“返回顶部”上方按钮下移。交互说明 适用于浏览型长页面，如首页、频道页、搜索结果列表、活动聚合页等。在用户持续浏览过程中可随时快速返回页面顶部。使用场景 52 上海设计部 内容加载 常用 常用 常用 内容加载丨常见加载方式 上海设计部 优点：窗口即时切换，获得打开新页面的反馈 适用：B窗口信息量大，如长篇图文混排信息页 方式一：在新窗口载入（A到B，在B窗口载入）进入B时不要使用空白窗口，采用预置的格式化信息(图片占位符，信息分隔样式等)带入A窗口面已加载过的的部分信息 对B窗口的信息进行分段载入 举例：载入列表页，商详页 使用说明 B B A 54 内容加载丨常见加载方式 上海设计部 优点：不会出现空白页面，切换页面完整性好。适用：B窗口信息少，载入快，以文字为主的页面；或提交信息类，获得完成反馈后才打开新页面 方式二：在当前窗口载入（在A到载入完成，再进入B）举例：提交订单，登录账号 使用说明 A B A 55 内容加载丨常见加载方式 上海设计部 加载说明：一次性加载完页面所有数据 适用场景：适用于页面内容不多的场景，如：图文详情页 举例：图文详情页 整页加载 加载说明：每次只加载部分数据，达到二次加载条件时再加载部分数据 适用场景：适用于页面内容较多的场景 举例：商品搜索结果列表页 分页加载 加载说明：默认加载部分数据，当滚动到第N条数据时，自动加载更多数据 适用场景：适用于用户只需依次浏览场景 举例：商品评价列表 自动加载 加载说明：默认加载N条，用户需手动点击加载更多内容 适用场景：适用于用户需要浏览特定位置信息场景 举例：论坛或电子书产品 手动加载 整页加载：一次性将页面信息全部加载完 分页加载：每一次只加载部分信息 自动加载 手动加载 56 内容加载丨常见加载策略 上海设计部 加载说明：预测用户行为，预先对相关内容进行自动加载 适用场景：需要连续浏览多个商品或图片的页面 举例：商详商品图 预加载 加载说明：图片出现在屏幕中时才进行加载；图片超出屏幕，则不再进行加载 适用场景：含图片的模块 举例：购物车商品列表 懒加载 加载说明：优先加载易于加载的信息，如先加载页面框架，再加载文字信息，最后加载图片信息 适用场景：客户端整体 优先加载 加载说明：根据用户网络状态，加载不同质量、不同数量信息 适用场景：客户端整体 智能加载 57 内容加载丨允许进行的操作 上海设计部 允许操作预加载的框架功能+浏览优先加载的内容 非模态 打开新页面，有大量图文内容，分类或分段加载数据。允许用户先浏览操作加载好的内容，减少等待焦躁 举例：进入频道页进入列表页进入商详页进入购物车 注意：需根据内容加载程度，确定功能按钮是否可点。例如，购物车完全无信息载入时，按钮不可点；载入商品基本信息后，按钮可点 适用场景 可使用下拉菜单 可使用隐藏菜单 可上下滚动页面 不可点击 58 内容加载丨允许进行的操作 上海设计部 不可操作页面内容，可取消loading 模态 提交信息类加载。防止用户修改当前内容引发错误 举例：登录or退出提交订单提交注册新建地址 注意：模态也要注意按钮的可点状态，给出正确操作引导。例如，提交订单中，提交订单的确认按钮为不可点状态 适用场景 返回上一页 不可操作 不可操作(android)可点物理键取消loading 不可点击 59 内容加载丨允许进行的操作 上海设计部 由于等待时间过长或操作错误，用户可取消loading 取消Loading Android 模态与非模态加载状态下：Android都可通过物理返回键中止loading，停留在当前页面 IOS 模态与非模态加载状态下：IOS点左上角返回键都中止loading，并返回到上一级页面（模态不可block IOS返回按钮）适用场景 Android IOS 60 内容加载丨状态展示 上海设计部 展示原则 当Loading状态占用了可察觉的时间，才应有状态提示，以示app仍在正常运行 Loading状态的展示不是必须的 利用加载时间做展示（wetransfer/picnic）进度条设计在感官上加速加载，先快后慢（safari）尽量减少等待带来的焦躁 打开新页面，先浏览先加载好的内容（长图文内容加载）提交表单，前台显示加载成功，后台继续加载（instagram上传照片）不应阻止用户进行可能的其他操作 尽量融入app UI（dianping的刷新圈）避免h5与原生app展示的重复 融合的视觉设计 61 内容加载丨状态展示 上海设计部 非模态加载内容为空时 已有部分内容载入时 加载分段内容时 loading圈出现在页面当中 使用占位符代替还未加载出的图片 loading圈出现在页面底部 非模态加载 62 内容加载丨状态展示 上海设计部 可下拉刷新页面的loading圈 融入下拉设计 可被页面滚动覆盖，先阅读已加载内容 非模态加载 63 内容加载丨状态展示 上海设计部 可下拉刷新页面的loading圈 模态加载 对不可操作的模态做出视觉区分 64 上海设计部 补充建议 手势操作丨单击 上海设计部 直接触发单一反馈，多见为选择、跳转；例：商品列表中的商品、导航栏功能按钮、操作按钮；交互反馈 1.按钮：按钮通常需要设置点击态，点击时底色变化；2.icon：点击icon时可以产生亮度或颜色的变化，不强制，具体可与设计师沟通；其他对象场景不强制使用点击态，具体情况可与对应设计师沟通；视觉反馈 Ios官方规定点击区域尺寸为不小于44*44px，建议图像尺寸不小于44*44，物理尺寸不小于9mm；请根据具体模块和情境做适度调整，具体可咨询对应模块设计师。点击区域 66 缓存丨时间与更新 上海设计部 把已经加载过的数据保存起来，并在下次重复使用时，不需要向服务器加载，直接获取本地数据。减少用户重复使用同一页面的等待时间、流量消耗 功能说明 缓存时间由服务端下发，重新启动客户端或客户端后台挂起超过24h时，客户端重新请求服务端缓存时间；缓存时间控制 超过缓存时间后，客户端重新请求数据；缓存超过一定容量后，对溢出的旧数据进行自动清除 缓存内容更新与删除 对每个页面的信息类型进行分析：1、变化频率高的信息（如价格、库存、促销等）不做缓存处理 2、对于变化频率低的信息（如商品信息等），需要根据接口信息变动频率，做本地缓存处理；【时间：10m、1H、24H】缓存时间确定 示例：商详 商详促销信息：无缓存 商详图文详情：1H 热门分类：24H 67 图片处理丨适配 上海设计部 根据设备分辨率，服务端按需下发图片，保证下发图片与所需图片分辨率的完全吻合，保证清晰图，节省流量 功能说明 Android按屏幕分辨率宽720像素作为标准，iPhone按屏幕分辨率宽640像素作为标准，其余分辨率设备以此标准进行等比压缩/拉伸 规则：设图片在720px宽分辨率设备上尺寸为X*Y（单位px），则在Z px分辨率设备上的图片尺寸为：（/）*（/)实现方式 Android：480px；720px；1080px；1440px Iphone：640px（iPhone5s）；750px（iPhone6）；1242px（iPhone6p）Android手机尺寸众多，为减少图片服务器分发适配成本，将（0，480】尺寸的设备作为480处理，（480,720】尺寸的设备作为720处理，以此类推。常见分辨率 68 图片处理丨降质 上海设计部 在wifi/4g/3g/2g网络环境下，对客户端下发不同压缩率的图片，在保证图片清晰度的同时，减小图片文件大小；功能说明 服务端根据设备所处的网络环境，下发不同压缩率的图片；wifi环境，图片压缩率为Q70（约为原图大小的70%）4g/3g环境，图片压缩率为Q50(约为原图大小的60%)2g环境，图片压缩率为Q40（约为原图大小的50%）实现方式 69 页面返回丨多层级页面的返回 上海设计部 通常情况下除首页及首页同层级页面以外，其他页面头部导航必有“返回”或“关闭”操作按钮：头部导航为“返回”按钮时，点击后退出该页面，返回上一个浏览页面，例如当前浏览至第3个商品详情页，点击返回，回到第2个商品详情页；头部导航为“关闭”按钮时，点击后退出该页面，返回上一级浏览页面，例如当前浏览至第3个商品详情页，点击关闭，回到第1个商品详情页的前一级页面。两个按钮可同时配置，具体情况可与相应的交互设计师沟通解决方案；交互说明 头部导航配置了“返回”按钮 使用场景 70 示例：商品详情页之间的切换 页面返回丨多层级页面的返回 上海设计部 通常情况下除首页及首页同层级页面以外，其他页面头部导航必有“返回”或“关闭”操作按钮：头部导航为“返回”按钮时，点击后退出该页面，返回上一个浏览页面，例如当前浏览至第3个商品详情页，点击返回，回到第2个商品详情页；头部导航为“关闭”按钮时，点击后退出该页面，返回上一级浏览页面，例如当前浏览至第3个商品详情页，点击关闭，回到第1个商品详情页的前一级页面。两个按钮可同时配置，具体情况可与相应的交互设计师沟通解决方案；交互说明 头部导航配置了“关闭”按钮 使用场景 71 示例：资讯详情页 页面返回提示丨内容发布页面 上海设计部 在含编辑操作的页面，当用户未做任何操作时，点击返回，立即返回上级页面 当在用户正在进行文字编辑或编辑完未提交时，点击页面返回按钮，自动保存已编辑内容，并显示确认离开提示 交互说明 涉及长文编辑的发布内容页面，需保存草稿（如：评价文章发布等）使用场景 72 示例：内容发布 页面返回提示丨信息修改页面 上海设计部 在含编辑操作的页面，当用户未做任何操作时，点击返回，立即返回上级页面 当在用户正在进行文字编辑或编辑完未提交时，点击页面返回按钮，显示确认离开提示 交互说明 涉及文字信息修改的页面（如：编辑个人信息等）使用场景 73 示例：地址信息修改 语音识别控件 上海设计部 在含语音输入操作场景时，点击输入入口，若语音权限开启，直接进入识别界面；若语音权限未开启，则弹出提示窗（参照提示控件）交互说明 长文类含语音输入的场景 使用场景 74 语音识别控件 上海设计部 录入时，点击非浮层区域或关闭按钮，浮层收起 点击“说完了”，若识别成功，浮层收起；若识别失败，展示识别失败浮层 浮层点击交互逻辑 75 语音识别控件 上海设计部 浮层状态自动切换逻辑 76 录入时，可实时展示识别结果，详见右图 滑动控件丨页面左右滑动 上海设计部 交互说明 77 当用户在页面左右滑动控件中,用户可左右滑动屏幕进行内容切换,单次切换一个模块 当用户在第一个模块位置,以常规方式从左向右滑动时,页面内容向右滑动约10%后自动弹回(可根据对应控件设置适当的阻尼系数)当用户在最后一个模块位置,以常规方式从右向左滑动时,页面内容向左滑动约10%后自动弹回(可根据对应控件设置适当的阻尼系数)使用场景 在iOS系统中个，TAB滑动页面 示例：发现好货 购物车控件丨商品加入购物车 上海设计部 交互说明 78 当用户在含有商品列表的页面中，将商品加入购物车时，页面中设置子购物车，用户点击子购物车，可快速切换到购物车结算页，完成购买流程 使用场景 在页面标题固定在页面顶部的商品列表页中，常见于频道原生页面，如玩3C、京东家电、京东超市等频道页面 示例：爱宝宝 子购物车在标题栏直接露出 当标题栏中有优先级更高的功能入口，子购物车收起在“”中时 购物车控件丨商品加入购物车 上海设计部 交互说明 79 当用户在含有商品列表的页面中，将商品加入购物车时，页面中设置子购物车，用户点击子购物车，可快速切换到购物车结算页，完成购买流程 使用场景 浏览过程中标题栏收起的商品列表页面，常见于带有购物车的搜索结果商品列表页 示例：搜索列表页 子购物车在页面右下角以浮层形式展示 购物车控件丨商品加入购物车 上海设计部 交互说明 80 当用户在含有商品列表的页面中，将商品加入购物车时，页面中设置子购物车，用户点击子购物车，可快速切换到购物车结算页，完成购买流程 使用场景 具有凑单功能的商品列表页面，常见于优惠券的商品集合列表页、满减/满赠/满返活动的商品集合列表页等 示例：满减促销列表页 子购物车在页面底部吸底展示 红点提醒机制丨红点显示 上海设计部 交互说明 81 当后台把实时信息发送给用户客户端时，客户端会以红点形式提醒用户信息有更新。与该信息关联的所有触发控件上即显示红点提醒；当触发控件被收起在“”中时，内外的红点提示样式需保持一致。红点提醒分为点标提醒和数标提醒，具体样式请遵循app视觉规范：点标提醒在触发控件右上角仅以红点形式提示 数标提醒在触发控件右上角显示未读信息的数量，当信息更新数量N时，显示具体数字；当信息更新数量N时，显示N+，N由具体业务确定。使用场景 点标提示吸引用户注意的弱提示方式：当用户订阅（或关注）的第三方媒体、达人、商品、店铺等内容有更新时，使用点标提示该订阅有更新 示例：觅me内容更新的红点提醒 示例：店铺订阅的红点提醒 红点提醒机制丨红点显示 上海设计部 82 使用场景 字标提示吸引用户注意的强提示方式：App内消息中心的全局入口，使用字标提示未读消息的总数量 当用户购买的订单发生状态变化时，使用字标提示产生状态变化的订单数量 当用户与客服进行沟通时，使用字标提示沟通反馈的消息数量 交互说明 当后台把实时信息发送给用户客户端时，客户端会以红点形式提醒用户信息有更新。与该信息关联的所有触发控件上即显示红点提醒；当触发控件被收起在“”中时，内外的红点提示样式需保持一致。红点提醒分为点标提醒和数标提醒，具体样式请遵循app视觉规范：点标提醒在触发控件右上角仅以红点形式提示