首页

vue 项目启动失败 ‘webpack-dev-server‘ 不是内部或外部命令,也不是可运行的程序

前端达人

报错描述

我使用命令 npm run dev 启动项目 报了下面的错。

 'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序

> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序
或批处理文件。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\lara\AppData\Roaming\npm-cache\_logs\2018-06-12T09_40_42_892Z-debug.log

 什么环境都是好的,刚使用npm run dev 启动了一个前端项目都是好的,但是现在这个项目就不行了。

解决步骤:

        第一步:

        删除项目的node_modules文件夹(当前运行的项目中没有node_modules 文件夹的直接运行第二步)

        第二步:

        在项目目录里运行 npm install  命令


 

         第三步:

        在项目目录里运行npm run build 命令

 

         第四步:

        在项目目录里运行npm run dev 命令

这样我就可以成功运行项目了。 


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

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

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

【达达快送】骑士IP形象|达哥

资深UI设计者

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

作者:DXC设计体验中心
链接:https://www.zcool.com.cn/work/ZNjM1NTc5NjQ=.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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

花百亿买来的经验:百度FEED营销活动设计方法

资深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的设定,全链路反复强调品牌。

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

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


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


作者:百度MEUX
链接:https://www.zcool.com.cn/article/ZMTUyMzYyMA==.html
来源:站酷

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


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


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

。                           

百度APP年轻化-个性装扮之路

资深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装扮已经完成了第一阶段的建设,沉淀出一批受用户喜欢的装扮资产,未来我们也将不断探索、创新更多装扮玩法,未来也将探索出共创平台,成为一个装扮生态。


作者:百度MEUX
链接:https://www.zcool.com.cn/article/ZMTUyMTA3Ng==.html
来源:站酷

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


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


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

。                           

4万字B端产品拆解丨从0到1拆解小鹅通后台设计(三)

资深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这个核心功能以及对小鹅通的后台设计进行总结。



作者:设计大侦探
链接:https://www.zcool.com.cn/article/ZMTUyMzU0MA==.html
来源:站酷

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


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


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

分析2022年大厂新孵化的App,一起发现它们设计的独特之处

资深UI设计者

以下是碳水Sir在App Store发现的几款“宝贝”,之所以称为“宝贝”是因为产品中可学到的东西太多了,每个产品视觉UI以及动效都有其独特风格(当然网上也有别人总结过的产品,我这里就不拿出来重复说了)我仅针对未总结的大厂产品,进行设计细节拆解,看看优秀的产品设计到底好在哪里,请君细细品味。





(淘宝 - 屋颜 - 一站式潮流家居平台)
(字节 - 抖音盒子 - 潮流时尚电商平台)
(腾讯 - doX多克斯 - 生活碎片视频社交)
(淘宝 - 吃货笔记 - 记录美食好生活)
(得物旗下 - 95分 - 奢潮二手平台)
(腾讯 - PODO漫画 - 独特交互体验漫画阅读平台)
(荔枝 - 皮玩 - 语音社交平台)
(陌陌 - 咔咔 - 实拍互动交友平台)

排名不分先后,从以上几款产品logo中不难看出,图形设计都偏向于具像化,传递出正向的情绪,颜色方面使用荧光黄、青绿、渐变粉等凸显年轻、大胆,富有朝气。


1.屋颜


第一眼看到这个名就有被惊艳。首先屋颜是屋檐的斜译,檐变成颜,中华文字博大精深,读起来也不违和,同时也直观呈现出产品定位属性。logo采用字体设计手法,“屋”字经过设计手法使线条呈现出立体空间感,也间接体现出产品是和房屋软装相关,同时为屋内添置“颜色”(软装)相关的产品。一个logo两层含义,通过字体设计以及谐音表现,巧妙的融入其中。

·




直观来看,页面大量留白,图片质量高级且风格统一,均采用素底作为产品首图,很好的提升产品整体调性。
图形方面均采用直角元素,配图、banner、按钮、icon无一例外;细线风格设计使产品极具品质感,有种无印良品的现代极简主义风潮。也叫MUJI风。
瓷片区的配图采用线性+2.5D风格,使画面富有空间层次,能撑住页面头部重要位置,且再次突出产品极简主义风格。当然还有空状态、无网络环境下的配图等等都很统一。




动效方面最值得关注的是下拉刷新,使用吊灯作为下拉效果,当向下滑动时电线被拉扯长,但断不了,给人以安全可靠的产品透传,也算是通过创意设计助力产品体验的手段之一。释放刷新时,轮播不同的家居icon图标,再次强化定位产品属性,且刷新时不至于乏味。
加载状态采用+号线条旋转表现,同时在结尾变成一个方形,这么极简的设计之前其他产品从未出现过,同时它也符合屋颜的产品调性(新家软装要做加法,仅个人理解)也算是一个设计亮点。




最新颖的是产品特有的【3D实景逛店】功能,进一步强化家具与室内的强相关性,为什么这么说,单从买家具上,线上买前只能靠照片来间接联想买后填入家中的情况,并不能按照自己习惯多角度查看家具。又或者因为忙,没时间去线下家具馆,或者怕白去一趟,通过【3D实景逛店】快速解决这部分用户需求。同时,也给线下家具馆增加了更多曝光度的可能性。




至此,屋颜的设计细节讲解就结束了,希望产品体验越做越好。


2.抖音盒子


抖音旗下的电商平台,整体风格清爽直观,绿色与紫色搭配也是一种时尚风。相比其他电商产品,抖音盒子没有金刚区图标设计以及营销类的占位图,相反金刚区仅展示奢侈品实物图,产品图大小做了统一,视觉呈现很高级,同时下列瀑布流商品中首图没有活动促销等信息干扰,只展示商品图,突出其时尚潮牌好物的特性,同时也与当前清爽、高级的设计风格相一致。




几处设计细节值得参考,首先是底部Tab栏点击动效,承载抖音logo的故障风效果,黑色+紫色故障效果一来告知与抖音具有相关联性,是旗下电商产品;二来黑色Tab图标能很好的压住“紫绿主色调”的跳跃感,不至于太过俏皮脱离电商属性。
并且图标的整体性与统一性都做得很好,“小红点”的设计采用品牌色“小紫点”呈现(小小的颜色改变),更加强化了产品风格与调性的统一,(小红点并不是只能用红色)这点值得学习。




最后想告诉大家,产品在每个阶段设计形式都会发生改变,比如1.0.1-1.0.2可能是轻微调整,1.0.0-2.0.0就是大的视觉升级。可能因为产品发展或用户变化,使得产品设计风格发生改变, 但要知道每个上线版本一定是当前方案的最优解。就如你看到的“抖音盒子”现在是1.9.0版本号,或许在不久的将来就会全新升级。这就不得而知了。


3.doX多克斯


是一款短视频社交平台,与其他社交产品不同,doX主打短视频内容社交,用户通过拍摄上传有趣的短视频内容,来认识志同道合的朋友。虽然与抖音同为短视频平台,但抖音更侧重视频分发,而doX侧重于通过视频与用户建立联系,一个视频下可以跟拍多条,有点像qq以前的漂流瓶,只是换种呈现方式。这种陌生人视频交友有一丝“探探”的味道。




