小米商城APP首頁設(shè)計全面解析
編輯導(dǎo)語:一個品牌的首頁設(shè)計很大程度上影響了用戶的體驗和品牌形象,首頁的優(yōu)秀設(shè)計也可以增強用戶的轉(zhuǎn)化,讓用戶的購買體驗變好;本文作者分享了關(guān)于小米商城APP的首頁設(shè)計解析,我們一起來看一下。
互聯(lián)網(wǎng)產(chǎn)品首頁是與用戶進行交流的第一步,首頁設(shè)計不僅代表著一家企業(yè)的形象,還會直接影響公司的業(yè)務(wù)營收和口碑。
本文將深度解析“小米商城”APP的首頁設(shè)計,分析B2C模式下的自營電商是如何通過設(shè)計打造品牌感,增加用戶參與感,從而促進產(chǎn)品的銷售轉(zhuǎn)化。
一、產(chǎn)品定位
了解一款A(yù)PP產(chǎn)品首先要了解它的產(chǎn)品定位,從小米商城的slogan“讓每個人都能享受科技的樂趣”不難看出小米的產(chǎn)品定位是性價比高的科技類產(chǎn)品。
另一方面,從商業(yè)模式來看,小米商城是B2C自營電商;與其他B2C自營電商平臺不同的是,小米主打高性價比,以好口碑深入大眾,撬動市場,以互聯(lián)網(wǎng)思維賣產(chǎn)品,把硬件產(chǎn)品當(dāng)互聯(lián)網(wǎng)軟件產(chǎn)品賣。
由此可見,科技、高性價比是小米商城產(chǎn)品定位的兩大關(guān)鍵詞。
二、目標(biāo)用戶
目標(biāo)用戶是產(chǎn)品模式和功能制定的重要考慮因素,小米商城的目標(biāo)用戶可以分為三類人群:
1)米粉用戶
這類用戶是小米的忠實粉絲,也或許是雷總的粉絲,他們認(rèn)同小米文化,喜愛小米產(chǎn)品,熱衷購買和傳播小米產(chǎn)品,是小米商城最有價值的用戶群體。
2)科技發(fā)燒友
這類用戶本身就是科技愛好者,喜愛探索新鮮前沿的科技產(chǎn)品,熱衷購買科技類創(chuàng)新性的產(chǎn)品,對于深度發(fā)燒友還會專研參數(shù)配置,并會在論壇探討分享。
3)追求小資用戶
這類用戶追求品質(zhì),喜愛有設(shè)計感的產(chǎn)品,如果了解到小米有什么產(chǎn)品好看又好用,他們會為了保證品質(zhì)和服務(wù),選擇從官方購物平臺購買。
三、全品類商城與自營商城設(shè)計差異
雖然了解了小米商城的定位與目標(biāo)用戶,但還需要從產(chǎn)品的商業(yè)模式上去推導(dǎo)設(shè)計;比如淘寶與小米商城的首頁設(shè)計大有不同,原因就是因為商業(yè)模式不同,致使產(chǎn)品的設(shè)計存在差異。
1. 全品類與自營首頁設(shè)計區(qū)別
自營類商品其實是全品類商城的一個分支,全品類商城首頁衍生了很多獨立平臺,所以全品類商城首頁設(shè)計形式上更注重流量分發(fā);而自營類是垂直領(lǐng)域,所以會更突出商品,并且創(chuàng)造商品賣點,打造爆款。
全品類電商產(chǎn)品因為品類眾多,用戶長時間使用會形成“逛”的習(xí)慣;從運營的角度,首頁運營板塊就會以千人千面的形式出現(xiàn)各類產(chǎn)品,所以首頁在設(shè)計上需要放置更多的產(chǎn)品,甚至要不停的變化產(chǎn)品,以覆蓋到用戶的需求點。
而自營類電商產(chǎn)品,因為品類較少,用戶很難逛起來;也是因為用戶使用自營類產(chǎn)品本身就是帶有目的性的,這樣用戶通常會是“找”的行為,所以首頁的功能上通常會推薦主題產(chǎn)品和打造爆款。
2. 自營類商城設(shè)計上注重品牌
自營類商城運營的是品牌,能發(fā)展壯大的自營電商都成功塑造了品牌形象;所以在產(chǎn)品設(shè)計上突出品牌,會與用戶建立信任感,提高轉(zhuǎn)化,同時也能做到與其他電商的差異化設(shè)計。
下圖所示,小米商城、小米有品、網(wǎng)易嚴(yán)選三款產(chǎn)品,為了能快速與用戶建立品牌認(rèn)知,導(dǎo)航欄都放了自家的logo。
另外,還可以從色調(diào)、板式、服務(wù)等等各個緯度突出品牌形象,總之在產(chǎn)品設(shè)計上要與品牌形象貼合,讓用戶處處能感知到品牌。
導(dǎo)航欄設(shè)計注重品牌
了解產(chǎn)品定位和目標(biāo)用戶以及平臺的商業(yè)模式,對我們分析一個產(chǎn)品非常重要,這樣更容易從正確的方向理解產(chǎn)品的設(shè)計。
下面我們帶著對產(chǎn)品定位和目標(biāo)用戶的理解,開始對小米商城APP首頁設(shè)計的全面解析。
四、小米商城-首頁解析
B2C模式下的品牌電商,首頁設(shè)計需要做到可以讓任何一款產(chǎn)品成為爆品,也不會讓任何一款產(chǎn)品出現(xiàn)庫存滯銷。
小米商城首頁的設(shè)計與運營緊密聯(lián)系,有帶貨能力超強的模塊,如小米眾籌、小米秒殺;也有能快速推廣新品的模塊,如小米新品、新品發(fā)布,這些都是品牌電商重要的組成部分。
接下里我們從品牌DNA、布局體驗設(shè)計、金剛區(qū)設(shè)計、登錄前后設(shè)計、參與感設(shè)計等方面對小米商城首頁進行解析。
1. 品牌DNA
當(dāng)前小米公司有著非常強大的品牌勢能,給人們留下了性價比高、高端、簡約、科技、堅持的好印象,這些都可以看作是小米的品牌DNA;因此在設(shè)計小米商城APP時,設(shè)計需要貼合小米品牌DNA,讓用戶使用產(chǎn)品時能感受到小米的品牌力。
打開小米商城APP,處處能感受到小米的品牌元素,橘色的品牌色、小米的產(chǎn)品圖標(biāo)等,都在傳遞著小米的符號;整體UI的設(shè)計秉承了小米硬件產(chǎn)品的一貫風(fēng)格,如簡約的風(fēng)格、高質(zhì)感元素等,細節(jié)上體現(xiàn)品質(zhì)。
2. 布局體驗設(shè)計
用戶瀏覽電商產(chǎn)品首頁,第一屏流量最高,隨著往下走第二屏、第三屏…跳失率會越來越高,根據(jù)數(shù)據(jù)統(tǒng)計通常產(chǎn)品第三屏之后流量會大打折扣。
雙十一期間截圖
上圖的數(shù)據(jù)并不能代表所有產(chǎn)品的數(shù)據(jù),好的設(shè)計形式可以影響數(shù)據(jù)的變化。
如何減少跳失率,要從用戶在當(dāng)前位置的所思所想出發(fā),做好第二屏到第三屏的功能制定和引導(dǎo)設(shè)計非常重要。
小米商城首屏最后的位置可以看到第二屏的內(nèi)容標(biāo)題,能夠起到引導(dǎo)性作用,并且放的是最有吸引力“小米秒殺”和“新品發(fā)布”雙十一期間增加了運營模塊;雖然這兩塊在第二屏,但看到的同樣是最有吸引力的雙11促銷信息。
引導(dǎo)用戶查看內(nèi)容
另外在不增加運營板塊時會發(fā)現(xiàn),小米商城重要板塊不會放到第三屏,在第二屏下面已經(jīng)開始出現(xiàn)精選(猜你喜歡)閑逛區(qū);因為是太多板塊用戶會感覺首頁很亂,不容易對各板塊功能形成認(rèn)知,其次就是隨著跳失率的增加,重要板塊也會失去好的轉(zhuǎn)化效果。
1)打造沉浸式體驗
多數(shù)用戶在第三屏?xí)r會失去再向下探索的動力,這時系統(tǒng)通過算法給用戶推薦用戶喜歡的內(nèi)容,會再次吸引到用戶,重塑用戶向下探索的好奇心。
用戶在“猜你喜歡”版塊心態(tài)是無目的的閑逛,當(dāng)用戶不想再向下探索時,隨時可以側(cè)滑屏幕切換到其他品類,這樣也大大減少了用戶首頁閑逛的跳失率,營造出了一種沉浸式的交互體驗。
閑逛區(qū)(猜你喜歡)沉浸式體驗
同時因為用戶在此版塊是“逛”的心態(tài),所以設(shè)計上采用瀑布流,也可以稱為Feed流;這樣的設(shè)計形式重點突出的是圖片,也就是商品本身,參數(shù)配置會弱化或不出現(xiàn);因為用戶閑逛時是沒有目的的,當(dāng)一個商品對他吸引后,用戶才會主動點擊查看詳情。
如果用戶是有目的搜索某個或某個品類商品時,此時列表流更為合適,因為用戶是有目的性的查找商品;他是認(rèn)識這款或這類產(chǎn)品的,所以必定會開始關(guān)注產(chǎn)品的參數(shù)配置等,列表流的左右結(jié)構(gòu),能非常合理的呈現(xiàn)出參數(shù)配置等信息。
總結(jié):當(dāng)用戶無目的“逛”時會關(guān)注產(chǎn)品本身,所以這時需要重點突出產(chǎn)品圖,使用瀑布流更合適;當(dāng)用戶有目的查找商品時,因為已對商品有一定的認(rèn)識,所以不僅希望看到圖片,同時也希望能夠直觀看到產(chǎn)品的參數(shù)配置,這點對科技類產(chǎn)品的展示尤其重要。
3. 金剛區(qū)設(shè)計
小米商城-金剛區(qū)
金剛區(qū)的圖標(biāo)設(shè)計直接用產(chǎn)品來代替,真實的手機、電腦、筆記本等,這樣不僅能與眾多電商平臺的金剛區(qū)有差異化,更加能夠把入口功能表現(xiàn)的有識別性、直觀性,能夠使用產(chǎn)品模型作為圖標(biāo)元素,這本身形成了一種優(yōu)勢。
“觸碰想象,感受真實”金剛區(qū)的圖標(biāo)設(shè)計符合小米的設(shè)計理念,設(shè)計師從圖標(biāo)的設(shè)計營造出了貼合目標(biāo)用戶認(rèn)知的氛圍,讓用戶感受到了歸屬感。
金剛區(qū)圖標(biāo)的布局設(shè)計與產(chǎn)品定位和用戶特征非常吻合:
第一個圖標(biāo)是“小米新品”,對于米粉來說,這應(yīng)該是最關(guān)注的功能入口,關(guān)注新品的用戶也是最容易購買新品的人群;從產(chǎn)品的角度來講,新品也是需要大力推廣宣傳的,所以新品入口放置首位無可厚非。
第二個是“小米眾籌”,此功能入口對于追求性價比的用戶是最有吸引力的;因為眾籌價低于零售價,符合性價比屬性,此模式是先付錢再生產(chǎn),解決了庫存、物流成本等。
第一排剩下的是三個手機圖標(biāo),其中位于中間位置的“至尊新品”是動效展示,也是因為要強調(diào)和推廣新款手機。
“小米秒殺”放在第二排第一個,是因為此模塊也非常重要,是一大流量入口,秒殺功能板塊是利用時間的緊迫感來刺激用戶轉(zhuǎn)化,走量能力極強;正因如此,在頁面的下方有專門的“小米秒殺”板塊。
剩下的四個圖標(biāo)是小米生態(tài)鏈中四個類別的產(chǎn)品入口,代表了大多數(shù)產(chǎn)品。
4. 登錄前后設(shè)計
1)新人首次打開產(chǎn)品,促進第一單購買
小米商城新用戶第一次打開產(chǎn)品時,會直接彈出“新人專享福利”彈窗,點擊查看都是性價比極高,且生活中常用的物件;性價比高是為了促進與新用戶的第一筆交易,推薦常用物品是為了讓用戶在生活中看到用到這些常用物品時,可以想到物品的購買渠道,從而提高復(fù)購。
2)新人登錄前,首頁內(nèi)容促進第一單購買
如果用戶不小心關(guān)閉了彈窗,沒關(guān)系,在首頁最重要的位置也會看到“新人福利”板塊;如果享受新人福利,那在購買前一定要做的是要注冊登錄的,所以新人福利,不僅可以促成與新人的第一筆訂單,而且也有助于引導(dǎo)新人成為注冊用戶。
3)新人登錄后,繼續(xù)促進第一單購買
從下載小米商城到登錄后,會有三次提示有新人福利,上面介紹了前兩次,第三次是當(dāng)?shù)卿浐髸苯犹D(zhuǎn)到“新人專享福利”;目的還是促成一單有性價比的交易,給用戶留下第一次好的購物體驗,最終變成有價值的用戶。
4)不包郵是用戶最大的痛點
據(jù)調(diào)查電商購物,用戶最大的痛點就是不包郵,同樣一件商品,99元包郵比90元+8元快遞費組合更容易讓人接受。
上圖小米商城的新人福利,都在強調(diào)包郵,消除用戶痛點,讓用戶的首次購物真正的感受到小米商品的性價比。
5)個人中心登錄前后有意思的設(shè)計
小米商城登錄前后在個人中心有個地方的設(shè)計非常有意思,看下圖未登錄前的5個圖標(biāo)設(shè)計,相信身為設(shè)計師的你一眼就能看出“錢包”的圖標(biāo)偏小,這是為什么呢?
登錄后才發(fā)現(xiàn),較大的四個圖標(biāo)都會換成數(shù)字,數(shù)字的大小正好與錢包圖標(biāo)的大小視覺上一致,設(shè)計師似乎很淘氣。
登錄后數(shù)字與圖標(biāo)大小視覺上一致
5. 參與感設(shè)計
小米商城的商品具有低頻購買的屬性,如手機、家電等,好在商品的種類相對較多,小米也在不斷的研發(fā)新品,為了促活,小米商城在設(shè)計上有很多參與感的設(shè)計。
小米商城有“星球”板塊,可以理解為是一個基于產(chǎn)品討論為導(dǎo)向的社交平臺,這樣的功能就是讓用戶有參與感。
當(dāng)對比華為商城和OPPO商城后,發(fā)現(xiàn)華為與OPPO只是把產(chǎn)品呈現(xiàn)出來,卻很少有讓用戶有參與感的設(shè)計;而小米商城處處都在打造參與感設(shè)計,如游戲化設(shè)計、互動平臺等等,當(dāng)然這些功能的設(shè)計與小米主打性價比和粉絲屬性的用戶有關(guān)。
在小米商城的首頁用戶可以打開紅包雨游戲功能、答題領(lǐng)紅包功能、智取盲盒機功能等;這些雖然都是營銷策略,但因為趣味性、游戲化的設(shè)計也大大提高了用戶參與感,從而增加了銷售機會。
五、最后
對于負(fù)責(zé)流量分發(fā)的首頁,不僅要引導(dǎo)用戶瀏覽和購買商品,給用戶創(chuàng)造優(yōu)秀的產(chǎn)品體驗,首頁也是體現(xiàn)公司品牌形象的關(guān)鍵點位,品牌形象能夠讓用戶了解你、信任你、感受到價值,從而促成購買轉(zhuǎn)化,這些都可以用設(shè)計助力表現(xiàn)。
以上講的是UI設(shè)計前的探索工作,也是非常有必要的工作,產(chǎn)品設(shè)計者只有真正了解了產(chǎn)品的底層架構(gòu),才能精準(zhǔn)的把控設(shè)計,在各方面掌握好平衡。
#專欄作家#
吳星辰,微信公眾號:互聯(lián)網(wǎng)設(shè)計幫,人人都是產(chǎn)品經(jīng)理專欄作家。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議
yyds
nice
錢包…..emmm
有點東西
太贊了
受益匪淺,但是總覺得錢包那個icon小一號并不是有意為之,應(yīng)是無心之舉吧,對于大部分長期登陸的用戶并沒有任何影響所以沒改而已。
??贊
分析的很好,用心研究了