当前位置: 浙江衢州网首页 > 资讯 > 正文

你看到的手机淘宝,是这样被设计出来的!

你看到的手机淘宝,是这样被设计出来的!

文/ 阿里巴巴无线事业部 设计师 向松自手机淘宝这颗种子被播入土壤起,随着历年版本的演进,详情页始终成为手淘树干的一个重要部分。说其重要,主要体现用户购买商品时都要到此处查看,各个品牌和行业的引流也都是到此汇集已达成GMV的转换,可谓基础交易产品线不可少的一个页面。

文/ 阿里巴巴无线事业部 设计师 向松

自手机淘宝这颗种子被播入土壤起,随着历年版本的演进,详情页始终成为手淘树干的一个重要部分。说其重要,主要体现用户购买商品时都要到此处查看,各个品牌和行业的引流也都是到此汇集已达成GMV的转换,可谓基础交易产品线不可少的一个页面。

你看到的手机淘宝,是这样被设计出来的

历年详情页版本

回归到问题点,再去设计解决问题,从之前版本上找痛点。

比如以往图文详情都是按照PC电脑版的方式,它的缺点是图文没有根据移动端的特性去设计,文字在手机端上看太小看不清,图片整体居左,右侧留很多空余的空白,整体加载兆数过大,浪费用户流量等这样的基础问题。

在比如以往所有BU特色业务都汇集到手淘详情页,而特色业务到详情页都是保持非特色展现方式,用户对品牌是没有认知的,他只会记得这个商品,不会记得这个特色品牌。如果从视觉的角度去切入,把品牌透在详情页中展现,用户逛的同时好品质的品牌就会在他脑海里形成印象,使用户有好感,形成良性循环,促使用户经常来特色品牌挑选心怡的宝贝,提高购买率。

还有单纯从基本视觉组件角度去优化。如文字大小字号多,没有制定对应Style。模块颜色层次表现凌乱,主次不分明,没有抓到重点。组件与文字上下间距没有定制标准,整体看结构不晰。使用写实化图片占用资源包大小,增加详情crash率。没有有序的操作路径,不够连续。使用切图透明大阴影的视觉化表现形式,增加系统风险等基础问题。

由此可看出 “移动端特性” “突出品牌个性化” “极致标准组建” 是我们这次改版的重点。

综上所述,啰嗦了一堆,看下具体都解决优化了哪些?

移动端特性

1合理、实用、客观

我们在上个版本的基础上增高了头图尺寸,让用户在不同手机分辨率下都可以更开阔的查看图片。同时去掉了顶部系统bar的常规展现方式,这样在移动端屏幕上更节省空间,新顶部系统bar满足用户操作逻辑,又可让宝贝更直观的展现,去掉多余修饰性的辅助元素,一切已内容为主。我们经过测试和实验发现,黑色浮层更适合在手淘界面上使用,由于过多商品存在白色与过花哨的宝贝背景展示,白底黑色icon会让用户不易发现返回等操作按钮,从而影响到用户体验,而黑色透明按钮目标性更明确。当用户向上拖动的同时,全局顶部bar在渐隐出来,这样无论用户在详情的任何模块停住,都会返回到上一页面。

2图文详情就得有点移动端的样子

图文详情从此以来体验都欠佳,问题包含文字浏览过小,卖家设计师不知移动端尺寸,编辑成图片,到移动端压缩后文字堆在一起,看都看不清晰。图片不符合手机端特性,尺码图卖家自己编辑成图片造成手机端模糊现象等。此次与商家团队合作,改造了这些用户体验痛点。我们定义好移动端应该准确使用的字号及颜色,开放给第三方设计师及合作伙伴,图片上也进行了定义,避免两端留白的现象,使图片更开阔与适合移动端展示。此次也增加了卖家自营模块的体验,这些模块都是我们定义好,直接给卖家选择使用的,减少了卖家编辑与对技术上不专业的问题。移动端模块上线几个月的时间,新视觉模板化直接引导百万个商品,进一步改善图文详情浏览体验。

3考虑性能与适配

从零开始设计出东西可以是创造,而在已有的基础上创造也是一种设计。拿轮播控件举例,之前我们使用的是手淘全局公共组件,全局的好处是整个APP链路保持统一化,而详情内容居多,头图pageColorControl控件可占304KB,而使用系统默认手淘色系的组件可降到了400Bytes左右,减小接近750倍,视觉样式针对性使用能够提高能,降低crash率。是不是我们没有按照规范标准执行就是错的?设计不仅仅在执行层面,更是在种种限制之下,依然可以用优雅的方法解决问题的人。

