本次分享的项目是达达快送品牌IP达哥,这个项目是由@宝箱 @Masaya @小刘三人合作完成。
希望通过分享能打响达哥的知名度，并且通过沉淀的方法论能够帮助大家应用于日常工作中。

收藏

收藏

收藏

收藏

收藏

收藏

收藏

收藏

收藏

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

前言

15年开始，红包大战占据了春节营销的重要位置，各家互联网平台纷纷“发钱”抢占用户，红包总额曾在2021年一度达到120亿元的峰值。不过近两年开始，过往简单粗放的红包大战逐渐失去热度。平台不再追求短时间用户增长，这次春节活动就是百度FEED年底以运营手段打造的内容营销活动。设计团队以“有福气 趣新春”为主题提出了内容场景化的营销策略，整体围绕如何把“内容做的有趣”来分享设计思路。

一、心智建立内容护城河

1、心智占领：

提到内容营销，先不说老掉牙的脑白金、可口可乐。我们先说说产品和用户的关系。我们通过各大平台的定位，提供了信任背书，但产品只是流量的承载地，最终让目标用户到达目的地的还是我们的品牌、内容、形象。所以我们在做内容营销活动的时候，究竟应该怎么做？

2、你的产品容易记住么？

海的味道你知道，是波力海苔。提到蓝瓶的钙，脑海会浮现产品的蓝色包装。说到这里，我们就明白了，内容营销的核心是图形和口号。营销活动的核心是品牌符号和Slogan。

品牌符号拆解

以春节项目举例，提取中国传统团扇形，象征着大团圆。引申为家家户户的心愿，全家团圆、福气满满。以FEED产品愿景「看更多有趣有用的内容」为使,结合「新年要有福气」的新年祝福，推出品牌Slogan【有福气·趣新春】的活动理念，开启活动篇章。

有了主要的符号传达，其它辅助元素的提取从桂花造型和钱币上做了简化，寓意吉祥富贵财源滚滚，应用在页面细节装饰中。

用颜色表达个性

提起品牌符号，我们首先想到的可能是 Logo，但有些时候色彩却是第一印象。春节是中国传统文化的传承。因此尝试从中国传统色彩体系中象征“福气、福来、富贵”的海棠红作为会场主颜色。

为了更好的区分内容场景以及增加色彩丰富度，受到“一年四季轮回”的启发，延伸品牌辅助色。一年的圆满在于四季的圆满，在色彩表现上，从春到人间万物鲜到春雪满空；对应绿、红、黄、蓝给人焕然新生的视觉感受。

用字体丰富品牌基因

字体，不仅可以指代文字内容含义和字形美学价值，还能透过字体设计的初衷洞察到品牌浓缩其中的理念和哲学。利用弯曲让作品动感有张力。利用圆角处理增加趣味性，呼应“有趣”的品牌理念。用倾斜的样式营造出视觉张力，形成视觉焦点。

3、洞察产品的「生命力」

定形象-品牌基因的独特形象

角色、品牌、用户必须是一个标签，清晰可见。以IP角色与用户互动沟通，建立信任关系，拥有独立人格和魅力。通过更具人格化的形象，使品牌变得更温暖。本次活动的主IP，在设定上采用FEED字母演变不同性格IP角色，作为不同维度的形象代表，丰富B/C端的内容场景。

情感链接-围绕人设讲故事

如何通过「IP角色」让用户对产品产生情感呢？首先赋予他们性格，他们分别是福气、财富、快乐和有趣的化身。为用户带来财、富、乐、趣是他们的责任。IP的人格化能很好的与用户建立品牌好感度。同时「持续曝光+情感链接」的品牌策略，在活动中贯穿内容场景、物料推广、分享转发等，反复强调品牌。

二、你的差异点是什么？

1、化繁为简，强化内容

由于春节活动周期长、内容多的特点，使得页面呈现庞大复杂，会造成用户的理解成本影响留存，因此把内容有效呈现、提升屏效、优化体验路径是交互的重点。我们通过“框架分层”“减少活动步长”对所有活动进行了框架升级。提升活动易用性，让用户快速参与活动。在设计表达上简化头图背景，让用户聚焦场景，引入内容。

2、创意场景，引爆内容

洞察设计策略

百度FEED不同于其他矩阵，我们的产品内核是“内容”；作为春节活动，浓浓的“年味”是活动外核。如果只去介绍我们自己产品的功能、种种好处，这种干巴巴的内容无法在这个时代获得关注和认同，因为无法与用户建立切身联系。所以在不同层次的内容上，我们可以通过故事化、场景化来把内容做的更有趣，最终实现业务互动转化提升。

年俗互动-故事型叙述 增强产品代入感

抓住用户情绪洞察，采用年俗的理念打造场景，营造用户代入感。在视觉表现上，根据时间推移，场景也随之变化；以回家团圆吃年夜饭、到走亲访友云拜年、看烟花赏灯会，实现了场景从年三十到十五的视觉呈现，释放出情绪共感的叠加效应。引发用户“过年”的心理共鸣。

场景设定

场景一：花样团圆饭。围绕“三十吃饺子”的年俗为主要点切入，通过具象的关键词构思场景，结合品牌符号，融入中国风建筑表达“家”，并将饺子、房子、人的比例重构，增加画面冲击力，在配色上摒弃大面积的红黄配色，加入蔻梢绿和淡曙红作为辅色，为整体添加了一丝春天的气息。

场景二：神评云拜年，发评送好礼。围绕“云拜年”的年俗为主要点切入，过年的时候拜年是人们辞旧迎新、互相表达祝愿的一种方式。创意表达上，除了沿袭以往“登门”的拜年方式外，在画面表现上加入代表新兴礼仪“云拜年”的概念，让视觉吸引眼球，同时又很接地气。

场景三：猜灯谜送吉祥。以元宵赏灯会的年俗为切入点，夜色旖旎，花灯璀璨，在一片流光溢彩之下，闹元宵、赏花灯、迎新春。"玉兔东升、鲲鹏万里”，用最美好的祝福为用户开启新年新篇章。

人文互动-内容联想 强化产品特点

我们为什么要把小组内容关联到人文上？我们需要给产品定义一个标签，让内容进入一个优势的心智赛道，用设计手段具像化演绎出来，让目标用户最快对号入座，提升产品的认知效率。而人文包罗万象，与小组内容分类不谋而合。

内容联想

在视觉表现上，围绕“小组发布内容”的类比联想，场景选取摄影、养花、命理、诗词、乡村等七大不同人文场景，着力刻画“小组内容”强关联的人文元素，以此映射产品的特点，激发用户参与意愿。借助想象放大或夸张内容特征，更鲜明的强调内容本质。

3、丰富体验

为了维护用户粘性，让用户每天都来“玩”。加入2级活动，用“奖励”“成就”“抽签”形成驱动用户雷达地图，多维度持续牵引，增强互动体验。

如何让用户玩下去？

【抽签活动-新年福气签】
活动玩法：用户每天进入活动可抽福气签，随机发放签文以及红包奖励，中奖+祝福的满足感驱动用户回流。

洞察&创意

新的一年，人们对美好生活都有向往和期盼，“讨彩头”是每位用户对生活的新追求。在活动的设计上要吉祥满满，自带好彩头。用福袋作为容器承载签文，以抽幸运球、得奖励赢福气作为情感驱动，刺激用户玩下去。

在签文设定上用团扇的品牌符号作为基础形状，加持“祥云”“吉祥话”让活动不止惊喜，更是平台对用户的祝愿。

如何让用户“回来”玩？

【激励玩法-我的成就】

洞察&创意

在成就玩法中，勋章作为精神激励直接授予用户，提升用户在活动内的成就感和价值。另一方面，勋章也作为主活动物质激励的间接载体，用户通过解锁勋章来获得终极大奖。从设计角度，采用三维立体视觉风格，结合IP形象，使勋章更年轻有趣，让用户形成记忆点。强化视觉冲击，满足用户的成就感和荣誉感，刺激用户回流和分享。

惊喜彩蛋，拉升互动体验

除了视效的打磨外，营造“惊喜感”是在体验中非常重要的一环。无论是抽奖还是成就，除了在视觉上有抽奖的仪式感。在活动中增加互动彩蛋，用户在投票以及点赞后会有对应的动效，让整体体验更加细腻。

精彩视频，点击可看

结语

总结一下本篇文章关于内容场景化营销的设计要点：

心智占领：前置化思考品牌打法，从品牌符号、Slogan、色彩基因、字体设计到IP的设定，全链路反复强调品牌。

设计创意：用故事性、场景化演绎设计创意，差异化视觉呈现。

互动体验：用“惊喜感”拉升互动体验。

希望以上的设计思考，可以给大家一些启发。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

2022年新建装扮中心整合各类装扮的分发入口。搭建皮肤商城、主页背景商城、头像商城、挂件商城4大装扮基建；高效扩充皮肤、挂件、个人主页封面和头像等个性化装扮资产，受到年轻用户的喜爱，佩戴装扮用户迅速增长数以百万计。

0-1搭建拓装扮资产规模的经验，今日与大家分享。

一 整合升级四大装扮基建，搭建系统装扮能力

拓新装扮场景，提升装扮曝光：百度APP个性化装扮场景已覆盖首页皮肤、个人中心皮肤、个人主页封面、个性化挂件和头像。

我们将百度APP原有的装扮能力整合升级，新建“装扮中心”统一分发，并在个人中心增加了一级入口，为更多的装扮形式与玩法创造更多可能。通过装扮中心、皮肤商城、个人主页背景商城、挂件商城、头像商城“四大装扮基建”支撑百度APP个性化装扮的分发和佩戴操作。

提供易用的装扮佩戴体验，增强装扮展现的吸引力，是装扮基建方向的设计目标。

1. 易用性

我们在全场景提供实时预览能力，装扮预览所见即所得；按装扮类型统一界面布局，降低理解成本。

2. 增强装扮吸引力

2-1 提升装扮展现丰富度：

装扮中心作为装扮聚合展现核心场景，提供套装装扮，界面内融入丰富动效、定义刷新策略持续推荐新内容，增加对装扮运营展现能力。

2-2 串联互通增强可逛性:

