编者按：本文从组件介绍、使用场景、设计要点、样式拓展4个方面，帮你快速熟悉UI组件中的瀑布流设计。往期组件科普：UI组件应用指南！标题栏设计方式详解编者按：本文从标题栏的组件介绍、设计要点、使用场景、样式拓展四个方面，帮你掌握UI组件中的标题栏设计。

编者按：本文从组件介绍、使用场景、设计要点、样式拓展4个方面，帮你快速熟悉 UI组件 中的 瀑布流 设计。

往期组件科普：

UI组件应用指南！标题栏设计方式详解 编者按：本文从标题栏的组件介绍、设计要点、使用场景、样式拓展四个方面，帮你掌握UI组件中的标题栏设计。

阅读文章 >

一、组件介绍 瀑布流 (Waterfall Layout)，又称瀑布流式布局，是信息流网格布局的一种视觉形式。顾名思义，这种布局形式既像瀑布一样无限向下倾泻，内容又如水一样没有固定样式。

所以我们可以总结出瀑布流的两个最核心的时间特征：

无限加载 内容等宽不等高 二、使用场景 瀑布流因其视觉特征，多用在以多种比例图片/视频为主体的内容流中，最典型的例子莫过于花瓣、Pinterest，这类图片采集网站使用瀑布流可以更有效地利用页面空间并充分展示图片内容而不裁切，同时让用户的浏览体验更加沉浸，错落的图片也相对更容易形成有效的视觉引导，引导用户不断向下浏览。

以及另外一类以小红书、淘宝为代表的强内容展示 APP，在布局内容时不约而同地使用瀑布流，其核心原因即在于其强视觉引导的特性。

三、设计要点 1. 列宽的制定逻辑

对于等宽的网格列表来说，我们只需要去关注它们之间的间距是多少，这样更方便不同宽度设备的适配，网格会自动扣除间距并适配网格宽度，而不必设计师一一去定义。

例如，我们只需定义两列网格的左右边距均为 20pt，间距 12pt。

那么不管是在 12/13/14 的 390 宽度中，还是在 ProMax 的 428 宽度中，布局都会固定住这三个数值，并自动适配列宽，列宽的数值具体是多少，并不需要我们关注。

这也正是两列网格通用的适配逻辑。

2. 内容的布局

瀑布流有三种内容布局形式。

① 图片等高

在图片等高的情况下，能造成网格高度错落的原因只有文案。文案的长短不一、是否有标签等因素，会造成每个网格中的文案部分出现高度差异，从而形成网格错落。但因为文案通常不会超过两行，这种高度的差值往往是固定且非常有限的，也就是说更容易在下方某些地方回归对齐。

所以这种布局更容易把控视觉秩序，但会因为强制图片等比例导致内容的不完整，除非限制用户上传图片的比例。

② 根据图片比例自由变化

这是一种完全不限制图片比例的形式，网格的高度不仅由图片影响，也由文案影响。几乎不可能做到在下方某处重新对齐，所以视觉上往往更加混乱，偶尔会出现极长或极短的网格，导致视觉权重出现非意图的倾向。

③ 根据有限图片比例变化

这种形式的意思是说，在用户上传图片时就限制图片在有限的几种比例之内，所以尽管网格高度同样由图片和文案共同影响，但却将高度差值限制在了相对有限的范围内。现在大多数电商 APP 采用的便是这种布局形式。

3. 内容的类型

瀑布流发展至今，对于内容类型也有许多 App 根据实际项目需求做出了自己的探索。相较于单一的内容类型，因为内容构成更复杂、需求更多元，更多大型 App 会偏向选用多类型内容混合的形式掺进瀑布流里，在达到功能需求的同时，减轻单一性内容对用户浏览时的信息疲劳。

具体来说，内容类型分成两个大类，主内容和运营内容。

主内容

主内容根据 App 类型的不同，包括但不限于图片、视频、动态、商品，主内容依然是瀑布流中占比最多的内容类型。在一个页面内可以使用一种主内容，也可以多种混合。

在多种主内容混合时，设计形式上通常并不会有太大的区别，只会在同一设计框架下，增改该内容类型特有的信息。

运营内容

针对 App 不断扩大的运营需要，更多 App 会在瀑布流中插入运营内容。

例如，淘宝会在瀑布流最开始的左上角放置一个小型的轮播组件，左上角则是主推的与拼多多抗衡的百亿补贴功能入口。

以及马蜂窝，在顶部放置一个两列宽的轮播推荐位。

这些都是很不错的根据自身需要改造瀑布流的实践。

三、样式拓展 1. 站酷

站酷的瀑布流会在中途插入一组视觉上差异较大、与主内容类型相干性也较低的推荐设计师用户，因为站酷瀑布流内容类型较为单一，这么做可以用来调节单一内容类型对浏览造成的视觉压力。

2. 马蜂窝

马蜂窝的瀑布流样式差异化做得相当大，不管是纵向对比(与同页面其他卡片)还是横向对比(与其他 App 瀑布流)，设计都显得非常大胆前卫，所以马蜂窝的卡片样式有比较好的参考性。

3. 其他瀑布流样式

结尾 瀑布流的组件就介绍到这，后续所有有关组件的介绍都会同步更新。

欢迎关注作者的微信公众号：「超人的电话亭」

2022 卡塔尔世界杯已经拉开帷幕，相信大家从这周开始，都已经陷入四年一次的狂热的足球氛围中。那你有听过懂球帝这款足球 APP 吗？作为国内用户规模和影响力最大的足球社区，据官方统计，懂球帝在全国足球迷中的渗透率高达 83%，甚至有这样一句口号——十个足球迷，八个用懂球帝。

2022 卡塔尔世界杯已经拉开帷幕，相信大家从这周开始，都已经陷入四年一次的狂热的足球氛围中。那你有听过懂球帝这款足球 APP 吗？作为国内用户规模和影响力最大的足球社区，据官方统计，懂球帝在全国足球迷中的渗透率高达 83%，甚至有这样一句口号——十个足球迷，八个用懂球帝。本期设计大侦探，全面拆解体育行业的独角兽 懂球帝 ，看看一款足球类APP是如何设计的！

往期拆解：

万字拆解！樊登读书产品设计全方位深度解析 编者按：本文从产品画像、读书服务、内容服务、会员服务等多个方面，完整拆解樊登读书的产品设计。

阅读文章 >

一、导读 1. 内容结构

全文 8517 字，分为五个部分，分别是导读、产品画像、内容服务、变现服务和设计总结，你可以通过下面的思维导图对本文内容结构有全面的了解。

2. 适合人群

第一类，UI/交互设计师，可以跳出执行层，去思考懂球帝的产品设计策略，提升产品分析能力；

第二类，产品经理/运营，通过全面的产品设计拆解、策略推导，获取 产品设计 参考；

第三类，体育产品行业从业者，通过对懂球帝的全面拆解，获取竞品设计参考。

3. 分析模型

我们主要运用三种模型对产品的功能、设计进行拆解，由于没有权威的官方数据，所以我们更多以推导的形式去思考懂球帝为什么这样设计。

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

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

万字读书笔记！产品设计宝典《上瘾》全面解读！（上） 为什么人们每天都会刷朋友圈、刷抖音，而且一刷就是几个小时，根本停不下来？

阅读文章 >

万字读书笔记！产品设计宝典《上瘾》全面解读（下） 《上瘾》这本书从大量的实验案例调研中，总结出那些让用户上瘾的产品设计原则，最后提炼出了一个让用户上瘾的模型，读完以后，真的恍然大悟，原来习惯类的产品需要这么设计。

阅读文章 >

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

二、产品画像 1. 产品介绍

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

2. 商业模式

① 客户细分

懂球帝的客户群体主要以足球迷为主，年龄区间在 24-35 岁，男性居多。据官方数据，在足球球迷群体中，懂球帝 APP 的渗透率高达 83%。从这些数据可以看得出来，懂球帝是一个覆盖大众足球用户群体的产品，不仅为用户提供专业的足球资讯、直播、竞彩和游戏等服务，还满足了很多小众用户群体的需求，比如球星卡交易、赛事举办曝光等。

② 价值主张

懂球帝以懂足球，更懂你为价值主张。

③ 渠道通路

