小米商城APP首页全面改版——深度解析（上）

小米商城 APP 的首页作出了全面的改版，这次升级不但在视觉方面追求高端化，更是遵循了“以品为中心”的设计原则，其目的在于通过对布局以及功能进行优化，从而更好地聚焦产品卖点，进而提升用户购买体验，本文会针对小米商城 APP 首页改版的核心思路展开深度解析，涵盖首屏布局的得到优化，头部改版的细节之处，图的作出调整以及设计规范的予以制定。

今年，小米商城 APP 的首页，再度开展了全面的视觉升级工作，在此次升级进程当中，持续秉持朝着高端化设计方向迈进的思路，而且严格依照一项关键的设计原则，也就是“以品为中心”来进行操作。

设计原则 — 以品为中心

在于以品作中心的方面来讲，是不管何种设计形式，都首先去展现产品，全力聚焦至产品卖点，使得购买行为的动力，尽可能最大程度地源于产品价值自身。“以品为中心”这一说法，是在阐述品牌，品牌电商不光乃是销售平台，更是品牌形象的根基所在，从设计着手妥善呈现产品，便是在构建良好的品牌形象。

案例解析首屏布局

在着手首页构思之前，最先要做的事情便是规划首页架构，此情形犹如一艘船的龙骨，具备着至关重要的支撑效能。

小米商城乃是一个自营的品牌电商，此情形有别於淘宝以及京东，因而其首页无法如同淘宝和京东那般呈现出多样化，也未能做成如同大卖场一般 。

小米商城在布局方面得先是高端形态，它要体现出简洁且大方这些特性以求强化品牌的形象，除此而外在施行层面还得匹配日常运营所涵策略且同时达成上述表现趋势和目标。

最终我结合用户日常使用手机的点击热区，做了布局规划。

迎合用户操作习惯，来看首页上半部分，其主要发挥“看”的功能，再瞧首页下半部分，它起到“操作”的角色呈现在那儿，如此这般，产品运营策略就和用户习惯保持一致，进而用户的体验就可以更棒 。

这里进行的是产品展示，其主要的作用在于满足用户去浏览，原因是此处所拥有的点击数据，在行业范围之中至始至终都是处于不高的状态 。

底下的这个模块所在之处为金刚位icon的位置，其承担的作用乃是起到快捷入口这一功能，以此达成满足用户进行快捷找品之际的操作。

在更靠下的地方，便是用于日常进行活动的区域，此地每日都会开展活动，并且该区域还是运营方面最为期望用户能够去点击的地方，因而将其置于用户点击热区里最为具有重要价值、最为关键紧要的位置上。

在首屏的最底下位置 ，那里存在着两个属于自然流量担当的入口 ，将其置放在这个地方 ，能够起到引导用户朝着下方去浏览内容的作用 。

头部改版

先是将旧版的收获地址给去掉，毕竟在此处出现自身的收获地址是没道理的，于顶部出现自身的收获地址，一般而言是即时零售平台，像是卖菜的那种，还有外卖平台， 。

鉴于运营存在多元化的运营需求，顶部增添了Tab功能，此功能最多能够配置三个Tab，其支持gif格式，同时也能够不进行Tab配置。

非进行Tab配置之际，头部图片的高度会跟着适配而缩减，以此确保头部图片合理的间距得以呈现。

当页面朝着滑动的方向移动时，logo不见了，搜索框跟着往左侧拉扯变长，尽可能防止logo显眼的颜色给页面浏览造成视觉上的干扰， 。

Tab能够进行文字配置，也能够进行图片配置，文字输入最多能够达到3个字符，这是由于空间存在限制，要是需要4个字符，那么可以借助图片形式，通过减小字间距来达成。

三个Tab样式

两个Tab样式

两个Tab-动图样式

来看一下接下来图会有的改变，开篇的时候提到了，设计原则是“以品为中心”，所以这次将左右的结构调整成了居中排版，目的在于让产品更加突出。

对于产品展示而言，如果采用左右排版，其视觉表现力较弱，无法很好地拉开视觉表现对比，是因为在顶部增加Tab后，头部变得复杂且元素众多，而居中排版能够有效地强化产品展示 。

去挑选局里头所具有的样式，在其间有着显著清晰不同方向显示力和指向差异程度的表达，其中一个方向是产品所具备的表现突出显著了力量和特质变强大了，标题文案能够呈现出来更长的篇幅，另一个方向是头图被拉高，使得屏幕利用效率下降了 。