各装扮能力之间串联互通，通过分发场景间跳转进行交叉推荐增强装扮吸引力。我们从三条路径上为装扮拓展了分发入口。第一条：装扮功能内的场景，在装扮商城之间增加相关功能跳转、在皮肤和套装的预览页底部拓展更多推荐入口。第二条：在用户的非装扮使用路径上拓展入口，如在头像预览页、个人主页背景预览页引导用户设置头像和个人主页背景。第三条：以非常驻的弹窗形式，推荐装扮活动，吸引用户体验装扮功能。

2-3 丰富装扮玩法：

a. 限时免费装扮：精品套装装扮包括动态皮肤、动态头像、挂件、个人主页封面，支持一键佩戴四项个性化装扮，是百度APP的付费装扮功能。我们探索限时开放给用户免费使用玩法，效果超预期，收获了一大波装扮新用户。

b. 结合任务活动：将“佩戴装扮”作为运营任务，帮助用户获取任务金币，也把热门装扮作为任务奖励。

c. 与大型运营活动结合：与世界杯大型运营活动结合，设计度晓晓世界杯16强球队套装皮肤，通过限免使用，提升装扮渗透。

二 持续扩充皮肤/挂件/个人主页封面/头像等个性化装扮资产

装扮资产扩规模，重点考量通过提升设计质量增加装扮吸引力和快速扩规模的效能如何提升。

1. 精细化打磨，打造百度APP装扮套装

1-1 表现手法-本能层：

深入研究画面风格，在年轻化现代审美指导下，选择偏东方的设计风格，如国风、二次元风格等，因为这类风格多用图形、线条、颜色来处理空间关系，画面不会过于厚重，既迎合年轻用户喜好，又不过多打扰APP内容区域阅读消费。

举例：七月中元节的装扮设计中，整体配色偏暗、低饱和度的深紫色、偏灰的蓝色，可以传达出静谧、神秘的氛围。在色彩构图中没有用过多的色彩搭配，使用高明度差来刻画画面结构，因为明度反差处于人视觉的最底层。如果能用黑白反差区分层次，会首选黑白。在周围环境色中使用偏灰的蓝、紫色，并且与人身上的暖色对比，让人物更加突出。而在画面元素的刻画上增加飘带、鱼尾的流动感，这种带有东方感的元素，这种留白、平衡构图和侠气感，也有很强的东方特征，同时通过厚涂风格中常用的使用饱和度差异、大透视效果营造场景的空间感，增加画面的细腻程度。

1-2 内容-行为层：

在装扮具体的内容绘制中融入共情元素，吸引用户注意。比如结合节日、大事件推送套装，并在绘制中增加洛丽塔、国风、JK等年轻用户感兴趣的元素。

1-3 内涵-反思层：

通过积极情绪引导、激发思考，让用户感到心之向往或心生愉悦，可使用神情、动作、装饰花的花语等多种手段进行情绪暗示。

2 单品扩量，保证各类装扮的更新频率

与套装制作不同，单品的更新需要更加短、频、快，需要更加直接解决Z世代用户痛点。

2-1 协助用户搭建社交符号：

头像，作为用户在网络世界身份的象征，我们从横向团队项目中大量引入能代表身份状态、游戏爱好等方面的资源，快速补充头像单品资源库，我们也根据用户调研了解到有76%用户愿意和朋友使用“闺蜜/情侣头像”，我们在头像库中上线情侣头像，并将完善“头像分享卡”等功能形成体验闭环。

2-2 帮助用户表达自我：

百度APP头像挂件和游戏、社交、直播场景中的头像框不同，并不为了彰显关系、体现出社交关系中的尊贵感，百度APP用户更希望借助头像挂件来表达观点，为自己的主张、个性贴标签。

2-3 结合用户兴趣引起关注和共鸣：

在罗盘大数据中，我们发现，王者荣耀、和平精英、元神等游戏中，25岁以下年轻用户的占比都非常大，并且都愿意花钱购买皮肤装扮。二次元的游戏、动漫内容不仅仅受Z世代喜爱，且Z世代的渗透率最为突出。各大手游设计中也在不断的融入二次元元素，我们借力百度AI画图技术-文心大模型快速补充了二次元、游戏等风格方向的装扮。

三 建立规范平台，提物料输出效率

为了展现更好的效果、适配更多的装扮场景，且兼顾历史与开发成本等原因，装扮物料规则复杂，且种类繁多。《百度APP装扮体系设计规范平台》应运而生，它涵盖 5 项装扮能力、2项运营能力；每项能力均配有一键预览及导出物料模板。随功能迭代及时更新，保障了装扮物料的高效输出。

结语

目前百度APP装扮已经完成了第一阶段的建设，沉淀出一批受用户喜欢的装扮资产，未来我们也将不断探索、创新更多装扮玩法，未来也将探索出共创平台，成为一个装扮生态。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

通过前面两篇的拆解，小鹅通的后台功能内容已经拆解过半，接下来我们来看看「数据统计」和「用户运营」这两个部分的内容，它对商家的运营来说，真是如虎添翼，让我真正感受到一款SaaS产品对商家的运营价值。

5. 数据统计

当我的店铺开始运营起来以后，我最关心的就是店铺的数据统计分析了，因为我需要了解每天有多少新用户来访问，又成交了多少个订单，其次我还需要精准的数据分析来为我的运营提供支持。
5.1 概况
「概况」其实是小鹅通的后台默认首页，通过这个页面，商家可以第一时间查看整个店铺经营的状况。

5.1.1 实时概况
「实时概况」提供店铺的每日最新的实时数据，在这个栏目可以看到今日店铺访客数、今日新增用户数、今日支付金额、今日订单数、待付款订单、待发货订单等数据。这对运营者来说，打开后台就能第一时间查收到店铺当日的实时数据。

5.1.2 最近内容
「最近内容」展示店铺最近更新内容的数据，比如浏览量、订阅量和学习人数。不过这个栏目的设计让我陷入焦虑，我不太明白这个栏目内容排序是按照商家最近更新的商品排列，还是按最新有订阅和学习人数的商品排列，官方也没有给出详细的说明。

5.1.3 平台动态
在这个版块，商家可以获取小鹅通最新的平台动态、资讯、新功能预告和热门话题。在小鹅通的知识生态池里，店铺不是一座座孤岛，而是可以通过小鹅通的链接，可以一起学习交流知识付费的获客、激活、变现、推广的方法。这也是一个SaaS软件最大的魅力，用科技设计工具，用工具帮助企业成功。

5.2 交易
「交易」汇总了商家知识店铺的所有订单交易，在这个版块，商家可以查询整个店铺的交易数据，其次还提供了订单工具、售后管理和资产管理的功能。
5.2.1 订单管理
5.2.1.1 全部订单
①「全部订单」主要为商家提供店铺产生的订单的查询统计，这个栏目主要包含两个内容，头部是检索（包含了交易单号、订单时间、商品类型、核销状态、支付方式等多种检索条件），底部是订单列表（包含待付款、待成交、待发货、已发货、已完成、已关闭、售后中和待核销8个状态）。

②「订单详情」包含订单信息、支付信息、买家信息、发票信息和商品信息，可以查询订单号、订单类型、下单时间、支付时间、支付方式、渠道来源、买家信息等数据。可以看出，功能越多，订单详情的字段就越复杂。

迭代建议
订单的检索框占据了屏幕的一大半，虽然设计了「收起」功能，但却不是默认，这影响了商家的操作体验。其次订单列表的设计排版略显混乱，字段太多，订单与订单之间的层级没拉开，有视觉干扰。
5.2.1.2 评价管理
「评价管理」主要为商家提供用户评价的查询和管理，当用户购买商品发表评论以后，商家可以在这个栏目进行审核、回复、删除以及设为精选。

5.2.2 物流管理
「物流管理」主要针对实物商品，包含「批量发货」和「配送管理」两个栏目。在配送管理，可以设置商家的运费模版、到店自提信息和发货地址等信息，商家可结合自己的实际情况进行操作。

5.2.3 订单工具
5.2.3.1 核销工具
「核销工具」可以查询到店自提、服务类商品的核销码，还可以查询店铺的核销记录。

5.2.3.2 电子合同
「电子合同」是一个第三方工具，由「法大大」提供。它可以帮助商家解决高价知识商品学员不敢下单，纸质合同效率低、成本高等痛点，通过在线合同签约，快速完成签约，降低客户流失率。（这个功能需要开通旗舰版，并进行企业认证才能试用）
5.2.4 售后管理
「售后管理」包含「售后维权」和「批量退款」，主要为商家提供用户退款申请的查询和管理。

5.2.5 资产管理
5.2.5.1 支付设置
「支付设置」包含收款设置和付款设置，商家可以选择绑定自己的微信支付、支付宝和抖音小程序的支付账户，绑定后，店铺才能正常收款。

5.2.5.2 账户管理
「账户管理」为商家提供对收款账户管理、更改和查询的功能，如果商家需要更改收款账户，从这个栏目就能进行操作。

5.2.5.3 交易管理
「交易管理」可查看商家店铺的所有订单交易明细，包括待结算、交易成功、交易关闭和退款的交易记录，在「交易账单」，还可以按月、按季度查看汇总。

5.2.5.4 分账管理
「分账管理」包含「线上分账」和「线下付款」两个栏目。在「线上分账」可以查询到店铺商品通过推广分销的分账记录；「线下付款」包含应付账单、提现申请和付款记录三个内容，这个栏目主要处理分销商的提现申请。

5.2.5.5 提现管理
商家开通知识店铺以后，用户支付的费用是支付到小鹅通官方，商家需要在这个版块发起提现申请才能到账。小鹅通也支持用户自动提现到账功能，商家开通后，账户余额自动打款到商家账户。

5.2.5.6 体验小结
「资产管理」这个版块，对于新手商家来说，学习成本太高了，特别是分账管理和提现管理这两个功能，就像是一场体验灾难。我找了系统客服才弄清楚「分账管理」的「提现申请」是针对C端的佣金提现申请（在订货商-业绩管理栏目，并没有提现申请审核功能，所以我一度认为这是订货商的提现申请管理），这花费了我的很多时间。其次我也没弄懂「提现管理」这个功能，我一直以为店铺交易的金额都是自动进入我的账户，后面才发现需要在这个栏目像平台发起申请才能收到费用，这个版块的功能语义给新手商家造成了太高的学习成本。
5.3 数据
数据是支撑商家运营最重要的指标，通过对店铺及用户的数据分析，可以为商家提供准确的运营策略参考。
5.3.1 数据概况
「数据概况」包含实时概况、核心指标、流量看板、转化看板、商品看板和用户看板7个内容，是对整个店铺数据的实时监控和概览，包括监控访问和订单等核心指标的当天实时情况和近期趋势，并通过流量、转化、商品、用户，四个看板的核心指标反映店铺昨日运营状况。

