1.0.47

天猫APP首页 史上最大改版的设计揭秘来啦

普通推荐
天猫设计部
站酷推荐设计师
杭州/UX设计师/6年前/10416浏览
天猫APP首页 史上最大改版的设计揭秘来啦普通推荐
天猫设计部

天猫APP的产品设计表达是天猫品牌和消费者的一个核心沟通媒介,我们要让用户在端上的内容消费、购买行为能够感知天猫带来的品牌新主张。

c6a559507333a8012193a3bfe00b.jpg

↓戳视频,快速了解天猫APP有哪些新设计↓


前言

尼尔森中国区总经理韦邵曾在在尼尔森消费者研究报告中说到:随着消费者收入递增,他们越来越希望买到另他们感到愉悦的有品质的商品


消费升级是今年各大电商平台都在热议的的话题,在这个大背景下,作为电商领头军的天猫,一直不断挖掘与迎合消费者的诉求优化产品形态,来更好的契合优质用户对更好生活追求的意愿。

天猫APP的本次升级就是符合这个大背景下的产品体验改造的一个开端


人群消费特征


在改版伊始,我们对目标人群重新进行了定义。天猫APP要更多的服务于品质用户,追求品牌的年轻消费群体。

通过这些用户的一系列购买数据的研究发现,他们更喜欢购买B类商品,更注重购买效率,浏览更少的商品就可以进行决策购买。

因此,商品的展示形态上就对设计师提出了更高的要求:一方面通过各种个性化等手段,让用户更快的定位到自己喜欢的商品;另一方面,通过形式的设计,要帮助天猫商家凸显售卖商品的商品力,让目标用户可以快速get最关键的商品信息来判断是否需要购买。


天猫品牌

f5e559507a0fa8012193a377899c.jpg

5月23日天猫品牌升级发布会盛大召开,天猫slogan正式更名:理想生活上天猫。天猫希望从一个卖货平台的形象逐渐升级成为理解方式的倡导者形象。升级后的天猫和目标人群的消费形象特征所匹配,整体的品牌形象定位更国际化,年轻化,品质化。

这对设计师要求也就成为:天猫APP的产品设计表达是天猫品牌和消费者的一个核心沟通媒介,我们要让用户在端上的内容消费、购买行为能够感知天猫带来的品牌新主张。


电商平台的品质障碍

天猫是一个B2C的电商平台,跟自营电商内容产出和控制上有巨大的差异点。即内容的产出根源在商家手中,展示给用户的商品的信息如商品图等在之前很长一段时间内都是由商家提供平台,平台进行具体展示。商家的设计师水平似乎基本决定了商品展示的最终设计质量。

天猫平台的设计师也逐渐意识到商品内容本身的设计的重要性(比如商品图),如果没有质量强控,对平台的整体设计品质伤害巨大。我们要提升设计品质,仅仅依赖产品框架设计,是不可能实现的。正视并良好解决商品内容质量的障碍,是这次的改版的一个巨大挑战。各品牌质量要拉到一致水平,并且也不能丧失各品牌的特征是必须坚持的内容处理原则。




以上部分都是改版的背景和现实状况,我们在本次猫客首页上分别制定了对应的设计策略。

793f59507461a8012193a332875a.jpg


容器升级

我们认为商品是任何购物性平台与品牌与消费者之间最原始的链接。同时我们也希望能用最简单的方式来降低用户认知成本,不再是一层一层的进入入口,而是能直接触达商品,通过凸显商品本身优势属性,来达到效率购物的目的。

所以在容器升级上主要做了两件事情:框架扁平化与商品坑位升级。


fe9b59507480a8012193a3f908d9.jpg

· 框架扁平化  

新天猫APP从一级导航开始,每一个tab都聚焦一件事,用户认知更清晰。

9a5859507c03a8012193a3bcacbd.jpg

为了加强商品表现力,在容器的信息表达上相较于老版也更加扁平,从复杂错落的入口变为了坑位的组合,结构极为简单。利用大数据推荐精选商品,让用户与商品直接触达。

a625595074e6a8012193a3417413.jpg


· 商品坑升级

在简单易懂的页面框架下,我们重新思考了商品展现以及组合方式。

我们在商品容器上构建明确的分区,制定出稳定的结构,便于理解和记忆,达到能不断的透传商品价值的目的。同时也对商品容器做横向扩展,去满足不同业务及场景的需求。

cbcb59507514a8012193a35e85ac.jpg7777595075e9a8012193a32252ec.jpg



Tmall BRAND强化

大家一起来猜猜哪个是天猫?

(↓从左到右依次为:大众点评、淘宝、天猫、京东)

b78659507627a8012193a330382d.jpg在电商APP界面越来越趋同,以及天猫品牌升级的大背景下。

此次猫客首页改版以“Tmall”为载体一直贯穿,从用户打开APP开始不断强调Tmall,同时把Tmall提升到首页的核心区域并赋予更多情感化及商业化的功能,让用户从第一感官以及认知上知道这是天猫。


5abe59507643a8012193a39fba4a.jpg

· 打开天猫APP,从闪屏到首页

d56b5950765da8012193a3daf3b3.jpg


· Doodle的运用

↓能支持热点事件营销,并结合搜索关键词产生商业价值,成为品牌活动的一个新流量阵地

15da5950767da8012193a3f5c87a.jpg



内容化设计

为了保证整个天猫平台最终呈现给用户的品质,不能仅依赖于产品设计,更应该对内容做优化设计。

以针对商品图优化为例,我们做了两件事情:商品图排版建议与商品打底图强控&白名单。

