剁手党也有春天 -- 淘宝 UWP ”比较“功能诞生记

newsmanager UID.978056
2016-06-10 发表

前言

网购已经不再是现在的时髦,而变成了我们每天的日常生活。上网已经和买买买紧密地联系在了一起,成为了我们的人生信条。而逛街一词,越来越多地变成了一种情怀。有时候我们去逛街,要么是为了打发时间,要么是想亲手摸摸商品本身,要么就是想看看不同的商品,放在眼前或者在脑海里比较一下。毕竟现在网上琳琅满目的商品让人眼花缭乱,一次展示一个,看完这个,忘了上一个;看完了最后一个,已经没有力气再打开长长的历史列表一个一个看回去。如果没有石猴的火眼金睛,如何万里挑一,找到自己中意的那个‘它’呢?毕竟我们大多数人,在买自己需要的商品时,往往会因为不同的价格,不同的材质,不同的性能和各种优惠活动而感到头晕眼花。所以,性价比往往成为了一个商品的优劣的代名词。如何在无数的商品中,找到样子喜欢,参数适合,而且性价比高,甚至如果包邮就更好了的的商品呢?还是老话说的好,货比三家!

关键字在于一个“比”,我们怎么比呢?靠脑子?俗话说好记性不如烂笔头,可是一边打开 App / 网页浏览,一边拿纸笔狂写是不是有点两边速度不对等呢?如果 App 本身自带比较功能,那简直是不可描述的感受啊!

所以,在邹老师的大力鼓动和支持下,我们 UWP 版淘宝 App 在不断追赶其他平台 App 完善功能的同时,独树一帜另辟蹊径,(偷偷地)开发了“商品比较”功能,现在已经进入测试阶段,相信不久之后就会和大家见面了。这无疑是在剁手党躁动的六月添的一把好柴火,剁手党的春天没有结束,剁手党的春天来到了!

比较功能雏形

受到用户的建议,和邹老师的鼓动,我们收到了组内第一封关于新功能“比较”的邮件,邮件的标题叫“Innovation for Second Detail Views”,Innovation 这个词瞬间点燃了笔者那颗不安分的悸动心灵,于是笔者抱着“我不下地狱谁不下地狱”的心情开始了这一次颠簸的创新之旅。

最初,我们对比较功能是这么要求的

“领导说,要有第二窗口,于是有了第二窗口”

--《 UWP 创世纪1:3》

随后的细节包括:

Quote1) 始终为窄屏模式
2) 最多允许三个(此数量可以配置)商品同时比较
3) 不能下单,只能放入购物车
4) 可以聊天,但是需要启动独立旺信
5) 可以删除
6) 可以看图文详情
7) 可以看用户评价

嗯,说来就是几行字,背后程序员千行汗啊……单说入口的比较图标,我们就从字体库中找寻了四种方案进行比较:

***附件停止解析***

领导一拍大腿,第三个好,就它了。当然我也喜欢第三个,有用放大镜努力查找两个东西的不同的感觉。同时入口的名称正式定为“去比较”。

很快,我们就写好了比较功能的最初雏形:

***附件停止解析***

看,小时候的“比较”页面长这样。就连标题栏都和“妈”的颜色不一样,有着浓厚的隔壁老“微软”家主题血统。

这个页面仅能实现从主窗口加比较进入第二页面,还有很多bug,随便点一点就会闪退。页面详情也是直接套用的原来的详情页面,随便点击就有可能无法跳转回来。同时也没有删除比较的功能,而是用的循环替代的方法,满了就把最早的一个页面替换掉。

千锤百炼出深山

初版的功能虽然简陋,但是由于和领导脑中的草图吻合,所以倒也得到了“看起来还不错”的好评。同时提出了替换算法的雏形,这个算法,也一直沿用至今:

Quote1)整个窗口商品左对齐,一旦有空位,右边的商品向左补位
2)用户可以选择删除某个待比较商品
3)一旦满了,再添加的话用户决定替换掉哪一个

