待付款状态、URL 历史记录和 App 底部菜单扩展 (编写中)

App D-编写中

1. 需求背景

• 在支付过程中, 很多没有支付成功的商品要想再次购买, 只能从原来的路径一步步进到支付界面, 比较麻烦, 希望能引入一种 "待付款" 状态 , 这种状态不需要显示在采购部处理清单中, 只要 App 和 PC 上用户能支付即可;
• 当初设计 URL 下单 功能的时候, 主要是精简了 "点击/长按/粘贴/删除冗余文字/点按钮" 等无意义步骤, 实现一次点击打开剪贴板中的链接. 如果能够在不影响其他功能的情况下, 让用户 回顾之前复制过的链接 就更好了;
• 尽管 "关注/收藏夹" 功能被弱化到 "我的/MyPanli" 里面首屏看不到的位置, 依然占据了 App 订单量 12% 左右的比例 (2015年), 也就是 "逛街" 订单量的 3/5, 还是比较可观的, 希望能让用户 更方便地使用

2. 待付款状态 (大坑待填)

2.1 需求简介

和购物车很类似

用户支付一笔商品订单, 如果没有支付成功就退出支付界面/掉单时, 则将商品连同 SKU 和备注一起添加至 "待付款商品列表".
普通商品立即购买
H5 页面订单 (最好能支持)
购物车结算
拼单购商品
团购商品

2.2 显示界面

"待付款商品列表" 有两个界面: "快捷入口进入的界面"、以一种商品状态显示在 "我的仓库".

2.3 手动删除商品

2.3.1 快捷入口版界面

交互同购物车

iOS

滑动/轻扫/拖动 显示 编辑 / 删除

Android

长按 显示 编辑 / 删除 / 关闭

2.3.2 我的仓库界面

通过点击进入指定商品, 然后点击 删除商品 后即可删除记录.

2.3 自动删除商品

2.3.1 购买后自动删除

不论用户用什么办法 (PC/手机购物车等) 下单成功, 则在数据同步时将该商品从 "待付款商品列表" 中删除.

2.3.2 超过一定时间

一件商品添加到 "待付款商品列表" 时, 记录添加时间. 数据同步时, 如果有商品的 现在时间 - 添加时间 ≥ 15天, 那么就自动将其删除.

2.4 "订单" 显示

2.4.1 可抓取到商品图片

• 只要一个链接能抓取到商品图片, 就将该图片显示在界面上;
• 显示商品名称, 超出规定行数时则末尾显示 "...";
• 显示商品所在的购物平台;
• 显示商品金额 (未选 SKU 的默认价格);
• 具体布局以杨雪提供的效果图为准

2.4.2 无法抓取到商品图片

• 无法抓取到商品图片时, 有一个相应的显示 (也就是说图中上方带圆圈的链接);
• 告知用户这个链接属于 "未识别链接";
• 完整的链接 (如果实在是太长, X 行之后末尾显示 "...");
• 前往查看 >> 按钮是否显示在界面上以最终视觉稿为准

2.4.3 无记录

一条记录都没有的时候, 显示特定图片, 具体效果详见杨雪提供的设计稿.

2.5 排序方式

最新 "订单" 显示在最前面

2.6 显示数量

默认显示最近的 20 条数据, 每次 "加载更多" 可加载 20 条.

2.7 点击效果

点击一条记录时, 从屏幕右侧移入链接对应商品详情, 加载商品数据的工作留到商品详情页.

2.8 删除记录

此版本暂时不引入删除记录的功能.

2.9 数据同步

作为用户数据一起同步, 使得用户换设备/换账号后重新登录就可以看到这些记录.

3. URL 历史记录

查看 URL 历史记录这个需求肯定是存在的, 前面也说过迟迟没能开发是因为实在是没有太好的入口分配给它, 原来打算过 换掉购物车的位置 (via Kent)、放在逛街右上角和分类左右对称, 但都不太理想, 说不定之后就要回滚.

3.1 保存时机

只要用户打开 App 的时候剪贴板中有链接, 就将这个链接保存到 "历史记录" 中, 不论用户是点击了警告框的 取消 还是 浏览商品.

3.2 记录显示

3.2.1 可抓取到商品图片

• 只要一个链接能抓取到商品图片, 就将该图片显示在界面上;
• 显示商品名称, 超出规定行数时则末尾显示 "...";
• 显示商品所在的购物平台;
• 显示商品金额 (未选 SKU 的默认价格);
• 具体布局以杨雪提供的效果图为准

3.2.2 无法抓取到商品图片

• 无法抓取到商品图片时, 有一个相应的显示 (也就是说图中上方带圆圈的链接);
• 告知用户这个链接属于 "未识别链接";
• 完整的链接 (如果实在是太长, X 行之后末尾显示 "...");
• 前往查看 >> 按钮是否显示在界面上以最终视觉稿为准

3.2.3 无记录

一条记录都没有的时候, 显示特定图片, 具体效果详见杨雪提供的设计稿.

3.3 排序方式

最新保存的显示在最前面

3.4 显示数量

默认显示最近的 20 条数据, 每次 "加载更多" 可加载 20 条.

3.5 点击效果

点击一条记录时, 从屏幕右侧移入链接对应商品详情, 加载商品数据的工作留到商品详情页.

