[关闭]
@jean 2015-12-17T10:58:52.000000Z 字数 7100 阅读 1944

Panli 主站首页改版

A-运营线 主站 我的仓库 转运

需求背景

视觉风格
总所周知，公司的主站已经很长时间没有改版了，这在竞争过程中或多或少有些吃亏。而且由于历史原因，每个产品和设计都把自己风格的东西加到主站上，现在首页看起来视觉风格也很不统一。

转型导购
同时，为了尽快从代购这样的工具产品转型导购型产品，网站也需要能有更大的版面和更突出的位置来显示各个市场营销专题。原先拼单团购和猜你喜欢的效果由于各种原因，订单占比非常低，这些专题在现阶段的效果已经不尽如人意了。

开发资源
由于开发和设计人员有限，也有优先级更高的项目预订了大部分资源，此次首页改版采用了现在大家看到的这个方案，以便在下半年学校开学这个营销旺季发力。

希望了解这些能帮助大家更好地理解此需求。

PS: 原型下载地址已改成百度云链接，点击即可下载，不需要登录禅道账号。

功能点

  1. 首页设计改版；
  2. 首页顶部区域固定在浏览器；
  3. 首页中部模块自定义；
  4. 送货车改名我的仓库，增加各种提醒和引导；
  5. 自助购改名转运；
  6. 手机下载页优化，加入安卓APK下载；
  7. 代购页面，转运页面、微信页面

下面开始进入正题

主站首页改版

此处输入图片的描述
查看原图

最顶部横幅广告

此处输入图片的描述
需要支持新的宽屏图片，宽度与新的宽版主体部分一样为 1200px，高度调整为 80px。

顶部导航 1

左半部分（未登录时）
此处输入图片的描述
从左到右依次为: 免费注册、登录、微信登录、Facebook 登录

左半部分（已登录时）
此处输入图片的描述

从左到右依次为: 用户名、退出、短信(含短信数量标记，数字与现在逻辑一致)。

右半部分
此处输入图片的描述

从左到右依次为: 购物车(含购物车内商品数量标记，数字与现在逻辑一致)、我的 Panli、我的仓库(由送货车改名而来，也包含其中商品数量标记)、关注微信(有一个向下的箭头)、帮助中心(有一个向下的箭头)

顶部导航 2(默认状态/未固定到浏览器时)

左边部分
Panli logo
logo 请直接找杨雪。

点击 logo 时，打开

http://www.panli.com

中间部分

  1. 网址粘贴框交互部分说明:

    • 每当首页加载完成后，文本框总是会获得焦点，使得用户打开网站后能直接粘贴宝贝开始代购；
      此焦点不会因为滚动页面而丢失
    • 文本框获得焦点时，敲击键盘上的 回车/Enter 键时，等同于点击右边的我要代购按钮；//设置提交按钮功能，原型中没有体现
    • 不论文本框是否获得焦点，只要文本框为空时，总是会显示描述文字“已经找好要代购的宝贝了吗？快把宝贝的网址粘贴过来～”；
    • 当文本框内文字改变(OnTextChange)且不为空时，隐藏描述文字“已经找好要代购的宝贝了吗？快把宝贝的网址粘贴过来～”

  2. 粘贴框下方的说明文字:
    冒号为英文输入法下的冒号(瘦且居左)，右边有一个空格

    代购支持商家: 淘宝 天猫 1号店 唯品会 亚马逊中国 京东 当当 等中国购物网站

    “等中国购物网站”不要漏掉。

  3. 我要代购 按钮

    功能同主站现在的同名按钮

Google Analytics 代码
页头上记得挂上 Google Analytics 代码。

顶部导航 3(页面滚动后/固定到浏览器时)

此处输入图片的描述
相比顶部导航 2，少了网址粘贴框下面各个购物网站的部分，以及两个鼠标悬停展示二维码的图标，效果如上图。

固定部分实际的交互效果，与设计稿略有不同，高度使用114，而不是设计稿中的126.

顶部导航 4(外页导航/主要板块入口)

此处输入图片的描述
所处位置
logo 所在导航的下方。

