個性化商城是一個專注于 QQ 裝扮類的商城，在多達(dá) 15 個不同的裝扮類型的商城中，用戶對于整體瀏覽效率和內(nèi)容展示最為關(guān)心，關(guān)系著用戶的裝扮效率和裝扮時的心理感受。我們前期也對商城做了一定程度的用戶調(diào)研，希望通過對商城的一些調(diào)研數(shù)據(jù)，力求站在用戶痛點(diǎn)上進(jìn)行更多的思考與改進(jìn)。
與產(chǎn)品團(tuán)隊的多次溝通，產(chǎn)品的目標(biāo)無疑就是「提高商城營收」&「拉高商城活躍」，設(shè)計團(tuán)隊根據(jù)產(chǎn)品目標(biāo)進(jìn)行推導(dǎo)，從而確立這次改版的設(shè)計目標(biāo)，并且在此基礎(chǔ)上不斷進(jìn)行方法論要點(diǎn)的細(xì)分，希望能根據(jù)產(chǎn)品目標(biāo)確立出明確的設(shè)計方向。
團(tuán)隊從設(shè)計目標(biāo)中進(jìn)行風(fēng)格探索，分別從「視覺、玩法、內(nèi)容」三個緯度進(jìn)行展開，提取出我們這次設(shè)計改版的關(guān)鍵詞，以「簡潔、有趣、專屬」為改版的核心，主要目的是讓用戶最便捷地找到最喜歡的裝扮。
1. 大統(tǒng)一商城操作體驗，讓裝扮更有效率
我們縱觀商城模塊布局，單個專區(qū)內(nèi)容展現(xiàn)太少，用戶難以看到專區(qū)更多分類與內(nèi)容，且15個裝扮類型子商城，每一個的操作邏輯也各有差異。我們結(jié)合目前ux主流操作，在原架構(gòu)上進(jìn)行體驗統(tǒng)一與優(yōu)化，加入了「橫滑」和「瀑布流」的操作體驗。
在專區(qū)加入橫滑，通過手勢操作解決「內(nèi)容查看太少」的問題，且下滑時也能展示更多其他模塊，豐富商城展示種類；用戶下滑瀏覽時，也能隨時快速查看瀏覽過的內(nèi)容，讓用戶瀏覽裝扮時更有效率。
加入「瀑布流」操作，主要是針對目前商城更注重「大數(shù)據(jù)反饋」的策略，能夠利用瀑布流式的大量內(nèi)容推薦，不斷加載持續(xù)更新，并根據(jù)用戶的裝扮喜好與習(xí)慣進(jìn)行推薦，從而擊中用戶的喜愛。
2. 簡化多余信息，減輕用戶閱讀疲勞
統(tǒng)一商城item基礎(chǔ)尺寸
承載了 15 個裝扮樣式的平臺上，他們尺寸樣式上也是各有不同，具體尺寸多達(dá) 11 個以上，導(dǎo)致整體視覺上雜亂，且每一個 item 之間的過于緊湊，增加了用戶瀏覽時的視覺壓力。我們根據(jù)商城 15 個裝扮類型進(jìn)行分類，可以整合歸類為 2 個尺寸，一個是正方形，一個是長條形。
標(biāo)準(zhǔn)尺寸數(shù)值上，我們根據(jù)近幾年個性化用戶使用的手機(jī)分辨率排名，發(fā)現(xiàn)有 80％ 以上的用戶手機(jī)分辨率是 16：9 的樣式，而我們長條形尺寸的裝扮類型，例如「主題」「背景」等，他們的使用場景，都是以充滿全屏的形式而出現(xiàn)，同時也考慮到放置在展現(xiàn)上，希望與用戶使用后的真實尺寸保持一致，使用 16：9 的還原比例，保持「縮略圖」最初衷的存在意義。
整體界面布局優(yōu)化
在首頁的整體風(fēng)格上，我們更偏向于簡潔，給予界面更多留白呼吸的空間，減輕用戶瀏覽時的心理壓力。簡化多余信息，把注意力集中到裝扮 item 之中，并且縮減 banner 運(yùn)營推薦位數(shù)量，從而提高用戶瀏覽專注度。
item樣式統(tǒng)一
為了更好突出場景中 item 的有效性，調(diào)整了 3 個基礎(chǔ)的裝扮樣式。例如在首頁中，希望用戶感受到的是豐富多樣的內(nèi)容，讓用戶繼續(xù)保持著一個繼續(xù)瀏覽的欲望，從而拉高商城活躍，所以選中樣式 A & 樣式 C。而在子商城中裝扮樣式的選擇，選用了「強(qiáng)調(diào)裝扮效率」的帶按鈕樣式，因為子商城首頁，用戶會更帶著一種「裝扮目的性」的心態(tài)進(jìn)入頁面，所以在 item 樣式中，更偏向裝扮樣式 B。
3. 建立用戶愉悅的心情，更加友好
我們將界面中原有的方形 item 增加了圓角概念，讓人視覺感受上更加友好、親切。并且圓角具有更強(qiáng)的內(nèi)指向性，可以更好地襯托出 item 內(nèi)的裝扮內(nèi)容；而且在圓角的襯托下，更加清楚分辨 item 的邊界，使裝扮的呈現(xiàn)更加清晰。
對于圓角的取值上也作了足夠的思考，結(jié)合商城特性，item 內(nèi)需承載的其他內(nèi)容信息眾多，圓角太大會影響邊角信息的呈現(xiàn)，所以我們在圓角選取上，采用 QQ8.0 設(shè)計規(guī)范中定義的 8px 的軟柵格系統(tǒng)，意思是「以 8px 為單位，來規(guī)范元素的尺寸與間距」。在極端情況下使用 6px 圓角。
并且我們把圓角的理念，延展到標(biāo)簽的統(tǒng)一設(shè)計中，并且對于長短不一的 item 信息重新歸類，清晰分成 4 個尺寸樣式，把控商城視覺上的統(tǒng)一。
4. 打破常規(guī)，構(gòu)建有節(jié)奏的視覺體驗
這次改版的布局規(guī)范規(guī)劃中，我們也希望能讓用戶燃起對商城的新鮮感，并且對「舊素材」的復(fù)用上，不斷思考著用什么展示形式能更吸引用戶進(jìn)行點(diǎn)擊裝扮。所以在正常的模塊組合形式上，加入了兩個個性化的特殊模塊，分別是「精品套裝」和「新品嘗鮮」這兩個專區(qū)。
「精品套裝」的方式是利用套裝主題的形式，將一些新裝扮與舊裝扮進(jìn)行合并展示，并以這種新鮮的組合方式，讓用戶看到新裝扮的同時，也能發(fā)現(xiàn)一些「遺忘的寶藏」。
「新品嘗鮮」是以裝扮的「基礎(chǔ)尺寸」進(jìn)行等比例的拓展組合，提高視覺豐富度的同時，讓用戶瀏覽時更有富有節(jié)奏感。并在橫滑的形式上，若隱若現(xiàn)的內(nèi)容呈現(xiàn)，勾起用戶不斷右滑的欲望。
底部的「猜你喜歡」模塊，是根據(jù)目前個性化商城的用戶裝扮行為進(jìn)行分析，以瀑布流的形式不斷連續(xù)地拉取內(nèi)容進(jìn)行推薦，豐富整個商城的內(nèi)容模塊的同時，也能給用戶推薦專屬的裝扮類型。
對于商城品牌切入點(diǎn)的思考中，我們是希望用戶在瀏覽個性化商城時，是保持著一股輕松的心情，不斷在商城中探索著不同的驚喜，并且隨時找到屬于自己專屬的裝扮。因此在品牌關(guān)鍵詞上，凸顯的是「輕松自由，探索驚喜，趣味十足，專屬個性」。
1. 圖標(biāo)趣味化，讓商城更耐人尋味
圖標(biāo)是用戶進(jìn)入商城后最直觀的圖形，最能夠表達(dá)出整個商城的風(fēng)格。在整體 icon 的重塑中，對舊 icon 進(jìn)行品牌趣味性優(yōu)化，例如「字體」tab，把舊版籠統(tǒng)的字母 A，加入行星光環(huán)，在保持原來辨識度的同時，又能凸顯品牌趣味性。在圖形的整體風(fēng)格上，通過塊面化的形式，以及大圓弧和小圓角的細(xì)節(jié)處理，統(tǒng)一商城設(shè)計語言。而且在主 icon 上，加入觸碰反饋的動畫呈現(xiàn)，給商城帶來更多小驚喜。
2. 結(jié)合趣味性小設(shè)計，提高用戶對功能入口的熱情
團(tuán)隊在思考「趣味」的設(shè)計時，不希望只是在視覺的呈現(xiàn)上變得有趣，而是希望用戶在操作和使用的過程中，也能感受到「趣味」，并且希望運(yùn)用「趣味」來提高用戶點(diǎn)擊的熱情，讓冷冰冰的功能入口變得生動有趣。所以我們選擇了首頁固底的「會員開通入口」進(jìn)行改造，這無疑也是個性化商城的整個營收的 C 位。
我們在原來的「續(xù)費(fèi)按鈕」樣式中進(jìn)行了優(yōu)化嘗試，加入了 3d 的視覺元素來凸顯整體的品牌感；把原來靜態(tài)的按鈕方式，賦予了出場的動效設(shè)計，讓整體視覺體驗上更加生動；且當(dāng)用戶觸碰 SVIP 形象時給到動作反饋，增強(qiáng)與用戶的互動。
在不斷的用戶調(diào)研的過程中，我們對整體的視覺與互動方式進(jìn)行了調(diào)整與迭代，經(jīng)過多次的嘗試后，考慮到要符合性能條件、視覺美觀等條件下，最終選中了一個用戶喜愛度最高的按鈕方案，并且開通按鈕的開通轉(zhuǎn)化率顯著提高了不少，反映出用戶對新版設(shè)計的認(rèn)可。
在模塊的基礎(chǔ)架構(gòu)上，我們添加了運(yùn)營類專區(qū)模塊，根據(jù)運(yùn)營側(cè)重點(diǎn)進(jìn)行視覺強(qiáng)化，從而達(dá)到區(qū)分其他模塊的效果，使用戶在瀏覽頁面時的視覺表現(xiàn)上，不增加用戶閱讀難度的同時增強(qiáng)視覺節(jié)奏感。
全新的個性化商城已經(jīng)逐漸展現(xiàn)在大家的面前，對于用戶數(shù)據(jù)的反饋也得到了很大的提升，對于走在改版的道路上的我們，這是一個很好的定心丸。團(tuán)隊也在不斷關(guān)注用戶反饋與數(shù)據(jù)間的變化，大家的意見也會給予我們更好的方向。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。