运费对比表改版/按国家显示运送方式

B-业务线 运费对比 新手引导

需求背景

原先的设计方案是先将国家/地区按照我们的理解归到一个区间，然后各干线按照这个运送区间设置不同的运费并显示给用户，这个方案有这么几个不足的地方：

1. 太多不常用的国家地区被归纳到“其他国家/地区”，对以后开拓新市场的限制非常大。如果想不改动现有后台的情况下想要增加一个新国家/地区，就得调研然后设置(基于运费非常不合理的情况下的用户数据)；

2. 用户如果想对比各个运送方式的运费，只能来回切换标签，用户能直接对比的是跟他们毫无关系的其他国家/地区的运费；

   用户场景应该是直接看到自己所在的国家/地区有没有适合自己的运送方式，其他都是我们强加给他们的流程步骤

3. 在原先方案中，为了减少工作量，土耳其这样横跨欧亚两洲的国家被设置到了西欧，用户如果没有细心看完西欧所有国家的话，有可能会找不到土耳其，认为被算作了其他国家/地区，看到的运费与实际运费不同。而且国家/字体的字体颜色是淡灰色，运送组别才是更醒目的黑色，对这部分用户来说更不容易找到(换另一个突出也不太好，毕竟流程是先看运送组别再看国家地区)。这种情况还出现在日本、韩国、朝鲜、蒙古等国家；

4. 我们所设置的运送组别名称还有另一些歧义，北欧西欧南欧都被归纳到欧洲，引其上一个问题带来的误会。三大运送方式相比 Panli 专线里的欧洲，还增加了土耳其/摩纳哥/马耳他三个国家；
5. 在原先方案中，由于流程底层分叉众多，设计师无法有效地突出页面的重点，使得表格有两种底色，国家/地区有两种字体样式，官方运费和 Panli 运费又是两种字体样式；
6. 重复度比较大的“禁限物品”、“体积限制”如果针对一个地区下所有运送方式分别展示，会占用了屏幕很多地方，不利于用户了解重点“不同运送方式的运费”。

以上种种设计问题，都会让用户觉得这不是专门为了 ta 而做的，也可以说不太友好。

竞品那些全部让用户自己选择的方案，牵涉到很多国家地区习惯叫法的差别，如果要支持搜索又牵涉到模糊匹配和分词的问题，实际使用起来也并不相当方便。这次需求准备利用定位来自动选择国家地区，然后展示所有运送方式。

前台页面-运费对比表

页面地址：

http://www.panli.com/Help/Postage.aspx

页面除了顶部和底部外，需要这些元素:

• 原型和视觉稿中的下拉框使用目前网页上提交运送的下拉框控件；//收货地址簿的下拉框也一并改成此控件
• 一个下拉框所选国家地区里，显示所有支持的运送方式、首重运费、续重单价、服务特色、更多信息的表格。

• 表格右上方有一个为何 Panli 能够提供超低价运费？文本，悬停可以查看信息(与下文鼠标悬停在查看更多信息弹出面板一致，但宽度不同)

  作为海外华人代购业的领头羊，Panli 一直致力于向用户提供完善的服务，给用户完美的购物体验。
  随着 Panli 的实力和影响力不断强大，诸多物流供应商都愿意与 Panli 保持长期稳定的合作，愿意为 Panli 提供更低的运费，让 Panli 用户得到更多的实惠。
  Panli 在挑选物流供应商时不单单只是看价格，服务水平、公司实力、抗风险能力等均会做一定的审核筛选，要给 Panli 用户提供有保障的服务。
  Panli 始终以为海外华人提供更好的服务为己任，用户的满意从始至终都是 Panli 坚持不懈的追求。

• 表格下方(非表格中最下面一行)还会有一个温馨提示

  温馨提示: 运送周期为预估时间，具体配送时间以海关清关速度及当地邮局效率为准。

• 表格右边有一个与其他页面样式一样的固定在浏览器上的“客服中心”。

文案内容说明

• 文案内容除非有特殊说明，否则以此文档为准;
• 各个鼠标悬停的超链接字体样式、字体颜色大小等样式、各种颜色、表格用色、弹出面板等，以设计稿为准;
  

  鼠标悬停在“超链接”上时，鼠标的光标会变成手势图标，具体效果可以从静态页中看到。

