赞助商
立即赞助

如何做好电商类App?来看这份对新版淘宝的设计思考!

UI设计3年前 (2021)更新 流光
2.1K 0 0

电类 App 是常使用频次非常高的应用,它们的每一次更新改版不仅是业务的拓展、用户需求的满,同时也是消费趋势的引领与跟随。

近淘宝 App 的许多页面都了较的改动,分析淘宝改版的基础上,通几个关键页面的分析对比淘宝、京东、苏宁易购三大综合类电平台的产品设计,希望此篇文章能让大家对电类 App 的产品设计有更深的认识。

一、淘宝改版

前阵子淘宝进行改版,次改版循序渐进,并做的 A/B 测试。

1. 主要改版页面

如何做好电商类App?来看这份对新版淘宝的设计思考!

上图是淘宝几个主要改版页。从视觉上看,很明显大圆卡片、去线条,体风格统轻质化。大圆卡片追随了 iOS11 风格(App Store 尤为突出),卡片使信息更加聚焦,模块感更强;圆卡片本身也比原先卡片增加了更多细节;大圆卡片亲和力高,更加活泼,也符合淘宝群定位。

如何做好电商类App?来看这份对新版淘宝的设计思考!

上图为5个 tab 页,这统了头部颜色,强调了品,统性也到了提升。

以下是从单个页面的角度进行改版分析。

2. 个人首页

如何做好电商类App?来看这份对新版淘宝的设计思考!

△ 旧版图为除夕截图,颜色先不讨论

新旧版的对比,以看出88、卡券包优先级提高,信息更加集中、突出。也印证两年机的火热,拉新成和难度越来越高的情况下,巩固老用户才能带来更的价值。

新版的卡片式很突出,去掉了部分的线条,转用块面替线条表达层级关系。

「的订」部 icon 式发生了变化(7. 7. 2 版),从填充式转变为线条式,突出了 icon 右上角的数字,但这一点在测版本中改回来了(后面讨论)。

88会员和最物流这两容滚呈现,真正是效解决问题,从时间轴来解决信息量大而空间限的问题,同时态效果增了户吸引。

如何做好电商类App?来看这份对新版淘宝的设计思考!

在测试版中,这个页面要看到两个点的变,一个是 icon 改为原来的填充式,一个是效滚的节奏。

icon 问题个猜想是为体量与要性、位问题,线条体量弱于填充。在「我淘宝」页,最要信息是「我订单」,此需要定突出。另在测试版里,「我订单」上固定广告位放了旅青蛙广告,此位突出性导致其弱化了底下「我订单」,占用了原先「我订单」 C 位,此测试版考虑到更全场景(有广告),从而将 icon 样换回了体量大填充。

如何做好电商类App?来看这份对新版淘宝的设计思考!

动效滚动是上说88会员和最新物流,7. 7. 2版本里两个滚动是时进,而7. 7. 8测试版两个滚动是开。上下时滚动会让有些混乱,会让认为这两块信息是相互关联。

3. 店铺首页

如何做好电商类App?来看这份对新版淘宝的设计思考!

这一做的 A/B 测试。店铺页面的改较大,导航做了较大调整。版将操作和重要功放到了固定;二级导航中的容商自定义择,从而满足同店铺的需求;版一级二级导航较旧版层级系明确了许多。

再来说说这 A/B 测试,这测试时比较长(从7. 7. 2到目前7. 8. 2都在,目测到8. 0应该会出个结)。店铺页在导航上大改动,会在定程度上已经形成习惯用户造成冲击,页新适应和学习,有类似于前摄抑制(在认知心理学上指前学习过材料保持和回忆以后学习材料干扰作用)。新版设计目是便用户初期快速学习,是后期快速使用。于后期快速使用需要段时铺垫来获数据。该测试应该是区分各不用户,简单来说测试新用户、用户分于新旧版本学习,以及他们新版本熟悉后使用。

4. 物流详情

如何做好电商类App?来看这份对新版淘宝的设计思考!

