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