国家地区下拉框

表格各内容样式说明

1. 设计稿补充说明: (表格上方的)国家地区下拉框左边的“送货地区”以及右边的“为何 Panli 能提供超低运费？”一行所有控件垂直居中对齐；
   

   此处一定要强调“地区”，有些地区不是独立国家，比如台湾，为了不引起麻烦，请务必注意这一点。

2. 表格中，标题“运送方式”及其下方的各运送方式是左对齐，“寄送周期/服务特色/更多信息”及其下方内容是水平居中对齐，两种运费及其下方内容的对齐方式参考这部分的第4条；
3. 首重/续重两列的内容显示格式大致为99元 / 500g这样，不使用视觉稿中的RMB189.00/500g的格式；
4. 首重/续重两列的内容中，标题与下方的/水平居中对齐，/左右各空开一个5像素的宽度，/左边显示运费金额，/右边显示对应的重量(Air 的重量为100g，其他都为500g，请注意)；
5. 表格内只有水平线，没有垂直线。

表格内容-运送方式顺序

Panli 专线
DHL
EMS
Air(2kg以下)
自提专线
特惠线
EMS(经济型)

• 如果没有该项运送方式，则不显示；
• 敏感商品专线和原来一样，即使有后台数据也不会显示在运费对比表中。

表格内容-寄送周期

Panli 专线(有3种情况)

日本: 8-15(工作日)
澳大利亚: 5-10(工作日)
其他: 3-5(工作日)

DHL

2-3(工作日)

EMS

5-8(工作日)

Air(2kg以下)

8-20(工作日)

自提专线

7-10(工作日)
此项说明文字样式与更多信息下的查看相同，让用户一看就知道还有额外的说明，鼠标悬停时，显示一个面板(宽度以能一行显示完“注”为标准，边框与文字的间距与其他面板相同)，面板的说明文字为:

1.在您提交运单后，通常在1-3个工作日内为您发货；
2.仓库发货到海外自提点的时间，一般为3-7个工作日；
3.包裹到达自提点后，系统将在第一时间通知您预约、取货。
注: 如包裹处理过程中有特殊状况，我们将在1-2个工作日内及时与您联系。

特惠线

7-15(工作日)

EMS(经济型)

5-10(工作日)

表格内容-首重运费/续重单价

运费金额和单位重量都使用后台新运送方式列表设置的数据，一般来说不太可能出现有其中一个数据没另一个数据的情况。

表格内容-服务特色

不同运送方式的服务特色：

Panli 专线 - 价格超低，速度中等
DHL - 速度最快
EMS - 清关较容易
Air(2kg以下) - 清关最容易，小件商品首选
自提专线 - 仅适用于 Panli 自提服务
特惠线 - 价格最低，速度一般
EMS(经济型) - 清关较容易

请注意,自提专线的说明文字“Panli”左右两边分别有空格。

表格内容-更多信息

鼠标悬停在查看上时，显示查看所在行运送方式的更多信息面板:
Panli 专线

免体积重量超档运费(体积限制类商品除外)
禁限物品
食品/液体/粉末/香水/气体/光盘/仿牌/药品/保健品/电池/电子数码/胶状
体积限制
体积过大或形状不规则的商品(如长柄雨伞、50cm高的毛绒玩具等)须按体积重量付费，体积重量(kg)=长cm×宽cm×高cm/5000

[注意]其中新加坡“Panli 专线”的“更多信息”是特殊的，禁限物品一项显示的项目额外增加“/书籍”，显示为

食品/液体/粉末/香水/气体/光盘/仿牌/药品/保健品/电池/电子数码/胶状/书籍

DHL

免燃油附加费，免体积重量超档运费(体积限制类商品除外)
禁限物品
食品/液体/粉末/香水/气体/光盘/仿牌/药品/保健品/电池/电子数码/胶状
体积限制
体积过大或形状不规则的商品(如长柄雨伞、50cm高的毛绒玩具等)须按体积重量付费，体积重量(kg)=长cm×宽cm×高cm/5000

