哈嘍，小伙伴們大家好，今天秦浩廢話就不多說了，直接上干貨，標(biāo)題：蘇寧易購商城首頁設(shè)計(jì)分析,蘇寧易購首頁改版內(nèi)容，還有干貨蘇寧易購商城首頁等等各種精品，希望各位能認(rèn)真閱讀。因?yàn)椋挥羞@樣才能真正理解和掌握！
蘇寧易購作為國內(nèi)領(lǐng)先的綜合性購物平臺，大多數(shù)用戶都有各自的不同訴求。無論是有目標(biāo)性的購物，還是以“逛”為性質(zhì)的瀏覽，亦或是看視頻看直播性質(zhì)的娛樂，用戶對蘇寧易購APP的使用體驗(yàn)都有著不同的希冀，而作為設(shè)計(jì)者，將這種希冀變成現(xiàn)實(shí)便是我們的工作目標(biāo)。
首頁在蘇寧易購客戶端中扮演著十足重要的角色。進(jìn)入首頁后，該如何快速的找到想買的商品？該如何找到優(yōu)惠活動？想看看購買攻略，又該從哪里下手？想娛樂一下，逛逛店鋪看看直播，能滿足嗎？帶著問題，一起來看看，這次的蘇寧易購首頁都有哪些變化吧！
設(shè)計(jì)思路
首先需要明確的是此次首頁改版的幾個目標(biāo)：
-
一平臺的角度制定規(guī)則，提升首頁坪效。
-
內(nèi)容展示空間更立體，主次分明，樓層類別清晰，瀏覽體驗(yàn)流暢，適當(dāng)?shù)牧舭撞粨頂D。
-
首頁所有樓層不要單獨(dú)設(shè)計(jì)獨(dú)特性，引導(dǎo)用戶側(cè)重內(nèi)容特色，內(nèi)容為王，考慮品牌感與品質(zhì)，品牌更需滲透到整個鏈路中。
這也就意味著我們需要從視覺語言上設(shè)計(jì)出更清晰的樓層和更具有辨識度的分類場景，同時模塊更多的考慮支持內(nèi)容的露出。
當(dāng)然，在滿足用戶的同時，更高的留存率與轉(zhuǎn)化率，更有效的品牌滲透也是我們所追求的，畢竟蘇寧易購可是我們吃飯的家伙（笑）！
首頁在滿足用戶訴求的同時，還需更多的考慮易用性和情感化，我們不希望只是提供一個冷冰冰的購物工具，而是希望更貼近用戶的情感，“溫暖購物”。
設(shè)計(jì)亮點(diǎn)
梳理產(chǎn)品脈絡(luò)，優(yōu)化布局
新版首頁加入了頭條以及場景化的分類，也同時對首頁的布局進(jìn)行整體的優(yōu)化。舊版的視覺問題是小元素較多、樓層分類不明顯、擁擠感比較強(qiáng)，所以我們想用新的設(shè)計(jì)讓頁面更加整體。
新版的頁面區(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)格，有幾大特點(diǎn)：
-
標(biāo)題字號加大、加粗。
-
圖標(biāo)簡化。
-
黑白兩色界面。
新舊版Apple Music對比
這一設(shè)計(jì)理念使得產(chǎn)品界面擺脫了無用的模塊拼接式設(shè)計(jì)，走向了一條更加注重整體感、重視用戶感受的道路。當(dāng)然，app的頁面設(shè)計(jì)應(yīng)該以內(nèi)容為準(zhǔn)，而不是跟隨潮流，但其中的精華可有所借鑒。
CR的設(shè)計(jì)風(fēng)格使用大量留白，減少分割線等，來使界面更為清爽，此次首頁也借鑒這種理念，盡量減少分割線的使用，利用留白和色塊區(qū)分層級。舊版的首頁由于放出了較多頻道的LOGO字符使得頁面字體較多，顯得雜亂，新版使用統(tǒng)一的字體來避免出現(xiàn)體驗(yàn)滿意度下降的情況。
ICON區(qū)域與頭條區(qū)域僅使用留白劃分功能區(qū)域
例：減少復(fù)雜交互，色塊平鋪
聯(lián)版優(yōu)化適配
我們一直在尋找最理想的針對iPhone X的適配方案，希望在支持iPhone X適配的同時，依然減少運(yùn)營的工作量，并且又能達(dá)到視覺層次的完美。所以，適配方案需要能支持千變banner的運(yùn)作，又要照顧視覺的美觀。
我們嘗試的第1套方案將搜索與banner分開，iPhone X的界面將頂部多出的長度以對應(yīng)的顏色填充。此方案的適配工作量最小，但缺點(diǎn)也很明顯：1、增加了頂部高度，使得首屏展示內(nèi)容變少2、沒有沉浸式體驗(yàn)。
方案1
方案1
方案2的樣式則在iPhoneX上依然最大化的保留了沉浸式的氛圍體驗(yàn)，同時也使得首屏展示的內(nèi)容更多。利用裁剪的技術(shù)方式，每張banner也僅需設(shè)計(jì)一版，無需增加運(yùn)營成本。
方案2
方案2
經(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)在你面前，以實(shí)現(xiàn)千人千面的效果。
對應(yīng)樓層的VI色則是根據(jù)對應(yīng)場景來確定的。冷艷低調(diào)的藍(lán)、熱情張揚(yáng)的紅、健康積極的綠、溫馨靜謐的黃以及高端大氣的土豪金，VI色的應(yīng)用將對應(yīng)樓層區(qū)分開來，同時也對應(yīng)展現(xiàn)了這些場景想表達(dá)的情感。
-
潮品質(zhì)：突出品質(zhì)以及潮流元素（藍(lán)）
-
逛實(shí)惠：突出實(shí)惠元素（紅）
-
享生活：突出生活的健康（綠）
-
精致家：突出家的溫馨（黃）
-
智慧金融：突出商務(wù)感穩(wěn)重感（土豪金）
上密下梳布局
在超過3屏后，頁面已經(jīng)屬于靠下的位置，這也就需要更清爽的層級來表達(dá)信息以便用戶能快速定位。因此我們將靠下樓層的內(nèi)容的密度降低，進(jìn)行留白以便用戶快速定位。
這樣做同時也避免首頁信息量過大，缺少主次層級的問題。經(jīng)過調(diào)整對比后，我們決定從熱門市場樓層開始將布局改為一行3模塊的布局，以減少每屏的信息量。
一行4模塊密度降低為一行3模塊
模塊化搭建
首頁需要滿足機(jī)動性、可替換性，由此我們聯(lián)想到了樂高。利用不同模塊的“積木”，可以組合出各種各樣的“造型”。首頁的設(shè)計(jì)我們也融入了這種模塊化的思維，做到每個模塊可替換、可編輯、可自由組合。利用這種設(shè)計(jì)，不僅可以輕松的調(diào)整業(yè)務(wù)框架，也能滿足大促時期的氛圍營造。
模塊化的搭建，較大的發(fā)揮空間
下拉刷新及二樓交互優(yōu)化
優(yōu)化原先的下拉刷新交互，增加下拉打開二樓的功能，我們對下拉交互的文案及高度做了優(yōu)化，期望達(dá)到更好的體驗(yàn)。
結(jié)語
此次首頁改版通過新的設(shè)計(jì)語言，在滿足產(chǎn)品訴求的同時，帶來更好的用戶體驗(yàn)。希望在年前的最后一個版本，為大家?guī)硪粋€耳目一新的首頁。
好了，今天就說到這里了，希望這篇文章可以幫到你，看完了這篇蘇寧易購商城首頁設(shè)計(jì)分析「推薦蘇寧易購首頁改版內(nèi)容」還是不太明白的話，建議多閱讀幾遍。更多相關(guān)知識，盡在巢座耶學(xué)習(xí)網(wǎng)，每天堅(jiān)持更新！
本文發(fā)布者：百事通，不代表巢座耶立場，轉(zhuǎn)載請注明出處：http://www.sdwldmy.com/p/13589.html
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 jubao226688#126.com 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。
