苏宁易购商城首页设计分析 推荐苏宁易购首页改版内容

哈喽,小伙伴们大家好,今天秦浩废话就不多说了,直接上干货,标题:苏宁易购商城首页设计分析,苏宁易购首页改版内容,还有干货苏宁易购商城首页等等各种精品,希望各位能认真阅读。因为,只有这样才能真正理解和掌握!

苏宁易购作为国内领先的综合性购物平台,大多数用户都有各自的不同诉求。无论是有目标性的购物,还是以“逛”为性质的浏览,亦或是看视频看直播性质的娱乐,用户对苏宁易购APP的使用体验都有着不同的希冀,而作为设计者,将这种希冀变成现实便是我们的工作目标。

苏宁易购商城首页设计分析,苏宁易购首页改版内容,苏宁易购商城首页

首页在苏宁易购客户端中扮演着十足重要的角色。进入首页后,该如何快速的找到想买的商品?该如何找到优惠活动?想看看购买攻略,又该从哪里下手?想娱乐一下,逛逛店铺看看直播,能满足吗?带着问题,一起来看看,这次的苏宁易购首页都有哪些变化吧!

设计思路

首先需要明确的是此次首页改版的几个目标:

  • 一平台的角度制定规则,提升首页坪效。

  • 内容展示空间更立体,主次分明,楼层类别清晰,浏览体验流畅,适当的留白不拥挤。

  • 首页所有楼层不要单独设计独特性,引导用户侧重内容特色,内容为王,考虑品牌感与品质,品牌更需渗透到整个链路中。

这也就意味着我们需要从视觉语言上设计出更清晰的楼层和更具有辨识度的分类场景,同时模块更多的考虑支持内容的露出。

苏宁易购商城首页设计分析,苏宁易购首页改版内容,苏宁易购商城首页

当然,在满足用户的同时,更高的留存率与转化率,更有效的品牌渗透也是我们所追求的,毕竟苏宁易购可是我们吃饭的家伙(笑)!

首页在满足用户诉求的同时,还需更多的考虑易用性和情感化,我们不希望只是提供一个冷冰冰的购物工具,而是希望更贴近用户的情感,“温暖购物”。

设计亮点

梳理产品脉络,优化布局

新版首页加入了头条以及场景化的分类,也同时对首页的布局进行整体的优化。旧版的视觉问题是小元素较多、楼层分类不明显、拥挤感比较强,所以我们想用新的设计让页面更加整体。

新版的页面区分和业务紧密集合,除了常见的搜索功能、联版广告、分类导航icon区以外,我们在首屏放入几个主推模块作为主打产品。紧随其后的是场景化分类展示区,这个区域根据生活场景将频道与内容归类整理,方便用户浏览。其次则是直播及视频、热门市场入口、单品推荐区。这些大区域的区分方式我们注意了排版的统一性,利用纵向栅格使得上下对齐严格统一,横向栅格则使页面节奏统一,以达到提升浏览效率,层级更加清晰的目的。

苏宁易购商城首页设计分析,苏宁易购首页改版内容,苏宁易购商城首页

严格遵循对齐布局

更通透的界面

2016年横扫硅谷的新趋势Complexion Reduction风格,有几大特点:

  • 标题字号加大、加粗。

  • 图标简化。

  • 黑白两色界面。

苏宁易购商城首页设计分析,苏宁易购首页改版内容,苏宁易购商城首页

新旧版Apple Music对比

这一设计理念使得产品界面摆脱了无用的模块拼接式设计,走向了一条更加注重整体感、重视用户感受的道路。当然,app的页面设计应该以内容为准,而不是跟随潮流,但其中的精华可有所借鉴。

CR的设计风格使用大量留白,减少分割线等,来使界面更为清爽,此次首页也借鉴这种理念,尽量减少分割线的使用,利用留白和色块区分层级。旧版的首页由于放出了较多频道的LOGO字符使得页面字体较多,显得杂乱,新版使用统一的字体来避免出现体验满意度下降的情况。

苏宁易购商城首页设计分析,苏宁易购首页改版内容,苏宁易购商城首页

ICON区域与头条区域仅使用留白划分功能区域

苏宁易购商城首页设计分析,苏宁易购首页改版内容,苏宁易购商城首页

例:减少复杂交互,色块平铺