设计上面单看logo以为会沿用手绘线稿类似的风格。整体使用下来,仅在我的页面顶部背景中用到,其余均采用断线像素风icon设计,绿+白的设计风格,可能也是为了营造出一种陌生人交友的科幻感觉吧。
发起拍摄页,背景会有噪点动效,也是营造一种拍摄前无镜头的感觉,引导用户随手记录。




最后产品的切入方向很新颖,但是否能在短视频风口分出一杯羹就不知道了,但目前来说整体设计风格框架已搭建起来,剩下的就是不断填补及完善设计,使其更加统一,希望doX越来越好。


4.吃货笔记


第一次接触“吃货笔记”就被页面整体设计风格吸引。粗线图标+拟物图标形式空前新潮,给人眼前一亮的感觉。它类似于“大众点评”,是个宝藏探店美食分享的平台。通过线上探店选择报名-自行到店-发表动态-上传票据-提取饭票,来获得优惠消费的同时提高平台UGC内容的产出。可惜的是目前仅支持【广州】店铺(可能是先做小范围本土化尝试然后再逐渐扩大地域),外地用户只能看看界面并不能真实使用,这点很遗憾。
动态布局也很有创意,第一张大图,其他小图呈现,五宫格的样式使布局统一,且更好突出第一张图的主视觉层级。




如今本地餐饮服务平台已经做得很好了,“吃货笔记”在尝试从优化福利流程、视觉表现、设计手法等多维度探索新的操作形式,这种身先士卒的精神值得尊敬,单说设计表现的细致,就以超过了大部分产品。当然,每一款好的产品离不开设计,更离不开产品功能是否真实满足用户需求,让用户使用轻松、解决需求后是否带来爽点。




图标用色很鲜明,均采用3D质感表现形式,能看出设计上面下了很多功夫。底部Tab栏选中图标也采用3D质感表现,与金刚区和空状态图标形成呼应,增强产品风格记忆点。产品目前的评论和下载量都不像没推过一样,可能产品分享度不高导致很多一部分人不知道,所以增加徽章模块评价打卡获得奖励,并以此成就来满足用户心里预期,从而增加使用黏性和传播分享。




最后这款产品设计表现都特别出众,通过空状态文案等内容也能看出产品的个性特征。例如:“虾米都没有,快看看其他的”,还有很多小的设计细节,这里就不一一说了,大伙儿自行下载体验一下吧。


5.95分


95分是得物旗下的分离出来的全新App,主打潮流闲置交易平台,而得物定位是新一代潮流网购电商,两者还是有所区别。但从UI设计角度,还是能看到得物的影子,潮流前线,并且整体风格时尚统一,很多细节值得在这里展开说说。




整个设计清爽直观、没有多余装饰元素,这就要求图标必须做到极致,才能撑住整个页面。我罗列了一下可能出现的图标,轻质感毛玻璃效果,结合统一的渐变元素使得每个图标都精致耐看,值得研究。线性图标也是一样,整体配套,这套图标应该下了不少功夫。




在二手平台存量竞争的时代,能有一款产品尝试新的设计风格,并且把近几年火起来的毛玻璃风格相融合,这种走在设计前线的作风与95分产品潮流前线的调性一致,单说设计尝试这种做法就已经超越了大多数产品了。


6.PODO漫画


毫不夸张,这款产品打开了我对交互表现与实现的新认知。我看了一下最早发布是去年9月27日,到目前为止短短8个月时间,就能让PODO这款产品的交互设计做到如此优秀,背后依靠腾讯,也有游戏元素的影子,这就不足为奇了。




使用下来基本没有太多图标元素,更多是把屏幕空间分给了动漫封面,一行三个动漫排列,背景与主体人物分开,滑动时二者在空间层进行错位,营造一种错层的空间感,使原本扁平的图像瞬间立体了许多很是新奇。




点开动漫详情,图文信息依次从上到下展开,引导用户视觉享受,并且头图中的动漫人物也做了动效设计,全览下来很是细致。除此之外,还有三个明显的交互细节,分别是:设置页展开交互、阅读页底部导航交互以及目录页的交互样式,都以新的表现形式呈现出来,作为设计师的我们现在不能再说:“设计已经玩不出新的花样”这样的说法了。




太多的交互动效就不一一列举了,赶紧收入囊中吧!


7.皮玩


通过了解得知“皮玩”是荔枝App旗下控股产品,同样也在入局陌生人社交领域。但值得注意的是该产品上线1个月,内部框架及UI界面已相对完整,卡片、插图、动效、图标、以及一些趣味设计都已上线,应该是一个成熟团队孵化的项目,上线前的测试应该没少下功夫,才能在产品初期做的如此完善。logo采用渐变黄底+吐舌头表情相结合,搞怪趣味要用嘴说话这样的印象。定位:更好玩的语音社交算说得过去 。




初次体验,第一感受就是采用贴纸风的设计元素,icon与元素都具有较强的设计感,饱和度较低的配色加上白色描边,就如产品说的“玩一下、皮一下”相呼应,产品的整体颜色采用渐变黄和渐变绿,配色很大胆,同时体现出该产品用户所代表的具有兴趣多元化、喜欢尝鲜这样一个群体。同时产品也是想通过这种设计吸引用户使用。




产品中处处都能看到微动效,使静态的画面变得活泼许多,这种做法也是为了给用户营造一种活跃的氛围,增加平台活跃度。


8.咔咔


咔咔是陌陌孵化的一款社交产品,最近发现一些大厂旗下产品都在独立运营,目的也是为了和主产品脱离关系,防止激烈竞争导致产品停止运营。年前很火的“啫喱”想必就是吃亏在这方面。回归正题,首页是以视频为主图片为辅的瀑布流形式呈现,停到某一位置则直接循环播放该视频,排版方式极具新颖,当体验下来眼球左右移动总是会打断我信息的获取,有点强制引导用户看大图视频内容的感受。点开则可以与对方进行互动点赞评论。




看看模块,采用类似“探探”卡片交互左滑不喜欢右滑喜欢来让用户进行操作,但与“探探”不同的是此互动是开放的,用户选择满意的动态内容添加到卡片后,陌生人可看到展示内容,并且她被多少人喜欢都会展示出来,相当于是个人名片,有种抖音+探探的味道。并不具有一对一的个人隐私性,这是与探探最直接的区别。




看看模块中,“打招呼”是与对方建立私聊的唯一方式,如果该用户已关注但未打招呼,把卡片划走,那再也不能与对方建立私聊,除非对方通过“看看”模块与你打招呼。这个产品细节很容易因为用户不理解或者手滑就无法与上个用户进行“打招呼”私信,且私信功能仅在触发“打招呼”后才能交流,入口少、且不易理解,不知道是产品经理的有意为之还是被遗漏掉的地方。




消息页的添加入口,用折叠手法展示,降低频繁跳页的割裂感,同时缩起时也不会占用消息列表。
消息列表是通过“打招呼”保存下的私密消息,聊天形式极具特色,黑色背景加上红紫渐变列表有种夜店嗨皮的即视感观,这里就不过多评价,大家领悟吧。