这一可说是样式上的大改。可视来表现包裹正处的位置及即将进行的操作,增强户感知(降低解难),进一步升对商信息的把控感。原先仅仅是字展示而言生了许多,样式接外卖等待中的订单页面。可视固然可展示更多的信息,但是在户非训练的情况信息传递的速未必字要更快,同的人对图形的解会有偏差。过介于外卖 App 的页面已经对很多户进行了,相信这种解上会有太大难。但是依然要在后续优中逐渐突信息的重点。

物流详情页除了样巨大变化,有个特是场景化细分,不场景做出了异化。例如仅仅是物流详情页,根据不场景:发货未揽件 – 已揽件未配送 – 快递员配送 – 到菜鸟驿站/其他快递 – 已签收等,页突出信息均有所区。已揽件时突出快递信息,配送时突出配送员信息等。

如何做好电商类App?来看这份对新版淘宝的设计思考!

从场景细分做异化,让用户获取前最需要信息这件事出发疑是很好,是从上图,仅是快递信息这类信息,出现了三样(如上图),并位也不统。如用户是买了几件不店家商品,这时快递员打电话来说我是XX快递,快递你放在了某某地,这时我想知这是啥商品时候,于是我打开了物流详情,来找快递信息,发现快递信息居然不在原来地图底下了,找了好会才发现放到了快递员下。这个例子也是说在常见场景下获取某个信息时可能需要付出额学习成本。

不在7. 7. 8的测试版中,又将快递信息的样式减为两种,是一种妥协。人认为,场细分出点是的,但在样式和位置两点中,最至少有一点是固定不变的,样才不增加用户的学习成,也能涵盖一小概率场。

5. 动效

如何做好电商类App?来看这份对新版淘宝的设计思考!

如何做好电商类App?来看这份对新版淘宝的设计思考!

这两张图都是店铺页面顶的效,当户向滑页面时,顶的信息会现变,算是细分场景的一种,通过效的方式美过渡,过渡的流畅感会户对该平台增些许好感。

如何做好电商类App?来看这份对新版淘宝的设计思考!

我的淘宝这一页的效解决问题在上面有说到,右边的有好货页面,当户在滑页面时,攻略推荐一栏的图片有依次展现的效果,吸引眼球,小有惊。

结来看,淘宝改版设计度可以结为:设计追随目标,品、会员突出,追随设计趋势,细分场景,可视化展现和流畅动效。另淘宝设计、测试态度上来说,设计解决实问题,设计需要验证,测试要严谨。

二、淘宝与其他竞品

这里选了京东和苏宁易两个与淘宝进了几个关键页比较,以下主要从视觉度谈下有哪些问题,这里几乎不牵扯业务、页跳转等问题。

1. 首页

如何做好电商类App?来看这份对新版淘宝的设计思考!

淘宝:整体看起来没有么硬伤,没有卡片格。

京东:这边也是继淘宝改版后不久改版上线。这边首屏 icon 这块卡片生硬,大有为了卡片而卡片既视感,京东秒杀这块齐度不高,也有些左右轻。「日逛」这装饰性较强风格也与体卡片简洁风格不符。「东家小院」楼层级标题颜色跳跃,大有喧宾夺主感。

苏宁易购:目前还没有改版。掌上抢楼整齐度不高,和京东类似,同时缺少次感,部分有渐变部分没有,非常不统一。「逛」楼视不平衡,而且信息级很有问题。

2. 搜索结果页

如何做好电商类App?来看这份对新版淘宝的设计思考!

风格:淘宝这页用了框设计,省去了分割线,商品图片尺寸较大;从左到右,图片尺寸越来越小,分割线从到细到粗,体效上淘宝和京东效比易好。

标签:在标签的处理上,易购的标签非常强,在页面上非常突出,喧夺主;京东的标签弱化,与淘宝类似,但完不同类的标签样式相同(秒杀与自营),让人得有混乱。

图文编排:淘宝京东都硬伤,比较谐,但易购的图片文字小间距比例不谐,图片与线框无论视觉效果还素都对齐;易购底部配 iPhone X。

3. 分类页

如何做好电商类App?来看这份对新版淘宝的设计思考!

风:淘宝用明显的卡,去条;而京东也用卡,卡感微弱,是为统一而做;易购仍是框区分,整区分效果不佳。