懂球帝主要通过网络媒体平台进行拉新引流，比如微信、微博（56.6 万）、抖音（110 万粉丝）、知乎和小红书（3.7 万）等平台，其次还会通过赞助线下足球比赛活动进行宣传，比如懂球帝足球星火公益计划等，还有会直接投入广告进行宣传，比如在世界杯、欧洲杯、欧洲五大联赛投入广告，邀请世界巨星为产品代言等。

④ 客户关系

懂球帝主要通过社区、圈子和粉丝群等方式和用户建立紧密的关系。

⑤ 收入来源

懂球帝的收入来源主要通过会员 VIP、商城、竞彩、游戏和广告等方式实现营收。

⑥ 核心资源

懂球帝在足球领域深耕已有十年，无论是技术、数据、资源、口碑还是球迷用户，都已经有了非常夯实的积累。

⑦ 关键业务

懂球帝的核心业务包含足球资讯、球迷社区、体育彩票、比赛直播、球星卡交易和游戏等。

⑧ 重要合作伙伴

第一类，体育行业的知识创作者，通过签约合作的形式为平台输出高质量的内容，比如专栏和懂彩帝；第二类，体育运动员、解说员及具有一定名气的体育从业者，通过在懂球帝建立懂球号和球迷进行深入的沟通，提高个人知名度和影响力；第三类，体育机构和俱乐部，比如亚足联、欧洲各大联赛豪门俱乐部均在懂球帝开通了懂球号，和中国地区的球迷第一时间进行交流互动，提高球队知名度和影响力。

⑨ 成本结构

作为一个互联网产品公司，懂球帝的成本开销主要是产品运营和开发人力等成本。

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

① 头条

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

新闻详情页

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

用户主页

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

② 精选

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

③ 圈子

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

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

懂球号的认证分为两种，第一种是个人认证标识，黄 V，主要针对在业内有一定知名度的记者、球员、KOL 和优秀创作者；第二种是团体认证标识，蓝 V，主要针对各大俱乐部、媒体和有公众影响力的团体。

懂球号作为一个知识创作平台，创作者通过写作获取流量曝光也可以获得收益，以此形成内容创作闭环，为社区提供专业的资讯内容。从官方公布数据看，目前懂球帝已经吸引了众多知名俱乐部开通了懂球号，包括亚足联、欧洲五大联赛众多豪门球队和中国男女足，可谓星光熠熠，具有很大的号召力。

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

① 直播间

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

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

② 数据

赛况

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

阵容

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

③ 竞彩

情报

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

分析

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

专家

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

指数

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

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

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

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

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

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

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

① 球队主页

「球队主页」包含球队当前战绩、动态、赛程、数据、球员、圈子、资料和转会 8 个内容模块。

「动态」 就是把球队的新闻资讯汇总，方便球迷可以看到和俱乐部相关的所有新闻。

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

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

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

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

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

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

② 球员主页

「球员主页」就是展示球员的详细信息，主要包含球员的动态、数据、能力值和资料。

「数据」 统计了球员整个职业生涯在联赛、杯赛以及国家队的数据，包括出场时间、进球数、助攻数、射门次数等，非常全面。

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

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

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

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

① 赛事详情页

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

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

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

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

① 懂彩帝

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

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

② 专家主页

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

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

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

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

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

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

① 小红单会员

小红单会员售价 588 元每月，主要针对足彩的用户，主要权益包含专家方案解锁、专家方案公布、每月神券、冷门提前预警、关键情报推送、高斯大小球模型、必发冷热分布、深度数据分析、欧亚大盘对比、昵称红名、入场广播、红单会员标识和会员免广告 13 种会员权益。

② 红单会员

红单会员售价 1998 元，主要针对足彩用户，和小红单会员特权相比，增加了专家方案折扣（9 折）、免费大数据锦囊（每月 2 次）、会员专属圈子三个服务。

③ D+会员

D+会员属于平台的基础会员，售价 19 元每月，可享受免广告特权、极致画质、尊贵身份和炫彩名牌 4 种特权服务。

五、设计总结 1. 商业层

从懂球帝的商业模式看，懂球帝的盈利模式比较单一。除了传统的线上广告收入，盈利模式主要围绕体育彩票设计，比如懂彩帝专家团以及小红单和红单会员等。而体育彩票这块，由于国家的政策等原因，懂彩帝更像一个知识付费服务，只是向球迷销售投注方案。另外体育彩票服务也容易导致球迷购买了方案去境外网站 Du 球，触及国家的红线区。对于马上年满 10 周岁的懂球帝来说，对商业模式的设计还需要拓展和创新。

2. 内容层

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

3. 体验层

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

4. 运营层

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

参考文献

易观千帆 - 懂球帝/虎扑/腾讯体育 APP 数据分析 七麦网-懂球帝迭代记录 懂球帝官网 2017 年中国互联网体育服务行业研究报告 欢迎关注作者微信公众号：「设计大侦探」

2022 卡塔尔世界杯已经拉开帷幕，相信大家从这周开始，都已经陷入四年一次的狂热的足球氛围中。那你有听过懂球帝这款足球 APP 吗？作为国内用户规模和影响力最大的足球社区，据官方统计，懂球帝在全国足球迷中的渗透率高达 83%，甚至有这样一句口号——十个足球迷，八个用懂球帝。

2022 卡塔尔世界杯已经拉开帷幕，相信大家从这周开始，都已经陷入四年一次的狂热的足球氛围中。那你有听过懂球帝这款足球 APP 吗？作为国内用户规模和影响力最大的足球社区，据官方统计，懂球帝在全国足球迷中的渗透率高达 83%，甚至有这样一句口号——十个足球迷，八个用懂球帝。本期设计大侦探，全面拆解体育行业的独角兽 懂球帝 ，看看一款足球类APP是如何设计的！

往期拆解：

万字拆解！樊登读书产品设计全方位深度解析 编者按：本文从产品画像、读书服务、内容服务、会员服务等多个方面，完整拆解樊登读书的产品设计。

阅读文章 >

一、导读 1. 内容结构

全文 8517 字，分为五个部分，分别是导读、产品画像、内容服务、变现服务和设计总结，你可以通过下面的思维导图对本文内容结构有全面的了解。

2. 适合人群

第一类，UI/交互设计师，可以跳出执行层，去思考懂球帝的产品设计策略，提升产品分析能力；

第二类，产品经理/运营，通过全面的产品设计拆解、策略推导，获取 产品设计 参考；

第三类，体育产品行业从业者，通过对懂球帝的全面拆解，获取竞品设计参考。

3. 分析模型

我们主要运用三种模型对产品的功能、设计进行拆解，由于没有权威的官方数据，所以我们更多以推导的形式去思考懂球帝为什么这样设计。

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

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

万字读书笔记！产品设计宝典《上瘾》全面解读！（上） 为什么人们每天都会刷朋友圈、刷抖音，而且一刷就是几个小时，根本停不下来？

阅读文章 >

万字读书笔记！产品设计宝典《上瘾》全面解读（下） 《上瘾》这本书从大量的实验案例调研中，总结出那些让用户上瘾的产品设计原则，最后提炼出了一个让用户上瘾的模型，读完以后，真的恍然大悟，原来习惯类的产品需要这么设计。

阅读文章 >

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

二、产品画像 1. 产品介绍

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

2. 商业模式

① 客户细分

懂球帝的客户群体主要以足球迷为主，年龄区间在 24-35 岁，男性居多。据官方数据，在足球球迷群体中，懂球帝 APP 的渗透率高达 83%。从这些数据可以看得出来，懂球帝是一个覆盖大众足球用户群体的产品，不仅为用户提供专业的足球资讯、直播、竞彩和游戏等服务，还满足了很多小众用户群体的需求，比如球星卡交易、赛事举办曝光等。

② 价值主张

懂球帝以懂足球，更懂你为价值主张。

③ 渠道通路

懂球帝主要通过网络媒体平台进行拉新引流，比如微信、微博（56.6 万）、抖音（110 万粉丝）、知乎和小红书（3.7 万）等平台，其次还会通过赞助线下足球比赛活动进行宣传，比如懂球帝足球星火公益计划等，还有会直接投入广告进行宣传，比如在世界杯、欧洲杯、欧洲五大联赛投入广告，邀请世界巨星为产品代言等。

④ 客户关系

懂球帝主要通过社区、圈子和粉丝群等方式和用户建立紧密的关系。

⑤ 收入来源

懂球帝的收入来源主要通过会员 VIP、商城、竞彩、游戏和广告等方式实现营收。

