编者按：NNGroup 的撰稿人 Kate Moran 最近撰写了几篇关于奢侈品牌、产品和用户的文章，文章主要围绕着 奢侈品 网站和APP所面临的各种问题和解决方案来探讨，你可以借此深入审视 奢侈品 和定制类产品的常见问题，和可能的解决方案。下面是正文。

本文是系列文章的第三篇。

第一篇文章分享了我们对于奢侈品研究的一些基础信息和细节，解释了为什么奢侈品品牌在数字战略上一直挣扎求存：

为什么奢侈品牌在电商领域做的如此糟糕？ 编者按：NNGroup 的撰稿人 Kate Moran 最近有几篇关于奢侈品牌、产品和用户的文章非常有意思，这类产品和用户人群和我们日常所涉及到的产品和用户有着一定的差别，在产品逻辑和运营方式上也有着诸多反逻辑的特征，这些产品特征和逻辑可以作为某些产品和特定设计的参考，甚至对于用户消费行

阅读文章 >

第二篇文章当中，我们定义了4种常见的奢侈品消费者，并且基于其中粘度最大的两类用户，详细探讨了购物的用户历程：

7000字总结！一份专业的奢侈品用户类型和用户历程报告 编者按：NNGroup 的撰稿人 Kate Moran 最近撰写了几篇关于奢侈品牌、产品和用户的文章，文章主要围绕着用户特征和用户历程来探讨，借此深入审视奢侈品和定制类产品的特征和常见的问题。

阅读文章 >

今天的这篇文章会系统的提出一些具体的方法，确保奢侈品品牌能够在不牺牲本品牌的独特性、价值观以及基础原则的前提之下，提供高素质的线上购买体验。奢侈品牌倾向于取得：

排他性和稀缺性 注重细节 独特的身份和风格 更深入的情感关联和客户关系 下面的部分，将会结合我们的研究近年来的一些失败案例来深入探讨奢侈品牌线上营销的策略，此外，每个部分都推荐了奢侈品牌在线上销售中，应该遵循的原则和方法。

排他性和稀缺性 奢侈品牌通过排他性和稀缺性来维持它的地位。任何被认为过于普通或者过于追求可用性的设计，都可能会失去其「奢侈」的特征。价格是限制可用性的一种因素，许多奢侈品牌还会借助其他的策略来保持其排他性。

一种策略是通过限制供应渠道来强化需求，比如爱玛士的 Birkin 包，尽管需求量非常大，但是爱玛士仍然限制每年的产量，通过刻意控制数量来维持市场对于产品的渴求，进而拉升拥有者的身份地位。

此外，爱马仕还用到了另外一种策略，来维持 Birkin 包的地位——他们故意让这个包很难找到购买渠道。他们不在网上销售，也不在店内展示。爱马仕有一个需要数年等候配货的客户名单，不过现在也不再采用这种方式了。如果你真想获得这个包，除了从第三方渠道购买加价后从几万美元到十几万美元不等的个人转售包之外，从官方获取 Birkin 包的唯一方法是成为爱马仕官方认可的顶级客户才行。

Birkin 包是一个极端的案例，但是它反映出奢侈品销售的一个核心原则，就是为了保持奢侈品的地位，这些品牌会刻意设置门槛，让客户难以购买。（这部分可以参考第一篇内的解释）

由于这一原则，许多奢侈品牌选择不在线销售产品，相反他们会鼓励客户访问实体店，鉴于店内销售本身的独特体验以及重要性，他们采用这种策略本身并没有错。

不过，无法在线销售产品的品牌，也必然会错过无法拜访实体店的客户。当然，也许有的品牌能够接受这种损失，以保持品牌的某种独特性。然而，即使是没打算在线上销售的品牌，依然需要电商网站，只是他们没有提供下单结算的功能。这主要是因为，奢侈品消费者多数会在线上花费时间钻研这些产品，哪怕他们始终通过线下门店购买。

在我们的研究当中，我们观察到了几种可以在网上买到奢侈品产品的方式，不过这几种方式的差异仅仅在于产品和产品线的数量和产品信息量的差异。

比如 Gucci 和 爱马仕的网站上有许多产品可以下单购买，但是并非囊括他们所有的产品。绝大多数可以在网上销售的奢侈品牌，依然会将一部分稀缺的产品留在线下销售。

相比之下，香奈尔在网上销售的产品比较少，而 Goyard 则干脆不提供在线销售。不过，这两个品牌都为许多无法在线购买的产品提供了产品信息，不过照片都不算多，详情比较简略，而 Goyard 干脆不标注价格。

正如同本系列的文章所讨论的，限制用户获取产品的渠道和方式，是核心策略。这些品牌更愿意鼓励顾客去实体店或者联系他们所熟悉的销售代表，这就解释了为什么香奈尔和 Goyard 等品牌 不会在网上销售。但是，无论如何，奢侈品牌都理应通过网络给用户呈现更多更好的产品细节。

故意限制与意外烦人 其实奢侈品的用户都明白，奢侈品本身是难以获得的，而在某些情况下，奢侈品的收藏家们也非常享受这种「狩猎」的快感。然而，在我们的研究当中，我们注意到很多情况会让对奢侈品感兴趣的客户感到苦恼的情况，通常包括：

缺少精确的数据 碰到无法理解的专业术语和行话 没有关于设计和佩戴使用的具体建议 重要角度的产品实拍图照片严重不足 我们有一位被调研的对象，看到别人的 Fendi 水桶包之后，考虑自己也买一个，于是开始搜寻信息试图了解更多。但是，在 Fendi 的网站上，她只找到了一个类似的包，虽然网站提供了5张不同角度的图片，但是这些图片都严重缺乏相关的具体信息，缺少参考让她无法准确判断实际尺寸。

「这里写着迷你，但是我真的无法想到它是什么意思。我知道它 一定有准确尺寸，但是我并不打算拿着卷尺量出具体参数，我需要的是真实的参考。我真的非常喜欢它的外观，以及它的设计。」

Fendi 网站浏览体验给她带来了沮丧感，着促使她前去查看 Saks Fifth Avenue 的网站，她也同样无法在这个品牌的网站上找到更多相关的照片，于是她尝试去 Bergdorf Goodman 的网站，最后，在搜索了多个网站之后，她终于找到了她想看到的参考：

「Fendi 的网站通常不会提供模特演示，而许多其他的网站会显示模特拿包的效果，就像下面这样。现在我终于知道它的尺寸是什么样的了，它确实很小。这种实物参考图真的很有用。」

由于 她 在一家综合性奢侈品网站上买了不同品牌的产品，这种体验促使她决定去探索一下 Fendi 的竞争对手的产品：

「我会查看网站的推荐产品，看看是否能找到我更喜欢的。因为我浏览的网站是 Bergdorf 而非 Fendi 官网，所以我能对比很多不同的品牌和不同的选择。我大概可能不会买 Fendi 的包了。」

奢侈品购买者往往对他们喜爱的品牌非常了解，而这可能也是奢侈品牌认为这些用户会在没有充分描述、解释和细节说明的前提下，依然会下单购买的原因。

然而，虽然这些奢侈品牌可能对品牌、产品线甚至价格都很熟悉，但是，没有人会无所不知。比如一位 LV 的爱好者可能会非常熟悉 LV 的表达方式和用词，比如 Neverfull 和 Speedy，但是他不一定熟悉其他的品牌话术和表达习惯，比如 Twist 和 Alma 这些词。在没有解释的情况下使用专业术语会非常容易导致用户沮丧。

LV 的手袋列表下面包含有一个名为 Iconic 的类别，这当中的分类名称，即使是很多资深 LV 用户都不一定都理解其中的含义。

故意不提供价格，和草率地遗漏了产品的细节和照片，这两件事情有着巨大的差异。如果目的是为了激励客户光顾店铺，那么这种动机应该是促使用户去查看实物的兴奋，而非缺少细节导致的沮丧。以这种方式惹恼客户，对于销量和盈利毫无疑问是没有好处的。

价格对许多奢侈品用户依然很重要 即使是不能（或不会）在网上提供产品具体价格的品牌，也应该考虑至少提供一个范畴，如果可能的话。即使是最富有的消费者也不可能有无限的预算。即使是预算极为充裕的客户，也仍然会考虑粗略的价格范畴。

比如一位在 Bulgari 网站购买过一对耳环的消费者，对于她需要将鼠标光标悬停在商品上才能看到价格感到非常生气：

「我打开页面看不到价格……只能看到商品。这一点特别不方便，我至少得知道它大概的价格范畴吧？诶，然后我光标悬停上去之后，价格就出来了……每个人都有自己的心理价位。对于这个东西，我的心理预期可能是 15000 美元，可是如果它的售价是 41000，我甚至不想打开看一看。我总有我的价格接受范围。」

取代实体店的另一种奢华体验 虽然绝大多数的奢侈品牌似乎都在努力提供更多的基础产品细节，但是也有少数品牌正在尝试走进元宇宙，或者使用增强现实等前沿技术来实现某些效果。

比如 Gucci 就积极拥抱数字化和线上销售，Gucci 的 iOS 客户端当中就提供了基于 AR 的配饰、化妆的体验功能。

「当我「试穿」一些 Gucci 的 AR 鞋子之时，我样的英国斗牛犬 Cleo 看起来非常困惑。」

作为天生的时尚公司，奢侈品牌其实很容易尝试前沿趋势，但是像 AR 这样的技术想要用对用好本身并非易事，我们建议奢侈品牌首先关注基础的概念和玩法，然后再深入探索进阶的高级设计。

关键知识点：

首先确定要多大程度上迎合线上销售，然后确保你的网站和 APP 体现出你的选择。 如果核心目标是督促用户亲自前往门店购买，那么请提供激发用户好奇心和兴奋点的产品信息，且不要留下让人沮丧的线上体验和大量的问题。 展示大量的产品图片，包括内部、外部以及不同场景下使用的照片。 至少提供产品的详细信息，包括材料、尺寸，以及作为服装、配饰的一些必须具备的基础信息。 在进入 AR 和 元宇宙 一类新趋势之前，优先考虑完善 APP 和网站本身的基础服务 注重细节 在 产品设计 和实体店购买体验当中，奢侈品牌总会努力考虑用户体验的每一个细节。不幸的是，在我们研究过程中发现，这种对于细节的关注并没有延伸到数字化体验当中，我们甚至看到很多拼写错误，以及一些堪称懒惰的设计。

比如有两位参与调研的用户反馈，Tom Ford 和 Bulgari 的网站在用户地理定位功能是无效的。这种简单的小问题出现在奢侈品牌上，简直是令人费解的。

这些堪称草率的小错误，削弱了用户对于这些品牌的好感，这对于奢侈品牌而言，简直是灾难性的——因为品牌的声誉就是一切。

再比如，有一位被调研者在卡地亚的官网上，准备下单 Love 系列的手镯，在查看产品的过程中，网页中一个弹出框挡住了她正在看的产品，她感到非常生气。

「我从来都不喜欢这种东西，我在网站中就待了三分钟，这个弹出框给人的感觉非常俗气，就这样突然出来打断我，在我要下单买一个 4000 美元的手镯的时候，要我填写一份调查表？！我觉得今后得少看卡地亚的东西了。」

在任何的线上购物环节当中，出现这种问题都会让品牌感贬值，并且惹恼客户。而规避这类问题对于奢侈品牌而言，尤其重要，因为为了证明昂贵定价的合理性，体验必须和品牌一样一尘不染。

关键要点：

邀请专业的文案编辑来创建内容，确保质量。 当产品在国际范围内销售的时候（奢侈品牌通常支持跨国销售），请与专业的翻译人员合作，不要使用机翻，避免错误的拼写和表达。 不惜一切代价避免打扰用户。 请记住，每个像素都有助于品牌识别。 独特的身份和视觉风格 绝大多数的奢侈品牌将他们的产品视作为艺术品，而非单纯的消费品。对于品牌忠诚的客户也会以这样的方式来看待品牌，这在某种程度上也增加了品牌本身的价值。因此，许多奢侈品牌在网站和 APP 会在视觉设计时，会置于很高的优先级。

这不一定是个问题，因为奢侈品是高度视觉化的，品牌的数字化载体应当体现这一特征，视觉化的设计是强化品牌价值和视觉风格的绝佳方式，然而这并不是牺牲交互性和核心内容的借口，数字化的体验也不应当让客户感到困惑和沮丧。

优先考虑重要的交互和视觉设计 网站 和 APP 当中的重要功能，比如定位和导航，面包屑路径，产品描述和过滤筛选组件，它们应该保证良好的可用性，足够可靠。你需要确保这些功能不会被设计所影响。