5.3.2 流量分析
「流量分析」包含了「流量趋势」和「流量分布」，提供了每日访客数、访问量等流量指标及其趋势，并支持查看流量的终端系统、渠道和地域分布情况。这个功能可以帮助商家监控店铺每天的访问规模及变化情况，通过流量的终端系统、渠道、地域分布了解流量的主要来源。

5.3.3 交易分析
「交易分析」包含「交易概况」和「交易构成」，提供了与店铺交易相关的访问、下单、支付转化及各个环节的转化率，并支持查看新老付费用户的占比构成、订单金额的分布情况等。这个功能可以帮助商家分析访客从进入店铺到最终成交各步骤的转化率，定位用户转化路径中的主要流失环节，并对比交易核心指标的趋势，评估运营措施是否有效。

5.3.4 商品分析
「商品分析」包含了「商品概况」和「商品效果」，这个栏目统计了店铺的所有商品销售数据，根据商品的访客和支付进行排行，为商家提供一个全面的商品数据概览。其次还支持对商品进行「单品分析」，从销售、流量和客群三个角度全面统计，为商家精细化运营提供策略建议、数据依据。

5.3.5 直播分析
5.3.5.1 全店概况
「全店概况」可以查看商家所有的直播数据，包括近期直播、直播趋势，系统还根据流量、观看人数和市场为商家生成红榜（人数多、人气火爆）和黑榜（流量和关注人数低），帮助商家找到直播效果优秀与表现欠佳的直播。

5.3.5.2 直播效果
「直播效果」是针对每一场直播的详细的数据统计，比如直播间浏览量、访客数、最高在线人数等，其次还有两个非常强大的功能——实时大屏和单场分析。

5.3.5.3 实时大屏
「实时大屏」就是系统可以根据直播间的数据实时生成数据可视化大屏，实时展示直播人气、观众、带货等数据，满足多场景数据展示需求，提升直播效率，这个功能可以应用到大促活动、品牌宣传等场景（此功能仅支持旗舰版使用）。
5.3.5.4 单场分析
「单场分析」包含数据概览、实时趋势、观众画像、评论分析和带货分析，通过实时数据、用户画像、评论词云分析、带货分析等分析能力，对单场直播进行深度诊断，帮助提升直播效率。这个功能对于商家对单场直播的复盘总结有非常大的帮助（此功能仅支持旗舰版使用）。
5.3.6 用户分析
「用户分析」包含用户概况及趋势和付费用户，帮助商家了解店铺用户的增长、活跃及转化情况，及时调整用户运营策略。

5.3.7 学习分析
「学习分析」包含学习概况及趋势、学习详情和学员排行三个内容，帮助商家了解学员学习的真实数据，比如学习人数、课程完课率、学习时段分布，从而为课程内容的优化提供数据参考。

5.3.8 下载中心
「下载中心」主要是帮助商家管理台文件导出的统一管理和成功率监控，实现下载的文件可追溯、下载记录可查询，同时优化查询和搜索体验，实现下载管理的权限控制，避免重要数据外泄。

设计思考
最初我对这个功能不理解，感觉很鸡肋。不过查看了官方的「帮助文档」以后，我才发现这个功能为商家的运营安全性考虑得很周到。这让我联想到银行的企业对公系统也有类似的「下载中心」，当用户申请电子回单后，用户需要跳转到下载中心才能下载。这样的路径跳转看上去繁琐，但事实上是为了实现下载的文件可追溯和下载记录可查询，避免重要数据泄露。
5.3.9 体验小结
小鹅通的「数据分析」几乎覆盖了商家从引流、激活、变现到留存的所有阶段，不仅有对店铺流量、交易这样宏观的数据分析，还有对商品、直播这样的单品和单场微观分析，这些精准、全面、真实的店铺数据，帮助商家可以不断优化调整运营方案，获取成功。

6. 用户运营

对用户的研究和运营是一个知识店铺的重中之重，只有对用户有了充足的了解才能知道用户到底需要什么，从而不断调整优化运营方案。
6.1 用户
「用户」这个版块，主要为商家提供一个清晰直的运营助手，通过这个版块，可以为我的用户打标签、制定运营计划等，让我对他们的学习行为数据全面了解。
6.1.1 用户概况
「用户概况」是对店铺用户的统计概览，可以查看店铺实时用户数据（包含累计用户、今日新增用户等），其次还有店铺重点运营人群的数据统计，比如企微用户、超级会员等。

6.1.2 用户管理
6.1.2.1 用户列表
「用户列表」包含「全部用户」和「用户学习统计」两个内容。在用户列表，商家可以查看店铺用户的详细数据，比如用户来源渠道、账户绑定手机号（还有一个最近采集手机号，以防用户更换手机号码）、消费次数、消费总额等，其次还可以直接联系用户（支持店铺消息和发短信）、给用户贴标签、增减积分和设置黑名单（禁止评论、购买和访问）。

6.1.2.1.1 用户详情页
每一个用户都有详情页，「用户详情页」包含了用户资料、用户标签、超级会员权益、用户资产（包含积分、优惠券数量、兑换码数量等）和行为统计（包含学习数据、课程进度、用户评论和订单记录等）。通过对用户多维度的数据统计，可以帮助商家对用户有更全面的了解，从而可以对用户进行分类，推出更精准的商品服务。

6.1.2.1.2 用户学习统计
「用户学习统计」包含汇总数据、课程数据和考试数据。「汇总数据」是「课程数据」和「考试数据」的数据汇总，可以查看用户的累计学习时长、累计学习天数、提交考试、提交作业的信息，这个功能可以帮助商家了解用户真实的学习情况，从而进行课程优化调整。

6.1.2.2 标签管理
「标签」可以帮助商家快速定位目标用户，并依据标签进行定向运营，从而提高运营效率。小鹅通的标签分为两种形式，一种是「手动标签」，输入关键词就可以自动生成；另一种是「自动标签」，可以通过设置用户行为和学习行为的条件，当符合条件的用户出现时自动生成。
①「用户行为」是根据用户在店铺的消费行为来设置，包含注册时长、最近访问商品（可选择用户访问的指定商品）、收藏商品、下单商品、购买商品、消费总额和消费次数7种类型；

②「学习行为」是根据用户的课程学习行为来设置，包含累计学习时长、打卡次数、完成的课程、加入的打卡、提交的考试、提交的作业和加入的社群7种类型；

③自动标签的生效规则支持满足任一条件生效和满足全部条件同时生效，非常灵活。
设计思考
「自动标签」这个功能的设计实在是太赞了，不仅可以根据「用户行为」和「学习行为」的14种类型进行设置，还可以根据这些用户行为进行组合生成不同的标签。比如你想快速判断哪些用户是你的忠诚用户，你可以建立一个「忠实用户」的标签，然后设置「消费总额」超过1000元和「累计学习时长」超过10小时这两个行为，当用户满足这两个条件以后，系统就会为他自动生成「忠实用户」的标签。
6.1.3 用户运营
6.1.3.1 用户分群
「用户分群」和「自动标签」有点相似，通过设置用户行为和学习行为，把用户进行快速分组。这样的好处是方便商家对不同的用户人群进行定向运营。
①「新建人群」和「自动标签」一样，需要设置用户行为和学习行为，相比「自动标签」，「新建人群」的用户行为更多，包含了15种类型，内容更丰富。
②当「用户人群」建立以后，商家可以查看人群分析、导出数据以及定向开展运营活动。

6.1.3.2 运营计划
「运营计划」是一个以提高商家运营效率和效果为目标的工具，商家可以针对指定的人群发放权益和活动通知，用高频的外部触发来实现活动目的。官方设计了五种智能运营，对应了五种不同的场景，比如流失客户召回，主要针对那些在店铺有过消费但30天未回放过店铺的用户。
6.1.3.2.1 新建计划
①「新建计划」包含三个内容，在基本信息，商家可以选择目标人群，然后选择计划方式，包含长期计划（商家可选择起始时间，系统会在这个时间段内向用户发送营销通知）和定时计划（在商家设定的时间内进行营销通知）。
②在「权益礼包」，商家可以选择运营计划赠送给用户的权益，可选择优惠券、超级会员和积分。
③在「通知设置」，商家可选择向用户发送营销通知的形式，比如发短信、发送店铺信息、企业微信发送等。

6.1.3.2.2 智能运营
「智能运营」是小鹅通官方给商家设计的五个场景，分别是兴趣转换（激活7天内未付款订单）、新客复购（促进成交过1次的客户在30天内复购）、维系高活跃用户（对近7天访问商铺的用户进行维护）、流失客户召回（召回在店铺有过消费记录但已经30天未访问店铺的用户）和激励喜好用户（对收藏过店铺商品的用户进行激励）。这五个场景，可以极大降低商家的学习成本，一键开启运营计划。

6.1.3.2.3 数据分析
在运营计划开启后，商家可以通过「数据」查看计划的详细数据。从覆盖人到付款人数，通过转化漏斗，多维度向商家统计出各步骤的转化率，帮助商家可以灵活调整计划，实现运营目标。

6.1.3.3 超级会员
「超级会员」可以简单理解为店铺的VIP会员，商家可以建立不同的会员规格，以商品的形式进行售卖，比如季度会员、半年会员和年费会员等。这个功能不仅是商家的用户运营利器，还可以提高忠实用户客户量、留存率和活跃度。
6.1.3.3.1 添加会员卡
会员卡的添加包含基本信息、会员权益、展示设置和会员说明四个部分。通过可视化的设计，用户可以实时预览「超级会员」的页面效果，体验非常好。
①在「基本信息」，可以设置会员卡的规格，比如1个月、3个月、6个月的有效期，还可以限定用户购买的次数；
②在「会员权益」，可以设置会员卡的折扣权益（支持指定特定商品）、免费权益（支持对图文、音频等栏目统一设置）以及和优惠券、优惠码进行权益叠加；
③在「展示设置」，可设置会员卡的界面风格，支持自定义上传，还可以加入权益商品的展示。