联版优化适配

我们一直在寻找最理想的针对iPhone X的适配方案,希望在支持iPhone X适配的同时,依然减少运营的工作量,并且又能达到视觉层次的完美。所以,适配方案需要能支持千变banner的运作,又要照顾视觉的美观。

我们尝试的第1套方案将搜索与banner分开,iPhone X的界面将顶部多出的长度以对应的颜色填充。此方案的适配工作量最小,但缺点也很明显:1、增加了顶部高度,使得首屏展示内容变少2、没有沉浸式体验。

苏宁易购商城首页设计分析,苏宁易购首页改版内容,苏宁易购商城首页

方案1

苏宁易购商城首页设计分析,苏宁易购首页改版内容,苏宁易购商城首页

方案1

方案2的样式则在iPhoneX上依然最大化的保留了沉浸式的氛围体验,同时也使得首屏展示的内容更多。利用裁剪的技术方式,每张banner也仅需设计一版,无需增加运营成本。

苏宁易购商城首页设计分析,苏宁易购首页改版内容,苏宁易购商城首页

方案2

苏宁易购商城首页设计分析,苏宁易购首页改版内容,苏宁易购商城首页

方案2

经过考虑后,我们认为方案2的视觉样式更具优势,所以最终选定了方案2。

场景化分类

我们从用户的角度出发,重新将频道的分类进行了场景化的区分。旧版的首页很难快速找到自己喜爱的频道入口,而此次首页划分出5个场景化楼层:品质潮流、爱逛街、爱生活、爱我家、玩转金融,用户可根据场景化的分类快速找到自己喜爱的内容。

每个楼层的楼层标题与场景氛围图融合,楼层内的模块可作为频道入口亦可成为内容展示入口,丰富了展示类型。同时APP会自动记录分析你的浏览行为,对哪些品类更感兴趣,其位置就会更加显著的出现在你面前,以实现千人千面的效果。

苏宁易购商城首页设计分析,苏宁易购首页改版内容,苏宁易购商城首页

苏宁易购商城首页设计分析,苏宁易购首页改版内容,苏宁易购商城首页

对应楼层的VI色则是根据对应场景来确定的。冷艳低调的蓝、热情张扬的红、健康积极的绿、温馨静谧的黄以及高端大气的土豪金,VI色的应用将对应楼层区分开来,同时也对应展现了这些场景想表达的情感。

  • 潮品质:突出品质以及潮流元素(蓝)

  • 逛实惠:突出实惠元素(红)

  • 享生活:突出生活的健康(绿)

  • 精致家:突出家的温馨(黄)

  • 智慧金融:突出商务感稳重感(土豪金)

苏宁易购商城首页设计分析,苏宁易购首页改版内容,苏宁易购商城首页

上密下梳布局

在超过3屏后,页面已经属于靠下的位置,这也就需要更清爽的层级来表达信息以便用户能快速定位。因此我们将靠下楼层的内容的密度降低,进行留白以便用户快速定位。

这样做同时也避免首页信息量过大,缺少主次层级的问题。经过调整对比后,我们决定从热门市场楼层开始将布局改为一行3模块的布局,以减少每屏的信息量。

苏宁易购商城首页设计分析,苏宁易购首页改版内容,苏宁易购商城首页

一行4模块密度降低为一行3模块

模块化搭建

首页需要满足机动性、可替换性,由此我们联想到了乐高。利用不同模块的“积木”,可以组合出各种各样的“造型”。首页的设计我们也融入了这种模块化的思维,做到每个模块可替换、可编辑、可自由组合。利用这种设计,不仅可以轻松的调整业务框架,也能满足大促时期的氛围营造。

苏宁易购商城首页设计分析,苏宁易购首页改版内容,苏宁易购商城首页

模块化的搭建,较大的发挥空间

下拉刷新及二楼交互优化

优化原先的下拉刷新交互,增加下拉打开二楼的功能,我们对下拉交互的文案及高度做了优化,期望达到更好的体验。

苏宁易购商城首页设计分析,苏宁易购首页改版内容,苏宁易购商城首页

苏宁易购商城首页设计分析,苏宁易购首页改版内容,苏宁易购商城首页

结语

此次首页改版通过新的设计语言,在满足产品诉求的同时,带来更好的用户体验。希望在年前的最后一个版本,为大家带来一个耳目一新的首页。