⑥ 核心资源

懂球帝在足球领域深耕已有十年，无论是技术、数据、资源、口碑还是球迷用户，都已经有了非常夯实的积累。

⑦ 关键业务

懂球帝的核心业务包含足球资讯、球迷社区、体育彩票、比赛直播、球星卡交易和游戏等。

⑧ 重要合作伙伴

第一类，体育行业的知识创作者，通过签约合作的形式为平台输出高质量的内容，比如专栏和懂彩帝；第二类，体育运动员、解说员及具有一定名气的体育从业者，通过在懂球帝建立懂球号和球迷进行深入的沟通，提高个人知名度和影响力；第三类，体育机构和俱乐部，比如亚足联、欧洲各大联赛豪门俱乐部均在懂球帝开通了懂球号，和中国地区的球迷第一时间进行交流互动，提高球队知名度和影响力。

⑨ 成本结构

作为一个互联网产品公司，懂球帝的成本开销主要是产品运营和开发人力等成本。

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

① 头条

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

新闻详情页

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

用户主页

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

② 精选

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

③ 圈子

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

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

懂球号的认证分为两种，第一种是个人认证标识，黄 V，主要针对在业内有一定知名度的记者、球员、KOL 和优秀创作者；第二种是团体认证标识，蓝 V，主要针对各大俱乐部、媒体和有公众影响力的团体。

懂球号作为一个知识创作平台，创作者通过写作获取流量曝光也可以获得收益，以此形成内容创作闭环，为社区提供专业的资讯内容。从官方公布数据看，目前懂球帝已经吸引了众多知名俱乐部开通了懂球号，包括亚足联、欧洲五大联赛众多豪门球队和中国男女足，可谓星光熠熠，具有很大的号召力。

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

① 直播间

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

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

② 数据

赛况

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

阵容

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

③ 竞彩

情报

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

分析

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

专家

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

指数

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

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

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

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

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

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

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

① 球队主页

「球队主页」包含球队当前战绩、动态、赛程、数据、球员、圈子、资料和转会 8 个内容模块。

「动态」 就是把球队的新闻资讯汇总，方便球迷可以看到和俱乐部相关的所有新闻。

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

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

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

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

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

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

② 球员主页

「球员主页」就是展示球员的详细信息，主要包含球员的动态、数据、能力值和资料。

「数据」 统计了球员整个职业生涯在联赛、杯赛以及国家队的数据，包括出场时间、进球数、助攻数、射门次数等，非常全面。

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

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

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

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

① 赛事详情页

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

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

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

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

① 懂彩帝

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

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

② 专家主页

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

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

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

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

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

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

① 小红单会员

小红单会员售价 588 元每月，主要针对足彩的用户，主要权益包含专家方案解锁、专家方案公布、每月神券、冷门提前预警、关键情报推送、高斯大小球模型、必发冷热分布、深度数据分析、欧亚大盘对比、昵称红名、入场广播、红单会员标识和会员免广告 13 种会员权益。

② 红单会员

红单会员售价 1998 元，主要针对足彩用户，和小红单会员特权相比，增加了专家方案折扣（9 折）、免费大数据锦囊（每月 2 次）、会员专属圈子三个服务。

③ D+会员

D+会员属于平台的基础会员，售价 19 元每月，可享受免广告特权、极致画质、尊贵身份和炫彩名牌 4 种特权服务。

五、设计总结 1. 商业层

从懂球帝的商业模式看，懂球帝的盈利模式比较单一。除了传统的线上广告收入，盈利模式主要围绕体育彩票设计，比如懂彩帝专家团以及小红单和红单会员等。而体育彩票这块，由于国家的政策等原因，懂彩帝更像一个知识付费服务，只是向球迷销售投注方案。另外体育彩票服务也容易导致球迷购买了方案去境外网站 Du 球，触及国家的红线区。对于马上年满 10 周岁的懂球帝来说，对商业模式的设计还需要拓展和创新。

2. 内容层

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

3. 体验层

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

4. 运营层

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

参考文献

易观千帆 - 懂球帝/虎扑/腾讯体育 APP 数据分析 七麦网-懂球帝迭代记录 懂球帝官网 2017 年中国互联网体育服务行业研究报告 欢迎关注作者微信公众号：「设计大侦探」

写在最前B 端界面的元素众多，视窗范围大，布局设计多种多样，为了简化布局思维，我们通常给界面添加三个方向上的轴-X、Y、Z。X 轴指水平方向上的轴线，Y 轴指竖直方向上的轴线，以及 Z 轴指在三维空间中垂直于视窗平面的轴线。当设计 B 端界面时，让元素沿着这三个轴进行布局，既能理清我们的设计思路，页面的元素也能展...

写在最前

B 端界面的元素众多，视窗范围大，布局设计多种多样，为了简化布局思维，我们通常给界面添加三个方向上的轴-X、Y、Z。X 轴指水平方向上的轴线，Y 轴指竖直方向上的轴线，以及 Z 轴指在三维空间中垂直于视窗平面的轴线。当设计 B 端界面时，让元素沿着这三个轴进行布局，既能理清我们的设计思路，页面的元素也能展示得更有逻辑。

本文围绕这三个轴，来看看在 B 端界面的三维空间里，都有哪些设计规律。

更多 B端设计 干货：

5000字干货！超全面的B端设计指南：消息通知 消息通知在我们设计的过程当中非常重要，因为它作为系统与用户之间沟通的桥梁，能够帮助我们提示用户：“目前的操作状态、系统的公告、用户之间的互动内容”，而不同的消息内容，我们需要使用不同的消息通知组件来进行反馈，比如用户与用户之间的互动应该采取什么互动方式？

阅读文章 >

一、X 轴的布局与适应 B 端界面在 PC 视窗下展示，范围更大，如常见的分辨率尺寸有 1280x1024、1440x900、1920x1080 等，且浏览器还支持动态拖拽改变视窗宽度。所以 B 端界面在 X 轴上应该更注重内容的延展和适配，合理利用横向增长的空间。根据这一特点，在这一部分中，我们分业务场景来探讨都有哪些典型布局，并针对每一种布局给出合适的适配方式。

B 端典型的业务场景，可大致分为表格、图表、表单、卡片、文字详情五大类页面。这几类界面在 X 轴上排列的方式为单栏型、双栏型、多栏型。如果有侧导航，则在页面最左侧增加侧导航即可，内容区的布局不受影响。

1. 单栏型

表格、图表，这类需要较大展示空间的场景，一般一个页面只有一栏，不再在横向空间进行切割。当视窗横向拉伸时，也为了预览更多的内容，表格和图表进行横向拉伸，保持撑满视窗的状态。

2. 双栏型

表单、文字详情类的页面，采用双栏结构的概率较大。因为表单页除了表单本身的内容外，往往还有右侧的辅助说明面板，或者是预览面板。文字详情页的右侧也经常出现其它阅读内容的推荐列表。当这两类页面视窗在横向拉伸时，适应的方式通常有两种。

① 主模块宽度拉伸，始终撑满视窗，副模块宽度固定。如果主模块每行内容都比较多，推荐使用这种方式，能更大化地浏览主模块的内容，减少不必要的换行。但缺点是，由于内容本身如表单项、详情文字等在 X 轴上占用的空间不多，他们所在的模块横向拉伸后，会出现很多留白。

② 各模块保持宽度固定并居中展示，不跟随视窗伸缩而变化。如果主模块每行内容不多，又需要频繁的左右对照，推荐使用这种方式。

3. 多栏型

多栏型页面一般用于数据看板、媒体卡片(视频/图片)的展示。因为这类业务场景，卡片数量多，无法简单地将页面进行区块的分割，所以以卡片为单元来填充页面。当视窗横向拉伸时，这里也会出现 2 种适应的方式。

① 数据看板类页面，每个卡片等比拉伸（也可仅横向拉伸），列数不增加，让图表能展示地更清晰。

② 媒体卡类页面，卡片需要设定一个最佳展示的宽度如 w，当视窗拉宽时，卡片等比放大。当页面拉宽到能增加一列宽度为 w 的卡片时，所有卡片宽度都恢复到 w，增加一列。

上述说了这么多适配的规则，当然我们也可以给视窗设定一个统一的适配上限，避免当视窗非常宽时，页面的元素过于左右分离，反而不方便浏览。比如我们可以设置当视窗宽度＞1920px 后，页面元素就不再跟随撑满，达到内容区宽度上限值，居中展示在界面中。