9edd595076c6a8012193a34db0a8.jpg

· 商品图排版建议

8e37595076d3a8012193a3c16ec8.jpg


· 商品打底图强控&白名单

为了避免首页出现下图左侧情况出现,我们制定了平台商品图规范输入给商家,强控产出:首页所有的商品都保证有一张白底图作为打底素材。同时为了保证优质商家品牌调性及平台丰富度,我们特地组织成了设计师审核小分队,大家一起来人工筛选出那些商品图有自己调性,品质高的商家,为他们开通绿色通道,允许不使用白底图,使用带有品牌特色的商品主图。

这样就不仅保障了平台商品内容的整体品质,也让品质商家保留了自己的品牌调性。

ae5959507719a8012193a32049f7.jpg

↓实施商品打底图强控&白名单后首页图片质量提升效果

1f915950772da8012193a38435aa.jpg


细节打磨

在设计过程中,我们也挖掘了很多体验上的小创新,希望能带给用户更有品质的小惊喜的体验感受。下面举两个例子分享。


· 首焦banner视差

在新banner模板基础上衍生出分层产出即可实现视差及重力感应效果,让整个产品更生动富有细节。


· 新人引导

由于此次改版最大亮点在于商品力的表现上,所以在新人引导这块我们用了轻互动的形式,让用户可以通过小游戏的方式,通过滑动信息模块来感受商品坑每个区块的含义。

57ca5950778da8012193a3156f1a.jpg


3d9859507865a8012193a3817a9a.jpg

首页整个从设计到开发上线的过程背负着很大的压力。就像标题中讲的,这次改版可能是天猫app史上的最大的改版,是面向消费升级的第一次大尝试。在过程中,项目组的每个成员都报了最坏的打算,即使出现极大的反弹,我们也要坚定的往这个方向走。


上线之后,我们也在各个舆情平台上听到了很多用户声音。有很多鼓励的说天猫跟其他电商终于不一样了,也有批评的说那么多入口有些找不到了。我们一边聆听用户,一边在加速进行迭代优化。

大家一定能看到越来越好的天猫APP!


希望大家读完本文,能够了解到我们的设计过程。

也能通过这些设计探索理解天猫app的愿景:做最好的品质购物app。

希望同行业的UED小伙伴们可以多评论,多给建议哦!

:)


c82d59507af9a8012193a354bb19.jpg


219
举报
184
分享
原创文章 UI
声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。
评论
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
登录注册
侵权申诉 企业服务 帮助中心
京网文[2023]1747-060号 京公网安备11010502000501号 京ICP备11017824号-4 京ICP证130164号Copyright © 2006-2024 ZCOOL站酷

代做工资流水公司太原流水公司长春企业银行流水打印大连购房银行流水样本台州打工资流水app截图金华对公账户流水制作长春办理贷款银行流水杭州贷款工资流水 模板佛山工资代付流水开具江门背调流水制作曲靖自存银行流水公司房贷工资流水 打印石家庄贷款工资流水 多少钱淮安入职银行流水代开沈阳房贷工资流水 办理济宁办理对公账户流水沈阳代做转账银行流水天津流水单模板石家庄打收入证明商丘房贷流水公司菏泽个人工资流水徐州工资银行流水价格杭州代开对公账户流水常德背调银行流水报价临沂银行对公流水制作南宁工资证明报价嘉兴代办公司流水威海银行流水电子版报价阜阳工资流水app截图价格烟台签证银行流水 代开烟台制作收入证明香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声卫健委通报少年有偿捐血浆16次猝死汪小菲曝离婚始末何赛飞追着代拍打雅江山火三名扑火人员牺牲系谣言男子被猫抓伤后确诊“猫抓病”周杰伦一审败诉网易中国拥有亿元资产的家庭达13.3万户315晚会后胖东来又人满为患了高校汽车撞人致3死16伤 司机系学生张家界的山上“长”满了韩国人?张立群任西安交通大学校长手机成瘾是影响睡眠质量重要因素网友洛杉矶偶遇贾玲“重生之我在北大当嫡校长”单亲妈妈陷入热恋 14岁儿子报警倪萍分享减重40斤方法杨倩无缘巴黎奥运考生莫言也上北大硕士复试名单了许家印被限制高消费奥巴马现身唐宁街 黑色着装引猜测专访95后高颜值猪保姆男孩8年未见母亲被告知被遗忘七年后宇文玥被薅头发捞上岸郑州一火锅店爆改成麻辣烫店西双版纳热带植物园回应蜉蝣大爆发沉迷短剧的人就像掉进了杀猪盘当地回应沈阳致3死车祸车主疑毒驾开除党籍5年后 原水城县长再被查凯特王妃现身!外出购物视频曝光初中生遭15人围殴自卫刺伤3人判无罪事业单位女子向同事水杯投不明物质男子被流浪猫绊倒 投喂者赔24万外国人感慨凌晨的中国很安全路边卖淀粉肠阿姨主动出示声明书胖东来员工每周单休无小长假王树国卸任西安交大校长 师生送别小米汽车超级工厂正式揭幕黑马情侣提车了妈妈回应孩子在校撞护栏坠楼校方回应护栏损坏小学生课间坠楼房客欠租失踪 房东直发愁专家建议不必谈骨泥色变老人退休金被冒领16年 金额超20万西藏招商引资投资者子女可当地高考特朗普无法缴纳4.54亿美元罚金浙江一高校内汽车冲撞行人 多人受伤

代做工资流水公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化