细节侦查
小鹅通这个产品，几乎所有核心页面都支持商家自定义配置，几乎是傻瓜式的操作，虽然牺牲了一些个性化的设计，但极大降低商家的运营成本。
6.1.3.3.2 会员卡详情页
会员卡建立以后，可以从会员卡列表进入会员卡详情页。「会员卡详情页」包含了会员列表、数据分析和运营设置三个内容。
①在「会员列表」，可以查看购买超级会员的用户详细信息，可以给用户贴标签、延长有效期等；
②在「数据分析」，可查看超级会员详细的用户数据，比如累计会员数、新增会员数、用户转化漏斗、会员地域分布等数据，通过多维度的数据分析帮助商家提升运营效率；
③在「运营设置」，可以对用户的信息进行采集（调用店铺的信息采集微页面）、CRM分配和私域引流的设置，帮助商家获取新用户的信息，拉新转化。

6.1.3.3.3 全局设置
「全局设置」是为商家提供对「超级会员」统一设置的功能，，比如是否支持换购其他会员卡、是否支持用户分享获益等。

设计思考
「超级会员」是一个非常好的营销工具，它可以满足商家按月、按年的收费场景，相较于单个课程一次性的买卖，「超级会员」更适合打造高质量内容知识店铺，也能帮助商家拓展一批忠实付费会员。
6.1.3.4 积分商城
「积分商城」是一个非常基础的营销功能，作为用户留存的重要手段，小鹅通的「积分商城」以消费、任务两种积分发放方式，抵现、兑换两种消耗方式，构建起了基础的积分体系，帮助商家维系存量用户，提高店铺的用户留存率。

6.1.3.4.1 积分发放
①「积分发放」包含「消费发放积分」和「任务发放积分」两种类型。「消费发放积分」是指商家可以设置用户在店铺的消费任务奖励积分，有效刺激用户消费，这个功能支持商家自定义配置，非常灵活。

②「任务发放积分」包含基础任务（绑定手机号、完善个人信息）、学习任务（可设置学习时长等）和助学任务（连续打卡奖励等），用户完成对应任务后可获取积分，有效提高用户留存率和活跃度。美中不足的是，这个功能不支持自定义配置，灵活性较低。

6.1.3.4.2 积分消耗
①「积分消耗」包含「积分抵现」和「积分兑换」两个功能。「积分抵现」是指用户在购买指定商品时候，商家可以自行设定积分抵扣的比例，从而刺激用户消费。
②「积分兑换」是指用户可以通过积分兑换指定的商品，这是一种常见的会员权益。

6.1.3.4.3 用户列表
「用户列表」主要提供查询店铺用户使用积分的情况，比如给用户增减积分、查询积分明细等等。

6.1.3.4.4 通用规则
「通用规则」为运营者提供积分规则的设置，比如积分有效期、积分冻结期，其次还支持手动设置积分规则的页面内容。

6.1.3.4 信息采集
「信息采集」是一个非常灵活的用户信息采集工具，通过自定义配置（包括手机号、微信号、姓名、联系方式等字段），可以帮助商家在店铺的运营中有效搜集用户的资料，清晰刻画用户画像，搭建思域流量池。其次「信息采集」作为一个公共组件，关联了很多使用场景，比如超级会员、拼团等，它就像一个微页面一样，商家可在指定功能版块进行灵活配置。
6.1.3.4.1 新建流程
①「信息采集」包含三个步骤，第一步是「编辑表单」。商家可根据自己的需要拖曳左侧的组件库（包含联系人组件和基础组件两个分类，比如姓名、年龄、公司、证件号、电话号码、生日、行业等）。
②第二步是「采集设置」，可以填写采集表的引导信息（包含标题和提示文字），可以开启重复采集（若信息关联多个场景，支持用户单独填写，商家无需重复建立）和独立采集。
③第三步是「选择采集场景」，包含指定商品购买、优惠券领取、活动打卡等，这一步非必选项，商家可结合店铺运营实际操作。

迭代建议
「信息采集」这个采集工具真的非常方便，可以帮助商家高效地搜集精准用户信息，从而提升运营效率。不过「信息采集」的用户数据只支持导出到本地，而不像其他栏目有详情页和数据分析，这降低了信息采集的效率，效果大打折扣。
6.1.4 消息互动
「消息互动」是指商家可以为用户发送消息通知，用户也可以通过这个功能向商家提供反馈。「消息互动」包括「消息列表」、「用户反馈」以及「评论管理」三个模块，通过这个功能，可以让商家统一管理与操作店铺消息，及时掌握学员的最新情况，通过反馈及时调整产品策略。

迭代建议
在新建「消息推送」的模块，“发送人”的语义不够准确，这会让商家对这个字段搞混淆，不知道这个表格填入什么信息。其次也缺少了推送给指定用户组，不够完善。
6.1.5 体验小结
作为一个知识付费的从业者，在体验完「用户」这个版块以后，几乎放弃了传统模式定制开发的念头。「自动标签」的设计，让我大开眼见，原来小鹅通的系统可以根据用户的行为来生成标签，这可以让你快速知道哪些用户才是愿意为你的知识付费的重视人群。「运营计划」这个功能设计得太好了，官方不仅提供了五个常见的运营场景帮助商家提升运营效率，而且傻瓜式的权益配置极大降低了商家的学习成本。「超级会员」更是完善了知识付费的其他场景，比如按月收费、年费会员等。
6.2 圈子
「圈子」就像一个知识星球（一款社群工具），主要为商家提供一个老师和学员进行日常活动交流和高质量内容沉淀的社区工具。「圈子」的功能非常丰富，支持设置群主、成员管理、发布及精选图文动态、置顶群公告等功能，其次还支持在圈子内添加学习任务，满足训练营场景，学员可直接在圈子内学习课程、交流与互动，最终帮助商家打造一个高品质的学习型社群，提高学员的忠诚度和留存率。

6.2.1 创建圈子
「圈子」的创建比较简单，填入基本信息以后，需要在「售卖设置」选择入圈方式，支持免费、付费模型，还可以关联专栏、超级会员和设置入圈截止时间，「圈子」就创建成功。

6.2.2 圈子详情页
「圈子」创建成功以后，在列表页可以对「圈子」进行管理操作，包括管理、编辑、分享、删除和转让圈主等功能。

6.2.2.1 内容管理
「内容管理」是针对圈子发布内容的管理，包含动态列表、待回答和圈子标签三个栏目。管理员在这个页面发布圈子动态，对圈子发布的动态进行审核、编辑、删除和加精。

6.2.2.2 售卖设置
「售卖设置」是指对圈子的加入方式进行编辑，支持付费和免费两种模式，但付费方式仅支持从“免费”改成“付费”，其他功能和「圈子」新建无区别。

6.2.2.3 应用管理
「应用管理」包含三种应用类型，课程、日历打卡和商品橱窗。这三个应用其实对应「圈子」前端的一级栏目，添加以后学员在圈子首页就能访问，帮助商家提升付费转化和用户活跃度。

6.2.2.4 运营设置
「运营设置」包含信息采集、CRM分配、续费通知、私域引流和圈子展示五个栏目，主要帮助商家结合其他营销工具提升用户的运营效率，比如可以开通「信息采集」工具，高效精准搜集用户的信息，还有CRM线索分配，可以把潜在用户分配给其他员工。

6.2.2.5 激励设置
「激励设置」为商家提供了「成长任务」和「勋章」两个营销工具。在「成长任务」，商家可以针对用户的互动、课程学习以及打卡设计排行榜，比如发帖数、评论数、分享等；商家开启「勋章」以后，可以建立「圈子」的勋章体系，不仅可以对活跃用户进行奖励，还能有效刺激用户参与度，最终提升用户的活跃度。

6.2.2.6 成员管理
「成员管理」是对加入圈子用户的统一管理，可以查看用户的详情页，了解用户的详细信息和活跃度；可以给用户贴标签，锁定精准用户；还可以给用户延长有效期、加入黑名单和移除圈子。

6.2.2.7 数据分析
「数据分析」包括交易数据、活跃数据、学习数据和打卡数据这四个维度，在这个栏目可以查看到圈子所有的数据信息，比如累计支付金额、今日加入成员、课程学习完成率、任务完成率等，有效帮助商家提升圈子的运营效率，及时调整运营方案。

6.2.3 体验小结
如同前面的比喻，「圈子」就像一个知识星球，为商家提供了一个功能强大的社群工具，帮助商家打造一个高品质的学习型社群。和「知识星球」相比，「圈子」更能帮助商家提升付费转化率，比如商家可以通过「应用管理」就可以添加商品和课程，从而提升付费商品的曝光度。再加上CRM分配、私域引流等工具，「圈子」可以通过用户的日常行为数据帮助商家获取用户的付费意愿、偏好和消费能力，提升店铺的业绩。

感谢阅读，小鹅通产品拆解的第三部分就到这里，下一篇是小鹅通后台拆解的最后一篇，我们将会拆解企微CRM这个核心功能以及对小鹅通的后台设计进行总结。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

WWDC22 全球开发者大会结束，有太多小众产品脱颖而出。无形中有一股巨大的力量，在慢慢崛起，那便是来自世界各地的小型开发团队和独立开发者。他们的产品小而美，小到仅靠一个功能撑起产品，美到完全忘记这是工具产品。那么具体都有哪些产品细节，不妨听我细细道来～

其中，我精挑细选出一个海外和三个国区优秀产品进行产品设计细节分析，一探小众产品究竟好在哪里！

（专注面条 - 轻松重获专注力）2022年Apple设计大奖入围名单之一
（谜底时钟 - 让时间看得见）2022年Apple设计大奖入围名单之一
（Waterllama - 开启喝水时间）2022年Apple设计大奖入围名单之一
（OffScreen - 自律番茄钟，不做手机控）Apple Store精品推荐64次

排名不分先后，从以上几款产品logo中可以看出产品之间设计风格基本不一样，不存在借鉴抄袭，各自都在细分领域深耕播种。