设计中还值得关注一点,就是个人主页中的个性标签,我罗列出22个,当用户发表三个同类动态即可点亮一个标签,此标签也会代替文字描述承载动态内容的作用,用户选择已点亮 的icon即展示对应标签内容了,相当于动态中的标签分类,但前提发表动态时选择对应你标签,不然发表后的动态不能二次修改。这种通过标签点亮的功能也是为了让用户UGC内容更加多元化,同时也想通过标签来吸引用户多多发动态的。创意点是好的,但是否能达到好的效果,还是要拭目以待。




相比其他产品,咔咔是我一直关注的产品,同时也是特别喜欢的产品之一,所以我分享给你们。


9.结语


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

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

作者:碳水Sir;公众号:草蓉三石



作者:碳水sir

链接:https://www.zcool.com.cn/article/ZMTQwMzM4OA==.html

来源:站酷

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


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


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


                         

WWDC22|从独立开发者中发掘小而美的设计奥秘

资深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 原创发布。未经许可,禁止转载。


作者:碳水sir
链接:https://www.zcool.com.cn/article/ZMTQwODQ3Mg==.html
来源:站酷

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


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


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


                       

多身份|体验B站 哔哩哔哩 bilibili 小破站 产品设计细节

资深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


作者:碳水sir
链接:https://www.zcool.com.cn/article/ZMTQxODk1Mg==.html
来源:站酷

前言


众所周知,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
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。                           
                       

网易云音乐|情感驱动设计的制胜法宝之产品亮点

资深UI设计者

一款口碑两极分化的软件。虽然它不是歌曲最多的听歌软件, 但绝对是听歌软件里情感体验最好的。

事先声明 /attention 。
1. 强烈建议使用电脑查看,用户体验更佳。
2. Gif 体积较大,请耐心查看。
3.为了让设计细节更容易被看到,用GIf来呈现展示。

前言

碳水Sir|5年村龄|听过上万首歌|发布过几首翻唱歌曲|黑胶·伍级|LV.9,众多身份都不能表达我对网易云的喜欢程度。因为它不仅是一款音乐播放器,更像是一个有血有肉、有情感的虚拟人一直陪伴在我身边,治愈着我~ 你很好奇它具有什么力量,能使用户粘性如此持久,那么我不妨带大家看看网易云音乐中情感化驱动的魅力所在。


一首【成都翻唱】送给在座的看官,请不要嫌弃~






1.【送信猫头鹰】飞鹰传信 - 在第43秒送你入学通知书


1.使用场景


在听歌页面,呈现猫头鹰送信环节,带领粉丝回忆那个魔法学院,重温经典音乐。




2.设计思考


设计目标:通过增加彩蛋,纪念《哈利波特40周岁暨电影重映》,提升歌曲二次曝光度。
设计方案:首页搜索哈利波特 第二首 【海德薇变奏曲】,当音乐播放到 第43s时,黑胶唱片中会突然飞出一只叼着通知书的猫头鹰,重现海德薇送入学通知书的经典桥段。猫头鹰飞过,你会看到评论区图标变成了一封信。用极具创意的动画手法,引导用户进入评论区进行后续操作。
这也给做产品设计同学一些灵感,当有合作方时,尝试着换种设计思路(例如:当前影视与音乐结合的彩蛋),来绑定产品与合作方之间的联系。形成高级记忆点,从而达到用户主动传播的裂变效应。

2.【穿越9¾站台】双击评论 - 进入魔法车站


1.使用场景


在上一个场景中,点击信件进入评论区,通过评论区用户引导继续彩蛋探险之旅。




2.设计思考


设计目标:为了使上个彩蛋具有连续性,提升彩蛋引入玩法达到评论话题热度。
设计方案:点击通知书- 在评论区找到第9-10评论,在中间空隙位置双击两下,出现一个缝隙随后逐渐放大,映入眼帘的是魔法站台,随后飞速而来一辆通往霍格沃茨的列车,当门打开时,又一个强光出现,随后穿梭回评论区。整体动画一气呵成,仿佛真的穿梭了一回。
当用户不知情下进入评论区,会看到其他用户都在以“彩蛋”为话题,展开激烈讨论,这时就激发出你的评论欲望,以及彩蛋入口探索,为彩蛋话题持续供热发光。
该手法也是利用“圈内梗”标志事物,再结合穿梭般的动画体验,给【哈迷圈】用户体验了一波惊喜感,同时为后续【哈利波特魔法觉醒】游戏做好引流铺垫。

3.【旗帜仪式感】分院帽之歌 - 评论区的特殊仪式感彩蛋


1.使用场景


正式入学前,怎么能少了入学典礼这么重要的仪式。




2.设计思考


设计目标:提升歌曲传播性以及记忆度,通过彩蛋强化音乐仪式感。
设计方案:点击【分院帽之歌】评论区 输入学院名称如格兰芬多,,院旗降落,迎风飘扬,出现代表学院的旗帜,分院仪式就完成啦!仪式感是不是瞬间拉满。
没看过哈利波特的用户,我这里为大家收集好了四个学院名称,分别是赫奇帕奇,格兰芬多,斯莱特林,拉文克劳,想体验的用户快去试试吧~







4.【丁磊粉丝】99999以不变胜万变


1.使用场景


用户进入CEO丁磊的主页可以看到99999粉丝,在强迫症驱使下为丁磊增加粉丝。




2.设计思考


设计目标:通过99999粉丝,来“骗取”新粉丝关注,提升粉丝量。
设计方案:可能是程序员们被产品或CEO的各种需求堆压的透不过气,想着拿CEO来整活一下,这就有了上面的神奇一幕。进入首页,搜索【网易CEO丁磊】进入主页,第一次和CEO这么近距离接触,当你看到99999粉丝时,心想我原来就是那幸运的第10万粉丝,心中很是激动,当你点击关注后,返回首页再一次进去时,你会发现,粉丝数从新回到了99999粉丝,你以为是有人取消关注!其实这是程序员写的一个欺骗代码。利用这种仿制数字,来为CEO骗粉。这是程序员想到的点还是CEO丁磊的阴谋。就不得而知了~
这么细小的改动,确实让用户对网易云音乐产生神秘感,或许还有很多彩蛋没有发现,从而激发用户探索欲望~
感兴趣的同学快去试试吧~


5.【无渴不爽】汽水特效 - 夏天的感觉就是如此清爽


1.使用场景


网易云音乐与雪碧达成的深度合作,要通过(音乐+设计)手段探索跨界营销方式。




2.设计思考


设计目标:传播品牌主张, 通过彩蛋提升品牌新主张“透心凉、渴释放”。
设计方案:在播放【无渴不爽】时,在特定位置会激活雪碧动效,你能看到右上方一个雪碧瓶开启,并倾倒而出,上深到一半高度清爽柠檬炸开效果,不仔细看还以为换手机进水了。
通过对设计的高度还原,模拟真实世界汽水反馈,例如二氧化碳气体等极具细节的动画效果,以及开瓶时“呲”的音效声让用户更好投身于音乐背后的情境中,以及紧扣歌名【无渴不爽】的“透心凉、渴释放”理念。用“音乐彩蛋”来赋予用户“视觉+听觉+味觉”三觉的沉浸式体验,让品牌主张成为用户切身感受。
这种营销方式,作为用户的我都很难拒绝,心里暗暗道:“这样的营销手段,多给我来一些,真的不错,喜欢~”。换做是你,也同样喜欢,对嘛~