Tab 栏
此处输入图片的描述

首页的商品搜索暂时砍掉，现在这一整行中只有这几个 tab 标签: 首页、代购、特色购物(右边有一个向下的箭头)、转运、社区、手机版

特色购物 展开菜单交互说明:

商品搜索
此处输入图片的描述
原来导航右边的商品搜索功能移除。

Tab 栏交互样式

首页各板块

此处输入图片的描述

鼠标悬停在 banner 图片区域上时，图片左右两边显示切换按钮，效果如图
此处输入图片的描述

公告栏

此处输入图片的描述
挂在 Banner 右边，且在 Banner 上方(屏幕向外方向)，具体不透明度请询问杨雪。

上半部分
新版公告只使用老公告的“最新推荐”部分，“常见问题” Tab 及相关内容从公告中移除。

下半部分
测试时，要求能在上传一张无背景 png 图片时，也能有上图这样的效果，即背景色与公告相同。

模块区(实现和判断待定)

模块区位于 Banner 和公告栏下面，以多样化的形式展示各种广告模块。
此处输入图片的描述

前台页面

Panli 故事版块

此处输入图片的描述

左边部分
此处输入图片的描述

点击任意一张图片/图片下面的标题时，打开此页面

http://www.panli.com/Information/

右边部分 - 会员评价 (运单评价)
此处输入图片的描述
内容同现在的“最新评价”，日期和地区依然会显示。

点击 更多 和任意一条会员评价后，打开会员评价

http://www.panli.com/comments

更多
鼠标悬停的时候，更多>>才会变成图中的样式，鼠标未悬停时没有下划线样式，颜色请跟杨雪确认。

“无头像用户”使用默认头像，相当于一个占位符。

新手快捷入口

此处输入图片的描述

左边部分
此处输入图片的描述

现在主站底部，再增加一列:
标题: 常用工具

右边部分
此处输入图片的描述

两个二维码请直接找杨雪。

测试的时候，确保:

最底部版块

此处输入图片的描述
友情链接两部分，除笑脸 logo 部分外，其余所有内容保留，但请注意上下顺序。

倒数第二行中，| 网站地图 | 右方，增加两个超链接:

| Panli 故事 |

http://www.panli.com/Information

| 手机 Panli |

http://www.panli.com/Mobile/Index.aspx

并且，移除 | 折扣速递 |

友情链接和老的一样，仍然能后台设置。

Google Analytics 代码
页脚记得挂上 Google Analytics 代码。

客服中心

此处输入图片的描述

熊猫 - 客服中心图标
点击 客服中心 时，从新窗口打开页面

http://www.panli.com/CustomerService/

固定在浏览器规则
垂直方向
与页面中间主体部分间隔一小段，客服中心(熊猫这格)的 图片垂直中线，始终与浏览器窗口垂直中线重合。
不论返回顶部部分 ↑ 是否显示，垂直方向的规则不变。

水平方向

↑ - 返回顶部等按钮的显示规则
此模块有两种状态: 显示 返回顶部 和不显示 返回顶部，默认状态不显示 返回顶部。
当页面在Y轴负方向(垂直方向)上总计滚动距离超过 正 400px 时，客服中心 下方显示 返回顶部。

手机版
鼠标悬停在 手机版 上时，向左边移出二维码，二维码找杨雪；
(8.7 10:30AM 补充) 点击图标(矩形区域，不包括二维码)时，打开 App 下载页

http://www.panli.com/Mobile/Index.aspx

↑ - 返回顶部交互动效
点击 返回顶部 时，锚点到页面最顶部的控件，动画效果为 300ms 先快后慢。

建议
点击 建议 时，同原来首页同名部分功能一样，弹出一个对话框
此处输入图片的描述

javascript: newpanli.clicks()

此模块只用于首页

——————

自助购/送货车改名提醒

原型下载