也正是因为开发者的敬业、精益、专注、创新的“工匠精神”，才能让产品突出重围，优秀的呈现在用户面前使用。

一、专注面条

Slogan：专注，可以做出一碗好面条。

你以为这只是让人做泡面的App！那就错了。这是用“煮一碗好面条是需要时间的”为理念，让用户专注工作，类似番茄工作法。

有趣的是，这款效率工具被插画元素完美包裹起来，一点感受不到工具给人带来的疏远感。相反，极具趣味性的画面让工具使用起来也充满乐趣充满爱。

正因这上乘的设计质感，《专注面条》曾数次登上 App Store 推荐页，至今收获 7000+ 个评价、4.9 的评分。

1.核心理念

想象一下你正在烹饪一碗面条。

在烹饪时间结束前．不要试图拿起你的手机，这样会让水蒸汽流失，面条就不好吃了。日后，你可以使用专注面条完成你希望专注的任何事情。

它把工作比喻成煮面，煮面要专心，把控火候，合适时间放入主料和调料；工作同样要专心，遵循自己的方法论，把每个步骤和流程都执行到位。工作完成了，一碗面也就煮好了。

专注力在哪里，效率就在哪里。

「专注面条」希望辅助你以一种诙谐有趣的方式，重获这个时代最稀缺的专注力。放下你的手机，煮一碗面，我们一起对抗手机成瘾！

时间一到，你的面条就做好了，你也完成了一次有意义的专注。

2.品牌元素

打破常规，不用系统默认苹方字体，而是选择手写体风格的「素材集市康康体」字体（文末领取可商用字体包）作为通篇文字载体。

这也是为统一界面风格做的一个优化尝试。

不得不说，这个选择是非常适合的。（体量较小的产品可以适当选用设计字体，一旦产品功能做多做大还是乖乖用默认字体规范靠谱些）。

打开App，你能明显看到简洁的手绘风格元素，使整个产品透传出清新可爱的一面。这也是Alex作者受到女儿启发，毕竟小孩子总有天马行空的想象，但大人们却很难跳脱现实产生有趣想法。

App界面极其简洁，只有黑白灰三种颜色，搭配手绘风格的设计元素，使产品整体清新脱俗，与众不同。

图标设计脱离设计规范，采用更加符合产品气质的手绘风格，这样使得界面统一性极高，氛围感十足。

这也间接告诉设计师们图标设计上一定要跟着产品形态去做设计，而不要一味以第三方规范为唯一衡量标准来设计，结果就是同质化泛滥。

3.专注时长-插图设计

计时是产品核心功能，点击首页左上角专注时长，会出现不同的煮面方案。

可设置5分钟-180分钟之内任意时长的专注时间，同时为5、10、15、20、25、30、35、40、45、50、55、60、180分钟，这13个时间段绘制了专属面条配方。你不用手机的时间越长，你煮的泡面配料就越豪华越高级。设计元素也越丰富。当你碰到手机，就会震动十闪光。

面条设计方案与功能的完美呈现是产品最吸引人的地方。

4.设计细节

根据累积的专注时长还可以获得相应的称号，配合幸苦工作后汗水落下动画，很是生动有趣。

不仅如此，专注面条还特意为女性男性做了两套插图设计方案，充分考虑不同群体的使用体验，仅仅是效率型产品就做到如此细节，不好才怪。

这也是除了故事卡片第二种用总时长配图来增加产品使用黏性产生记忆点的设计之处。

5.商业模式-永久买断与付费项目

1.永久买断制

【专注面条】一次买断制，面条价格¥18。购买后产品内的功能都可使用。但“故事卡片”需要钥匙来解锁，¥6.00=钥匙*6，不想付费那就乖乖完成计时任务来随机获得故事卡片。

作为一个功能单一的产品，卖点在哪里？核心竞争力在哪里？依碳水Sir来看付费用户大多在为品牌理念买单。

就是产品自身的品牌调性，区别于市面上任何一款产品，不随波逐流，用全新的面条理念代替时间，并且有其鲜明的手绘风格和插图元素，即使被抄袭也只能抄到“外壳”，内在的东西是偷不走的。

2.购买钥匙

专注完成后，靠概率获得钥匙，用来解锁故事卡片以及 “脑洞大开” 的结局作为奖励。缓解你专注后的紧张感，增加趣味互动性，同时为下一次专注做好准备。

故事中皮诺曹、乌鸦喝水、长发公主等虽然都是我们耳熟能详的童话，但作者（ Alex ）给他们加上了一些彩蛋。譬如在《猴子捞月》的卡片里，解谜前三个猴子看到河流中有一个圆圈，当我们找到面条的位置时，会发现猴子们看到的不过是一个香菇都大为震惊，画面里充满奇妙的想象力。

当用户看到未解锁的故事会出于好奇点进去，这时就需要钥匙来解锁，毕竟不是靠专注获得的卡片就要用别的办法（购买钥匙）打开，这就是第二个商业转化点。

目前已有的27张故事卡片，每一个都与面条结合进行故事绑定，让用户在效率软件中也能感受到游戏的乐趣，把故事卡片当成解锁过关元素，引发用户对故事卡片更多的渴望。这也是通过奖励机制提高用户参与感进而提高使用黏性以及提升付费转化的一种方式。

一个动作，一堆脑洞，组成了一个能量满满的 app。

6 月 1 日，苹果发布了 2022 年度设计大奖入围名单，在「创新思维」类别中出现了中国区《专注面条》的身影，虽然止步于决赛圈，但我觉得这并不是结束，而是全新的开始。

优秀的产品总有其相似之处，也有其不同。要想做一款好的小众产品，除了把产品本身所解决的用户痛点做好做精外，植入产品理念，与用户产品某种关联。

就如它把专注计时比作烹饪时间，当完成专注，你将获得一碗香喷喷的泡面一样，给用户感受并不是冷冰冰的机器“叮”的告诉用户专注结束，而是通过巧妙的设计与用户之间产生真实联系，这或许就是成功的秘密。

借用「专注面条」Slogan说的：专注，可以做出一碗好面条。

各位设计师们不妨学习一下背后的思考。

二、谜底时钟 - 让时间看得见

谜底时钟是一款设计精美的时钟应用。

Slogan：陪伴你学习、工作与生活。

你没看错！它仅有时间和计时功能。

作为一款时钟App，UI设计有什么不同，才被入选2022 苹果设计大奖！成为中国开发者之光！我们一起来看看。

1.首次引导

第一次下载，就会启动引导流程，切换页面时配合错帧动画，使设计细节更加突出明显，强化品牌调性。产品中的引导页都可以尝试这种表现形式。

进入首页，展示文字+动效的引导流程，统一的表现形式，让使用者更容易理解。首页交互引导，让用户对产品隐藏的交互功能得到二次记忆，具有增强产品记忆的作用。

2.品牌元素

2-1.设计元素

品牌风格设计很前沿，采用2020年大火的新拟态设计风格，也能看出设计表现紧跟市场潮流走，是一款个性且年轻的App。

整体使用下来，印象最深的就是模块列表、图标的微质感设计，以及弹窗布局的规范化设计，还有部分组件采用毛玻璃设计手法等。

值得注意的是，产品对iOS原生组件进行大量重新设计，结合新拟态风格绘制了一套更符合产品调性的组件出来。让人使用一次就记忆犹新。

2-2.核心力-交互感知

我分别罗列出计时切换器、计时完成动效、时间选择器、闹钟动效、删除交互、浮窗切换交互这六个来简单谈谈看法。以下几个动效交互基本涵盖市面上的多半产品的基础功能，之所以展示出来，是因为「谜底时钟」在原有的基础组件上大胆创新，摒弃原生组件。

这样做对于功能简单的产品来说绝对是锦上添花有助于产品形成记忆点的设计细节。这也从侧面反映出市面上的部分产品，只注重功能堆叠而完全忽视原生组件还可以二次设计的方向。

什么是好的交互，操作时无感知是一种，操作时有记忆点也是一种。显然「谜底时钟」是后者。要知道优秀的交互自成一派，把单一的功能做到极致，你的产品就不会差到哪里。

3.彩蛋-图标变化与提醒

时钟就是要长时间静默展示，除了极简、拟物、科技、马赛克、霓光、积木、微质感、电子屏、睡眠屏、卡通风、各类钟表材质等等19种风格高颜值时钟外，霓光时钟具有不一样的功能。

当你早晨使用它文案“早安晨之美”中午“午安好心情”下午“飲啖茶食個包”，除了文案变化，图标也跟随名称而变，又一个用美食来拉近与用户距离的设计细节。

不仅如此，在低电量情况下，霓光效果不显示，底部会持续闪烁电量不足的指示灯，告诉用户手机没电信号，请及时充电。当用户插上电源，霓光时钟会重新启动亮光模式，给予用户通电感知。

虽然很小的设计点，但谁又能想到时钟与电量不足产生联系。看来开发者对时钟的创意联想是丰富多彩的。

4.彩蛋-积木时钟坠落

无意间触碰手机时发现积木零星掉落下几个，在好奇的驱使下又晃动了一下手机，所有积木都掉落下来了。

具有数字属性的积木依然不断变换数字，并且配合手机陀螺仪可以模拟现实空间进行移动，交互玩法趣味十足，让我忍不住多玩了几次。

这种用到iOS系统功能做的大胆尝试，有时会给产品带来意想不到的好处，各位总监们不妨试试。

5.商业模式-细节之处

采用终身会员与月会员模式，月会员很好理解，为了产品能持续做下去，而推出的付费模式，目的是能持续有营收。终身会员是一个很有意思的模式。

据了解，产品前期功能相对单一时，推出的一种买断制，但随着新功能不断增加，原有¥25定价相比较低，早期买断的用户获利更大，为了商业与产品平衡，使其具备良性发展空间，于是又推出月会员模式。

这也牵扯到另一点，凡是未上线新功能都可以轻松决定是否开发上线，一但功能上线，想要取消或抹掉功能，就没那么轻松简单了。这也是早期App都一次买断，后期改为订阅模式也必须有终身买断的内购入口。

如果我们是“匠人”就会把 App 当艺术品，虽然只有也仅有一种功能，但只要花费了大量的时间去想创意，去做到设计、交互的完美融合，甚至一遍一遍地优化各种细节部分，埋设彩蛋，最后的最后呈现出来让自己满意。那么它就很可能成为一款小而美的产品。