品牌:淘宝京东文字的处理用多的色彩,易购的色彩运用得非常多,削弱品牌感,且任何优势。

4. 商品详页

如何做好电商类App?来看这份对新版淘宝的设计思考!

此页面我仅从节奏感一个角度来看,上图已经标出每个页面的节奏感给我的感受。淘宝整的节奏感比,轻重缓和;京东和易购在节奏感上做的有问题,重节奏之间无轻节奏的和缺乏呼吸感。

5. 购物车

如何做好电商类App?来看这份对新版淘宝的设计思考!

风格效:淘宝没有用卡片风格;京东用了卡片,导致大量留白,时没有带来任何优势,苏宁易体稍显拥挤,没有亮。

图文编排:淘宝整非常和谐;京东图均使用白底,点很持统一;京东使用大量的设计细节,字号、粗细、字、颜等等非常富,但整效果并没有很理想,稍显琐碎与凌乱;苏宁易购的文字大小与间距处理不和谐而带来拥挤感。

其他细节:京东标签不同于搜索结果页的弱化,非常强化,导致视觉焦点混乱,别按钮非常小,操作不便;易购标签处理比京东收敛;易购底部 tab 与其他部分区分,浮框广告,效果不,数修改框的描太硬,比例不谐。

6. 人首页

如何做好电商类App?来看这份对新版淘宝的设计思考!

整风:淘宝和京东是明显的卡式,苏宁易购是义上的卡式。

这里主一易购的问题:首屏出「我的专场」的片不平衡色块非常不合,部分 icon 效果不,另外一些内的 bug。

7. 订单

如何做好电商类App?来看这份对新版淘宝的设计思考!

淘宝和京东的订单页个人认为没有什么硬伤,淘宝有个适的问题。苏宁易购的问题比,首先是顶部「常购清单」中没有品的 bug,是图与购物车等地方的风不符,品之间分割有时有有时无,间距有问题等等。

三、总结

综合上面具页面的分析以看出淘宝在 UI 设计上的优势:追随设计趋势、统一、排版和谐等。

关于统一性这一点,可能人京东的好,因它几乎所页面都用了卡片风,淘宝。人认,设风格次于设目标的,如果这种设风格不能很好满足该页面的设目标,建议还以设目标重;如果仍然强制使用该风格的话,会得不偿失。淘宝的法把卡片这种风格归类轻质化风格,除了卡片以外,还去线条、色块设语言,因此并非强调一使用卡片形式。

会更新一些有关体验计的文章或者其有的没的~欢迎交流~

注作者的微信公众号:「404FoundSpace」

如何做好电商类App?来看这份对新版淘宝的设计思考!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

各位好,我又来讲故事了:一个平静的夏日打开了QQ音乐,开屏视频(背景音乐100分)映入眼帘:「奇怪形状」的ip与粉白背景可可...
QQ音乐
现在 UI市场越来越完善,在以前 dribbble 等不敢想象的风格都逐渐出现在产品中。那么在现在的市场什么样的「设计」是好的设计...
实战案例
提到这个话题有两层不同的讨论方向,在工作中对公司项目进行设计改版和利用业余时间进行自由主题的改版练习。这次我们主要以...
App设计
一、项目背景 百度网盘是百度提供的个人云存储服务,自2012年上线至今,通过强大的技术能力以及承担高额的带宽成本,为7亿用...
品牌升级
喜马拉雅主播等级体系算是喜马各业务线中资历比较老的一员了,主要服务于主播用户查看自身等级,以及特权享受,这次整理了近...
实战案例
郁剑华:回顾对于一个较大型且历史包袱比较重的项目我们是如何去做改版的。 一、背景 · 问题 起点是一个有着16年历史的原创...
App改版
58UXD:对于绝大多数二手车消费者来说,头顶始终有绕不开的三座大山:车况不透明、信息不真实、价格不确定。 山路艰险,好...
58UXD
做设计师这些年,我一直有个类似“闪电侠”的标签——就是在保证一定质量的情况下,出活贼tm快。这个特质最大的好处就是每天可以...
用户体验设计