3.6 删除记录

此版本暂时不引入删除记录的功能.

3.7 数据同步

作为用户数据一起同步, 使得用户换设备/换账号后重新登录就可以看到这些记录.

3.8 关于后台监控功能

iOS 8 时代, 只要 App 在后台, 剪贴板内容是可以监视到的. 但出于安全的考虑, Apple 已经在 iOS 9 开始移除了这项 "功能". 而且由于现在 iOS 9 已经是主流, 本次需求不要求支持 iOS 8 这项功能.

3.9 取消按钮

第一次复制链接打开 App 时, 弹出的警告框和之后的有所区别:
点击 取消 按钮将会跳转到 这个界面, 并提示用户.

4. App 底部菜单扩展 (好吧, 我承认这才是这个版本的重点)

由于 App 底部 Tab Bar 5 个位置已经全部被瓜分完, 如果想不引入新的交互方式就增加新的便捷入口, 只能换掉现在 5 个里面的 1 个, 但这显然会造成对用户正常使用造成一定程度的不适应, 而且这种做法最多也只能换掉一个购物车, 再想扩展就真的不行了.

4.1 新交互方式

鉴于这些原因, 这里提出一种新的交互方式:

• 点击购物车图标 → 正常进入购物车
• 长按购物车图标 → 向上展开一个小菜单

具体效果请结合 原型 来理解.

4.2 有哪些app用了类似的效果?

• 点击一个按钮展开菜单部分由 Path 发明, 当年这个交互轰动了整个移动互联网, 直到今天还被 Google 针对 Android 5.0 专门的设计语言 Material Design 作为多功能菜单入口在使用 (iOS 上想了解的话可以安装一下 "Gmail 2.0" 的 Inbox;
• 长按呼出一列菜单则由最著名的 Twitter 客户端 Tweetbot 率先改造而成, iOS 业界标杆不多解释

4.3 优点与缺点

4.3.1 优点

• 完全不影响 App 原来的使用习惯

  • Tab Bar 原来 5 个 tab 不变
  • 待付款和其他老功能的位置仍然能通过传统方式点击进入, 新交互方式只不过是增加加一个快捷入口, 并不是关掉所有传统入口

• 由于呼出菜单是通过长按而不是用力按, 不需要最新硬件的支持 (3D Touch in iPhone 6/6+), 老 iPhone 和 Android 机也能用得上, 新功能可以面向所有用户

• 对于大屏手机的用户来说, 所有 "新入口" 都位于屏幕底部, 非常好按
• 对于小屏手机的用户来说 (包括 iPhone 6/6s), "关注" 在 "MyPanli" 界面都是无法显示在第一屏的
• URL 历史记录一直以来都因为没有太好的位置, 迟迟无法上线, 如果能使用这种交互方式, 从原型中可以看到这些就都不是问题
• 其他功能也可以使用这种方式, 比如 "搜索/分类", 大屏手机要想单手按到这两个地方可不容易
  

  MyPanli 因为还需要带一带邀请好友和其他功能比如以后会上的 "签到", 可能不是太合适直接放出送货车和运单

4.3.2 缺点

新交互方式在刚接触的时候, 或多或少有一些学习成本

4.3.3 关于缺点的一些思考

• 即便有一部分用户一开始接受不了, 也完全不影响他们正常使用;
• 第一次打开 App 的时候展开菜单, 并且给一个蒙板小提示, 应该不太难学;
• 除了提示外, 购物车 图标本身也可以稍微有点变化, 让用户能记得这个按钮现在有 "新功能"
• 对于 iPhone 6s/6s+ 用户来说, 由于和 3D Touch 很相似, 几乎没有学习成本;
• 总体看来, 新的交互方式有很多优点, 也有一个可以从两方面来减小的缺点

4.4 交互效果详细说明

4.4.1 引入新动作

除了 新菜单 外, 还增加了各个按钮的 "手指在按钮范围抬起" / "Tab 栏按钮双击" 的动作:

• 新菜单增加 "手指在按钮范围抬起" 动作, 可以使得整个操作减少一次点击 → 也就是 长按购物车呼出菜单, 在手指不松开的情况下上移至按钮位置松开, 建议结合原型理解;
• 除了社区外, 其他 Tab 栏按钮双击返回顶部, 可以使得单手操作大屏手机更方便 (原型中没有演示这部分)

4.4.2 动作详细说明

4.4.3 动画效果说明

• "打开" 待付款/URL 历史记录/购物车等 5 个 Tab 入口, 都是直接打开界面, 没有动画;
• "打开" 关注同 "我的" 中点击 关注
• 展开菜单的状态下, 进入任何一个界面, 都会 "在后台" 收回菜单, 这样返回之后菜单不会傻傻地展开在那里
• 所有展开/收回菜单, 都是 250ms 先快后慢/ease_out_cubic

4.5 图标状态

当进入 "待付款/URL 历史记录" 界面时, 购物车图标为 "未选中", 因而此时 (几乎等于在首页) 点击购物车图标, 会进入购物车. 当然这时也可以 "长按/双击"

未登录状态的处理
同购物车一样, 未登录状态打开时, 要求登录, 登录成功后打开相应界面.