三、Waterllama

乌克兰开发团队出品。让喝水变成一件快乐轻松的活动。仅有的喝水记录功能，却用大量动物角色来奖励喝水后的你，让你欲罢不能。保持水分保持快乐！从截图中不难看出，该App内置大量动物插图，通过喝水来解锁小动物，解锁前仅展示动物轮廓，让用户产生好奇从而保持喝水好习惯，这个概念很好，产品很棒，那我们一起来看看吧。

1.品牌元素

产品中icon展示较少，更多是用小插画来代替，页面中大量的banner以及动物卡片，丰富产品的同时营造一种轻松的感觉。并没有很多图标干扰用户操作。与水相关的插图用动效来承载，让简单的元素变得趣味横生，很是新颖。除了普通的水以为，Waterllama还为各种饮料酒水做了全套icon，共计48+之多，可见产品对于水的核心功能做足了努力，才有如此多的类型与选择供用户记录。

2.核心功能

无论您是想休息一下咖啡因，还是想通过果汁和冰沙来增强免疫系统 - 选择任何挑战，尽情享受吧！
远离含糖饮料和酒精，或者在 10 天内只喝水补充水分。看看你的进展如何，别忘了与朋友分享你的结果。
Waterllama 应用程序中已有超过 45 个可爱的动物角色，我把解锁与隐藏的都罗列到上放品牌元素中，可以看下总有一款是你的菜。你也可以使用随机模式，让每一天都变得不同。当天喝水目标达成就会解锁一个动物，精美的插图让人赏心悦目，期待第二天继续喝水打卡挑战。

3.交互手法

首页下方的动物挑战卡片，交互形式采用App Store卡片点击交互，无论是转场过度，还是下拉放大主体都给画面赋予趣味性操作体验。一边体验交互细节，一边了解喝水的各种好处，娱乐加学习两不误，很是轻松。

4.商业模式-细节之处

内购页面采用icon轮播的动效展示，优点是在一小块区域通过消失渐现可以展示所有内容，使内购页面干净清爽能更好的阅读页面信息。按钮通过循环放大，引导用户进行付费操作，虽然很刻意，但丝毫没有感受到强制性选择。
当产品想要在内购页强化品牌背书，给到用户可靠稳定感，可以选出具有代表性的优质评价，展示在内购页下方，通过左右切换查看更多评价。
每年¥28，终身买断制¥48.00。两个价格是利用价格差来制造价格锚点，引导用户购买终身会员，这对用户来说最实惠划算的方案，同时也是产品所希望的。大量的终身用户长时间使用产品，成为核心用户群体，助力产品越做越好。

现在不难看出，优秀的产品往往更关注细节表现，用动态展示内容，让玩法更具趣味性，页面简约而不简单。并不是页面元素越多越好，相反把简单的功能做到极致就会带来正向有价值的反馈。

四、OffScreen - 自律番茄钟，不做手机控

这款产品虽然没出现在WWDC22上，但与「谜底时钟」是同一家公司。无论设计或功能使用都相媲美。
手机已成为人人必备的物品，内置的各种App占有着人们的生活，手机依赖已成为这个时代普遍的一种现象。虽然人们都知道长时间看手机不好，下意识的克制看手机行为，以为这样脱离手机依赖患者这个称号。往往碎片化看手机，一天下来使用手机的时长不降反增。「OffScreen」通过细分时间属性为用户直观呈现各种场景下使用手机的详细数据，通过数据展示以及专注时间，防止用户沉迷手机无法自拔。

1.品牌元素

「OffScreen」背景色使用极其大胆。

浅色模式下采用暖橘色作为品牌主色调，暗色模式下采用海蓝色作为主色调，相比Apple设计规范中的颜色，这种带有倾向性的色彩更容易营造一种产品氛围，强化产品感知度。

图标方面，具有操作属性的图标采用线性（相对好理解），具有展示属性的图标采用面性风格（设计表现更强且有文字描述相对好理解）。

2.动效表达1

引导流程专场用了大量位移、渐变效果，使原本单调的静态页赋予生动表现力。吸引用户眼球，达到品牌传播效果。

3.动效表达2

动效贴合操作效果，用户还没使用就能一眼明白产品如何使用，这就是引导动效的好处。

当你专注番茄钟时，只需在番茄上滑动标尺选择准确时间，就能开始专注。

当完成专注会提供统计数据，并且有彩带飘落效果，营造打卡胜利的仪式感，强化产品感知，为用户下一次专注做准备。

4.商业模式-细节之处

内购页采用依次呈现的交互方式，头图是一个人在看手机，采用线性风格手法，这种形式区别于其他产品，会给人以眼前一亮的感觉，加深用户对产品的记忆。

付费按钮吸附与页面底部，根据菲茨定律，起始于目标位置越近，到达目位置的时间就会越短，从而用户更容易点击。

一次买断制，¥30.00解锁终身会员。

作为一款时间统计、番茄钟、专注时间与一身的产品，对于时间管理有强需求的用户来说价格还算不错。流畅的交互呈现以及有趣的配图描述，间接感受到Off Screen产品的细腻之处，用户为此买单也不是说。

OffScreen的成功在于能把单一的屏幕使用时间进行多维度分析呈现，就说“呆呆的看”与“边走边看”这两项数据，就是调用系统运动数据来判断使用屏幕的场景。

况且每项数据都支持时间轴可视化图表的方式呈现，细节之处方见专业，这也是好产品所要具有的垂直领域专业度。

五、产品总结

想要产品脱颖而出，一定要尝试将软件与硬件结合，可以是陀螺仪、眼动追踪、闪光灯等等，总之系统推出新的功能，就尽量把它用到产品里去。

不仅如此，看以上几个产品，截图模块内容都顶满了，说明App想要展示的细节还有很多，从侧面也能看到开发者们不留一块“空白”的用心。

大厂产品固然很好，做法更符合大众市场符合消费者需求，随着不断新增功能，产品变得越来越普适大众，无产品独特风格可言。因为背后有庞大的员工要养活。

相反小团队独立开发者们没有太多顾虑，一心想把一个点做好做紧致，哪怕只是计时，也要做的自己满意为止，才会交卷，时代在变，匠人之心从未改变。值得致敬这些开发者们。

跳脱大厂的产品，来看看独立开发者和小型开发团队，一人即团队，遇到各类问题都要独自进行解决，可想而知工作量会有多大。

他们的产品或许没有庞大的生态体系来满足大众用户使用需求，但App Store十余年的发展，建立起细颗粒的开发环境，正是这种良性生态，让那些有光的开发者，随心所欲让心中的想法变成现实，让夜里的小路灯照亮了整片街道。

就连开发者们都这么拼搏，作为设计师的我们哪还有抱怨之说，这么多好的产品摆在眼前，真是难得的学习机会，习他人之处，补自我之短。一起加油一起进步。

六、结语

设计师要有发现美的眼睛。美不仅是视觉，还有好的体验流程。不要让用户思考，这是每个设计师所追求的。 认真记录产品细节，了解背后的思考，也是不断提升自己逻辑思维和表达能力的一种方式。

本期产品细节分析结束，点击原文链接查看更多，我们下期再见！

作者：碳水Sir；公众号：草蓉三石

本文由 @碳水Sir 原创发布。未经许可，禁止转载。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

前言

众所周知，B站是一个二次元、鬼畜、学习、娱乐等等于一身的综合视频社区。近82%的用户是Z世代用户（90-09年出生的人群），他们也是生长在互联网下的一代人。用户规模与活跃度都持续高位，除了其产品侧的发力，设计中的体验感知也功不可没，本次分享bilibili中用户最常能感知到的产品设计细节，帮助你丰富B站玩法的同时，学习产品中的过人之处，以便了解设计发力点。

越往下看你越惊叹，总有一个你不知道的彩蛋设计细节。

1.【防偷窥】登录页 - 2233娘遮眼

1.使用场景
再熟悉不过的页面了吧。登录页面是除首页外，每个用户大概率要进入的页面。如何给予用户安全感知，同时增强产品记忆点。

2.设计思考
设计目标：提升用户登录B站时的安全感知。
设计方案：当用户在输入验证码或者密码等较为敏感的信息时，2233娘会遮住眼睛，暗示隐私信息我们是不会偷看的。强化B站对安全隐私的重视度。增强用户信任感。同时B站的品牌IP2233娘从儿时到成年产品中都有体现。用户登录注册账号时，儿时Q版的2233娘呈现在眼前，暗示着2233娘未来的一路陪伴，共同成长的愿景。这是第二层含义。

2.【选封面】开屏页 - 自选模式

1.使用场景
作为一个二次元发展起来的视频社区，用户对于产品品牌具有亲切感。但B站发展至今二次元内容逐渐被多元生态所代替，类目占比逐渐变小，老用户的情感记忆那里体现。

2.设计思考
设计目标：提升品牌IP传播，让用户享受更加丰富的开屏页，从而满足用户情绪。
设计方案：在「设置」-「开屏画面设置」中，你可以随机展示或者自定义选择画面，总共为用户提供20张图片，每一个都是2233娘和B站重要日子的组合插画，其中不乏几张经典页面。当用户选择特定画面时，不仅能强化IP记忆点，同时也体现出产品对用户的重视程度。

3.【弹幕清屏】视频页 - 双指点击快速隐藏

1.使用场景
B站弹幕是出了名的有趣，当弹幕狂热者看一个热门爆款视频，很可能弹幕全程霸屏，气虽然氛感十足，但也会存在遮挡用户查看所关注的内容，从而错过精彩瞬间。如何解决？

2.设计思考
设计目标：优化弹幕开关的便捷操作，给予用户优质的交互体验。
设计方案：在视频播放页面，常规开关弹幕的方式是点击左下角弹幕按钮。想要在便捷一些，你可以双指点击屏幕，触发开关弹幕功能，相比常规「先点击屏幕」「再关闭弹幕」两步操作，双指点击屏幕更加高效，虽然多指操作学习成本高，但这种隐藏交互会大大提升观感体验。如今的产品功能不断堆叠，有时候常用的功能要进入3个层级才能使用，何不换种思路，运用多指交互来提升用户操作体验，未尝不是一种好的体验升级。