好了,今天就说到这里了,希望这篇文章可以帮到你,看完了这篇苏宁易购商城首页设计分析「推荐苏宁易购首页改版内容」还是不太明白的话,建议多阅读几遍。更多相关知识,尽在巢座耶学习网,每天坚持更新!

本文发布者:百事通,不代表巢座耶立场,转载请注明出处:https://www.chaozuoye.com/p/13589.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 jubao226688#126.com 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023年12月2日 14:11
下一篇 2023年12月2日 14:31

相关推荐

  • 淘宝关键词排名查询在哪里看 详细讲解:淘宝宝贝权重怎么提升

    大家好,今天许慧心给大家准备的干货是淘宝关键词排名查询在哪里看,淘宝宝贝权重怎么提升,还有干货淘宝关键词排名查询等等各种精品,这些其实都是一些必备知识,只是有些时候我们没有遇到就没有去了解而已! 一、买家标签 1、买家的特定属性:性别、年龄、星座、地域、淘宝账号等级、淘宝信誉等。 2、买家最近的搜索、浏览、收藏加购、购买宝贝记录等; 3、买家订单属性:产品的…

    百科 2023年10月8日
  • 微信如何解散群聊组 秒懂:群解散和移出群聊区别解答

    美好的1天将要从这里开始啦!今天笔者尤思佳来说说微信如何解散群聊组,群解散和移出群聊区别解答,还有关于微信如何解散群等一系列的内容,希望你认真看完这篇文章后,能充分理解我想表达的意思。相信你很快就能掌握!你离大牛越来越近了! 她觉得自己很委屈,明明没有踢别人,只是活动结束解散而已。她问我,解散群需要注意什么? 这个其实是很多没有经验的群主会遇到的问题,接下来…

    百科 2023年11月5日
  • 三包政策是什么意思 新手必看:服装三包政策新规

    大家好,今天陈炯炜精心为你准备了干货三包政策是什么意思,服装三包政策新规,还有三包政策相关的各种内容,认真阅读完,把我想表达的思路完全理解,相信你很快就可以掌握! 记者注意到,在呼市多家商场内,反季节商品以其低廉的价格优势吸引了不少消费者购买。对此,市工商局工作人员提示,购买反季节商品一定要谨慎,尤其要注意商品的“三包”期限等。 “全场3——5折、羽绒服一律…

    2023年8月16日
  • 目前女孩学点什么手艺赚钱 详细介绍:快速学手机较短时间和费用

    哈喽,小伙伴们大家好,今天孙海粟废话就不多说了,直接上干货,标题:目前女孩学点什么手艺赚钱,快速学手机较短时间和费用,以及女孩学点什么手艺赚钱的一系列相关干货,希望各位能认真阅读。因为,只有这样才能真正理解和掌握! 我成绩不好想考个本科可能不得行,专科读出来也没有意思,不想父母继续这么累了,想高中毕业了就出去打工,但是我什么都不会,也不知道出去打工可以做什么…

    2023年10月24日 百科
  • 淘宝账号信用查询哪里看 详细介绍:免费淘宝查号神器推荐

    哈喽,小伙伴们大家好,今天钱丽红说的这篇文章淘宝账号信用查询哪里看,免费淘宝查号神器推荐,以及淘宝账号信用查询等等相关的各种干货,只要你每天都能来,我就能每天整理一些不错的干货分享给你们! 一、截图查号 截图是最原始的查号方式,我们可以要求买家发送包括账户信息、信誉值(包括购买量)、淘气值、支付宝实名以及花呗等信息的截图,优点就是免费,缺点就是操作上比较麻烦…

    2023年10月8日
  • 相互宝分摊怎么取消 推荐退出相互宝的详细步骤

    首先,祥枫感谢你能坚持经常过来关注我!下面我就来说说相互宝分摊怎么取消,退出相互宝的详细步骤,以及相互宝分摊相关的事项,想要做好首先一定要把基本功练好了,否者是很难持续提升的。 相互宝从分摊几分,到现在分摊一块多,还有增加趋势,不管是好是坏,有人支持,有人喜欢,那么对于想退出的人应该怎么操作呢,祥枫给大家分享下! 1、和取消其他支付宝保险的方式相同,要想直接…

    2024年2月16日