二、Y 轴的空间利用 B 端界面，面对复杂的信息，我们往往会面对两类问题，如何承载大量的信息，如何区分强弱主次。这就涉及到页面 Y 轴的空间利用了。这里我们提供 4 个小办法来解决上面的问题。当出现大量信息时，应该注重 Y 轴空间的扩展，合理搭配翻页、加载等逻辑。当希望对页面元素区分强弱时，可以搭配滚动吸顶、局部折叠等交互，有序展示更多信息。

1. 如何承载大量信息

① 替换型

对于表格类页面，为了方便快速查找所需信息，采用分页器的方式展示更多的数据内容，即把当前页内容做替换。即页面 Y 轴的高度是固定的，仅做内容的变更。

② 向下延展型

对于瀑布流类页面，由于数据量大，且没有快速定位的诉求，使用无限加载的方式，向下加载更多的数据，这种类型的页面 Y 轴可无限延展。

2. 如何区分强弱主次

① 强-滚动吸顶

当页面滚动到某个位置，需要去强调一些导航性质的内容时，我们可以使用滚动吸顶的交互，即当把这个元素（如标题）滚动至当前视窗的顶部时，发生吸顶事件，始终停留在页面中，该元素所引领的模块在其下方滚动浏览。当把这个模块滚动完，吸顶交互失效。这样即能临时性地强调某些内容，还不会影响其它模块在 Y 轴上的展示。

② 弱-局部展开

对于表单类页面，若在某个选项下还存在二级内容，则在初始展示时，优先突出主选项本身，当选中后再展开二级内容。这样即能节省首屏空间，也能顺应使用者的学习、使用心智，在合适的时机展示细节内容。

三、Z 轴的叠加顺序 说完 X 轴、Y 轴的布局设计，我们最后来看看 Z 轴。这里，我们需要把视角从二维平面转为三维空间，比如吸顶的导航，菜单浮层，模态弹窗这些都属于出现在 Z 轴上的元素，他们之间可以进行层层叠加和嵌套，于是会出现叠加冲突的场景，导致发生错误的遮挡现象。所以 Z 轴设计的关键点在于不同元素的叠加排序设计。那么怎样才能有一个贯穿全局的合理排序，让元素们能乖乖排在自己的队列中呢？

此处，我们将页面的所有可能出现的元素按照 Z 轴的特点归类到三大区间里。每个区间内给出相应元素的排序顺序指导，并配合动态计算的逻辑，Z 轴上的元素就能整齐地叠加起来啦。

1. 基础区间

展示类-页面中默认就存在的、不会对其它元素造成遮挡的元素（表单、表格、文字、按钮、图表、图片等）。 固定类-固定在页面某处的元素，滑动页面时会对 a 的元素产生遮挡（如吸顶导航、固定表头/列、锚点、返回顶部按钮等）。 浮层类-由 a 中的元素触发出的、指向该元素的临时浮层元素。会对 a 以及固定元素产生遮挡。临时浮层之间的 z 轴层级遵守触发的时间先后顺序，若临时浮层可以同时存在在界面中，则后触发的层级更高（下拉浮层、气泡）。

2. 模态区间

模态层-由基础区间的元素触发的，覆盖整个视窗的模态元素，当该元素出现后，至于基础区间所有元素层级之上，基础区间的所有功能无法交互。(抽屉、对话框和全屏预览等) 临时浮层-在模态元素上出现的临时浮层，计算高度时，可把 d 层想象成基础区间的 c 层。（下拉浮层、气泡等） 第二层模态层-在 d 出现之后出现的覆盖整个视窗的模态元素。不特指第二层，也可以是第三、或更多。 模态区间内，多个模态层可进行叠加（即上文的 f），叠加时一样需要遵守触发时间的先后顺序，后触发的层级更高出现在更上层。但是我们也应注意，模态层不能叠加太多，会导致当前页面覆盖过多内容，一般最多用到两层模态层就能满足大部分场景了。

3. 顶层区间

全局层-全局的、不被模态元素遮挡的元素。可以常驻在页面中，也可临时出现。 临时层-由 g 触发出的临时浮层 最高层-始终动态高于当前页面所有层的元素（比较典型的是 Toast 组件）。

四、写在最后 到这里，我们就浅谈完关于 B 端界面的 X、Y、Z 轴上的设计特点了，虽然是一些高度抽象的内容，真正按照业务需求执行设计的时候，遇到的界面一定比我们这里谈论的更复杂，但是只要我们清楚底层的空间布局、适应方式、扩展手段和叠加逻辑，再复杂的界面无非就是规则的嵌套，希望这篇文章能带给大家一些小小的启发。

欢迎关注作者的微信公众号：「百度MEUX」

写在最前B 端界面的元素众多，视窗范围大，布局设计多种多样，为了简化布局思维，我们通常给界面添加三个方向上的轴-X、Y、Z。X 轴指水平方向上的轴线，Y 轴指竖直方向上的轴线，以及 Z 轴指在三维空间中垂直于视窗平面的轴线。当设计 B 端界面时，让元素沿着这三个轴进行布局，既能理清我们的设计思路，页面的元素也能展...

写在最前

B 端界面的元素众多，视窗范围大，布局设计多种多样，为了简化布局思维，我们通常给界面添加三个方向上的轴-X、Y、Z。X 轴指水平方向上的轴线，Y 轴指竖直方向上的轴线，以及 Z 轴指在三维空间中垂直于视窗平面的轴线。当设计 B 端界面时，让元素沿着这三个轴进行布局，既能理清我们的设计思路，页面的元素也能展示得更有逻辑。

本文围绕这三个轴，来看看在 B 端界面的三维空间里，都有哪些设计规律。

更多 B端设计 干货：

5000字干货！超全面的B端设计指南：消息通知 消息通知在我们设计的过程当中非常重要，因为它作为系统与用户之间沟通的桥梁，能够帮助我们提示用户：“目前的操作状态、系统的公告、用户之间的互动内容”，而不同的消息内容，我们需要使用不同的消息通知组件来进行反馈，比如用户与用户之间的互动应该采取什么互动方式？

阅读文章 >

一、X 轴的布局与适应 B 端界面在 PC 视窗下展示，范围更大，如常见的分辨率尺寸有 1280x1024、1440x900、1920x1080 等，且浏览器还支持动态拖拽改变视窗宽度。所以 B 端界面在 X 轴上应该更注重内容的延展和适配，合理利用横向增长的空间。根据这一特点，在这一部分中，我们分业务场景来探讨都有哪些典型布局，并针对每一种布局给出合适的适配方式。

B 端典型的业务场景，可大致分为表格、图表、表单、卡片、文字详情五大类页面。这几类界面在 X 轴上排列的方式为单栏型、双栏型、多栏型。如果有侧导航，则在页面最左侧增加侧导航即可，内容区的布局不受影响。

1. 单栏型

表格、图表，这类需要较大展示空间的场景，一般一个页面只有一栏，不再在横向空间进行切割。当视窗横向拉伸时，也为了预览更多的内容，表格和图表进行横向拉伸，保持撑满视窗的状态。

2. 双栏型

表单、文字详情类的页面，采用双栏结构的概率较大。因为表单页除了表单本身的内容外，往往还有右侧的辅助说明面板，或者是预览面板。文字详情页的右侧也经常出现其它阅读内容的推荐列表。当这两类页面视窗在横向拉伸时，适应的方式通常有两种。

① 主模块宽度拉伸，始终撑满视窗，副模块宽度固定。如果主模块每行内容都比较多，推荐使用这种方式，能更大化地浏览主模块的内容，减少不必要的换行。但缺点是，由于内容本身如表单项、详情文字等在 X 轴上占用的空间不多，他们所在的模块横向拉伸后，会出现很多留白。

② 各模块保持宽度固定并居中展示，不跟随视窗伸缩而变化。如果主模块每行内容不多，又需要频繁的左右对照，推荐使用这种方式。

3. 多栏型

多栏型页面一般用于数据看板、媒体卡片(视频/图片)的展示。因为这类业务场景，卡片数量多，无法简单地将页面进行区块的分割，所以以卡片为单元来填充页面。当视窗横向拉伸时，这里也会出现 2 种适应的方式。

① 数据看板类页面，每个卡片等比拉伸（也可仅横向拉伸），列数不增加，让图表能展示地更清晰。

