主站新版外页调整

主站 D-编写中

需求背景

我们之前首页的改版, 页面元素整体稍微有点偏大. 这次调整主要是针对这个问题, 文档里只列出主要改动, 点击 这里 下载改动详细说明.

设计稿尺寸过大, 请点击 这里 打开.

1. 顶部悬浮模块调整

简单来说, 注册/登录/购物车/我的Panli/我的仓库/关注微信/帮助中心 和 logo/网址粘贴栏 按两套逻辑悬浮, 相互独立.

1.1 最顶部导航栏

1.1.1 有顶部广告图

• 页面滚动 OnWindowScroll 的 Windows.scrollY 至下图部分的下底边移出屏幕时 > 80px, 固定在顶部
  
  

• 页面滚动 OnWindowScroll 的 Windows.scrollY ≤ 80px 时, 取消固定
  

1.1.2 无顶部广告图

无论是否滚动, 始终固定在顶部

1.1.3 效果作用范围

效果不是全局的, 需要的时候才使用:

暂时只有只有首页使用这个悬浮效果, 其他使用这个版本头部的页面如果要使用会另行通知

1.2 logo/网址粘贴栏

• 页面滚动 OnWindowScroll 的 Windows.scrollY 至下图部分的下底边移出屏幕时 > 189px (大约值, 具体得询问杨雪新设计稿的尺寸), 固定在顶部
  
  

• 页面滚动 OnWindowScroll 的 Windows.scrollY ≤ 189px (大约值, 具体得询问杨雪新设计稿的尺寸) , 取消固定
  

1.2.1 效果作用范围

仅首页, 其他页面没有此效果, 之后会上线的 App & PC 共用一套导购内容 需求中不会用到这个悬浮效果.

1.3 悬浮后显示效果 (待确认)

1.4 交互动效 (待原型确定)

Animate:
ease out cubic
Time: 
150ms
此效果层级位于 "注册/登录/购物车/我的Panli/我的仓库/关注微信/帮助中心" 下方
由于悬浮与否的显示不完全相同, 因此没使用 "直接出现" 而是用了移动动效. 同时为了不显得太慢, 动效时间使用了比较快的 150ms

1.5 界面元素

1.5.1 网址粘贴框位置和宽度有调整

具体见设计稿

1.5.2 网址粘贴框下方网站调整

淘宝 天猫 京东 美丽说 蘑菇街 阿里巴巴 1号店 唯品会 亚马逊中国 等中国购物网站

新增的三个网站超链接

美丽说
http://www.meilishuo.com/
蘑菇街
http://www.mogujie.com/
阿里巴巴
http://www.1688.com/

2. 标签导航栏

2.1 页面打开方式调整

原来首页改版需求里, 代购 和 转运 都是从当前窗口打开的, 现在转运是从新窗口打开.

点击 转运 还是使用 "从当前窗口打开".

http://www.panli.com/transport/

2.2 界面元素

正部分宽度和字体都有所调整, 具体见视觉稿.

3. 右侧悬浮栏调整

3.1 原文档

点击 这里 查看原文档.

3.2 调整内容 (交互部分)

3.2.1 全局改动

(只针对 这些页面) 现在不论页面是否在 Y 轴方向滚动了 400px, 都会显示第二个图标也就是手机图标.

3.2.2 首页滚动

当页面在 Y轴负方向(垂直方向)上总计滚动距离的绝对值超过 400px 时, 客服中心/下载 App 下方显示 返回顶部 和 建议.

3.2.3 其他页面滚动

当页面在 Y轴负方向(垂直方向)上总计滚动距离的绝对值超过 400px 时, 客服中心/下载 App 下方显示 返回顶部, 不显示 建议.

以后除了首页和 手机版 外有新版页面上线的话, 除非有特别说明, 否则右侧悬浮栏都按照这个规则显示

水平方向

• 如果 窗口宽度 ≥ 1370px，则客服中心距离页面 主体部分 间隔 30px ，即效果图那样显示
• 如果 窗口宽度 < 1370px，则客服中心紧贴窗口最右边

3.2.4 返回顶部交互动效

不变, 仍然为

Animate:
ease out cubic
Time: 
300ms

3.3 涉及页面

首页
http://www.panli.com/
代购介绍页
http://www.panli.com/daigou/
转运介绍页
http://www.panli.com/transport/

4. 页面字体标准调整

具体调整内容请询问杨雪

5. 其他改动

点击 这里 下载改动详细说明.