蘇寧易購首頁改版大揭秘

時間：2023-04-26 12:00:02 | 來源：網(wǎng)站運營

時間：2023-04-26 12:00:02 來源：網(wǎng)站運營

蘇寧易購首頁改版大揭秘：蘇寧易購作為國內(nèi)領(lǐng)先的綜合性購物平臺，大多數(shù)用戶都有各自的不同訴求。無論是有目標(biāo)性的購物，還是以“逛”為性質(zhì)的瀏覽，亦或是看視頻看直播性質(zhì)的娛樂，用戶對蘇寧易購APP的使用體驗都有著不同的希冀，而作為設(shè)計者，將這種希冀變成現(xiàn)實便是我們的工作之重。


首頁在蘇寧易購客戶端中扮演著十足重要的角色，
進(jìn)入首頁后，我該如何快速的找到我想買的商品？我該如何找到優(yōu)惠活動？我想看看購買攻略，又該從哪里下手？我想娛樂一下，逛逛店鋪看看直播，能滿足嗎？那就來一起看看，這次的蘇寧易購首頁都有哪些變化吧！








設(shè)計思路


首先需要明確的是此次首頁改版的幾個目標(biāo)：


1、
一平臺的角度制定規(guī)則，提升首頁坪效。

2、
內(nèi)容展示空間更立體，主次分明，樓層類別清晰，瀏覽體驗流暢，適當(dāng)?shù)牧舭撞粨頂D。

3、
首頁所有樓層不要單獨設(shè)計獨特性，引導(dǎo)用戶側(cè)重內(nèi)容特色，內(nèi)容為王，考慮品牌感與品質(zhì)，品牌更需滲透到整個鏈路中。

這也就意味著我們需要從視覺語言上設(shè)計出更清晰的樓層和更具有辨識度的分類場景，同時模塊更多的考慮支持內(nèi)容的露出。








當(dāng)然，在滿足用戶的同時，更高的留存率與轉(zhuǎn)化率，更有效的品牌滲透也是我們所追求的，畢竟蘇寧易購可是我們吃飯的家伙（笑）！


首頁在滿足用戶訴求的同時，還需更多的考慮易用性和情感化，我們不希望只是提供一個冷冰冰的購物工具，而是希望更貼近用戶的情感，“溫暖購物”。








設(shè)計亮點


梳理產(chǎn)品脈絡(luò)，優(yōu)化布局：





新版首頁加入了頭條以及場景化的分類，也同時對首頁的布局進(jìn)行整體的優(yōu)化。


舊版的視覺問題是小元素較多、樓層分類不明顯、擁擠感比較強，所以我們想用新的設(shè)計讓頁面更加整體。


新版的頁面區(qū)分和業(yè)務(wù)緊密集合，除了常見的搜索功能、聯(lián)版廣告、分類導(dǎo)航icon區(qū)以外，我們在首屏放入幾個主推模塊作為主打產(chǎn)品。緊隨其后的是場景化分類展示區(qū)，這個區(qū)域根據(jù)生活場景將頻道與內(nèi)容歸類整理，方便用戶瀏覽。其次則是直播及視頻、熱門市場入口、單品推薦區(qū)。


這些大區(qū)域的區(qū)分方式我們注意了排版的統(tǒng)一性，利用縱向柵格使得上下對齊嚴(yán)格統(tǒng)一，橫向柵格則使頁面節(jié)奏統(tǒng)一，以達(dá)到提升瀏覽效率，層級更加清晰的目的。






嚴(yán)格遵循對齊布局：










更通透的界面：





2016年橫掃硅谷的新趨勢Complexion
Reduction風(fēng)格，有幾大特點：

1.
標(biāo)題字號加大、加粗。

2.
圖標(biāo)簡化。

3.
黑白兩色界面。




新舊版Apple
Music對比：










這一設(shè)計理念使得產(chǎn)品界面擺脫了無用的模塊拼接式設(shè)計，走向了一條更加注重整體感、重視用戶感受的道路。當(dāng)然，app的頁面設(shè)計應(yīng)該以內(nèi)容為準(zhǔn)，而不是跟隨潮流，但其中的精華可有所借鑒。





CR的設(shè)計風(fēng)格使用大量留白，減少分割線等，來使界面更為清爽，此次首頁也借鑒這種理念，盡量減少分割線的使用，利用留白和色塊區(qū)分層級。舊版的首頁由于放出了較多頻道的LOGO字符使得頁面字體較多，顯得雜亂，新版使用統(tǒng)一的字體來避免出現(xiàn)體驗滿意度下降的情況。





