当你使用形形色色的APP时，是不是时常不由自主地感慨“这个APP的界面太丑了”、“这个APP太难用了，连入口都找不到”，是什么原因造成这种感受呢？
认知心理学中有个概念叫做认知负荷「cognitive load」，它表示大脑在工作中记忆资源的使用量，会影响用户的信息阅读和产品使用体验。本文将从信息层级、信息结构、阅读顺序、信息密度、文案表述五个层面来探讨如何降低用户认知负荷。
格式塔心理学的封闭性原理告诉我们，人们在认知某个东西的时候首先看到的会是整体、而不是单独的部分。如图所示，你首先看到的是一个蓝色的字母U和深褐色的人头侧脸，其次才是构成这个形状的各种细节。
从人类视觉系统成像原理来说，人类天生对于颜色对比非常敏感（彩色视觉是因为视网膜中3种视锥细胞分别感知特定颜色所致，当用户同时看到多种不同的颜色时，不同视锥细胞就会被激活眼睛感受到强烈的对比）。
因此，在设计界面时通常会通过大面积的色块对比来凸出层级更高的信息。
总结来说，我们在平时的设计中常用形状大小差异和颜色对比差异来拉开信息层级。
此外，由于人眼视度（舒适的垂直视场角度为-30°~25°）和用户使用不同设备时的阅读角度问题，人眼对于屏幕上不同区域的关注度有着天然的差异。
因此，我们在设计时若想拉开信息层级，除了使用面积和颜色对比外，也可以通过位置对比来实现，即将层级较高的信息置于舒适阅读区内。如图所示，移动端设备位于屏幕中央偏上的信息在阅读舒适度上会优于屏幕下方的信息。
我们知道了如何通过设计手段来区分信息层级，那在信息层级区分上是不是越多越好呢？
显然不是，信息层级过多也会增加人脑的认知负荷（整个页面显得很花哨）；而信息层级过少，则页面的内容展示会比较平均、不一定能突出所有重点信息。一般来说，我们可以将信息划分为重要信息、次重要信息、一般信息和和辅助信息，也就是信息层级控制在4个以内比较合适。
如图所示，我们把聚划算的页面做高斯模糊后，里面的信息层级就一目了然了。
在讨论信息结构之前，我们首先对基本的信息单元做拆解：信息单元 = 信息本体 + 信息容器，这里我们把信息本体定义为我们主动让用户感知并能辅助其进行下一步动作的信息元素，而容器定义为具有明显视觉区隔的信息承载物。信息本体一般包括图片、文案、icon、行动按钮等，而信息容器可以大到页面小到一般的模态、非模态控件。
如图所示，在典型的电商场景中商品卡片可拆分为信息本体（商品图、商品名、商品价格、利益点）+ 信息容器（卡片）：
熟悉格式塔原理的朋友都知道相近原则——即彼此位置相近的物体会被人们看成是一类东西。同时，保持相同的信息结构意味着视觉焦点内不同层级信息的相对位置是固定的，这样用户在快速扫视某个产品时会降低记忆负担——即无需寻找同属性的信息。反之有一定的记忆负担，不利于用户快速扫视重要信息。
如图所示，滴滴我的钱包页面5张轮播图的信息结构相同，遵循左文右图和主文案在上、辅助文案在下的信息结构。
而支付宝理财页面的轮播图则有着不同的信息结构，如辅助文案和按钮在不同轮播图中的位置和大小、样式均不一样，轮播时同类属性的信息会以不同样式在不同位置切换，增加用户的眼动成本和认知负担。
从页面整体动线看，同类或关联信息会有明显的区块分隔。如下图所示，滴滴「我的」tab在页面整体动线布局上有着非常明显的区块划分来承载关联信息：
用户信息（个人信息+会员信息）→常用工具→促活福利（卡券 + 福利）→平台服务（金融服务 + 企业服务）→低频工具。
从信息单元内部来看，同样会对关联信息做位置上的划分。例如一般的社区信息流卡片结构基本都是生产者信息→内容信息→互动入口。
我们前面提到过信息单元=信息本体+信息容器（容器为具有明显视觉区隔的信息承载物），而信息容器的排布也有其内在的规律。
笔者体验过大量产品后，大致总结了3种较为常见的容器排布结构，即三角结构、宫格结构和列表结构，每种结构容器的排列规则会遵循一定的主次关系并根据其特点有不同的适用场景。
（1）三角结构
我们都知道三角形是多边形里最稳定的结构，其容器排布主次突出（根据主要容器与次要容器的位置关系可分为上下结构和左右结构），用户纵向的视觉迁移路径较短，一般比较适用于数量较少、且有明显优先级的场景。
（2）宫格结构
宫格结构适用于优先级相同或相似的功能入口，一般以四宫格和六宫格为主，数量过多时容易造成视觉疲劳和信息密度过高。四宫格信息容器和六宫格信息容器如图：
值得注意的是容器内也可以是宫格结构，但这种宫格结构的信息主体数量会比信息容器更多：
（3）列表结构
列表结构同样适用于优先级相同或相似的功能入口，但与宫格结构不同的是列表结构的一般具有排布逻辑或规则，如按照时间线排布。
列表结构包含横向列表和纵向列表，横向列表适用于短文案卡片（比如活动或功能入口），方便用户扫视更多图片；纵向列表适用于长文案卡片，用户可以快速扫视较多文字。
在B端设计需求中，我们经常会遇到让用户输入一堆信息的场景，这时候如果我们把所有信息都罗列在1个页面中，可能会造成高跳出率和低完成率。
表单设计领域的专家Adam Silver通过实际项目发现：将较长表单按照关联性拆解为若干部分，能有效提升用户满意度以及完成率。除此之外，Adam还总结了这种设计理念的16个优点，我们认为其中比较有价值的是这3个点：
市面上将长表单拆分成几个步骤做分页处理的产品比较多，如下图小红书就将店铺申请流程拆分为了填写店铺类型、经营类目、个人信息3个部分。
我们都知道用户的阅读习惯一般是近似于从左往右、从上至下的Z字形结构，且基于人眼视度和不同设备屏幕角度的差异，人们扫视屏幕时一般会先注意到屏幕中央偏上一点的位置，因此我们在设计信息结构时也要考虑用户的阅读路径和习惯，将对用户高价值或者高优先级的信息置于视觉焦点容易触及的地方。
那什么是对用户高价值或者高优先级的信息呢？我们判断的标准是哪种信息形式（图片or文字）更能高效地传递有效信息以辅助用户决策，比如在电商产品或外卖产品中一般采用上图下文或者左图右文的信息结构，且会将图片的信息层级拉到最高，这是因为用户在快速扫视过程中仅通过看图即可看到这件商品，初步了解外卖商家卖的是什么。
但如果我们换一个场景，这种形式就不那么适用了，用户仅通过看图并不了解这条资讯的大致含义，因此，此时文案的优先级更高，常常采用上文下图或者左文右图的形式。
国外的用研团队曾通过眼动热力图的AB实验发现通过在图片中加入人类面部表情的视觉引导对于信息的阅读率有明显提升作用。如图所示在第一张广告图中，用户的视觉焦点大部分集中在了婴儿的脸部，而右侧的文案则很少有用户关注，第二张图中婴儿由正脸转化成了侧脸同时眼睛看向右侧的文字，此时右侧文字的眼动热力成像明显提升。
这里的信息密度指的是在单位容器内（卡片、页面）所呈现的信息量，比如在1个页面中如果信息密度大，则相对屏效较高，但却容易增加用户的认知负荷；反之，1个页面中信息密度低则相对屏效较低，用户的认知负荷也相对较低。
我们来看1个关于信息密度对于阅读体验影响的案例：在美国开车，人们常常因为看不懂街边的停车牌而违停被罚款，我们可以看到左图中的停车牌上密密麻麻全是字，想要阅读根本无从下手。
Nikki Sylianteng是一个华裔的设计师，当她初来乍到美国时也因此遇到了很多不便，针对这个问题她简化用户的需求，即：
于是她将文字信息做了可视化处理，通过较少的文字+色块极大地降低了停车牌的信息密度，让司机看到后一目了然。Nikki Sylianteng的这种设计被美国各地的市政部门广泛采用。
在传统媒介中，一张充满文字和图片的报纸与一个时尚杂志封面的信息密度对比更加明显，给读者带来的阅读体验和认知负荷也完全不同，这也是为什么很少有人会耐心读完报纸上的文字。
关于海报与杂志设计还牵涉到图版率这一个概念，简单讲就是图片面积所占整体版面的比率，通常来说图版率越高则表现力和亲和力就越强，有兴趣的读者可以自行上网了解图版率的相关知识，在这里就不做详细阐述了。
在广告场景下，当用户被图片吸引视觉焦点后，文案表述就显得尤其重要了。这时候我们要搞清楚3个问题：
首先，我们得搞清楚核心目标受众是谁，同一款产品来自一线城市的年轻白领和三四线城市的中年人关注点和付费动机可能完全不一样（比如同样都是手机，一线城市的年轻白领更关注颜值和性能，而三四线城市中年人更关注价格和质量）。
这时候产品的广告文案也必须依据核心目标受众的需求点来设计才能命中用户，小米手机的线下广告语在一线城市的地铁站（左图）和农村的大字报广告（右图）就采取了完全不同的描述策略。
在回答完以上3个问题后还需要注意，我们的文案描述目标受众是否能够理解，因为人群不一样，其受教育程度和理解能力也会不一样。
在设计动作文案时，我们时常会受到惯性思维（常态场景下的通用做法）的影响而忽略了动作本身的意涵。
比如下图的二次确认弹窗用户取消上传和取消订单是一个对当前行为的否定，但我们习惯于用“确定”和“取消”来让用户回应是否进行某个行为（我们也可以从另一个角度理解，否定的否定就是肯定，点击「取消」按钮即继续用户当前行为，但这种理解很绕），这个时候就会带来理解上的歧义，当出现这种情况时，最好的做法就是将动作本身简单明了地描述出来避免产生歧义。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、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年中国互联网体育服务行业研究报告
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
作为全球最火爆的体育赛事，世界杯由于其独有的稀缺性，被外界誉为四年一次的足球盛宴。根据国际足联主席因凡蒂诺预测，2022年的卡塔尔世界杯赛事将会吸引到全球超过五十亿人观看，这一人数占全球总人数的比重超过60%。
以往球迷们观看世界杯，更多是通过电视或者央视频、优酷这种传统的互联网视频平台，而在2022年这个冬天，抖音花费10亿巨资，成为了国内首个获得世界杯直播版权的短视频平台。作为拥有6亿日活的抖音，将会如何跨界设计世界杯专题，让亿万球迷能在抖音享受四年一次的足球盛宴，本期设计大侦探，就来全面拆解抖音世界杯专题。
一、栏目入口
抖音世界杯的入口在抖音头部一级导航栏最左边，和周边、关注、商城以及推荐并列。世界杯的栏目首页从上至下主要分为5个部分，分别是轮播（当日热门赛事以及活动）、金刚区（包含赛程、积分榜、有奖预测和我的主队入口）、比赛直播（当日赛事）、名嘴聊球（签约足球大咖）、赛事热点（热点头条资讯）、热门球星（入驻足球巨星）、世界杯好物（周边商城和抖音生活服务）、重磅热播（抖音自制节目）、大家都在拍（平台用户自创视频）和视频信息流（世界杯专题相关视频）。
二、内容策划
抖音在内容策划方面，几乎把前央视解说团队都邀请过来了，比如黄健翔、段暄、刘建宏这些家喻户晓的的足球主持人，都在抖音单独负责至少一款足球综艺栏目。除了解说团队，抖音还邀请了众多跨界娱乐综艺大咖，为球迷一口气送上8个原创足球综艺节目。从这个版块可以看出，抖音对此次世界杯的重视度之高，就像卡塔尔为了举办世界杯投资2200亿美元一样，劣势可以用金钱弥补。
1. 内容专题
1.1 观赛指南
「观赛指南」是指在一场比赛开打之前，各方媒体对这场比赛进行的赛事分析和预测。足球这项运动，由于充满了竞技性，一场焦点比赛，从赛前到比赛，再到比赛后，都充满了无数话题。而观赛指南，可以为球迷提供完整的比赛情报和指南，为比赛做预热。
1.1.1 分组解析
「分组解析」是针对世界杯的8个小组（世界杯有32支参赛球队，分为8个小组，每个小组4支球队，前两名可以晋级到淘汰赛）进行出线形势分析。作为四年举办一次的比赛，对于每支球队来说，都是非常宝贵的机会，所以关于小组的出线分析也往往是世界杯的热门话题之一。从内容设计看，抖音的分组解析包含了专家预测（名嘴大咖）、小组赛程、历史数据（历史对战记录）、热门球员（小组热门球星）和热门动态（相关的足球资讯）五个内容。
1.1.2 赛程解读
「赛程解读」就是针对单场比赛进行解读，包含比赛前瞻（专业的足球分析）、专家点评（世界杯专家团，含金量高）、网友热议（精选网友的高质量分析）、近5场战绩、球队名单、球员PK（核心球员）、积分榜以及相关的最新足球资讯。从这个栏目的内容策划看，由于缺少足彩竞彩和有深度的内容，显得中规中矩，稍显严谨，欠缺互动。
1.2 比赛日报
「比赛日报」就是根据每天结束的比赛生成当天所有比赛的战报，这个页面包含了直播回放、图文战报、视频集锦、赛况详情、技术统计和积分榜等内容，球迷也可以切换不同的比赛查看当场比赛详细的战报。
1.2.1 直播回放
「直播回放」对于体育赛事来说非常重要，比如像深夜场的比赛，大部分球迷都很难熬夜观看，这个时候只能通过直播回放来观看比赛。抖音的「直播回放」提供了全场录播回放、全场集锦（分长集锦和短集锦）、球星集锦和精彩时刻集锦，可以满足不同用户的观看需求。
1.3 热议话题
当一场比赛结束以后，话题讨论的热度将会达到最高值，比如阿根廷输给沙特的比赛，全网球迷都在心疼梅西。抖音在「热议话题」的内容设计上，不仅有独立的图文专题页还有白岩松的「白说世界杯」短视频栏目，给球迷带来全方位的内容解读。
2. 视频节目
2.1 DOU来世界杯
「DOU来世界杯」是抖音官方自制的视频节目，这个节目合计29期，每天更新1期，内容非常丰富，包含比赛复盘、每日看点、球星球队故事和赛事预测等。从栏目定位看，这个栏目直接对标曾经央视体育最知名的《天下足球》栏目，更是邀请了主持多年《天下足球》的主持人段暄亲自负责，这不仅可以确保内容质量，还可以帮助抖音赢取众多80、90后球迷的好感（国内80%的80、90后球迷都是看着《天下足球》长大的），既卖专业，也卖情怀，一举两得。
2.2 宏哥侃球
「宏哥侃球」是资深体育解说员刘建宏独家打造的足球直播综艺，合计12期。刘建宏和段暄一样，是央视体育另一个王牌节目《足球之夜》的制片人和主持人，甚至是第一位获得“金话筒奖”的体育节目主持人。从内容定位看，这个栏目主要以刘建宏通过邀约足球名宿和名人明星聊天的形式，为球迷带来不同角度的比赛解读和话题讨论。从嘉宾阵容看，不仅邀请了李明、徐亮、徐云龙这些足球大咖，还邀请了苏醒、姜昆、樊登、大能、隔壁老樊等跨界名人，可谓群星熠熠。
2.3 黄健翔谈
「黄健翔谈」是前央视主持人黄健翔的个人脱口秀节目，合计24期。从内容定位看，这个栏目主要是黄健翔针对每日比赛进行看点分析，讲述队伍、球员之间的渊源与故事，专业性较强，差异化低。
2.4 依然范志毅
「依然范志毅」是前国足名宿范志毅打造的直播节目。从内容定位看，这个栏目集合了脱口秀、电竞PK、国际球星挑战等娱乐内容，其次还会邀请02年世界杯国足的众多足球大咖一起聊球。范志毅作为前国足名宿，不仅知名度高，近年来在社交媒体平台也以独特的“范式辣评”成为了众多网友崇拜的偶像，话题热度非常高。
2.5 懂球大会
「懂球大会」是以段暄、黄健翔和刘建宏为常驻嘉宾，搭配各路懂球大咖赛前或赛后连线的足球直播节目。从内容定位看，这个节目主打前央视解说铁三角的卖点，再邀请其他足球嘉宾围绕每期的热门话题以直播火热开“吵”的形式为球迷们打造一款直播时代的另类足球节目。
2.6 黄家足球班
「黄家足球班」 是黄健翔联手德云社打造的直播节目，合计12期。从内容定位看，这个节目把足球的专业性稀释，加入了相声的元素，从而拓宽用户人群，让大众都能看得懂，看得进去，感受到足球的乐趣。
2.7 大咖侃球
「大咖侃球」由抖音官方出品。从内容定位看，这个节目主要以邀请体育、文化、财经、商业等领域的名人大咖，围绕世界杯开展泛人文社会热点话题讨的论，旨在打造一个专业又具有趣味性、互动性的世界杯抖音脱口秀。不过这个节目话题宽度太广，目标用户不精准。
2.8 Hi！足球少年
「Hi！足球少年」是世界杯官方赞助商海信独家打造的一款足球少年选秀节目，通过节目选拔足球热忱最突出的4名少年奔赴卡塔尔。这个节目邀请了李明、米卢等国足退役名将，还有柳岩、梁汉文这些娱乐明星，从嘉宾阵容看，这个节目以娱乐选秀为主，目前8期节目已全部更新结束。
三、比赛数据
历时29天的世界杯，将会进行64场比赛，最终决出冠军、MVP和金靴奖等。随着互联网泛娱乐的发展，相比过往大家主要通过电视观看比赛这样静态的形式，现在的足球比赛不仅拥有丰富的直播形式，而且每个平台都有自己独特的看球文化。
1. 直播间
抖音的比赛直播间，功能非常丰富，主要包含六个内容，分别是直播、聊天、阵容、赛况、看点和预测。
①「直播」就像视频弹幕一样，大家可以畅所欲言的一边看球一边聊天。在底部的聊天窗口，点击「分享」后，不仅可以保存本场比赛即时生成的精彩瞬间，还能邀请好友一起观看比赛直播，互动非常强。
②「聊天」这个功能，充分利用了抖音的社交属性，通过邀请好有，可以像建立群组一样快速创建一个直播聊天群，非常便捷。这个功能就像一个VIP包厢，为用户提供了一个相对私密的空间，满足不同用户的需求。
③「阵容」是指当场比赛的出场人员统计，包含首发阵容、球员统计和替补球员等信息，点击球员头像以后，可查看球员当场比赛的数据，包含进球、射门、传球成功率等，非常全面。
④「赛况」是指当场比赛的详细战况，包含各种技术统计，比如控球率、射门数、传球成功率等。
⑤「看点」就是把一场比赛的精彩时刻快速生成GIF，不仅可以作为当场比赛的赛况回放，也降低了用户传播的行动成本，吸引用户分享传播。
⑥「预测」就是竞彩，球迷可以通过金币预测当场比赛的胜平负、两队总进球数以及其他话题。
1.1 播放器
「播放器」的功能非常丰富，除了弹幕、倍速、视频画质和电视投屏这样的常见功能，抖音还支持多种类型的解说和视角方式。比如同一场比赛可以切换不同的主持人（央视主持人、退役运动员还有粤语主持），还支持球星、无障碍字幕、现场原声、战术机位、场馆全景等四种视角方式，观看体验非常丰富。
2. 数据
作为一项体育运动，比赛数据的统计分析至关重要。球迷需要查询世界杯的详细赛程、积分榜、射手榜、球队和球员的详细数据。
2.1 赛程
「赛程」主要为球迷提供世界杯的详细比赛赛程，用户可以直接预约比赛直播。当球迷预约后，抖音会一键生成比赛海报吸引用户传播，设计得非常巧妙。其次抖音的设计团队非常用心，相比其他产品的「赛程」栏目，他们会用一句简短的话来描述每场比赛的结果或前瞻，让「赛程」这个冰冷的栏目加入了温度。
2.2 积分榜
「积分榜」主要为球迷们提供8个小组的积分排行详细，包含胜平负场次、进失球数和小组积分。
2.3 晋级图
「晋级图」主要为淘汰赛服务，当小组赛结束以后，每个小组的前两名会进入淘汰赛，球迷可以通过这个图俯瞰世界杯的晋级明细路径。
2.4 射手榜
「射手榜」主要针对球员个人，统计的数据非常全面，包含进球、助攻、射正、关键传球、红牌、黄牌等数据。
2.4.1 球员主页
「球员主页」就是足球运动员的详情落地页，主要包含六个部分，分别是基础资料（姓名、年龄、身高、体重、位置、身价、效力俱乐部等）、精彩集锦、球员单场表现、球员累计数据、球员赛程和球员百科。
2.5 球队榜
「球队榜」和「射手榜」一样，包含进球、助攻、射正、关键传球、红牌、黄牌等数据。
2.5.1 球队主页
「球队主页」就是参赛球队的详情落地页，主要包含六个部分，分别是基础资料（世界排名、总身价、平均年龄、历届最佳成绩等）、精彩集锦、球队单场表现、球队累计数据、球队赛程、热门球星、球队阵容、历史数据和球队百科。
3、互动
从2014年开始，世界杯就成了一个全民狂欢的盛宴，可谓全民参与，全民娱乐。由于受政策限制，抖音没有足彩版块，而是通过虚拟金币的形式设计了有奖预测和世界杯乐园、足球答人等游戏。其次为了鼓励用户参与到世界杯的盛宴中，抖音还设计了一套世界杯特效，提升用户的参与度。
3.1 有奖预测
「有奖预测」其实就是足球竞彩。足球竞彩作为支撑足球运动发展的重要支柱，也是全民世界杯的主要动力之一。由于国家政策等原因，抖音使用了虚拟的金球币用来作为竞彩的筹码，增加娱乐性。
①「有奖预测」的页面设计比较简单，头部为用户的钱包（金币和红包数量），主视觉为当前比赛的对阵双方，右上角是活动规则和预测记录，右下角是赚金钱币和预测榜。预测的内容主要是比赛的胜平负、总进球数以及其他根据当前比赛设计的竞彩内容，比如梅西会不会进球，比赛会不会出现头球等。
②整个预测页面的内容，相对而言比较简单，主要以提升用户参与度和用户拉新为目的。当用户确认预测后，抖音设计了一个用户拉新的功能，只要邀请好友助力就可以获得10万金币，如果是一个新用户，则可以获得3倍奖励。
3.1.1 钱包
「钱包」的内容主要分为三块，头部是数据板，包含金球币数量、现金金额（金球币可以兑换成现金，提现到自己的银行卡）、奖品数量、优惠券数量和抖音成就（类似勋章）；中间是「金球币抽奖」，用户可以使用金球币进行抽奖，奖品包含足球、优惠券等周边商品；底部是「公益版块」，用户可以使用金球币购买足球等方式助力贫困地区的乡村学校捐建足球场。
3.1.2 预测榜
抖音统计了全站预测榜的球迷，分为全国榜、本地榜和朋友榜。榜单的设计，能增加球迷的攀比心理，提升用户活跃度。
3.1.3 金币游戏
3.1.3.1 世界杯乐园
「世界杯乐园」是一款足球游戏，玩法比较简单，用户通过体力可以让角色不断前进获取福利。而用户获取体力的方式需要做任务、看比赛以及邀请好友。
3.1.3.2 足球答人
「足球答人」是一款问答竞技类型足球游戏。这款游戏设计得非常有创意，三人随机组队，通过答题的形式模拟足球比赛在线PK。第一个回答正确的用户会有模拟进球的画面，吸引球迷抢答，其次模拟世界杯的赛制，胜利后可以晋级下一轮，最终决出冠军，非常有趣。
3.2 我的主队
每个球迷都有自己喜欢的球队，这支球队就称为「主队」，比如一个喜欢阿根廷的球迷就会把阿根廷看作自己的主队。这种带有鲜明爱恨的元素，也是足球这项运动的魅力之一。用户进入「我的主队」以后，需要设置自己的主队，选定后，将会展示主队的赛况、比赛数据和视频集锦。用户如果更换主队，还需要消耗金币，可见抖音产品团队对球迷的研究足够透彻。通过建立「主队」，不仅可以增加用户的黏度，还能建立关系链接，提升用户的留存率。
3.3 世界杯好物
3.3.1 燃情好物
「燃情好物」就是向球迷销售世界杯相关的周边商品，比如世界杯吉祥物、钥匙扣、手办、纪念品等物品。
3.3.2 吃喝玩乐
世界杯独有的文化就是喝着啤酒看比赛，所以「吃喝玩乐」这个版块接入了抖音的「生活服务」，球迷可以在抖音购买夜宵、小吃、奶茶等，非常方便。
3.4 大家都在拍
为了鼓励用户参与到世界杯的狂欢中，抖音为世界杯专门设计了一套视频特效，用户可以选择喜欢的特效录制，提升用户参与度。
四、总结思考
1.商业层
作为一个短视频平台，抖音为什么舍得花费巨资打造世界杯栏目，通过此次对抖音世界杯专题的拆解，我认为这是一次对针对80、90后群体的二次拉新和激活。从抖音重金邀请前央视主持人阵容看，抖音正在尝试通过世界杯这样能激发球迷情怀的载体把那些边缘用户重新拉回来。「DOU来世界杯」不仅直接对标央视体育曾经最知名的《天下足球》栏目，甚至连主持人都不变，既卖内容，更卖情怀。像笔者这样以前每周只会打开几次抖音的用户，通过此次世界杯的直播，变成了日均使用超过6个小时的重度用户，这在以前简直不敢想象。
当然，和四年前的优酷等互联网视频平台面临的情况一样，当世界杯硝烟散完以后，抖音又如何通过高质量的内容留住这部分用户群体，是一个问题。
2. 内容层
在过去，多数用户对抖音的印象是一个内容质量低劣、靠娱乐搞笑博眼球的短视频平台，但从此次世界杯的内容策划看，抖音不仅诚意十足，一口气推出8档原创足球直播节目，更是邀请了众多体育名嘴、知名运动员和跨界嘉宾输出高质量的内容。这对广大球迷来说，实在太过瘾了，已经很久没有这样的足球盛宴。而且相比过去传统的图文时代，加入了短视频传播媒介的世界杯，给了亿万球迷全新的看球体验，切换不同的解说风格、直播视角，在抖音直播间邀上几个好友，就可以一边聊天，一边看球，这样的看球体验，太爽了。
3. 体验层
抖音产品设计团队对世界杯专题的设计，无论是视觉、交互还是产品体验，都非常用心。比如在「赛程」页面，通过一句简短的赛况描述，不仅丰富了设计形式，还传递了设计的温度（其他的体育产品相比，「赛程」页面更像一个冰冷的机器，除了播报数据，没有任何情感）。还有像「足球答人」这样的游戏，完全以模拟世界杯晋级赛制的形式设计，在我首次试玩的时候，就开始为了“进球”进行“抢答”，最终拿下比赛冠军。这样让用户尖叫的设计，真的让人爱不释手。
参考文献：
当抖音进军世界杯，TikTok挖了NBA墙角
终于，我们都能在抖音看世界杯直播了
“抖”来世界杯：流量盛筵，意义几何？
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
从事互联网医疗行业的年头也不短了，做过慢病的健康管理产品，负责过互联网医院整条产品线的建设，也参与过AI健康检测硬件产品的设计。
行业中互联网医疗行业中一些公司在对外的宣传中也衍生出了数字医疗、数智医疗等新名词，无论是服务于医生、还是医院或者是药企或者是保险，最终落地或者说绕不开的都是C端患者。那么，如今市面上互联网医疗C端产品的组成成分都有哪些呢？
在谈互联网医疗C端产品的组成前，我们先用一小段介绍下人体有哪些重要组成部分：
“脏”是指实心有机构的脏器，“腑”是指空心的容器。
人体五脏包含：心脏、肝脏、脾脏、肺脏、肾脏。
人体六腑包含：小肠、胆囊、胃、大肠、膀胱等分别和五个脏相对应的五个腑，另外人体的胸腔和腹腔分为上焦、中焦、下焦，统称为三焦，是第六个腑。
五脏和六腑的关系：脏与腑是表里互相配合的，一脏配一腑，脏属阴为里，腑属阳为表。脏腑的表里是由经络来联系，即脏的经脉络于腑，腑的经脉络于脏，彼此经气相通，互相作用，因此脏与腑在病变上能够互相影响，互相传变。
人体各个器官按照一定的顺序排列在一起，完成一项或多项生理活动的结构叫系统。
人体的八大系统：消化系统、呼吸系统、循环系统、泌尿系统、运动系统、生殖系统、内分泌系统和神经系统。
八大系统在神经和内分泌系统调节下，互相联系、互相制约，共同完成整个人体的全部生命活动，以保证人体生存和种族绵延。
看到这也许大家会纳闷，文章标题是“互联网医疗C端产品的组成和优势的建立”，PM大白怎么在开篇讲起人体的五脏六腑和八大系统呢，因为PM大白认为产品同样也是一个生命体，产品的0-1即是产品的出生、产品的迭代即是产品的成长、产品的矩阵即是种族的绵延，那么产品作为一个生命体，并且是互联网医疗产品，那么她同样存在着类似五脏六腑八大系统的组织，只是组织的名称不一样，大家不这样称呼而已。
不多说了，下文进入正题，看看互联网医疗C端产品的组成成分有哪些：
上文中提到了人体的五脏六腑：“脏”是指实心有机构的脏器，属阴；“腑”是指空心的容器，属阳。
那互联网医疗C端产品中（下文中简称为“产品”）的五脏六腑PM大白如何定义呢？
上文中选择互联网医疗C端产品中的几个重要模块定义为其“五脏六腑”，那互联网医院C端产品中将这“五脏六腑”串联起来的八大系统又有哪些呢？其实本质是各个维度中的供需关系的维护。
上文我们介绍了互联网医疗产品的核心组成模块，但是好像现在互联网医疗行业并没有迎来爆发期或者说没有得到大范围的应用和产生价值，那又是为何呢？
之前我在生物实验室工作，那个时候社会上就说生物行业是朝阳产业，未来可期；后来我转行到了互联网医疗行业，身边的朋友又说，互联网医疗可是互联网垂直行业中的朝阳行业，可是互联网医疗这个朝阳一直在海平面附近起起落落，一直没有升起来，更不用说什么日到中天的趋势，反而是不温不火。
更有甚者，同行们开始怀疑互联网医疗的价值到底在何处，难道互联网医疗就是卖药卖保险卖医疗周边延伸服务的工具吗？个人没有怀疑过互联网医疗价值，至少从没有怀疑过这个行业的未来价值的，只是限于当前的用户就医习惯、政策法规、相关技术以及医疗体系，医疗是一个严肃的产业，必须循序渐进与互联网、AI等新技术结合，这才是负责任的医疗行业从业者该有的态度，因为医疗健康事关生死。
如何在现在的这个行业处境下默默地建立起自己的优势才是正道，那么互联网医疗产品的优势在何处建立呢？其实有两个方向：资源和技术（也许对从事互联网医疗行业的大家来说，这就是大白话）。
资源型优势：通过不断地积累医疗业务相关的核心资源建立优势。
1）数据优势
定义：这里提到的“数据”仅指患者在所有医疗、健康活动中产生的用于组成患者健康档案的数据。
来源：线下医院（核心）、线上问诊、用药记录、医保数据、健康险数据、移动设备检测数据……
政策：近期国家相关部门出台了《“十四五”全民健康信息化规划》正是一个信号，出于患者个人医疗健康数据的重要性、复杂性、安全性、隐私性，也只有国家力量才有这种能力去实现；以下是从《“十四五”全民健康信息化规划》摘录的部分信息 ：
坚持统筹集约，共建共享。坚持统筹布局，深化共建共用，增强全民健康信息化发展的系统性、整体性和协调性，以构建大平台、大系统、大目录为导向，加大信息化建设统筹力度，加强信息化基础设施集约化建设，巩固政务信息系统整合成果，进一步破除数据共享壁垒，畅通数据共享通道，推进数据全生命周期管理。
到2025年，初步建设形成统一权威、互联互通的全民健康信息平台支撑保障体系，基本实现公立医疗卫生机构与全民健康信息平台联通全覆盖。
数字健康服务成为医疗卫生服务体系的重要组成部分，每个居民拥有一份动态管理的电子健康档案和一个功能完备的电子健康码，推动每个家庭实现家庭医生签约服务，建成若干区域健康医疗大数据中心与“互联网+医疗健康”示范省，基本形成卫生健康行业机构数字化、资源网络化、服务智能化、监管一体化的全民健康信息服务体系。
目的：打通各个医疗数据孤岛，构建患者全生命周期的健康档案、属于整个现代医疗体系的底层基础建设，服务于上层所有与医疗相关的应用服务，对线上互联网医疗尤为重要；
最终在健康数据这块的发展趋势，应该是国家完成居民全生命周期的健康档案的统筹和建设，制定授权标准，然后通过授权的方式提供给具备相关资质的互联网医疗企业在其产品中进行调用。
我们选取了腾讯医疗官网以及腾讯医疗面向C端用户的一款产品：腾讯健康（小程序），看看对方在数据建设方面的的产品。
①腾讯官网
产品服务对象划分为了两类：医疗机构与患者、区域医疗。
面向不同的服务对象，腾讯提供了不同的解决方案；面向医疗机构与患者，解决方案有：
前两种方案的实现必然需要与医保系统和医院his系统的对接，则涉及医保数据和his数据的互通；后两种方案则涉及到疾病和药品数据知识库的建设。面向区域医疗，解决方案是：微信电子健康卡开放平台、全名健康信息平台、区域智慧医疗平台、区域大数据云，这类方案完全符合了《“十四五”全民健康信息化规划》的目标。
②腾讯健康小程序
进入首页是不是发现与其他互联网医疗APP呈现的内容有所不同呢，腾讯健康既没有直接呈现大量的医生和科室，也没有直接呈现各种医疗服务包，金刚区显示的是“医保电子凭证”和“防疫健康码”，首页还还在功能区显示了“我的医保”入口，以及在服务推荐区1号位显示“本地医保码”领取和查看入口。
2）知识优势
定义：这里提到的知识主要指与健康管理，疾病治疗相关的医学知识。
来源：医生、医院、协会、医学百科以及权威医学书籍。
形式：直播、短视频、音频、图文。
目的：培养患者的健康习惯、提供患者自我健康管理的科学方法、提高患者对疾病各方面的认知以及自我治疗和线下就医的各种渠道和流程信息，对产品来讲是前期的流量入口。
我们选取百度健康官网和腾讯医典APP，看看同行在医疗健康知识这方面的重视程度和所做的努力：
我们可以看到百度健康的PC端官网没有一个医生，没有任何线上问诊等其他医疗服务入口，展示的是不同形式的疾病知识，其中包含短视频、直播、图文等形式，其实百度健康是用它的“医典”模块作为的PC端官网，如果不是百度健康搞错了，那就足以看出百度健康认为健康知识这块的重要程度；还有就是腾讯很早就做出了一款定位医学科普知识的产品——腾讯医典。
3）服务优势
定义：这里提到的服务主要指线上的问诊、开药、健康管理、挂号、等需要医生或其他专业医疗健康从业者或医疗机构参与的业务。
来源：医疗机构、专家、医生、药师、健康管理师、营养师等。
目的：医疗健康服务是最直观的能让患者感受到当前产品所具备医疗健康价值的模块，也是能帮助患者解决实际需求的重要模块，对定位于互联网医疗的产品长期发展来讲，医疗健康服务必定是后期的主要盈利入口，互联网医疗也必然会像现在的线下医疗体系改革一样摆脱以药养医的依赖。在所有的互联网医疗产品中，好大夫便是聚焦服务和坚持线上医疗服务为主要方向的一款产品。
4）商品优势
定义：这里提到的商品主要指药品、健康险、保健品等与医疗健康相关，由医疗服务延伸出的需要付费交易的实物产品。
来源：药企、健康险公司、移动健康设备等。
目的：在患者对线上医疗健康服务付费接受度还没有那么高时，采取的一种盈利生存手段；如果一家互联网医疗公司是靠药品、保险或其他非服务产品维持发展和成长的话，医疗服务型产品只是为这些盈利手段服务的话，也许会是一个成功的生意，但是个人宁愿将这类公司直接称之为医药电商公司、医疗设备提供商，而不是今天全篇讲的互联网医疗公司（或产品）；目前在京东健康上的药品收入与医疗服务收入占比接近7:1。
技术型优势：通过发明或优化新的技术让线上的互联网医疗服务流程发生革命性的变化，并且获得医生、患者以及医疗权威机构或政府相关单位的认可。
1）检测技术
大家去线下就医见到医生后的第一件事是做什么？是各种抽血化验等检查，检查前的医生问诊只是为了缩小检查范围。
我们必须接受的一个现实就是：如今没有设备检查，没有具体定量的检查指标，医生可能都不会下诊断，这也不能怪医院或医生，西医就是这个流程：检查-诊断-给药或手术，而这个流程中哪些是可以在线上真正解决的呢？我想应该只有“给药”了，这也是目前大多数互联网医疗公司以药品为突破口的原因之一。
说到第一步：检查，互联网医疗是无法在线上做到医院要求的各种指标检查的，所以最终线上问诊，医生给出的结果多是“可能”、“建议线下就诊”等结论，同时也是现在线下问诊开药不支持首诊的原因，因为在没有线下确诊的情况下开具处方药是有很大风险的。
SO如果患者不用去医院就能完成医院要求的部分疾病确诊的核心指标的检测，理想情况下那是不是互联网医疗就可以实现部分疾病的检查-诊断-给药的流程了，特别是常见的慢性病或者季节性疾病。
这就依赖于便携式家庭健康检测技术和设备的发展了，例如：血管纳米机器人，全体24小时记录生物体的各种生理指标。
2）沟通技术
患者另一个不愿意接受线下问诊治疗，或不相信在不去医院的情况下，就可以给出一个满意的健康问题的解决方案的原因是——信任的力量。
因为千百年来患者就医都是与医生面对面接触进行检查诊断，线上的方式中，也许目前的视频沟通比起之前的文字或者语音的方式更进了一步，但是不光是医生无法确认是否完整地了解到了相关的病情信息，就是患者自己也会担心自己是否把病情完整陈述给了对面的医生，医生是否有认真在给自己看病。
因为每个患者的语音表达力都不同，很有可能患者对症状的描述并不是真实的疾病表现；更何况线下就医，患者都有可能去多家医院咨询问诊。
这种线上的沟通方式与面对面的沟通相比，以及加上患者早已习惯的线下就诊方式，新的沟通问诊形式让患者对另外一头医生的信任感大打折扣。
文字沟通到语音再到视频，问诊沟通方式在不断进步，但还不够，与线下相比越真实越好，越趋于线下面对面的体验越能增强患者的安全感和信任感，也许目前比较火的虚拟现实、元宇宙在沟通方式上的应用在一定程度上改变这种状态。
以上提到的案例基本并不会在单一维度努力去沉淀自己的产品优势，而多会综合去发展，但是需要根据自身的优势和能力范去选择建立优势的方向。
例如做医药电商的建东健康，也在大力发展医疗服务，家庭医生方面的产品；专注做医生问诊服务的好大夫也有在向药店、医院合作方面发展；上文还未提到的平安健康更是在医疗服务、医药、健康险等方面同时发力（目前平安健康财报显示其在医疗服务和医药上的营收占比已接近1:1）。
其实上文提到的这些维度大致可以分为：基础能力建设层（数据+技术）、知识引流层、医疗服务层、医疗商品层。
医疗医药医保医健康，诊前诊中诊后整闭环；线上线下，院内院外，医院医生医护医全家；上有政策，下找对策，To G To B To C To all in；深挖坑，广积粮，医路漫漫修远兮！
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
界面设计的好坏，会直接影响到用户的使用体验，很多时候我们往往会直接拿到竞品的页面搬运到自己产品上，而没有针对自身产品的特点和业务加以思考。
这种做法理论上不会让自己的页面出错。但是很多人往往忽略了一点，就是别人这么设计的出发点是什么，是否匹配自身产品的业务流程，如果不了解这些贸然的去搬运设计，那么时间久了就会养成一个不好的习惯，导致思维不能得到足够的刺激和知识的沉淀。当需要我们专门进行设计构思时，就会遇到诸多困难。
如果是刚入手的领域，前期可以去进行适当的搬运参考，但是一定要了解别人设计思考点，明白其背后的原因，将其沉淀成自己的知识储备在脑海中。
过去60年，人类社会的数据发生了爆炸式增长。2008年人类大约创造了近10亿张DVD能存储的数据，这等同于过去5000年的人类创造数据的总和。12年，调研机构预测信息每隔18月会翻一倍20年，调研机构预测信息每隔73天会翻一倍
在信息爆炸的年代，人类进化的速度却是缓慢的，我们现在的大脑跟250万年前的原始人并没有太大区别。
我们的大脑每秒钟要接收约4000万次的感官信息输入，但意识一次能注意到其中约40个，其中短期工作记忆能处理的只有4±1个。
正是由于现代信息数据的大爆炸，多数产品日益臃肿的结构，以及人类有限的处理能力，所以呈现什么信息，以何种形式呈现的信息层级设计就非常重要。
作为设计师，我们有必要根据自身产品的业务方向，以及用户的行为和特征，结合信息环境，选择合适的信息，并以适合的方式进行组织和呈现，以便让用户获取并理解信息更容易，完成信息的组织和传达作用。
相关联信息需要进行归类，无论是什么类型的产品模块，我们在设计中应当做好信息分层，当两段内容元素具有关联性时，他们应当作为一个整体给用户展现。
（1）层级数量应靠近“3”
信息层级作为影响页面信息传达效率的重要因素之一，那么怎样做好页面的信息层级便尤为重要。网上资料大多都在围绕对比、对齐、亲密、重复四个基本原则讲解。
不可否认的是这四个方法对于我们排布信息层级确实起到了很大的作用，并且也是我们非常熟悉的。但其阐述得太过宽泛，在我们实际工作中面对复杂层级排版时，仍会面感到困惑，很难直接有效地利用。
于是我把优秀的案例进行收集并整理分析。
经过线上页面与概念的整体研究发现，他们在遵循排版原则的基础上，都存在着一个简单的规律：主内容的层级控制在三层左右。
如下图所示：
可以发现，三层左右的层级是最容易被用户识别的，且视觉上不易混乱。三层往后，随着层级越多其复杂性会成比增加。
比如我们看下面这两个例子，左边层级方面平铺直叙没有重构区分，使得层级复杂，造成用户识别效率变低。但其实我们只需要对信息加以归类并控制层级数量，瞬间就变得更简单且易懂。
因此，我们需要在着手设计前，首先思考一个逻辑：尽量将我们的内容层级控制在三层左右，且这三层内有比较明显的对比关系。
有朋友看到这肯定要问了，这个道理大家都懂啊，可是在实际工作中大多数拿到的信息都非常多，根本做不到保持在三层以内。别着急，本文的重点当然不是告诉你这么简单的道理，而是在面对复杂层级的时候，我们应该怎样去控制它的层级表现，从而让它在最终呈现上保持在三层左右，让用户获取信息的效率更高。
（2）源头筛选处理
源头筛选的关键在于接手复杂信息时，我们首先需要从源头上进行第一层的判断，了解这些信息是否真实地被需要。这也是我们大多数人容易忽视的一点，当然这也不能完全怪我们，因为通常需求给到我们的时候都是大致的概括，好一点的话还有个交接文档，甚至有时候需求拿到我们手上时，已经转好几手了交接人可能也不知所云，导致很难知晓其底层出因，
源头筛选的本质就是判断我们当前所要呈现的信息是不是必要的。
比如某些时候产品给到了我们很多信息，但我们并不一定会全盘接受，而是通过当前页面的业务场景去进行判断。确定每个信息的合理性，从而可以决定有些元素是否可以删减，提高整体信息设计的一致性。
过程需要我们对以下2点进行思考：
上述两个问题的确认，会影响我们对后面的信息排布。因此我们需要在源头，比如去和产品或者业务沟通，弄清楚该信息呈现的缘由以及必要性，这样能够帮助我们最后理清楚信息层级。
（3）在排布上降低复杂度
信息排布的本质是通过我们对信息进行主观的排列上的组织重构，来将复杂的层级控制在三层左右的区间里。从而保证我们页面的简洁性、规律性、识别性。
通过目前的实践总结，合理地安排信息层级的方法大致可以分为：分组、组件、组织、融入、弱化。
① 信息分组
信息分组是大家在设计时都能够想到的形式，分组能够将复杂的信息归组从整，从而降低整体复杂度，清晰线索。
我们常用的分组方式主要有三种：间距、分割线、卡片。
那么这三种方式有没有区分呢？
VIVO设计团队曾经就这个问题展开过用户调研，但结果表示，如果纯粹从用户的角度来讲，对其变化感知不大。但这三种分割方式会影响我们在呈现信息时的整体视觉观感，因此我们可以根据当前信息的复杂度作出以下规则：
② 利用组件拆分
组件其实是目前大部分设计师在进行信息排布时必备的部分，因此对于这部分设计师的熟练度也是最高的。而本篇想要强调的是，目前这几种组件对于我们信息层级的划分起到了比较重要的作用：树形结构、表格结构、步骤条、选项卡。
③ 灵活组织
通过对组织方式的调整，我们可以将多层结构的样式通过拆分布局来将其控制在三层内。
举个简单的例子：
从图中你可以看出左侧的层级较多，尤其是两层tab的叠加，视觉上就会显得稍微有点凌乱。我们可以通过将第二层tab换个布局，从上下结构变为左右结构，达到从视觉上简化层级的作用：
当然以上只是举了一个简单的例子。这里底层逻辑就是当遇到相对比较复杂逻辑时，我们可以通过改变结构使其交互逻辑更清晰，从而减少其复杂度。
④ 巧妙融入
我们可以利用信息融入的形式来减弱其对层级的影响。信息融入从本质上讲就是将某两种层级信息通过不同的组合方式，让其融入到同一个层级中。比如我们看下面这一个例子，产品设计中将button与查询项利用分割排列在一起，从而变为同一层级，通过这种方式有效降低了页面的复杂度。
当我们在进行B端布局时，信息融入这个方法用得比较多。比如我们最常见的标题、搜索和按钮等都放在同一行上。这样既能够节省视觉空间，还能够降低信息层级的复杂度。
但在进行信息融入的过程中，我们需要注意的是：如果放在同一层级会造成理解上的误解时，这个时候不要采用该方案。比如搜索框的位置，放在哪个层级决定了对应的搜索范围。
⑤ 信息弱化
信息弱化的原则是：将某些超出层级的部分进行弱化。
比如图中有5个层级，但其巧妙地将功能筛选融入到了当前的结构中，使得即使超过3层我们也不会觉得其特别复杂。
在很多时候，我们觉得信息混乱的原因，就是页面要素太多太花哨。
比如工作中的一个小卡片，也就是利用信息弱化去减少画面的复杂度：
因此我们需要学会对信息分级，不重要的信息就进行弱化，这样整体的呈现上会好很多。
但不可否认仍会有更复杂的页面，即使缩减也仍有过多层级，那么这个时候就一定要记得最开始的从源头去追溯这些所有信息是否必要。
（4）突出热区
当模块具有按钮、文字链、图片入口等需要下一步操作的关键元素，需要进行高亮显示，以此帮助用户快速定位目标。
图中 “Learn more” 使用文字高亮进行处理，通过颜色让用户快速定位入口，且不影响用户正常阅读，若使用色块按钮进行突出，模块会冗余，过于喧宾夺主。
当产品需要用户进行多步骤完成任务时，应当展示系统进度，让用户了解他们的行为操作在界面中所处于的位置。
比如下图中房屋装修信息填写流程，用户面对这种多流程任务时，耐心往往很低，我们可以在设计时添加系统状态进度条，时刻提示用户当前的节点，此方法应用场景还有注册登录、信息完善等更多场景，目的都是为了让用户达到交互可预测的状态，提升用户体验。
我们在设计内容复杂的网页时，建议根据产品诉求和用户目标，合理的放置元素，以此来达到目标，另一方面符合眼动规律的浏览顺序，可以让用户不会产生视觉疲惫，每个视觉点停顿时看到元素都是不同，提升用户体验。
在设计大面积文字排版时，应当注意字体粗细，它决定着我们的设计是否易读性高。
无论标题还是内容，字体过重或者过轻都会降低文本的基本识别度，而且遇到文字信息过多的情况，长时间专注文本的识别很容易出现视觉疲劳的情况。
在设计UI界面中，无论是长文字体还是模块元素字体，我们都要注意字体的重量，保证基本识别度的同时，优化视觉重心，确保用户在阅读时不容易陷入疲劳。
当界面中存在多个入口时，我们可以对这些入口进行优先级处理，以突出核心功能为目的，用户浏览界面的动作是大面积扫读的形式，这就意味着我们需要弱化无关信息，既保证了界面的基本美观性，又能够具备良好的体验。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
B 端设计离不开设计规范这个话题，而做好设计规范是一个庞大复杂工程，很多人对这些处于一知半解状态，在这个系列文章里我通过结合自己平时的项目案例来谈谈自己对 B 端设计规范的一些理解，希望可以带来一些启发。
本篇先谈谈设计规范制作的指导思想--设计原则，后续文章再展开讲一下常见各种组件的设计规范。
设计规范作为 B 端设计中非常重要的一环，它的作用主要体现在以下三个方面：
在日常工作中，当项目组收到一个新的需求时，如果已经具备了成熟的设计规范体系，其工作效率往往会得到很好的提升。最后上线的页面不用走查还原度。以下是具体工作流程：
通过前面内容我们知道了设计规范对于产品设计意义重大，那么制定设计规范制定依据又是什么呢？这里就要引出设计原则这个话题，设计原则是设计规范的总的纲领，所有的设计规范都应当以设计原则为基准。设计原则主要包含以下内容：
接下来就围绕设计原则清晰、高效、友好、可控这四个方面展开讲解。
清晰原则主要从视觉角度让界面信息传达合理，提高用户信息获取效率。主要包含对比，亲密，对齐，重复四个方面。
① 对比：
对比是指界面中为了区分信息层级，强化元素对比度，使用的很常见的一种手段，例如下图中利用大色块按钮与线框按钮形成对比来凸显关键按钮；又比如通过对文字字号加大，字体加粗，颜色加深来与弱文案形成对比，凸显关键文字信息。
② 亲密：
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
③ 对齐：
在界面设计中，将元素进行对齐，既符合了用户的认知特点（我们往往倾向使知觉对象的直线延续还是直线，曲线延续还是曲线），也能引导视用户视觉流，让用户更流畅地接收信息。
④ 重复：
重复是指相同的元素在项目中重复引用，作用是可以有效降低用户的学习成本，同时提高这些元素之间的关联性。
高效原则体现在便捷、轻量、简化、一致几个方面，目的是通过合理的方式让产品操作更加便捷；交互体验与内容更加轻量和简化；以及产品风格保持一致。下面结合几个常见案例说明如何应用这一原则。
① 合理利用拖拽--便捷、轻量：
在涉及到诸如上传文件，排序，滑动输入，搭建等需求时，合理采用拖拽交互往往可以打造更加便捷用户体验。
② 尽量减少不必要的跳转--便捷、轻量：
用户操作过程尽量减少跳转，以实现交互减步长，从而使用户操作更高效轻量。例如能用原位操作就不考虑展开收起；能用展开收起就不用气泡...依次类推（优先级从高到低：原位 ＞ 展开收起 ＞ 气泡 ＞ 弹窗 ＞ 抽屉 ＞ 新页面）
③ 放大点击热区--便捷：
放大可点击按钮热区，相对于较小点击热区，具备更丝滑操作体验。
④ 悬停即现--轻量：
利用悬停即现，避免信息过于重复啰嗦，简化页面提高阅读体验。
⑤ 折叠次要功能--简化：
页面功能按钮过多时，可将次要按钮收纳到一起，点击时再展开，外面只展示高频操作或重要按钮，保证页面内容简洁。
⑥ 统一样式--一致：
一致性是指在不同页面中相同操作应保持一致视觉与交互样式，可有降低用户学习成本与企业开发成本。
友好原则应贯穿用户操作前，操作中以及操作后三个阶段，给予用户及时反馈与帮助。
① 操作前：
在用户操作前给到合适的引导与帮助，有效减少用户迷茫感。
② 操作中：
通过交互效果以及页面样式让用户可以清晰感知到自己当前操作。
③ 操作后：
利用界面中元素变化清晰直观展示当前的状态
可控主要体现在自由和导航两个方面。
① 自由：
自由即指用户可以自由完成一些操作，例如回退，撤销，终止等。
② 导航：
导航是指用户随时知晓当前所在位置，而且可以利用导航随意到达目标页面。
通过本篇内容我们大概知道了制作设计规范主要方向，那么具体到每个组件上，我们该如何去设计呢？后续篇章将细分聊聊如何去设计 B 端常见组件的一些内容。
部分参考资料：
作者：huang。亮 来源：优设网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
谈到 B 端组件，很多人的印象是多且杂，想要全面准确的熟悉这些它们，需要我们对它有个合理的归纳总结。可能每个人会从不同的视角去做这件事情，我一般是按照使用场景去对组件分类整理。
下面我们根据这个分类框架来逐个聊聊这些组件。
说到基础组件，我想再将其细分成两个大类：一类是通用组件；一类是栅格/导航。怎么去更深刻的理解这两类的区别呢，我们可以打个这样的形象比方：
通过这个比方我们不难理解，栅格/导航是先给页面定下了基本框架，而通用组件则是在这个框架基础上搭建页面的所用到基本元素。
常见通用组件一般包含：色彩/字体/间距/圆角/分割线/按钮。需要注意的是，通用组件看起来似乎很简单，但却是决定产品品牌调性、界面细节品质的重要因素，在设计过程中需要引起我们的高度重视。
色彩
色彩可分为主色，功能色，中性色三类。下面谈谈这三类颜色如何配置，以及如何定义这些颜色梯度。
① 主色
主色的选取
主色作为产品的主要色调，在选取时应当优先选择品牌色，但有一点要注意的是 B 端和 C 端不一样，B 端一般不适合采用暖色系作为主色，如果品牌色为暖色调，则尽量考虑另选取一个冷色系作为主色，原因有两点：一是为了避免和警告、错误色冲突，产生歧义；二是冷色系带有商务、专业、冷静的情感，更符合 B 端产品调性。
同时主色选取应避免高亮、荧光色、灰调高的颜色。
主色的应用
主色在设计中常见的应用包括可交互、选中状态、可视化、插图、图标等场景。
② 功能色
功能色主要用于页面表征状态，常见有成功色、警告色、报错色等。
成功色
主要用于操作结果成功提示以及标签配色等。
警告色
主要用于警告提醒功能以及标签配色等。
报错色
主要用于系统报错提示、圆点提示、以及标签配色等。
③ 中性色
中性色在页面设计中应用非常广泛，从线条到文字再到图形等等都可以见到它的影子。
Tips：无论我们主色调是什么，中性色在调色时建议可加入适量的蓝色调，可让页面观感更清爽。
④ 颜色梯度
选取好了颜色后，怎么去更合理的定义每个颜色的梯度呢？（这里主要指对主色以及功能色定义梯度）
我的方法是给颜色加一层半透明黑/白遮罩，当我们需要浅色，通过调整白色遮罩透明度得到合适颜色；而当我们需要深色时，则通过调整黑色遮罩透明度得到合适颜色。
这样定义颜色梯优点是后续如果需要更改配色，只需一键替换全局色即可，大大提高工作效率。
文字
文字规范包含字体、字号、字重、行高等。
① 字体/字重
B 端字体/字重一般按照如下规范即可：
② 字号
不同于 C 端，B 端在字号选择上应当尽量保持克制。研究表明，Web 端上正文字号为 14 时，可以带来最佳阅读体验。因此在字号选取上应尽量优先选取 14 号字。如果想要区分文字层级，优先级从高到低的手法应该是颜色、字重、字号，也就是说一般尽量不采用字号大小区分文字层级。
③ 行高
行高可以参照下面的公式或行高参照表快速获得，如果通过公式算出行高非整数或非偶数，可就近取偶整数。
间距
关于间距取值，在目前主流屏幕分辨率下，只有 4 或 8 被整除率最高，考虑到 4 的颗粒度偏小，因此可优先考虑 8px 的倍数作为间距值，在一些特殊场景可采用 4px 的倍数间距值。
分割线
分割线宽度一般统一为 1px 即可，同时注意颜色不可过深，以免干扰主体信息。如果需要不同层级分割线，可用颜色深浅来区分。
圆角
圆角大小一般根据使用场景控制在 2-3 个梯度即可，既不能全部统一一个圆角值，同时也不适合出现过多圆角值。同时圆角值不要过大，建议控制在 2-6px，以符合 B 端产品严谨专业调性。
按钮
这里从按钮的大小/状态/排放位置几个纬度来讲。
① 按钮尺寸
按钮高度一般情况下可以设置 3-4 种尺寸按钮，足以满足各种使用场景。至于按钮宽度，我们一般定义一个最小值，当超过最小值时，可设置 padding 值，按钮宽度根据内容自适应。
② 按钮状态
操作按钮过程中，按钮会呈现不同的交互状态。
③ 按钮位置
对于主次按钮组合，主次按钮排放位置应该怎么规定呢？可分为两种场景：一是当为从左到右阅读顺序时，主要按钮应当排在次要按钮左侧。二是当为从右到左阅读顺序时，主要按钮应当排在次要按钮右侧。而当一些特殊场景与这个原则冲突时，应权衡优先级做出取舍。
熟悉通用组件后，我们要通栅格/导航来确定产品页面框架。
栅格
栅格可以有效地保证设计的一致性、让页面布局更具规律，并提高团队协作效率。应该如何设计栅格呢？
① 栅格区域的划定
我们一般习惯将页面从下到上划分为背景层、全局控制层、内容层、临时层，而栅格区应当用在内容层。以下为常见几种页面布局栅格区的划定。
② 栅格自适应规则
随着页面宽度变化，一般来说是通过栏宽变化实现自适应。
③ 栅格栏数的确定
根据页面内容丰富程度，栅格栏数一般定 12 或者 24 栏，考虑到 B 端产品功能往往比较复杂，建议采用 24 栏即可。
④ 上下布局栅格
⑤ 左右布局栅格
导航
导航可分为全局导航与局部导航。
① 全局导航
全局导航包含顶部导航、侧边导航、混合导航。
这三种导航样式各具特点，应结合产品特性选择合适的导航样式。这里要注意的一点是，当产品可用性和用户体验产生冲突时，应优先保证产品可用性。
② 局部导航
局部导航包含面包屑、标签页、步骤条、分页器。
面包屑
面包屑导航的作用是告诉用户当前页面在系统层级结构中的位置以及父子级页面间的关系，并且可以快速回到上几级导航。
标签页
标签页可以帮助用户在一个页面实现快速切换不同内容，提升单个页面内容扩展性。可分为基本样式、标签样式、卡片样式。
步骤条
当任务复杂或者存在先后关系时，可将其分解成一系列步骤，这里就会用上步骤条。步骤条是引导用户按照流程完成任务的导航条，作用包含 3 点：一是让用户对操作流程长度和步骤有个预期，二是明确知道自己目前所在步骤，三是可以对用户的任务完成度有明确的度量。
步骤条一般分为横向与纵向两种样式。
步骤条小 Tips：当步骤条中有操作难度偏大的内容时，为了提高用户操作完成率，我们可以考虑把其放在靠后的步骤中，原因是用户前面已经完成了大部分简单操作，后面碰到高难度操作后，出于损失厌恶心理，不会轻易放弃操作。
分页器
当有大量内容需要展现时进行分页加载处理，分页器作用是可以让用户清楚的知道自己所要浏览的内容有多少页、当前所在页码、快捷前往目标页码。
分页器一般分为迷你、简易、自定义三种样式。
妙用分页器小 Tips：当表格中需要对数据全选操作时，为了提高操作效率，可将自定义每页跳数调到最大。例如一共 100 条数据，默认每页 10 条数据，要完成全选需要点击 9 次翻页，10 次全选（表格的全选框勾选后一般只选中当前页面全部数据，而不是所有页面总数据），当把每页条数调整为 50 后，则只需翻页 1 次，点击 2 次全选即可。
到这里关于 B 端的基础组件就全部梳理完了，后续我们就来揭开展示组件的神秘面纱。
部分参考资料：
作者：huang。亮 来源：优设网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
SaaS，英文全称 Software as a Service，意思为软件即服务。是通过网络提供软件服务，可以理解为一种软件交付模式，因为交付模式的不同也决定了和传统软件的差别。
在Saas之前传统软件需要购买后本地化部署，两者最大的区别在于，卖软件是将软件作为一个软件实体卖给客户了；而卖SaaS 软件的所有权还在厂商所有，提供的是“软件服务”。
Saas模式的提出者是Salesforce创始人——马克·贝尼奥夫(Marc Benioff) 在98年的时候提出。有两个原因促使马克·贝尼奥夫思考并提出Saas：
1. 传统软件部署实施交付的失败率非常高；
2. 软件的售卖价格非常高，很多中型、中小企业有需求但无法承担高昂的费用。
基于以上两个痛点及当时的现状卖软件给企业造成的影响，已经形成了恶性循环，市场受到严重的阻碍（据Gartner 高德纳公司（美国咨询公司）的调查研究曾表明：在所有CRM项目中大约55%没有达到软件用户的完整交付和预期目的，通俗的说是实施失败。）
从卖软件变成卖服务，其中的技术方式的改变、交易模式的改变，促成了软件时代的变革，对于传统软件公司来说，是一次大革命。原来卖软件给客户，一次性（或者分几次）收到钱了；改为卖服务后，这笔钱就不能在短周期内一次性收了，现行的SaaS模式通常是按照用户的使用年费来收取。
两者差别在于，软件商需要先主动改变可以短期的一次性高收入，从短期收入向长期收入的转变；
所以SaaS是长期主义的事情。
失败的Saas生意会出现一个问题：把长期生意做成了短期不可持续的生意；而短期生意带来的就是经营成本的剧增，导致生意不可持续。
所以，Saas模式决定了需要客户长期使用你的产品，才可以长期可持续赚钱，也就是通常意义上的客户终身价值（LTV）。
那如何做到客户长期使用，其实只有一种方式：长期为客户创造价值，做到帮客户成功（帮助客户的业务成功），从而持续续约。
吴昊老师，在《SaaS创业路线图》中的讲到：SaaS的本质是续费。这个观点我比较赞同，SaaS的经营本质在于可持续。
那么，决定SaaS的成功因素是什么呢？
我认为决定性因素有三个方面：产品强大且灵活、用户体验优质、服务的有效支持。产品强大和服务的有效支持不言而喻，具体我们来聊聊用户体验的价值。
传统软件在一次交付实施后，客户付80%的钱，剩下的20%能不能收回来就不那么重要。但SaaS模式，客户每年进行续费，若产品使用及用户体验满意度低，带来的影响和后果可能是客户终止续费。
因此，和传统软件相比SaaS的用户体验的价值就更为重要，它直接影响SaaS的续费和流失。
相信“用户体验”这个词大家应该非常熟悉，接下来我们从新认识什么是用户体验？
官方的定义是：用户在使用产品过程中建立起来的一种主观感受。“用户体验”这一概念是唐纳德·诺曼（Donald Norman）在20世纪90年代中期提出的。产品大神俞军老师说过用户体验的本质是“ 用户最小成本满足需求 ”。
基于俞军老师的定义、我的理解和思考，我认为是帮助产品和用户：最小成本满足需求，同时创造「美·好」体验。
怎么理解，因为用户体验是满足商业目标的一种行为手段，我们来看下用户体验的需要考虑的双边关系，就比较好理解了。
如下图：左边是用户最小成本满足需求，右边是我们企业最高效的服务用户。
企业的本质就是创造商业价值，商业价值来源于用户价值，同时考虑实现商业价值的效果和效率。我们常常会听到“投入产出比”或者叫“投资回报率”；对于商业行为中的一环用户体验也如此。
所以，用户体验的核心的就是：平衡用户最小成本满足需求，及企业最小成本服务用户。完成价值交换同时，满足持续性。
由此，可以看出在SaaS的产品设计中，用户体验其实承担着一个比较重要的责任，因为它关系到成本的边际和规模化的影响，一头是产品一头是用户。
那么作为产品体验设计师，我们需要具备一定成本意识，做好“成本管控的设计”，更本质来说设计过程中我们应该：把复杂留给自己，把简单留给用户。
因为我们在设计的过程中把握产品的交互方式、使用流程，在用户认知和效率层面有较强的把控空间，充分做到的以“用户体验”出发；那后续销售、交付、客户成功的全链路服务过程的学习效率和服务效率会呈指数级上升。
产品设计，应该把复杂留给自己、把简单留给用户。
关于用户体验，就不得不介绍一下“ 用户体验要素”模型，个人认为这是所有产品经理和设计师可以贯穿整个职业生涯中都需要经常性、反复对照思考的设计模型。
用户体验设计的价值远不止于让产品的视觉、颜值提升，设计更大的价值在于深入业务、洞察用户，帮助业务梳理产品信息架构、任务流程、交互体验。
构建系统的用户使用方式和工作模式，从而达成用户目标；通过达成用户目标完成价值交换、以此完成商业交易达成商业目标。
回顾Saas的商业模式，Saas的商业模式决定我们提供的这个服务不是靠人海战术，因为Saas软件即服务的含义是所提供的软件就等于提供自助化的服务，应该提供的是自助服务、开箱即用、开箱易用的服务。
那么Saas服务设计策略上，应该从降低系统使用门槛和提升用户的自主化服务两维度出发，根据这两个核心维度，我们构建了每刻SaaS产品体验的设计策略模型。
第一，设计“系统服务自动化”，这里的服务是功能使用的操作，符合“低认知、易上手”，那么从设计整个体系 需要遵守“易发现、低认知、高效率、有温度”的设计原则展开，以用户使用行为出发设计符合用户心智认知的功能形态和交互流程。
第二，设计“系统帮助自助化”，什么意思在全系统中构建帮助引导的自助化体系，用户需要帮助的时候提供人性化的引导帮助，我们从发现的维度、认知的维度，系统认知的维度，综合考虑用户系统的帮助引导。
设计原则，是指导我们做正确设计的方针。
设计原则的建立基于对用户使用体验全流程的基础上，以每刻报销的设计原则，围绕用户旅程、认知及行为出发构建。
1. 当用户接触系统从看出发，看见系统界面、发现操作入口；（发现）
2. 带着操作任务用户进入系统、看见导航、看见文字、看见按钮，都需要理解认知；（认知）
3.用户从何开始、如何操作，在完成整个业务事项的过程需要进行填写、选择、交互过程就产生了生产效率问题；（操作）
4. 当出现误操作或系统出错时，需要系统纠错提醒、容错的设计、帮助及引导，当完成整个业务事项后，用户产生一种的情绪感受，这个感受即是印象、评价、口碑。（感受）
紧紧围绕产品业务、用户处理特性业务的基础上，以终为始，回归到用户、业务、系统进行思考归纳的产物。
设计策略，是指导我们如何进行做正确的设计。
在SaaS产品分类上，常见的SaaS产品主要分为3类，行业SaaS、职能SaaS和通用SaaS。
每刻报销产品从核心业务来说是职能类Saas，从提升财务人员报销的发票审批、费用审核等效率展开，但报销的来源又源于普通员工的业务报销，业务报销发生又和所在行业的费用发生行为特征有一定相关性，所以是结合职能和行业Saas的属性，从用户体验的设计上需要考虑不同角色用户对于系统的业务理解、功能交织使用的不同诉求，这个设计过程探索研究是相对比较有难度的，以后有机会可以展开聊。
下图是每刻系统经过6年过程中统计的问题分布，分布比率呈现：认知问题 60%，效率问题 30%、情感问题10%。
我们在访谈客户调研发现，企业服务虽然客户已经用了好几年我们的系统，但财务部门还是经常性会碰到新入职员工的系统使用问题，甚至财务部门来新人时 以前系统发生的使用问题会从新出现一遍，所以企业服务有一个现象，客户是老客户，但新用户不断增加，新人一旦增加第一个遇到的问题就是认知问题，也辅证了我们对于Saas系统认知问题是用户体验的第一大问题。
帮助体系建立可以从系统层面体系化有效降低用户使用的认知成本，围绕用户角色的核心业务操作使用流程、洞察用户旅程上的疑惑和障碍点。用户首次进入系统要建立介绍和引导，足够简单、降低陌生感，来减少人力咨询回复的投入。
相比人，系统的自助化和自动化的服务，更具有复用性和规模效应。
SaaS的商业模式，按年使用账号来收费和传统软件的付费模式区别非常大，因为需要先主动放弃自己本来可以唾手可得的收入，从短期收入向长期收入的转变。
在SaaS模式的时代，商业模式决定其必须关注客户成功、客户持续续费、LTV客户长期价值。
SaaS的产品更需要重视用户体验，用户体验的优劣决定其产品的长期发展，SaaS的用户体验设计则关注用户使用认知和行为效率，以及系统服务自主化设计和系统帮助自动化设计，用户体验将在产品成长期后半程，逐渐成为SaaS商业模式不可或缺的产品竞争力。
作者：周大虾07 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
图标在界面设计中，虽然很小，但是却是界面中重要组成部分之一。通过将显示物体图形化的形式，将功能本意高度浓缩成一个图标，再通过视觉隐喻更快地让用户理解功能，同时图形与文字相比，图形更加生动形象，视觉能力更强、更便于记忆，用户可以根据图形快速定位功能位置。而顺着时代的发展，图标不再仅仅以工具的形式出现，更多的起到装饰页面，也不断延伸出不同的图标类型与图标设计风格。
图形与复杂的文字相比，更加简洁，相应的识别效率也会更高。图标可以将复杂的文字描述高度浓缩成一个图标，通过视觉隐喻的方式让用户联想到现实生活中的物体，更直观地呈现图标代表的功能，更快理解功能的意义
1.2 减轻页面负担
像一些通用常见的图标，如搜索、播放按钮、更多等，仅需要一个图标就能清晰地传递功能意义给用户，省文字的描述，节省更多的页面空间与阅读压力。
1.3 更快定位功能位置
图标与文字相比有更丰富的表现形式与颜色，所以视觉冲击也就更强，也能更快地被识别出来，当用户熟悉了产品后，只需要通过图标就能快速找到想要的功能，当功能位置发生变化时，不需再重新阅读枯燥的文字找到对应的功能，只需从图标形状、颜色上区别，找到对应的功能。
2.装饰层面
2.1 传递品牌调性
随着互联网的发展，同类型的产品越来越多，要在各个产品中突围，除好用的功能外还要有特色的外观。在图标中融入能代表产品品牌的符号，强化品牌调性，保持图标的独特性，给用户留下深刻的印象，一看图标就知道是哪个产品。
2.2 增强产品吸引力
如今用户对产品的要求除了要有好用、有用的功能外，还希望有更好的视觉享受。一组好看、有趣的图标可以带给用户更好的第一印象，增强产品对用户的吸引力。
2.3 渲染气氛
根据不同的节日或运营活动，设计相应氛围的图标，帮助产品渲染节日氛围或加强用户对产品主题运营活动的感知力度
二、图标绘制的基本原则
1. 可识别性
图标与文字在一定程度上起到相同的作用，都是通过特定的表现形式来传达某种信息给用户。顺着时代发展，图标的设计更精细化，产生了更多的设计风格，但图标的本质还是没变的，是用户进入功能的入口。因此，一个能被用户快速识别、快速理解的图标相当重要，是图标设计的基本要求。我们绘制图标时要尽量去掉辅助、无用的元素，保留最清晰、直接、有代表性的元素。
2. 风格统一
设计师在设计图标时，除了会根据产品类型、用户群体、品牌调性等因素决定使用哪种图标风格外，还要根据图标的具体使用位置，因此在一个产品中，常常会出现多种风格类型的图标，而风格统一指的是在某个特定功能模块内的图标风格要保持一致，是面性的图标就是面性，是毛玻璃效果就是毛玻璃效果。
3. 大小统一
圆形、正方形、三角形，在这三个图形虽然高度相同，但是整体上三个图形的视觉重量并不相同。在实际的操作中，界面图标不会由单一的形状组合，所以形状各异导致每一个图标的视觉体积都会有所区别，因此不能单纯地利用统一的宽高或线去界别图标的大小，要根据图标的的特征去判断。在平常的设计中，我通常会利用正方形来辅助图标绘制，在保持形状特征下，让正方形内的区域占满，哪个方向缺得越多，就往那个方向移动一点。
4. 色彩统一
色彩的统一指的是图标色彩在饱和度与明度上保持特征统一，数值在一定的范围内发生改变；而在色相的选择上保持匹配度，像一些单色系的图标，通常使用的都是产品的主题色，而多彩图标，常会以主题色为主，拓展出临近色、相似色、对比色，目前市面上大多数的图标颜色会使用同类色与邻近色。对于饱和度与明度的调节，我通过利用灰度模式进行辅助，使图标视觉更统一柔和，不会出现其中一个亮眼或暗沉。
5. 占比统一
5.1 正负形占比统一
正负形的合理使用是图标能否传达准确意思的关键，因此也是常会出现的组成元素。在绘制图标的正负形，注意保持占比统一，其中某个图形正负形太大或太小，会显得突兀、别扭，失去统一性，界面整体质感会大大降低。
5.2 颜色占比统一
在绘制图标时，确定图标中的主色和辅色，绘制时尽量保证主色和辅色占比相同，保持图标的统一性。
6. 疏密统一
有规律地将线条组织在一起，利于形成统一的视觉风格。同时，线条间可以保持一定的留白，不需要太密集，太密集的线性图标，缩小后反而会影响识别。同时，给图标留出一些空间，使线与线之间不会太挤，增强图标的呼吸感。
安利一个国外的图标大神Myicons✨，简单的线性图标一样可以很精致。
三、不同风格的图标
目前市面上的图标主要有四种类型，分别是：线性图标、面性图标、写实拟物图标和三维立体图标。而不同的图标中组合的元素都会有一些差异，相同类型的图标中也会有不同的图标风格。
1. 线性图标
线性图标主要还是由线性组成，设计师可以通过改变线的粗细、线的端点、圆角大小或加入一些面性元素在里面来使线性图标更加丰富、有趣，但整体来说纯线性图标更纤细、简洁，使得视觉冲击力稍微弱了些。
1.1.1 单色
单色是线性最基础的表达方式，这种设计风格单调、视觉冲击较差，但是制作难度低，设计所耗费的时间页更断，因此常常会出现在个人中心页中，仅需要有图标显示功能入口，设计要求并不高的功能模块中。
1.1.2 双色
双色图标与单色图标相比，视觉冲击力更强，应用范围更广，通常会融入品牌主色，是除了线面图标外出现在首页中的线性图标。因为双色图标可以加入品牌色，增强品牌感的同时，使图标增加了设计感，不会像单色图标那么单调乏味，因此双色图标也会以“次要功能”的形式出现在首页当中。
像在“去哪儿旅行App”和“平安银行App”中，页面已经存在一组视觉冲击、视觉层级更高的一组面性图标，但是因为业务需求露出更多功能入口，因此就可以使用线性图标这种视觉冲击力弱一点的图标搭配，既不会抢走主视觉，也能满足业务需求。
1.1.3 断点图标
断点图标在目前的app图标设计上较少使用。虽然断点风格图标在表达上有一定的局限性，但是图标设计感更强，图标更有趣味性。
断点图标并不是随便删除某个描点，在断点的位置选择上和断点的大小都是要注意的地方。断点位置的选择要注意两点：
1 ) 保持相同角度，能更好地增强图标的协调性，避免造成图标的视觉混乱降低用户的视觉体验。
2 ) 选择在线的拐角处，利用连续性原理，在一定的路径下使这种线的断裂保持视觉连贯性，保持图形整体性。
1.1.4 线面结合
在原本的线性图标上加入色块，就会产生新的设计风格--线面图标。线面图标比较特殊，图标的视觉层级会随着图标中包含的色块大小而变化，色块越大，视觉冲击力也越强。因此在设计线面结合图标时，要先确定图标在该页面中的重要程度，如果是主要功能则将色块的占比加大。
1.2 线的影响
图标中的线主要由两个元素组成，一个是线的粗细，一个是线的端点，而这两个元素也是主要控制线性图标的性格。以常用的48px图标盒子为例，常用线的粗细有2px、3px、4px，图标的线越粗图标越有力量感反之图标越纤细；而图标的圆角越小时图标越稳重、专业，像一些办公软件、金融产品，图标的圆角就比较小。圆角越大图标越饱满亲和力更强，像一些儿童学习类软件就会使用大圆角的图标设计。
因此，图标的线粗细与圆角大小，都根据不同产品类型与目标用户确定。而大多数线性图标主要有四种基础造型：纤细+小圆角、纤细+大圆角、粗描边+小圆角/无圆角、粗描边+大圆角。
1.2.1 纤细+小圆角
精致、严谨，多用在银行、新闻类APP。没有圆角，会使图标更加尖锐，对于银行类APP会给人一种威胁，但是太大的圆角，显得有点轻浮、可爱，不符合银行庄严的感觉，所以稍微添加一些圆角，使图标更有亲和力的同时，也保留一些庄严的感觉。
1.2.2 纤细+大圆角
更加精致、有亲和力，这种风格是目前市面上软件使用得最多的一种线性图标风格。
1.2.3 粗描边+无圆角/小圆角
粗旷、个性、有很强的力量感。更多的用在运动、汽车这类主要用户倾向男性的软件，同时也会在一些潮流类电商软件中出现，凸显更有个性的设计风格。
1.2.4 粗描边+大圆角
圆润、可爱、亲和力强，常用在偏向儿童的产品
2. 面性图标
面性图标时软件使用的最多的一种图标类型，设计师通过改变色块、图形圆角、正负形和底托等元素，让面性图标呈现不同的设计风格，但无论是哪种设计风格，面性图标设计冲击力相比面性图标更强，因此市面上大多数核心功能都会用到面性图标来提高功能的设计层级，让功能在页面中更加突出。
2.1 扁平风格扁平风格的图标常为单色图标，图标整体没有渐变、高光、阴影等装饰性设计效果，因此更加简洁，更突出功能本身，图标功能性更强，图标制作成本低，曾经也是风靡一时。但扁平风格的图标缺少亮点与制作成本的原因，导致图标同质化严重，缺少特点，很难被人记住，因此现在很少被使用。
2.2 渐变色块
在扁平风的基础上，在色块上添加渐变色，在保留了扁平图标的功能性外，使图标色彩更加丰富，在不同类型的软件中都可以使用这种风格，算是一个比较百搭的图标风格。同时渐变色块也是很多面性图标的组合基础，在渐变色块这个基础上还可以添加不同的效果形成不同设计风格。
在设计渐变色块风格的图标时要注意两点：
1 ) 市面上的app都会选择同类色作为渐变色，然后通过改变颜色的饱和度，使渐变色的明亮对比更加明显的同时，颜色过渡也更加柔和舒服，使图标更有通透感，增加视觉冲击力。
2 ) 在设计这种有白色色块在顶部的图标时，可以给色块添加一个浅浅的透明渐变，让色块过渡自然一些，同时也可以添加一层浅浅的阴影，增加层次感。
2.3 图层叠加
图层叠加风格的图标看上去像两个透明图层叠加在一起的感觉，图标层次感强，细节也更加丰富，图标风格更新颖、更年轻化，因此如果在设计一个年轻人使用或者希望打造年轻化页面感受的时候，可以尝试使用图层叠加风格。
绘制图层叠加风格的图标时要注意：
1 ) 重叠在一起的那个色块是通过布尔运算得到的，并不是通过简单的透明图层得到的。而重叠在一起的那个色块也不宜过于显眼，毕竟看的是图标的整体。因此可以参考一下“智行火车票”，通过改变饱和度5%到10%和使用15%左右的同类色，就可以让用户看得清图标的变化，同时也不会是色块太突兀影响观感。
2 ) 尽量统一叠加部分图形与图标之间的占比。
2.4 毛玻璃
毛玻璃是近年最火的一种设计风格，不仅设计风格新颖、特别，而且还有很强的质感表现，因此不仅在金融产品，还是生鲜产品或票务产品，都有毛玻璃风格的图标。
而在设计毛玻璃图标时，里面也有很多细节需要注意：
1 ) 背景模糊效果不需要太大，有一种若隐若现的感觉就可以。如果调太大，可能就看不出是毛玻璃效果了。
2 ) 添加背景模糊效果的图层不需要用纯白色。像百度这种同类色配色的毛玻璃图标，只需要将图标的主色调低饱和度后，就可以使用。这样的好处是不仅让图标颜色过渡更加自然，同时有更多的组合方式、更多的层次。
3 ) 使用边缘光。毛玻璃图标有很多相互重叠的图形，如果重叠的图形颜色相近的话，图形边缘就会被弱化，使用边缘光可以明确图形边界，增加层次感。同时使用边缘光，还可以为图形塑造类似玻璃的厚度，细节更加丰富。
2.5 晶白风格
晶白类图标利用圆角正方形或圆形作为底托再在上面添加一个主色为白色的图标，然后通过调节透明度、投影、渐变给图标添加一些质感，是常见的图标风格，也是使用了很久的一种设计风格。
后面也延伸出了另一种设计风格图标主题通常不会是统一的造型，像喜马拉雅这种图标，图标本身元素复杂、细节较多，形状也更加不可控，因此用一个浅色圆形底托，将他们统一起来。不仅可以将复杂的图形统一起来，还可以添加吸引人眼球的渐变色更好地增加图标的视觉占比，有更强的视觉冲击感。
在绘制晶白风格时，注意两点：
1 ) 可以适当改变底托图形的形状，增强差异化。
2 ) 统一光源，越白的地方越亮，注意控制好透明度的变化与角度。
2.6 实物展示
这类图标会出现在生鲜类、药品类、潮流电商类产品中，因为使用图标很难将这些类型概括起来，直接使用图片展示更加直观，但因为图片细节、元素更多更复杂，如果使用太多会使图标看起来很杂乱。
3. 写实向图标
写实向图标模拟现实中的物体，更贴近生活，用户对这类图标理解能力也更强，绘制难度也更高，绘制时间也更长。写实向图标除了基本的色块组合、颜色搭配外，还有更多的透视与光影来增强实感。常常用在运营设计上，或用在一些特殊界面模块从而增强视觉层级。
3.1 轻拟物图标
轻拟物图标是最近很好的的设计风格，但是轻拟物图标出现在界面设计上还是比较少的。因为轻拟物图标元素比较复杂，视觉冲击力强，放在界面上有可能抢走用户对核心内容的关注度，通常会运用在运营设计长图、弹窗、核心功能等。
而绘制轻拟物图标，主要注意的是光影的打造。光影主要由这几个元素组成：亮面、暗面、明暗交接线、反光。在绘制轻拟物图标时，主要注意以下几点：
1 ) 在绘制轻拟物图标时，不一定需要使用统一色相中的颜色，可以通过改变颜色的饱和度明度的对比和冷暖色的对比来营造光影，使图标色彩更丰富、对比更明显。
2 ) 反光可以使用图标主色的对比色，降低饱和度，提高明度，运用在轻拟物图标边缘，使边缘更更清晰，不会糊在一起，图标整体立体感更强。
3 ) 明暗对比越明显，轻拟物图标越显通透、立体。
3.2 2.5D图标
2.5D曾经是很火的一种设计风格，但是现在已经逐渐被轻拟物与建模替代。2.5D图标固定展示了三个面，有很强的立体感，常常运用在科技类的网站设计中。
在绘制2.5D风格图标时，要注意：
1)统一好图标的厚度。
3.3 3D图标
随着时代进步，3D逐渐成为一个主流的设计风格。通过专业软件给予了图形材质质感、真实的光影，更加贴近生活真实物件，同时还可以配合动效的设计，有很强的视觉冲击力和新鲜感。常常出现在网页设计中、运营设计中。目前绘制3D图标主要用blender和C4D，C4D在渲染方面有oc的加持，渲染效果直接拉满；Blender则是完全免费的软件，目前热度也是疯狂涨，在渲染方面虽然没有oc好，但是还是可以满足日常工作。
而在绘制3D图标需要注意以下几点：
1 ) 统一主光源方向。建模里面会出现很多打光类型，如主光、辅光（有时不止一个）、边缘光等。
2 ) 统一摄像机位置。摄像机与物体的距离、角度影响渲染的最终效果。
3 ) 用数值定义物体大小。建模软件不像绘图软件那样强调物体的数值大小，拉远看物体就是小，拉近看就是大，做一个物体时还好，但是要做一组3D图标时，就要定义好物体的大小，使图标更加统一。
四、如何确定使用哪种类型的图标
不同风格的图标有着不同的特点，设计师要根据图标放置位置和功能选择图标类型。其中最有决定性的因素就是图标的重量，而影响图标重量的因素有：占比、颜色、细节元素。线性图标在界面中占比较少，因此看起来会更加简洁，视觉冲击力弱，常用在重要程度低，不需要突出展示的功能上；面性图标占比更高，视觉上会更加饱满，同时颜色色块使图标更加显眼，视觉冲击力得到力增强，使用户对图标的感知力更高，是最常用的图标类型，用在各个重要功能入口上；轻拟物和3D图标除了占比高、颜色丰富，还有各种光影、材质的细节，图标元素更多，视觉冲击力也更强了，也因为图标复杂、视觉冲击力强，因此很少出现在界面上，通常运用在一些特殊运营入口或需要吸引用户的大模块中。
不同的类型在界面中也会搭配出现。
五、图标的绘制
1. 图标盒子
图标盒子是辅助绘制图标的一个工具，帮助设计师在设计图标时更好地规范好各个图标的尺寸大小。而图标盒子也有很多种，我最常用的是48*48px，这个尺寸对于线条的控制比较方便，通常用1px、2px、3px。
工具始终都是工具，界面图标不会由单一的形状组合，所以形状各异导致每一个图标的视觉体积都会有所区别，因此不能单纯地利用统一的宽高或线去界别图标的大小，要根据图标的的特征去判断。在平常的设计中，我通常会利用正方形来辅助图标绘制，在保持形状特征下，让正方形内的区域占满，哪个地方缺得越多，哪个地方就拉伸一点。
2. 图标的绘制方法
图标中会存在标准化图标，像删除就是一个垃圾桶、像首页通常是一个家的图标、还有搜索则是放大镜的图，照片是两个山一个太阳，这些图标都习惯以这种表达方式出现，用户已经习惯了这种表现形式，因此对于标准化图标，尽量维持以往的变现形式，让用户更好地理解图标意思。
非标准化图标可以细分为具象与抽象，对于具象类图标，现实中有实物可以参照。这类图标的设计较为简单，可以在某度上寻找相关照片，根据实物的造型进行提炼和简化。
抽象图标则较为复杂，通常是某些特定行为的名词，没有具体直接的参照物。因此在设计前，我们要先充分理解功能本身，这个功能是什么、用户怎么用，然后提炼关键词，接着根据关键词发散思维，寻找相关联的图形来表示含义。例如“社区”功能，功能目的是提供一个让用户互相交流的环境，同时吸引无目的的用户逛起来发现感兴趣的话题，让更多的信息流得到曝光从功能目的中提炼一下关键词：聚在一起、发现、交流。接着发散思维进行脑暴，聚在一起：一群人-圈子-同一个世界的人-星球，发现：看-眼睛；寻找-望远镜-雷达-指南针，交流：聊天-聊天气泡-声波。
六、图标的使用场景
图标运用在功能入口上是最基础的使用场景之一，如首页中的金刚区、个人中心都会用到很多图标作为功能入口。
1. 金刚区
目前国内的APP包含的功能有很多，而金刚区的作用就整合产品功能并放置在首页中，提高这些功能的曝光量，给其他功能引流，让更多用户知道或使用上产品功能，增强用户对产品的粘性。像美团，很多人对他的了解是一个外卖工具，但它里面还有很多其他功能，使用金刚区展示它多元化的服务。
金刚区图标通常会有1～3行，根据业务具体需求做调整，在每行中会有4～5个图标。尺寸范围一般在40px～48px左右（@1x），同时会根据具体的业务需求，调整大小，最终都是一预览效果为准。
2. 个人中心
个人中心是个人类型功能、运营活动入口和工具的集合地，是除了金刚区外，含图标最多的一个地方。个人中心中包含很多不同类型的功能，可以使用卡片式的设计，将功能图标更好地分类。在图标风格的选择上，个人类型功能是最重要的功能，通常会以面性风格放置在顶部，如果个人中心中需要展示运营入口时，需要减弱个人类型功能图标的视觉冲击，会使用线性风格图标。
3. 运营入口
运营入口主要作用是让用户点击后跳转到产品活动页，因此具有强视觉冲击力的图标，会更吸引用户眼球，从而提高点击运营入口的机会。
因此运营入口上，通常会使用面性图标、写实向图标或3d图标。因为写实向图标或3D图标可以提高视觉层级，因此经常运用在主要运营板块上，而面性图标相比下较弱，当页面已存在一个主视觉或主要功能时，运用在运营板块上。
4. 主题板块
在软件中会有很多不同主题的信息板块，同时信息板块间有较大的差异，如果全部展示出来会使页面样式不同统一、信息混乱导致降低用户的阅读体验。因此使用主题板块，将不同主题信息集中在一起，然后露出部分关键信息在页面中，保证视觉统一的同时，还可以起到流量分发的作用，让用户在茫茫信息流中快速找到自己感兴趣的方向，提供用户阅读体验。
纯文字的排版在信息流中略显枯燥，而图标在主题板块中起到润色主题的作用，渲染主题气氛，提高不同主题板块的识别度与差异化。对于一些长标题的主题板块，只需要记住图标就能快速定位主题板块位置。
5. 底部tab栏
底部tab栏功能数量通常在2～5个，在设计时，要设计点击前和点击后两个图标状态，同时帮助两个状态是有明显的变化。底部tab栏图标大小通常在22px（@1x）左右，而图标底下的文字时10px（@1x）。底部tab栏作为最常出现的区域，是传达产品品牌感、提升产品辨识度、记忆点的重要区域，很多产品都会在底部tab栏的图标设计上加入品牌元素，增强辨识度。
七、如何提高图标设计能力
1. 阶段一：临摹
临摹是人类学习一个新技能开始，就像婴儿学习父母说话一样。但是一开始很多都不会临摹，或者照着画也不会，那我们应该如何去做？
1.1 临摹效果不佳
1 ) 提高审美能力，多看一些主流的图标，可以上追波看看目前流行的设计风格，不行的话就去看看大厂都在画怎样的图标。
2 ) 明确自己的能力，对自己目前的设计水平有一个客观的评价，到一个怎样的水平。很多人都急于求成，最基础的线性图标都不会就上来搞轻拟物，画来画去都不好看，最后就放弃了。
3 ) 敢于支出自己的不足，许多人画了许多时间去画一组图标，就很容易被自己催眠，以为自己已经画得很好了，其实还会有很多不足。所以我们要敢于指出自己的不足，在前期临摹阶段，画完后多去对比原作，自 己有哪些地方没有原作做得好的
1.2 会了，但没完全会
什么是会了，指的是可以绘制出于优秀原作一样的图标；什么是没完全会，指的是不知道原作是怎么达到这个好看的效果的。而且很重要的一点是，你临摹的作品可能也有一些不好，需要改进的地方，以此在这个阶段我们要做的是：
1 ) 多看别人总结的知识点，知道如何去判断一个图标是否还有可以改进的地方，这样绘制是不是正确的
2 ) 懂得总结与思考，原作是用来什么样的手法让我觉得它是好看的，这些技法怎么用，还可以用在哪
2. 阶段二：半原创
临摹是一个提升自己的手法，但不代表可以直接用到自己的作品中，直接复制别人的设计，并不叫设计师，复制粘贴谁不会啊，所以在懂得如何临摹后，我们要敢于尝试半原创。这里说的半原创不是指在别人图标的基础上加上两笔就是半原创，而是要吸取了优秀图标的优点后，重新设计出一个有相同特点的图标。那我们应该如何半原创呢？
1 ) 还是多看，但是不同于临摹阶段，我们在临摹的时候还要多想，这个图标的特点是什么、怎么做、还能怎么用，积累图标不同的表现形式2 ) 多练，这个建立在多临摹上，目的知道别人的技法是什么做的，练习了不同的技法后，将它们再融合在一起
3. 阶段三：原创
第三个阶段，也是最难得阶段。目前很多情况都是只能成为融图设计师，将不同作品优秀的点组合起来。但如果要建立自己的风格也是要做融图设计师的基础上，多想、多尝试，敢于突破，在一次次的融图后，发现出自己的特点，为自己的作品打上自己标签，输出具有差异化特点的设计。最有印象的就是夸克的设计，品牌特色很明显，其实我们每个人也可以成为一个品牌，只要我们足够努力
作者：阿恒的设计笔记 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
同时也方便用户再次消费某个内容时，减少再次记忆和查找的成本。比如我喜欢做菜，但是年纪大了记性不好，每次做一道菜我都会打开我的某音收藏夹里找到视频教程，这个老小子的视频教出来的菜味道真不错。
收藏夹要解决用户什么问题
两个关键词：1.管理 2.分类
管理，就是我们所说的增删改查。“增”，我们需要在用户浏览信息时给该信息提供收藏功能，这里要注意的是收藏信息的颗粒度，什么信息可以收藏，一段话？一篇文章？一个用户发布的完整内容？还是一张图片？产品对收藏最小单位的定义要明确，因为会影响到对收藏内容的分类。例如微信可收藏的最小单位很多，有链接（包含文章）、文件、图片/视频、音乐、语音、聊天记录、笔记、位置，而像饿了么只能关注店铺，对任何菜品、用户评论等等都无法进行收藏。b站你可以收藏视频、漫画、商品，但是不能他人的动态。
删没什么好说的，再来说一下改和查。因为他俩会涉及到收藏的流程。我们知道不同产品的收藏流程是不同的，例如马蜂窝、闲鱼等产品，用户收藏内容后只给出收藏成功的toast/提示栏提示，并告知收藏到了哪里；
而腾讯视频、抖音、携程则是当用户进行收藏后除了给出成功提示还会给出收藏列表的入口；
最后，像知乎、豆瓣在点击收藏后直接给出滑出操作框让用户选择收藏夹或创建收藏夹以及是否要转发。
3种流程的区别
前两种我认为区别并不大，是否要在提示框里给用户进入收藏列表的入口，更多还是取决于产品是否想让用户离开这个场景，还是让用户继续浏览。之前我们提到过闭环，但是闭环一般针对任务而言，但是收藏严格来说不算是“任务”，而是用户的一种“行为”，感知起来区别还是很大的，因为任务是有明确目标的，比如给用户安排一个任务，让他对某个商品进行分类收藏，那么用户会根据这个分类收藏的目标去进行操作，任务结束后给用户相关的引导和出口。但是在用户自然的浏览场景中，对内容的收藏并没有具体目标，所以要不要给用户在点击收藏后引导进入收藏列表要具体情况具体分析。
其次是知乎、豆瓣，在用户点击收藏后给予是否要创建收藏夹的功能，相比于前两种，对信息内容的管理，更加明显了。首先为什么他们和前两种不同呢，像知乎用户是有KOL效应的，个人的收藏夹可以公开，他人可以查看他人的收藏夹，有点类似于花瓣的画板，同时对于这类知识、内容类的应用，对于分类的要求和需求更高更多，本身知识的维度就很多，颗粒度很小，所以在用户进行收藏行为时主动提醒用户可以创建收藏夹。
那淘宝是怎么做的，它在用户收藏的时候也给出一个菜单，用户可以选择收入到某个收藏夹，也可以默认不放入，还可以去创建并放入，这就是更个性化了。
但是咱们说前两种没有给在收藏时给创建功能的就不个性化了吗？也不是，个性化也要根据产品定位和用户需求来的，比如马蜂窝的一些机票车票、旅游产品，做一个收藏夹创建，好像没必要，因为可收藏的类型不多，个性化标签也不明显，显然是没必要的。腾讯视频、闲鱼显然也是。那我们再来聊一个细节。
知乎在点击收藏某个回答的时候，页面会唤起收藏模块，让用户选择你要收藏到哪里，但这里的体验不是很好，因为用户想要收藏某个内容必须先选择收藏夹，如果不选择则无法收藏成功？
无论你当前是否创建了收藏夹，都必须选择或点击完成，如果有创建过，那就需要经历：1.点击收藏图标 2.点击要收入的收藏夹 3.点击完成，如果没有创建过那么默认会创建一个收藏夹。而淘宝则不是，无论你是否创建收藏夹，只要点击收藏图表那就已经收藏成功，在这个前提下，你可以选择是否要收入到某个收藏夹还是新创建一个。
所以知乎、豆瓣的收藏单位大多以回答、帖子为主，这样的内容系统无法帮助生成标签，所以需要用户自己创建分类，在收藏时给予创建功能是合理的，但我认为知乎这样的设计还是不够人性化，但是站在业务角度看，就是想引导用户去创建分类，也是能理解的，虽然在体验和效率上并不是最优。
创建、分类、搜索都是帮助用户再次进入收藏空间时能够更好的查找想要的内容。同时不同产品会有不同的筛选标签，比如微信阅读，收藏其实就是书架，哦，应该说，书架就是收藏。筛选维度分为：更新、进度、购买、分类。所以我们在设计收藏功能的时候，要根据用户的筛选场景和内容来制定合理的筛选维度。
收藏和点赞还有加入购物车的区别
收藏的属性就是收纳、管理和分类，但是和点赞、购物车不同，点赞意味着认同，具有社交属性，同时也为了帮助产品记录用户个偏好用作研究，而收藏则是用户想对该内容进行收集，比如我正在准备一个辩论赛，我抽了一个反方观点，虽然我本身并不喜欢这个观点，但是为了准备辩论的素材和题目我会对这个内容进行收藏，但不会点赞，虽然收藏大部分时候也有对内容的认可，但不完全是。所以收藏更多的是用户个人对信息的单方面管理，点赞则一个即时互动。
收藏和购物车也是一样的，购物车承载的是更多消费、商品营销的表达、算价以及凑单活动，购物车和直接消费强关联，而收藏夹多关注与对商品的存储管理、搜索查找，虽然也有一部分需求重合，但用处、和场景还是有很大区别的。
最后，总结一下，设计收藏夹时，我们首先得根据产品定位和用户需求以及内容的维度来选择好收藏夹的颗粒度或最小单位，其次，根据业务或用户需求设定好收藏夹的收藏逻辑和流程，最后，做好用户对收藏内容的查找以及分类筛选的体验。
作者：应骏 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com