② 媒体卡类页面，卡片需要设定一个最佳展示的宽度如 w，当视窗拉宽时，卡片等比放大。当页面拉宽到能增加一列宽度为 w 的卡片时，所有卡片宽度都恢复到 w，增加一列。

上述说了这么多适配的规则，当然我们也可以给视窗设定一个统一的适配上限，避免当视窗非常宽时，页面的元素过于左右分离，反而不方便浏览。比如我们可以设置当视窗宽度＞1920px 后，页面元素就不再跟随撑满，达到内容区宽度上限值，居中展示在界面中。

二、Y 轴的空间利用 B 端界面，面对复杂的信息，我们往往会面对两类问题，如何承载大量的信息，如何区分强弱主次。这就涉及到页面 Y 轴的空间利用了。这里我们提供 4 个小办法来解决上面的问题。当出现大量信息时，应该注重 Y 轴空间的扩展，合理搭配翻页、加载等逻辑。当希望对页面元素区分强弱时，可以搭配滚动吸顶、局部折叠等交互，有序展示更多信息。

1. 如何承载大量信息

① 替换型

对于表格类页面，为了方便快速查找所需信息，采用分页器的方式展示更多的数据内容，即把当前页内容做替换。即页面 Y 轴的高度是固定的，仅做内容的变更。

② 向下延展型

对于瀑布流类页面，由于数据量大，且没有快速定位的诉求，使用无限加载的方式，向下加载更多的数据，这种类型的页面 Y 轴可无限延展。

2. 如何区分强弱主次

① 强-滚动吸顶

当页面滚动到某个位置，需要去强调一些导航性质的内容时，我们可以使用滚动吸顶的交互，即当把这个元素（如标题）滚动至当前视窗的顶部时，发生吸顶事件，始终停留在页面中，该元素所引领的模块在其下方滚动浏览。当把这个模块滚动完，吸顶交互失效。这样即能临时性地强调某些内容，还不会影响其它模块在 Y 轴上的展示。

② 弱-局部展开

对于表单类页面，若在某个选项下还存在二级内容，则在初始展示时，优先突出主选项本身，当选中后再展开二级内容。这样即能节省首屏空间，也能顺应使用者的学习、使用心智，在合适的时机展示细节内容。

三、Z 轴的叠加顺序 说完 X 轴、Y 轴的布局设计，我们最后来看看 Z 轴。这里，我们需要把视角从二维平面转为三维空间，比如吸顶的导航，菜单浮层，模态弹窗这些都属于出现在 Z 轴上的元素，他们之间可以进行层层叠加和嵌套，于是会出现叠加冲突的场景，导致发生错误的遮挡现象。所以 Z 轴设计的关键点在于不同元素的叠加排序设计。那么怎样才能有一个贯穿全局的合理排序，让元素们能乖乖排在自己的队列中呢？

此处，我们将页面的所有可能出现的元素按照 Z 轴的特点归类到三大区间里。每个区间内给出相应元素的排序顺序指导，并配合动态计算的逻辑，Z 轴上的元素就能整齐地叠加起来啦。

1. 基础区间

展示类-页面中默认就存在的、不会对其它元素造成遮挡的元素（表单、表格、文字、按钮、图表、图片等）。 固定类-固定在页面某处的元素，滑动页面时会对 a 的元素产生遮挡（如吸顶导航、固定表头/列、锚点、返回顶部按钮等）。 浮层类-由 a 中的元素触发出的、指向该元素的临时浮层元素。会对 a 以及固定元素产生遮挡。临时浮层之间的 z 轴层级遵守触发的时间先后顺序，若临时浮层可以同时存在在界面中，则后触发的层级更高（下拉浮层、气泡）。

2. 模态区间

模态层-由基础区间的元素触发的，覆盖整个视窗的模态元素，当该元素出现后，至于基础区间所有元素层级之上，基础区间的所有功能无法交互。(抽屉、对话框和全屏预览等) 临时浮层-在模态元素上出现的临时浮层，计算高度时，可把 d 层想象成基础区间的 c 层。（下拉浮层、气泡等） 第二层模态层-在 d 出现之后出现的覆盖整个视窗的模态元素。不特指第二层，也可以是第三、或更多。 模态区间内，多个模态层可进行叠加（即上文的 f），叠加时一样需要遵守触发时间的先后顺序，后触发的层级更高出现在更上层。但是我们也应注意，模态层不能叠加太多，会导致当前页面覆盖过多内容，一般最多用到两层模态层就能满足大部分场景了。

3. 顶层区间

全局层-全局的、不被模态元素遮挡的元素。可以常驻在页面中，也可临时出现。 临时层-由 g 触发出的临时浮层 最高层-始终动态高于当前页面所有层的元素（比较典型的是 Toast 组件）。

四、写在最后 到这里，我们就浅谈完关于 B 端界面的 X、Y、Z 轴上的设计特点了，虽然是一些高度抽象的内容，真正按照业务需求执行设计的时候，遇到的界面一定比我们这里谈论的更复杂，但是只要我们清楚底层的空间布局、适应方式、扩展手段和叠加逻辑，再复杂的界面无非就是规则的嵌套，希望这篇文章能带给大家一些小小的启发。

欢迎关注作者的微信公众号：「百度MEUX」

编者按：这是设计师 Shantanu Kumar 所创建了一份设计素材清单，其中包含 11 个比较有价值的设计素材平台，它们能够让你在做平面设计的时候更快、更好，而且保持较低的预算。下面具体看看吧：众所周知，作为一名平面设计师，在做视觉传达的时候需要替品牌承担大量的挑战性的任务。为了满足客户的期望，设计师需要兼顾...

编者按： 这是设计师 Shantanu Kumar 所创建了一份设计素材清单 ，其中包含 11 个比较有价值的设计素材平台，它们能够让你在做平面设计的时候更快、更好，而且保持较低的预算。下面具体看看吧：

众所周知，作为一名平面设计师，在做视觉传达的时候需要替品牌承担大量的挑战性的任务。为了满足客户的期望，设计师需要兼顾调研员、视觉叙事者和视觉设计师等多个角色。

在调研搜集整理阶段，你绝大多数的工作其实是利用手头的现有资源和素材（比如字体、图片、样机和图标等）快速创建概念，并且将你的想法落地下来。是否擅长筛选素材是决定你的设计是否优秀的关键。

更重要的是，设计素材的好坏，也直接决定了你是否有足够多的时间将注意力集中在项目最具挑战性的部分。如果你必须从零开始创建素材，那么你的项目上所需要投入的时间会更长。

这也是为什么我会整理这么一个优质设计素材列表，你可以基于这些素材来更快实现你想要的设计效果。

1、Fontbrief 字体平台 https://www.fontbrief.com/fontbrief

Font Brief 让你可以找到理想的字体，这个平台是由平面设计师 Victor Bartis 和艺术总监 Christian Costea 所搭建起来的，他们精心筛选了一波极具风格和个性的字体，希望做排印和平面设计和品牌设计的设计师能够从中收益。

2、Velvetyne 字体平台 http://velvetyne.fr/

从 2010 年开始，Velvetyne Type Foundry 就一直在分发免费开源的字体，Velvetyne 所筛选的字体通常素质相当过硬，有着较强的美学价值，并且极具时尚感，对于平面设计师而言，它是不可多得的时尚设计试验场。

3、配色工具 Color Lisa http://colorlisa.com/

每次在设计师会在设计项目上投入大量的时间来选择合适的配色方案，而 Color Lisa 可以从一些标志性的艺术家的的配色当中汲取灵感，其中内置了大量这样的配色方案，你可以根据你喜欢的艺术家和作品来筛选配色方案。

4、Control 图库 https://control.rocks/

Control 提供了 108 幅可以进行深入定制的扁平风格插画，并且每幅插画都有 AI、Figma 和 Sketch 对应的矢量文件下载，并且提供 PNG 格式下载。这套插画图库并非完全免费的，但是提供免费试用。

5、Open Peeps 图库 https://www.openpeeps.com/

Open Peeps 是一个足够简单，但是也足够优秀的插图素材解决方案，它提供一系列的手绘插图，可以用于产品、运营、海报、用户流程和故事板等常见的场景，这些角色插画千差万别，但是又个性十足。

6、设计系统检查清单 https://www.designsystemchecklist.com/

