苏宁易购首页 还有这种操作？苏宁易购首页改版大揭秘！

苏宁易购是国内领先的综合购物平台，大部分用户有不同的需求。无论是有针对性的购物，带着“购物”性质的浏览，还是带着视频看现场娱乐，用户对苏宁易购APP的体验都有着不同的希望。作为设计师，把这个希望变成现实是我们的工作目标。

首页在苏宁易购客户中起着非常重要的作用。进入首页后，如何快速找到想要购买的商品？怎么找特价？想看购买策略，从哪里入手？想找乐子，逛街看直播，能满足吗？带着疑问，我们来看看这次苏宁易购首页的变化。

设计理念

首先，需要明确本次主页改版的几个目标:

从一个平台的角度制定规则，提高首页的效率。

内容展示空房间更加立体，优先级分明，楼层类别清晰，浏览体验流畅，留白适当，不拥挤。

不要在首页各层单独设计唯一性，引导用户关注内容特色，内容为王，考虑品牌感和品质，品牌需要渗透到整个环节。

这意味着我们需要从视觉语言上设计出更清晰的楼层和更易识别的分类场景，同时模块要更加注重配套内容的曝光。

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

在满足用户需求的同时，主页需要更多的考虑易用性和情感性。我们不是想提供一个冷冰冰的购物工具，而是想更贴近用户的情绪，“温暖购物”。

设计亮点

梳理产品脉络，优化布局

新主页增加了标题和场景分类，同时从整体上优化了主页的布局。老版本的视觉问题是小元素多，楼层分类不明显，拥挤感强，所以想让页面与新设计更为一体。

新版中，页面差异化和业务紧密结合。除了常见的搜索功能、联合广告和分类导航图标区，我们在第一个屏幕上放了几个主要的推送模块作为主要产品。其次是场景分类显示区，这个区域根据生活场景对频道和内容进行分类，方便用户浏览。其次是直播和视频，热门市场入口和单品推荐区。我们在区分这些大区域的方式上注重排版的统一。垂直网格用于使垂直对齐严格统一，水平网格则使页面节奏统一，从而提高浏览效率，使层次结构更加清晰。

严格遵循路线布局

更透明的界面

2016年席卷硅谷的“肤色缩减”新趋势有几个特点:

标题字号放大加粗。

图标简化。

黑白界面。

新旧苹果音乐对比

这种设计理念使产品界面摆脱了无用的模块化拼接设计，走向了更加注重整体感和用户感受的道路。当然，app的页面设计要以内容为基础，而不是跟风，但精髓可以借鉴。

CR的设计风格使用了大量的空白，减少了分割线等。，使界面更加清爽。这个主页也借鉴了这个思路，最大限度的减少了分割线的使用，用空白和色块来区分级别。旧版主页发布了更多的频道LOGO字符，使得页面字体更加凌乱。新版使用统一字体，避免体验满意度下降。

图标区域和标题区域仅使用空白来划分功能区域

示例:减少复杂的交互并平铺颜色块

联合版本优化和改编

我们一直在寻找iPhone X的最佳适配方案，希望能支持iPhone X的适配，同时还能减少操作工作量，达到视觉层次的完美。所以改编方案需要支持千变万化的旗帜运作，照顾视觉美感。

我们尝试的第一个方案是把搜索和横幅分开，iPhone X界面用相应的颜色填充顶部多余的长度。该方案的自适应工作量最小，但缺点也很明显:1。顶部高度增加，使得第一屏的内容更少；2.没有身临其境的体验。

方案1

方案1

方案二在iPhoneX上最大限度的保留了沉浸式的氛围体验，同时也让第一屏显示的内容更加丰富。使用切割技术，每个横幅只需要设计一个版本，不增加运营成本。

选项2

选项2

经过考虑，我们认为方案二的视觉风格更有优势，所以最终选择了方案二。

场景分类

从用户的角度出发，我们将频道重新分类为场景。在老主页上很难快速找到自己喜欢的频道入口，但这个主页分为五个场景层:品质潮流、爱购物、爱生活、爱我家、玩金融。用户可以根据场景分类快速找到自己喜欢的内容。

每一层的楼层标题都与场景氛围图集成在一起，楼层中的模块可以作为频道入口和内容展示入口，丰富了展示类型。同时APP会自动记录和分析你的浏览行为，哪些类别更感兴趣，它的位置会更突出地出现在你面前，从而达到千人一面的效果。

对应楼层的VI颜色根据对应场景确定。冷艳低调的蓝色、热情的红色、健康积极的绿色、温暖安静的黄色和高端的地方金色，VI色的运用区分了相应的楼层，同时也表现了这些场景想要表达的情感。

潮汐质量:突出质量和潮汐元素(蓝色)

购买福利:突出福利(红色)

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

精致家居:凸显家居温馨(黄色)

智能金融:突出商业稳定感(本地黄金)

上密下梳布局

经过3屏以上，页面已经属于较低位置，需要更清晰的层次来表达信息，以便用户快速定位。所以我们会降低下层内容的密度，留白让用户快速定位。

同时避免了信息太多，缺乏主次层次的问题。经过调整和比较，我们决定将布局从流行的市场楼层改为一排3个模块，以减少每个屏幕的信息量。

一行4个模块的密度减少到一行3个模块

部件结构

主页需要灵活可替换，所以我们想到了乐高。使用不同模块的“构件”，可以组合各种“形状”。我们还将这种模块化的思想融入到了主页的设计中，让每个模块都可以被替换、编辑和自由组合。这样的设计，不仅可以轻松调整业务框架，还可以满足大推广时期的氛围。

模块化结构，大型游乐设备空

二楼下拉刷新和交互优化

优化原有的下拉刷新交互，增加下拉功能打开二楼。我们对下拉交互的复制和高度进行了优化，希望达到更好的体验。

标签

通过新的设计语言，主页修改满足了产品需求，带来了更好的用户体验。希望年前的最后一版能给你带来耳目一新的主页。