界面改版

App

需求背景

为大屏适配的时候, 有一批界面本身已经和现在的设计风格不搭了, 乘这个机会改版一批界面. 开发前请看清 上线计划 的时间, 并不是在一个版本内完成下面所有界面. 2 期改动的界面还在计划中, (而且有些界面的英文首字母总是冲突) 编号暂时用英文替代, 请谅解.

文档改动

1. 适配界面清单 (更新中, 预计赶在下半年开学前上线)

2. 改动详情

2.1 订单支付后返回

订单支付成功后, 增加一个返回按钮, 让用户可以继续下单. 并且要保证 立即购买 和 加入购物车 功能都能正常使用.

返回按钮文字: 
继续逛 //点击返回商品详情, 购物车结算的话没有此按钮
去仓库按钮文字: 
查看我的仓库

2.2 拼单购支付成功

提示文字见效果图

返回按钮文字: 
继续拼 //点击返回拼单列表页
去仓库按钮文字: 
查看我的仓库

2.3 团购支付成功

提示文字见效果图

返回按钮文字: 
继续团 //点击返回拼单列表页
去仓库按钮文字: 
查看我抱的团

2.4 运单支付成功

上方提示文字
详见设计稿
去仓库按钮文字: 
查看我的运单 //点击后打开运单列表页
邀请好友按钮文字: 
邀请好友一起买买买

在提交运单的界面上, 增加一个邀请好友的按钮, 与点击“我的”中的 邀请好友 按钮功能一致, 并且点击此按钮与“我的”中的 邀请好友 按钮上的小红点显示规则无关.

小红点显示规则

• 今日未点击时，显示小红点；
• 今日已点击时，不显示小红

如果用户没有绑定微信, 需要跳转回来时, 跳转至 MyPanli.

2.5 新版商品详情页

2.5.1 正常情况 / 通用改动

• 点击图片仍然可以打开图片, 下拉放大图片功能取消
• 右上角的购物车没有数字标记, 只有一个图标, 且始终悬浮在界面右上角
• 原来的 "国际运费?" 入口移到了 "国内运费" 金额的右边, 点了之后和原来一样, 打开 代购流程和费用说明
• 客服 功能稍有改动, 具体请点击 这里 了解
• 底部栏上左起第二个按钮文字为 "收藏", "关注"
  
  • 未收藏时, 界面上的按钮文字为 "收藏", 点击会弹出提示 "收藏成功", "关注成功", 按钮文字变为 "已收藏";
  • 已收藏时, 界面上的按钮文字为 "已收藏", 点击会弹出提示 "取消收藏", "取消关注", 按钮文字变为 "收藏"
  • MyPanli 界面里的 "我的关注" 改成 "收藏夹";
  • 关注界面里, 导航栏标题 = 收藏夹, 取消关注 = 取消收藏, 继续关注 = 继续收藏, 后面界面会大改, 这版就把文字换掉即可

2.5.2 商品下架

原效果是 这样 的, 除了以下功能外, 其他功能都无法点击 (滑动屏幕还是可以的)

• 返回上个界面
• 进入 购物车
• 联系客服
• 收藏商品
• 打开店铺 //为了增加订单量

2.5.3 未知链接

• 没有 请选择 尺码 颜色 款式 一栏
• 没有 买家评价 一栏
• 无法进入 店铺 //点击时提示 "无法进入店铺"
• 可以添加到购物车 //和 PC 上一样
• 没有商品详情内容, 也就是说跟原来一样从 继续拖动, 查看图文详情 (包括) 这栏开始就没有了

2.5.4 其他一些说明

• 注意解决 iPhone 6＋ 拖动时的无法滚动上半部分的 bug
• 通过客服功能复制的链接, 视为已通过 URL 下单功能打开过, 也既是说此时返回到主屏幕后再进入 App, 不会弹出 URL 检测到链接的警告框

2.Cart 购物车

• 界面有所改动, 需要保证能够正常结算
• 购物车底部增加 已选商品数量提示, 以平衡界面元素
• SKU 和备注超过 1 行时, 末尾以 "..." 表示 (也就是不会超过 1 行)
• 注意从商品详情进入购物车的情况

2.Category 新分类

• 以逛街形式打开 淘宝分类页面
• 使用 新的逛街导航栏和工具栏
• 导航栏标题 为 "分类"

2.Custom_Service 客服消息

2.Custom_Service.1 客服消息列表页

2.Custom_Service.1.1 导航栏

标题

客服消息 //没有 Tab 切换