这个网站是一个设计专家团队的协作成果，他们深入钻研了设计系统，并且耗费了大量的来测试和实战，并且最终确定了设计系统所涉及到的要点，病最终输出了这样的一套检查清单，方便你能够制作出更好的设计系统。

7、样机之家 https://houseofmockups.com/

这是一个由 Shillington Education 的创意总监 Anthony Wood 所创立的再现社区，名为 House of Mockup。Shillington 是一个独一无二的设计训练营，他们提供设计培训，遍布美国、欧洲和澳大利亚，而 House of Mockups 也是他们所输出的样机素材平台。

8、Lordicon 图标 https://lordicon.com/

你会在 Lordicon 看到一系列素质令人惊叹的优质图标，既有静态的也有动态的，它们有着庞大的内容库，而且有近乎无限的排列组合的可能性。每个图标都有 Gif、Svg、Eps和 Png 的格式，你可以直接下载，也可以使用 HTML 代码直接调用嵌入到你的实战项目当中去。

9、图库 Offset https://www.offset.com/

Offset 是一个由 ShutterStock 所运营的高素质图片素材网站，他们是专门提供适用于商业项目和内容平台的高素质、免版税（注意不是免费）的图片素材。他们对图片素质要求超级高，这也意味着仅仅只有世界一流的摄影师才能为 Offset 提供图片内容。Offset 的每张图片都经过精心挑选，并且检查过质量。

10、Dieline 设计博客 https://thedieline.com/

如果你对于包装设计、平面设计都非常感兴趣，那么你可以关注一下 Dieline，它会快速更新最热的包装设计的资讯和案例。他们的目标是创建一个面向全球包装设计和平面设计的内容平台。

11、AIGA：关注设计 https://eyeondesign.aiga.org/

Eye on design 这个是美国平面艺术协会和 AIGA 的设计专家运营的一个博客，内容涉及到设计的方方面面，包含字体排印、界面设计、用户体验、品牌等主题，其中包含了大量精心挑选的内容和有见地的信息。

编者按：本文从组件介绍、使用场景、设计要点、样式拓展4个方面，帮你快速熟悉UI组件中的瀑布流设计。往期组件科普：UI组件应用指南！标题栏设计方式详解编者按：本文从标题栏的组件介绍、设计要点、使用场景、样式拓展四个方面，帮你掌握UI组件中的标题栏设计。

编者按：本文从组件介绍、使用场景、设计要点、样式拓展4个方面，帮你快速熟悉 UI组件 中的 瀑布流 设计。

往期组件科普：

UI组件应用指南！标题栏设计方式详解 编者按：本文从标题栏的组件介绍、设计要点、使用场景、样式拓展四个方面，帮你掌握UI组件中的标题栏设计。

阅读文章 >

一、组件介绍 瀑布流 (Waterfall Layout)，又称瀑布流式布局，是信息流网格布局的一种视觉形式。顾名思义，这种布局形式既像瀑布一样无限向下倾泻，内容又如水一样没有固定样式。

所以我们可以总结出瀑布流的两个最核心的时间特征：

无限加载 内容等宽不等高 二、使用场景 瀑布流因其视觉特征，多用在以多种比例图片/视频为主体的内容流中，最典型的例子莫过于花瓣、Pinterest，这类图片采集网站使用瀑布流可以更有效地利用页面空间并充分展示图片内容而不裁切，同时让用户的浏览体验更加沉浸，错落的图片也相对更容易形成有效的视觉引导，引导用户不断向下浏览。

以及另外一类以小红书、淘宝为代表的强内容展示 APP，在布局内容时不约而同地使用瀑布流，其核心原因即在于其强视觉引导的特性。

三、设计要点 1. 列宽的制定逻辑

对于等宽的网格列表来说，我们只需要去关注它们之间的间距是多少，这样更方便不同宽度设备的适配，网格会自动扣除间距并适配网格宽度，而不必设计师一一去定义。

例如，我们只需定义两列网格的左右边距均为 20pt，间距 12pt。

那么不管是在 12/13/14 的 390 宽度中，还是在 ProMax 的 428 宽度中，布局都会固定住这三个数值，并自动适配列宽，列宽的数值具体是多少，并不需要我们关注。

这也正是两列网格通用的适配逻辑。

2. 内容的布局

瀑布流有三种内容布局形式。

① 图片等高

在图片等高的情况下，能造成网格高度错落的原因只有文案。文案的长短不一、是否有标签等因素，会造成每个网格中的文案部分出现高度差异，从而形成网格错落。但因为文案通常不会超过两行，这种高度的差值往往是固定且非常有限的，也就是说更容易在下方某些地方回归对齐。

所以这种布局更容易把控视觉秩序，但会因为强制图片等比例导致内容的不完整，除非限制用户上传图片的比例。

② 根据图片比例自由变化

这是一种完全不限制图片比例的形式，网格的高度不仅由图片影响，也由文案影响。几乎不可能做到在下方某处重新对齐，所以视觉上往往更加混乱，偶尔会出现极长或极短的网格，导致视觉权重出现非意图的倾向。

③ 根据有限图片比例变化

这种形式的意思是说，在用户上传图片时就限制图片在有限的几种比例之内，所以尽管网格高度同样由图片和文案共同影响，但却将高度差值限制在了相对有限的范围内。现在大多数电商 APP 采用的便是这种布局形式。

3. 内容的类型

瀑布流发展至今，对于内容类型也有许多 App 根据实际项目需求做出了自己的探索。相较于单一的内容类型，因为内容构成更复杂、需求更多元，更多大型 App 会偏向选用多类型内容混合的形式掺进瀑布流里，在达到功能需求的同时，减轻单一性内容对用户浏览时的信息疲劳。

具体来说，内容类型分成两个大类，主内容和运营内容。

主内容

主内容根据 App 类型的不同，包括但不限于图片、视频、动态、商品，主内容依然是瀑布流中占比最多的内容类型。在一个页面内可以使用一种主内容，也可以多种混合。

在多种主内容混合时，设计形式上通常并不会有太大的区别，只会在同一设计框架下，增改该内容类型特有的信息。

运营内容

针对 App 不断扩大的运营需要，更多 App 会在瀑布流中插入运营内容。

例如，淘宝会在瀑布流最开始的左上角放置一个小型的轮播组件，左上角则是主推的与拼多多抗衡的百亿补贴功能入口。

以及马蜂窝，在顶部放置一个两列宽的轮播推荐位。

这些都是很不错的根据自身需要改造瀑布流的实践。

三、样式拓展 1. 站酷

站酷的瀑布流会在中途插入一组视觉上差异较大、与主内容类型相干性也较低的推荐设计师用户，因为站酷瀑布流内容类型较为单一，这么做可以用来调节单一内容类型对浏览造成的视觉压力。

2. 马蜂窝

马蜂窝的瀑布流样式差异化做得相当大，不管是纵向对比(与同页面其他卡片)还是横向对比(与其他 App 瀑布流)，设计都显得非常大胆前卫，所以马蜂窝的卡片样式有比较好的参考性。

3. 其他瀑布流样式

结尾 瀑布流的组件就介绍到这，后续所有有关组件的介绍都会同步更新。

欢迎关注作者的微信公众号：「超人的电话亭」

大家好，这里是和你们聊设计的花生~科技风一直都是 PPT 设计中比较热门的风格，而想做好科技感，除了合适的配色，自然也少不了各种具有形式美的抽象几何图案。今天就为大家推荐 5 个高质量的科技风背景生成工具，用它们可以一键生成色彩绚烂、形式精致、甚至是具有动态效果的科技感背景，如放射线、粒子、波浪、几何立体、光效等...

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

科技风一直都是 PPT 设计中比较热门的风格，而想做好科技感，除了合适的配色，自然也少不了各种具有形式美的抽象几何图案。今天就为大家推荐 5 个高质量的科技风背景生成工具，用它们可以一键生成色彩绚烂、形式精致、甚至是具有动态效果的科技感背景，如放射线、粒子、波浪、几何立体、光效等。且这些工具都是免费的，打开即用，可以极大提升我们的工作效率。

简单又实用！5种设计师必学的海报设计装饰元素（二） 大家好，这里是和你们聊设计的花生~ 上一期的文章发出后受到很多小伙伴的欢迎，那今天继续为大家带来 5 种海报常用装饰元素设计的小技巧，本期的元素分别是：环绕文字、黑白方格、条形码、进度条(能量条)和文字警戒带。