例：
ICON區(qū)域與頭條區(qū)域僅使用留白劃分功能區(qū)域










例：減少復(fù)雜交互，色塊平鋪

聯(lián)版優(yōu)化適配：

我們一直在尋找最理想的針對iPhone
X的適配方案，希望在支持iPhone
X適配的同時，依然減少運營的工作量，并且又能達(dá)到視覺層次的完美。所以，適配方案需要能支持千變banner的運作，又要照顧視覺的美觀。

我們嘗試的第一套方案將搜索與banner分開，iPhone
X的界面將頂部多出的長度以對應(yīng)的顏色填充。此方案的適配工作量最小，但缺點也很明顯：1、增加了頂部高度，使得首屏展示內(nèi)容變少2、沒有沉浸式體驗。







方案1：普通尺寸手機(jī)首屏
方案1： iPhone X首屏































































































方案2的樣式則在iPhoneX上依然最大化的保留了沉浸式的氛圍體驗，同時也使得首屏展示的內(nèi)容更多。利用裁剪的技術(shù)方式，每張banner也僅需設(shè)計一版，無需增加運營成本。





方案2：普通尺寸手機(jī)首屏
方案2：iPhone
X首屏





















































































經(jīng)過考慮后，我們認(rèn)為方案2的視覺樣式更具優(yōu)勢，所以最終選定了方案2.











場景化分類：


我們從用戶的角度出發(fā)，重新將頻道的分類進(jìn)行了場景化的區(qū)分。





舊版的首頁很難快速找到自己喜愛的頻道入口，而此次首頁劃分出5個場景化樓層：品質(zhì)潮流、愛逛街、愛生活、愛我家、玩轉(zhuǎn)金融，用戶可根據(jù)場景化的分類快速找到自己喜愛的內(nèi)容。每個樓層的樓層標(biāo)題與場景氛圍圖融合，樓層內(nèi)的模塊可作為頻道入口亦可成為內(nèi)容展示入口，豐富了展示類型。





同時APP會自動記錄分析你的瀏覽行為，對哪些品類更感興趣，其位置就會更加顯著的出現(xiàn)在你面前，以實現(xiàn)千人千面的效果。

































































對應(yīng)樓層的VI色則是根據(jù)對應(yīng)場景來確定的。冷艷低調(diào)的藍(lán)、熱情張揚的紅、健康積極的綠、溫馨靜謐的黃以及高端大氣的土豪金，VI色的應(yīng)用將對應(yīng)樓層區(qū)分開來，同時也對應(yīng)展現(xiàn)了這些場景想表達(dá)的情感。





潮品質(zhì)：突出品質(zhì)以及潮流元素（藍(lán)）
逛實惠：突出實惠元素（紅）

享生活：突出生活的健康（綠）
精致家：突出家的溫馨（黃）

智慧金融：突出商務(wù)感穩(wěn)重感（土豪金）








上密下疏布局：





在超過3屏后，頁面已經(jīng)屬于靠下的位置，這也就需要更清爽的層級來表達(dá)信息以便用戶能快速定位。因此我們將靠下樓層的內(nèi)容的密度降低，進(jìn)行留白以便用戶快速定位。這樣做同時也避免首頁信息量過大，缺少主次層級的問題。


經(jīng)過調(diào)整對比后，我們決定從熱門市場樓層開始將布局改為一行3模塊的布局，以減少每屏的信息量。





一行4模塊密度降低為一行3模塊：








模塊化搭建：


首頁需要滿足機(jī)動性、可替換性，由此我們聯(lián)想到了樂高。利用不同模塊的“積木”，可以組合出各種各樣的“造型”。首頁的設(shè)計我們也融入了這種模塊化的思維，做到每個模塊可替換、可編輯、可自由組合。利用這種設(shè)計，不僅可以輕松的調(diào)整業(yè)務(wù)框架，也能滿足大促時期的氛圍營造。





模塊化的搭建，較大的發(fā)揮空間








下拉刷新及二樓交互優(yōu)化：


優(yōu)化原先的下拉刷新交互，增加下拉打開二樓的功能，我們對下拉交互的文案及高度做了優(yōu)化，期望達(dá)到更好的體驗。






















































































結(jié)語




此次首頁改版通過新的設(shè)計語言，在滿足產(chǎn)品訴求的同時，帶來更好的用戶體驗。


希望在年前的最后一個版本，為大家?guī)硪粋€耳目一新的首頁。

閱讀全文