随笔 - 268  文章 - 0  评论 - 1028  阅读 - 160万

【水文】从url横向对比大电商网站的搜索细节处理

看到Keep Walking的大电商网站导航用户体验对比一文,感觉有点意思。因为我最近的工作和搜索多少有些关系,而且被中英文分词搞得有点烦,之前我也借鉴模仿过一些网站的搜索功能,所以下面我就来横向对比一下几个电商大佬们的搜索。和Keep Walking兄弟提到的比较站点稍有不同,这次我的对比只选择京东、当当、QQ商城三大综合性网站以及还是一家综合性网站淘宝网。接着还是和Keep Walking稍有不同,我不会从(前端)用户体验的角度来比较搜索,而是更侧重于从搜索的url(网页地址)以及搜索结果页面的关键字来比较一番,毕竟自己搞web开发比较久,对参数传递等等比较敏感一点。

综合性大站

http://www.taobao.com

http://www.360buy.com

http://www.dangdang.com

http://shop.qq.com

一、淘宝

下面的搜索,选择的是淘宝网首页的默认“宝贝”选项卡。

1、单个关键字

(1)、英文
搜索关键字:macbook

url:  http://s.taobao.com/search?q=macbook+&keyword=&commend=all&ssid=s5-e&search_type=item&atype=&tracelog=&sourceId=tb.index

(2)、中文

搜索关键字:苹果

url: http://s.taobao.com/search?q=%C6%BB%B9%FB&keyword=&commend=all&ssid=s5-e&search_type=item&atype=&tracelog=&sourceId=tb.index

2、组合关键字

(1)、无特殊字符
搜索关键字:macbook  苹果

url: http://s.taobao.com/search?q=macbook++%C6%BB%B9%FB&keyword=&commend=all&ssid=s5-e&search_type=item&atype=&tracelog=&sourceId=tb.index

(2)、含特殊字符

搜索关键字:macbook+苹果

url: http://s.taobao.com/search?q=macbook%2B%C6%BB%B9%FB&keyword=&commend=all&ssid=s5-e&search_type=item&atype=&tracelog=&sourceId=tb.index

3、小结
大家可以点击搜索链接看一下搜索结果。我的个人直接感知如下:

(1)、进入淘宝网首页,鼠标默认聚焦在搜索框内(好像是一个无心的微小举动,我可以理解成是淘宝对搜索的重视吗?),搜索框内的放大镜在鼠标焦点在文本框上时自动隐藏;

(2)、对特殊字符和中文都进行了编码,从搜索结果的url上可以很清楚地看到;

(3)、搜索结果页面,搜索框内的关键字和前一页用户输入的结果是完全一致的。

二、京东

1、单个关键字

(1)、英文
搜索关键字:macbook

url: http://search.360buy.com/Search?keyword=macbook

(2)、中文

搜索关键字:苹果

url: http://search.360buy.com/Search?keyword=苹果

2、组合关键字

(1)、无特殊字符
搜索关键字:macbook 苹果

url: http://search.360buy.com/Search?keyword=macbook 苹果

(2)、含特殊字符

搜索关键字:macbook+苹果

url: http://search.360buy.com/Search?keyword=macbook+苹果

3、小结
京东首页的搜索,给我的个人直接感知如下:

(1)、搜索框较短小,默认有推荐搜索关键字,搜索框内的放大镜图标始终显示;

(2)、对中文特殊字符都没有进行编码,从搜索结果的url上可以很清楚地看到;url很简短,关键字虽是明文,但是搜索功能毫不含糊;

(3)、搜索结果页面,搜索框内的关键字和前一页用户输入的结果稍微有点失真。比如含特殊字符的搜索关键字,如“macbook+苹果”,搜索结果页面初始化后少了一个+号,可以推断出他们在后台进行了特殊字符过滤处理。

三、当当

1、单个关键字

(1)、英文
搜索关键字:macbook

url: http://search.dangdang.com/search.php?key=macbook&SearchFromTop=1&catalog=

(2)、中文

搜索关键字:苹果

url: http://search.dangdang.com/search.php?key=%C6%BB%B9%FB&SearchFromTop=1&catalog=

2、组合关键字

(1)、无特殊字符
搜索关键字:macbook 苹果

url: http://search.dangdang.com/search_mall.php?q=macbook%20%C6%BB%B9%FB

(2)、含特殊字符

搜索关键字:macbook+苹果

url: http://search.dangdang.com/search_mall.php?q=macbook%2B%C6%BB%B9%FB

3、小结

(1)、搜索框没有默认搜索图标(如放大镜);和京东类似,搜索框默认有推荐搜索关键字;

(2)、对特殊字符和中文都进行了编码,从搜索结果的url上可以很清楚地看到;

(3)、搜索结果页面,搜索框内的关键字和前一页用户输入的结果是完全一致的,没有“失真”。

四、QQ商城

1、单个关键字

(1)、英文
搜索关键字:macbook

url: http://shop.qq.com/search/index.html?q_show=macbook&q=macbook&classId=&PTAG=20051.15.1

(2)、中文

搜索关键字:苹果

url: http://shop.qq.com/search/index.html?q_show=%E8%8B%B9%E6%9E%9C&q=%25E8%258B%25B9%25E6%259E%259C&classId=&PTAG=20051.15.1

2、组合关键字

(1)、无特殊字符
搜索关键字:macbook 苹果

url: http://shop.qq.com/search/index.html?q_show=macbook+%E8%8B%B9%E6%9E%9C&q=macbook%2520%25E8%258B%25B9%25E6%259E%259C&classId=&PTAG=20051.15.1

(2)、含特殊字符

搜索关键字:macbook+苹果

url: http://shop.qq.com/search/index.html?q_show=macbook%2B%E8%8B%B9%E6%9E%9C&q=macbook%2B%25E8%258B%25B9%25E6%259E%259C&classId=&PTAG=20051.15.1

3、小结

(1)、搜索框没有默认搜索图标(如放大镜);搜索框默认有搜索使用提示(输入品牌或商品进行搜索)而不是默认搜索关键字;

(2)、对特殊字符和中文都进行了编码,从搜索结果的url上可以很清楚地看到;

(3)、搜索结果页面,和京东类似,搜索框显示的关键字有一点“失真“;

(4)、和其他三个站点不同,QQ商城的搜索结果页面,title始终是“商品搜索结果-QQ商城”,但是它在导航处有当前位置提示,而不是像其他三家将搜索结果的页面title直接变成(含有)搜索关键字;

好了,分析对比就到这里,虽然简单粗暴了一点,但是我发现这种“另类”的比较角度还是蛮好玩的,谢谢您的阅读。

posted on   JeffWong  阅读(1898)  评论(6编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
< 2011年3月 >
27 28 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 1 2
3 4 5 6 7 8 9

I know how to make it works and I want to know how it works.
点击右上角即可分享
微信分享提示