比如 Supreme 就是一家臭名昭著的难以找准实际产品的街头潮牌，而这种情况制造了巨大的二级市场，Supreme 的网站在导航设计上采用了一种堪称令人发指的设计：用户需要在一个非常难用的水平导航上寻找似是而非的产品。点击其中的某些选项，出来的页面风格是几件的，点击另外一个选项，出来的风格可能是繁复的，在这种情况下，用户能找到自己想要产品的概率是极低的，不过这些页面的用处本身也不算大——因为当你悬停查看的时候，会发现绝大多数的产品都已经售罄。

虽然这个设计很好地体现了 Supreme 的品牌特征，但是在基础的导航体验上是彻底失败的，这使得网站本身更像是一个营销噱头，而没有真正发挥真正应有的作用。

有一个用户想通过 Tom Ford 的网站来了解品牌的退货政策，不幸的是，网站这一部分的内容使用了浅灰色全大写的文本来书写，着虽然与品牌本身热衷大写字符的特征相符，但是在基础的可读性上降到了最低。

相比之下，劳力士在坚持品牌视觉化的同时，在文本内容的呈现上，依然保持着不错的可读性。我们的很多调研对象，在查看网站的图片和文字内容的时候，都表示查看和阅读毫不费力。

奢侈品网站和 APP 在很多地方是没有实际功用的，更多体现的是装饰性和娱乐性，然而这些地方也是用来承载实验性想法的理想场合，可以让视觉设计大放异彩，同时又不会让用户感到沮丧。

比如香奈尔就为他们的高级定制时装制作了长图页面，虽然这些页面在内容和交互上不甚完美，但是视觉设计的方向是对的。照片、 视频、肌理、色彩和艺术品交相辉映，整个页面如同情绪版一样帮助用户窥见品牌的特质。

讲述品牌故事 虽然说视觉设计对于奢侈品牌的身份营造至关重要，但是分享公司的历史、领导力、价值观也很重要。奢侈品购物者通常更喜欢品牌而非产品，他们有时会在购买产品之前花费大量的时间研究公司历史。

有位被调研的用户喜欢在 Chloe 的网站上阅读创意总监 Cabriela Hearst 的信息。

如果你的公司有针对社会或者环境的公益项目，一定要告知用户。即使是通过电商购买产品，用户也会更加青睐有共同价值观的品牌。而对于很多奢侈品牌而言，这种公益事业的存在能够增加用户对于品牌的参与感。有一些奢侈品用户表示，他们有时候会在穿这些奢侈品的时候，感到内疚，因为他们知道其实很多人由于种种原因买不起这些奢侈品。如果购买奢侈品有助于公益事业，那么能够增加他们的价值感。

在网站中包含这个品牌有意思的信息，其实是个不错的主意，这比起简单的「关于我们」要显得丰富很多。Gucci 在这方面就做的特别好，比如会在 Bamboo 包的介绍当中，加入背后的历史信息——这是慢慢培养产品和用户之间关系的一种绝佳策略。

这种方式能够凸显奢侈品线上渠道的关键优势——以线上呈现的方式，提供独特的体验来控制叙事，塑造情感连接，这是赢得终身奢侈品用户的一种方式。

关键要点：

密切关注视觉设计，但是避免在这个过程中牺牲交互和内容设计，尤其是不要影响用户通过网站和 APP 来获得特定信息、执行特定任务（比如查找产品类别和退货政策等） 使用网站的营销、娱乐和实验性内容的区域，来做创意设计或者有趣的专题内容。 不要忘记了网站和APP的性能优化，有一些奢侈品网站加载极慢，影响体验 在「关于我们」的页面以及网站的各个角落来呈现品牌历史和价值观 强化品牌和人的关系 奢侈品牌和客户，都非常重视他们在购物过程中所形成的相互关系，这些品牌都很清楚，他们的销售人员所创造的愉悦的情感体验，对于终端客户是至关重要的。

专门的销售人员 我们研究的过程中注意到，很多消费者，尤其是挥金如土型消费者反馈，专门和他们所对接的销售人员是让他们爱上品牌的重要原因，他们会和这些销售人员保持密切的联系，这种联系能够延续很长的时间。

有一位挥金如土型的消费者告诉我们，她与香奈尔的一位销售人员关系密切，后者帮她购买到了版本非常稀有的手袋，丰富了她的收藏。而另外一位被调研者则告诉我们，她和她的丈夫 在David Yurman 购物过程中的积极体验，让他们之后多次重新找到这位销售人员买东西：

「我和我丈夫第一次一起购买高级定制珠宝的时候，我们去的是David Yurman 的店。当时的体验非常惊艳，店员让我们几乎试穿了店内所有的单品，这也让我最终变得选择困难，我不知道我到底要选哪一款。但是他们超级耐心，一点也不咄咄逼人，他们真的非常用心地帮我们做出了不同的选择。」

「这个品牌倾向于尽可能长地留住固定员工。我们后来发现，一开始帮助我选好手镯的那个店员，一直都在那里工作。她会向我们发送电子邮件，邀请我们参加他们内部的特别活动。当我们想要买东西的时候，都会和她约好时间见面。自始至终都是和同一个人对接的感觉，真的太好了。她知道我们过去买过什么，能够保持这种一致性非常难得。尽管我确信我们只是她众多客户当中的2个，但是这对于我们而言依然非常不错，这就是一种独特的体验。」

奢侈品牌很清楚，销售人员和他们的客户之间所建立的关系是他们成功的关键。因此，有的品牌会担心数字化的产品可能会取代哪些独特的人际关系，从而降低奢侈品牌最关键的个人情感的部分。但是，我们建议奢侈品牌将数字体验视作为补充和强化情感连接的一种方式，而非取代。

那些和销售人员维系长期关系的奢侈品用户曾反馈，他们主要通过短信和电子邮件和销售人员交流，虽然这些渠道是值得保留的，但是为什么不提供更多选择，来强化沟通的体验和纵深呢？

比如 Gucci 就开发了所谓的「数字陈列室」，这项服务本质上其实是客户和销售之间，一对一的直播销售，当你浏览 Gucci 的网站的时候，可以 透过「数字陈列室」来和销售人员视频聊天。用户和销售人员可以互相听到对方的声音，但是只有销售人员会出现在视频画面当中。通常，销售人员会站在一个铺着天鹅绒的桌子前面，周围全都是 Gucci 的商品，所有的这些都可以展示给用户看。

就像在商店内一样，线上的销售会耐心地回答用户所有的问题，摄影师则会协助销售，帮助用户看到所有的细节。

视频会话结束之后，销售人员会询问客户的联系方式——他们会希望建立长期的客户关系。会议结束之后，销售人员会通过短信和邮件来跟进。

Gucci 的「数字陈列室」是在数字时代尝试增强和扩大客户群体而进行的一项有效尝试。

现有的客户服务 第一次下单奢侈品通常是用户和品牌之间关系的开始，对于很多奢侈品牌来说，购买产品就像购买专属的会员资格。许多奢侈品公司会向客户提供专属的特殊服务（比如维修和专门的清洁服务）或者特权（比如邀请参加独家的活动或者派对）。

比如文本前面提到的 David Yurman 的客户所说的：

「我喜欢 David Yurman 特别照顾客户一点，20 年后如果产品有问题，我去找他们维修他们依然会给我保修。当我在店附近活动的时候，我可以把珠宝带过去让他们帮我做一做清洁和维护。」

在我们的调研中发现，很少有奢侈品牌在线上服务的时候，将这些福利整合到他们的线上宣传和服务当中，其中一个例外是 LV，他们提供了一个简化的线上维修服务流程的说明，这项服务中，用户可以和专家直接视频沟通问题。

除了电商的基础知识之外（保存支付方式、订单历史等）之外，奢侈品牌（尤其是大型的成熟品牌）应当整合他们独特的优势，比如：

为拥有特定产品的用户提供建议和技巧上的服务 为客户提供专属的客服，并且提供相应的联系方式 提供客户和专属的客服面谈的预约服务 提供产品的维修、清洁和历史跟踪的信息服务 为有特定权限的客户提供线下活动邀约的通知服务 产品和造型建议 销售人员在日常服务当中，提供的另外两大好处，就是产品推荐和造型建议了，而绝大多数的奢侈品网站都不具备这两个要素。

有一位被调研对象，跟我们讲述了Fendi 的销售人员如何鼓励她尝试一件她从未考虑过的产品，而她最终发现自己确实喜欢，并且购买了那间商品。

「我之所以走进商店，是因为我看到一件 Fendi 的衬衫并且看了一会儿。最后我决定买它。不过当我进去之后，销售人员告诉我，这件衬衫还有类似的连衣裙的款式，他们说，我穿在身上应该也会很好看，为什么不试试呢？我通常绝对不会考虑这件衣服，但是当我试穿之后，确实喜欢上它了，甚至效果比衬衫更好。所以我最终既买了衬衫，也买了裙子。」

这些产品推荐的过程，帮助用户找到了更多他们可能会喜欢的产品，同时，帮助奢侈品牌巧妙地增加了销售额，鼓励用户购买了更多产品，而无需使用高压的销售策略。

虽然最好的产品推荐仍然来自销售人员，但是线上的网站和 APP 其实同样可以充当这个角色，不幸的是，我们实际测试的很多奢侈品在这个问题上，通常都很差。

比如有一位购物者，因蒂芙尼网站上的一些产品推荐和她实际预期不符而感感到失望。

「其中有一些很相似，但是其中有一些则和我能想到的产品风格非常不符。它们更加大胆，并不是我所偏好的经典款。」

除了提高推荐内容的质量之外，许多奢侈品牌还提供更好的造型建议。有一位被调研的用户表示，她非常欣赏爱马仕的网站上所提供高的围巾和头巾的用法（包含正确扎的方式的图示），她还强调很多品牌每一提供类似的功能。

「我喜欢爱马仕展示如何包头巾的过程，它会让我思考我是否会喜欢这种方式，其他的奢侈品牌网站不会展示这一点，而这可能会是我选择放弃购买的理由，因为我不知道如何用好它。我觉得爱马仕可能是唯一一个我所见过的，做了这样设计的品牌。它们做的很好，而绝大多数品牌缺乏这个想法和概念。」

关键要点：

探索使用线上平台来增强用户和销售人员之间的关系，而非取代原有的沟通方式 除了短信和电子邮件，还可以尝试使用更多的方式来和客户沟通，比如视频直播，APP，社交媒体等，为客户提供更多的沟通的选择。 使用在线的模式为用户推送活动信息，发放福利等 提供优质的产品推荐和造型建议 结论 奢侈品牌应该将现有的数字化的工具是作为强化品牌的工具，有一些品牌已经成功地利用他们的数字战略来强化他们的销售了。

虽然本文提供了很多更为具体的建议，但是我们依然建议基于下面的 4 个要点，来提升品牌力和销售：

如果让用户亲自到店购买依然是当务之急，那么请提供能够激发用户兴趣和兴奋点的线上产品信息，而不是用粗陋的体验带来挫败感，甚至留下更多问题。 不惜一切代价避免打扰用户 密切关注视觉设计，但是避免在这个过程中牺牲交互和内容设计，尤其是不要影响用户通过网站和 APP 来获得特定信息、执行特定任务（比如查找产品类别和退货政策等） 探索使用数字产品来增强用户和销售人员的关系，而非取代这种关系。

你能想象仅仅一个音乐播放页，就设计了37个功能，11种分享方式，17种海报样式？

