参数表和筛选器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选择性发布使用。