6.【城南花已开】纪念云村人 - 满屏花瓣飘落


1.使用场景


17年的一个遥远的往事,网易云团队为了纪念【音乐人-三亩地】给【城南花已开】ID用户专门写的音乐。




2.设计思考


设计目标:缅怀用音乐纪念的骨癌【南城花开时】用户,放大产品人情世故的高度,从而提升品牌对于用户的重视程度。
设计方案:在每年3-4月时,收听【南城花开时】这首歌,在播放页就能看到满屏花瓣飘落,点击最亮的一瓣,会看到花海中有一个少年。对于老用户来说无疑勾起了往日回忆,通过彩蛋动画来强化音乐缅怀的力量。同时吸引围观用户的好奇,引导查看评论区,翻找彩蛋根源,进而提升评论区活跃度以及产品情感关联。
毕竟产品本身是冰冷的,用产品本身的功能来安抚用户以达到共鸣效果那就太棒了。这也正是网易云音乐依靠评论区获得业界影响力的重要体现。即使版权少的可怜但依然稳居前3宝座的原因之一。


7.【Light The Light】灯光彩蛋 - 完美结合硬件生态


1.使用场景


面对疫情,网易推出【光援行动】通过【Light The Light】歌曲【LTL】功能,给用户传递音乐的治愈力量。




2.设计思考


设计目标:结合硬件生态,提高闪光灯与音乐的多重组合玩法,用音乐与光传递希望给到用户。
设计方案:网易团队通过歌曲《Light The Light》歌词”每个人都是一处微光,每当我们闪烁一次灯光,也许某处黑暗就会被我们照亮”中获得灵感,配合歌曲中的鼓点来不断闪烁节奏光,营造氛围感的同时,传递出即使是一颗小小的微光,凝聚起来依然可以照亮一片天地。
同时表示面对防疫,人民团结一致,互相帮助的社会凝聚力。宣扬音乐的力量以及对未来美好生活的祝福。


8.【抱抱安慰】评论区 - 两指捏合 送给陌生人一个抱抱


1.使用场景


为响应 “云村评论治愈计划”,设计“抱抱彩蛋”,传递温暖的社区氛围。




2.设计思考


设计目标:通过彩蛋玩法,提升社区情感鼓励,净化社区良好氛围。
设计方案:再任意歌曲评论区,对着评论双指向中间捏和的方式,去“抱”一个用户的评论给予情感抚慰。视觉方面呈现两个可爱的白、红小人相互拥抱安抚的画面,评论者的头像也会出现“收到抱抱”的提示,以达到与陌生人之间互相鼓励温暖的目的。
这种方式挺暖的,通过音乐平台送出抱抱以及接受抱抱的形式,更加体现出音乐无边界的魅力所在。
以上是我第二次使用的感受分享。这个抱抱彩蛋设计,早在第四篇【产品细节洞察分析】中有写道,但观点已经完全不同,感兴趣的朋友可以回溯一下~


9.【银河赴约】孔明灯 - 考生与家长的祝福


1.使用场景


每年高考时,【银河赴约】都会收到来自音乐人以及网易的各种祝福,祝旗开得胜。




2.设计思考


设计目标:在高考前夕,通过孔明灯来收集用户的祝福语录提高评论话题统一性。,为用户提供高考话题入口。
设计方案:在2020年疫情期间的高考阶段,网易云音乐制作了助力高考自制【银河赴约】曲目,用户在听歌时,能看到评论区占位符变成了孔明灯。要知道,孔明灯是中国特有的手工艺术,又叫天灯,俗称许愿灯、祈天灯。它的作用是祈福,许愿,保佑。用这种视觉效果,引导暗示用户评论区特殊的意义,真诚的祝福,高考加油!带话题输入祝福,还能获得“网易云音乐高考助力buff”。形式拉满,意义非凡有没有~



10.【搜索‘自杀’】云村治愈所 - 生活有你才更美好


1.使用场景


音乐是人心灵深处的对白,很多抑郁的用户都有沟通障碍不想与人交流,唯有音乐可以独自倾听。




2.设计思考


设计目标:解决抑郁用户危险的心理活动,通过治愈所提高用户对生活的美好追求。
设计方案:在首页搜索“自杀”等敏感词汇,会立即跳出云村治愈所页面,标题写着“生活没有那么奇妙,但有你才会变得更好”。让抑郁用户感受到自我的重要性。
(2.1)开头用生活中的美好事物来告诉用户真实世界值得回味。
(2.2)精选了四类治愈歌单来温暖用户的心情。
(2.3)罗列了一线城市心理咨询热线,间接体现出在一线城市生活压力指数。
(2.4)精彩评论,云村村民的八方支援,感受到网络中温暖纯良一面。
以治愈的文字、音乐推荐、心理咨询热线、热心评论来唤醒抑郁用户,既有文字的力量也有音乐的力量,多维度努力,一起帮助云村用户积极生活,健康快乐。
最后,当我看到阅读总人数863.7万时,心情还是无比复杂,虽然很多都是闻声前来,但大部分还是真实抑郁用户搜索而来,衷心希望音乐的力量可以帮助他们战胜困难,也感谢网易云音乐平台用特殊的方式来治愈用户。这真是很珍贵的用户洞察点。


11.【黑胶故事】歌单 - 双指下滑的视觉享受


1.使用场景


在听歌时,播放页用视频展示歌曲背后的故事,听觉视觉双重享受。




2.设计思考


设计目标:满足用户“边听边看”需求,通过视频拉近用户与音乐人的距离。
设计方案:在特定曲目中,对黑胶播放界面双指下滑,激活“黑胶故事”,黑胶内将自动播放30s的无声视频,再次点击即可跳转至完整的音乐视频播放页面。形成快速切换的视音交互链路。
这种尝试,也是进一步把音乐延伸,每首音乐都有属于自己的故事,很多都是在听音乐时才会引发共鸣,再去搜索音乐背后的故事,链路长、操作不便捷,网易推出的黑胶唱片,音乐人只需自主上传,审核通过后,便可以最低成本,进行歌曲宣传,同时用户能极大的节约时间,从而更加沉浸在音乐世界中。
想要体验,直接搜索【黑胶故事】找到歌单就可以啦~



12.摸鱼计算器


1.使用场景


计算上班摸鱼听歌的时间,看看朋友群里谁是摸鱼之王。






2.设计思考


设计目标:通过热点话题并结合数据分析,来提高H5活动玩法,达到裂变传播。
设计方案:只需要在活动页中输入自己的名称,就能分析出,摸鱼总时长和具体流量。这个功能的开发,起因网络热点话题吐槽包含网易云音乐等产品消耗10GB以上流量为基础,发掘出可结合产品自身做的测试尝试,【摸鱼计算器】依靠平台数据流量分析,根据【上班听歌时间在工作时间的占比】估算出全年的【摸鱼流量】。来满足用户猎奇心。
虽然此活动只是休闲放松的形式,并非真的宣传摸鱼有多好。但为了说明一下,还是文字提醒:“摸鱼”虽好,可不要贪摸哦,正确听歌有助于提升工作效率!告诉用户,正确的价值观。