所以我们再接再厉,对着这个比较页面又捶打了一阵,给出了第二个可以供内部试用的版本。

在这个版本中,页面框架和现在基本一致:

***附件停止解析***

颜色也变得像爹妈的颜色了,同时有了中间的分割框。

没有填满的空位会提示用户继续添加,也提供了跳转主窗口的按钮。

商品的添加,删除也符合刚刚提到的算法。同时我顺手应用了一下商品换位的 API,自作主张地添加了一个按钮放在两个商品之间,可以交换相邻商品,这样用户可以任意把原先隔开的商品放在一起比较了。

***附件停止解析***

当商品满了的时候,继续添加会弹出窗口问用户要替换哪一个。之所以我们没有给用户“后悔”的选项,即哪个也不想替换的“取消”选项,是考虑到一个对话框三个按钮已经很多了,毕竟我们程序员也常常面对着一个拥有“Continue”,“Abort”和“Ignore”的窗口一头雾水,根本不知道改点谁,我要是再加入第四个按钮,用户光读按钮就得读半天,大大降低了剁手的效率。

每个单独的页面包含以下功能:

Quotea. 图片
b. 标题+分享
c. 价格信息,各种快递信息和促销信息
d. 商品规格选择(并可添加购物车)
e. 商品参数
f. 宝贝评价(可跳转全部评价并返回)
g. 商店信息(只可读,不可跳转)
h. Bar:内含客服(跳转独立旺信)+收藏+移除比较
i. 加入购物车功能


这一功能和之前的需求是吻合的。所以这一版本顺利进入内部进行测试。

三胞胎变双胞胎?

这个版本经过试用后,我们收到了很多有用的反馈和一些 bug 的报告,其中大多是样式的调整,我就不在这里赘述了。其中有两个比较有意思的问题:

1. 重复商品提示

2. 子窗口的最小宽度能不能大一些
重复商品提示,一个看似简单但是实现起来到处都是坑的问题。首先,从不同地方打开的商品传递过来的商品 id 这一参数位置各异,例如,主页打开的商品和收藏夹打开的商品传递过来的商品 id 就不一样,主页的商品 id 在一个 dictionary 格式内,而收藏夹的 id 就是参数本身。所以都要一一做判断。最难的还是从三个页面中找到各自的 id。三个页面在三个 Frame 中进行导航,而获取这种 Frame 页面中的内容是个复杂的问题。不要问我怎么做的,反正很厉害就对了!具体实现还请移步参考这篇满是干货的文章:从淘宝 UWP 的新功能 -- 比较页面来谈谈 UWP 的窗口多开功能

子窗口的宽度是个我一直没有解决的问题,因为不管我怎么设定子窗口都不听话。所以我不得已查阅了官方手册,发现了一个震惊的事实:

“窗口的最小宽度的最大值是 500 x 500 像素,超过这个尺寸的将会被强制设定到界限内。”(ApplicationView.SetPreferredMinSize | setPreferredMinSize method)

所以不管我怎么努力,窗口的最小尺寸也只能是 500 x 500。可是这个尺寸下,三个商品挤在一起会十分难看。所以领导想了一个终极绝招:杀人!

当然不是杀我,是要把三个比较窗口中的一个杀死,三胞胎变双胞胎!当然只是在宽度不足的情况下才会这么做,只要窗口够宽,三兄弟还是可以一起愉快地玩耍的。

***附件停止解析***

别了,三胞胎。

***附件停止解析***

欢迎你们,双胞胎。

我为双胞胎设定的门槛是 768 像素,只有大于 768 像素的宽度才能激活三胞胎模式。之所以设定为 768,是因为很多平板的尺寸是 1366 x 768,当他们竖过来使用时,这个宽度对于三栏比较来说有点局促,所以适合双栏,大于这个宽度的,比较适合三栏比较。

三胞胎与双胞胎互相转换,自然会带来许多问题:

a. 三变二的时候:第三栏怎么办?删除?隐藏?添加新的时候是否与他比较是否重复?前两栏空了他是不是补位?