一个播放页就设计了37个功能！全面拆解QQ音乐产品细节 一个小小的播放页，虽然看上去那么的不起眼，但为了满足各类用户人群的特定需求，QQ 音乐就设计了 37 个功能，11 种分享方式... 拓展阅读： [link https://www.uisdc.com/qq-music-10] 你是否每天都在使用 QQ 音乐收听歌曲，但是你有没有观

阅读文章 >

你能想象只是不经意播放完一首《夏天的风》，QQ音乐就会立马为你生成一张夏天的歌单吗，让你的耳朵开始上瘾？

如果你晚上总是失眠，不妨打开专注电台，可以听听下雨声，可以听听海哭的声音，甚至可以向正在一起专注的朋友发去一条消息——Hey，你今夜也失眠了吗？

被誉为中国最牛的商业案例撰稿人潘东燕在他的《腾讯方法》里面写了这么一句话——不但要看到竞争产品做了什么，更重要的是要挖掘竞争产品的设计理念。作为一个月活跃用户人数超2亿的音乐产品，QQ音乐是怎么设计的，它又为什么这样设计？本期「设计大侦探」的「产品拆解」，就让我们走进 QQ音乐 产品的音乐世界，看最美的音乐，听最伟大的作品，一探究竟。

分析模型 1. 增长模型

由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的5个重要环节，主要用于分析产品的功能价值。

2. 上瘾模型

由尼尔·法埃尔提出，通过对上千种习惯类产品的调研，总结出一款产品如果要让用户习惯、上瘾，可以按照触发、行动、多变的酬赏和投入四个步骤去设计，主要用于分析产品的功能价值和推导产品的策略设计。

为什么刷抖音停不下来？来了解这个经典的「上瘾模型」 大家好，我是胖小魚。

阅读文章 >

3. 社会心理学

主要结合西奥迪尼的社会心理学《影响力》六大说服力原则——互惠、承诺和一致、社会认同、喜好、权威和稀缺，去推导 产品设计 的用户心理设计，主要用于推导产品的策略设计。

产品画像 1. 行业现状

根据艾瑞2020年中国音乐产业发展研究报告显示，2019年中国音乐产业数字收入市场规模就高达100.5亿，预计在2022年整个市场规模将会达到269.4亿。而且随着数字音乐、在线K歌、音乐直播等多元模式的商业化持续加速，数字音乐产业的市场规模会越来越大，整个音乐产业将会形成上千亿的规模。

而根据易观千帆数据显示，截止到2022年4月，移动音乐领域月活跃人数7.8亿，日均活跃用户超过1亿，活跃用户全网渗透率75%，人均使用时长1.53小时，也就是说100个活跃网民中有75个人每天会花1.53小时使用音乐产品。

从以上两组数据可以看出，移动音乐市场是一个市值规模超过百亿、用户活跃度非常高的市场，移动音乐产品是每一个互联网网民必备、刚需、高频使用的产品。

2. 竞争对手

从2022年4月的产品月活跃人数观看，酷狗音乐是行业第一，QQ音乐、酷我音乐和网易云音乐紧追其后。第二梯队以咪咕音乐为代表，不过相比第一梯队的用户体量，差距不小。其次，酷狗音乐、QQ音乐和酷我音乐隶属于腾讯音乐娱乐集团，属于同门师兄弟。

3. 产品介绍

QQ音乐是隶属于腾讯音乐娱乐集团的音乐流媒体平台。自2005年创立，QQ音乐注册用户总量已达8亿，QQ音乐APP在2011年3月正式推出。QQ音乐以优质内容为核心，以大数据与互联网技术为推动力，致力于打造“智慧声态”的“立体”泛音乐生态圈 ，为用户提供多元化的音乐生活体验。

4. 商业模式

QQ音乐从2005年发展至今，依靠腾讯音乐娱乐集团海量的音乐资源，为用户提供多元化的音乐服务，比如听歌、数字专辑、有声/听书等，用户需要开通绿钻/超级会员才能收听有版权的歌曲。其次吸引了众多音乐人、词曲作者、音乐主播及音乐爱好者的入驻，通过直播、扑通小组吸引用户，以歌会友，打造一个国民音乐平台。

5. 用户画像

QQ音乐的核心用户群男女比例相当，年轻用户较多，主力军为24岁以下的用户，其次24~35岁的用户也旗鼓相当，版权意识高，消费力强，主要分布在新一线城市和二三线城市，其中以广州、上海、成都、重庆最多。从用户画像推导，可以看出QQ音乐的用户人群比较年轻，以大学生、职场白领居多，追求个性化音乐品质，具备较高的消费力。

6. 信息结构

QQ音乐的产品信息结构非常庞大，从音乐业务到直播，社区，每一个版块所包含的内容都非常多，设计得非常细腻。其次还推出多种用户模式，比如简介模式、大字模式、亲子模式等，满足各类用户人群的需求。

7. 迭代记录

七麦数据显示，QQ音乐APP最早版本在2011年3月发布，但已经无法考证。目前可以追溯到的最早版本为V3.9.8，在2014年2月发布。截止到2022年7月10日，QQ音乐已经迭代升级到V11.8.1版本，过去一年平均迭代次数约28次。

版本迭代重要记录

2015年12月，发布V5.8版本，支持微信登录，推出「简洁模式」。 2019年7月，发布了V9.2版本，上线「推荐」，推出全新个性化推荐页面，根据用户的口味精选音乐； 2020年4月，发布V9.12.0版本，推出「听书」，支持盗墓笔记、摸金天师、斗罗大陆等精彩内容； 2020年6月，发布V9.16.0版本，推出「直播」，好声音、音乐人、才艺、颜值等多类型的音乐主播入驻，其次上线「青少年模式」； 2020年7月，发布V10.0.0版本，全新升级，推出「视频」、「扑通」等栏目，最近播放的歌曲支持展示至500首； 2022年7月9日，发布V11.8.1版本，推出「在听」、「音乐空间」，勋章体系全面升级。 8. 产品生命周期

QQ音乐经过17年的发展，月活跃用户人数超过2.2亿，行业独占率15%（100个听众里面有15个是QQ音乐的用户），行业第一，母公司腾讯音乐娱乐集团早在2018年就在美国纽交所上市，截止到2022年7月7日，市值84.25亿美元。目前QQ音乐处于生命周期的成熟期，产品聚焦于用户留存和新的商业变现增长点。

音乐服务 音乐服务作为QQ音乐最重要的功能内容，是产品实现商业变现和用户留存最重要的方式。QQ音乐拥有腾讯音乐娱乐集团的海量资源优势，用户基数多，音乐版权最全，音乐服务的设计可谓丰富多样。我把音乐服务拆分成6大类，分别是音乐馆、歌单、播放器、推荐机制和MV。

1. 音乐馆 「音乐馆」是QQ音乐的曲库，为用户提供热门歌曲的推荐和检索，用户可以根据歌手、歌单、排行榜等不同维度去查找歌曲。作为最核心的功能模块之一，「音乐馆」是为用户提供音乐服务的根本，是实现商业变现最重要的方式。目前QQ音乐不仅手握周杰伦这样的超级IP，相比其他音乐产品版权也是最丰富的。

搜索

「搜索」主要帮助用户快速查找歌曲，是一个非常基础但很重要的功能。在搜索的引导页，为用户提供歌手、排行、听歌识曲和分类歌单四个分类，方便用户查找。平台也会保留用户的搜索历史记录，「搜索发现」像一个热词推荐，主要引导用户查看热点。在底部展示了各类热搜排行榜，包括热门搜索、国风热搜、抖音搜索等，为用户提供了全面丰富的搜索指数排行榜。

搜索结果

QQ音乐的内容体系非常庞大，搜索结果根据综合、歌曲、视频、歌单、专辑、歌手、电台、扑通、歌词和用户十个维度进行展示。

「综合」是搜索结果的默认分类，这个页面聚合了所有和搜索关键词相关的内容，非常全面，几乎可以满足用户的所有检索需求。其他分类中，「歌曲」包含了该首歌曲的各种版本，比如live版本、Remix版本等，非常方便。其他分类搜索结果都非常直观，有效实现用户激活，快速找到喜欢的歌曲收听。

听歌识曲

「听歌识曲」是音乐产品比较常见的功能，在2015年的V5.1.1版本中就加入了。它的使用场景非常简单，当用户偶然听见某首歌曲但无法想起或者不知道这首歌的名字，QQ音乐就可以帮你快速识别，查找歌曲。甚至QQ音乐现在支持跨APP识别短视频歌曲，比如你在某个APP的视频发现某首歌曲好听，你可以通过手机设置让QQ音乐快速识别，非常方便。这个功能看上去虽然不起眼，但其实非常刚需，QQ音乐甚至支持用户添加到桌面快捷方式。

歌手

歌手按照地区（内地、港台、欧美、日韩）、性别（男、女、组合）和曲风（包含流行、摇滚、说唱、电子等常见曲风）进行划分，其次也可根据歌手姓氏快速查找。

歌手详情页

①「歌手详情页」是一个非常重要的落地页。在头部，关联了「扑通小组」和「周边商品」，这可以快速吸引粉丝消费变现，同时吸引粉丝加入扑通小组和其他歌迷一起交流，提高用户留存率。

② QQ音乐采用五个维度来介绍歌手，分别是百科、歌曲、专辑、视频和动态。「百科」是针对歌手的全面介绍，是一个聚合页，把歌手的精选歌曲、视频和留言板都展示出来，甚至可以查看歌手的留言记录，有效拉近歌手和粉丝的距离，增加亲切感。

③「歌曲」和「专辑」可按照热门、时间等类型进行筛选，也可以一键播放，非常方便，其次歌曲筛选还提供了一个非常冷门的功能，用户点击切换箭头后，可根据演唱、作词、作曲、制作人等进行筛选。

④「视频」收录了歌手的MV、现场演出和综艺等内容，方便粉丝观看，降低流失率。动态则展示了艺人在QQ音乐的动态记录，比如行程、留言、分享，为艺人和粉丝提供了一个沟通的桥梁。

排行榜

QQ音乐根据每日用户听歌、搜索以及歌曲的上升指数生成四大类排行榜。「巅峰榜」包含飙升榜、热歌榜、新歌榜等，「地区榜」包含内地、香港、台湾和欧美等榜单，「特色榜」按不同的主题比如影视金曲、DJ舞曲、动漫音乐生成榜单，「全球榜」包含全世界各地知名的排行榜，比如美国的billboard榜单、英国的UK榜等。排行榜不仅仅可以为用户提供多种找歌的场景，而且可以提升平台的权威性、专业度，吸引音乐人发布更多优秀作品。

音乐电台

电台属于比较传统的听歌方式，受众虽然小，但它是一个音乐产品的不可缺少的一个部分。平台按主题、心情、场景、曲风等不同的场景进行拆分，满足各类用户群特定的需求。在播放页，用户还可以切换不同的场景选择内容，比如学习工作、运动、睡前等。

专注电台

「专注电台」是一个小众功能，它提供了多种类型的声音，比如大海、森林、傍晚、天空、瀑布等，非常适用于学习、助眠和冥想等场景。甚至可以查看一起专注的用户，发布弹幕、打卡，生成专注分享卡，当你退出后，还会生成专注分享成就。

扑淘商城

「扑淘商城」是一个音乐周边的内容栏目，为用户提供明星的手办、T恤、实体专辑、公仔等物品，用户可直接下单购买，是平台实现商业变现的一个方式。

数字专辑

「数字专辑」是指没有实体CD，但购买后可不限制下载和收听的专辑。每一张数字专辑有一个专属ID，这个ID被称为铭牌。数字专辑是一块大蛋糕，艾瑞数据显示，2022年数字音乐市场规模预估高达269.4亿，这是QQ音乐商业变现重要方式。

数字化、单价低、购买便捷，甚至还可以送给朋友，数字专辑成为众多粉丝为了支持偶像的普遍行为，甚至为了一个靓号铭牌，不少粉丝都会争先恐后抢购。QQ音乐还根据专辑销售数量把专辑分为不同的评级，比如白金、钻石、殿堂等，这有效刺激了粉丝购买，从而实现商业变现。

专辑库

「专辑库」是一个相对冷门的功能，入口不醒目，但是用户可以根据专辑类型、流派、时间和产品公司查找歌手发布的专辑，数据非常完善，对于资深乐迷来说，这会是一个非常惊喜的功能。

数字藏品

「数字藏品」是一种创新型电子收藏品，它使用了区块链技术，对应特定的作品、艺术品生成的唯一数字凭证，与实体专辑等实物一样具有收藏价值，种类丰富、数量稀缺。QQ音乐的数字藏品内容丰富、玩法多样，包含专辑、视频/语音、手办周边等内容。

线上演出

「线上演出」是腾讯音乐娱乐集团全景音乐现场演出品牌TME live 的内容栏目，用户可以通过演出日历查找最新的演出公告，其次TME live的内容主要划分为live、乐见大牌、大牌live和精彩现场四大类，通过线下+线上以及纯线上的呈现方式，为用户带来沉浸感、高品质的演出体验，提升用户留存率。

音乐百科

QQ音乐百科致力于打造国内最权威最专业的音乐词典，内容由行业专业的音乐编辑、KOL以及用户联合打造，目前已有4278篇词条，主要通过H5方式打开，有PC版，但 用户体验 还比较粗糙。

音乐人专区

「音乐人专区」是一个内容聚合栏目，包含了新歌/新碟推荐、宝藏音乐人、MV精选、乐人志、独立唱片店、月刊、INIDE图鉴等内容，但这个栏目的内容定位并不是很清晰。

音乐分类专区

「音乐分类专区」是根据不同的音乐主题划分，比如影视、动漫、电音等主题，这就像是一个聚合栏目，把该主题的各种内容聚合起来，方便用户收听。这个栏目就像歌单把歌曲组合起来一样，增加场景属性，为用户提供丰富的听歌主题，从而提高用户留存率。

2. 歌单 分类

「歌单」作为现在音乐产品最重要的内容之一，主要由用户生产，也就是UGC模式。歌单主要根据热门、主题、场景、心情、年代、流派和语种这七大类进行划分，差不多有80个小分类，可以说覆盖了不同年龄阶段用户的口味。歌单其实就是把歌曲组合起来，增加了功能属性，让用户可以按场景、按主题听歌，从而解决用户找歌难的痛点，提升用户留存率。如果你读过微信读书的拆解，歌单和书单就是一个道理。

投稿

歌单创作的主力军主要是QQ音乐平台的广大音乐爱好者，通过社交酬赏机制，用户创建优质歌单，平台审核推荐，用户可获取听友们的点赞、评论，形成一个健康的音乐生态。QQ音乐专门生成了一个歌单达人馆排行榜，这充分利用了心理学的攀比心理，吸引用户创作更优质的歌单。

3. 播放页 「播放页」作为音乐播放的页面，是一个权重非常高的页面，这个页面不但要考虑用户的听歌体验，还要考虑用户激活。随着QQ音乐社交化、娱乐化的发展，如今播放页已经成为了一个重要的聚合页入口，这个小小的播放页设计了37个功能，11种分享方式以及17种歌曲海报，为用户提供各种个性化音乐服务。

歌曲

「歌曲」是播放页的默认分类，这个分类的功能比较多，所以我把它拆分为「个性化设置」、「听歌场景」、「音乐工具」和「分享方式」四种类型。「个性化设置」和「音乐工具」为用户提供多种音乐偏好的设置，满足各类用户需求，特别是音乐发烧友；「听歌场景」则是根据场景划分听歌需求，用户可以K歌、查看听歌的网友，甚至邀请好友一起听，把听歌的行为社交娱乐化；「分享方式」则是利用腾讯强大的社交生态优势，为用户设计了丰富多样化的分享方式和个性化海报，吸引用户分享，传播，从而拉新引流。

个性化设置

① 银河音效

「银河音效」是为了满足各种耳机发烧友对音质的追求。「银河音效」按照重低音、环绕、曲风等类型进行分类，多达数十种，完美解决各类用户人群的需求。平台还推出独家定制音效，支持适配各类品牌耳机、音响和汽车，吸引用户购买VIP会员，激活变现。另外QQ音乐还推出一个「声音实验室」的栏目，包含了智能煲机（帮助耳机快速达到最佳状态）、4D震动和动感闪光，黑科技赋能，让音乐更有趣。

② 播放设置

「播放设置」是一个为用户提供对音乐播放进行个性化设置的功能，包括无缝播放、淡入/淡出、音量平衡、智能音质增强等功能，可以满足某部分有特定音乐需求的用户。

③ 播放器样式

平台为用户提供了多种播放器样式，包含了黑胶唱机（深、浅）、静态方形、旋转圆形、静态圆形、歌手写真等样式，还支持智能光效和音乐影片的播放背景，满足各类用户对播放器样式个性化设置的需求。

④ 个性主题

「个性主题」为用户提供了丰富多样的主题装扮和头像挂件，包含明星、星座、影视、文艺等各种主题，当用户使用以后，整个QQ音乐的界面风格都会随之改变，这就像以前的QQ空间装扮，一键换肤，个性又时尚，深受年轻用户喜欢。「个性主题」作为为QQ会员独家专享打造的版块，是实现商业变现的重要手段。

⑤ 收藏屏蔽

当你喜欢某首歌曲的时候，你可以点击收藏，自动添加到你的默认歌单，这样对用户建立自己的歌单非常有帮助，从而提高用户留存率。而如果你不喜欢它的曲风，或者特别讨厌，你只需要点击屏蔽，平台在播放时会自动跳过，非常方便。

听歌场景

① 唱歌

「唱歌」是直接跳转到腾讯的另外一款音乐产品全民K歌，当用户听歌的时候突然想唱歌，那么可以直接进入全民K歌，有效降低用户的流失率，满足用户多场景的需求。

② 在听

「在听」是一个非常有趣的功能，进入在听以后，可以查看当前收听该首歌曲的音乐朋友，并且通过记录该首歌曲的听歌时间为歌迷划定歌迷等级，比如死忠乐迷、真爱乐迷，这个功能让听歌这个个人行升级为社交行为，增加了更多的社交属性，丰富了听歌场景，当然QQ音乐也支持用户可以设置关闭，满足各类用户需求。

③ 一起听

「一起听」是一个社交互动式的听歌功能，用户可以邀请好友一起听歌。当朋友进入后，还支持发表情，就像一个聊天室。这就像是专门为一些年轻小情侣量身定制的听歌场景一样，平台还会为用户生成听歌记录，比如一起听歌的时间，听过的歌曲等，甚至还会生成一个心动等级，激发用户为了更高等级使用这个功能。

④ 驾驶模式

「驾驶模式」非常简洁，系统会自动检测用户听歌的环境自动切换。这个功能的设计充分考虑了用户驾车时候需要换歌的场景，提供了语音找歌、个性电台、我喜欢的歌单、最近播放和电台，省去了用户开车时候不方便换歌的痛点，用户体验非常友好。

⑤ 评论

一边听歌一边看评论已经成为现在年轻用户非常喜欢的听歌方式，在评论里，可以找到这首歌很多感人的故事，引发共鸣，勾起回忆。用户进入评论后，除了可以看见其他用户的精彩评论，还可以进入歌手的扑通小组（类似贴吧），和其他歌迷一起交流，从而增加用户时间，提升用户留存率。

音乐工具

① 片段播放

「片段播放」提供按歌词选和按音轨选两种形式，用户可以自由裁取需要循环的片段反复收听。这有点像过去我们使用MP3或复读机收听歌曲那样，功能虽然简单，但可以满足某些特定场景使用。

② 倍速播放

用户可设置歌曲播放的倍速，支持0.5x到2.0x播放，这个功能在听书的时候特别实用，非常方便。

③ 定时关闭

用户在音乐播放中可开启定时关闭功能，比如15分钟、60分钟等，这个功能在助眠的时候非常方便，当你慢慢睡着的时候，音乐也随之关闭。

④ 设备投放

「设备投放」就是支持音乐投放到电视等其他电子设备，当一群朋友在家里为你过生日的时候，你可以把你的歌单直接投屏到电视，让大家一起陶醉在美好的音乐夜晚。

⑤ 设置铃声

当你觉得某首歌曲特别好听，想把它设置为铃声的时候，你不用去应用市场搜寻其它工具，你只需要进入「设置铃声」，你可以自己截取喜欢的音乐片段，系统也会自动智能截选一段精彩的铃声。在右上角提供了详细的铃声设置流程，教程非常简单。其次QQ音乐还有一个铃声专区，里面提供了海量的铃声选择。

⑥ 查看曲谱

「查看曲谱」是一个非常实用的功能，对于很多音乐爱好者来说，当在某个夜晚抱着吉他想弹奏某一首歌曲，你只需要打开「查看曲谱」，里面包含了智能吉他曲谱、智能尤克里里曲谱以及五线谱/六线谱/简谱。进入曲谱后，你还可进行自由编辑，比如编辑和弦、更改时值等。这种实用不起眼的小功能，对提升用户的满意度非常有帮助，可以抢夺用户时间，降低用户流失率。

分享方式

① 分享给好友

用户可以把歌曲分享给微信好友、QQ好友，还可以通过私信方式分享给QQ音乐好友。

② 设置听歌状态

用户可以把歌曲分享到朋友圈、QQ空间、扑通动态和新浪微博，吸引用户分享传播，拉新引流。

③ 分享到社区

用户还可以把歌曲分享到朋友圈、QQ空间、扑通动态和新浪微博，另外也可以选择生成精美的海报，提高用户分享兴趣。

生成海报分享

① 音乐卡片

「音乐卡片」为用户提供了8种精美的风格，有复古怀旧的磁带、CD风格，有黑白胶唱机风格，还有专属的VIP会员专享风格。卡片内容包含歌曲的封面、歌名、歌手、音乐指数和过去24小时收听人数等信息，目的是为了吸引更多的用户扫码听歌，其次VIP会员卡片还加入了QQ音乐豪华绿钻音乐卡片标识，彰显VIP会员地位。

② 歌词海报

在以前磁带、CD时代，抄歌词是广大音乐爱好者最美丽的回忆之一，「歌词海报」就是利用这样的分享场景，支持用户选择任意歌词，然后生成个性化的海报。「歌词海报」不仅提供了海量的背景图片，还支持用户自己上传，甚至还提供歌词字体选择，吸引用户主动分享。

③ 高光视频

「高光视频」就是一段30秒的音频，提供了6个精美的模版，用户保存到手机后，可以短视频的形式分享到视频号、朋友圈等平台，和静态的海报不同，这样的传播形式更能引起其他用户的关注，从而拉新引流。

④ 微信状态卡片

「微信状态卡片」为QQ音乐绿钻会员专享，为会员提供了多种精美的状态卡片，用户需要选择两行歌词，然后才能生成。这样个性化的设置同步到微信状态后，更能引起追求个性的年轻用户关注。

⑤ 歌词视频

「歌词视频」相比高光视频，功能更丰富，首先不限制用户选择歌词数量，其次提供了风景、科幻、自然等不同主题的视频模版，而且还支持用户自己拍摄。用户还可以选择音乐播放的起点，添加视频动效和滤镜。通过这样短视频的方式吸引用户分享到视频号以及更多的短视频平台，传播拉新。

歌词

弹幕

听歌弹幕就像视频弹幕，用户可以边听歌边发弹幕聊天，这是一个年轻用户非常喜欢的功能，用巴甫洛夫效应来解释，这就是用户对源源不断弹出的弹幕充满了期待，从而增加了听歌乐趣，提升用户使用时间。

歌词动效

「歌词动效」为用户提供了多种个性化模版，满足年轻用户的各种个性化需求，其次也是实现商业变现的方式之一，用户需要开通SVIP才能享受更多精美的动效模版。

歌词设置

用户可以调整歌词的字体大小、简繁转换、调整进度，还可以制作歌词海报进行分享。其中歌词海报支持静态图海报和视频海报制作，还提供了多种精美模版，吸引用户分享传播。

推荐

歌曲信息

用户可以查看歌曲详细信息，包括歌手、专辑、发布时间以及详细的制作详情。

音乐指数

「音乐指数」是一个非常创新的功能，QQ音乐根据用户听歌的次数、搜索的次数制定了一个官方的指数评级。用户可以从这个页面看到歌曲的实时数据，包括今日、昨日音乐指数、全站排名、上升趋势和歌曲成就等。

相关推荐

根据歌曲的曲风，平台会推荐相关歌曲，这有点像私人电台；其次平台还收录了歌曲的各种演绎版本，这真的非常方便，你可以轻松切换自己喜欢的版本；最后为用户推荐包含此歌曲的歌单、节目和视频，彻底抢占用户的时间。

用户激活

播放页同时承担了用户激活的重任，在用户加入VIP歌曲收听的时候，播放页会给用户VIP特权会员才能收听的提示。其次通过45s左右的免费试听吸引用户，预热用户的耳朵，最终激活用户开通VIP会员。

4. 推荐机制 在线音乐产品发展到现在，个性化的音乐推荐已经成为音乐产品最重要的功能，为用户解决找歌难、不知道听什么这个核心痛点，这是用户激活和留存的重要方式。QQ音乐的推荐机制特别丰富，根据不同的维度为用户推荐喜好的歌曲，从而提高用户留存率。

音乐偏好设置

音乐偏好分为五个维度，分别是探索、独特、新歌、冷门和多元，这是根据音乐用户人群特征进行划分，可以有效的快速划分用户类型，为用户推荐感兴趣的歌单。音乐偏好对于新用户的激活非常重要，通过有效的引导，可以快速捕捉用户的音乐偏好风格，从而留存用户，变为忠实用户。用户还可以对歌手进行偏好设置，比如你可以选择喜欢的歌手以及讨厌的歌手，从而增加或减少类似歌手的歌曲推荐。

根据时间推荐

根据用户音乐偏好，平台会每天为用户精选一张每日30首的歌单，这是一种用户激活的方式，可以解决用户选歌难的痛点。其次，平台会动态记录用户使用产品的时间，然后为用户生成适合场景的歌曲，比如在一个慵懒的周末下午，当你打开QQ音乐的时候，平台会为你推荐一个「下午时分 音乐相伴」的歌单，你可以听着这份歌单，喝着咖啡，看着窗外的风景，享受这美好的时光。

根据最近收听

当用户开始收听音乐以后，平台会立刻记录用户的听歌偏好，以此来为用户推荐音乐。「个性电台」是一个非常受用户欢迎的功能，因为它是随机播放的，有多变性，以3-4个为一组，用户可不断点击下一首，然后出现下一组，这会让用户上瘾。其次当用户听了某个歌手的歌曲，或者某首歌，平台会快速的根据算法生成相似风格的歌曲或歌单，让你的耳朵停不下来。

根据兴趣推荐

根据用户长期听歌的偏好，平台会为用户准备精心搜集的歌单。比如红心雷达，这是专门为用户打造的专属歌单，包含了用户收藏过的老歌以及可能喜欢的新歌。其次还会单独为用户私荐歌单，推送每日精选。

根据人群推荐

这个推荐机制充分利用了用户的从众心理，首先根据用户的听歌偏好为他推荐同类用户群都在收听的歌曲，提升用户听歌的广度，从而给用户更多的推荐。其次为用户推荐平台广受好评和收藏的歌单，比如百万收藏歌单，提高用户播放率。

根据信息流推荐

为了满足用户不同场景、兴趣的需求，平台采用了信息流设计为用户提供了多变、新鲜的歌单推荐，比如一个摇滚重度听歌用户也会尝试一下民谣、说唱，而信息流刚好就能满足这样的需求。用户只要愿意，就可以一直刷新，直到找到自己感兴趣的歌单，从而实现用户留存。

5. 雷达 「雷达」由「MV」升级而成，在V11.8.1版本正式推出，是根据用户的听歌偏好、兴趣生成。这个栏目和私人电台很像，以20首歌曲为一组，当用户听完后进入下一组。和私人电台不同，雷达结合了视频内容，用户页面上滑即可关联该首歌曲的音乐视频、live现场、综艺栏目等视频内容。作为菜单栏的一级栏目，可以看出QQ音乐对该功能的权重定位非常高。一方面是短视频成为了用户最喜欢的信息获取方式，另一方面是MV和听歌的场景非常匹配，对于用户留存率的提高，非常有帮助，有时候一旦刷起来就像抖音一样停不住。

6. 票务 「票务」主要为粉丝提供各种演唱会、livehouse、音乐会的门票购买。这个栏目虽然早在2014年的V4.0版本就上线，但栏目隐藏较深，内容设计也比较简单。普通用户通过购买票务可获赠绿钻会员，而绿钻会员、超级会员购买票务可享受折扣，这可以有效提升用户激活。其次票务还有一个演出日历的功能，可以购买未来一个月全国各地的演出门票，非常方便。

7. 听歌报告 「听歌报告」是一个非常贴心的功能，QQ音乐利用强大的数据分析能力，会把用户每月、每年的听歌数据生成月报、年报。月报划分为7个内容维度，分别是歌曲（当月主打）、艺人（心上艺人）、收藏（阅读尝鲜）、VIP（豪言钻语）、视频（耳濡目染）、电台（对的频道）和偏爱（个人档案）。

「当月主打」会记录用户本月的听歌时间和播放歌曲数量，包括当月收听最多的歌曲排行；「心上艺人」会计算当月收听歌手时长最长的歌手；「月度尝鲜」则会展示你当月全新关注的艺人，红心歌曲；「豪言钻语」会记录绿钻会员收听的VIP歌曲，突出会员的尊贵感；「耳濡目染」记录当月收看次数最多的视频；对的频道记录当月收听时长最长的电台、主播；「个人档案」则记录用户的分享记录。整个报告，数据完善，设计精美，吸引用户分享传播，拉新引流。

8. QQ音乐开放平台 QQ音乐发展至今，已经成为一个超级音乐平台，为各类音乐从业者、音乐达人提供入驻服务，包含音乐人（歌手、创作者）、校园音乐人、词曲作者、电台主播，还有歌单达人、视频达人和评论达人，帮助音乐人推广音乐、粉丝互动、数据分析、作品管理和创作变现。正是拥有了如此多的音乐从业者和音乐达人入驻，QQ音乐才能打造一个内容丰富的生态，从而提高用户留存率。

9. 音乐推 「音乐推」是QQ音乐平台为音乐人提供歌曲播放量、人气和关注度的有偿技术服务，目前在用户端APP层级隐藏得比较深，需要从活动中心的积分推歌才能进入。这个栏目的受众主要是针对音乐人以及相关的音乐机构，用户充值后可以直接推广歌曲。QQ音乐还提供了“智能推荐、达人推荐、电台推荐、热门搜索”等多种推荐类型，满足艺人的各种需求。

10. 小结 通过对音乐服务的拆解和推导，可以看出，QQ音乐作为腾讯音乐娱乐集团的旗舰产品，经过15年的发展，QQ音乐这个产品，早已不是一个简单的音乐播放工具。

他们不仅拥有全网最丰富的音乐版权资源，在音乐内容打造方面，通过多年的积累，他们创建了丰富完善的音乐百科，打造了TME live这样的王牌栏目；在商业变现方面，不仅有数字专辑这块大蛋糕，更有数字藏品、扑淘商城、音乐推这些新颖的变现方式；通过音乐的链接，拓展各种商业变现可能性。其次QQ音乐为各类音乐从业者、音乐达人提供入驻服务，通过无与伦比的流量和曝光优势，打造了一个内容丰富的音乐生态，满足各类用户的需求。

欢迎关注作者微信公众号：「设计大侦探」

前几天又重新拜读了尼尔森（Jakob Nielsen）关于单选与 复选 的文章《Checkbox vs. Radio Buttons》，虽说经典，但 2004 年的文章距离现在已有 18 年，有些原则在今天已经不够用了，有些甚至还可以拿出来探讨几番，倒是可以以此为引子和大家聊聊 单选 与复选。

文章里分享了一个小案例，在网页注册页面上，遇到了以下选择页：

尼尔森指出在这个案例里，错误地使用了复选组件，因为这两个选项是完全互斥的；另一个问题是展示了两个又臭又长的问题，应该使用一个简短的提问：“是的，请向我发送有关产品的信息。”

按照文章中的理解，我们可以将方案改成上图所示。文中指出，虽然很讽刺，但是单个问题用复选框是正确的。

在我看来这个例子在今天的互联网环境里显得太简单了。如果今天的产品需求是：让用户设置是否接收消息推送，且消息推送还分为评论、点赞、私信、系统通知…等等呢？用户对于评论、点赞、私信、和系统通知都可以选择接受或不接受，且选项间并不互斥。那么它会是什么样的呢？

相信大多数人的第一印象就如上图所示，虽然逻辑上很对，但是不是会感觉怪怪的，哪里都不对却又不知道从何说起？本期我们就来好好聊一聊单选与复选。

拓展阅读：

5000字干货！单选/复选/拨动开关的使用技巧全在这！ 前言 在 UI 设计中，无论从效率角度、还是视觉角度来讲，组件元素始终在界面中扮演着极其重要的角色，其作用主要是提升应用的可用性、易用性，以帮助用户轻松完成任务。

阅读文章 >

讲讲怎么设计 1. 样式

单选按钮（Radiobox）的设计来源于老式汽车收音机的物理按钮设计，老司机们用它来选择广播站点，当司机选择一个特定站点时，其他的按钮都会被弹出，只能按下一个按钮。

图片来源：Tumblr

所以它的样式也是收音机按钮的拟物化设计，在网页/桌面端中，单选的设计通常为「〇 + 选项」，如下图所示：

而网页/桌面端的多选（checkbox）则是以「口 + 选项 」的方式出现，如下图所示。

移动端的列表和标签都常用到单选，当它是列表时，多见于以右侧的打勾状态表示选中，当它是标签时，多以染上主题色表示选中，如下图所示：

有趣的是，桌面/网页端表示单选的「〇 + 选项」在移动端通常会被用做多选，不信的话，现在拿起手机微信，发起个群收款看看？或者打开淘宝购物车，批量购买几个商品看看？再打开网页版淘宝，同样批量购买几件商品看看？

为什么会出现网页/桌面端的单选样式在移动端竟为多选的现象，目前为止没有人做过讨论，我也只能以我浅浅的移动端经验猜测一下：移动端相比网页/桌面端画面小，一个页面所能承载的信息量远远不如网页/桌面端，从空间上讲，高亮选项比〇+√选中更节省空间；从信噪比上讲，〇 对用户选择没有任何助益，完全可以省略；实在需要通过√表示选择状态时，放在右侧也比放在左侧更不影响用户的阅读动线。此外从流程上讲，网页/桌面端一页能解决的事移动端需要分好几页，因此，移动端单选多为选中即跳转（实时操作），比如转发选择联系人时，注册时选择性别时、选择付款方式…对比而网页/桌面端，单选多为列表里众多问题中的一个，选完仍然留在该页面，选中状态的呈现比移动端重要得多。至于圆形还是方形的选择，根据不同移动产品的设计风格有不同的展现形式，没有哪样是绝对正确的，只能说现在大多数移动端都是用圆形，但方形的设计也存在，比如，Meterial Ddesign 就提供了方形的复选设计。一般来说只要自己产品内的设计语言是一致的，就不会有什么问题。

大多数移动端对于标签（或二级 tab）的单选和多选没有做样式上的区分，只是会在多选选中后，在标题或下一步操作旁列出所有已选项信息，这么多年大家用下来也没见太多人说看不懂，大概移动端的试错成本比较低，大家也更愿意尝试。但是如果硬要区分的话，可以选择都用胶囊做单选，矩形做多选。此外，还可以在文案中做适当的提示。

2. 基本原则

对于何时使用单选、何时使用复选，一直以来都没有什么争议，规则一直都是相同的:

当存在 2 个或多个互斥选项且用户只能选择一个选项时，使用单选；也就是说，选中一个单选项将取消选择之前在列表中的其他选项； 当存在多个选项且用户可以选择任意数量的选项时使用复选；每个复选项都独立于列表中的所有其他复选项，选中一个项并不会取消选中其他项； 除此之外还有一些附加的建议，比如：

文案建议使用正向的措辞

反面案例诸如上述案例中的，选择「要（yes）“不要给我发邮件”」，和「不要（no）“给我发邮件”」，肯定了否定总是比直接否定要绕更大的弯子；

单选项确保选项既全面又互斥

如果无法保证全面，需提供“其他”选项，比如在婚姻状态里，除已婚、未婚外，如果你不知道还有别的什么状态，最好提供“其他”选项作为补充，否则诸如，离异、丧偶等情况会无法使用该系统；

让用户通过点击整个选项来选择而不是「〇」或「口」

无论是单选还是多选，「〇」或「口」的面积都比较小，根据菲兹定律，更大的目标点击速度越快，所以增大选项的热区可以提升交互体验；

拓展阅读：

弹窗主按钮放左侧还是右侧？结合菲茨定律帮你梳理清晰！ 近期有个界面问题一直困扰着我，为此日思夜想，目前总算是有了点结果，今天和大家一起分享下。

阅读文章 >

选项之间按逻辑进行排序

按逻辑组织排序选项可以减少用户的理解成本；

这些都是没什么争议的基本原则，照做就行。

实例拓展 了解完单选与多选的通用样式以及基本的设计原则，我们来讲一些拓展场景。

1. 默认选项

既然是个选择题，首先捋一捋是否要给用户默认选项。对于默认选项这个问题，可以从平台倾向和用户使用习惯上去考虑。考虑平台倾向很好理解，比如在支付场景，如果是今天我是给阿里做设计，会默认选择支付宝付款，如果今天我是给腾讯做设计，就会默认选择微信支付。如下图所示淘宝网页端付款页面，就默认为用户选中了平台推荐的付款方式。

如果我们没有平台倾向，比如注册页面填写性别，或者新学期选课，那么我们就不需要给用户默认选择了，避免因平台引导性的设计导致数据偏差（比如，如果注册时平台默认选择男性，那么会有大部分人因懒得修改导致这个平台男性偏多，后续基于性别的所有分析都会出错）。

当然，没有平台倾向的情况下，我们可以多考虑一层用户习惯，还是以支付为例，如果是一个无人在意的购物平台，不需要引导用户选择支付宝支付或者微信支付，那么我们可以通过记住用户上次的支付方式，来简化购买流程，帮助快速成单。如果是在移动端，因为页面有限，我们甚至可以做得极致一些。提供默认选项的情况下，大多数会只露出推荐选项和修改入口，把其他选项藏在二级页面。比如淘宝的移动端支付，虽然选择付款方式是个必选单选题，但它只在页面里呈现了推荐选项和修改入口，其他付款方式都藏在了二级。

2. 只能用单选或多选吗

我们聊回开头的例题：让用户设置是否接收消息推送，且消息推送还分为评论、点赞、私信、系统通知。这么一通聊下来后，似乎可以得到以下优化方案：

虽然看上去稍微好了一点点，但我一直认为，什么样的逻辑用什么样的样式设计出来的方案只能达到 60 分，具体的场景还得做具体的分析。比如，在这个案例里，虽然接受消息类型理论上是一个多选，选择多选样式没有什么问题，但是例子里所有的多选项之间是互斥且无关联的，我们也可以简单理解为是多个单一是否题，即“是否接收评论消息”、“是否接收点赞消息”…在一个复杂的多选题和多个简单的是否题之间，多个简单的是否题会更简单一些，在移动端我认为开关（switch）会比多选（checkbox）更合适一些。

从多选改成开关后，视觉上的点击热区也跟着从难以用右手交互的左边移到了右边。简单来说，如果此时选择操作是该页面的主操作，且可以拆解成不冲突的是否题时，可以考虑用开关代替多选（可以理解成一个长段落填空题会比多个是否题体感上复杂度高）。

3. 到底是单选还是多选

开关、复选框和单选组件如何区别应用？看完这篇保证会！ 在 web 表单设计中，我们会经常遇到在开关、单选、复选框三个组件的选择使用上纠结，特别是只有两种状态下，比如开启/关闭、启用/关闭、显示/隐藏、同意/不同意、默认/自定义.... 我们发现使用 Switch 开关、Radio 单选和 Checkbox 复选这三个组件好像也都是可以的，

阅读文章 >

不知道有没有细心的朋友发现，移动端有很多个理解上是单选的地方用的却是多选的样式，包括但不限于：登录页的同意协议条款、发送图片是选择原图…

按理来说，这里的同意和不同意，发原图和不发原图，都更接近单选的逻辑，甚至可以用开关，那为什么不用呢？我们代入场景来思考下，登录页最重要的操作是什么，发送图片的场景最重要的操作是什么？是登录和发送图片。是否发送原图如果用开关就会因样式过强抢了页面内主要任务，如果同时提供“同意与不同意”、“原图和非原图”同样也挤占了较大的空间。此外它还不是选择即跳转，需要在原页面表示清楚可点击状态和选择状态，这种情况下用多选可以同时满足点击预期和状态展示，又不会挤占空间抢走用户本应专注于主流程的注意力。（题外话：登录页的同意条款有一个历史背景，最初的登录页都是默认勾选同意条款的，约 20 年初国家才规定了不许默认给用户勾选同意条款，所以虽然它是个必选，理应更明显一些，却一直沿用了以前的设计）。

4. 叠加选择

实际项目中，我们还有可能会遇到更复杂的情况，比如还是以消息系统为例，如果在你选中了为我推送评论消息后，产品还希望能给用户提供选择评论消息来源的能力，那么应该怎么设计呢？

在网页/移动端遇到这样的叠加选择时，一般都会在题目后，再展开一个多选题，让用户选择，如下图所示：

这样的思路直接套用在移动端的话会如何？我们画出来后，那种“你不能说它错，但就是哪哪都奇怪”的感觉又升上来了。

拆解一下哪里“怪”了。首先，选项里，接收来自陌生人、粉丝、好友的评论是接收评论消息的子选项，尽管两种方案都有意地通过缩进表达选项间的关系，但显然因为设计一致，所以感受并不明显；其次，因为每个大类下都有许多小类，当用户点打开的消息类型多了，将统领的标题顶出了屏幕外，场景的目标会变得模糊；最后，当用户选择接收系统消息，却不在子类选项里选择任何类型时，那么用户是接收系统消息还是不接收系统消息呢？这里存在一个逻辑缺陷。

遇到这种情况，我们可以采用分步骤的方式去解决，在一级页面分消息大类：评论、点赞、私信、系统消息…在二级页面选择接收来源或者不接收，如下图所示：

这样既表达了层级关系，又让上下文更紧密，且逻辑上也更严谨。如果这个产品的社交关系复杂点，有好友、特别关注、关注、铁粉、粉丝、陌生人等，那么显然我们不可能穷尽所有排列组合做单选，这时候可以在二级页面做多选或者开关，如下图所示：

之所以在这个例子里用了多选而不是开关，是因为这里的选项之间不互斥，不能简单理解成 A 和非 A（不是铁粉不代表不是粉丝），如果使用开关，当用户关闭了铁粉的评论推送却打开了粉丝的评论推送，就会逻辑不自洽（开关表示明显的拒绝，而不选择不代表拒绝）。

‍当然用户或许会自动理解成“只接收非铁粉粉丝”，但一百个读者有一百个哈姆雷特，总有用户有不同的理解，我们又很难讲清楚哪个才是正确的。为了表达清楚产品功能，建议不要使用会带来误解的设计形式。

高手是如何思考功能设计的？用单复选组件的案例告诉你！ 节前有一位读者问了一个关于单选与复选框样式选择的问题，大概是： 看到很多单选与多选的设计形式，多种多样，以前看到「圆点+圆圈」就知道是单选，但是为什么现在单选与多选的设计样式五花八门，都没有遵守前面这种规范呢？

阅读文章 >

欢迎关注作者微信公众号：「白话说交互」

前言 B 端业务场景下数据量多且复杂，对数据的精准度和查找效率要求高。本文基于威胁情报中心业务设计背景对 B 端搜索功能进行探究分析，总结设计过程中的思考和要点。

搜索设计 ：

如何做好搜索设计？我总结了3个原则！ 搜索设计看似简单，展现形式上只有一个输入框和搜索按钮就可以了，但是里面隐藏了很多交互细节。

阅读文章 >

概述 搜索是产品中很常见的一个功能，它需要丰富的底层数据作为其存在的必要条件，同时也具备很强的用户主动性，通过搜索让用户在海量的信息中快速找到自己的目标项。

搜索涉及到数据的匹配规则、算法的精准度及商业运营需求的影响，在设计过程中除了关注显性的设计内容，也需要明确如何更好地匹配用户的搜索需求、各个不同搜索入口的搜索方式、搜索结果的精确程度等方面，从多方面保障用户体验。

B 端的搜索构成 搜索流程可以拆解为三个关键节点，每个关键节点中都有设计需要核心关注的点，不同交互方式侧重也不同。

1. 搜索前 功能入口

B 端业务中搜索入口通常存在多个，常见的有首页搜索、顶部导航栏搜索，复杂的场景中也存在同一个页面中有多个搜索入口，设计前需梳理清楚每一个搜索入口的交互逻辑；不同搜索入口覆盖的搜索范围、搜索过程、搜索结果是否一致，在占位文本上也需体现出该搜索入口的搜索内容。

搜索方式

搜索方式包括全局搜索、定向搜索或两者兼具。

全局搜索

全局搜索是通过关键词匹配全局范围内的信息；设计全局搜索时要注意搜索后的结果展示逻辑。

其优势是无学习门槛，用户无需考虑内容对应的分类只需输入关键词；劣势是精准度不够高；搜索出来内容泛；需用户二次通过选项查找目标内容。

定向搜索

定向搜索则是由用户主动选定搜索范围后再进行搜索，优势是搜索精准度高，劣势是增加了部分用户的学习成本及操作步骤。

定向搜索适用的几种场景：

产品数据量足够大且重搜索、用户对于搜索有明确目标、定向可以帮助用户提高搜索的精准范围和效率； 搜索时输入的内容无法通过同一套搜索交互方式和后台计算逻辑承载，如单次搜索和批量搜索的输入格式不同，搜索结果存在多样性； 需外露产品亮点功能，对于前置条件的数据计算能力和开发成本更高。

可以根据产品的发展阶段、需求侧重、用户的专业度和使用习惯来综合决策使用哪一种方式更合适。如果侧重查询效率且用户是有专业门槛的使用者时，可以优先考虑定向搜索；如果侧重查询结果的丰富度，可以优先考虑全局搜索。

2. 搜索中 搜索激活

搜索激活指用户激活搜索框时出现的内容，B 端业务中搜索激活内容常见以下两种：

1）承载搜索历史或运营内容，如推荐搜索、相关搜索等。

2）承载定向搜索项，重引导先选择后输入，可同时选择多个定向范围进行搜索；适用于非核心但数据维度复杂的搜索场景。

搜索反馈

搜索反馈指用户输入本文时未确认搜索执行的中间过程状态。在 B 端场景下搜索反馈具备很强的引导作用，相较于 C 端减少了触觉和听觉反馈，常通过视觉反馈（颜色、样式、文本）给予用户当下的状态提示。

关键词联想

搜索联想承载的不止显性的设计呈现，还有背后的算法逻辑；例如是否可以识别拼音、不同搜索方式呈现的联想词范围，都需要提前确认落地可行性后再统一定义相关交互规则，并在产品中的所有搜索场景中保持相同的交互逻辑。

状态反馈

搜索过程中的异常情况需实时给予用户精准反馈，将反馈内容前置可以减少用户后续的往返操作步骤。

触发方式

常规搜索通过点击按钮或回车触发，但无法覆盖一些复杂场景下的搜索触发；如威胁情报业务中有批量搜索功能，输入内容包含多种标点符号，如果使用常规的回车键作为触发则无法生成单条搜索内容（下图），这时就需要定义清楚不同场景下的触发规则。

3. 搜索后 搜索结果

搜索结果根据搜索方式及内容决定。全局搜索多数场景下为模糊搜索-展示结果分类，但在特殊场景时也会存在隐藏的搜索逻辑，如威胁情报中心中单次搜索时，搜索结果优先判断是否命中具体的搜索项，命中展示搜索结果详情，未命中则展示包含关键词的模糊搜索结果。

设计注意事项&思考 基于上述的搜索构成可以总结出在设计过程中的关键要素和需要思考清楚的交互细节。

1. 关键词匹配逻辑

当前多数的 B 端场景搜索功能都很简单，在内容匹配的定义上也比较模糊；随着业务的发展，可以参考 C 端的搜索场景，将更多设计细节借鉴在 B 端业务中来帮助提升使用体验和效率。

例如在微博分别搜索眼影盘、品牌名称、书单、电视剧名称，这几个关键词的结果页中基础交互架构是相同的，但内容排列是完全不同的，分析后认为结果是以关键词类别+用户搜索目的+运营策略来做判断的。

2. 多端适配

B 端除了 web 端外，部分产品也会存在着多端场景，如云防火墙、威胁情报等都有小程序版本。基本都是先有 web 端产品之后延伸到移动端，这时用户的使用习惯已经养成，所以在做多端适配时，视觉上因为尺寸限制不能完全还原，但在交互逻辑上务必保持统一性，避免用户新的学习成本。

总结 搜索乍看是很简单的功能，其实在设计过程中包含了很多细节和规则需要定义清楚，每个产品对于搜索功能的需求不同，在设计初期也需要跟产品充分沟通达成一致。

交互设计 通常不止一种解决方案，决策时可以根据具体场景下用户最核心的使用需求和初期沟通的设计目标作为参考，在功能和体验之间做好取舍。

欢迎关注作者微信公众号：「腾讯设计族」

前言 B 端业务场景下数据量多且复杂，对数据的精准度和查找效率要求高。本文基于威胁情报中心业务设计背景对 B 端搜索功能进行探究分析，总结设计过程中的思考和要点。

搜索设计 ：

如何做好搜索设计？我总结了3个原则！ 搜索设计看似简单，展现形式上只有一个输入框和搜索按钮就可以了，但是里面隐藏了很多交互细节。

阅读文章 >

概述 搜索是产品中很常见的一个功能，它需要丰富的底层数据作为其存在的必要条件，同时也具备很强的用户主动性，通过搜索让用户在海量的信息中快速找到自己的目标项。

搜索涉及到数据的匹配规则、算法的精准度及商业运营需求的影响，在设计过程中除了关注显性的设计内容，也需要明确如何更好地匹配用户的搜索需求、各个不同搜索入口的搜索方式、搜索结果的精确程度等方面，从多方面保障用户体验。

B 端的搜索构成 搜索流程可以拆解为三个关键节点，每个关键节点中都有设计需要核心关注的点，不同交互方式侧重也不同。

1. 搜索前 功能入口

B 端业务中搜索入口通常存在多个，常见的有首页搜索、顶部导航栏搜索，复杂的场景中也存在同一个页面中有多个搜索入口，设计前需梳理清楚每一个搜索入口的交互逻辑；不同搜索入口覆盖的搜索范围、搜索过程、搜索结果是否一致，在占位文本上也需体现出该搜索入口的搜索内容。

搜索方式

搜索方式包括全局搜索、定向搜索或两者兼具。

全局搜索

全局搜索是通过关键词匹配全局范围内的信息；设计全局搜索时要注意搜索后的结果展示逻辑。

其优势是无学习门槛，用户无需考虑内容对应的分类只需输入关键词；劣势是精准度不够高；搜索出来内容泛；需用户二次通过选项查找目标内容。

定向搜索

定向搜索则是由用户主动选定搜索范围后再进行搜索，优势是搜索精准度高，劣势是增加了部分用户的学习成本及操作步骤。

定向搜索适用的几种场景：

产品数据量足够大且重搜索、用户对于搜索有明确目标、定向可以帮助用户提高搜索的精准范围和效率； 搜索时输入的内容无法通过同一套搜索交互方式和后台计算逻辑承载，如单次搜索和批量搜索的输入格式不同，搜索结果存在多样性； 需外露产品亮点功能，对于前置条件的数据计算能力和开发成本更高。

可以根据产品的发展阶段、需求侧重、用户的专业度和使用习惯来综合决策使用哪一种方式更合适。如果侧重查询效率且用户是有专业门槛的使用者时，可以优先考虑定向搜索；如果侧重查询结果的丰富度，可以优先考虑全局搜索。

2. 搜索中 搜索激活

搜索激活指用户激活搜索框时出现的内容，B 端业务中搜索激活内容常见以下两种：

1）承载搜索历史或运营内容，如推荐搜索、相关搜索等。

2）承载定向搜索项，重引导先选择后输入，可同时选择多个定向范围进行搜索；适用于非核心但数据维度复杂的搜索场景。

搜索反馈

搜索反馈指用户输入本文时未确认搜索执行的中间过程状态。在 B 端场景下搜索反馈具备很强的引导作用，相较于 C 端减少了触觉和听觉反馈，常通过视觉反馈（颜色、样式、文本）给予用户当下的状态提示。

关键词联想

搜索联想承载的不止显性的设计呈现，还有背后的算法逻辑；例如是否可以识别拼音、不同搜索方式呈现的联想词范围，都需要提前确认落地可行性后再统一定义相关交互规则，并在产品中的所有搜索场景中保持相同的交互逻辑。

状态反馈

搜索过程中的异常情况需实时给予用户精准反馈，将反馈内容前置可以减少用户后续的往返操作步骤。

触发方式

常规搜索通过点击按钮或回车触发，但无法覆盖一些复杂场景下的搜索触发；如威胁情报业务中有批量搜索功能，输入内容包含多种标点符号，如果使用常规的回车键作为触发则无法生成单条搜索内容（下图），这时就需要定义清楚不同场景下的触发规则。

3. 搜索后 搜索结果

搜索结果根据搜索方式及内容决定。全局搜索多数场景下为模糊搜索-展示结果分类，但在特殊场景时也会存在隐藏的搜索逻辑，如威胁情报中心中单次搜索时，搜索结果优先判断是否命中具体的搜索项，命中展示搜索结果详情，未命中则展示包含关键词的模糊搜索结果。

设计注意事项&思考 基于上述的搜索构成可以总结出在设计过程中的关键要素和需要思考清楚的交互细节。

1. 关键词匹配逻辑

当前多数的 B 端场景搜索功能都很简单，在内容匹配的定义上也比较模糊；随着业务的发展，可以参考 C 端的搜索场景，将更多设计细节借鉴在 B 端业务中来帮助提升使用体验和效率。

例如在微博分别搜索眼影盘、品牌名称、书单、电视剧名称，这几个关键词的结果页中基础交互架构是相同的，但内容排列是完全不同的，分析后认为结果是以关键词类别+用户搜索目的+运营策略来做判断的。

2. 多端适配

B 端除了 web 端外，部分产品也会存在着多端场景，如云防火墙、威胁情报等都有小程序版本。基本都是先有 web 端产品之后延伸到移动端，这时用户的使用习惯已经养成，所以在做多端适配时，视觉上因为尺寸限制不能完全还原，但在交互逻辑上务必保持统一性，避免用户新的学习成本。

总结 搜索乍看是很简单的功能，其实在设计过程中包含了很多细节和规则需要定义清楚，每个产品对于搜索功能的需求不同，在设计初期也需要跟产品充分沟通达成一致。

交互设计 通常不止一种解决方案，决策时可以根据具体场景下用户最核心的使用需求和初期沟通的设计目标作为参考，在功能和体验之间做好取舍。

欢迎关注作者微信公众号：「腾讯设计族」

前几天又重新拜读了尼尔森（Jakob Nielsen）关于单选与 复选 的文章《Checkbox vs. Radio Buttons》，虽说经典，但 2004 年的文章距离现在已有 18 年，有些原则在今天已经不够用了，有些甚至还可以拿出来探讨几番，倒是可以以此为引子和大家聊聊 单选 与复选。

文章里分享了一个小案例，在网页注册页面上，遇到了以下选择页：

尼尔森指出在这个案例里，错误地使用了复选组件，因为这两个选项是完全互斥的；另一个问题是展示了两个又臭又长的问题，应该使用一个简短的提问：“是的，请向我发送有关产品的信息。”

按照文章中的理解，我们可以将方案改成上图所示。文中指出，虽然很讽刺，但是单个问题用复选框是正确的。

在我看来这个例子在今天的互联网环境里显得太简单了。如果今天的产品需求是：让用户设置是否接收消息推送，且消息推送还分为评论、点赞、私信、系统通知…等等呢？用户对于评论、点赞、私信、和系统通知都可以选择接受或不接受，且选项间并不互斥。那么它会是什么样的呢？

相信大多数人的第一印象就如上图所示，虽然逻辑上很对，但是不是会感觉怪怪的，哪里都不对却又不知道从何说起？本期我们就来好好聊一聊单选与复选。

拓展阅读：

5000字干货！单选/复选/拨动开关的使用技巧全在这！ 前言 在 UI 设计中，无论从效率角度、还是视觉角度来讲，组件元素始终在界面中扮演着极其重要的角色，其作用主要是提升应用的可用性、易用性，以帮助用户轻松完成任务。

阅读文章 >

讲讲怎么设计 1. 样式

单选按钮（Radiobox）的设计来源于老式汽车收音机的物理按钮设计，老司机们用它来选择广播站点，当司机选择一个特定站点时，其他的按钮都会被弹出，只能按下一个按钮。

图片来源：Tumblr

所以它的样式也是收音机按钮的拟物化设计，在网页/桌面端中，单选的设计通常为「〇 + 选项」，如下图所示：

而网页/桌面端的多选（checkbox）则是以「口 + 选项 」的方式出现，如下图所示。

移动端的列表和标签都常用到单选，当它是列表时，多见于以右侧的打勾状态表示选中，当它是标签时，多以染上主题色表示选中，如下图所示：

有趣的是，桌面/网页端表示单选的「〇 + 选项」在移动端通常会被用做多选，不信的话，现在拿起手机微信，发起个群收款看看？或者打开淘宝购物车，批量购买几个商品看看？再打开网页版淘宝，同样批量购买几件商品看看？

为什么会出现网页/桌面端的单选样式在移动端竟为多选的现象，目前为止没有人做过讨论，我也只能以我浅浅的移动端经验猜测一下：移动端相比网页/桌面端画面小，一个页面所能承载的信息量远远不如网页/桌面端，从空间上讲，高亮选项比〇+√选中更节省空间；从信噪比上讲，〇 对用户选择没有任何助益，完全可以省略；实在需要通过√表示选择状态时，放在右侧也比放在左侧更不影响用户的阅读动线。此外从流程上讲，网页/桌面端一页能解决的事移动端需要分好几页，因此，移动端单选多为选中即跳转（实时操作），比如转发选择联系人时，注册时选择性别时、选择付款方式…对比而网页/桌面端，单选多为列表里众多问题中的一个，选完仍然留在该页面，选中状态的呈现比移动端重要得多。至于圆形还是方形的选择，根据不同移动产品的设计风格有不同的展现形式，没有哪样是绝对正确的，只能说现在大多数移动端都是用圆形，但方形的设计也存在，比如，Meterial Ddesign 就提供了方形的复选设计。一般来说只要自己产品内的设计语言是一致的，就不会有什么问题。

大多数移动端对于标签（或二级 tab）的单选和多选没有做样式上的区分，只是会在多选选中后，在标题或下一步操作旁列出所有已选项信息，这么多年大家用下来也没见太多人说看不懂，大概移动端的试错成本比较低，大家也更愿意尝试。但是如果硬要区分的话，可以选择都用胶囊做单选，矩形做多选。此外，还可以在文案中做适当的提示。

2. 基本原则

对于何时使用单选、何时使用复选，一直以来都没有什么争议，规则一直都是相同的:

当存在 2 个或多个互斥选项且用户只能选择一个选项时，使用单选；也就是说，选中一个单选项将取消选择之前在列表中的其他选项； 当存在多个选项且用户可以选择任意数量的选项时使用复选；每个复选项都独立于列表中的所有其他复选项，选中一个项并不会取消选中其他项； 除此之外还有一些附加的建议，比如：

文案建议使用正向的措辞

反面案例诸如上述案例中的，选择「要（yes）“不要给我发邮件”」，和「不要（no）“给我发邮件”」，肯定了否定总是比直接否定要绕更大的弯子；

单选项确保选项既全面又互斥

如果无法保证全面，需提供“其他”选项，比如在婚姻状态里，除已婚、未婚外，如果你不知道还有别的什么状态，最好提供“其他”选项作为补充，否则诸如，离异、丧偶等情况会无法使用该系统；

让用户通过点击整个选项来选择而不是「〇」或「口」

无论是单选还是多选，「〇」或「口」的面积都比较小，根据菲兹定律，更大的目标点击速度越快，所以增大选项的热区可以提升交互体验；

拓展阅读：

弹窗主按钮放左侧还是右侧？结合菲茨定律帮你梳理清晰！ 近期有个界面问题一直困扰着我，为此日思夜想，目前总算是有了点结果，今天和大家一起分享下。

阅读文章 >

选项之间按逻辑进行排序

按逻辑组织排序选项可以减少用户的理解成本；

这些都是没什么争议的基本原则，照做就行。

实例拓展 了解完单选与多选的通用样式以及基本的设计原则，我们来讲一些拓展场景。

1. 默认选项

既然是个选择题，首先捋一捋是否要给用户默认选项。对于默认选项这个问题，可以从平台倾向和用户使用习惯上去考虑。考虑平台倾向很好理解，比如在支付场景，如果是今天我是给阿里做设计，会默认选择支付宝付款，如果今天我是给腾讯做设计，就会默认选择微信支付。如下图所示淘宝网页端付款页面，就默认为用户选中了平台推荐的付款方式。

如果我们没有平台倾向，比如注册页面填写性别，或者新学期选课，那么我们就不需要给用户默认选择了，避免因平台引导性的设计导致数据偏差（比如，如果注册时平台默认选择男性，那么会有大部分人因懒得修改导致这个平台男性偏多，后续基于性别的所有分析都会出错）。

当然，没有平台倾向的情况下，我们可以多考虑一层用户习惯，还是以支付为例，如果是一个无人在意的购物平台，不需要引导用户选择支付宝支付或者微信支付，那么我们可以通过记住用户上次的支付方式，来简化购买流程，帮助快速成单。如果是在移动端，因为页面有限，我们甚至可以做得极致一些。提供默认选项的情况下，大多数会只露出推荐选项和修改入口，把其他选项藏在二级页面。比如淘宝的移动端支付，虽然选择付款方式是个必选单选题，但它只在页面里呈现了推荐选项和修改入口，其他付款方式都藏在了二级。

2. 只能用单选或多选吗

我们聊回开头的例题：让用户设置是否接收消息推送，且消息推送还分为评论、点赞、私信、系统通知。这么一通聊下来后，似乎可以得到以下优化方案：

虽然看上去稍微好了一点点，但我一直认为，什么样的逻辑用什么样的样式设计出来的方案只能达到 60 分，具体的场景还得做具体的分析。比如，在这个案例里，虽然接受消息类型理论上是一个多选，选择多选样式没有什么问题，但是例子里所有的多选项之间是互斥且无关联的，我们也可以简单理解为是多个单一是否题，即“是否接收评论消息”、“是否接收点赞消息”…在一个复杂的多选题和多个简单的是否题之间，多个简单的是否题会更简单一些，在移动端我认为开关（switch）会比多选（checkbox）更合适一些。

从多选改成开关后，视觉上的点击热区也跟着从难以用右手交互的左边移到了右边。简单来说，如果此时选择操作是该页面的主操作，且可以拆解成不冲突的是否题时，可以考虑用开关代替多选（可以理解成一个长段落填空题会比多个是否题体感上复杂度高）。

3. 到底是单选还是多选

开关、复选框和单选组件如何区别应用？看完这篇保证会！ 在 web 表单设计中，我们会经常遇到在开关、单选、复选框三个组件的选择使用上纠结，特别是只有两种状态下，比如开启/关闭、启用/关闭、显示/隐藏、同意/不同意、默认/自定义.... 我们发现使用 Switch 开关、Radio 单选和 Checkbox 复选这三个组件好像也都是可以的，

阅读文章 >

不知道有没有细心的朋友发现，移动端有很多个理解上是单选的地方用的却是多选的样式，包括但不限于：登录页的同意协议条款、发送图片是选择原图…

按理来说，这里的同意和不同意，发原图和不发原图，都更接近单选的逻辑，甚至可以用开关，那为什么不用呢？我们代入场景来思考下，登录页最重要的操作是什么，发送图片的场景最重要的操作是什么？是登录和发送图片。是否发送原图如果用开关就会因样式过强抢了页面内主要任务，如果同时提供“同意与不同意”、“原图和非原图”同样也挤占了较大的空间。此外它还不是选择即跳转，需要在原页面表示清楚可点击状态和选择状态，这种情况下用多选可以同时满足点击预期和状态展示，又不会挤占空间抢走用户本应专注于主流程的注意力。（题外话：登录页的同意条款有一个历史背景，最初的登录页都是默认勾选同意条款的，约 20 年初国家才规定了不许默认给用户勾选同意条款，所以虽然它是个必选，理应更明显一些，却一直沿用了以前的设计）。

4. 叠加选择

实际项目中，我们还有可能会遇到更复杂的情况，比如还是以消息系统为例，如果在你选中了为我推送评论消息后，产品还希望能给用户提供选择评论消息来源的能力，那么应该怎么设计呢？

在网页/移动端遇到这样的叠加选择时，一般都会在题目后，再展开一个多选题，让用户选择，如下图所示：

这样的思路直接套用在移动端的话会如何？我们画出来后，那种“你不能说它错，但就是哪哪都奇怪”的感觉又升上来了。

拆解一下哪里“怪”了。首先，选项里，接收来自陌生人、粉丝、好友的评论是接收评论消息的子选项，尽管两种方案都有意地通过缩进表达选项间的关系，但显然因为设计一致，所以感受并不明显；其次，因为每个大类下都有许多小类，当用户点打开的消息类型多了，将统领的标题顶出了屏幕外，场景的目标会变得模糊；最后，当用户选择接收系统消息，却不在子类选项里选择任何类型时，那么用户是接收系统消息还是不接收系统消息呢？这里存在一个逻辑缺陷。

遇到这种情况，我们可以采用分步骤的方式去解决，在一级页面分消息大类：评论、点赞、私信、系统消息…在二级页面选择接收来源或者不接收，如下图所示：

这样既表达了层级关系，又让上下文更紧密，且逻辑上也更严谨。如果这个产品的社交关系复杂点，有好友、特别关注、关注、铁粉、粉丝、陌生人等，那么显然我们不可能穷尽所有排列组合做单选，这时候可以在二级页面做多选或者开关，如下图所示：

之所以在这个例子里用了多选而不是开关，是因为这里的选项之间不互斥，不能简单理解成 A 和非 A（不是铁粉不代表不是粉丝），如果使用开关，当用户关闭了铁粉的评论推送却打开了粉丝的评论推送，就会逻辑不自洽（开关表示明显的拒绝，而不选择不代表拒绝）。

‍当然用户或许会自动理解成“只接收非铁粉粉丝”，但一百个读者有一百个哈姆雷特，总有用户有不同的理解，我们又很难讲清楚哪个才是正确的。为了表达清楚产品功能，建议不要使用会带来误解的设计形式。

高手是如何思考功能设计的？用单复选组件的案例告诉你！ 节前有一位读者问了一个关于单选与复选框样式选择的问题，大概是： 看到很多单选与多选的设计形式，多种多样，以前看到「圆点+圆圈」就知道是单选，但是为什么现在单选与多选的设计样式五花八门，都没有遵守前面这种规范呢？

阅读文章 >

欢迎关注作者微信公众号：「白话说交互」

大家好，我是和你们聊设计的花生~

昨天在微博上看到韦伯望远镜拍摄的一套全彩宇宙深空图像，深邃神秘，有一种震撼人心的美。每次看到这样的图片内心都有莫名的澎湃，不知道大家有没有同样的感觉呢？

有关宇宙的素材在设计中使用的也很广泛，比如银河、星球、宇航员等，可以营造出浪漫神秘或者未来科技感的氛围。正好之前在微博上看到一个生成 像素风 星球的网站—— Pixel Planet Generator ，自己试了一下，感觉非常有趣，而且网站和生成的素材都可以免费使用。下面就为大家详细介绍这个网站的用法，一起来看看吧~

收下这个设计神器 Pixel me，一键生成像素风格头像 最近⼤家是不是都看到过关于 “ NFT ” 的报道，比如：“疯狂的 NFT 头像：俩⽉暴涨 144 倍，1180 万美元买⼀个虚拟头像？

阅读文章 >

Pixel Planet Generator itch.io 应用主页： https://deep-fold.itch.io/pixel-planet-generator

Github 程序源代码链接： https://github.com/Deep-Fold/PixelPlanets

Pixel Planet Generator 是 itch.io 上的独立游戏制作人 Deep-Fold 分享的一款开源程序，可以用来制作各种类型的宇宙天体。程序免费下载，生成的各种元素也全面免费，可以做任意途径的使用。开发者还将程序的源代码开放到 Github 上，供大家学习使用。

1. 使用介绍

Pixel Planet Generator 内包含 8 个调节项，可以更改行星类型、外表形态、像素量、旋转角度、色彩、导出样式等，这样就可以生成素材的样式就非常丰富了。

行星类型中有 12 个可供选择的行星类型，包括黑洞、星云这种比较独特天体其中也有提供。选择一种行星后可以通过调节「随机外表形态」、「像素量」和「旋转」等参数对齐外表进行修改。

Pixel Planet Generator 还有对行星颜色进行修改的选项，但是却不好轻易改动，弄不好就会产生一些非常辣眼的配色。大家可以直接使用色彩里的「rand」选项，里面有搭配好的颜色，效果也不错；如果没有合适的但又担心自己配色弄不好，可以参照下面的调整配色的思路：

不改变原有的色彩明度，修改色相即可，也可以适当微调饱和度； 控制颜色数量，1-3个颜色皆可，然后在色系内寻求变化； 直接找现有的配色方法或者色卡。

除此之外，Pixel Planet Generator 还可以修改光照方向，操作方法是直接在左侧的星球显示界面按住鼠标拖动，光照的方向就会随鼠标的易懂方向改变了。

自从知道这3个配色神器后，配色容易多了！ Hi，我是彩云。

阅读文章 >

配色找不到感觉？这个PCCS色彩体系帮你从根本上解决（二） 色彩明度与纯度的 4 种类型配色，你知道吗？

阅读文章 >

2. 文件导出与程序下载

Pixel Planet Generator 可以直接在网页中使用，也可以下载程序软件。调整好星球的样式之后，点击 PNG 就能直接下载，如果是 GIF，可以设置帧数和时长，导出时会有读条。网页版直接通过浏览器下载到默认储存路径；如果是程序软件，文件为直接下载到程序本身所在的文件夹。

想下载程序的小伙子直接点击网页中间的红色 DOWNLOAD 按钮，在弹出的窗口内选择「No thanks, just take me to the downloads」就可以免费下载了（当然喜欢的老板也可以尽情打赏），软件支持 Windows 和 Linux 两个系统。

以上就是今天的分享，喜欢的小伙伴记得点赞收藏，也可以转发给你身边有样机需要的朋友~ 如果你有关于本文或者其他设计疑问，可以在评论区提出，我会第一时间为大家回复~

大家好，我是和你们聊设计的花生~

昨天在微博上看到韦伯望远镜拍摄的一套全彩宇宙深空图像，深邃神秘，有一种震撼人心的美。每次看到这样的图片内心都有莫名的澎湃，不知道大家有没有同样的感觉呢？

有关宇宙的素材在设计中使用的也很广泛，比如银河、星球、宇航员等，可以营造出浪漫神秘或者未来科技感的氛围。正好之前在微博上看到一个生成 像素风 星球的网站—— Pixel Planet Generator ，自己试了一下，感觉非常有趣，而且网站和生成的素材都可以免费使用。下面就为大家详细介绍这个网站的用法，一起来看看吧~

收下这个设计神器 Pixel me，一键生成像素风格头像 最近⼤家是不是都看到过关于 “ NFT ” 的报道，比如：“疯狂的 NFT 头像：俩⽉暴涨 144 倍，1180 万美元买⼀个虚拟头像？

阅读文章 >

Pixel Planet Generator itch.io 应用主页： https://deep-fold.itch.io/pixel-planet-generator

Github 程序源代码链接： https://github.com/Deep-Fold/PixelPlanets

Pixel Planet Generator 是 itch.io 上的独立游戏制作人 Deep-Fold 分享的一款开源程序，可以用来制作各种类型的宇宙天体。程序免费下载，生成的各种元素也全面免费，可以做任意途径的使用。开发者还将程序的源代码开放到 Github 上，供大家学习使用。

1. 使用介绍

Pixel Planet Generator 内包含 8 个调节项，可以更改行星类型、外表形态、像素量、旋转角度、色彩、导出样式等，这样就可以生成素材的样式就非常丰富了。

行星类型中有 12 个可供选择的行星类型，包括黑洞、星云这种比较独特天体其中也有提供。选择一种行星后可以通过调节「随机外表形态」、「像素量」和「旋转」等参数对齐外表进行修改。

Pixel Planet Generator 还有对行星颜色进行修改的选项，但是却不好轻易改动，弄不好就会产生一些非常辣眼的配色。大家可以直接使用色彩里的「rand」选项，里面有搭配好的颜色，效果也不错；如果没有合适的但又担心自己配色弄不好，可以参照下面的调整配色的思路：

不改变原有的色彩明度，修改色相即可，也可以适当微调饱和度； 控制颜色数量，1-3个颜色皆可，然后在色系内寻求变化； 直接找现有的配色方法或者色卡。

除此之外，Pixel Planet Generator 还可以修改光照方向，操作方法是直接在左侧的星球显示界面按住鼠标拖动，光照的方向就会随鼠标的易懂方向改变了。

自从知道这3个配色神器后，配色容易多了！ Hi，我是彩云。

阅读文章 >

配色找不到感觉？这个PCCS色彩体系帮你从根本上解决（二） 色彩明度与纯度的 4 种类型配色，你知道吗？

阅读文章 >

2. 文件导出与程序下载

Pixel Planet Generator 可以直接在网页中使用，也可以下载程序软件。调整好星球的样式之后，点击 PNG 就能直接下载，如果是 GIF，可以设置帧数和时长，导出时会有读条。网页版直接通过浏览器下载到默认储存路径；如果是程序软件，文件为直接下载到程序本身所在的文件夹。

想下载程序的小伙子直接点击网页中间的红色 DOWNLOAD 按钮，在弹出的窗口内选择「No thanks, just take me to the downloads」就可以免费下载了（当然喜欢的老板也可以尽情打赏），软件支持 Windows 和 Linux 两个系统。

以上就是今天的分享，喜欢的小伙伴记得点赞收藏，也可以转发给你身边有样机需要的朋友~ 如果你有关于本文或者其他设计疑问，可以在评论区提出，我会第一时间为大家回复~

我从小半年来询问比较多的问题里总结出最有价值的 4 个问题做阐述（主要是同样问题被询问三百多遍了）

总结过程中，我尝试加入了学习、工作、和职业生涯过程中比较有价值的一些心得进行了分享，希望对于你的前进方向，有一定的指引作用。

工作一两年还在原地踏步的UI设计师，该如何进阶学习？ 大家知道，长期以来我们一直在坚持分享一些基础的干货内容，那些看书、看分享很难系统搞得明白的知识点，这和我个人对基本功的执念有密不可分的关系。

阅读文章 >

“我曾在银色平原漫步，也曾在青草之河垂钓。我既是平静的海面，又是汹涌的风暴。我能做的，别人都不行，所以我责无旁贷。”