哈嘍,小伙伴們大家好,今天秦浩廢話就不多說了,直接上干貨,標題:蘇寧易購商城首頁設計分析,蘇寧易購首頁改版內容,還有干貨蘇寧易購商城首頁等等各種精品,希望各位能認真閱讀。因為,只有這樣才能真正理解和掌握!
蘇寧易購作為國內領先的綜合性購物平臺,大多數用戶都有各自的不同訴求。無論是有目標性的購物,還是以“逛”為性質的瀏覽,亦或是看視頻看直播性質的娛樂,用戶對蘇寧易購APP的使用體驗都有著不同的希冀,而作為設計者,將這種希冀變成現實便是我們的工作目標。

首頁在蘇寧易購客戶端中扮演著十足重要的角色。進入首頁后,該如何快速的找到想買的商品?該如何找到優惠活動?想看看購買攻略,又該從哪里下手?想娛樂一下,逛逛店鋪看看直播,能滿足嗎?帶著問題,一起來看看,這次的蘇寧易購首頁都有哪些變化吧!
設計思路
首先需要明確的是此次首頁改版的幾個目標:
-
一平臺的角度制定規則,提升首頁坪效。
-
內容展示空間更立體,主次分明,樓層類別清晰,瀏覽體驗流暢,適當的留白不擁擠。
-
首頁所有樓層不要單獨設計獨特性,引導用戶側重內容特色,內容為王,考慮品牌感與品質,品牌更需滲透到整個鏈路中。
這也就意味著我們需要從視覺語言上設計出更清晰的樓層和更具有辨識度的分類場景,同時模塊更多的考慮支持內容的露出。

當然,在滿足用戶的同時,更高的留存率與轉化率,更有效的品牌滲透也是我們所追求的,畢竟蘇寧易購可是我們吃飯的家伙(笑)!
首頁在滿足用戶訴求的同時,還需更多的考慮易用性和情感化,我們不希望只是提供一個冷冰冰的購物工具,而是希望更貼近用戶的情感,“溫暖購物”。
設計亮點
梳理產品脈絡,優化布局
新版首頁加入了頭條以及場景化的分類,也同時對首頁的布局進行整體的優化。舊版的視覺問題是小元素較多、樓層分類不明顯、擁擠感比較強,所以我們想用新的設計讓頁面更加整體。
新版的頁面區分和業務緊密集合,除了常見的搜索功能、聯版廣告、分類導航icon區以外,我們在首屏放入幾個主推模塊作為主打產品。緊隨其后的是場景化分類展示區,這個區域根據生活場景將頻道與內容歸類整理,方便用戶瀏覽。其次則是直播及視頻、熱門市場入口、單品推薦區。這些大區域的區分方式我們注意了排版的統一性,利用縱向柵格使得上下對齊嚴格統一,橫向柵格則使頁面節奏統一,以達到提升瀏覽效率,層級更加清晰的目的。

嚴格遵循對齊布局
更通透的界面
2016年橫掃硅谷的新趨勢Complexion Reduction風格,有幾大特點:
-
標題字號加大、加粗。
-
圖標簡化。
-
黑白兩色界面。

新舊版Apple Music對比
這一設計理念使得產品界面擺脫了無用的模塊拼接式設計,走向了一條更加注重整體感、重視用戶感受的道路。當然,app的頁面設計應該以內容為準,而不是跟隨潮流,但其中的精華可有所借鑒。
CR的設計風格使用大量留白,減少分割線等,來使界面更為清爽,此次首頁也借鑒這種理念,盡量減少分割線的使用,利用留白和色塊區分層級。舊版的首頁由于放出了較多頻道的LOGO字符使得頁面字體較多,顯得雜亂,新版使用統一的字體來避免出現體驗滿意度下降的情況。

ICON區域與頭條區域僅使用留白劃分功能區域

例:減少復雜交互,色塊平鋪
聯版優化適配
我們一直在尋找最理想的針對iPhone X的適配方案,希望在支持iPhone X適配的同時,依然減少運營的工作量,并且又能達到視覺層次的完美。所以,適配方案需要能支持千變banner的運作,又要照顧視覺的美觀。
我們嘗試的第1套方案將搜索與banner分開,iPhone X的界面將頂部多出的長度以對應的顏色填充。此方案的適配工作量最小,但缺點也很明顯:1、增加了頂部高度,使得首屏展示內容變少2、沒有沉浸式體驗。

方案1

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

方案2

方案2
經過考慮后,我們認為方案2的視覺樣式更具優勢,所以最終選定了方案2。
場景化分類
我們從用戶的角度出發,重新將頻道的分類進行了場景化的區分。舊版的首頁很難快速找到自己喜愛的頻道入口,而此次首頁劃分出5個場景化樓層:品質潮流、愛逛街、愛生活、愛我家、玩轉金融,用戶可根據場景化的分類快速找到自己喜愛的內容。
每個樓層的樓層標題與場景氛圍圖融合,樓層內的模塊可作為頻道入口亦可成為內容展示入口,豐富了展示類型。同時APP會自動記錄分析你的瀏覽行為,對哪些品類更感興趣,其位置就會更加顯著的出現在你面前,以實現千人千面的效果。


對應樓層的VI色則是根據對應場景來確定的。冷艷低調的藍、熱情張揚的紅、健康積極的綠、溫馨靜謐的黃以及高端大氣的土豪金,VI色的應用將對應樓層區分開來,同時也對應展現了這些場景想表達的情感。
-
潮品質:突出品質以及潮流元素(藍)
-
逛實惠:突出實惠元素(紅)
-
享生活:突出生活的健康(綠)
-
精致家:突出家的溫馨(黃)
-
智慧金融:突出商務感穩重感(土豪金)

上密下梳布局
在超過3屏后,頁面已經屬于靠下的位置,這也就需要更清爽的層級來表達信息以便用戶能快速定位。因此我們將靠下樓層的內容的密度降低,進行留白以便用戶快速定位。
這樣做同時也避免首頁信息量過大,缺少主次層級的問題。經過調整對比后,我們決定從熱門市場樓層開始將布局改為一行3模塊的布局,以減少每屏的信息量。

一行4模塊密度降低為一行3模塊
模塊化搭建
首頁需要滿足機動性、可替換性,由此我們聯想到了樂高。利用不同模塊的“積木”,可以組合出各種各樣的“造型”。首頁的設計我們也融入了這種模塊化的思維,做到每個模塊可替換、可編輯、可自由組合。利用這種設計,不僅可以輕松的調整業務框架,也能滿足大促時期的氛圍營造。

模塊化的搭建,較大的發揮空間
下拉刷新及二樓交互優化
優化原先的下拉刷新交互,增加下拉打開二樓的功能,我們對下拉交互的文案及高度做了優化,期望達到更好的體驗。


結語
此次首頁改版通過新的設計語言,在滿足產品訴求的同時,帶來更好的用戶體驗。希望在年前的最后一個版本,為大家帶來一個耳目一新的首頁。
好了,今天就說到這里了,希望這篇文章可以幫到你,看完了這篇蘇寧易購商城首頁設計分析「推薦蘇寧易購首頁改版內容」還是不太明白的話,建議多閱讀幾遍。更多相關知識,盡在巢座耶學習網,每天堅持更新!
本文發布者:百事通,不代表巢座耶立場,轉載請注明出處:http://www.sdwldmy.com/p/13589.html
版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 jubao226688#126.com 舉報,一經查實,本站將立刻刪除。