navigation-bar

导航栏是引导用户前往全站的重要内容,这一波优化除了要让它更好看,我们还要让它的引导功能强大起来!

导航栏NavBar

一览

  • 新增了一些内容:Community、登录
  • 展开内容提升屏占比❓用户专心于导航栏与它的菜单时,原页面内容并没有显示的必要

状态1: 默认

2.1.nav.png
  • 调整选项
Home Business Service Provider Smartphone Support Community
不变 不变 不变 不变 Product Support,
Setup Videos,
Documents,
Downloads,
Replacements and Warranty,
Register Product
Blog,
SOHO Community,
SMB Community,
Link Bucks
  • ⭐改Search为按钮形式❓减少空间占用,使导航栏更简洁
  • ⭐Search和Log in用图标表示
  • ⭐🔃新增账户登录按钮,Tether、Community注册过均可直接登录

状态2: 激活大型二级菜单

active the big menu.PNG

  • ⭐二级大分类+三级小分类+示意图组合显示的大型菜单
  • ⭐鼠标移在分类条目上时有效果
  • ⭐展开与收起提供动效
  • 🔃点击二级分类前往产品线页面
  • 🔃点击三级分类前往产品线页面的对应章节(锚或history方法)
  • 🔃点击示意图前往相关页面(TP-Link Mesh)

状态3: 激活小型二级菜单

activate the small menu.png

  • Support下选项:Product Support, Setup Videos, Documents, Downloads, Replacements and Warranty, Register Product
  • Community下选项:Blog, SOHO Community, SMB Community, Link Bucks
  • ⭐展开与收起提供动效

状态3: 激活搜索

nav_search_activated.PNG

  • ⭐鼠标移过搜索按钮时有特殊效果
  • ⭐下拉栏展开收起提供动效
  • 🔃点击按钮后,展开并聚焦输入框、弹出QuickLink栏位,提供两部分链接
    • 根据后台记录,显示最常搜索的前5个产品❓快速解决热门产品的搜索需求
    • ⚡根据CMS上的设定记录,显示不多于5条推荐内容(当CMS上没有手动设定记录时,显示为Blog系统的前5条信息)更多与本记录相关细节详见搜索页Search一章
  • ⭐🔃搜索过程中弹出的备选内容中出现产品型号、产品名(描述文字)
    • 原来Archer AX11000 =>新搜索Archer AX11000 — AX11000 Next-Gen Tri-Band Gaming Router

状态4: 激活Login面板

屏幕快照 2019-03-28 上午10.44.56.png

  • 🔃鼠标移上即激活本面板
  • 🔃点击Your Devices跳转至RMA系统的Product List
  • 🔃Refer a friend跳转到Link Bucks页面 (Link Bucks尚未完成时,显示Make a topic跳转到Community)
  • %%可添加Deco、Tether等App的下载链接