新版也降低了宝贝与标题视觉分割阴影高度,降低高度的目的也很明确,过高透明加阴影的视觉形式来做区分会导致系统换算过多,从而使整个详情页浏览卡顿,而直接区分线的方案又会让整个页面分割过于直接,特别是在白色宝贝页面上看会更明显,犹如白色衬衫上有条黑灰色线一样。设计是讲究”平衡”的艺术工作,平衡产品的利益与用户的利益,通过设计在两者之间找平衡点。

你看到的手机淘宝,是这样被设计出来的

突出品牌个性化

一直以来详情始终一个展现形式,产品又不同于运营页面,不需要过多装饰性的展现,他需要有序的。此次我们对详情进行了品牌个性化的突出,突出各个子公司品牌,例如聚划算、天猫国际、天猫超市、阿里去啊、全球精选、非常大牌、淘抢购等特色业务。

其一视觉推进品牌个性化目的是为了让用户从一个品牌入口进入详情后,依然保持品牌的认知性,不会断掉浏览时所属关系。

其二逐步培养用户对品牌的黏性,当用户长时间浏览宝贝页后,会对心怡的商品“品牌”发生化学反应,长尾角度上看,促使用户对此品牌有好感,提升他喜欢的品牌日UV活跃,提升收藏购买GMV。

从几个品牌业务数据来看,聚划算,淘抢购,天猫国际,中国制造,阿里去啊等数据提高显著,各占整体GMV的近2%。天猫超市品牌个性化后成交率竟提升近10%,这一数据还在提升,这就是长尾发生的化学反应。产品设计不止关注功能,更要关注情感。

你看到的手机淘宝,是这样被设计出来的

逐步从首页入口业务品牌筛选后看到,除充值类、社区类等产品外,只要是有独立品牌的业务,都可在详情透出自有LOGO,让用户对品牌感认知更强、信任感提升,帮助业务提升转化率。后续未透的品牌依然可以延续透出。

你看到的手机淘宝,是这样被设计出来的

极致标准组建

做对的事情要比把事情做对更重要。

UI的构成是组件,以往设计好后都没有形成标准化,导致设计开发完后仍觉得有问题在去修改,形成循环,每一次复本的修订都是治标不治本,遵循整体架构视觉统一化,会让事半功倍。垂直业务视觉和开发极致还原标准后,其它开发同学可调用对应标准组件,不用从新开发一套,提升合作效率。

这次改版又顺利与天猫团队共建,以往天猫与手淘详情页业务逻辑一致,但属于两个不同开发,设计,业务团队在支持各自的产品。此次视觉组件化可跨两平台,设计好的视觉交互和开发代码,手淘天猫可通用,形成设计-产品-开发-组件统一性,实现两端用户体验一致性的体验,又能节省人力重复投入产出,提升效率!组件共建后Native图文详情内存减少,从原30兆减小到现在的2兆,性能有了高速提升,成交转化率提高明显。

组件是基础,是标准,是匠人对设计的一种态度。但绝对不是设计本质。而产品用户体验改进恰恰是设计师补拙的。

你看到的手机淘宝,是这样被设计出来的

设计驱动产品创新

设计师不能简单地把自己定位在执行层面上,还要积极主动沟通,推动用户体验的落地和实现。要站在用户和产品的角度去考虑问题。我和我的搭档交互人意同学一起创新了mini detail,它是在头图下拉的基础上增加足迹体验,免去了返回去我的淘宝查看足迹的繁琐操作。同时利用了头图下拉这个手势操作的切合点。从数据上来看,这次推动新设计方案可谓详情页推荐场景内PV最高,日引导成交可以说每天能跟中500万大奖一样。

其次在产品上过多思考可能带来意想不到的发现,比如这次在详情中申请设计专利就是一方面,虽然过多的创新不会应用到产品中,但这也是一种积累。假设很好,实证更好。

你看到的手机淘宝,是这样被设计出来的

你看到的手机淘宝,是这样被设计出来的

其它体验点

你看到的手机淘宝,是这样被设计出来的

业务依然有条不紊排的在每个版本时间段内,设计上来说做对的事情要比把事情做对更重要,非设计其实也是同样道理。宝贝详情依然有体验优化的间,比如宝贝收藏时是否直接可以进行收藏规整分类,与收藏夹打通。在详情中增加评价TAB,避免用户返回评价入口在点评价的繁琐操作等……

结尾

问题、矛盾、解决方案依旧存在人性观点和认可当中......

In me the tiger sniffs the rose.

你看到的手机淘宝,是这样被设计出来的

这篇文章够“干”的吧!想和文章背后的“干”人们聊天?下面有一个二维码,你可以扫扫试试看。

本文来源:阿里味儿

推荐阅读:岳阳之窗

[责任编辑:无]