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