2.Custom_Service.1.2 小图

• 由于发起的沟通基本上都是针对 "问题订单"、"问题运单", 所以原版设计稿中的 "问题" 标记不需要
• 已到Panli 的订单 和 确认收包的运单 依然显示在列表中, 不需要做标记也不从列表中移除

• 图片尺寸请依照以下规则:

  • 图片在设计稿中的宽度, 是指在 750px@2X 屏幕的情况下, 图片宽度为设计稿中的宽度. 这个比例是固定的, 不会随着屏幕分辨率变化而变化, 但图片大小会随着屏幕分辨率变化而变化;
  • 设计稿中的图片为正方形, 则说明宽高永远是相同的, 不论在什么分辨率的屏幕上

• ID	Case	使用图片
  1	能抓取图片的商品	抓取的商品图片缩略图 (文件大小压缩50%)
  2	不能抓取图片的商品	图片
  3	运单	图片, 没有状态区分(打勾标记、确认收包、问题包裹等都没有), 文字为 "运单包裹"

2.Custom_Service.1.3 展示数据

2.Custom_Service.2 客服消息详情页

• 导航栏标题: "联系客服"
• 详情页顶部图片使用规则同 2.C.1.2 小图
• 如果是商品 (包括转运) 的话, 显示商品 ID, 如果是运单的话, 显示运单 ID
• ID 右边的箭头, 点击时根据是订单还是运单, 会自动跳转到调整过的商品详情/运单详情 (老界面, 但要求适配大屏幕, 右边不会有一段空白)
• 激活文本框时, 注意将导航栏下方整体上移 (就像被键盘顶起来一样)
• 文本框左边没有 + 和相应功能

2.Custom_Service.3 客服消息商品信息

标题名: "商品信息"

展示数据不变, 水平居中.

2.Custom_Service.4 客服消息运单信息

标题名: "运单信息"

分为是否可撤销和无按钮 3 种情况

展示数据不变, 撑满整屏.

2.Storehouse 我的仓库

和原来一样, 订单归订单, 运单归运单, 分两个列表页

2.Storehouse.1 数据展示条数

和原来一样, 直接展示所有订单, 不论有几条 (3 个 Tab 都这样).

2.Storehouse.2 顶部 Tab

• Tab 全部 的文案使用 "全部订单"
• 每个 Tab 右边都会有一个数字提示, 包括原设计稿中没有的 全部订单, 当前选中的 Tab 的数字提示背景色和未选中的 Tab 有所不同
• 只有 全部订单、已到Panli、问题订单, 没有 运单
• 点击时以 "300ms先快后慢"的交互动画切换至相应 Tab

2.Storehouse.3 全部和问题订单

2.Storehouse.3.1 展示数据

2.Storehouse.3.2 订单状态和是否可删除

说实话, 我觉得 已到Panli 状态可以用个绿色的.

2.Storehouse.3.3 文字按钮

只会在 "已到Panli" 状态时出现, 显示效果见最终效果图, 点击时切换至 "已到Panli" Tab

2.Storehouse.3.4 查看订单详情

点击订单所在区域 (整块) 时, 以 "300ms 先快后慢" 的交互动画, 订单详情界面 从屏幕右边移入屏幕中.

2.Storehouse.4 已到Panli

2.Storehouse.4.1 展示数据

2.Storehouse.4.2 订单选择

• 每个订单左边都会有一个复选框, 点击时切换 "勾选/不勾选" 状态, 点击 提交运送 时会将勾选的订单提交运送
• 点复选框右边的部分, 则打开订单详情;
• 底部浮动栏上有一个 全选 复选框, 未选中时点击会选中所有可选订单, 选中时点击会将全部复选框不勾选 (包括 全选 复选框)
• 当所有订单都被依次选中 (不是通过 全选 复选框)时, 自动勾选 全选 复选框
• 当有任意一个订单没有被选中时, 自动反选 全选 复选框

2.Storehouse.4.3 提交运送

点击 提交运送 时, 将勾选的订单作为运单提交, 但中间会因为有 "重抛/敏感品" 的问题被拆包.

验收要求:
保证在各种组合方式下都可以正常提交运送, 并且包裹重量 (有拆包情况的话, 就是重量总和) 为所选的订单重量根据 "预估" 计算出来的预估重量.

2.Order 订单详情

2.Order.1 导航栏标题

• 从这个版本开始, 点击 "我的仓库" 中的商品, 进入的界面导航栏标题使用 "订单详情";
• 客服图标边上不需要文字, 按钮是否显示根据 这个显示规则