13.8级证明书


1.使用场景


在网易云大约需要听上千首新歌,看很多故事,明白许多道理才是个好男孩。可以对外分享。




2.设计思考


设计目标:创造【网易云八级】梗,通过活动提升产品热度。
设计方案:只需要在活动中,选择性别,依靠听歌数据分析,总结网易云等级段位。当时也有女孩说,找男朋友就找网易云八级,因为懂得很多很沉稳。当然女孩子也是同理。
据了解,这个活动也是因为有网友晒出等级截图,并且上了热搜,而这一事件瞬间被网易云团队看到,迅速整活。同时间上线【8级证明书】,8级以上的用户可获爱好听歌的“好男孩”“好女孩”认证。
没错,看到配图的朋友都知道了吧,我是8级哦~


14.表白翻译机


1.使用场景


七夕节,表白日,语言组织不行,说不了浪漫的情话。






2.设计思考


设计目标:结合音乐,提升表白语言的趣味呈现,为用户提供浪漫语言帮助。
设计方案:在搜索框输入名字,就会随机推荐表白歌词,都是心动的感觉,帮助不会说情话的你。当然我也可以输入你的的名字,因为你的名字本身,也足以吸引我。有没有被甜到~
除此之外,搜索特定名称,会出来特殊的表白,一语中的。例如搜索苏炳添,出来的是“我会用9秒83的速度出现在你面前”完全整活了,有木有~
不仅如此,页面配图,绘制了大量精美小线稿,在我尝试了很多名称后都没遇到重复的图形,可见这个小细节做了N个图形出来,很是用心。是一个很棒的设计细节。


五、个人感受


早期受到“网抑云”的负面冲击,评论区中存在太多抑郁情绪发言,导致很多用户看到后都同情怜悯随后一起陷入抑郁。

后来网易云音乐推出各种【治愈计划】包括【云村治愈所】【抱抱功能】【治愈专辑】等等设计手段。

最终,越来越多的用户用正能量回怼丧文化【网抑云】变成了【网愈云】,把人间美好给到大家。


这也是产品从用户情感诉求出发,反向驱动设计。或许这才是网易云音乐取胜的重要法宝。





六、结语


设计师要有发现美的眼睛。美不仅是视觉,还有好的体验流程。不要让用户思考,这是每个设计师所追求的。
认真记录产品细节,了解背后的思考,也是不断提升自己逻辑思维和表达能力的一种方式。
本期产品细节分析结束,点击原文链接查看更多,我们下期再见!
作者:碳水Sir;公众号:草蓉三石
本文由 @碳水Sir 原创发布。未经许可,禁止转载。

参考文献及链接:


1.https://www.sohu.com/a/506317507_120099902
2.https://baijiahao.baidu.com/s?id=1667366524064453555&wfr=spider&for=pc
3.https://www.zhihu.com/question/404810159/answer/1326228938
4.https://xw.qq.com/cmsid/20210328A0A1JB00


作者:碳水sir
链接:https://www.zcool.com.cn/article/ZMTQyODQwOA==.html
来源:站酷

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


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


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


                 

世界杯专题丨8500字拆解懂球帝

资深UI设计者

2022卡塔尔世界杯已经拉开帷幕,相信大家从这周开始,都已经陷入四年一次的狂热的足球氛围中。那你有听过懂球帝这款足球APP吗?作为国内用户规模和影响力最大的足球社区,据官方统计,懂球帝在全国足球迷中的渗透率高达83%,甚至有这样一句口号——十个足球迷,八个用懂球帝。本期设计大侦探,全面拆解体育行业的独角兽懂球帝,看看一款足球类APP是如何设计的!
一、导读
1. 内容结构
全文8517字,分为五个部分,分别是导读、产品画像、内容服务、变现服务和设计总结,你可以通过下面的思维导图对本文内容结构有全面的了解。


2. 适合人群
第一类,UI/交互设计师,可以跳出执行层,去思考懂球帝的产品设计策略,提升产品分析能力;
第二类,产品经理/运营,通过全面的产品设计拆解、策略推导,获取产品设计参考;
第三类,体育产品行业从业者,通过对懂球帝的全面拆解,获取竞品设计参考。


3. 分析模型
我们主要运用三种模型对产品的功能、设计进行拆解,由于没有权威的官方数据,所以我们更多以推导的形式去思考懂球帝为什么这样设计。
第一个,增长模型。由戴夫·麦克卢尔提出,包含用户获取、用户激活、用户留存、获取收入、用户推荐,分别对应用户生命周期中的5个重要环节,主要用于分析产品的功能价值。
第二个,上瘾模型。由尼尔·法埃尔提出,通过对上千种习惯类产品的调研,总结出一款产品如果要让用户习惯、上瘾,可以按照触发、行动、多变的酬赏和投入四个步骤去设计,主要用于分析产品的功能价值和推导产品的策略设计。
第三个,社会心理学。主要结合西奥迪尼的社会心理学《影响力》六大说服力原则——互惠、承诺和一致、社会认同、喜好、权威和稀缺,去推导产品设计的用户心理设计,主要用于推导产品的策略设计。


二、产品画像
1. 产品介绍
懂球帝是一款体育类APP,首个版本发布于2013年12月5日,根据易观千帆2022年8月的最新数据,懂球帝月活跃用户人数301.8万。懂球帝持有中超、德甲、足协杯等赛事直播版权,靠着多年的积累,吸引了众多国内外豪门俱乐部、足球媒体和运动员在懂球帝开通官方懂球号,目前是全国用户规模和影响力最大的足球内容平台和社区。


2. 商业模式


2.1 客户细分
懂球帝的客户群体主要以足球迷为主,年龄区间在24-35岁,男性居多。据官方数据,在足球球迷群体中,懂球帝APP的渗透率高达83%。从这些数据可以看得出来,懂球帝是一个覆盖大众足球用户群体的产品,不仅为用户提供专业的足球资讯、直播、竞彩和游戏等服务,还满足了很多小众用户群体的需求,比如球星卡交易、赛事举办曝光等。
2.2 价值主张
懂球帝以懂足球,更懂你为价值主张。
2.3 渠道通路
懂球帝主要通过网络媒体平台进行拉新引流,比如微信、微博(56.6万)、抖音(110万粉丝)、知乎和小红书(3.7万)等平台,其次还会通过赞助线下足球比赛活动进行宣传,比如懂球帝足球星火公益计划等,还有会直接投入广告进行宣传,比如在世界杯、欧洲杯、欧洲五大联赛投入广告,邀请世界巨星为产品代言等。
2.4 客户关系
懂球帝主要通过社区、圈子和粉丝群等方式和用户建立紧密的关系。
2.5 收入来源
懂球帝的收入来源主要通过会员VIP、商城、竞彩、游戏和广告等方式实现营收。
2.6 核心资源
懂球帝在足球领域深耕已有十年,无论是技术、数据、资源、口碑还是球迷用户,都已经有了非常夯实的积累。
2.7 关键业务
懂球帝的核心业务包含足球资讯、球迷社区、体育彩票、比赛直播、球星卡交易和游戏等。
2.8 重要合作伙伴
第一类,体育行业的知识创作者,通过签约合作的形式为平台输出高质量的内容,比如专栏和懂彩帝;第二类,体育运动员、解说员及具有一定名气的体育从业者,通过在懂球帝建立懂球号和球迷进行深入的沟通,提高个人知名度和影响力;第三类,体育机构和俱乐部,比如亚足联、欧洲各大联赛豪门俱乐部均在懂球帝开通了懂球号,和中国地区的球迷第一时间进行交流互动,提高球队知名度和影响力。
2.9 成本结构
作为一个互联网产品公司,懂球帝的成本开销主要是产品运营和开发人力等成本。