b. 二变三的时候:原来的第三栏怎么处理?前两栏有空位怎么办?

经过不停的试验和思考,最后的处理方案是:

a. 三变二的时候:整个第三栏隐藏。如第三栏原来有商品,仍保留但不显示。双栏添加重复提醒时,第三栏不参与比较是否重复,只比较前两栏是否有重复。删除前两栏的内容,第三栏不会向左补充。也就几乎等于,第三栏完全隐身。

b. 二变三的时候:若第三栏在消失前有商品内容,则显示回来。如果此时第一栏或第二栏不满,则第三栏自动填充过来。

就这样,我们让双胞胎和三胞胎和平共处。

一只红杏出墙来

至此,比较功能通过内部测试,提交到测试人员那边去了。我们内部憋出的这朵红杏,终于可以出墙了。关于这个新功能——商品比较,每个人都有话要说,可能也有问题想问。大家稍安勿躁,静一静先,就让我们来慢慢介绍一下我们商品比较新功能的细节。我们可以和网页版做个对比,简单介绍一下我们新出炉的比较功能:

比较的入口

“欢迎,哈利,欢迎来对角巷”

——鲁伯·海格在哈利·波特第一次来到对角巷时说道

我们也要欢迎大家来到“比较”功能的入口。对角巷由于魔法界不为人知的秘密,建造的十分幽闭十分难找。但对于我们的新功能来说,可不能这样。我们先来看看淘宝 Web 页面比较入口的位置:

***附件停止解析***

是不是很不起眼呢?最可气的是,点了以后,还要再点一下下图的“加入对比栏”按钮,才算是加入了对比功能。

***附件停止解析***

所以我们在 UWP 的淘宝 App 中,特地认真地考虑了这个问题,下定决心要简化这个步骤,同时让“比较”的入口醒目!因此大家以轻松的在 App 的详情页里找到“比较”功能,而且为了让更多人看到这一新功能,我们特地将它用淘宝的主题橙色高亮。

UWP:

***附件停止解析***

是不是比网页版的更加明显呢?点开商品详情,就很容易发现。从此再也不用担心找不到比较按钮啦!插一句题外话,最早我们是打算为了推广这个功能,把按钮放在左数第一个的。但是在实际摆放的过程中和实际使用中发现,放在右边数第一个点起来更加顺手,而且贴近“加入购物车”这个让无数剁手族心动又心痛的按钮的话,其实更容易被大家所注意到。所以我们就特地沾了一下“买买买”的光,把比较功能的按钮放在“加入购物车”旁边了。

“比较”的比较

有人要问了,淘宝网自己也有比较功能,那 UWP 版的强在哪里呢?

我们先来看一下网页版的比较内容:

***附件停止解析***

可以看到,网页版的比较内容都是一些非常通用的商品属性,例如价格,邮费,评价,店家信息等。但是唯独缺少了用户最最需要的“商品参数”和“用户详细评价”。作为“死理性派”,我可不会去相信商家天花乱坠的说辞,我更相信冰冷的参数背后的残酷的真实,所以如果没有商品参数,我怎么能了解我买到的商品呢?而用户评价更是建立用户与商家之间信任的最关键的纽带(即使很多商家喜欢买水军来刷评论)。所以为了弥补这些缺点,如前文所说,我们的比较页面拥有这些内容:

Quotea. 图片
b. 标题+分享
c. 价格信息,各种快递信息和促销信息
d. 商品规格选择(并可添加购物车)
e. 商品参数
f. 宝贝评价(可跳转全部评价并返回)
g. 商店信息(只可读,不可跳转)
h. Bar:内含客服(跳转独立旺信)+收藏+移除比较
i. 加入购物车功能

***附件停止解析***

其中最关键的就是商品参数与宝贝评价功能。有了这些参数和评价,我们就可以从冰冷的参数和温暖的话语中,尽可能看到一个最真实的商品。然后对比他们,从而买到最合适的,最具有性价比,(还包邮)的商品。从而剁掉我们的双手。

