国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

小米商城APP首頁進(jìn)行了全面改版，此次升級(jí)不僅在視覺上追求高端化，更遵循了“以品為中心”的設(shè)計(jì)原則，旨在通過優(yōu)化布局和功能，更好地聚焦產(chǎn)品賣點(diǎn)，提升用戶購買體驗(yàn)。本文將深度解析小米商城APP首頁改版的核心思路，包括首屏布局的優(yōu)化、頭部改版的細(xì)節(jié)、banner圖的調(diào)整以及設(shè)計(jì)規(guī)范的制定。

今年小米商城APP首頁，又做了全新視覺升級(jí)，本次升級(jí)依舊秉承走高端化設(shè)計(jì)，并且遵循了一個(gè)重要的設(shè)計(jì)原則“以品為中心”。

設(shè)計(jì)原則 — 以品為中心

以品為中心就是，任何的設(shè)計(jì)形式，都優(yōu)先表現(xiàn)產(chǎn)品，聚焦產(chǎn)品賣點(diǎn)，讓購買行為的動(dòng)力，盡最大可能產(chǎn)生于產(chǎn)品價(jià)值本身?！耙云窞橹行摹本褪窃诒磉_(dá)品牌，品牌電商不僅僅是銷售平臺(tái)，更是品牌形象的基地，從設(shè)計(jì)出發(fā)做好產(chǎn)品展示，就是在建立好的品牌形象。

案例解析

首屏布局

開始首頁設(shè)計(jì)前，第一件事就是設(shè)計(jì)首頁布局，這就像一條船的龍骨，有著至關(guān)重要的支撐作用。

小米商城是個(gè)自營(yíng)的品牌電商，與淘寶、京東不同，所以首頁不能像他們那樣多樣化，做成一個(gè)大賣場(chǎng)。

小米商城布局上首先要高端，簡(jiǎn)潔大方，強(qiáng)化品牌形象，同時(shí)還要滿足日常運(yùn)營(yíng)策略。

最終我結(jié)合用戶日常使用手機(jī)的點(diǎn)擊熱區(qū)，做了布局規(guī)劃。

結(jié)合用戶操作習(xí)慣，首頁上半部分主要是“看”的作用，下半部分是“操作”，這樣產(chǎn)品運(yùn)營(yíng)策略與用戶習(xí)慣相符，用戶的體驗(yàn)會(huì)更好。

banner上的產(chǎn)品展示，主要滿足用戶瀏覽，因?yàn)檫@里的點(diǎn)擊數(shù)據(jù)在行業(yè)里一直不高。

下面的模塊是金剛位icon位置，承載作用是快捷入口，滿足用戶的快捷找品操作。

再下面就是日常活動(dòng)區(qū)，這里每天都會(huì)有活動(dòng)，也是運(yùn)營(yíng)最希望用戶能點(diǎn)擊的地方，所以放在用戶點(diǎn)擊熱區(qū)最為黃金的位置。

首屏的最下面，是兩個(gè)自然流量擔(dān)當(dāng)入口，放在此處，可以引導(dǎo)用戶向下瀏覽內(nèi)容。

頭部改版

首先去掉舊版的收獲地址，因?yàn)檫@里出現(xiàn)自己的收獲地址沒道理，在頂部出現(xiàn)自己的收獲地址，通常是即時(shí)零售平臺(tái)，比如賣菜的，外賣平臺(tái)。

為了滿足運(yùn)營(yíng)多元化的運(yùn)營(yíng)需求，頂部新增了Tab功能，最多可配置三個(gè)Tab，支持gif格式，也可以不做Tab配置。

不做Tab配置時(shí)，頭圖高度會(huì)隨之適配縮減，保證頭圖合理的間距呈現(xiàn)。

當(dāng)頁面向滑動(dòng)時(shí)，logo消失，搜索框隨之向左側(cè)拉長(zhǎng)，盡量避免logo突出的顏色對(duì)頁面瀏覽產(chǎn)生視覺干擾。

Tab可配置文字，也可配置圖片，文字最多可輸入3個(gè)字符，原因是空間有限，如需四個(gè)字，可以通過圖片形式，減小字間距實(shí)現(xiàn)。

三個(gè)Tab樣式

兩個(gè)Tab樣式

兩個(gè)Tab-動(dòng)圖樣式

接下來看一下banner圖的改變，開篇說到了，設(shè)計(jì)原則是“以品為中心”，所以banner此次把左右的結(jié)構(gòu)調(diào)整為居中排版，目的就是讓產(chǎn)品更突出。

居中排版不僅能強(qiáng)化產(chǎn)品的展示，同時(shí)也因?yàn)?，頂部增加Tab后，頭部變得復(fù)雜元素眾多，左右排版的banner，視覺表現(xiàn)力弱，并不能很好的拉開視覺表現(xiàn)對(duì)比。