2.Order.2 展示数据

2.Order.3 界面交互

2.Order.3.1 商品链接按钮

右边按钮文案 商品链接, 点击时在 App 内部打开一个页面

2.Order.3.2 修改备注

只有在订单状态为 "未处理" 时才能修改, 相应的, 修改> 按钮也只有在订单状态为 "未处理" 时才显示出来, 否则隐藏.

2.Order.3.3 代购进度和国内物流

• 默认状态为两个都收起
• "代购进度" 默认显示最新进度和最后处理时间
• "国内物流" 默认显示以下信息:
  
  • 物流ID //最好能长按后弹出复制小按钮
  • 物流公司
  • 官网查询 > 按钮点击时在 App 内打开一个页面
    
    • 页面地址 = http://m.kuaidi100.com/result.jsp?nu=物流号 //这个地址最好能在服务器端控制
    • 界面导航栏标题 = 物流信息
    • 导航栏有返回按钮
• 最新进度和最后处理时间
• 以上默认显示的这些信息不会因为收起而不显示, 展开时仍然显示在最上方 (详见效果图)
• 点击 展开 可展开明细, 点击 收起 可收起明细, 展开 ⇋ 收起

2.Order.3.3.1 代购进度

• 标题文案使用老文案 "代购进度", 此版本不做改动
  

  对应原版设计稿中使用的 "订单跟踪" 而言

• 最新进度左边的标记和其他记录的标记有所不同, 具体颜色请看设计稿

2.Order.3.3.2 国内物流

• 标题文案使用 "国内物流"
• 最新进度左边的标记和其他记录的标记有所不同, 具体颜色请看设计稿

2.Order.3.4 界面按钮 (取消订单/联系客服)

删除商品 按钮文案改为 "取消订单"

2.Order.3.4.1 按钮显示规则

• 联系客服 只会显示在右上角, 此时边上不需要文字图标
• 提交运送 点击后并不直接将该商品提交运送, 而是打开 "我的仓库 - 已到Panli" 标签栏

2.Order.3.4.1 按钮补充说明

• 取消订单 上方文字见效果图, 提交运送 上方无文字, 具体展示效果详见设计稿
• 点击 取消订单 时, 弹出警告框

标题 = Panli提示
内容 = 确定要取消此订单吗? 
左按钮 = 不取消 //点击关闭警告框
右按钮 = 取消 //点击则取消此订单, 文字颜色最好标红

• 点击 提交运送 时, 等同于 "已到Panli" Tab 下提交运送, 这里只不过提交是将一个订单直接提交而已 //原版效果图中在屏幕中间, 觉得没有必要做这个修改
• 点击 联系客服 时, 和商品详情界面 (可以下单的那个) 一样, 会复制商品链接并打开 (针对一条订单的) 客服消息详情页

2.Ship 我的运单

和原来一样, 订单归订单, 运单归运单, 分两个列表页

2.Ship.1 运单列表页

2.Ship.1.1 导航栏

没有 Tab 栏, 没有 联系客服, 标题 "我的运单".

2.Ship.1.2 展示数据

运单状态:

• 未处理
• 处理中
• 发货中
• 已发货
• 信息有误
• 运输方式有误
• 确认收包

• 右边 4 行的右边部分最好也能对齐 (至少没必要有 3 个 X 坐标, 不算时钟图标也是 3 个 X 坐标)
• "确认收包" 状态如果已经评价, 则在右边显示 "已评价" 的图章
• 点击整行都会打开相应的运单详情页

2.Ship.1.2.1 运单缩略图

2.Ship.2 运单详情页

2.Ship.2.1 导航栏

没有 联系客服, 标题 "运单详情".

2.Ship.2 展示数据

此界面中 4 个部分一直是默认收起的, 既然新界面改版文档没有解释为什么要默认展开 (且不可收起) 对查看运单的用户最没用的两部分信息, 此次改版中沿用原版而且不想解释为什么.

2.Ship.2.1 从上至下第 1 部分展示数据 (包裹信息)

运单详情界面不需要 "已评价" 图章.

2.Ship.2.2 从上至下第 2 部分展示数据 (物流信息)

• 默认状态为两个都收起, 点击 展开 可展开明细, 点击 收起 可收起明细, 展开 ⇋ 收起
• 最新进度左边的标记和其他记录的标记有所不同, 具体颜色请看设计稿
• 处理进度
  
  • 标题文案在老文案 "包裹处理" 的基础上, 改为 "处理进度"
  • "处理进度" 默认显示最新进度和最后处理时间
