小米商城APP首页进行了全面改版，此次升级不仅在视觉上追求高端化，更遵循了“以品为中心”的设计原则，旨在通过优化布局和功能，更好地聚焦产品卖点，提升用户购买体验。本文将深度解析小米商城APP首页改版的核心思路，包括首屏布局的优化、头部改版的细节、banner图的调整以及设计规范的制定。今年小米商城APP首页，又做了全新视觉升级，本次升级依旧秉承走高端化设计，并且遵循了一个重要的设计原则“以品为中心”。设计原则 — 以品为中心以品为中心就是，任何的设计形式，都优先表现产品，聚焦产品卖点，让购买行为的动力，尽最大可能产生于产品价值本身。“以品为中心”就是在表达品牌，品牌电商不仅仅是销售平台，更是品牌形象的基地，从设计出发做好产品展示，就是在建立好的品牌形象。案例解析首屏布局开始首页设计前，第一件事就是设计首页布局，这就像一条船的龙骨，有着至关重要的支撑作用。小米商城是个自营的品牌电商，与淘宝、京东不同，所以首页不能像他们那样多样化，做成一个大卖场。小米商城布局上首先要高端，简洁大方，强化品牌形象，同时还要满足日常运营策略。最终我结合用户日常使用手机的点击热区，做了布局规划。结合用户操作习惯，首页上半部分主要是“看”的作用，下半部分是“操作”，这样产品运营策略与用户习惯相符，用户的体验会更好。banner上的产品展示，主要满足用户浏览，因为这里的点击数据在行业里一直不高。下面的模块是金刚位icon位置，承载作用是快捷入口，满足用户的快捷找品操作。再下面就是日常活动区，这里每天都会有活动，也是运营最希望用户能点击的地方，所以放在用户点击热区最为黄金的位置。首屏的最下面，是两个自然流量担当入口，放在此处，可以引导用户向下浏览内容。头部改版首先去掉旧版的收获地址，因为这里出现自己的收获地址没道理，在顶部出现自己的收获地址，通常是即时零售平台，比如卖菜的，外卖平台。为了满足运营多元化的运营需求，顶部新增了Tab功能，最多可配置三个Tab，支持gif格式，也可以不做Tab配置。不做Tab配置时，头图高度会随之适配缩减，保证头图合理的间距呈现。当页面向滑动时，logo消失，搜索框随之向左侧拉长，尽量避免logo突出的颜色对页面浏览产生视觉干扰。Tab可配置文字，也可配置图片，文字最多可输入3个字符，原因是空间有限，如需四个字，可以通过图片形式，减小字间距实现。三个Tab样式两个Tab样式两个Tab-动图样式接下来看一下banner图的改变，开篇说到了，设计原则是“以品为中心”，所以banner此次把左右的结构调整为居中排版，目的就是让产品更突出。居中排版不仅能强化产品的展示，同时也因为，顶部增加Tab后，头部变得复杂元素众多，左右排版的banner，视觉表现力弱，并不能很好的拉开视觉表现对比。选择局中的样式，优缺点都非常明显，优点是产品表现力变强了，标题文案可以展示更长，缺点就是头图拉高，降低了屏效率。对于不同颜色深度的banner图，顶部元素制定了黑白两种主题，不同亮暗色的banner图，能够自动识别使用黑色或者白色。另外，banner图上的新品标签，做了重新设计，使之更加匹配居中排版的版式。标签有个很重要的改变是，把“上新”改为“新品”，原因很简单，“上新”没有“新品”给用户的感知更直接。跟大家分析一下，“上新”这个词，是个动词，他的意思上了新品，并不能给予这个品一个直接的新品概念，因为上新也可以理解为，下架后重新上新。而“新品”是个形容词，他就是在形容这个产品的属性，是一种很直接的表达方式，不用解释，用户更不用理解。制定设计规范从制定设计规范中，能够感受到，居中排版，对小米商城的主品手机的展示非常友好，手机通常是好多种颜色一排排列。另外，对于细长的的产品，还可以多角度依次排列，充分展示产品外观。首焦改版后，同时还提高了制作的效率，旧版左右结构，对于标题的文字长度包容性很低。所以在旧版的规范中，针对不同长度的标题，标题字号还得对应调整，非常耗时间，而且容易出错。新版居中排版，基本满足95%以上的标题文案长度，副标题也可以露出更多的卖点/利益点。头图大促期米粉节、618、双十一、小米发布会，在这些大促期，头图的形式会有变化，去掉banner形式，随之改为更有活动氛围的huner（我们的专有名词，糊一脸的意思）。另外，huner也支持gif格式展示，当需要重点强调氛围时，会用动图的形式来展示。重点来了～我们都知道，iOS的顶部状态栏高度，比安卓要高一些，尤其iOS有灵动导的手机型号，占据的空间尤为多。这个问题导致在旧版的商城，两端头图高度展示不一致，最终呈现的结果就是安卓合适，iOS就有点压头，iOS合适，安卓间距就会很大。下图所示，同样的尺寸的图素，在两端展示出来的间距不同。针对这个问题，新版设计通过技术方案解决了这个问题，设计头图时按照iOS的最高的高度来设计，然后安卓通过技术方案，做顶部裁剪。下图所示，红色为裁剪区域，针对不同型号手机裁剪高度不同。当没有Tab时，头部同样裁剪，裁剪更多的尺寸。这样一来，搜索框与图中的元素间距，就能保持一致，huner图与banner图都是同样的解决方案。间距相同发布会直播期间发布会是S级直播，也是公司的重要时刻，这时卖货不是重点，而是小米品牌与用户建立/加深情感连接时刻。所以头图的位置让给直播，同时下方，开始布局发布会期间，发布的新品，以及相关活动入口，方便用户购买。小结此次小米商城的改版分为两部分，以上是上半部分的总结，下半部分还没有上线，所以暂时还不能与大家分享。某友商一直在致敬小米商城，小米商城改版后，也许某友商用不了多久就会跟上，能引领友商，也是一种成绩！最后—本次分享有收获记得点个赞，关注一下。下面两篇也是小米商城的改版文章，其中一篇是上次的首页改版，有兴趣可以看看。本文由人人都是产品经理作者【吴星辰】，微信公众号：【互联网设计帮】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。题图来自Unsplash，基于 CC0 协议。