無極五註冊網站_7億多用戶的QQ個性化商城,是如何做改版設計的

QQ 個性化商城,基於目前手機 QQ 7 億+用戶的一個個性裝扮類商城,日活躍用戶也是千萬級別,是當今年輕人不折不扣的喜愛之地。近年來從用戶數據反饋以及 QQ 用戶群體遷移上來看,個性化商城也同時面臨用戶群體收窄的危機。並且設計團隊的多次轉變,也導致目前商城設計體驗上不統一,對於目前現狀與難點,這也是我們這次改版的初衷。

大廠是如何做改版設計的?來看QQ閱讀7.0 的總結!

本文從設計方向(前期研究、確定設計風格)、規範制定(制定視覺規範、構建視覺組件庫)、方案輸出(視覺界面呈現)、不足與反思等方面對 7.0 的視覺改版工作進行了總結回顧。

閱讀文章 >>

項目背景

個性化商城是一個專註於 QQ 裝扮類的商城,在多達 15 個不同的裝扮類型的商城中,用戶對於整體瀏覽效率和內容展示最為關心,關係著用戶的裝扮效率和裝扮時的心理感受。我們前期也對商城做了一定程度的用戶調研,希望通過對商城的一些調研數據,力求站在用戶痛點上進行更多的思考與改進。

從「產品目標」中拓展設計思路

與產品團隊的多次溝通,產品的目標無疑就是「提高商城營收」&「拉高商城活躍」,設計團隊根據產品目標進行推導,從而確立這次改版的設計目標,並且在此基礎上不斷進行方法論要點的細分,希望能根據產品目標確立出明確的設計方向。

設計關鍵詞,決定着商城的改版方向

團隊從設計目標中進行風格探索,分別從「視覺、玩法、內容」三個緯度進行展開,提取出我們這次設計改版的關鍵詞,以「簡潔、有趣、專屬」為改版的核心,主要目的是讓用戶最便捷地找到最喜歡的裝扮。

輕量化便捷體驗,讓用戶更專註於內容

1. 大統一商城操作體驗,讓裝扮更有效率

我們縱觀商城模塊布局,單個專區內容展現太少,用戶難以看到專區更多分類與內容,且15個裝扮類型子商城,每一個的操作邏輯也各有差異。我們結合目前ux主流操作,在原架構上進行體驗統一與優化,加入了「橫滑」和「瀑布流」的操作體驗。

在專區加入橫滑,通過手勢操作解決「內容查看太少」的問題,且下滑時也能展示更多其他模塊,豐富商城展示種類;用戶下滑瀏覽時,也能隨時快速查看瀏覽過的內容,讓用戶瀏覽裝扮時更有效率。

加入「瀑布流」操作,主要是針對目前商城更注重「大數據反饋」的策略,能夠利用瀑布流式的大量內容推薦,不斷加載持續更新,並根據用戶的裝扮喜好與習慣進行推薦,從而擊中用戶的喜愛。

2. 簡化多餘信息,減輕用戶閱讀疲勞

統一商城item基礎尺寸

承載了 15 個裝扮樣式的平台上,他們尺寸樣式上也是各有不同,具體尺寸多達 11 個以上,導致整體視覺上雜亂,且每一個 item 之間的過於緊湊,增加了用戶瀏覽時的視覺壓力。我們根據商城 15 個裝扮類型進行分類,可以整合歸類為 2 個尺寸,一個是正方形,一個是長條形。

標準尺寸數值上,我們根據近幾年個性化用戶使用的手機分辨率排名,發現有 80% 以上的用戶手機分辨率是 16:9 的樣式,而我們長條形尺寸的裝扮類型,例如「主題」「背景」等,他們的使用場景,都是以充滿全屏的形式而出現,同時也考慮到放置在展現上,希望與用戶使用后的真實尺寸保持一致,使用 16:9 的還原比例,保持「縮略圖」最初衷的存在意義。

整體界面布局優化

在首頁的整體風格上,我們更偏向於簡潔,給予界面更多留白呼吸的空間,減輕用戶瀏覽時的心理壓力。簡化多餘信息,把注意力集中到裝扮 item 之中,並且縮減 banner 運營推薦位數量,從而提高用戶瀏覽專註度。

item樣式統一

為了更好突出場景中 item 的有效性,調整了 3 個基礎的裝扮樣式。例如在首頁中,希望用戶感受到的是豐富多樣的內容,讓用戶繼續保持着一個繼續瀏覽的慾望,從而拉高商城活躍,所以選中樣式 A & 樣式 C。而在子商城中裝扮樣式的選擇,選用了「強調裝扮效率」的帶按鈕樣式,因為子商城首頁,用戶會更帶着一種「裝扮目的性」的心態進入頁面,所以在 item 樣式中,更偏向裝扮樣式 B。

3. 建立用戶愉悅的心情,更加友好

我們將界面中原有的方形 item 增加了圓角概念,讓人視覺感受上更加友好、親切。並且圓角具有更強的內指向性,可以更好地襯托出 item 內的裝扮內容;而且在圓角的襯托下,更加清楚分辨 item 的邊界,使裝扮的呈現更加清晰。

