新手引导

新手引导 帮助中心 App A-运营线

需求的背景

之前版本中, 帮助中心的入口藏得比较深, 对新用户来说却不知道从哪去了解 Panli 和 App.
希望能通过这个功能, 让新用户更方便地了解 Panli 服务, 了解 App.

界面交互

登录后自动将当前界面缩小一定尺寸, 显示一个小浮动层, 提示新用户可以通过点击按钮直接进入到帮助中心.

• 界面缩进动效：界面随着左右两个方向分别向内缩进了 1/32=3.125%，缩进的交互动效为 300ms先快后慢，此时界面的高度按照屏幕宽高比相应缩进，缩小后的界面宽高比不变，此规则通用于 Android 版以及 iPhone 6/6+
• 浮动层显示动效：以 淡入淡出300ms 的效果显示(显示的浮动层此时有两个按钮)
• 浮动层关闭动效：以 淡入淡出300ms 的效果隐藏(隐藏的时候包括两个小按钮和提示文字)
• 浮动层外观：宽度横跨整个界面，高度与底部 tab bar 相同，但覆盖在 tab bar 上方，不透明度40%
• 浮动层内部：有两个小按钮，左边为“稍后再说”，后边为“了解 Panli”

1. 点击“稍后再说”时，界面先恢复正常尺寸，然后浮动层状态切换。此时浮动层上两个按钮消失，出现一行提示文字(依次打开“我的” - 右上角“更多” - “帮助中心”可查看)，文字右边有一个叉叉
   浮动层切换为带提示文字的状态时，用户可以点击右边的叉叉来关闭(情况A)，如果一直不操作的话，10'000ms 后也会自动关闭(情况B)。
   

2. 点击“了解 Panli”时，界面先恢复正常尺寸，然后浮动层关闭，最后界面跳转到“使用指南”(该界面的入口位置和所处层级没有发生变化，依然位于“我的 - 更多”中)
   

交互动画出现时机

1. 用户在未登录状态下，主动点击“关注/购物车/我的”，登录完成时，出现新手引导
2. 用户在未登录状态下，在流程中被要求登录 (HTML5 网页所有登录 / 所有立即购买 / 加入购物车) ，登录完成时，不出现新手引导。此处做一个标记，如果用户退出登录，则删除标记
3. 用户打开 App (不论之前后台是否关闭) 时，若有新手引导标记，则出现新手引导

• 由于整个功能只会发生在登录状态下，所以不会牵涉到返回未登录 “我的” 的情况

• “新手引导”这整个功能，在每次安装 App 后最多只出现一次， 就像找商品的蒙板提示。不管重新登录还是版本更新都不会影响。// 此效果原型中没有实现

• 启动 App 后，各个临时情况的优先级为 版本更新提示 > URL 下单警告框 > 新手引导。当“版本更新”或“URL 下单警告框”弹出时，此次打开 App 期间不再出现“新手引导”，下次启动App时打开“新手引导”的标记保留，不出意外的话下次启动 App 时出现“新手引导”

• “新手引导” 只会出现在既没有版本更新提示，也没有URL下单警告框提示的时候

帮助中心

文章分两个区域:

• 上半部分区域主要说明一些我们 App 的一些需要介绍的功能，比如 URL 下单和怎么获取商品链接等；
• 下半部分区域列出一些新手帮助；
• 两个区域内容的输入数据均为后台设置；
• 任何一个区域中一篇文章都没的话，则不显示整个区域(正常情况下不会出现)；
• 当无法从获取到文章列表 / 文章页面时，黑框提示网络错误，并返回前一个界面(类似获取不到运送方式)
• 当打开的是下半部分的“文章”时, iOS 用“新 Safari View 的 阅读者模式/Reader mode”
  

后台

功能简介

查看原图

后台入口
后台入口位于“手机管理 - 帮助管理 - 功能简介”

使用权限
权限: 可以进入手机管理后台的所有人员

文章管理页

查看原图

筛选条件

搜索结果

一页显示 20 篇文章, 超出 20 篇则换页.

按钮说明

• 点击 添加文章 按钮, 可进入一个空白的文章添加页;
• 点击 `` 按钮时, 根据输入的筛选条件开始搜索, 搜索完成时将搜索结果展示在“搜索结果区域”
• 点击 编辑 按钮, 可进入该文章页(类似文章添加页, 但文章内容已填写);
• 点击 删除 按钮, 弹出网页警告框, 确认是否要删除文章

排序值与导购专题后台一样, 数字越大的显示在越上面.

文章添加页

查看原图

(不论是添加文章还是编辑文章) 点击 发布 按钮时, 依次进行判断:

• 如果“文章标题”为空, 则弹出网页警告框提示“请输入文章标题”, 网页警告框只有一个按钮 好的 (点击可关闭警告框);
• 如果“图片1”未选择, 则弹出网页警告框提示“请至少上传一张图片”, 网页警告框只有一个按钮 好的 (点击可关闭警告框);
• 如果“排序值”未选择, 则弹出网页警告框提示“请输入排序值”, 网页警告框只有一个按钮 好的 (点击可关闭警告框);
• 如果以上情况均未出现, 则进行发布, 发布完成后回到“文章管理页”(编辑文章完成后也回到文章管理页)

特别说明

• 发布的文章没有缓存, 在 App 帮助中心 / 帮助文章列表页刷新即可立刻看到;
• 图片 1~5 分别对应了该文章中第几张图片 → 图片1 为第一张图片, 图片5 为第五张 / 最后一张图片, 开发过程中不要随意变更此数字的含义(比如图片5 放到最前面)

新手帮助

查看原图

后台入口
后台入口位于“手机管理 - 帮助管理 - 新手帮助”

使用权限
权限: 可以进入手机管理后台的所有人员

文章管理页

查看原图

筛选条件

按钮说明

• 点击 添加文章 按钮, 可进入一个空白的文章添加页(见图);
• 点击 编辑 按钮, 可进入该文章页(类似文章添加页);
• 点击 删除 按钮, 弹出网页警告框, 确认是否要删除文章

排序值与导购专题后台一样, 数字越大的显示在越上面.

搜索结果

一页显示 20 篇文章, 超出 20 篇则换页.

按钮说明

• 点击 添加文章 按钮, 可进入一个空白的文章添加页;
• 点击 `` 按钮时, 根据输入的筛选条件开始搜索, 搜索完成时将搜索结果展示在“搜索结果区域”
• 点击 编辑 按钮, 可进入该文章页(类似文章添加页, 但文章内容已填写);
• 点击 删除 按钮, 弹出网页警告框, 确认是否要删除文章

排序值与导购专题后台一样, 数字越大的显示在越上面.

文章添加页

查看原图

(不论是添加文章还是编辑文章) 点击 发布 按钮时, 依次进行判断:

• 如果“文章标题”为空, 则弹出网页警告框提示“请输入文章标题”, 网页警告框只有一个按钮 好的 (点击可关闭警告框);
• 如果“文章链接”为空或不是一个链接, 则弹出网页警告框提示“请输入文章链接”, 网页警告框只有一个按钮 好的 (点击可关闭警告框);
• 如果“排序值”未选择, 则弹出网页警告框提示“请输入排序值”, 网页警告框只有一个按钮 好的 (点击可关闭警告框);
• 如果以上情况均未出现, 则进行发布, 发布完成后回到“文章管理页”(编辑文章完成后也回到文章管理页)