IMTD

I'm Ted. Study Business with Marketing at Warwick University.

0%

参数表和筛选器Spec&Filter

本文涉及后台改动与内容维护、不涉及GUI设计内容

网站不仅需要设计得赏心悦目、也需要准确而即时的信息维护,本篇内容从当前产品页的参数表Spec与产品列表页的Filter的混乱情况思考原因,设想了一个用于解决当前Spec与Filter的混乱问题的产品列表。

结构变动与原因

Sturcture of product sheet.png

新选定逻辑

🔃不再提供No的选项,只要选中即为Yes

🔃提供Clear选项供用户一键清空筛选值

🔃在已选定某个值时,其它与该值没有交集的选项转为灰色,降低用户操作次数

新分类标准

Wireless Technology:

  1. Wi-Fi 6 (802.11ax)
  2. Wi-Fi 5 (802.11ac)
  3. Wi-Fi 4 (802.11n)
  4. 802.11ad
  5. Zigbee
  6. Zigwave
  7. BLE

Wireless Speeds:

  1. Ultra-Fast (> 3000 Mbps)
  2. Super-Fast (1350 Mbps - 3000 Mbps)
  3. Fast (> 150 Mbps)

Internet Access / Broadband Speed:

  1. Multi-Gig Ethernet (ISP Plan > 1000 Mbps)
  2. Gigabit Ethernet (ISP Plan ≤ 1000 Mbps)
  3. Fast Ethernet (ISP Plan ≤ 100 Mbps)

USB Ports

  1. USB 3.0
  2. USB 2.0

Homecare Antivirus

Game Center

优化、新增录入方式

方式1——新建、管理FilterBy规则时

位置:Product Admin=>FilterBy Admin

  1. 选择Catecory后才可以修改Filter(在第二点会解释原因)

WechatIMG5.png

  1. 点击进入每个产品的的Models当中,可以输入字段/JS进行筛选,筛选对象为该Category产品线中所有产品的”名称”、”产品参数”,如

    • 对于速率这一项而言,可以从产品名称”AX11000 Tri-Band Gamign Router”中取得”11000”。(此操作可以延续,每次录入新产品时,自动执行,并在Product页面看到结果)

      1
      2
      3
      4
      5
      6
      7
      product_name_list.forEach(product){
      let s = /\s/g
      let not_number = /[^0-9]*/ig
      let speed = product.name.split(s)[0].replace(/[^0-9]*/ig,"")
      ...
      //对比数值并将对应Model放入该区间
      }
    • 对于HomeCare这一项而言,可以在Spec当中进行检索,拥有HomeCare字符的产品会一一显示,并可以手动加入该区间。(由于Spec变化多端,此操作单次生效)

方式2——添加、修改产品信息时

位置:Product Admin=>Product

WechatIMG7.png

  1. 在产品页面进入Detail修改细节信息时,会在页面底部看到当前产品所加入的Filter项。

EN站点与子站点同步细节

除了在FilterBy Admin提供子公司进行翻译的窗口外,CMS提供子公司充分自定义的功能

操作 后果 状态
EN站点新建、修改项 项作为全局项保存,EN与子站点global同步发布(对于参数而言翻译不重要) global
EN站点删除项 删除EN站点与子站点的对应的global状态项,子公司的对应mix项转为local项 global
子站点新建项、修改项 项作为本地项保存,仅上线子站点 local
子站点修改全局项 不再继承全局项的本地项,与左侧全局项仍然在同一行并列显示,当全球项发生更新时会在FilterBy出现提醒更新的badge,可以点击badge右上角的关闭按钮来dismiss mix
子站点删除全局项 隐藏显示 global

Spec录入

现状

  1. 分离维护:Filter与Spec数据分离,需要单独进行维护,导致标准不一,且更新存在延迟。
  2. 标准不一:当前各产品的Spec以文本形式储存在CMS后台,写作标准各行其道,当产品比较页面上线后,务必会使维护工作量和出错可能性上升,由于之前的Spec录入方式不统一,缺乏延续性,比较功能体验不佳:
    Spec规范不一的示例:C7&841N.png
  3. 出错风险高:在录入新产品/修改参数时,经过PM、策划、WS三步、易产生遗漏,出现问题也更难以发现。

新流程

参数唯一的源头: PM

PM在CMS上更新Brief,触发Spec同步更新预览,PM将自行决定是否发布,而Filter在设置了一次的规则之下自动成形,供各站点Admin选择性发布使用。