對於圓角的取值上也作了足夠的思考,結合商城特性,item 內需承載的其他內容信息眾多,圓角太大會影響邊角信息的呈現,所以我們在圓角選取上,採用 QQ8.0 設計規範中定義的 8px 的軟柵格系統,意思是「以 8px 為單位,來規範元素的尺寸與間距」。在極端情況下使用 6px 圓角。

並且我們把圓角的理念,延展到標籤的統一設計中,並且對於長短不一的 item 信息重新歸類,清晰分成 4 個尺寸樣式,把控商城視覺上的統一。

4. 打破常規,構建有節奏的視覺體驗

這次改版的布局規範規劃中,我們也希望能讓用戶燃起對商城的新鮮感,並且對「舊素材」的復用上,不斷思考着用什麼展示形式能更吸引用戶進行點擊裝扮。所以在正常的模塊組合形式上,加入了兩個個性化的特殊模塊,分別是「精品套裝」和「新品嘗鮮」這兩個專區。

「精品套裝」的方式是利用套裝主題的形式,將一些新裝扮與舊裝扮進行合併展示,並以這種新鮮的組合方式,讓用戶看到新裝扮的同時,也能發現一些「遺忘的寶藏」。

「新品嘗鮮」是以裝扮的「基礎尺寸」進行等比例的拓展組合,提高視覺豐富度的同時,讓用戶瀏覽時更有富有節奏感。並在橫滑的形式上,若隱若現的內容呈現,勾起用戶不斷右滑的慾望。

底部的「猜你喜歡」模塊,是根據目前個性化商城的用戶裝扮行為進行分析,以瀑布流的形式不斷連續地拉取內容進行推薦,豐富整個商城的內容模塊的同時,也能給用戶推薦專屬的裝扮類型。

強化品牌趣味性,讓商城處處埋藏着驚喜

對於商城品牌切入點的思考中,我們是希望用戶在瀏覽個性化商城時,是保持着一股輕鬆的心情,不斷在商城中探索着不同的驚喜,並且隨時找到屬於自己專屬的裝扮。因此在品牌關鍵詞上,凸顯的是「輕鬆自由,探索驚喜,趣味十足,專屬個性」。

1. 圖標趣味化,讓商城更耐人尋味

圖標是用戶進入商城后最直觀的圖形,最能夠表達出整個商城的風格。在整體 icon 的重塑中,對舊 icon 進行品牌趣味性優化,例如「字體」tab,把舊版籠統的字母 A,加入行星光環,在保持原來辨識度的同時,又能凸顯品牌趣味性。在圖形的整體風格上,通過塊面化的形式,以及大圓弧和小圓角的細節處理,統一商城設計語言。而且在主 icon 上,加入觸碰反饋的動畫呈現,給商城帶來更多小驚喜。

2. 結合趣味性小設計,提高用戶對功能入口的熱情

團隊在思考「趣味」的設計時,不希望只是在視覺的呈現上變得有趣,而是希望用戶在操作和使用的過程中,也能感受到「趣味」,並且希望運用「趣味」來提高用戶點擊的熱情,讓冷冰冰的功能入口變得生動有趣。所以我們選擇了首頁固底的「會員開通入口」進行改造,這無疑也是個性化商城的整個營收的 C 位。

我們在原來的「續費按鈕」樣式中進行了優化嘗試,加入了 3d 的視覺元素來凸顯整體的品牌感;把原來靜態的按鈕方式,賦予了出場的動效設計,讓整體視覺體驗上更加生動;且當用戶觸碰 SVIP 形象時給到動作反饋,增強與用戶的互動。

在不斷的用戶調研的過程中,我們對整體的視覺與互動方式進行了調整與迭代,經過多次的嘗試后,考慮到要符合性能條件、視覺美觀等條件下,最終選中了一個用戶喜愛度最高的按鈕方案,並且開通按鈕的開通轉化率顯著提高了不少,反映出用戶對新版設計的認可。

重視商城視覺運營,讓用戶對商城保持「新鮮感」

在模塊的基礎架構上,我們添加了運營類專區模塊,根據運營側重點進行視覺強化,從而達到區分其他模塊的效果,使用戶在瀏覽頁面時的視覺表現上,不增加用戶閱讀難度的同時增強視覺節奏感。

設計過程中需不斷自我反思

全新的個性化商城已經逐漸展現在大家的面前,對於用戶數據的反饋也得到了很大的提升,對於走在改版的道路上的我們,這是一個很好的定心丸。團隊也在不斷關注用戶反饋與數據間的變化,大家的意見也會給予我們更好的方向。

QQ 個性化商城將一直服務於用戶,不斷聆聽用戶需求,永不停下體驗探索的腳步。團隊也會繼續保持着匠人精神,保持對行業的高度熱愛,從而繼續打造用戶喜歡的平台, 大家繼續關注我們吧。歡迎大家掃碼體驗全新 QQ 個性化商城。

未经-摩登3注册-摩登3测速官网-允许不得转载:摩登3注册-摩登3测速官网 » 無極五註冊網站_7億多用戶的QQ個性化商城,是如何做改版設計的

赞 (0)