不一样颜色深度的图，顶部某个确定的元素，设定了黑色与白色这两种主题，不同亮暗程度的图，能够凭借自身自动识别，进而使用黑色或者白色 。

而且，图里的新品标签，进行了再度设计，从而令其更适配居中排版的样式。

标签存在一个颇为重要的改变，此改变乃是将“上新”替换为“新品”，究其实质不难阐释，起因在于“上新”所给予用户的切实感受并非像“新品”这般直观。

结合大家的情况来剖析一下，“上新”这样一个词汇，它属于动词范畴，其含义是呈现了新的产品，然而却没办法赋予此产品一个径直的新品概念，这是存在原因的，原因在于上新也能够被理解成，在产品下架之后再次进行上新 。

“新品”属于形容词范畴，它的作用在于对产品属性予以形容，这是一种极为直接的表达形式，无需进行解释，用户也无需去理解 。

制定设计规范

制定设计规范当中，在这件事里可以感受得到，小米商城主品手机展示时，居中排版是很友好的，手机常常是好多颜色一排排出排列开来的状态。

并且，针对于那些呈现出细长形态的产品而言，其做到多角度依照次序进行排列，进而能够将产品外观予以充分展示 。

首焦进行改版之后，与此同时还提升了制作的效率，旧版是左右结构，其针对标题的文字长度所拥有的包容程度很低。

因此呢，在旧版的规范里头，对于不同长度的标题是这样的情况，标题的字号还必须得对应着进行调整，这很耗费时间，并且还容易出现错误。

新版采用居中排版模式这种方式，基本上能够满足超过百分之九十五之上的各类标题文案的长度需求，对于副标题而言，也能够呈现出更多的产品所含具有吸引力的卖点或者利益点这些内容。

头图大促期

米粉节，618，双十一，小米发布会，在这些大促期间，头图的形式会有变化，把形式去掉，然后将其改成更具活动氛围的huner（我们的专有名词，糊一脸的意思）。

此外，huner同样能够对gif格式予以支持，在存在着重需要进行强调氛围的情形之下，将会采用动图的形式去进行展示。

重点来了～

我们都清楚，iOS系统的顶部状态栏的高度，相较于安卓而言，是要高上一些的，特别是那些iOS系统中拥有灵动导功能的手机型号，其所占据的空间更是尤为得多。

这个问题致使旧版商城里，两端头图在高度展示方面出现不一致的状况，最终所呈现出来的结果是，当安卓机型展示合适时，iOS机型就会出现有点压头的情况，而当iOS机型展示合适时，安卓机型的间距就会变得很大。

下图所示，同样的尺寸的图素，在两端展示出来的间距不同。

在面对这个问题的时候，新版设计运用技术方案将其予以解决，于设计头图之际，是依据iOS所含的最高高度来展开设计的，随后安卓借助技术方案，来实施顶部裁剪。

下图所示，红色为裁剪区域，针对不同型号手机裁剪高度不同。

当没有Tab时，头部同样裁剪，裁剪更多的尺寸。

如此这般，搜索框跟图里的元素之间的间距，便能够维持相同，huner图和图采用的都是一样的解决办法。

间距相同

发布会直播期间

发布会属于S级直播范畴，它还是公司的关键重要时刻，在这个时候进行售卖货物并非重点所在，重点是小米品牌与用户构建以及加深情感连接的时刻。所以将头图的位置给予直播，与此同时在下方，着手开始布局发布会举办期间所发布的新品，还有相关活动的入口，以此让用户购买变得方便。

小结

这次小米商城的改版被划分成了两个部分，前面说的那就属于上半部分相关内容的总结，而下半部分目前尚未开展上线操作，因此当下是暂时没办法跟大伙进行分享的。

某个竞争对手始终就那在效仿小米商城，小米商城进行改版之后，或许那个竞争对手没过多久便会跟上来，能够起到引领竞争对手的作用，这同样也是一份成果！

那么最后，要是本次分享让您有所收获，麻烦记得去点个赞，并且关注一番哦。紧接着说下，接下来要提到的下面两篇呢全都属于小米商城的改版文章，其中一篇是上次进行的首页改版内容，要是您对此有兴致，那就可以去瞧瞧喔。