4.【进度条】视频页 - 眼睛跟随方向

1.使用场景
一个产品除了空状态、界面元素外，如何在视频页中给予用户品牌感知，增加趣味体验。

2.设计思考
设计目标：提升视频页进度条的趣味性，从而强化B站品牌透传。
设计方案：在视频页中，当你对视频进度进行左右拖拽时，进度条的指示图标「小电视」的眼睛会左右移动，当你向左滑动眼睛跟随左边，向右滑动小眼睛跟随右边，很是有趣，通过IP结合进度条的交互设计让原本单一的形态变得趣味横生。当然，进度条的样式不止一种，还有很多彩蛋视频也有不同的样式，快去找一找吧。（对了，最近在使用【优酷】时也发现进度条的微设计，感兴趣的朋友不妨看看。）

5.【一键三连】视频页 - 长按点赞触发联动

1.使用场景
一键三连最早的发源地，或许你此时才知道这个功能吧。

2.设计思考
设计目标：提升在同质化产品中的特殊功能点设计，强化产品一键三连功能。
设计方案：在视频页浏览时，看到超级喜欢的UP主视频，激动到想要一键三连，可以长按点赞按钮，你会看到右边投币和收藏显示进度条占比，当一圈走完，点赞、投币、收藏同时完成，这就是一键三连的激活功能。不仅如此，移动端、网页端、以及接下来的「写笔记」中都可触发一键三连功能，产品特有的功能感知满满。

6.【快速听歌】视频切换 - 你的下一款听歌软件何必是一款听歌软件

1.使用场景
想听周董的歌，网易云音乐没有，QQ音乐又要付费听，好难受啊～

2.设计思考
设计目标：解决用户听歌时视频弹幕干预，将视频切换音乐模式，专注听歌。
设计方案：在视频页，点击「更多」选择「听视频模式」，当前视频会切换成音乐页面，这难道不就是音乐软件嘛。常用的循环、上一首、下一首功能都有、收藏、评论、转发也有，简直不要太棒。因为B站是UGC（用户生产内容）、PGC（专业生产内容）视频平台的独特性，自身就不会太担心侵权问题。难怪B站中Z世代的用户更多，一款产品，满足多场景多人群使用，怪不得能俘获民心，有它的道理。

7.【视频放大】双指移动 - 放大缩小画面

1.使用场景
当你用B站学习时，小小的手机屏幕很难看到细节，该怎么解决？

2.设计思考
设计目标：提升细节放大展效果，让用户看清具体信息，提高学习效率
设计方案：在视频页，除了上面说的双指点击触发弹幕开关，你可以通过双指拉伸把视频任意放大，当然你也可以捏和把视频缩小。当改变了原始视频尺寸，底部会有一个「还原屏幕」的按钮，点击即可快速矫正视频。还不快快用起来～

8.【学英语】老友记 - 学习注释

1.使用场景
是不是还在边看英文电影边学英语，这样虽然是个办法，但遇到不懂得单词或是语法你还要在第三方翻译软件中翻译，效率性大打折扣。

2.设计思考
设计目标：提高音乐学习效率，在视频中增加实时英文解析，帮助快速学英语。
设计方案：目前已知在「老友记」中，用户可以通过点击左侧「学音乐」进入到英文学习分栏中，演员的每段对话，以及出现时间，都清晰罗列出来，你可以重复收听某段对话，也可以针对当前对话中不理解的单词或语法进行学习，简直就是学习英语者的福音。

9.【一起看】放映厅 - 学习氛围瞬间拉满

1.使用场景
一起刷B站、一起看视频、一起聊天等等这样的场景可能只在现实中存在。真的是这样吗？

2.设计思考
设计目标：解决异地分开刷B站的阻隔感，提升随时随地一起刷剧学习的幸福感。
设计方案：在视频页，点击「一起看」进入放映厅，你可以自己新建放映厅，也可以进入别人的放映厅，总之可以多些朋友一起看视频，一起交流，完美解决异地或者独处的孤独感～

10.【写笔记】笔记功能 - 教学视频的高效学习工具

1.使用场景
同样是看视频学习，当你身边只有手机时，需要做笔记，还在通过备忘录等形式在App之间来回切换记录吗？

2.设计思考
设计目标：解决看视频时难以记录重点知识的情况，提升记录笔记效率，从而高效学习。
设计方案：在公开课等教学类视频中，通过点击「更多」找到「笔记功能」就能解决一边看视频一边记录的痛点了。不仅如此，还能查看其他用户的笔记内容并且可以一键三连进行互动，具有双向学习性，简直不要太棒。笔记做完还可以一键复制，粘贴到你的知识库中，解决内容迁移问题。在B站学习的用户不妨快来试试～

11.【弹幕撤回】2分钟内可撤回 - 避免文字误伤

1.使用场景
B站是个弹幕网，很多时候观看者头脑一热随意发表的弹幕言论，会给其他用户带来观影不适以及平台污染，如何解决。

2.设计思考
设计目标：为用户增加弹幕删除功能，从而提升弹幕评论的绿色言论，净化弹幕内容。
设计方案：在视频页发送了一个弹幕，用户可在视频中看到自己的弹幕，鼠标进入，选择撤回，要注意只能在2分钟内进行撤回，并且一天之内只能撤回5次弹幕。目的也是为防止用户频繁撤回的操作。手机端可点击弹幕列表，找到自己的弹幕，长按会出现撤回选项，点击撤回即可。

12.【鬼畜秘密】网页端鬼畜区长按「返回顶部」按钮10s输入对应字母进入经典鬼畜区

1.使用场景
人们总对好奇的事物产生兴趣，尤其是在自己不知道的前提下。

2.设计思考
设计目标：增加鬼畜区弹幕彩蛋功能，提升此类目视频曝光。
设计方案：在鬼畜区频道，长按10s右下角的返回顶部按钮，会激活底部黑色输入列表，文案写着：“尝试输入字母，发现鬼畜秘密...”带你进入另一个神秘空间。

13.【鬼畜霸屏】在鬼畜搜索下长按A键头会有另一个彩蛋等你

1.使用场景
文案的引导会激发用户好奇产生尝试。

2.设计思考
设计目标：引导用户进行随机字母输入，提升彩蛋互动玩法。
设计方案：在搜索框随机输入英文字母，会出现提示输入的字母，当你输入完点回车，网页会出现经典的一句话弹幕。如果你长按AAAAAAAA...,网页弹幕伴随音效不断出现，很是鬼畜。当你对某个弹幕头像产生好奇，可点击进入视频页，进行视频浏览，同时可以后评论区同样是彩蛋进来的伙伴一起交流，很是热闹。

14.【小黑屋】了解规则 - 查看案情加深学习

1.使用场景
当B站上传视频以及评论不加以管制和制度教育，会带来流失用户的风险。

2.设计思考
设计目标：为了建立良好的视听环境和用户体验，规范产品的内容形式。
设计方案：在社区中心，小黑屋中，可以查看已经被关小黑屋用户的案情，针对案情的严重程度，进行封禁时间限制，相比长篇文章的制度规范，这种实际案例，更能让用户了解平台规则，防止关进小黑屋出不来。

15.【代码良言】小黑屋 右箭源代码 - 金石良言

1.使用场景
程序员在小黑屋页面，想要越狱查看代码等行为。

2.设计思考
设计目标：告知程序员，开发者们小黑屋不仅是用来规范视频用户做出的行为，同样也是针对开发者以及程序员的。
设计方案：在「小黑屋」页面，右键「显示 网页源代码」，在一行代码中间，你会看到一句话：“一朝耍流氓，十年挂南墙；不乖的孩子统统都要打屁股；越狱是不可能越狱的，这辈子是不可能越狱的”极具搞笑的语言让本就是严肃的事情变得轻松许多，同时增强小黑屋的准则态度，让B站用户做一个遵守准则的好用户。

五、结语

设计师要有发现美的眼睛。美不仅是视觉，还有好的体验流程。不要让用户思考，这是每个设计师所追求的。
认真记录产品细节，了解背后的思考，也是不断提升自己逻辑思维和表达能力的一种方式。
本期产品细节分析结束，点击原文链接查看更多，那我们下期再见！

作者：碳水Sir；公众号：草蓉三石
本文由 @碳水Sir 原创发布。未经许可，禁止转载。


参考文献：
B站2022第一季度财报：https://mp.weixin.qq.com/s/ctzbvBqPxtbQxCV2_XAGDQ
MikuFans弹幕视频网 ：https://www.bilibili.com/read/cv14244675/
Advertising：https://mp.weixin.qq.com/s/831jX19aq8cfI_WU7RQubw
时趣研究院：https://mp.weixin.qq.com/s/BUZoVle8ByLQjAFrCMm4ag

前言

众所周知，B站是一个二次元、鬼畜、学习、娱乐等等于一身的综合视频社区。近82%的用户是Z世代用户（90-09年出生的人群），他们也是生长在互联网下的一代人。用户规模与活跃度都持续高位，除了其产品侧的发力，设计中的体验感知也功不可没，本次分享bilibili中用户最常能感知到的产品设计细节，帮助你丰富B站玩法的同时，学习产品中的过人之处，以便了解设计发力点。

越往下看你越惊叹，总有一个你不知道的彩蛋设计细节。

1.【防偷窥】登录页 - 2233娘遮眼

1.使用场景
再熟悉不过的页面了吧。登录页面是除首页外，每个用户大概率要进入的页面。如何给予用户安全感知，同时增强产品记忆点。

2.设计思考
设计目标：提升用户登录B站时的安全感知。
设计方案：当用户在输入验证码或者密码等较为敏感的信息时，2233娘会遮住眼睛，暗示隐私信息我们是不会偷看的。强化B站对安全隐私的重视度。增强用户信任感。同时B站的品牌IP2233娘从儿时到成年产品中都有体现。用户登录注册账号时，儿时Q版的2233娘呈现在眼前，暗示着2233娘未来的一路陪伴，共同成长的愿景。这是第二层含义。

2.【选封面】开屏页 - 自选模式

1.使用场景
作为一个二次元发展起来的视频社区，用户对于产品品牌具有亲切感。但B站发展至今二次元内容逐渐被多元生态所代替，类目占比逐渐变小，老用户的情感记忆那里体现。