毕业季的感伤

当淘宝剁掉你的左手的时候,你要把右手也伸给他。

        --剁手之神

终于,“比较”功能可以毕业了,我们作为开发者,就像送别孩子一样不禁也有些感伤。可就在我们准备发布这个剁手党的福利的时候,淘宝方给了两个致命的反馈意见

1. 为什么要开新窗口比较?一个窗口不行么?

2. 为什么要打开独立旺信?

其实这两个选择对我们来说,也是两个艰难的选择。我们也知道一个窗口比较方便(对于开发者来说,两个窗口的线程相互交错简直就是人间噩梦),也知道内置旺信呼叫起来比较方便。但我们之所以做出这两个艰难的选择,也是经过深思熟虑的。

首先,对于新窗口来说,我们主要出于以下三个考量:

1. 第二窗口是 UWP 新加入的功能,是像 Cortana 和 Inking 一样的值得推广的新功能

2. “比较”功能是游离于淘宝主业务链的新功能,新窗口的话不会对原来的功能造成影响,但是用户又急需这个功能

3. 淘宝 Web 端的比较功能是开新窗口比较的,这样比较统一

而且放在一个窗口的话,操作复杂不说,整个 App 的结构也会改动很大,使得用户学习成本高,操作不方便。

而对于“比较”窗口打开独立旺信来说:

1. 使用独立旺信聊天,可以新开一个窗口和卖家聊天,淘宝主窗口和比较窗口不发生任何跳转,用户可以继续比较商品;

2. PC设备本身就是多窗口的设计,窗口之间切换很方便,如果是改为在淘宝内置旺信中聊天,此时想继续添加商品进行比较时,需要从淘宝中退出聊天窗口,再去找到要比较的商品,然后添加比较;

3. 独立旺信中左侧最近联系人始终显示,可以方便的切换当前聊天的商家。

另外,当前的这种实现对之前的设计没有影响,正常浏览商品详情时,和以前一样,在详情页点客服,左侧可以看到商品详情,右侧是和店铺聊天。

所以这其实也是“比较”功能的最终毕业“答辩”。

结语

说了这么多,其实也不知道该结什么语了。如果大家还对“比较”功能感兴趣的话,请关注我们本博文的姊妹篇:***链接停止解析***(Via:***链接停止解析***)

标签: 淘宝

敬告:
为防止不可控的内容风险,本站已关闭新用户注册,新贴的发表及评论;
你现在看到的内容只是互联网用户曾经发表的言论快照,仅用于老用户留存纪念,且仅与科技行业相关,全部内容不代表本站观点及立场;
本站重新开放前已针对包括用户隐私、版权保护、信息安全、国家政策在内的各种互联网法律法规要求,执行了隐患内容的自查、屏蔽和删除;
本站目前所属个人主体,未有任何盈利安排与计划,且与原WFUN.COM所属公司不存在任何关联关系;
如果本帖内容或者相关资源侵犯到您的合法权益,或者您认为存在问题,那么请您务必点此举报或投诉!
全部回复:
新年礼物 UID.72107
2016-06-10 使用 Lumia 950 XL 回复

不错的功能

.叫無鈳取玳. UID.121651
2016-06-10 回复

不知道是笔记本没有触摸的原因还是啥的,聚划算页面一直没法用

白色梦想 UID.1314666
2016-06-10 使用 Lumia 640 回复

看着不错

石油****大亨 UID.1177877
2016-06-10 使用 Lumia 735 回复

支持一下

lishengzuiku UID.313862
2016-06-10 使用 Lumia 640 XL 回复

这个功能确实不错,支持

7nanren7 UID.1143004
2016-06-10 使用 Lumia 640 XL 回复

支持。不错的功能。

mi****by UID.865115
2016-06-10 回复

就差支付宝了

fw374164352 UID.936056
2016-06-10 使用 Lumia 950 回复

就差支付宝了

网易****P版 UID.1313434
2016-06-10 使用 Lumia 930 回复

中关村这功能早就有了

