苏宁易购商城首页苏宁易购作为国内领先的综合性购物平台,大多数用户都有各自的不同诉求 。无论是有目标性的购物,还是以“逛”为性质的浏览,亦或是看视频看直播性质的娱乐,用户对苏宁易购APP的使用体验都有着不同的希冀,而作为设计者,将这种希冀变成现实便是我们的工作目标 。
文章插图
首页在苏宁易购客户端中扮演着十足重要的角色 。进入首页后,该如何快速的找到想买的商品?该如何找到优惠活动?想看看购买攻略,又该从哪里下手?想娱乐一下,逛逛店铺看看直播,能满足吗?带着问题,一起来看看,这次的苏宁易购首页都有哪些变化吧!
设计思路
首先需要明确的是此次首页改版的几个目标:
- 一平台的角度制定规则,提升首页坪效 。
- 2021淘宝上猜你喜欢首页操作 淘宝猜你喜欢流量怎么做
- 怎样免费在淘宝上开网店 登陆淘宝网首页登录方法
- 讲述苏宁易购自营物流快吗 苏宁易购是什么快递配送
- 两者实力对比分析 苏宁和京东哪个更有实力
- 全面评测其产品可信度 苏宁易购买手机好吗
- 咸鱼运营模式解读 咸鱼网官网首页淘宝
- 苏宁小店加盟规则 苏宁网上店铺收费标准
- 淘宝天天特价玩法解析 淘宝天天特价首页入口
- 全面对比分析两家优势 买苹果苏宁和京东哪个更靠谱
- 两者实力对比分析 苏宁与京东哪个实力强
内容展示空间更立体,主次分明,楼层类别清晰,浏览体验流畅,适当的留白不拥挤 。
首页所有楼层不要单独设计独特性,引导用户侧重内容特色,内容为王,考虑品牌感与品质,品牌更需渗透到整个链路中 。
这也就意味着我们需要从视觉语言上设计出更清晰的楼层和更具有辨识度的分类场景,同时模块更多的考虑支持内容的露出 。
文章插图
当然,在满足用户的同时,更高的留存率与转化率,更有效的品牌渗透也是我们所追求的,毕竟苏宁易购可是我们吃饭的家伙(笑)!
首页在满足用户诉求的同时,还需更多的考虑易用性和情感化,我们不希望只是提供一个冷冰冰的购物工具,而是希望更贴近用户的情感,“温暖购物” 。
设计亮点
梳理产品脉络,优化布局
新版首页加入了头条以及场景化的分类,也同时对首页的布局进行整体的优化 。旧版的视觉问题是小元素较多、楼层分类不明显、拥挤感比较强,所以我们想用新的设计让页面更加整体 。
新版的页面区分和业务紧密集合,除了常见的搜索功能、联版广告、分类导航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也仅需设计一版,无需增加运营成本 。