送货车 → 我的仓库:
1. 页面上默认显示 我的送货车，点击后进入步骤2，并且启动步骤5；
2. 淡入淡出 fade 500 ms 隐藏 我的送货车；
3. 我的送货车 完全隐藏后/步骤1开始之后等待 500 ms；
4. 我的仓库 从窗口外落入 送货车 位置，交互动效为
此处输入图片的描述
5. 步骤1开始之后等待 1800 ms，进入步骤6；//为了让用户知道名称变了
6. 打开原送货车/现我的仓库页面 - http://www.panli.com/mypanli/OrderCart.aspx

补充说明:

  • 此效果仅在改版后第一次点击 我的送货车 之前存在，点击一次之后，随(浏览器)缓存一起保存在本地，不清缓存的情况下以后一直显示 我的仓库。同一账号在新浏览器打开后，还是会有一次这个效果；
  • 首页的 转运，我的 Panli 里的一级导航: 转运，二级导航:
    转运地址、我要转运为一组，首页的 我的仓库，我的 Panli 里的二级导航: 我的仓库为一组，每组里任意一个“按钮”被点击过一次，该组在刷新之后就整体不再出现，视为“已被点击”//8.12 易超凡提出改进建议
  • 这个效果不会永远使用，一段时间后会下线，仅作为服务改名的过渡期使用，是用开关来实现还是以后发新版本由研发自己决定方案；
  • 步骤5直接接在步骤1之后，是考虑到老 IE 浏览器不支持比较新的 JavaScript 和 CSS，为了保证这批用户能够“顺利”进入到送货车/我的仓库，因此这么实现；
  • 没考虑使用蒙板来引导用户，是不希望和运营的广告位产生效果上的优先级问题，效果的目标只是完成服务改名后的过度，让老用户能正常使用，不再挖新坑；
  • 此说明在改名需求部分通用，后面将不再累述。

自助购 → 转运:
1. 页面上默认显示 自助购，点击后进入步骤2，并且启动步骤5；
2. 淡入淡出 fade 800 ms 隐藏 自助购；
3. 自助购 完全隐藏后/步骤1开始之后等待 1500 ms；
4. 打开原自助购/现转运静态页面 -

我的 Panli，内页左侧导航
此处输入图片的描述
一级导航:
自助购 → 转运
除文案改动外，交互效果不改动，点击依然无效果。

二级导航:
自助购唯一收货地址 → 转运仓库地址
我要自助购 → 我要转运
我的送货车 → 我的仓库

  1. 页面上默认显示 自助购唯一收货地址/我要自助购/我的送货车，点击后进入步骤2，并且启动步骤3；
  2. 淡入淡出 fade 800 ms 隐藏 自助购唯一收货地址/我要自助购/我的送货车；
  3. 步骤1开始之后等待 2300 ms，进入步骤4；
  4. 打开相应页面:
    自助购唯一收货地址 - http://www.panli.com/mypanli/SelfPurchase/Address.aspx
    我要自助购 - http://www.panli.com/mypanli/SelfPurchase/Order.aspx
    我的送货车 - http://www.panli.com/mypanli/OrderCart.aspx

——————

自助购/送货车网页文字更改

需要将网页中的自助购改为转运，送货车改为我的仓库，包括

自助购部分
此处输入图片的描述

Title URL
[Panli代购] - 帮助中心 http://service.panli.com/
[Panli] - 服务与价格介绍 - Panli代购 http://www.panli.com/services-rates/
常见问题- [Panli代购- 帮助中心] http://www.panli.com/help/ask.aspx
[Panli代购] – 客服中心 http://www.panli.com/CustomerService/
[Panli代购] - 费用估算 http://www.panli.com/tools/estimates.aspx
海外淘宝代购 一站式淘宝购物留学生华人淘宝首选-panli代购 http://taobao.panli.com/
购物车-Panli代购- http://www.panli.com/mypanli/shoppingcart.aspx
[Panli代购 - 我的Panli] – 我的自助购 - 我的商品管理 http://www.panli.com/mypanli/SelfPurchase/list.aspx

送货车部分
此处输入图片的描述

Title URL
[Panli代购] - 帮助中心 http://service.panli.com/
购物车-Panli代购- http://www.panli.com/mypanli/shoppingcart.aspx
我的 Panli 首页 http://www.panli.com/mypanli/
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注