凤凰****P版 UID.1238372
2016-06-10 回复

这个可以有

我要软妹 UID.1144232
2016-06-10 使用 Lumia 1520 回复

非常不错的功能

凤凰****P版 UID.1238372
2016-06-10 回复

什么时候出支付宝?

wba186 UID.1001216
2016-06-10 使用 Lumia 1520 回复

咸鱼呢?赶紧开发咸鱼网吧

seman638 UID.1186988
2016-06-10 使用 Lumia 640 XL 回复

越来越好,充满不想失望的期待。

君莫停 UID.1148062
2016-06-10 使用 Lumia 950 回复

越来越好…

sa****66 UID.1149757
2016-06-10 回复

希望能增加繁體中文

ぺ龍吟月。 UID.615254
2016-06-10 回复

怎么看这意思安卓和苹果的淘宝客户端没有比较功能吗?

旦夕朝暮 UID.1390426
2016-06-10 使用 Lumia 930 回复

淘宝里面的 聚划算也是天天提示客户端

tz****09 UID.994116
2016-06-10 使用 Lumia 950 XL 回复

支持。。。。。。

小严严 UID.1170377
2016-06-10 使用 Lumia 830 回复

服了。。。。

孙背心 UID.2785040
2016-06-10 使用 Lumia 950 XL 回复

如此用心,夫复何求!支持!

瘦灯禅心 UID.1313355
2016-06-10 使用 Lumia 1520 回复

我一直都在期待春暖花开

be****ee UID.524072
2016-06-10 使用 Lumia 1520 回复

试试看看吧,希望w10m雄起

techie UID.1367159
2016-06-10 使用 Lumia 830 回复

不错,但看来主要针对pc,移动版的屏幕分布应该很不一样。横屏一样可以,但是竖屏呢?左右滑动?还是其他的方法,还是和现在看图片一样,点击后出现新界面,下方下图,上方大图或者详细信息?

石****子 UID.1163693
2016-06-10 使用 Lumia 920T 回复

比会议

CH****钟桑 UID.1170781
2016-06-10 使用 Lumia Icon 回复

我现在买东西付款时一般都使用uwp的淘宝(做贡献),浏览东西时还是ipad上方便一点

圣****f UID.1334629
2016-06-10 回复

支持平板pc了,以前看得非常蛋疼

wyphen UID.611925
2016-06-10 使用 Lumia 1520 回复

邹老師啥時候能出手打救下鹹魚和京東啊?淘寶做到這份上也就夠了。。。

凤凰****P版 UID.1238372
2016-06-10 回复

期待!

jod****178 UID.1288857
2016-06-10 使用 Lumia 920 回复

谢谢分享!虽然我不用淘宝

8****6 UID.1340762
2016-06-10 回复

心疼邹越

夏王窦逗 UID.52878
2016-06-10 回复

太厉害了,我爱你们,辛苦啦。。。刚才有买了好几百。。。

00789 UID.136379
2016-06-10 使用 Lumia 950 XL 回复

上帝说要有咸鱼,你们什么时候做?

lin127 UID.49544
2016-06-10 使用 Lumia 1520 回复

这个功能是针对电脑或平板的吧。。

zjw****ywh UID.1347502
2016-06-10 使用 Lumia 1520 回复

期待咸鱼咸鱼咸鱼

爱笑****胖子 UID.999501
2016-06-10 使用 Lumia 640 XL 回复

强烈支持!

plineworld UID.1163538
2016-06-10 使用 Lumia 640 回复

慢慢来 面包都会有的

treehai UID.1278687
2016-06-10 使用 Lumia 640 回复

第一个最像比较,但是3个圈圈就够了。

fh****yd UID.1249021
2016-06-10 使用 Lumia 1520 回复

聚划算一直很卡顿

大明二代 UID.1149444
2016-06-10 使用 Lumia 638 回复

够了够了,请开发支付宝吧

2016-06-10 使用 Lumia 1520 回复

主页的热门市场里的更多,点击进入就是一张图片,各种分类都不能点击,还有聚划算就是图片,进入什么反应都没有

