如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
很多设计师和产品经理在刚入门时，都会对一些数据指标很模糊（这些花花绿绿的是啥玩意儿）。尤其是与产品团队和运营扯需求、与开发谈指标、谈实现等场景，数据指标就更为常见。假如我们对指标不了解、没有概念，则会被多方质疑你的专业能力，同时你也无法提升“数据驱动业务、数据驱动产品、数据驱动设计”的核心能力。
关注数据指标，不仅仅是产品经理或运营的“专利”，作为交互和UI设计师也需要掌握这方面的技能，来帮助我们产出更贴近用户行为的设计。同时，监测产品数据也有2个重要作用：一是可以监控产品迭代中的问题点和设计点、运营和市场活动的收入水平等，看看他们目前处于什么状态，也可以为后续产品迭代的方向提供参考帮助。二是通过对数据的挖掘和分析，可以发现新的商业机会和产品爆发点，也就是近两年咱们经常听到的数据增长、用户增长、增长设计概念。
因此，作为一名设计师或产品经理必须要了解与业务相关的核心数据指标。由于所在领域不同、业务不同，因此团队所关注的数据侧重点也不同。今天就从“网页基础指标、用户数据指标、如何获取数据指标、产品设计的生命周期”来梳理我们产品设计者常见的指标维度。
一、什么是数据指标？
它是对当前业务有参考价值的统计数据，是通过对于业务需求的进一步抽象，并进行数据埋点后，加工出来的一套计算规则，并通过有效的方法论和数据可视化呈现，最终能够解释业务变化和用户行为。当然，不是所有的数据指标都叫指标，只有对当前业务有参考价值的指标才可称作指标，同时要具备：可统计、可分析、可监测的特点。
二、网页基础指标
先了解下流量的概念：分为站外流量来源和站内流量路径。以下就拿电商产品举例：
站外流量：通过其他平台或外界媒体进入到你的店铺就是站外流量。又分为免费和付费，免费有自然流量和搜索流量（比如在百度搜你店铺的名称并点击进入，这就是从免费的外界平台进入），而付费则主要是一些广告投放的流量（比如将你的店铺链接付费植入到某公众号，让他帮你推广，既从他公众号进入店铺的流量）。
站内流量：通过平台内的推荐入口或者搜索路径等方式，进入到你的店铺就是站内流）。主要指用户在网站内的行为路径。
PV（页面浏览量）
用户每1次对网站中的每个网页访问（成功访问/进入）均被记录1次。用户对同一页面的多次访问，访问量累计。在一定统计周期内用户每次刷新网页1次也被计算1次。
理论上PV与来访者数量成正比，但是它不能精准决定页面的真实访问数，比如同一个IP地址通过不断的刷新页面，也可以制造出非常高的PV。
UV（独立访客人数）
访问网站的一台电脑客户端为一个访客。00:00~24:00内相同的客户端只被计算一次。
使用独立用户作为统计量，可以更加精准的了解一个时间段内，实际上有多少个访问者来到了相应的页面。
VV（用户访问次数）
当用户完成浏览并退出所有页面就算完成了一次访问，再次打开浏览时，VV数+1。VV同时也是视频播放次数（Video View）的简称。
PV、UV、VV有啥区别？
比如你上午打开了UI中国，访问了两个作品页面并关闭网页。下午又打开了UI中国，访问了五个作品页面。则当日统计结果为：PV=5、UV=1、VV=2
跳出率
一个非常重要的指标，表示用户来到网站后，且没有进行操作就直接离开的比例，代表着陆页面（访客进入网站的第一个页面）是否对用户有吸引力，常用的计算方式是落地页面的访问量除以总访问量。
比如，在一个统计时间内，网站有1000个不同用户从某个链接进入，其中有50人没有二次浏览行为，是直接退出网站的，那么这个链接的网站跳出率为：50/1000=5%。然而有些退出的行为不能作为退出考虑，比如页面上刻意添加的导出链接，如合作伙伴的网站等，还有联系我们，付款页面等，都不算是负面的跳出，所以要根据不同情况统计有效的数据才能得出可靠的跳出率。
统计一个网站的跳出率是非常有必要的，能帮助产品提高用户粘性。跳出率高，说明用户体验做得不好，用户进去就跳出去了，着陆页没有满足用户的期望与需求，或是人群定位不精准。相反如果跳出率较低，说明用户体验做的很好，最起码用户能在第一时间获取自己需要的内容，并且可能还会二次光顾。
退出率
针对网站内某一个特定的页面而言，退出率是衡量从这个页面退出网站的比例，通过一个页面的退出次数除以访问次数。
退出率反映了网站对用户的吸引力，如果退出百分比很高，说明用户仅浏览了少量的页面便离开了，因此需要改善网站的内容来吸引用户，解决用户的内容诉求。
跳出率与退出率又有啥区别？
跳出率是指用户进入网站起，没进行什么跳转操作，又从这个页面退出或关闭的比例。退出率则是无论用户从哪个页面进入网站，最终从这个页面退出的比例。
跳出率适用于访问的着陆页 （即用户成功访问的第一个页面），而退出率则适用于任何访问成功并退出的页面，既用户在网站上访问的最后一个页面 。退出率通常针对局部的页面来统计，比如支付流程退出率高，那就要针对现状对流程做优化。但站在网站总体的角度统计退出率没啥意义，因为有访问网站，就必然有离开网站。而跳出率则可以适用于着陆页面，也可适用于网站整体。
平均访问时长
指在特定统计时间段内，浏览网站的一个页面或整个网站时，用户所停留的总时间除以该页面或整个网站的访问次数的比例。
如用户在网站特定时间内总停留时间为1000秒，在这段时间内，总的访问次数是100次，那么这个页面或网站的平均访问时长就是1000秒/100=10秒。
该数据是分析用户粘性的重要指标之一，也可以侧面反映出网站的用户体验。平均访问时长越短，说明网站对用户的吸引力越差，可用内容信息越少。
转化率
在一个统计周期内，完成转化行为的次数占推广信息总点击次数的比率。
转化率=(转化次数/点击量)×100%。以用户登录行为举例，如果每100次访问中，有10个登录网站，那么此网站的登录转化率就为10%，而最后有2个用户关注了商品，则关注转化率为2%，有一个用户产生订单并付费，则支付转化率为1%。
转化率是产品盈利的重要指标之一，它直接反映了产品的盈利能力。不同行业的转化率，关注点也不同，比如电商产品就要关注销售转化，看看参与活动的用户当中有多少是在活动后产生支付的，有需要的还可以根据数据分析出人均购买次数和购买金额。再比如我们监测注册量，就要关注注册转化率，看看这个活动给产品带来了多少新增用户。所以转化率可以针对性分析产品在哪些方面做的不足，可以快速定位到问题点。
转化率是采用访客数量（UV）还是访问量（PV）？
这需要根据团队数据分析的目的而定。比如采用访问量，就是认为每次访问都可产生付费。若采用访客量，就认为用户多次访问才能购买是正常的行为。个人建议前期采用访客数量，以排除自己团队对网站访问的数据干扰，因为访问量是可以通过同一个IP不断刷新网页而递增的，而访客数量是精准到一个IP地址（既一个用户、一个设备）。
回购率
指用户对商品或者服务的重复购买次数（回头客）。
重复购买率有两种计算方法：一是所有购买过产品的用户，以每个人为独立单位重复购买产品的次数，比如有10个客户购买了产品，5个产生了重复购买，则重复购买率为50%；二是单位时间内，重复购买的总次数占比，比如10个客户购买了产品，其中有3人产生二次购买，3人中又有1人产生三次购买，则重复购买次数为4次，重复购买率为40%。重复购买率越高，则用户对产品的忠诚度就越高，反之则越低。
三、用户数据指标
ARPU
即每个用户平均收入。
ARPU=总收入/用户数。它注重的是一个时间段内运营商从每个用户所得到的收入，衡量互联网公司业务收入的指标。ARPU值高说明平均每个用户贡献的收入高，但无法反映利润情况，因为利润还需要考虑到成本。果每用户的成本也很高，那么即使ARPU值很高，利润也未必高。
而用户数可以是总平均在线用户数、付费用户数或是活跃用户数，不同产品标准可能存在差异。ARPU注重特定时间段内从每个用户所得到的收入，衡量互联网公司业务收入的指标。ARPU值高说明平均每个用户贡献的收入高，但未必说明利润高，因为利润还需要减去成本。ARPU的高低没有绝对的好坏之分，分析的时候需要有一定的标准。ARPU值高说明平均每个用户贡献的收入高，这段时间业务在上升。
新增用户
既安装应用后，首次成功启动产品的用户
按照统计跨度不同分为日新增（DNU）、周新增（WAU）、月新增（MAU）。新增用户按照设备维度进行去重统计，如果该设备卸载了应用，一段时间后又重新安装了该应用，且设备未进行重置，若再次打开应用，则不被计算为一个新增用户。
新增用户量指标主要是衡量营销推广渠道效果的最基础指标。新增用户占活跃用户的比例也可以用来用于衡量产品健康程度（产品没有新增和活跃，就进入“绝症状态”）。如果某产品新用户占比过高，那说明该产品的活跃是靠推广得来，这种情况非常有必要关注，尤其是新增用户的留存率情况。
活跃用户
既在特定的统计周期内，成功启动过产品的用户。除此之外，我们还可以将活跃用户定义为某统计周期内操作过产品核心功能的用户（按照设备去重统计）。
活跃用户是衡量产品用户规模的重要指标，和新增用户相辅相成。如果只看一个指标来定义产品的成功与否，那一定是活跃用户数。当然，一般重点关注核心用户规模即可。希望用户每天都使用的应用有新闻APP、社交APP、音乐APP等，其产品的KPI考核指标一般都有日活跃用户数这项。但对于某些低频消费需求和临时性需求的APP，比如旅游、摄影、工具类等，可能会关注月活跃数，甚至特定周期内的活跃数。
活跃用户数根据不同统计周期可以分为日活跃数（DAU）、周活跃数（WAU）、月活跃数（MAU）。
DAU（日活）：某个自然日内成功启动过应用的用户，该日内同一个设备多次启动只记一个活跃用户；
WAU（周活）：某个自然周内成功启动过应用的用户，该周内同一个设备多次启动只记一个活跃用户。这个指标是为了查看用户的类型结构，如轻度用户、中度用户、重度用户等；
MAU（月活）：某个自然月内成功启动过应用的用户，该月内同一个设备多次启动只记一个活跃用户。这个指标一般用来衡量被服务的用户粘性以及服务的衰退周期。
留存率
既在某一统计时段内的新增用户数中再经过一段时间后仍启动该应用的用户比例（留存率=留存用户/新增用户*100%）。通常重点关注次日、3日、7日、30日即可，并观察留存率的衰减程度。
次日留存率：即某一统计时段新增用户在第二天再次成功启动应用的比例。如果次日留存率达到50%以上，说明这个产品已经是非常优秀了；
7日（周）留存率：即某一统计时段新增用户在第7天再次成功启动该应用的比例。这个时间段内，用户通常会经历一个完整的产品体验周期，如果这个阶段用户能够留下来继续使用，很有可能成为产品的忠实用户；
30日（月）留存率：即某一统计时段新增用户在第30天再次成功启动该应用的比例。通常移动端产品的迭代周期为2~4周一个版本，所以月留存率能够反映出一个版本的用户留存情况，一个版本的更新，或多或少会影响部分用户的体验，所以通过对比月留存率能判断出每个版本的更新对用户的影响面积，从而定位到类似问题进行优化。
若以上时段的留存率低，会映射出哪些问题？
次日留存率低：说明所针对的用户群对我们的产品不感兴趣；
7日留存率低：说明我们产品的内容质量太差，用户过了新鲜劲儿之后发现产品用起来特别枯燥；
30日留存率低：版本迭代规划做得不好，功能更新、内容更新、BUG修复、性能等都做得比较差，此时需要重新规划迭代内容，不可一错再错。
留存率是验证用户粘性的关键指标，设计师和产品经理通常可以利用留存率与竞品对标，衡量用户的粘性和忠诚度。对于一个版本相对成熟的产品，如果留存率有明显变化，那就说明用户质量有变化，很可能是因为推广渠道等因素所引起的。同时，留存率也是产品改版的重要指标，产品体验越好，越符合用户需求，则留存率越高。若产品本身满足的是小众低频需求，留存率则选择双周甚至是30日进行监测。一般来说，留存率低于20%会是一个比较危险的信号。
流失率
指那些曾经使用过产品或服务，由于各种原因不再使用产品或服务的用户。用户流失率=某段时间内不再启动应用的用户/某段时间内总计的用户量。流失率和留存率有紧密关联，流失率高既留存率低，但活跃度不一定高，因此需要综合分析。也是重点关注次日、7日、30日的流失率。
对于流失用户的界定依照产品服务的不同而标准不同，对于微博和邮箱这类用户几乎每天登录查看的产品而言，可能用户未登录超过1个月，我们就可以认为用户可能已经流失了。而对于电商产品而言，可能3个月未登录或者半年内没有任何购买行为的用户可以被认定是流失用户，所以不是每个产品都有固定的流失期限，而是根据产品属性而判断。设计师和产品经理需要找到流失的异常数据，定位流失用户的原因，并在下个版本中修复产品中存在的问题。甚至还可以定位到流失的具体用户ID，通过当时用户注册的个人信息进行跟进，我们最常见的就是游戏类产品“召回老玩家”的运营手段。
一次性用户
既新增日后再也没有启动过应用的用户。
一次性用户是关键的营销指标，和判断无效用户的标准，从中把目标用户过滤出来。一般划定的界限是至少超过7天时间才能够定义是否是一次性用户。
使用时长
既统计时间段内，某个设备从启动应用到结束使用的总计时长。
一般按照人均使用时长、次均使用时长、单次使用时长进行分析，衡量用户产品着陆的粘性，也是衡量活跃度，产品质量的参考依据。
启动次数
既统计时间段内，用户打开应用的次数。
重点关注人均启动次数，结合使用时长可进行分析。用户主动关闭应用或应用进入后台超过30s，再返回或打开应用时，则统计为两次启动，启动次数主要看待频数分布情况。
使用间隔
既用户上次使用应用的时间与再次使用时间的时间差。
使用频数分布，观察应用对于用户的粘性，以及运营内容的深度。虽然是使用间隔，但是通过计算同一设备，先后两次启动的时间差，来完成使用间隔统计，充分考虑应用周期性和碎片化使用的特征。
四、如何获取这些数据？
在工作中可能会发生这种情况“上文提到的数据指标有些看不到”、“不知道怎么看”，最终因为没有数据而无法进行监测和分析。这里主要是因为在产品上线前没有对数据进行开发统计。这部分工作一般是由产品经理去规划，开发来执行，设计师也可以提出自己想要监测数据的需求给到开发，我们把这个规划叫做“数据埋点”。
埋点其实是对产品的一个可视化健康检查，贯穿产品的整个生命周期，使产品逐步达到最佳状态（需要数据结果和产品迭代相互呼应），为未来产品优化方向给出指导意见。当然，埋点的目标不同，最终数据验证的结果也会有所不同。
比如，新版本上线，需要验证用户行为和功能效果的几种场景：
（1）新功能是否得到了用户的使用与认可？本次新增的功能用户点击率和活跃度怎样？
（2）用户在核心功能的操作路径上是否顺畅？有没有因为功能按钮的设计而导致无效点击增多？
（3）在某个特别的节日进行了产品内的banner推广或者促销，该活动运营的效果如何？新用户增长是怎样的？
...
所以说，埋点是互联网领域非常重要的数据获取手段。埋点采集信息的过程一般也称作日志采集。通俗点讲，就是在APP或者WEB产品中植入一段代码，监控用户行为事件。典型的应用场景就是某个运营活动，页面的点击量（PV）有多少，点击用户数（UV）有多少，都是用埋点数据进行计算的。当然这些信息并不是消费一次就没用了。通过埋点收集到的信息，可以作为监控并通过可视化数据呈现出来，帮助产品、设计、运营人员看到产品的长期表现，也可以作为基础原料，进行复杂的运算，用于用户标签、渠道转化分析、个性推荐等等。比如我们用某资讯类产品看新闻的时候，会发现每次推荐的内容都是上次所点击的相关类别，这就是通过埋点数据获取的用户行为习惯，通过数据进行个性化推荐。
除了对需要监测的特定功能区做埋点之外，一般大公司也有自主研发的供内部产品组使用的数据分析系统，一些关键数据在上面都能够实时监测到，并有特定的团队去维护它。其次，现在市场上还有很多数据统计工具可以自动监测到产品的相关数据，大多都是付费的，这里就不打广告了，百度搜索关键词会出现一大堆类似的数据监测产品。
五、产品阶段不同，关注的数据也不同
产品阶段就是产品生命周期，可分为初创期、成长期、成熟期、衰退期，每个阶段的工作权重和数据关注点都会有所区别。
1、初创期
初创期的重点在于验证产品的核心价值，通过某种产品或服务可以为特定的人群解决某个问题。这时我们需要关注的关键数据是目标用户画像，同时是第一批种子用户对产品的使用情况和反馈建议。所以初创期更需要设计师和产品经理去做定性分析（比如用户访谈），直接确定产品是否满足了用户需求、产品有没有覆盖到更多的使用场景等。因此产品初期我们可以不用在数据分析上投入更多精力。说白了，该阶段用户量较少，用户行为等数据还停留在比较初期的阶段，所以数据分析的效果不能发挥到最大化，且价值不明显。该阶段就是先保证产品顺利上路，同时要绑定一批种子用户，解决基本的用户诉求，让产品和团队先生存下来。阶段与手段不匹配的情况下，还把某些事情强加上去，这就是“作秀”。
2、成长期
经过了产品打磨的初始阶段，产品一般会有较好的留存率，这个时候产品开始进入自发增长期（成长期）。该阶段的产品已经能够解决用户的基本诉求了，所以将侧重点关注在用户的生命周期的管理，为产品吸引更多的新用户来使用（新鲜血液），既拉新和留存，那么我们数据关注的重点也要放在拉新和留存上。
拉新要关注推广数据和推荐数据：
（1）推广数据：就是产品以拉新目的所采取的所有推广运营活动和行为的指标数据，不同推广方式（线上+线下）的到达率、触达面积、点击率、转化率、二次访问率、流失率。比如我们举办了一场线下活动，现场实到多少人、哪些是目标用户、哪些不是目标用户、有多少人当场试用了我们的产品，又有多少人在活动后下载了产品等等。
（2）推荐数据：是用户是否愿意将产品推荐给他人的行为数据分析。这里我们在数据上可以关注整个分享环节动态，比如产品有100个种子用户，他们中有多少人只是自己用产品、有多少人会分享给朋友、他们的分享行为带来了多少新增用户等，这些数据会告诉我们产品在用户心中的位置。
留存则是要做用户的留存分析：
重点有用户的次日留存率、7日留存率、30日留存率、日活、周活、月活、产品页面访问深度、退出率等等。需要注意的是，这些指标不能单独监测，需要将他们结合起来看。说透了，留存就是要提高目标用户在核心场景的反复出现频率和停留时间（核心场景既产品的主要功能、主要盈利模式和用户最喜欢的模块）。
3、成熟期
随着用户快速增长，产品不断完善，产品在进入成熟期前后，设计师和产品经理的重心开始从用户生命周期的前半段（吸引、激活、留存）往后半段（流失、回流）开始偏移并做出相应的产品设计，同时也更关注商业化行为，既用户价值（用户给产品带来的价值，产品给开发者带来的价值）。
这里的用户价值指的是用户对公司和产品的商业价值，既解决产品诉求。和我们经常说的用户诉求有所不同。该阶段我们要根据用户的情况进行细分，“保大弃小”，尽可能提升高价值用户的活跃度，对于低价值用户可以适当地减少投入精力。有增长就有减少，所以除了对用户活跃度的关注之外，还需关注核心场景的用户行为数据和高价值用户的流失率。
假设我们的产品日活和周活都很高，但是核心场景上的点击率或是停留时间非常低，核心场景关系到公司商业目标和价值的实现，用户在这一块的行为少，要么你的用户不是目标用户，要么你的核心场景存在比较大的缺陷让用户不满意。高价值用户的流失率也是一个道理，都是值得引起我们警惕的数据指标。
4、衰退期
每个产品都有一个生命周期，这是受市场因素导致的，此时用户会逐渐流失（这里说的流失并不是完全放弃我们的产品，而是从降低活跃度渐渐走到消失），既被其它新产品的体验模式所吸引，所以这时应该更关注用户流失后使用的产品，分析竞品的商业模式和功能，同时监测流失速度，需尽快拓展产品边界，寻找新的切入点。
六、敲黑板
1、改版前不放在心上，迭代发布后才关注数据
对于平常就很少关注数据的设计师来说，经常在改版前因为专注于界面上的优化，而忽略了真实的用户行为。
真实案例：我们产品中有一个步进器组件，用于客户选择相应的天数，且此项为必填项。之前我们内部的沟通结果是提供一个7天的默认值，当然对此默认值是有争议的，有的同事认为默认10天比较合理，所以为了验证用户的操作习惯，我们在上线前对该组件进行了埋点。经过用户使用过一段时间之后，我们通过数据发现大部分用户在使用步进器时，点击“减少”比“增加”的次数要多，而且一般停留在5天，就这样我们把默认值从7天优化为5天，减少了大部分用户的2次点击，并且在类似的业务模块内，会记住用户上次所选的值，从而提高填写表单的效率。
虽然只是一个小小的交互优化，但足以证明设计师关注产品数据不仅能够验证设计结果，还能对产品体验不断打磨，精细化提升用户体验。很显然，如果没有此次对数据的监测和教训，只会让我们继续活在自己的世界里，永远也不会在意这个小问题，导致这个组件继续复用、滥用，一错再错，直到用户亲自给我们提优化建议的时候，就已经太晚了。
所以，如果你想让某个设计方案更贴近用户或者想对比改版前后的效果，那就需要提前将自己的埋点需求整理成Excel表格，发给相关的开发同事，再对照交互原型详细讨论这些埋点，确保双方理解一致，不至于最后埋点的数据不是自己想要的。
下面是我在工作中用到的埋点需求表（用户行为统计表）和数据收集表，大家可以参考使用：
2、成为一名解决产品问题的设计师
随着互联网行业的发展，行业对我们设计师的要求只会越来越高，从近两年冒出的UX设计岗、产品设计岗就能感知到。所以，未来的界面设计师一定会更关注产品和数据，不再是曾经“画”页面的团队底层执行者了，了解一些数据知识可以将用户的行为可视化，以便更清晰的了解用户行为，经过一段时间的数据对比，设计师和产品经理可以共同验证并规划后面迭代的方案，预测产品的走向与趋势。并且通过数据分析，可以量化交互方案的效果，作为一名解决产品问题的设计师，可以主动去承担一些用研工作，化被动为主动。
以上是一些基础的数据指标，希望对你有所帮助。若有来自不同行业和业务的产品数据指标，欢迎讨论交流~
是的，我们距离目标又近了一步，标红的你都看了吗？
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
创意是营销中离消费者最近的环节，同样也是最性感、最直接的部分。但为什么我们都看过杜蕾斯海报却依旧写不出好文案？一个好创意如何诞生？
近日，阿里妈妈发布《美妆行业淘宝首焦创意洞察》（以下简称《报告》），试图通过数据洞察的方式帮助品牌商家更懂创意，探讨什么样的创意真正能被消费者买单，怎样的创意生产能提升运营效率，最终帮助品牌实现生意增长。
如果说创意表现是营销的末端，那么洞察则是营销的起点，在营销媒体「传播体操」看来，创意和洞察更是「术」与「道」的关系。因为有了消费者洞察，才会有推广策略，从而产生许多创意。
创意能让品牌与用户实现更好的沟通，但数字化时代，媒体形态多元化、触点碎片化，对创意提出了更高要求。
以 618 这类大型营销节点为例，阿里妈妈此前洞察到，618 消费者是以女性为主的 1-2 线高学历高消费家庭用户，90 后年轻人群为次主流消费群体。消费人群老龄化与年轻化并行，渠道下沉趋势显现。
因此在创意和营销上，品牌方应重点关注 4 个人群：崛起的新生代，承载主力核心的小镇青年、城市青年，以及正在兴起的中老年人群。懂得消费者需求及市场变化，始终围绕以消费者运营为核心，才能让创意发挥更大的营销价值。
此前，阿里妈妈基于行业推出系列洞察报告，此次首次发布创意领域的营销洞察，则进一步丰富洞察维度，持续输出营销洞察能力。
这或许也让品牌、商家和设计师们曾经的矛盾被解决。此前，在面对销售的需求时，视觉设计的结果需要为用户下单购买、产生交易服务，往往会与审美「打架」。《报告》试图减小品牌方和设计师的认知沟壑，通过解读创意图片背后的运营逻辑，为好的创意提供数据基础。
《报告》聚焦美妆行业的展示类营销创意。通过对海量创意样本的算法支持及数据分析，《报告》分析了淘宝首页焦点图（以下简称「首焦」）这一表现创意的关键区域，挖掘创意特征对点击效果的潜在提升效应。
《报告》发现，淘宝首焦曝光点击后的流量联动效应明显，首焦上的点击进店能够有效提升消费者在其他渠道上的进店概率，而在资源位与定向方式固定的前提下，创意设计往往是影响点击率的第一要素。
从数据上进一步看到，首焦点击人群较非首焦点击人群，在后续其他触点上的进店概率会高出一筹，尤其在美容护肤/美体精油和彩妆类目分别提升了 9.1 倍和 11.2 倍。这意味着，首焦投放有助优化全店流量获取能力。若需完成拉新任务，可以考虑首焦投放与其他营销方式组合。
具体来看，《报告》逐一拆解了首焦图片的创意构成──调性、色调、标示、文本内容、商品数量、人像。在控制创意之外的潜在影响因素下，阿里妈妈透过洞察报告还原创意质量的高低对营销效果的影响差异，从而得出最优的组成方式。
不过，在大家积极探索新内容形态的当下，为什么靠图片传达信息依旧重要？在阿里妈妈营销研究中心高级行业研究专家苏寅看来：「从展现形态上来看，图片创意依旧是品牌方与用户沟通的重要抓手。作为基础的信息媒介，图片与视频类内容深度联动，功能互补，形成品牌与消费者的立体化沟通。」
「互联网女皇」玛丽·米克尔发布的《2019年互联网趋势报告》也佐证，虽然短视频直播增长迅速，但使用图片成为越来越重要的沟通方式，基于图片的通讯也得到计算机视觉及人工智能的推进。而在广告营销领域里，图片创意的价值也正在被逐渐受到关注。
有数据支撑的创意洞察后，数字化营销时代也需要更数字化的创意解决方案。
随着报告的发布，阿里妈妈将携手旗下平台创意中心，为品牌和商家提供数字化的创意解决方案。作为国内领先的提升营销效率的全域创意解决方案平台，创意中心接下来也计划把创意黑科技和创意资产的能力，与生态中的各类伙伴进行合作，赋能整个营销创意行业。
除此，阿里妈妈也从产品功能、营销策略上提供赋能。
旗下展示营销产品智钻在 618 前实现升级，在展现形式上首次突破淘宝首焦静态图片形态，以创意元素组件化的形式，创新支持微动效、倒计时、店铺回头客等组件。品牌商家因此有了更多展示信息增益的可能，可提升创意对消费者的心智传达和沟通效率，同时也能提升转化效果。
附完整版报告内容：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一、父组件给子组件传值
1、父组件调用子组件的时候，绑定动态属性
/*传值可以是值“title”、是方法“run”、是组件“this”*/
<v-header :title="title" :run="run" :home="this"></v-header>
1
2
2、在子组件里面通过props接受父组件传过来的数据
<script>
export default{
props:['title','run','home']
}
</script>
二、父组件主动获取子组件的数据和方法
1、调用子组件的时候定义一个ref
<v-header ref="header"></v-header>
1
2、在父组件里面通过以下方式获取属性和方法
this.$refs.header.属性
this.$refs.header.方法
三、子组件主动获取父组件的数据和方法
this.$parent.数据
this.$parent.方法
四、非父子组建传值
1、新建一个js文件 然后引入vue 实例化vue最后暴露这个实例
VueEvent.js
import Vue from 'vue';
var VueEvent = new Vue();
export default VueEvent;
2、在要广播的地方引入刚才定义的实例，并进行广播
home.vue
<script>
import VueEvent from './VueEvent.js';
export default{
methods:{
emitNews(){
/*广播数据*/
VueEvent.$emit('to-news',this.数据)
}
}
}
</script>
3、在要接收数据的地方接受广播
news.vue
<script>
import VueEvent from './VueEvent.js';
export default{
/*在生命周期函数里写，编译的时候就调用*/
mounted(){
/*接受广播*/
VueEvent.$on('to-news',function(data){
console.log(data);
})
}
}
</script>
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一.为什么Bitmap三级缓存？
没有缓存的弊端 ：费流量, 加载速度慢
加入缓存的优点： 省流量，支持离线浏览
二.原理
从内存获取图片, 如果存在, 则显示; 如果不存在, 则从SD卡中获取图片
从SD卡中获取图片, 如果文件中存在, 显示, 并且添加到内存中; 否则开启网络下载图片
从网络下载图片, 如果下载成功, 则添加到缓存中, 存入SD卡, 显示图片
三.代码
(1)添加读写SD卡的权限和网络权限
// //Lrucache存储工具类
public class LruUtils {
private LruCache<String,Bitmap> lruCache;
private long max=Runtime.getRuntime().maxMemory();
public LruUtils(){
lruCache=new LruCache<String,Bitmap>((int)max/8){
@Override
protected int sizeOf(String key, Bitmap value) {
return value.getByteCount();
}
};
}
public Bitmap getBitmap(String key){
return lruCache.get(key);
}
public void setBitmap(String key,Bitmap bitmap){
lruCache.put(key,bitmap);
}
1
2
3
4
5
6
7
8
9
10
11
12
}
//SD卡工具类
public class SDUtils {
public static void setBitmap(String name, Bitmap bitmap) {
if (Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) {
File file = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES);
File file1 = new File(file, name);
try {
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, new FileOutputStream(file1));
} catch (FileNotFoundException e) {
e.printStackTrace();
}
}
}
public static Bitmap getBitmap(String name){
if(Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)){
File file=Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES);
File file1=new File(file,name);
return BitmapFactory.decodeFile(file1.getAbsolutePath());
}
return null;
}
}
//网络
import android.app.AlertDialog;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.concurrent.ExecutionException;
public class NewUtils {
public static Bitmap getBitmap(String url) throws ExecutionException, InterruptedException {
return new MyTask().execute(url).get();
}
static class MyTask extends AsyncTask<String,Void,Bitmap>{
@Override
protected Bitmap doInBackground(String… strings) {
String imageUrl = strings[0];
HttpURLConnection conn = null;
try {
URL url = new URL(imageUrl);
conn = (HttpURLConnection) url.openConnection();
conn.setReadTimeout(5000);
conn.setConnectTimeout(5000);
conn.setRequestMethod(“GET”);
if (conn.getResponseCode() == 200) {
InputStream is = conn.getInputStream();
Bitmap bitmap = BitmapFactory.decodeStream(is);
return bitmap;
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (conn != null) {
conn.disconnect();
}
}
return null;
}
}
}
//使用三个工具类完成Bitmap的三级缓存
package com.example.administrator.myapplication;
import android.graphics.Bitmap;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;
import java.util.concurrent.ExecutionException;
public class MainActivity extends AppCompatActivity {
private ImageView imageView;
Button button;
private LruUtils lruUtils= new LruUtils();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button=findViewById(R.id.button);
imageView=findViewById(R.id.imageview);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Bitmap bitmap=lruUtils.getBitmap(“czn”);
if (bitmap!=null){
imageView.setImageBitmap(bitmap);
Toast.makeText(MainActivity.this, “图片存内存”, Toast.LENGTH_SHORT).show();
}else{
bitmap=SDUtils.getBitmap(“czn.jpg”);
if (bitmap!=null){
imageView.setImageBitmap(bitmap);
Toast.makeText(MainActivity.this, “图片存SD卡”, Toast.LENGTH_SHORT).show();
lruUtils.setBitmap(“czn”,bitmap);
}else{
try {
bitmap=NewUtils.getBitmap(“http://pic1.win4000.com/wallpaper/e/50d80458e1373.jpg”);
if (bitmap!=null){
imageView.setImageBitmap(bitmap);
Toast.makeText(MainActivity.this, “图片存网络”, Toast.LENGTH_SHORT).show();
SDUtils.setBitmap(“czn.jpg”,bitmap);
lruUtils.setBitmap(“czn”,bitmap);
}else{
Toast.makeText(MainActivity.this, “没有找到”, Toast.LENGTH_SHORT).show();
}
} catch (ExecutionException e) {
e.printStackTrace();
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}
});
}
}
Bitmap二次采样
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.concurrent.ExecutionException;
public class Main2Activity extends AppCompatActivity {
Button bt;
ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
bt=findViewById(R.id.bt);
imageView=findViewById(R.id.mimage);
bt.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
try {
Bitmap bitmap = new MyTask().execute(“https://cdn.duitang.com/uploads/item/201211/24/20121124230042_Bfhim.jpeg”).get();
imageView.setImageBitmap(bitmap);
} catch (InterruptedException e) {
e.printStackTrace();
} catch (ExecutionException e) {
e.printStackTrace();
}
}
});
}
class MyTask extends AsyncTask<String,Object,Bitmap>{
@Override
protected Bitmap doInBackground(String... strings) {
try {
URL url = new URL(strings[0]);
HttpURLConnection urlConnection = (HttpURLConnection) url.openConnection();
if(urlConnection.getResponseCode()==200){
InputStream inputStream = urlConnection.getInputStream();
//将inputStream流存储起来
ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
byte[] bytes = new byte[1024];
int len=0;
while((len=inputStream.read(bytes))!=-1){
byteArrayOutputStream.write(bytes,0,len);
}
//桶：网络的图片都放在数组里面了
byte[] data = byteArrayOutputStream.toByteArray();
//TODO 1：第一次采样：只采边框 计算压缩比例
BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds=true;//设置只采边框
BitmapFactory.decodeByteArray(data,0,data.length,options);//采样
int outWidth = options.outWidth;//获得原图的宽
int outHeight = options.outHeight;//获得原图的高
//计算缩放比例
int size=1;
while(outWidth/size>100||outHeight/size>100){
size*=2;
}
//TODO 2:第二次采样：按照比例才像素
options.inJustDecodeBounds=false;//设置只采边框为fasle
options.inSampleSize=size;//设置缩放比例
Bitmap bitmap= BitmapFactory.decodeByteArray(data,0,data.length,options);//采样
return bitmap;
}
} catch (MalformedURLException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
}
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
Fragment，在Android中指的是碎片，也就是在不切换Activity时进行页面的切换，这是Android中的一个重点的内容，很多的应用程序中都有这样的功能，所以，接下来让我们具体的学习一下Fragment的使用
首先，要将一个Fragment给创建出来。
新建一个类，让这个类继承Fragment，并重写onCreatView()方法，之后，使用onCreatView中的inflater将一个布局文件转换为视图，并返回这个视图
之后在MainActivity中获得一个Fragment的管理者
之后我们通过这个管理者的beginTransaction()的方法获取事务管理者
然后，我们将之前写好的Fragment类给进行实例化
之后，我们使用事务管理者的replace()方法来给我们需要的控件上将我们的Fragment给显示出来
之后，使用事务管理者提交事务，这样我们的Fragment就完美的显示出来了
碎片可以在不影响Activity时进行一个页面的切换，所以，我们需要把我们需要显示的所有的Fragment都放到FrameLayout布局上
这样就可以实现Fragment的切换了
同时，在进行Fragment可以给Fragment添加一个回退栈的功能，使得每次按返回键是返回的上一个Fragment，而不是直接退出整个程序了
下面我们讲一下Fragment的生命周期
Fragment的生命周期分为11个部分，分别为：
onAttach()
onCreatView()
onCreat()
onActivityCreated()
onStart()
onResume()
onPause()
onStop()
onDestoryView()
onDestory()
onDetach()
Fragment的生命周期和Activity的生命周期一样重要，都是面试时的重点，一定要背下来
其次还要学习关于Fragment的传值
Fragment的传值分为两种方法，分别是Handler传值和接口回调方法，接下来就来学习一下两种不同的传值方式
首先是Handler的传值 ，
第一步是在我们需要拿到值的Fragment中建立一个静态的Handler，之后重写handleMessage()方法
第二步，在传值的Fragment的调用Handler进行传值
这样就可以实现了Fragment的Handler之间的传值
然后我们接着说关于接口回调的传值
首先定义一个外部接口
之后呢，在传值的Fragment里传递数据
然后，我们在接收的Fragment里实现接口并重写方法即可传递数据
这就是接口回调传递数据的方法
好了，关于Fragment的使用简单说到这里
---------------------
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
写在前面
2019年6月18日Material Design更新了设计指南中数据可视化部分，这是谷歌数据可视化团队形成的一套全面的数据可视化指南， 涵盖了设计原则、图表分类、图表的选用、样式设计、交互设计、仪表板设计等方面。个人阅读后进行了翻译，希望能够分享给更多对数据可视化有兴趣的设计同学！
全文章节目录：
原则
类型
选择图表
样式
行为
仪表板
数据可视化
数据可视化就是用图形描绘信息。
原则
数据可视化是一种以图形描绘密集和复杂信息的表现形式。数据可视化的视觉效果旨在使数据容易对比，并用它来讲故事，以此来帮助用户做出决策。
数据可视化可以表达不同类型和规模的数据，包括从几个数据点到有大量变量的数据集。
类型
数据可视化可以以不同的形式表达。图表是表达数据的常用方式，因为它们能够展示和对比多种不同的数据。
图表类型的选择主要取决于两点：要表现的数据和表现该数据的用意。该指南描述各种类型的图表及其用例。
图表类型
1. 随时间变化
随时间变化的图表显示一段时间的数据，例如多个类别之间的趋势或比较。
常见用例包括：
股价表现、卫生统计、年表
2. 类别比较
类别比较图表是多个不同类别数据之间的比较。
常见用例包括：
不同国家的收入、热门场地时间、团队分配
3. 排名
排名图表显示项目在有序列表中的位置。
常见用例包括：
选举结果、性能统计
4. 占比
占比类图表显示了局部与整体的关系。
常见用例包括：
产品类别的综合收入、预算
5. 关联
关联类图表显示两个或以上变量之间的关系。
常见用例包括：
收入和预期寿命
6. 分布
分布类图表显示每个值在数据集中出现的频率。
常见用例包括：
人口分布、收入分布
7. 流程
流程类图表显示了多个状态之间的数据移动。
常见用例包括：
资金转移、投票计数和选举结果
8. 关系
关系图表显示多个项目之间的关系。
常见用例包括：
社交网络、词图
选择图表
面对多种类型的图表，以下指南提供了关于如何选择合适的图表见解。
显示随时间的变化
可以使用时间序列图表来表示随时间的变化，就是按时间顺序表示数据点的图表。表示随时间变化的图表包括：折线图，柱状图（条形图）和面积图。
*基线值是y轴上的起始值。
柱状图（条形图）和饼图
柱状图（条形图）和饼图都可用于显示比例，表示部分与总体的对比。
· 柱状图（条形图）使用共同的基线，通过条形长度表示数量
· 饼图使用圆的圆弧或角度表示整体的一部分
柱状图（条形图），折线图和堆叠面积图在显示随时间的变化方面比饼图更有效地。由于这三个图表都是使用相同的基线，因此可以更轻松地根据条形长度比较值的差异。
面积图
面积图有多种类型，包括堆叠面积图和层叠面积图：
· 堆叠面积图显示多个时间序列（在同一时间段内）堆叠在一起
· 层叠面积图显示多个时间序列（在同一时间段内）重叠在一起
层叠面积图建议不要使用超过两个时间序列，因为这样做会使数据模糊不清。取而代之，应当使用堆叠面积图来比较一个时间间隔内的多个值（横轴表示时间）。
样式
数据可视化使用自定义样式和形状，使数据更容易理解，以适合用户需求。
图表可以从以下方面进行优化：
· 图形元素
· 文字排版
· 图标
· 轴和标签
· 图例和注释
不同类型数据的样式设计
可视化编码是将数据转换为可视形式的过程。独特的图形属性可应用于定量数据（如温度，价格或速度）和定性数据（如类别，风味或表达式）。
这些图形属性包括：
· 形状
· 颜色
· 大小
· 面积
· 体积
· 长度
· 角度
· 位置
· 方向
· 密度
不同属性的表现
多个视觉处理方法可以综合应用于数据点的多个方面。例如，在条形图中，条形颜色可以表示类别，而条形长度可以表示值（如人口数量）。
形状可用于表示定性数据。在此图表中，每个类别由特定形状（圆形，正方形和三角形）表示，这样可以在一张图表中轻松实现特定范围的比较，同时也可以进行类别之间比较。
1. 形状
图表可以运用形状，以多种方式展示数据。形状的设计可以是有趣的、曲线的，或者和高保真的等等。
形状程度
图表可以展示不同精度程度的数据。用于细致研究的数据应该用适合交互的形状（在触摸大小和功能可见性方面）展示。而旨在表达一般概念或趋势的数据可以使用细节较少的形状。
2. 颜色
颜色可用于以四种主要方式区分图表数据：
· 区分类别
· 表示数量
· 突出特定数据
· 表示含义
颜色区分类别
例：圆环图中，颜色用于表示类别。
颜色表示数量
例：地图中，颜色用于表示数据值。
颜色突出数据
例：散点图中，颜色用于突出特定数据。
重点区域
在不滥用的情况下，颜色可以突出焦点区域。不建议大量使用高亮颜色，因为它们会分散用户注意力，影响用户的专注力。
颜色表示含义
无障碍
为了适应看不到颜色差异的用户，您可以使用其他方法来强调数据，例如高对比度着色，形状或纹理。
将文本标签应用于数据还有助于说明其含义，同时消除对图例的需求。
3. 线
图表中的线可以表示数据的特性，例如层次结构，突出和比较。线条可以有多种不同的样式，例如点划线或不同的不透明度。
线可以应用于特定元素，包括：
· 注释
· 预测元素
· 比较工具
· 可靠区间
· 异常
4. 文字排版
文本可用于不同的图表元素，包括：
· 图表标题
· 数据标签
· 轴标签
· 图例
图表标题通常是具有最高层次结构的文本，轴标签和图例具有级别的层次结构。
字重
标题和字重的变化可以表达内容在层次结构中的重要程度。但是应该保持克制，使用有限的字体样式。
5. 图标
图标可以表示图表中不同类型的数据，并提高图表的整体可用性。
图标可用于：
· 分类数据：用于区分组或类别
· UI控件和操作：例如筛选，缩放，保存和下载
· 状态：例如错误，空状态，完成状态和危险
在图表中使用图标时，建议使用通用可识别符号，尤其是在表示操作或状态时，例如：保存，下载，完成，错误和危险。
6. 坐标轴
一个或多个坐标轴显示数据的比例和范围。例如，折线图沿水平和垂直坐标轴显示一系列值。
柱状图（条形图）基线
柱状图（条形图）应从为零的基线（y轴上的起始值）开始。从不为零的基线开始可能导致数据被错误地理解。
坐标轴标签
标签的设计应体现图表中最重要的数据。应根据需要使用标签，并在UI中保持一致性。他们的出现不应该妨碍查看图表。
文字方向
为便于阅读，文本标签应水平放置在图表上。
文字标签不应该：
· 旋转
· 垂直堆叠
7. 图例和注释
图例和注释描述了图表的信息。注释应突出显示数据点，数据异常值和任何值得注意的内容。
1. 注释
2. 图例
在PC端，建议在图表下方放置图例。在移动端，将图例放在图表上方，以便在交互过程中保持可见。
标签和图例
在简单图表中，可以使用直接标签。在密集的图表（或更大的图表组的一部分）中，可以用图例。
8. 小显示屏
可穿戴设备（或其他小屏幕）上显示的图表应该是移动端或PC端图表的简化版本。
行为
图表具有交互模式，使用户可以控制图表数据。这些模式可以使用户专注于图表的特定值或范围。
以下推荐的交互模式，样式和效果（如触觉反馈）可以提高用户对图表数据的理解：
渐进式披露
提供了按需求逐步展示详细信息的明确途径。
直接操作
允许用户直接对UI元素进行操作，最大限度地减少屏幕上所需的操作数量，包括：缩放和平移，分页和数据控件。
改变视角
使一种设计可以适用于不同的用户和数据类型，例如数据控件和动效。
1. 渐进式披露
使用渐进式披露显示图表详细信息，允许用户根据需要查看特定数据点。
2. 缩放和平移
缩放和平移是常用的图表交互，会影响用户对图表数据深入的研究和探索。
缩放
缩放改变界面显示的远近。设备类型决定了如何执行缩放。
· 在PC端，通过单击、拖动或滚动进行缩放
· 在移动端，通过捏合进行缩放
当缩放不是主要操作时，可以通过单击和拖动（在PC端）或双击（在移动端）来实现。
平移
平移让用户能够看到屏幕之外的界面。它应该合理的展示数据的价值。例如，如果图表的一个维度比另一个维度更重要，则平移的方向可以仅限于该维度。
· 平移通常与缩放功能同时使用。
· 在移动端，平移通常通过手势实现，例如单指滑动。
3. 分页
在移动端，分页是一种常见模式，让用户通过向右或向左滑动来查看上一个或下一个图表。
在移动端，用户可以向右滑动以查看前一天。
4. 数据控制
可以使用切换控件，选项卡和下拉菜单筛选或改变数据。
用户调节控件时，这些控件还可以显示指标。
切换控件，选项卡和下拉菜单可以更改或筛选数据。
5. 动效
动效可以强化数据之间的联系，提升交互体验。应该有目的地使用运动（不是装饰性地），表达不同状态和空间之间的联系。
运动应该是合理，平稳，反应灵敏，不会妨碍用户的使用。
在此示例中，图表数据从按天显示动态切换到按周显示。转换期间不会显示所选日期范围之外的数据，从而降低了复杂性。
动画能够体现两个不同图表的相关性。
6. 空状态
图表数据为空的情况下，可以提供相关数据的预期。
在合适的情况下，可以展示角色动画创造愉悦和鼓励。
有特色的动画提升了空状态的效果。
仪表板
在称为仪表板的UI界面中，数据可视化通过一系列图表实现。多个独立的图表有时可以比一个复杂的图表更好地表达故事。
仪表板设计
仪表板的目的应在其布局，样式和交互模式中体现。无论是用来制作演示文稿还是深入研究数据，它的设计应该适合它的使用方式。
仪表板应该：
· 突出最重要信息（使用布局）
· 根据信息层级确定信息的焦点（使用颜色，位置，大小和视觉权重）
应根据对数据的需求确定信息的优先级并进行安排。在此示例中设计仪表板，考虑了以下用户问题：
1. 需要注意的问题
2. 发生问题的时间
3.发生问题的位置
4.受问题影响的其他变量
1. 分析类仪表板
分析仪类表板让用户能够研究多组数据并发现趋势。通常，这些仪表板包含能够深入洞察数据的复杂图表。
用例包括：
· 随时间变化的突出趋势
· 回答“为什么”和“假设”的问题
· 预测
· 创建有深度的报告
分析类仪表板示例：
· 跟踪广告活动的收效
· 跟踪产品在其整个生命周期中的销售额和收入
· 随时间变化的城市人口趋势
· 跟踪随时间变化气候数据
分析类仪表板显示气候数据
2. 操作类仪表板
操作类仪表板旨在回答一组预设的问题。它们通常用于完成与监控相关的任务。
在大多数情况下，这些类型的仪表板具有一系列关于当前信息的简单图表。
用例包括：
· 跟踪目标的当前进度
· 实时跟踪系统性能
操作类仪表板示例：
· 跟踪呼叫中心的活动，例如呼叫音量，等待时间，呼叫长度或呼叫类型
· 监控在云端应用程序的运行状况
· 显示股市情况
· 监控赛车上的遥测数据
操作类仪表板显示设备存储指标
3. 演示类仪表板
演示类仪表板是为感兴趣的主题提供的展示视图。
这些仪表板通常包括一些小图表或数据卡片，用动态标题描述每个图表的趋势和见解。
用例包括：
· 提供关键绩效指标的总览
· 创建高级执行情况的概要
演示类仪表板示例：
· 提供投资账户绩效的总览
· 提供产品销售和市场份额数据的概要
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
「元辰」数据概念控制中心，基于真实的使用场景和概念的表现手法，打造的企业及个人后台数据管理系统。
主要分为首页概览、作品编辑、信息收集、数据统计和常规配置等，简单的动效使操作回馈有了更好的交互体验，且真实可依。
-
「元辰」注重真实的数据体验，致力把数据信息通过大屏实时简洁、有效的传达给使用者。针对精准用户“迅速获取信息、简化操作流程、减少学习成本”，我们将这些问题作为传达的核心要素，一直贯穿始终。
-
欢迎沟通探讨、合作交流。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
for(var i = 0; i < 5; i++) {
console.log(i)
}
这样for循环可打印出 0 - 4的结果
for(var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i)
}, i * 1000)
}
但这样只能间隔一秒打印出5个5
原因在于 setTimeout是异步，等for循环全部完成 i 后才会执行
解决方法可以将 for循环中的var 变成 let
let只作用于for循环内，这样每次付给setTimeout的值都是当前值
或者在setTimeout外再包一层function
for(var i = 0; i < 5; i++) {
(function(i) {setTimeout(function() {
console.log(i)
}, i * 1000)})(i)
}
将 i 作为参数传到setTimeout中运行 这样就可以得到每隔1秒加1的log结果了
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
深入了解色彩理论属性是非常有必要的，可以很好利用一些定式理论和色彩搭配方法应用于你的设计！
本文重点介绍了色彩理论和色彩组合在设计中应用的基础知识: 例如学习更多关于色相环、RGB、CMYK色彩模型的相关知识。
很多人认为UI的色彩选择主要取决于设计师的品味和美感。然而，色彩选择的过程比表面看起来要复杂很多，在设计中起着重要的作用。在我们之前的一篇关于颜色心理学的文章中，我们发现颜色对我们的情绪和行为有很大的影响。这就是为什么产品的成功很大程度上取决于设计所选择的颜色。研究表明，人们只需90秒就能对一种产品做出下意识的判断，而其中62%至90%的判断仅基于颜色。因此，选择合适的颜色对于改进产品的转换率和提高产品的可用性是非常有用的。
为了创造好的设计，更有效地运用颜色，你需要了解颜色是如何形成的，以及它们之间是如何相互联系的。这就是为什么艺术学校、学院和大学的学生学习色彩理论，致力于研究色彩的本质。今天，我们提供给你记住(甚至学习)色彩理论的基础上的颜色组合，可以有效地应用于你的设计创作。
01.色相环/色轮
如果你上过有关绘画的课，你一定见过由不同颜色组成的圆圈。它被称为色相环/色轮，这有助于理解不同的颜色如何相互关联，以及如何将它们组合起来。色相环通常由主色、次色和三色组成。最主要的是这三种色素的颜色不能形成任何其他颜色的组合。把原色结合起来，就得到了第二种颜色，而原色和第二种颜色的混合就得到了第三种颜色，它们通常有两个词的名字，比如红紫。
色相环/色轮是由艾萨克·牛顿于1666年以示意图的方式创建的，从那时起，它经历了许多变换，但仍然是色彩组合的主要工具。主要的想法是，色相环/色轮必须这样做，以便颜色适当地产生混合。
02.颜色模型
在你开始混合颜色之前，你需要了解颜色有两种不同的性质:有形的颜色是物体表面的颜色，其他颜色是由光产生的，比如电视的光束。这些类型创建了两个颜色模型，通过它们可以形成色轮:加法和减法。
加色模型将红、蓝、绿作为原色，因此也称为RGB颜色系统。这个模型是屏幕上使用的所有颜色的基础。在这个系统中，原色以相同比例组合而成的第二种颜色是青色、品红和黄色，但是你需要记住，你添加的光越多，颜色就变得越亮越浅。对于习惯于油漆、染料、油墨和其他有形物体的减色法的人来说，通过混合加色得到的结果往往是违反直觉的。
减色法通过对光的减法得到颜色。它由两种颜色系统组成。第一种是RYB(红、黄、蓝)，也称为艺术系统，常用于艺术教育，尤其是绘画。RYB是现代科学色彩理论的基础，该理论认为青色、品红和黄色是三种颜色中最有效的组合。这就是CMY颜色模型的形成过程。它主要用于印刷，当制版印刷的关键部件为黑色油墨时，该系统被命名为CMYK(青色、品红、黄色和黑色)。如果没有这种额外的色素，最接近黑色的阴影将是浑浊的棕色。
03.色彩的加法与减法
您应该记住这两个系统之间的主要区别:加法用于数字屏幕，减法用于印刷媒体。如果你正在做的设计项目是要打印出来的，不要忘记一个简单但重要的规则:你在屏幕上看到的颜色在打印出来的时候看起来不一样。加色谱比CMYK更宽，这也是为什么建议设计师在打印前把他们的项目转换成减色法，这样他们就可以看到接近他们得到的结果。然而，如果您使用数字产品，RGB颜色系统是明智的选择，因为它允许创建惊人的东西与它的广谱彩色。
04.色彩协调
“协调”这个词通常与有序和令人愉快的事物联系在一起。色彩协调是指在设计中以最吸引人、最有效的方式对色彩进行排列，让用户感知。当色彩有条理的时候，观者会感到愉悦和平静，而不协调的设计则会给人混乱和厌恶的感觉。色彩的平衡在设计中是至关重要的，因为用户对网站或应用程序的第一印象，颜色有很大的影响。设计师区分了有效工作的基本配色方案。
05.单色
它是基于一种颜色与它的各种色调搭配。单色的呈现总是一个胜利的选择，因为它色彩属性单一，容易创造一些简洁的配色方案。
06.类似色/同类色
要创建类似的色彩，您需要使用颜色轮上相邻的颜色。这种类型的配色方案用于不需要对比的设计，包括网页或横幅的背景。
07.互补色
互补的方案是混合的颜色放在彼此前面的色轮上。这个方案与类似的单色相反，因为它的目的是产生高对比度。例如，蓝色背景上的橙色按钮在任何界面中都很难被忽略。
08.分割互补
这个方案与前一个方案类似，但它使用了更多的颜色。例如，如果你选择蓝色，你需要选择另外两种颜色，这两种颜色相邻，意思是黄色和红色。这里的对比度没有互补方案那么鲜明，但它允许使用更多的颜色。
09.三元/三色方案
当设计需要更多的颜色时，您可以尝试三元方案。它基于色轮上等距的三种不同颜色。为了在这个方案中保持平衡，建议使用一种颜色作为主色，另一种颜色作为辅色。
10.四色方案/双互补
四色方案是为经验丰富的设计师，因为它是最难平衡。它采用了四种颜色的色轮，这是互补对。如果你把所选颜色上的点连接起来，它们就形成了矩形。这个方案很难协调，但是如果你做的一切都正确，结果可能会令人惊叹。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
摘要
优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护
HTML 规范
缩进
统一两个空格缩进
命名规范
class 应以功能或内容命名，不以表现形式命名；
class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔；
使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；
DOCTYPE 声明
HTML 文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：
<!DOCTYPE html>
meta 标签
统一使用 “UTF-8” 编码
<meta charset="utf-8">
SEO 优化
<!-- 页面关键词 -->
<meta name ="keywords" content =""/>
<!-- 页面描述 -->
<meta name ="description" content ="">
<!-- 网页作者 -->
<meta name ="author" content ="">
优先使用 IE 版本和 Chrome
<meta http-equiv ="X-UA-Compatible" content ="IE = edge，chrome = 1">
为移动设备添加视口
<!-- device-width 是指这个设备最理想的 viewport 宽度 -->
<!-- initial-scale=1.0 是指初始化的时候缩放大小是1，也就是不缩放 -->
<!-- user-scalable=0 是指禁止用户进行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
禁止自动识别页面中有可能是电话格式的数字
<meta name="format-detection" content="telephone=no">
团队约定：
pc 端：
<meta charset="utf-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
web前端开发资源Q-q-u-n： 767273102 ，内有免费开发工具，零基础，进阶视频教程，希望新手少走弯路
移动端：
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
标签
html 标签分为以下几类：
自闭合标签（self-closing），无需闭合。例如：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr 等 )
闭合标签（closing tag），需闭合 。例如：textarea、title、h、div、span 等
团队约定：
所有具有开始标签和结束标签的元素都必须要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上
自闭合标签不要加上结束标签
自定义标签的名字必须包含一个破折号（-），<x-tags>、<my-element>和<my-awesome-app>都是正确的名字，而<tabs>和<foo_bar>是不正确的。这样的限制使得 HTML 解析器可以分辨那些是标准元素，哪些是自定义元素
自定义标签必须写上开始标签和闭合标签
尽量减少标签数量
元素属性
元素属性值使用双引号语法
推荐：
<input type="text">
不推荐：
<input type=text>
<input type='text'>
代码嵌套
块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
标题和段落中不能包含块，如：h1、h2、h3、h4、h5、h6、p、dt
块与内联不能并列，块级元素与块级元素并列、内嵌元素与内嵌元素并列
有些标签是固定的嵌套规则，比如 ul 包含 li、ol 包含 li、dl 包含 dt 和 dd 等等。
灵活使用伪类
不要让非内容信息污染了你的 HTML，打乱了 HTML 结构。可以使用:before、:after 等伪类元素
推荐：
HTML 代码
<!-- That is clean markup! -->
<span class="text-box">
See the square next to me?
</span>
CSS 代码：
/* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
.text-box:before {
content: '';
display: inline-block;
width: 1rem;
height: 1rem;
background-color: red;
}
1
不推荐：
HTML 代码：
<!-- We should not introduce an additional element just to solve a design problem -->
<span class="text-box">
<span class="square"></span>
See the square next to me?
</span>
CSS 代码：
.text-box > .square {
display: inline-block;
width: 1rem;
height: 1rem;
background-color: red;
}
web前端开发资源Q-q-u-n： 767273102 ，内有免费开发工具，零基础，进阶视频教程，希望新手少走弯路
特殊符号必须使用转义符
符号 描述 转义符
空格
< 小于 <
> 大于 >
& 和 &
" 引号 "
纯数字输入框
使用 type=“tel” 而不是 type=“number”
<input type="tel">
类型属性
不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含。
推荐：
<link rel="stylesheet" href="" >
<script src=""></script>
不推荐：
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>
注释规范
单行注释
一般用于简单的描述，如某些状态描述、属性描述等
注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行
推荐：
<!-- Comment Text -->
<div>...</div>
不推荐：
<div>...</div><!-- Comment Text -->
<div><!-- Comment Text -->
...
</div>
6
模块注释
注释内容前后各一个空格字符
<!-- S Comment Text -->表示模块开始
<!-- E Comment Text -->表示模块结束，模块与模块之间相隔一行
模块注释内部嵌套模块注释，<!-- /Comment Text -->
推荐：
<!-- S Comment Text A -->
<div class="mod_a">
<div class="mod_b">
...
</div>
<!-- /mod_b -->
<div class="mod_c">
...
</div>
<!-- /mod_c -->
</div>
<!-- E Comment Text A -->
<!-- S Comment Text D -->
<div class="mod_d">
...
</div>
<!-- E Comment Text D -->
web前端开发资源Q-q-u-n： 767273102 ，内有免费开发工具，零基础，进阶视频教程，希望新手少走弯路
22
语义化
没有 CSS 的 HTML 是一个语义系统而不是 UI 系统
通常情况下，每个标签都是有语义的
语义化的 HTML 结构，有助于机器（搜索引擎）理解，另一方面多人协作时，能迅速了解开发者意图
建议页面中多使用语义化标签，而不是整个页面以 div 构成
常见标签语义：
标签 语义
<p> 段落
<hn> 标题(h1~h6)
<ul> 无序列表
<ol> 有序列表
<nav> 标记导航，仅对文档中重要的链接群使用
<main> 页面主要内容，一个页面只能使用一次。如果是 web 应用，则包围其主要功能
<article> 定义外部的内容，其中的内容独立于文档的其余部分
<section> 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside> 定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表
<header> 页眉通常包括网站标志、主导航、全站链接以及搜索框
<footer> 页脚，只有当父级是 body 时，才是整个页面的页脚
<figure> 规定独立的流内容（图像、图表、照片、代码等等）（默认有 40px 左右 margin）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com