EMS

禁限物品
食品/液体/粉末/香水/气体/胶状
体积限制
长、高均须＜1.4米

Air(2kg以下)

禁限物品
限重：2000克，一般物品都可以运送
体积限制
长宽高合计须＜90cm或最长一边须＜60cm

EMS(经济型)

禁限物品
食品/液体/粉末/香水/气体/胶状
体积限制
长、高均须＜1.4米

自提专线

禁限物品
食品/液体/粉末/香水/气体/光盘/仿牌/药品/保健品/电池/电子数码/胶状
体积限制
体积过大或形状不规则的商品(如长柄雨伞、50cm高的毛绒玩具等)须按体积重量付费，体积重量(kg)=长cm×宽cm×高cm/5000

特惠线

禁限物品
食品/液体/粉末/香水/气体/光盘/仿牌/药品/保健品/电池/电子数码/胶状
体积限制
按体积重量付费，体积重量(kg)=长cm×宽cm×高cm/6000

鼠标悬停交互细节

从原型演示的效果可以看到，鼠标悬停在一个运送方式的查看时，直接往下移动鼠标，可以切换到下一个“更多信息面板”。原型的显示效果也全部基于是CSS和JavaScript，可以看到这在网页上并非无法实现的。
原型中是这么处理的，在查看单元格上方分别放置一个宽高与相同的图片热区，只要将所有图片热区置于弹出面板之上，就可以实现这种效果。使得用户想看另一个运送方式的详情时非常轻松，不需要每次都把鼠标移出区域再移入新区域。

通过定位信息自动选择国家地区

打开需要定位的页面(比如此运费对比表)时，根据 IP 地址来匹配用户所在地区。获得位置信息后，第一时间将国家地区选择控件的选项切换至该国家地区，理想的情况下可以使得用户打开这些页面后，自动跳转到所在国家地区，以达到最少操作的目的。

如果 IP 地址定位失败的话，就让用户自己选择国家地区。

页面高度自适应
切换下拉框时，表格总是会切换到相应国家地区的运费对比表，希望页面底部能总是与表格底边保持固定距离。

前台页面-费用估算

页面地址：

http://www.panli.com/Tools/Estimates.aspx

由于选择国家地区的方式已经有了很大的调整，此页面也需要进行一些改动：

1. 送货地区的选择，现在也使用下拉框来选择，与“运费对比表”前台页面一样，会根据浏览器和 IP 地址自动定位，并选择相应的国家地区；
2. “商品总价”和“商品重量”两个文本框相应拉长，与下拉框长度一致；
3. 打开页面时，“商品总价”文本框获取焦点，使得用户可以直接输入商品总价并继续操作；
4. 点击开始计算按钮时，页面沿垂直方向滚动至费用估算的标题顶部(也就是说以它为锚点，滚动动作交互效果为先快后慢/ease out cubic 500ms的时间)，不仅使得用户可以打开页面后直接进行输入和选择，不需要滚动页面。并且计算完成后也不需要再次滚动页面就可以查看估算结果；
   
5. “商品总价”和“商品重量”两个文本框获得焦点时，敲击键盘回车键/Enter视为点击开始计算按钮；
6. 原来的下拉控件使用提交运送的控件。

费用估算页面显示的运费为新运费，其他数据依然调用原来后台设置的对应数据。同时，“服务费”和“总计”的计算结果为使用新运费计算得出的结果。

除了文本框提交按钮外，其他效果可以参考原型“费用估算.html”。

其他平台关联功能

收货地址簿使用新的运送方式列表；
手机 App 收货地址使用新的运送方式列表；
iPad 版 App 收货地址使用新的运送方式列表。//不着急发布新版本

后台页面

表格数据确认于 2015.5.29 10:19

运送国家管理

原先表格中的排序序号一栏删除(原来的数据保留在数据库)，新表格从左到右的栏目分别为:
ID(两个字母都大写) - 国家地区 - 习惯叫法 - ISO 3166-2 - 是否可用 - 操作，其中习惯叫法和ISO 3166-2是新栏目，其中涉及到的数据会以 Excel 表格的形式给到。

