7亿多用户的QQ个性化商城，是如何做改版设计的

QQ 个性化商城，基于目前手机 QQ 7 亿+用户的一个个性装扮类商城，日活跃用户也是千万级别，是当今年轻人不折不扣的喜爱之地。近年来从用户数据反馈以及 QQ 用户群体迁移上来看，个性化商城也同时面临用户群体收窄的危机。并且设计团队的多次转变，也导致目前商城设计体验上不统一，对于目前现状与难点，这也是我们这次改版的初衷。

项目背景

个性化商城是一个专注于 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 个性化商城。