3. 用户画像
懂球帝的用户群体主要以男性用户居多,占比75.55%;从年龄分布看,以31-35岁的用户群体最多,占比39.55%,其次为24到30岁的用户,占比33.21%;从用户消费能力看,懂球帝的中等及中高消费者占比67.11%;从地域分布看,三线城市用户最多,占比21.62%,新一线城市占比23.05%,二线城市占比19.39%,一线城市仅占12.42%,其中广东省最多,山东和四川省位居前三。


4. 信息结构
懂球帝的一级菜单包含首页、比赛、主队、发现、数据和用户中心。「首页」采用千人千面的信息流方式,根据用户的兴趣、标签和浏览记录推荐新闻,其中包含了头条、精选、快讯、游戏等热门栏目;「比赛」主要为球迷提供最新足球、篮球比赛的体育赛事直播,球迷可在直播间和专家进行互动;「主队」是为球迷设置自己喜欢的球队,当球队开启比赛时,会第一时间通知球迷;「数据」主要为球迷提供各大主流联赛的当季的联赛排名、积分、射手榜和赛程等数据;「用户中心」设计成抽屉导航,聚合了懂球帝整个产品其他功能的入口,比如赛事、公益足球、系统设置等功能。从信息结构看,懂球帝的产品功能并不复杂。


5. 重要迭代记录
根据七麦数据统计,懂球帝APP首个版本发布于2013年12月5日,截止到11月20日,APP版本已经更新至V7.8.8版本,近一年版本更新次数为17次。


版本重要迭代记录
2015年1月,发布V3.0版本,全新UI,球员球队资料页改版,新增实时聊天室、订阅等功能;
2016年2月,发布V4.1.1版本,Slogan为「足球迷神器(足球、直播、新闻、足彩、足球论坛社区)」;
2016年7月,发布V4.6版本,上线商品搜索功能,方便用户购买装备;
2017年1月,发布V5.1版本,圈子功能改版,新增Twins功能(球员twitter和ins动态)
2018年4月,发布V5.9.9版本,新增球队数据页,为用户提供丰富的足球数据;
2019年1月,发布V7.0版本,全新UI,提供舒适的阅读体验,新增世界功能;
2020年3月,发布V7.3.5版本,上线球队球员人气榜功能,支持用户为喜欢的球队球员打榜;
2020年7月,发布V7.4.2版本,Slogan升级为「不只是一个足球APP」;
2021年9月,发布V7.6.6版本,上线会员连续包月服务;
6. 产品生命周期
根据易观千帆2022年8月数据,懂球帝月活跃用户人数301.80万。官方数据公布目前懂球帝下载量超过1.5亿次,注册用户4000万,在足球迷群体中,懂球帝用户渗透率超过82%,是国内最大的足球聚合平台。 懂球帝目前在2016年就拿到了C轮融资,明年即将年满的十周岁的懂球帝,目前处于产品生命周期的成熟期,当下聚焦于商业变现的探索和创新。


7. 竞争图谱
截止到2022年11月21日,懂球帝APP在苹果的APP Store应用市场,体育分类排名第11,腾讯体育位居第一,月活跃用户人数1,205.75万;在体育彩票分类,懂球帝位居第一,是中国体育彩票月活跃用户人数的3倍;在体育资讯分类,虎扑以555.25万月活跃用户人数排名第一,懂球帝位居第二。


三、内容服务
「内容服务」是产品实现用户留存的关键方式。作为一个足球媒体,懂球帝不仅覆盖了欧洲五大主流联赛,还包含中超、中甲、电竞等联赛资讯,为球迷提供了丰富的内容。作为一个社区,懂球帝以UGC用户生产内容模式,吸引了全国众多足球爱好者和创作者加入了平台,并设计了圈子(球迷可根据自己的喜好加入不同的圈子,比如皇马球迷圈、梅西球迷圈)等栏目,为全国球迷提供了一个创作、交流和娱乐的足球平台。其次懂球帝利用自身强大的技术资源能力,为用户提供每日足球/篮球比赛的直播,满足众多球迷无法观看比赛或需要付费支付观看的痛点。懂球帝还提供了非常强大的数据查询功能,球迷可以在「数据」栏目查询到当季各大联赛最新的赛程、排名和射手榜等信息。


1. 内容频道
作为一个足球媒体社区,懂球帝的内容频道主要分为以下几类。按联赛分,有欧洲五大联赛(英超、西甲、德甲、意甲和法甲)还有中超和中甲联赛;按内容长短分,有「快讯」(提供每天最新的足球资讯);按内容质量分,有「精选」和「深度」;按兴趣分,有「关注」和「头条」;按传播形式,有「视频」;其次还有电竞和彩经等栏目。从内容频道设计分类看,懂球帝的内容非常夯实,可以满足不同球迷们的需求,但是内容设计的创新度有一定缺失,比较中规中矩。


1.1 头条
「头条」作为懂球帝的首页,采用千人千面的信息流形式为用户推荐足球资讯。头部的轮播主要以当日或当周热点赛事或活动为主,轮播下方内容为当日热点比赛预告或比分,方便球迷第一时间获取比赛数据。从第一屏开始,平台主要结合用户的个人兴趣、标签和主队(球迷群体一般会选择一个主队,比如廖尔摩斯是阿森纳球迷,就会把阿森纳设置为自己的主队)进行个性化资讯推荐。


1.1.1 新闻详情页
足球社区是一个充满了爱恨交织的大江湖,比如皇马和巴萨、AC米兰和国际米兰的球迷往往水火不容,所以往往在足球新闻的评论区,会非常闹热,甚至形成独特的球迷文化。从懂球帝的内容详情页可以看出,懂球帝的用户活跃度非常高,一篇头条的新闻评论数有上百条评论,甚至单条评论还支持多人评论、点赞、分享和举报,非常热闹。


1.1.2 用户主页
「用户主页」主要指用户的个人主页,主要包含发表、评论、关注和粉丝四个内容。用户之间可进行相互关注,但不支持发送私信或其他互动方式,无法进行建立更深的关系链接。


1.2 精选
「精选」主要按资讯的热度来设计,从上至下分为今日赛事、战报、12小时热门、24小时热门和今日推荐五个部分。这个栏目的设计有利于让球迷看到过去24小时的热门新闻,避免因为个性化推送错过当天重要新闻。