阅读文章 >

一、Design tools 网址直达： https://wangyasai.github.io/designtools.html （使用梯子速度更快）

Design tools 是由数据可视化设计师 @赛亚大人 开发的神器站，包含粒子、波浪、放射线等多个元素生成器，且都是动态效果，科技感十足。每个生成器都有大小、颜色、样式、速度等多个参数可供调节，因此样式变化非常丰富。生成的效果可以下载为 PNG 透明底格式，也可用使用录屏工具将其保存为动态背景。

pbkDesigntools 里的工具合集

使用 THE MATRIXS 生成的效果图

使用 PLAY A BALL 生成的效果图

免费好用！自媒体时代设计师必备的5款Gif制作工具 大家好，我是和你们聊设计的花生 ~ 身处自媒体时代，我们每个设计师都可以作为内容创作者在微博、小红书、知乎、朋友圈这些地方分享自己的经验和想法，而无论是写设计教程，还是制作表情包，Gif 动图都是一种极佳的信息传递媒介，它比静态图片更详细生动的展示步骤和细节，也比视频更轻便直观，因此应

阅读文章 >

二、Bg Painter 网址直达： http://bg-painter.com/

Bg Painter 是一个集合了 30 种酷炫背景生成器的网站，开发者是中国设计师徐方烨。使用 Bg Painter 我们可以生成网格渐变、放射线、粒子或线条图案的背景，每种图案还可以调节成不同的样式和颜色。最终结果可以保存为 PNG 图片，也可以使用 Gif 录制工具将具有动态的效果保存为动态背景。

Bg Painter 里的工具合集

网格渐变生成效果

科幻粒子生成效果

三、Fffuel 网址直达： https://fffuel.co/

Fffuel 是一个集合了二十多种图案背景生成器的网站，其中效果最好的是几何线性图案，包含各种不同的样式和渐变效果。每种图案样式都有非常大的调整空间，线条粗细、密度、颜色、组合样式都可以修改。下载格式为 SVG，导入 Ai 后可以再次进行修改或重新组合。

Fffuel 里的工具合集

使用 gggyrate 生成线条样式，导入 Ai 后调整所得的效果

使用 cccoil 生成线条样式，导入 Ai 后调整所得的效果

未来科技感怎么做？快来看这5个顶尖灵感参考（附免费教程） 大家好，我是和你们聊设计的花生~ 具有未来科技感的设计风格在高新科技、科幻游戏、潮流综艺等领域非常受欢迎，包括前段时间备受瞩目的哈工大录取通知书，也是运用了这种科技感的设计风格。

阅读文章 >

四、Silk 网址直达： http://weavesilk.com/

详细介绍： https://uiiiuiii.com/software/204185.html

Silk 是一个交互光效生成器，在屏幕上滑动鼠标，就能生成如丝绸般流畅绚丽的光效图案。笔画会以镜像对称或者中心螺旋对称的方式呈现，这也使得生成的图案具有秩序美感，随便几笔生成的效果也有非常华丽，但也可以关闭对称选项。光效的颜色及对称倍数可以修改，最终效果可以保存为 PNG 格式的图片。

艺术家使用 Silk 生成的关系图案，图片来源于网络。

未开启镜像对称和螺旋对称，对称倍数为 0 的效果展示

未开启镜像对称和螺旋对称，对称倍数为 5 的效果展示

五、Fluid Simulation 网址直达： https://paveldogreat.github.io/WebGL-Fluid-Simulation/

具体介绍： https://www.uisdc.com/fluid-simulation

Fluid Simulation 是一款在线流体效果模拟器，滑动鼠标就能在界面上生成类似于彩色油墨在水中喷涌扩散的效果。与上面介绍过的生成器一样，流体的色彩、扩散样式、速度等参数都可以修调整，形成的效果也是千变万化。按 P 键可以将动效定格，点击「take screenshot」可以保存为图片，勾选「transparent」则可以保存为透明底图片。

Fluid Simulation 的多色流体效果

Fluid Simulation 的单色流体效果

设计博主@Simon_阿文使用 Fluid Simulation 生成素材制作的 PPT 页面

以上就是今天为大家推荐的 5 个科技感背景生成神器，希望对大家的设计有帮助~ 喜欢的小伙伴记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~

推荐阅读：

PPT超全自学指南（14）：进击的版式之Logo页处理和科技风拆解 进击的版式简而言之就是分享一些我观察PPT设计作品的方法，从整体到细节都会讲到。

阅读文章 >

照片没有氛围感？快来试试这款打光修图的神器「Relight」 大家好这里是和你们聊设计的花生~ 在人像摄影中，灯光设置是非常重要重要的一环，好的打光能丰富画面层次，提升整体情绪氛围。

阅读文章 >

Hi 大家好，在半年前我和亚辉、Shadow 一起主编的《智能座舱的人因与人机交互设计》（书名待定）的撰写工作已接近尾声，和大家商议后，在此我来提前共享书中的部分初稿，希望能对读者有所帮助，以下进入正文。更多车载交互类设计干货：HMI设计干货！滑动和点击哪个更不容易让司机分心？

Hi 大家好，在半年前我和亚辉、Shadow 一起主编的《智能座舱的人因与人机交互设计》（书名待定）的撰写工作已接近尾声，和大家商议后，在此我来提前共享书中的部分初稿，希望能对读者有所帮助，以下进入正文。

更多车载交互类设计干货：

HMI设计干货！滑动和点击哪个更不容易让司机分心？ 车载触摸屏与手机/平板电脑最大的区别之一是使用场景 —— 车载触摸屏可在汽车驾驶使用。

阅读文章 >

笔者还记得在 2019 年，大家都在讨论未来的座舱只有一个屏幕还是屏幕的数量越来越多，从当前来看后者是大多数车企选择的答案。为什么？为副驾和后排乘客增加屏幕的确有助于提升乘坐体验，不过当前更重要的原因是车辆增加屏幕的成本并不高，但它能给这辆车带来一定的溢价和利润空间，同时能让整个座舱更显科技感与豪华感，所以车企都会选择在自己的中高端车型上设置多个屏幕。那么，未来座舱内是否还会有更多的屏幕？这些屏幕究竟用来做什么？这两个问题成为车企当前思考的问题，以下是笔者的一些看法。

HUD、仪表盘、中控屏、车控屏、副驾屏甚至是方向盘屏都是我们在以往车型中所看到的，常见组合可以参考以下不同屏幕的布局演变方式。在多屏交互上，很多车企都会关注屏幕之间的信息切换，包括仪表盘和中控之间的信息切换，例如几何汽车允许驾驶员通过三指左滑的形式将中控的地图信息切换到仪表盘上；以及中控和副驾屏之间的信息切换，例如小鹏 G9 允许用户无论在主屏或者副屏观看电影时，都可以通过两指滑动分享屏幕。

除了以上常见的屏幕，透明 A 柱和电子后视镜两种新屏幕在未来都有可能成为各个车型的配置选项。透明 A 柱的作用是避免驾驶员在行车过程中视野被 A 柱部分遮挡，而电子后视镜相比传统光学后视镜能做到防水、防雾、防污和夜视能力，同时电子后视镜的屏幕摆放位置在车内，驾驶员需要扭头获取信息的难度明显降低。除此之外，当透明 A 柱及电子后视镜和 ADAS 联动显示增强现实信息，在一定程度上能和 HUD 在空间和方位上互补，为驾驶员带来更丰富的车外环境信息显示。

以上都属于座舱内部的屏幕，而手机、智能手表甚至 AR 眼镜等设备属于用户随身携带的屏幕，车企和手机终端设备厂商都在相互探索不同屏幕之间的交互方式有哪些，例如苹果在 WWDC 2022 上发布的最新一代 Carplay，它允许用户的 iPhone 应用和信息直接显示在汽车多个屏幕上，打破了手机和车辆数据的交互隔阂。

那么智能座舱的多屏交互该如何设计？目前工业界和学术界都没有一个明确的答案。笔者认为智能座舱多屏交互是一个很前沿的领域，指导我们向前探索的最好方法是从其他领域参考和吸取一些可用的原则，并对此进行合适的改造，以下是笔者通过大量的观察和分析总结出来的 5 条设计原则：