2.设计思考
设计目标：提升品牌IP传播，让用户享受更加丰富的开屏页，从而满足用户情绪。
设计方案：在「设置」-「开屏画面设置」中，你可以随机展示或者自定义选择画面，总共为用户提供20张图片，每一个都是2233娘和B站重要日子的组合插画，其中不乏几张经典页面。当用户选择特定画面时，不仅能强化IP记忆点，同时也体现出产品对用户的重视程度。

3.【弹幕清屏】视频页 - 双指点击快速隐藏

1.使用场景
B站弹幕是出了名的有趣，当弹幕狂热者看一个热门爆款视频，很可能弹幕全程霸屏，气虽然氛感十足，但也会存在遮挡用户查看所关注的内容，从而错过精彩瞬间。如何解决？

2.设计思考
设计目标：优化弹幕开关的便捷操作，给予用户优质的交互体验。
设计方案：在视频播放页面，常规开关弹幕的方式是点击左下角弹幕按钮。想要在便捷一些，你可以双指点击屏幕，触发开关弹幕功能，相比常规「先点击屏幕」「再关闭弹幕」两步操作，双指点击屏幕更加高效，虽然多指操作学习成本高，但这种隐藏交互会大大提升观感体验。如今的产品功能不断堆叠，有时候常用的功能要进入3个层级才能使用，何不换种思路，运用多指交互来提升用户操作体验，未尝不是一种好的体验升级。

4.【进度条】视频页 - 眼睛跟随方向

1.使用场景
一个产品除了空状态、界面元素外，如何在视频页中给予用户品牌感知，增加趣味体验。

2.设计思考
设计目标：提升视频页进度条的趣味性，从而强化B站品牌透传。
设计方案：在视频页中，当你对视频进度进行左右拖拽时，进度条的指示图标「小电视」的眼睛会左右移动，当你向左滑动眼睛跟随左边，向右滑动小眼睛跟随右边，很是有趣，通过IP结合进度条的交互设计让原本单一的形态变得趣味横生。当然，进度条的样式不止一种，还有很多彩蛋视频也有不同的样式，快去找一找吧。（对了，最近在使用【优酷】时也发现进度条的微设计，感兴趣的朋友不妨看看。）

5.【一键三连】视频页 - 长按点赞触发联动

1.使用场景
一键三连最早的发源地，或许你此时才知道这个功能吧。

2.设计思考
设计目标：提升在同质化产品中的特殊功能点设计，强化产品一键三连功能。
设计方案：在视频页浏览时，看到超级喜欢的UP主视频，激动到想要一键三连，可以长按点赞按钮，你会看到右边投币和收藏显示进度条占比，当一圈走完，点赞、投币、收藏同时完成，这就是一键三连的激活功能。不仅如此，移动端、网页端、以及接下来的「写笔记」中都可触发一键三连功能，产品特有的功能感知满满。

6.【快速听歌】视频切换 - 你的下一款听歌软件何必是一款听歌软件

1.使用场景
想听周董的歌，网易云音乐没有，QQ音乐又要付费听，好难受啊～

2.设计思考
设计目标：解决用户听歌时视频弹幕干预，将视频切换音乐模式，专注听歌。
设计方案：在视频页，点击「更多」选择「听视频模式」，当前视频会切换成音乐页面，这难道不就是音乐软件嘛。常用的循环、上一首、下一首功能都有、收藏、评论、转发也有，简直不要太棒。因为B站是UGC（用户生产内容）、PGC（专业生产内容）视频平台的独特性，自身就不会太担心侵权问题。难怪B站中Z世代的用户更多，一款产品，满足多场景多人群使用，怪不得能俘获民心，有它的道理。

7.【视频放大】双指移动 - 放大缩小画面

1.使用场景
当你用B站学习时，小小的手机屏幕很难看到细节，该怎么解决？

2.设计思考
设计目标：提升细节放大展效果，让用户看清具体信息，提高学习效率
设计方案：在视频页，除了上面说的双指点击触发弹幕开关，你可以通过双指拉伸把视频任意放大，当然你也可以捏和把视频缩小。当改变了原始视频尺寸，底部会有一个「还原屏幕」的按钮，点击即可快速矫正视频。还不快快用起来～

8.【学英语】老友记 - 学习注释

1.使用场景
是不是还在边看英文电影边学英语，这样虽然是个办法，但遇到不懂得单词或是语法你还要在第三方翻译软件中翻译，效率性大打折扣。

2.设计思考
设计目标：提高音乐学习效率，在视频中增加实时英文解析，帮助快速学英语。
设计方案：目前已知在「老友记」中，用户可以通过点击左侧「学音乐」进入到英文学习分栏中，演员的每段对话，以及出现时间，都清晰罗列出来，你可以重复收听某段对话，也可以针对当前对话中不理解的单词或语法进行学习，简直就是学习英语者的福音。

9.【一起看】放映厅 - 学习氛围瞬间拉满

1.使用场景
一起刷B站、一起看视频、一起聊天等等这样的场景可能只在现实中存在。真的是这样吗？

2.设计思考
设计目标：解决异地分开刷B站的阻隔感，提升随时随地一起刷剧学习的幸福感。
设计方案：在视频页，点击「一起看」进入放映厅，你可以自己新建放映厅，也可以进入别人的放映厅，总之可以多些朋友一起看视频，一起交流，完美解决异地或者独处的孤独感～

10.【写笔记】笔记功能 - 教学视频的高效学习工具

1.使用场景
同样是看视频学习，当你身边只有手机时，需要做笔记，还在通过备忘录等形式在App之间来回切换记录吗？

2.设计思考
设计目标：解决看视频时难以记录重点知识的情况，提升记录笔记效率，从而高效学习。
设计方案：在公开课等教学类视频中，通过点击「更多」找到「笔记功能」就能解决一边看视频一边记录的痛点了。不仅如此，还能查看其他用户的笔记内容并且可以一键三连进行互动，具有双向学习性，简直不要太棒。笔记做完还可以一键复制，粘贴到你的知识库中，解决内容迁移问题。在B站学习的用户不妨快来试试～

11.【弹幕撤回】2分钟内可撤回 - 避免文字误伤

1.使用场景
B站是个弹幕网，很多时候观看者头脑一热随意发表的弹幕言论，会给其他用户带来观影不适以及平台污染，如何解决。

2.设计思考
设计目标：为用户增加弹幕删除功能，从而提升弹幕评论的绿色言论，净化弹幕内容。
设计方案：在视频页发送了一个弹幕，用户可在视频中看到自己的弹幕，鼠标进入，选择撤回，要注意只能在2分钟内进行撤回，并且一天之内只能撤回5次弹幕。目的也是为防止用户频繁撤回的操作。手机端可点击弹幕列表，找到自己的弹幕，长按会出现撤回选项，点击撤回即可。

12.【鬼畜秘密】网页端鬼畜区长按「返回顶部」按钮10s输入对应字母进入经典鬼畜区

1.使用场景
人们总对好奇的事物产生兴趣，尤其是在自己不知道的前提下。

2.设计思考
设计目标：增加鬼畜区弹幕彩蛋功能，提升此类目视频曝光。
设计方案：在鬼畜区频道，长按10s右下角的返回顶部按钮，会激活底部黑色输入列表，文案写着：“尝试输入字母，发现鬼畜秘密...”带你进入另一个神秘空间。

13.【鬼畜霸屏】在鬼畜搜索下长按A键头会有另一个彩蛋等你

1.使用场景
文案的引导会激发用户好奇产生尝试。

2.设计思考
设计目标：引导用户进行随机字母输入，提升彩蛋互动玩法。
设计方案：在搜索框随机输入英文字母，会出现提示输入的字母，当你输入完点回车，网页会出现经典的一句话弹幕。如果你长按AAAAAAAA...,网页弹幕伴随音效不断出现，很是鬼畜。当你对某个弹幕头像产生好奇，可点击进入视频页，进行视频浏览，同时可以后评论区同样是彩蛋进来的伙伴一起交流，很是热闹。

14.【小黑屋】了解规则 - 查看案情加深学习

1.使用场景
当B站上传视频以及评论不加以管制和制度教育，会带来流失用户的风险。

2.设计思考
设计目标：为了建立良好的视听环境和用户体验，规范产品的内容形式。
设计方案：在社区中心，小黑屋中，可以查看已经被关小黑屋用户的案情，针对案情的严重程度，进行封禁时间限制，相比长篇文章的制度规范，这种实际案例，更能让用户了解平台规则，防止关进小黑屋出不来。

15.【代码良言】小黑屋 右箭源代码 - 金石良言

1.使用场景
程序员在小黑屋页面，想要越狱查看代码等行为。

2.设计思考
设计目标：告知程序员，开发者们小黑屋不仅是用来规范视频用户做出的行为，同样也是针对开发者以及程序员的。
设计方案：在「小黑屋」页面，右键「显示 网页源代码」，在一行代码中间，你会看到一句话：“一朝耍流氓，十年挂南墙；不乖的孩子统统都要打屁股；越狱是不可能越狱的，这辈子是不可能越狱的”极具搞笑的语言让本就是严肃的事情变得轻松许多，同时增强小黑屋的准则态度，让B站用户做一个遵守准则的好用户。

五、结语

设计师要有发现美的眼睛。美不仅是视觉，还有好的体验流程。不要让用户思考，这是每个设计师所追求的。
认真记录产品细节，了解背后的思考，也是不断提升自己逻辑思维和表达能力的一种方式。
本期产品细节分析结束，点击原文链接查看更多，那我们下期再见！

作者：碳水Sir；公众号：草蓉三石
本文由 @碳水Sir 原创发布。未经许可，禁止转载。


参考文献：
B站2022第一季度财报：https://mp.weixin.qq.com/s/ctzbvBqPxtbQxCV2_XAGDQ
MikuFans弹幕视频网 ：https://www.bilibili.com/read/cv14244675/
Advertising：https://mp.weixin.qq.com/s/831jX19aq8cfI_WU7RQubw
时趣研究院：https://mp.weixin.qq.com/s/BUZoVle8ByLQjAFrCMm4ag

作者：碳水sir
链接：https://www.zcool.com.cn/article/ZMTQxODk1Mg==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。