1.3 圈子
「圈子」就像贴吧,用户可自行加入喜欢的圈子和其他用户一起交流。懂球帝的圈子非常丰富,有按俱乐部、国家队和球星分类建立的圈子,也有根据用户兴趣爱好建立的圈子。从官方数据看,足球彩票圈子发帖数超过1000万,一支欧洲明星球队的圈子发帖数均在100万以上,可以看出用户活跃度非常高。圈子的设计,本质就是细分用户,让有共同爱好的球迷相聚在一起,从而建立用户关系,最终提高用户留存率。


2. 懂球号
懂球帝是一个UGC内容模式的球迷社区,社区内容主要由用户创作。懂球号分为企业机构和个人自媒体两种类型,企业机构主要针对国内外俱乐部和足球媒体机构,个人自媒体主要针对球员教练以及热爱足球创作的的球迷群体。


懂球号的认证分为两种,第一种是个人认证标识,黄V,主要针对在业内有一定知名度的记者、球员、KOL和优秀创作者;第二种是团体认证标识,蓝V,主要针对各大俱乐部、媒体和有公众影响力的团体。
懂球号作为一个知识创作平台,创作者通过写作获取流量曝光也可以获得收益,以此形成内容创作闭环,为社区提供专业的资讯内容。从官方公布数据看,目前懂球帝已经吸引了众多知名俱乐部开通了懂球号,包括亚足联、欧洲五大联赛众多豪门球队和中国男女足,可谓星光熠熠,具有很大的号召力。


3. 比赛
「比赛」这个栏目,主要为球迷们提供各大足球联赛的比赛预告和直播。从赛事分类看,懂球帝几乎包含了世界足坛所有主流和非主流联赛,从最热门的欧洲五大联赛到巴甲、阿超、墨超这些南美联赛,都有比赛播放源和精准的数据。


3.1 直播间
直播间分为直播君、球迷直播间和专家直播间。「直播君」就是官方的直播间,由懂球帝官方负责解说。「球迷直播间」就是球迷们一起聊天看球,这就像在B站看视频弹幕一样,非常热闹,属于独特的懂球帝看球文化。


「专家直播间」加入了很多足彩内容,首先完全由懂球帝的足彩专家负责解说比赛,其次在比赛中会向球迷推送自己的竞彩方案,用户需要购买专家锦囊或开通红单会员才能观看,对付费用户的激活有很大帮助。


3.2 数据
3.2.1 赛况
「赛况」就是记录一场比赛的真实数据,包含比赛动态(GIF动图)、高评分球员、进攻心率图、技术统计和完整事件。


3.2.2 阵容
「阵容」记录了整场比赛运动员的详细数据,包括出场时间、进球数、射门数、跑动距离和比赛评分等。


3.3 竞彩
3.3.1 情报
「情报」是付费服务,用户需要开通小红单会员(懂球帝足彩会员服务,售价每月588元)以后才能查看。从内容设计看,非常丰富,包含专家方案、欧亚对比、高斯大小球、会员专享情报、得失球时间分布、必发冷热分布和必发大注倾向等内容。这是懂球帝的核心优质内容,通过直播看球的场景,提升用户开通VIP的激活率。


3.3.2 分析
「分析」内容包含猜胜负(球迷竞猜数据)、大数据锦囊(付费服务)、近期战绩、未来三场、综合实力(包含近10场战绩、场均进球等)、场面控制(控球率等)、双方特征(射门进球效率、射门次数等)、角球、半全场(近10场半场进球数平均值)和事件统计(犯规次数和红黄牌)。


3.3.3 专家
「专家」主要指懂球帝彩票板块的足彩专家,这是懂球帝足彩内容的核心创作团队,他们通过对比赛的分析输出精准的投注方案,用户需要购买才能查看。


3.3.4 指数
「指数」是指欧亚各大博彩公司对当场比赛竞彩赔率的数据,这个栏目为用户提供更多全面的投注参考。


4. 数据
数据分为欧洲足球、亚洲足球、美洲足球、非洲足球、全球足球、篮球和电竞7大类,几乎覆盖了全球所有足球联赛。


①积分主要查看当前联赛的积分排行榜,包含胜平负场次和进失球等数据。


②球员榜的数据非常精细,几乎可以查询到一个球员的所有比赛数据,从射手榜、助攻榜、关键传球、射门、越位、传球再到拦截、成功过人、抢断和解围,应有尽有。


③球队榜和球员榜也很相似,颗粒度非常细,从进球数、控球率到扑救点球数、领先情况下丢分数据都包含了。


④赛程主要提供当前联赛的比赛进程,方便球迷查询。


⑤懂球帝还为球迷提供过往赛季数据查询的功能,甚至可追溯到1986~87赛季的数据。这就像一座足球博物馆,球迷可以查询过往赛季各大联赛、各支球队的详细数据,非常方便。如此专业强大的数据服务,也能提升球迷对产品的满意度,提高用户留存率。


4.1 球队主页
「球队主页」包含球队当前战绩、动态、赛程、数据、球员、圈子、资料和转会8个内容模块。
①「动态」就是把球队的新闻资讯汇总,方便球迷可以看到和俱乐部相关的所有新闻。


②「赛程」展示球队当前赛季的比赛记录,懂球帝还提供了一个历史赛季查询的功能,最高可追溯到1920赛季,跨度超过100年。


③「数据」主要展示当前赛季球队的联赛数据,包括进攻、组织、防守、关键球员等数据,懂球帝统计了近10个赛季的球队数据,非常完善。


④「球员」主要展示球队当前的球员信息,包含出场数量、进球数、助攻数以及合同到期时间。


⑤「圈子」关联了球队的球迷圈,用户可以在圈子发帖,和其他球迷一起交流。


⑥「资料」展示了球队的历史资料,数据非常丰富,包括历任主教练、队史纪录(进球、出场记录)、荣誉记录(联赛冠军、杯赛冠军等)。


⑦「转会」就是统计球队的球员转出和转入记录,包含球员转入转出的去向以及转会费,懂球帝统计了近10个赛季的数据转会记录。


4.2 球员主页
「球员主页」就是展示球员的详细信息,主要包含球员的动态、数据、能力值和资料。
①「数据」统计了球员整个职业生涯在联赛、杯赛以及国家队的数据,包括出场时间、进球数、助攻数、射门次数等,非常全面。


②「能力值」就是对当前球员的能力评估,包括速度、射门、力量、防守、传球和盘带等;


③「资料」统计了当前球员职业生涯中的所有荣誉,包括基础资料、球员身价变化、转会记录、俱乐部生涯以及个人荣誉。


④「球星卡」是一个竞拍交易的版块,球迷可以出售和当前球星相关联的等物品。


5. 赛事服务
「赛事服务」面向的用户人群主要是拥有举办体育比赛活动组织能力的机构或球迷团体,但由于赛事规模或资金的缘故,无法获取更高的曝光以及获取专业的技术设备。懂球帝从技术、数据、直播以及流量四个维度为用户提供专业完善的服务,吸引全国各地的体育爱好者加入懂球帝,实现用户拉新(已经单独设计直播君APP运营),提高知名度。目前该服务官方显示为免费,满足条件的用户都可以免费申请。