zeroshiki UID.351478
2016-06-10 使用 Lumia 950 回复

可以吸收一些交互设计的思路,值得借鉴

海浪风中 UID.914815
2016-06-10 使用 Lumia 950 XL 回复

支持,辛苦了

凤凰****P版 UID.1238372
2016-06-10 回复

比京东好多了

snogxp UID.24875
2016-06-10 回复

本帖最后由 snogxp 于 2016-6-10 21:00 编辑

精神可嘉,但是,这又是通用应用一个无法回避的问题,在手机上你是要极端的简化操作,在PC上因为鼠标键盘的特点,再复杂的操作也是可以理解的,结论就是:我就不说什么了,我要是说出来,一堆洗地党就会冲过来了,你这个喷子,专门黑我大微软,和通用应用。

adamziyun UID.992625
2016-06-10 使用 Lumia 830 回复

好!强烈支持!

凤凰****P版 UID.1238372
2016-06-10 回复

为开发者点赞!

凤凰****P版 UID.1238372
2016-06-10 回复

支付婊和咸鱼!

gmd****010 UID.1372038
2016-06-10 使用 Lumia 1520 回复

人家有心分享开发经历,大家至少应该给个赞呀,就不要说什么开发支付宝闲鱼的话了,人家开发者听了多伤心

wp****un UID.1235141
2016-06-10 使用 Lumia 640 XL 回复

回帖是一种美德

J****y UID.1292220
2016-06-10 使用 Lumia 640 XL 回复

加油,谢谢你们

liuy****un18 UID.830542
2016-06-11 使用 Lumia 1520 回复

把闲鱼和支付宝做了吧 淘宝做的真不错

HavokPro UID.1198128
2016-06-11 回复

希望有更多的这类开发新闻。。

凤凰****P版 UID.1157005
2016-06-11 回复

但是UWP还没体验过。。。。

凤凰****P版 UID.1238372
2016-06-11 回复

可惜没有支付宝!

NgDilim UID.981261
2016-06-11 使用 Lumia 950 回复

Quotesnogxp 发表于 2016-6-10 20:58
精神可嘉,但是,这又是通用应用一个无法回避的问题,在手机上你是要极端的简化操作,在PC上因为鼠标键盘的 ...


針對不同設備特性功能差異化并不影響「通用」,反而可以説是更好地實現「通用」

btcjs UID.49127
2016-06-11 使用 Lumia 1520 回复

楼主超努力,感谢你

凤凰****P版 UID.1238372
2016-06-11 回复

支持

凤凰****P版 UID.1157005
2016-06-11 回复

作为WP手机,surface的用户,并无使用某宝的需求。况且,既然选择了windows,放弃一个充斥缺乏品质保证商品的平台,又何妨!

christ.mole UID.147560
2016-06-11 回复

Quote酷瞎子 发表于 2016-6-10 13:50
把闲鱼也给做了吧


支持,支付宝暂时不行,先开发咸鱼,这个用的还比较多。

深蓝de蓝色 UID.1085715
2016-06-11 使用 Lumia 830 回复

你们做的太棒了,很认真的说。向你们学习这种态度!

网易****P版 UID.1313434
2016-06-11 使用 Lumia 1520 回复

不错,这个有创意

正版蔡旭 UID.1351613
2016-06-11 使用 Lumia 928 回复

求加入淘宝头条

fengshu188 UID.2584959
2016-06-11 回复

w10不断向好,心里阴暗者不断被煎熬,唉,自虐倾向何苦{:3_97:}

凤凰****P版 UID.1238372
2016-06-11 回复

我一般都做游客,很少评论,但我不得不为邹老师点个赞!

w****0 UID.2831200
2016-06-11 使用 Lumia 640 回复

召唤支付宝

网易****P版 UID.1313434
2016-06-11 使用 Lumia 950 回复

感谢为wp做出的贡献

本站使用Golang构建,点击此处申请开源鄂ICP备18029942号-4联系站长投诉/举报