一、0-3 步内完成绝大部分的多屏交互和设置 提出这条原则主要有两点的考量。一是从安全、高效的角度出发，我们不希望用户在驾驶过程中还需要多步的操作才能将当前屏幕的信息流转到另外一个屏幕上，目前多个厂商实现的通过多指滑动分享数据也是同一个道理。二是参考了苹果在跨设备交互上的做法，笔者在过往发现苹果绝大部分的跨设备交互都能在 3 步内完成，这也是为什么苹果用户高度依赖苹果生态的原因之一。

要实现该原则，那么用户随身携带的手机、手表和车载系统需要无缝、实时地连接在一起，否则用户使用时需要的连接步骤会远大于 3 步，这时需要手机厂商和车企有更深的配合和联动。在手机和车载系统联动上，笔者以问界 M7 的鸿蒙系统作为参考案例。当用户的手机和车载系统都登录了华为账号，用户上车后无需任何操作两台设备已经互联一起，这时用户可以通过“打开应用列表”-“切换到手机应用列表”两步操作直接在中控大屏上访问手机上的应用，这种高效、直接、无感的交互方式值得每一位从业人员去学习和探索。

二、多屏之间的交互过程需要符合用户的预期 当座舱内屏幕越来越多，用户对于每个屏幕的详细作用需要一定的认知和理解过程，在这过程中用户很有可能按照过往经验以及所处环境对其进行理解，例如使用鸿蒙系统的用户不一定了解苹果的 Carplay 系统。另外，每一块屏幕的分工应该是明确且能根据用户和车辆状态而动态变化的，例如当车辆左后方即将出现危险，应当使用左侧的电子后视镜而不是通过中控来提示驾驶员；在驾驶过程中车载系统应当避免显示无关要紧的信息，尤其是车辆处于高速驾驶或者驾驶员处于高负荷的状态下。

众所周知，国内绝大部分车型的仪表盘属于 QNX 系统，中控的系统有 Android、鸿蒙、Linux 等等，绝大部分用户的手机设备属于 Android、iOS 或者鸿蒙系统，每个系统之间的交互细节和表现都需要人为重新定义好，定义不好极有可能引起用户的突兀或者不解。例如用户上车后，车载系统直接和副驾的手机系统建立了连接，而不是和主驾的手机进行互联；驾驶过程中，中控不断显示手机的消息推送以及在多人场合下直接显示视频通话请求的推送.......这些明显都是不好的预期。那么什么是好的或者不好的用户预期？这部分需要读者多以用户为中心的角度进行思考、设计和测试才能知道。

三、信息的交互需要符合当前屏幕的使用体验 当中控信息显示在仪表盘或者 HUD 时，第一我们应当遵循仪表盘和 HUD 的设计规范，这时响应式设计能起到较大的帮助。第二我们需要关注信息的交互方式，我们不可能让用户通过触控仪表盘的方式对此信息进行交互，也不可能在仪表盘或者 HUD 上显示文本框并让用户通过文本输入法进行输入。每一块屏幕有各自的交互行为，笔者认为这些交互行为可以分为 4 种情况，它们分别是：瞥一眼、轻交互、中等交互和沉浸式交互，每一种交互行为承载的信息量大小以及需要的注意力和时间会依次增加。

以手机的消息推送为例，只需要用户注意一下就能完成的任务都能认为是“瞥一眼”；如果用户需要关闭这条推送可以等待几秒或者将其往上推，而这种只需要 1-2 步操作会定义为“轻交互”。在驾驶过程中，HUD、仪表盘、电子后视镜以及透明 A 柱需要承载的信息应该尽可能符合“瞥一眼”的原则，如果需要交互则允许用户通过方向盘按键、语音等方式一步完成。如果读者想不到合理的设计方法，可以参考智能手表操作系统的设计原则和规范。

“中等交互”更多是指需要若干步骤才能完成的任务，例如用户在手机上回复短信；而“沉浸式交互”可以理解为用户在手机上全神贯注地看视频或者玩游戏。很明显“中等交互”和“沉浸式交互”不应该影响正在手动驾驶的驾驶员，但有些“中等交互”确实需要驾驶员在驾驶过程实施，例如中途切换导航规划。在过往我们会将这些信息和交互全部显示在中控上，其实我们也可以通过仪表盘和方向盘的方式承载和交互信息，这时候方向盘是否有可能出现一个屏幕将成为车厂讨论的问题。笔者认为，从手机和车载系统融合的角度来看，方向盘屏幕在一定程度上比中控屏幕更好地完成“中等交互”，例如驾驶过程中用户可以在方向盘屏幕操纵地图和完成多项设置步骤。

当每块屏幕都有了自己的交互定义，手机信息如何合理显示在多个屏幕上将成为问题。这里有两种方法供读者参考，第一种是赋予每一个屏幕不同的参照，例如仪表盘可以参考智能手表，它只呈现简单的内容或者消息推送，用户需要查看则去中控查看（这时中控相当于智能手机）。第二种是重构每一款服务和应用，让内容可以根据规则动态显示在相应的屏幕上，例如以下表格中微信会结合 OBD 数据、车内人物数量等参数动态调整自己的信息显示和交互策略（这属于笔者遐想的方案），不过这种方法需要手机厂商和车企的深度参与才能实现。无论是哪种方法，我们都应该尽可能让当前信息的交互符合当前屏幕的使用体验以及符合用户的预期。

四、信息的显示策略应当根据场景和用户状态动态调整 智能座舱的每个屏幕都有自己的职责，信息的显示策略应当基于每块屏幕的职责而定制，例如驾驶信息更多呈现在 HUD 和仪表盘上，娱乐信息更多显示在中控屏上，外界环境信息更多显示在 HUD、电子后视镜和透明 A 柱上。但是信息的呈现不应该一成不变，因为在驾驶过程中，所处环境和驾驶水平都会影响驾驶员的认知负荷，结合多重资源理论和耶德定律可知，每个感官通道都有自己的负荷容量，当接收的信息越多，认知负荷越高，越容易引起人的分心甚至紧张。因此信息在哪显示、什么时候显示需要读者重点关注。

显示策略的动态调整也要关注用户的个人设备，因为个人设备也有责任避免用户分心或者认知负荷过载的情况发生。以智能手表为例，智能手表是很好的身体状况监测器，当智能手表检测到驾驶员身体出现异常，这时最好的提示方法是通过仪表盘以及扬声器进行反馈，而不是让用户抬手去看手表上的信息，因为这有可能造成风险。同理，手机信息也应当根据座舱每个屏幕的特性，以及场景和用户状态的变化去动态调整自己的显示策略，具体可参考上述笔者提供的微信案例。

五、隐私的保护在于预防而非补救 每个人都有自己的一点小秘密，当驾驶员的手机信息直接暴露在公共空间中容易造成隐私泄露，因此如何保护隐私在智能座舱中是不可忽略的问题。笔者认为，由 Ann Cavoukian 博士撰写的 Privacy By Design 7 项原则中可被智能座舱重点参考的设计原则是：主动而非被动；预防而非补救。简而言之，隐私设计是关注事前而非事后。

随着人数和双方关系的变化，智能座舱会从个人空间转化为公共空间，将手机中涉及隐私的信息直接映射到中控屏幕或者通过扬声器播放是不合适的。为了避免用户隐私的泄露，笔者有以下设计建议：

个人设备和公用设备互联时需要身份认证校验，校验手段包括人脸识别，声纹识别、设备位置定位等等。 所有涉及隐私的跨设备交互能力需要用户了解和并允许关闭，尤其个人新设备首次进入设备群后。假设在未来同账号下的个人设备都可以直连到座舱的屏幕上，设备首次连接时应该询问用户是否将短信等隐私信息推送到屏幕上，同时也允许用户设置一系列的信息同步选项。 根据车内人数和空间位置合理呈现信息。在智能座舱中副驾和后排乘客较难观察到仪表盘、HUD 上的内容，因此涉及驾驶员的隐私信息可以优先显示在仪表盘、HUD 上。在多人乘坐的场景下，我们需要重点关注声音的播放，因为这容易引起隐私的泄露。上述的微信案例也是考虑到这些细节。 最后，由于智能座舱多屏交互跟场景变化、用户意图、驾驶状态等多个因素有关，而且这项工作在业界和学术界仍处于初期阶段，笔者建议读者多从人因工程和以用户为中心的角度进行思考和设计。这次内容更新到这，下期再见。

欢迎关注作者的微信公众号：「薛志荣」