• 国际物流
  
  • 标题文案使用 "国际物流"
  • "国际物流" 默认显示以下信息:
    
    • 物流ID //最好能长按后弹出复制小按钮
    • 运送方式 //界面改版设计稿中使用的物流公司存在歧义
    • 最新进度和最后处理时间
    • 以上默认显示的这些信息不会因为收起而不显示, 展开时仍然显示在最上方 (详见效果图)
  • 官网查询 > 按钮点击时在 App 内打开一个页面, 界面标题 "物流信息", 这些地址最好能在服务器端控制

Panli 专线

特惠线

2.Ship.2.3 从上至下第 3 部分展示数据 (商品清单)

商品清单右边增加一个数字显示, 用来表示这个运单内有几件商品.

这里的商品数量并非商品种类数量, 同一件商品购买多件时, 则数量也为复数.

• 默认状态也收起, 点击 展开 可展开明细, 点击 收起 可收起明细, 展开 ⇋ 收起
• 只有一件商品时, 不显示 展开 和 收起
• 点击商品之后, 打开商品详情

2.Ship.2.4 界面按钮 (撤销此单/联系客服/确认收货)

2.URL_Alert URL 下单提示警告框

不使用原生警告框来提示, 比如淘宝 App 的同类功能

不需要 "不再弹出" 功能

2.SKU SKU面板

• 相比原来的设计稿, 去掉了国际运费提示一栏以及每个 SKU 前面的 *, 并且把标题位置往左边稍微一动了一点;
• 注意看新设计稿, 现在如果一个 SKU 都没选的话, 在顶部图片右边会提示要选什么

2.SKU.1 能抓取到商品价格和 SKU 的情况

激活文本框后要求能同时看到键盘和输入内容, 并且右上角的 X 不会移动位置.

2.SKU.2 不能抓取到商品 SKU 的情况

激活文本框后要求能同时看到键盘和输入内容, 并且右上角的 X 不会移动位置.

2.SKU.3 商品价格也没抓到的情况 (未知链接)

• 顶上那栏也去掉;
• 激活文本框后要求能同时看到键盘和输入内容, 并且右上角的 X 不会移动位置.

2.Feedback 意见反馈

注意激活文本框的时候, 导航栏下方的整个界面往上移动 (就像被激活的键盘顶了起来)

2.Favorite 收藏夹 (原关注)

• 入口标题改为 "收藏夹"
• 导航栏使用新版的两个 Tab 形式: 商品、店铺
• 商品如设计稿所示
• 店铺
• 左滑出现按钮 (Swipe / Drag 手势皆可, 同一时间只能滑动一个, 同购物车), 点击可删除 (无警告框确认直接删除)
• 长按出现对话框 (取消收藏、关闭), 点击 取消收藏 可删除 (也无新的警告框确认直接删除)
• 没抓取到商品信息的, 以最后设计稿中的样子显示

不改动信息架构 (店铺整合到商品中) 的原因:
1. 没看出对用户有什么好处 (界面改版的文档也未曾提及);
2. 毕竟关注的商品会比店铺多很多 (后台数据显示也是如此), 导致关注的店铺被压在很下面, 对用户来说不是很直观.

2.Payment_Fail 掉单

文案和界面详见设计稿, 以下是点击 我知道了 按钮之后的功能.

等待用户允许访问通讯录后运行接下来的程序
OrganizationProperty = Panli 客服 (掉单处理) //联系人名字类型为企业 / 组织
Work = 86-21-52717882
E-mail = sevice@panli.com
Notes(备注) = 此邮箱用于联系客服之用, 支付/充值遇到掉单的情况时, 请尽快将交易号发送至此邮箱, 以便尽快为您处理.
警告框标题: 添加客服邮箱到通讯录
警告框内容 (位置参考上图中邮箱下面那三行字)  = 对应用或服务提意见时请发邮件至此邮箱, 支付遇到掉单时也请将交易号发送到此邮箱, 我们会尽快回复您的邮件.
左按钮: 取消
右按钮: 添加

最好能像下图这样, 查询过是否存在此号码, 没有的话再添加

代码参考
iPhone

• http://blog.sina.com.cn/s/blog_71715bf801019oy8.html
• http://bbs.51cto.com/thread-839893-1.html
• http://blog.csdn.net/justinjing0612/article/details/8922739
• http://www.bkjia.com/IOSjc/1098828.html

Android

• http://www.jianshu.com/p/b30dd4140170