由于现在国家地区众多，在原来“编辑栏”上方，需要增加搜索功能:

• 国家地区，搜索时从“习惯叫法”中搜索，模糊匹配；
• ISO，搜索时从“ISO 3166-2”中搜索，精准匹配；
• 右边有一个搜索按钮，点击时根据前面“国家地区文本框”以及“ISO 文本框”中的文本进行筛选，两个文本框同时作为筛选条件时各个筛选条件之间是或逻辑，只使用一个文本框作为筛选条件时忽略仅以此条件进行筛选。
  

  这样做，会使得工作人员在进行筛选时，展示单独符合任一条件的全部结果，而非同时满足两个条件。

快递公司管理

• 标题栏Id改为ID
• “Panli专线” 改名为“Panli 专线”，中间增加一个空格
• “AIR (2kg以下)” 改名为“Air(2kg以下)”，除了“IR”改成小写“ir”外，左右两个括号“（）”改为* 英文输入法下的“( )” ，Air 和括号中间没有空格；
• EMS普通 改名为“EMS(经济型)”除了“普通”改成“经济型”外，注意左右两个括号为英文输入法下的“( )”，EMS 和括号中间没有空格。

其他的页面和数据不做改变。

快递方式管理

• 标题栏Id改为ID
• “Panli专线” 改名为“Panli 专线”，中间增加一个空格
• “AIR(2kg以下)” 改名为“Air(2kg以下)”，除了“IR”改成小写“ir”外，左右两个括号“（）”改为* 英文输入法下的“( )” ；
• EMS普通 改名为“EMS(经济型)”除了“普通”改成“经济型”外，注意左右两个括号为英文输入法下的“( )”。

其他的页面和数据不做改变。

添加运送方式

左边为现在的，右边为改动目标。

原来真实最低价格、真实续重单价、官方起重价格价格、官方续重单价四项删除(原来的数据保留在数据库)，是否可用的复选框移至保存按钮上方的最后一行，复选框的选择形式改为下拉框的形式，默认项为可用，也可以选择不可用。

运送方式下方增加一行“运送组别”，右边为一个下拉框。此下拉框最好能根据选择的“运送方式”改变，比如选择了“Air(2kg以下)”，“运送组别”的下拉框会的选项就为:

运送组别直接在数据库中设定，不单独开一个后台功能。这么做主要是为了和老系统能很好的衔接。

运送方式列表

原先表格中的真实起始价、真实续重单价、官方起重价、官方续重单价几栏删除(原来的数据保留在数据库)，新表格从左到右的栏目分别为:
ID(两个字母都大写) - 国家地区 - 快递方式 - 快递组别 - 起始重量 - 续重重量 - 起始价格 - 续重单价 - 是否可用(状态改为此项) - 操作，其中快递组别是新栏目，其中涉及到的数据会以 Excel 表格的形式给到。

表格上方的下拉框的交互改动: 选中项改变时，底下数据直接改变，不再需要点击右边搜索按钮，现在一个国家最多也就只有7种左右的运送方式，同时筛选两项的必要性不大。选中项改变时，自动隐藏掉数据前面的复选框(下面会提到)。
相应的，移除原来的搜索按钮，并新增加两个按钮批量选择和编辑。

点击批量选择时，在当前筛选规则下的每条数据前面显示一个(可多选的)复选框，并全部选中，工作人员可根据情况反选；//无论点击几次，效果都相同，不会出现点击第二次隐藏
(没点击过批量选择时)点击编辑，功能同点击批量选择；
(已点击过批量选择时)点击编辑，显示一个窗口，用以编辑选中项的数据。//起重续重的重量不能在后台操作，实在需要改动可通过技术手段批量设置。

点击的效果具体可参考原型。

刚打开时，数据显示20条一页；//否则666条数据可能对所有的人打开时都会很卡
进行任何筛选之后，数据不分页。//最多的DHL9区有148条数据，2、30条一页编辑起来很困难

运送方式“EMS普通”改为“EMS(经济型)”的后续工作:

名称和其他页面做好统一，如需改动，知会售前客服，客服，仓管即可