選擇局中的樣式，優(yōu)缺點(diǎn)都非常明顯，優(yōu)點(diǎn)是產(chǎn)品表現(xiàn)力變強(qiáng)了，標(biāo)題文案可以展示更長(zhǎng)，缺點(diǎn)就是頭圖拉高，降低了屏效率。

對(duì)于不同顏色深度的banner圖，頂部元素制定了黑白兩種主題，不同亮暗色的banner圖，能夠自動(dòng)識(shí)別使用黑色或者白色。

另外，banner圖上的新品標(biāo)簽，做了重新設(shè)計(jì)，使之更加匹配居中排版的版式。

標(biāo)簽有個(gè)很重要的改變是，把“上新”改為“新品”，原因很簡(jiǎn)單，“上新”沒有“新品”給用戶的感知更直接。

跟大家分析一下，“上新”這個(gè)詞，是個(gè)動(dòng)詞，他的意思上了新品，并不能給予這個(gè)品一個(gè)直接的新品概念，因?yàn)樯闲乱部梢岳斫鉃?，下架后重新上新?/p>

而“新品”是個(gè)形容詞，他就是在形容這個(gè)產(chǎn)品的屬性，是一種很直接的表達(dá)方式，不用解釋，用戶更不用理解。

制定設(shè)計(jì)規(guī)范

從制定設(shè)計(jì)規(guī)范中，能夠感受到，居中排版，對(duì)小米商城的主品手機(jī)的展示非常友好，手機(jī)通常是好多種顏色一排排列。

另外，對(duì)于細(xì)長(zhǎng)的的產(chǎn)品，還可以多角度依次排列，充分展示產(chǎn)品外觀。

首焦改版后，同時(shí)還提高了制作的效率，舊版左右結(jié)構(gòu)，對(duì)于標(biāo)題的文字長(zhǎng)度包容性很低。

所以在舊版的規(guī)范中，針對(duì)不同長(zhǎng)度的標(biāo)題，標(biāo)題字號(hào)還得對(duì)應(yīng)調(diào)整，非常耗時(shí)間，而且容易出錯(cuò)。

新版居中排版，基本滿足95%以上的標(biāo)題文案長(zhǎng)度，副標(biāo)題也可以露出更多的賣點(diǎn)/利益點(diǎn)。

頭圖大促期

米粉節(jié)、618、雙十一、小米發(fā)布會(huì)，在這些大促期，頭圖的形式會(huì)有變化，去掉banner形式，隨之改為更有活動(dòng)氛圍的huner（我們的專有名詞，糊一臉的意思）。

另外，huner也支持gif格式展示，當(dāng)需要重點(diǎn)強(qiáng)調(diào)氛圍時(shí)，會(huì)用動(dòng)圖的形式來展示。

重點(diǎn)來了～

我們都知道，iOS的頂部狀態(tài)欄高度，比安卓要高一些，尤其iOS有靈動(dòng)導(dǎo)的手機(jī)型號(hào)，占據(jù)的空間尤為多。

這個(gè)問題導(dǎo)致在舊版的商城，兩端頭圖高度展示不一致，最終呈現(xiàn)的結(jié)果就是安卓合適，iOS就有點(diǎn)壓頭，iOS合適，安卓間距就會(huì)很大。

下圖所示，同樣的尺寸的圖素，在兩端展示出來的間距不同。

針對(duì)這個(gè)問題，新版設(shè)計(jì)通過技術(shù)方案解決了這個(gè)問題，設(shè)計(jì)頭圖時(shí)按照iOS的最高的高度來設(shè)計(jì)，然后安卓通過技術(shù)方案，做頂部裁剪。

下圖所示，紅色為裁剪區(qū)域，針對(duì)不同型號(hào)手機(jī)裁剪高度不同。

當(dāng)沒有Tab時(shí)，頭部同樣裁剪，裁剪更多的尺寸。

這樣一來，搜索框與圖中的元素間距，就能保持一致，huner圖與banner圖都是同樣的解決方案。

間距相同

發(fā)布會(huì)直播期間

發(fā)布會(huì)是S級(jí)直播，也是公司的重要時(shí)刻，這時(shí)賣貨不是重點(diǎn)，而是小米品牌與用戶建立/加深情感連接時(shí)刻。所以頭圖的位置讓給直播，同時(shí)下方，開始布局發(fā)布會(huì)期間，發(fā)布的新品，以及相關(guān)活動(dòng)入口，方便用戶購買。

小結(jié)

此次小米商城的改版分為兩部分，以上是上半部分的總結(jié)，下半部分還沒有上線，所以暫時(shí)還不能與大家分享。

某友商一直在致敬小米商城，小米商城改版后，也許某友商用不了多久就會(huì)跟上，能引領(lǐng)友商，也是一種成績(jī)！

最后—本次分享有收獲記得點(diǎn)個(gè)贊，關(guān)注一下。下面兩篇也是小米商城的改版文章，其中一篇是上次的首頁改版，有興趣可以看看。