2.Voucher 代金券列表页

代金券界面各元素位置略有调整, 具体请查看设计稿. 唯一一点要说明的就是:
- iPhone 版右边的框使用效果图里一样的虚线框
- Android 版右边的框使用时限框

2.Language 语言设置

2.Language.1 界面标题

标题 = 语言设置 (Change for change's sake.)

2.Language.2 交互部分

2.Language.2.1 iPhone 版

点击/Click 一个语言时，在该语言最右边显示一个打勾图标，表示已选中该语言，并且立即将App语言设置为选中的语言(同时将“更多”界面中显示的本来的语言更改为新 选中的语言)，然后(原型中此处等待了100ms，再以 ease out cubic 300ms 的时间转场) 返回到 “更多” 界面中

2.Language.2.2 Android 版

• 点击/Click 一个语言时，在该语言最右边显示 ，表示已选中该语言，然后弹出一个黑框提示，提示文字为“正在切换语言”，切换完成后跳转到首页，并且将 App 语言设置为选中的语言(同时“更多”界面中显示的本来的语言更改为新 选中的语言)
• 如果点击了本来已选择的语言，则执行@iOS 版同样的动效退回到 “更多” 界面，只是不将 更换位置
• 在点击了一个语言之后到回到 “更多” 界面之前的这段时间内，界面是不允许用户任何操作的

2.About 关于 Panli App

• 标题 = 关于 Panli App
• App 版本右边 没有箭头
• 官网地址右边 没有箭头
• 客服邮箱有右边箭头, 点击时相当于给这个邮箱发邮件
  

  service@panli.com

2.Shipocial_Networks 社交账号

• 导航栏标题 = 社交账号
• 邮箱那栏不放 (Change for change's sake.)

2.Password 修改密码

2.Account 人民币账户

查看原图

2.Account.1 Panli 账户

2.Account.1.1 展示数据

最近消费记录

• 这是一个新改动, 把最近 5 条消费记录直接放出来 (不论是收入还是支出) , 省去用户一次点击
• 这些最近消费记录是可以点击的, 点击后打开此条, 就像上面大图里那样;
• 打开 "Panli 账户" 时刷新 "最近消费记录" 数据

2.Account.2 全部消费记录

• 全部、收入、支出 三个 Tab 直接展示在界面 (导航栏) 上;
• 点击后打开此条, 就像上面大图里那样

2.Recharge & WechatPay 充值和微信支付

微信支付功能未排期

• 打开界面时, 不会 默认激活充值金额文本框;
• 支付界面 下半部分参考充值 (如需额外的设计稿, 请联系 @Jacob)
• 微信支付时, 下面的实际支付金额是 RMB
• 原来的 $ 统统改成现在设计稿中的 USD 以统一界面信息 (相对于 RMB)

2.Signup&Login 注册 / 登录系列界面

2.Signup&Login.1 注册 / 登录

• 两个 Tab 上的文案 不用这么多废话, 就 用 "登录"/"注册";
• 打开界面, 默认选中 登录 ;
• 切换 Tab 时, 注意下方的控件是整套一起切换的 (2/3 个文本框);
• 登录 按钮上, 忘记密码 的文案使用 无法登录了?, 点击后打开 重置密码界面
  

  新文案就是避免掉有些人对 "忘记密码" 4 个字在理解上的歧义 (到底是用户忘记密码需要点这里, 还是点这个来忘记密码), Change for change's sake

• 用户设备上没有安装微信时, 不显示 微信登录 按钮, 对了, 微信登录 按钮上的文字使用 "微信登录", 没有 "/Wechat " 部分 (包括里面的空格) //这个功能不做的话很容易审核被拒绝, 公司已经吃过 3 次亏了, 别问我为什么同一个错误会犯 3 次, 大家了解有这么个事情就好了, 这边不要求做

2.Signup&Login.1.1 异常情况

2.Signup&Login.2 重置密码

2.Signup&Login.3 联合登录补充注册信息

3. 同期项目

3.1 逛街导航栏和工具栏功能按钮调整 (随 1 期上线)

简单来说就是为了扩展导航栏标题的显示长度, 去掉了一些不是很必要的功能

• 刷新放到原来购物车的位置
• 客服放到原来 "..." 的位置 (点击客服时复制链接的功能保留)
• "购物车/更多/点更多展开的面板" 全部取消
• 保证导航栏标题能显示以下内容 (320宽度的情况下), 请直接复制, 因为使用了英文括号
  

  孔夫子(二手书)