5.1 赛事详情页
「赛事详情页」包含了赛程、积分榜、球队榜、球员榜和参与球队等内容,有效帮助赛事举办方实现精准的数据化统计,方便球迷查询。


6. 公益足球
「懂球帝公益」在2016年开始运营,在2021年升级为「懂球帝足球星火公益计划」。这个活动的主要目的是为贫困地区和专项足球小学的学生提供爱心足球,在帮助他们快乐健康成长的同时,也扩大了中国足球的青少年基础。目前APP显示已向916所学校捐赠足球14441个,其次公益版块显示正在全新升级,暂停捐款。



四、变现服务
懂球帝在商业变现的形式设计上,主要通过体育彩票版块切入。通过「彩经」版块,招募了众多足彩KOL组成了懂彩帝专家团,以撰写比赛分析向用户销售竞彩情报。用户不仅可以直接购买,也可以开通懂球帝的小红单会员和红单会员,获得专业可靠的竞彩方案。其次,懂球帝还有球星卡、周边商城和游戏三个变现业务。



1. 彩经
「彩经」就是体育彩票,作为体育产品最重要的变现服务之一,懂球帝的彩经版块包含了足球、篮球、电竞和数字彩四种类型。从页面内容结构看,从上至下主要分为热门专家直播、金刚区、专家和足彩情报。



1.1 懂彩帝
「懂彩帝」就是懂球帝官方的专家团,包含了足球、篮球和电竞的各种竞彩专家。竞彩专家主要通过对赛事的分析,以撰写竞彩情报向用户销售。懂彩帝的专家库非常完善,从欧洲主流联赛到中超、中甲、美职联这些联赛,都有不同的专家针对对应的联赛研究分析。


其次懂彩帝还设计了三个排行榜,非常有趣,不仅可以吸引粉丝关注,还能利用攀比心理,倒逼专家写出更精准的投注方案,分别为命中榜(推荐的方案命中率)、连红榜(连续推荐命中的比赛场次)和回报榜(通过购买专家方案获取的回报排行)。


1.2 专家主页
「专家主页」主要包含专家资料、命中率数据趋势图和在售方案三块内容。用户可以关注专家,成为他的粉丝,还可以购买真爱卡(虚拟货币)加入专家的粉丝团,成为他的忠实粉丝;其次通过命中率趋势图可以查看专家近期的竞彩命中趋势;「在售方案」就是专家最新的竞彩方案,用户可直接购买查看。



2. 球星卡
「球星卡」作为一种实物珍藏品,近两年在国内市场非常火热,由于其独有的稀缺性和投资属性,所以催生了球星卡的拍卖模式。从懂球帝关于球星卡科普的文章可以看出,一张稀有的球星卡售价可以超过百万美元,在美国每年的球星卡成交额高达上亿美元。


球星卡版块主要包含每日截标卡推荐、牛卡博物馆、圈子、数据库和商品等内容。球星卡采用拍卖的形式进行销售,商家设置竞拍底价以后,在截止时间内出价最高者胜出。



3. 商城
懂球帝的商城主要包含运动休闲、配件和足球周边三大类服务,商城的设计比较简单,除了分类,就是商品信息流,用户可直接加入购物车购买。



4. 游戏中心
游戏是体育产品的最重要的变现方式之一,懂球帝的游戏中心包含了电竞、足球、篮球、休闲挂机和魔幻修仙等游戏,以小程序的形式游戏,非常方便。



5. 付费会员
懂球帝的会员主要分为三种类型,分别是小红单会员、红单会员和D+会员。



5.1 小红单会员
小红单会员售价588元每月,主要针对足彩的用户,主要权益包含专家方案解锁、专家方案公布、每月神券、冷门提前预警、关键情报推送、高斯大小球模型、必发冷热分布、深度数据分析、欧亚大盘对比、昵称红名、入场广播、红单会员标识和会员免广告13种会员权益。
5.2 红单会员
红单会员售价1998元,主要针对足彩用户,和小红单会员特权相比,增加了专家方案折扣(9折)、免费大数据锦囊(每月2次)、会员专属圈子三个服务。
5.3 D+会员
D+会员属于平台的基础会员,售价19元每月,可享受免广告特权、极致画质、尊贵身份和炫彩名牌4种特权服务。
五、设计总结
1. 商业层
从懂球帝的商业模式看,懂球帝的盈利模式比较单一。除了传统的线上广告收入,盈利模式主要围绕体育彩票设计,比如懂彩帝专家团以及小红单和红单会员等。而体育彩票这块,由于国家的政策等原因,懂彩帝更像一个知识付费服务,只是向球迷销售投注方案。另外体育彩票服务也容易导致球迷购买了方案去境外网站Du球,触及国家的红线区。对于马上年满10周岁的懂球帝来说,对商业模式的设计还需要拓展和创新。



2. 内容层
懂球帝这个产品,在内容设计方面,其实比较中规中矩,缺乏创新。作为一个足球媒体,懂球帝欠缺有深度、特色、个性化的内容栏目,虽然依靠UGC内容模式可以降低大量人力成本,但在内容深度的缺失就很难让懂球帝拥有核心竞争力。其次在整个产品的功能、内容以及结构的设计上,也看不到太多的亮点。比如周边商城,就只是最简单直接的商品销售,而如果你有看过樊登读书的商城设计,你就会发现同是各自行业的独角兽,懂球帝的产品设计创新力就太弱了。



3. 体验层
体验层包含产品的交互、视觉以及用户在使用产品整个过程中的操作体验。从交互和视觉看,懂球帝的产品设计不够精细,比如像「比赛」版块,无论是内容布局,还是字体大小、颜色,在视觉上给人的感觉比较粗糙。还有彩经版块,金刚区的图标都是模糊的,整个版块的设计显得杂乱又廉价。其次在产品的使用中,广告实在太多,而用户屏蔽广告的方式除了花钱开通D+会员,只有通过观看其他广告获取免广告卡才能屏蔽,这样的设计,让人略失所望。


4. 运营层
懂球帝在用户运营方面的功能设计得比较浅,整个产品只设计了一个任务中心,内容也比较常规,用户通过签到或者做任务可以领取金币(金币可以兑换成现金提现,5万金币可以兑换5元),其他的功能就再也没有了。相比脉脉和樊登读书这些具有丰富用户福利的产品,懂球帝和站酷很像,其实我也是懂球帝的老用户(注册时间超过7年),但迄今为止并没有看到任何官方粉丝交流群,也无法和平台建立任何链接,甚至在球迷圈,即便我关注了同是阿森纳的球迷朋友,也无法建立更深的链接。



参考文献
易观千帆 - 懂球帝/虎扑/腾讯体育APP数据分析
七麦网-懂球帝迭代记录
懂球帝官网
2017年中国互联网体育服务行业研究报告


作者:设计大侦探
链接:https://www.zcool.com.cn/article/ZMTQ5MzcwOA==.html
来源:站酷

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


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


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

                         

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档