小米商城APP首頁(yè)改版
一年多以前，老板們針對(duì)小米商城給出了清晰的定位：“小米商城是具有官方屬性的品牌電商，在設(shè)計(jì)上要結(jié)合集團(tuán)戰(zhàn)略走高端化路線”。
我主要工作就是小米商城的首頁(yè)設(shè)計(jì)，所以在這一年中，一直對(duì)商城的首頁(yè)設(shè)計(jì)做探索和改版，目前已經(jīng)到了一個(gè)階段，終于可以跟大家做一個(gè)分享，這篇文章準(zhǔn)備的時(shí)間很長(zhǎng)，內(nèi)容很多，希望閱讀的你能有所收獲。
?提煉設(shè)計(jì)語(yǔ)言?
根據(jù)最新的產(chǎn)品定位，能提煉出兩個(gè)重要的信息，即“品牌電商”和“高端化”，若想把這兩點(diǎn)落實(shí)到產(chǎn)品設(shè)計(jì)當(dāng)中，首先就是對(duì)這兩個(gè)關(guān)鍵詞有充分且客觀的認(rèn)識(shí)。
什么是品牌電商？
京東、淘寶、拼多多是不是品牌電商？肯定不是，他們屬于綜合類電商，他們銷售各種品牌的產(chǎn)品，品牌電商的特征是，只針對(duì)一個(gè)品牌或集團(tuán)旗下多個(gè)品牌（集團(tuán)為品牌）的產(chǎn)品進(jìn)行銷售。
綜合類電商： 追求性價(jià)比，更多的是滿足消費(fèi)者物質(zhì)層面的需求，購(gòu)買動(dòng)機(jī)是功能、賣點(diǎn)、價(jià)值等利益點(diǎn)。
綜合類電商在設(shè)計(jì)上，貼近用戶的心智訴求，就應(yīng)該注重產(chǎn)品的利益點(diǎn)露出，頁(yè)面設(shè)計(jì)上強(qiáng)調(diào)熱鬧的氛圍，這樣才能進(jìn)一步刺激用戶的消費(fèi)欲望。
品牌電商：品牌電商應(yīng)注重品牌的調(diào)性，賦能品牌，用戶追求品牌溢價(jià)，滿足精神層面的需求，購(gòu)買動(dòng)機(jī)注重品質(zhì)，以及身份的價(jià)值認(rèn)同感，符合自己的社會(huì)屬性等。
設(shè)計(jì)上，不應(yīng)過分強(qiáng)調(diào)利益點(diǎn)，不然會(huì)降低品牌的品質(zhì)感，品牌電商應(yīng)聚焦商品本身，更多的去解讀產(chǎn)品的價(jià)值和優(yōu)勢(shì)，讓用戶感到品牌產(chǎn)品的品質(zhì)。
如何理解高端化？
什么是高端的？那首先得明白什么是低端的，從人類發(fā)展的客觀事實(shí)上來(lái)看，或從我們普遍認(rèn)同的價(jià)值觀上來(lái)看，落后往往代表低端，先進(jìn)則更能表現(xiàn)高端，下面我們看幾組圖片。
從圖片的對(duì)比上來(lái)看，粗糙、多色彩、雜亂看起來(lái)是低端的，精致、單色、簡(jiǎn)潔更多人會(huì)認(rèn)同是高端的。
最終通過品牌電商的特點(diǎn)，以及高端化設(shè)計(jì)認(rèn)識(shí)，我總結(jié)出4條設(shè)計(jì)語(yǔ)言：
1、回歸產(chǎn)品本身
聚焦產(chǎn)品價(jià)值為核心，回歸本真，營(yíng)銷信息合理展示。
2、克制的
克制色彩營(yíng)銷的導(dǎo)向， 復(fù)雜的設(shè)計(jì)，助力品牌高端化。
3、極致的
以用戶語(yǔ)言，打造產(chǎn)品細(xì)節(jié)，打磨用戶體驗(yàn)，做好服務(wù)。
4、有品牌感知的
提取品牌DNA，建立官網(wǎng)心智，打造官方商城優(yōu)勢(shì)。
有了設(shè)計(jì)語(yǔ)言的方向指導(dǎo)，那所有的設(shè)計(jì)都要依據(jù)這四條原則進(jìn)行設(shè)計(jì)，接下來(lái)看一下案例中如何運(yùn)用設(shè)計(jì)原則。
?案例解析?
下圖是一年前的首頁(yè)，最直觀的感受就是，整體看上去色調(diào)很多，圖素的飽和度也較高，根據(jù)我們的設(shè)計(jì)語(yǔ)言，對(duì)banner、金剛位、活動(dòng)腰帶、一拖三（瓷片區(qū)）等、做了一系列的改版，同時(shí)還增加了幾個(gè)模塊，接下來(lái)我們細(xì)講。
banner圖區(qū)域結(jié)合需求，做了非常大膽的嘗試，對(duì)頭圖設(shè)定了幾種狀態(tài)，日常狀態(tài)、活動(dòng)狀態(tài)、新品發(fā)布會(huì)狀態(tài)。
一、日常狀態(tài)： 依舊是輪播banner展示，在圖素的設(shè)計(jì)上，對(duì)版式和用色做了規(guī)范調(diào)整。
色調(diào)上不再采用高飽和的圖素，板式上去掉了行動(dòng)按鈕，原因就是結(jié)合設(shè)計(jì)語(yǔ)言“回歸產(chǎn)品本身”這一理念，去營(yíng)銷化，圖素上的信息就展示關(guān)于產(chǎn)品本身，圖、名稱、賣點(diǎn)、價(jià)格。
這就是一個(gè)品牌電商，在日常展示上，應(yīng)該有的一種態(tài)度，吸引用戶的一定是產(chǎn)品本身，而不應(yīng)該是一個(gè)利益點(diǎn)。
二、活動(dòng)狀態(tài)： 當(dāng)有重要的活動(dòng)或新品時(shí)，會(huì)直接把所有banner都下掉，直接把一個(gè)加長(zhǎng)的活動(dòng)圖素放上去，業(yè)務(wù)方給起了個(gè)名字叫huner，意思就是直接“呼臉上”的意思，邏輯上就是重點(diǎn)強(qiáng)調(diào)。
huner展示
根據(jù)活動(dòng)的重要程度，huner的高度會(huì)不一樣，左圖是與哈利波特聯(lián)名的一款手機(jī)，比較重要，所以更大，右圖是每月一次的F會(huì)員日活動(dòng)，所以相對(duì)較小。
關(guān)于活動(dòng)氛圍，在設(shè)計(jì)上還有一個(gè)遞進(jìn)關(guān)系，當(dāng)活動(dòng)越重要，那huner的底部圓角就會(huì)越圓潤(rùn)，因?yàn)樵綀A潤(rùn)的設(shè)計(jì)越活躍，越活躍的設(shè)計(jì)活動(dòng)氛圍就會(huì)越熱鬧。
另外有時(shí)我也會(huì)做一些動(dòng)效上去，來(lái)重點(diǎn)渲染活動(dòng)氛圍，下圖所示：?
迪士尼聯(lián)名產(chǎn)品發(fā)布會(huì)動(dòng)畫
雙11活動(dòng)huner動(dòng)畫設(shè)計(jì)
618倒計(jì)時(shí)huner動(dòng)畫設(shè)計(jì)
三、新品發(fā)布會(huì)/重大節(jié)日狀態(tài)： 這個(gè)狀態(tài)會(huì)在huner圖中下方增加多個(gè)次級(jí)活動(dòng)入口，原因發(fā)布會(huì)和重大節(jié)日流量較高，這樣的設(shè)計(jì)形式，流量聚焦，減少路徑，能更好的完成活動(dòng)目的。
另外在這個(gè)樣式的基礎(chǔ)上還有一種形式，huner下方的坑位會(huì)去掉產(chǎn)品圖，弱化展示，目的是為了給下方活動(dòng)腰帶更多的流量。
大促期間各個(gè)需求組，都希望在首頁(yè)分到更多的流量，在眾多活動(dòng)中，肯定有主有次之分，放在一起設(shè)計(jì)形式相同就會(huì)平均流量，這顯然不是平臺(tái)想要的效果，所以解決方案就是，通過設(shè)計(jì)形式來(lái)干預(yù)流量的走向。
對(duì)于一個(gè)多業(yè)務(wù)方的首頁(yè)，設(shè)計(jì)上往往還需考量各方利益，不能因?yàn)橐环?，影響另一方，做好?quán)重需求分配，平衡利益，這也是設(shè)計(jì)師需要有意識(shí)思考的問題。
總結(jié)：banner頭圖的改版設(shè)計(jì)，日常輪播不會(huì)存在任何營(yíng)銷信息，保持品牌電商的調(diào)性，活動(dòng)期間根據(jù)不同級(jí)別的活動(dòng)，給出級(jí)別不同設(shè)計(jì)方案，活動(dòng)過多時(shí)，通過設(shè)計(jì)形式干預(yù)流量的走向。
2、金剛位優(yōu)化
金剛位做了簡(jiǎn)單的優(yōu)化，之前最大的問題是，產(chǎn)品的形狀各異，都是以最大要求尺寸展示，導(dǎo)致最終的視覺呈現(xiàn)常常不統(tǒng)一。
解決方案下圖所示，規(guī)范了較為方正的產(chǎn)品和較長(zhǎng)產(chǎn)品，不同的呈現(xiàn)尺寸，讓視覺盡可能看起來(lái)統(tǒng)一。
米金商城圖標(biāo)進(jìn)行了改版，采用寫實(shí)效果，降低飽和度，盡可能看起來(lái)更貼近真實(shí)，這樣與真實(shí)的產(chǎn)品圖標(biāo)會(huì)更加契合。
金剛位中“小米發(fā)布”的入口，有一個(gè)重要的改變，之前一直是一個(gè)圓角矩形，現(xiàn)在結(jié)合我們的設(shè)計(jì)語(yǔ)言“有品牌感知的”原則，進(jìn)行調(diào)整。
提取小米logo的超橢圓形狀，直接用于圖標(biāo)的呈現(xiàn)，小米發(fā)布是一個(gè)重流量的入口，所以一直是一個(gè)動(dòng)效狀態(tài)。
因?yàn)椤靶∶装l(fā)布”是中間位置，圖標(biāo)尺寸保持最大也不會(huì)不和諧，較大的展示面積，能把動(dòng)效內(nèi)容展示的更清晰。
3、新品大卡
這個(gè)內(nèi)容是新增模塊，非 常態(tài)化呈現(xiàn)，每次會(huì)隨著發(fā)布會(huì)新品發(fā)布出現(xiàn)，比如老板在發(fā)布會(huì)上正在介紹一款新品，那小米商城就會(huì)隨著發(fā)布會(huì)的節(jié)奏，首頁(yè)首屏出現(xiàn)一個(gè)非常突出的新品大卡。
當(dāng)介紹第二款新品時(shí)，新品大卡就會(huì)以banner輪播的形式出現(xiàn)，另外有一點(diǎn)很重要，新品大卡的副文案，一定得是賣點(diǎn)，而不能是利益點(diǎn)。
賣點(diǎn)就是展示這個(gè)產(chǎn)品本身的亮點(diǎn)，利益點(diǎn)是這個(gè)產(chǎn)品有什么優(yōu)惠，對(duì)于剛發(fā)布的新品就直接上利益點(diǎn)，有損新品的價(jià)值感，不符合我們“回歸產(chǎn)品”的設(shè)計(jì)語(yǔ)言。
所以每次業(yè)務(wù)方給出的是利益點(diǎn)，我都會(huì)提醒他換成賣點(diǎn)，講明原因，他們通常也是非常認(rèn)可的。
4、活動(dòng)腰帶
活動(dòng)腰帶是重運(yùn)營(yíng)區(qū)域，所以設(shè)計(jì)形式會(huì)常常換樣式，不然用戶容易視覺疲勞，但任何設(shè)計(jì)形式，也都是圍繞設(shè)計(jì)語(yǔ)言開展，下圖所示，新舊活動(dòng)腰帶對(duì)比。
新舊對(duì)比很直觀的感受就是，變得冷靜克制了，場(chǎng)景變得寫實(shí)了，減少色相了，降低飽和度和明度了，下面我精選了一些近一年中用過的活動(dòng)腰帶。
寫實(shí)風(fēng)格的KV能增強(qiáng)商品的品質(zhì)，也更符合目前的產(chǎn)品定位，從數(shù)據(jù)來(lái)看對(duì)比以前也是增長(zhǎng)趨勢(shì)。
對(duì)于品牌電商來(lái)說(shuō)，能給用戶帶來(lái)品質(zhì)感，其實(shí)就等于用戶對(duì)平臺(tái)增加了信任感，設(shè)計(jì)促進(jìn)了用戶的信任，那就等于設(shè)計(jì)賦能了品牌。
5、手機(jī)腰帶
手機(jī)腰帶也是新增的模塊，原因很簡(jiǎn)單，集團(tuán)的主營(yíng)業(yè)務(wù)就是手機(jī)，所以手機(jī)要有個(gè)專門的模塊展示。
另外值得說(shuō)的一點(diǎn)是，手機(jī)腰帶下面三個(gè)手機(jī)做到了“千人千面”，不同標(biāo)簽的用戶會(huì)看到不同的手機(jī)推薦。
6、一拖三（瓷片區(qū)）
這個(gè)模塊的改版非常有講頭，這一年中也是經(jīng)歷了多個(gè)版本的迭代，首先看一下最初的設(shè)計(jì)稿，其實(shí)是非常符合當(dāng)時(shí)的產(chǎn)品定位，與之前的活動(dòng)腰帶也非常契合，營(yíng)銷感較重，主打的就是一個(gè)熱鬧。
當(dāng)時(shí)告訴運(yùn)營(yíng)同學(xué)的是，四個(gè)卡片中只能加一個(gè)，功能上并沒有限制只能加一個(gè)，后來(lái)如上圖所示，每個(gè)都加，夸張的時(shí)候四個(gè)都加。
本來(lái)就是多色的色塊，再加上幾個(gè)突出的標(biāo)簽，那直接就“花枝招展”了，每個(gè)卡片都加標(biāo)簽，就等于沒有突出任何一個(gè)。
后來(lái)公司提出高端化路線，就快速做了一個(gè)用不到開發(fā)的去色的調(diào)整，去掉標(biāo)簽，下圖所示，修改尺寸板式需要開發(fā)介入。
在用去色后樣式的同時(shí)，我也在進(jìn)行需要開發(fā)介入的設(shè)計(jì)迭代優(yōu)化。
首先分享一下我對(duì)改版優(yōu)化的設(shè)計(jì)思考，對(duì)于改版設(shè)計(jì)拿到需求后，不提倡直接去找參考，應(yīng)該先去調(diào)研改版的目的，了解業(yè)務(wù)方的想法。
然后結(jié)合產(chǎn)品定位，分析目前的設(shè)計(jì)存在哪些問題，深入去思考如何改版才能深入人心，這個(gè)環(huán)節(jié)非常重要，不僅能培養(yǎng)獨(dú)立思考能力和意識(shí)，而且也是鍛煉設(shè)計(jì)提案能力的重要方法。
拿到需求直接去找參考不僅是一種“懶”的行為，而且非常容易做很多徒勞無(wú)功的工作，因?yàn)椴涣私庹嬲母陌婺康?，不思考存在的問題，最后難免就是多次的改稿。
在一拖三的案例中，我總結(jié)了四個(gè)問題：
一、整體看起來(lái)非常緊湊；
二、產(chǎn)品圖片不能完全展示；
三、大卡片的產(chǎn)品名稱字號(hào)過大；
四、大卡片的文案居中對(duì)齊，不符合現(xiàn)在的設(shè)計(jì)原則；
問題一：整體看起來(lái)緊湊，其實(shí)也并非緊湊，而是如若有一個(gè)寬松和它對(duì)比，那它就是緊湊的， 我先有個(gè)方案， 再對(duì)應(yīng)給它定義一個(gè)問題 ，當(dāng)然 前提是問題與解決方案是客觀成立的。
我堅(jiān)信寬松一定會(huì)打敗緊湊，緊湊變寬松會(huì)給人一種輕松的清爽感，事實(shí)上也的確如此，最后的寬松方案大家都非常認(rèn)可。
問題二： 產(chǎn)品不能完全露出，導(dǎo)致用戶看不到產(chǎn)品全貌，從而會(huì)降低點(diǎn)擊的興趣，露出半個(gè)產(chǎn)品，這樣對(duì)用戶不僅不友好，而且也是對(duì)產(chǎn)品不尊重，所以展示出產(chǎn)品的全貌迫在眉睫。
問題三： 大卡片的產(chǎn)品名稱字號(hào)過大，甚至大過板塊標(biāo)題的字，常態(tài)展示模塊不應(yīng)該出現(xiàn)不冷靜的字號(hào)，會(huì)顯得不精致。
問題四： 大卡片的文字排版為居中，居中排版的優(yōu)點(diǎn)是表現(xiàn)力會(huì)更強(qiáng)，缺點(diǎn)是板式結(jié)構(gòu)變得不夠整潔，且不耐看，結(jié)合我們的設(shè)計(jì)語(yǔ)言“克制的”能簡(jiǎn)潔絕不會(huì)讓它復(fù)雜。
產(chǎn)品圖不在部分露出，每個(gè)模塊都是對(duì)角排版，文字左對(duì)齊，且可以展示更長(zhǎng)的產(chǎn)品名稱，整體看起來(lái)較為工整，整齊的設(shè)計(jì)，帶來(lái)的就是信任感。
接下來(lái)我們看一下規(guī)范上的整理，邊距上視覺統(tǒng)一，產(chǎn)品名稱與賣點(diǎn)的間距是賣點(diǎn)與價(jià)格邊距的二分之一，即五分原則。
同時(shí)賣點(diǎn)與價(jià)格的邊距與外邊距相同，在這種小模塊設(shè)計(jì)中，在能把信息層級(jí)分清楚的基礎(chǔ)上，UI設(shè)計(jì)間距越少越好，大小相等的東西都會(huì)看起來(lái)就會(huì)更整潔。
產(chǎn)品圖的規(guī)范設(shè)定與前面的金剛位一樣，方正的產(chǎn)品貼合小框大小，較長(zhǎng)的產(chǎn)品貼合大框。
總結(jié)
這次首頁(yè)的改版主要就是根據(jù)公司高端化戰(zhàn)略和清晰的產(chǎn)品定位，總結(jié)得出設(shè)計(jì)語(yǔ)言，然后根據(jù)設(shè)計(jì)語(yǔ)言進(jìn)行改版優(yōu)化。
1、首頁(yè)banner頭圖，常態(tài)化展示進(jìn)行了去營(yíng)銷 化設(shè)計(jì)，目的就是渲染品牌電商的品質(zhì)調(diào)性，活動(dòng)期間做了huner的創(chuàng)新型設(shè)計(jì)。
2、金剛位的產(chǎn)品圖，統(tǒng)一了視覺大小的規(guī)范設(shè)計(jì)，優(yōu)化圖標(biāo)，融入公司logo的圖形元素，促進(jìn)品牌官網(wǎng)心智的建立。
3、新品發(fā)布會(huì)直播時(shí)，在商城首頁(yè)實(shí)時(shí)同步新品信息，通過新品大卡的形式，做到全網(wǎng)購(gòu)買新品最快途徑。
4、腰帶風(fēng)格改變，走品質(zhì)路線，去繁從簡(jiǎn)，不同的級(jí)別的活動(dòng)，有不同的設(shè)計(jì)形式承載。
5、新增手機(jī)腰帶，同時(shí)手機(jī)針對(duì)不同特征用戶做了更精準(zhǔn)的投放，做到了“千人千面”。
6、一拖三改為一拖四，卡片信息重新排版，同時(shí)也做了去營(yíng)銷化設(shè)計(jì)，不 再出現(xiàn)標(biāo)簽等營(yíng)銷信息。
首頁(yè)還有會(huì)員樓層、省心優(yōu)惠、新品上新三個(gè)樓層，依舊在改版中，上線后再與大家分享。
關(guān)于設(shè)計(jì)語(yǔ)言
這四條設(shè)計(jì)語(yǔ)言，是我一年多以前在改版設(shè)計(jì)產(chǎn)品站（產(chǎn)品詳情頁(yè)）時(shí)做的總結(jié)，有些原則在這次的首頁(yè)改版并沒有體現(xiàn)，比如“極致的”用戶體驗(yàn)服務(wù)，但在產(chǎn)品站的改版中有非常多的體現(xiàn)。
對(duì)于電商產(chǎn)品最重要的兩個(gè)板塊就是，首頁(yè)和產(chǎn)品站，首頁(yè)負(fù)責(zé)準(zhǔn)確的流量分發(fā)，產(chǎn)品站負(fù)責(zé)銷售轉(zhuǎn)化，所以產(chǎn)品站的設(shè)計(jì)也是非常非常有學(xué)問， 下一篇文章就是產(chǎn)品站的改版，敬請(qǐng)期待。
?最后?
最后跟大家分享一下，這次改版的重要心得，電商首頁(yè)的每個(gè)模塊都是一個(gè)業(yè)務(wù)方，設(shè)計(jì)上要考慮各方利益，不然你的設(shè)計(jì)很難推動(dòng)。
設(shè)計(jì)形式可以影響流量的走向，合理運(yùn)用會(huì)有非常不錯(cuò)的效果。
設(shè)計(jì)前的深度思考尤為重要，不僅能培養(yǎng)獨(dú)立思考的意識(shí)，也能無(wú)形中鍛煉設(shè)計(jì)提案的能力。
先點(diǎn)個(gè) “在看” ， 然后帶你進(jìn) 設(shè)計(jì)群 ，公眾號(hào)后臺(tái)回復(fù) “1” 即可，我等你
長(zhǎng)按下方二維碼，關(guān)注“互聯(lián)網(wǎng)設(shè)計(jì)幫”
評(píng)論
圖片
表情