如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
减少页面加载时间的方法：
1.压缩html css js等文件
2.减少DNS解析
3.减少DOM元素，对于相关操作可以缓存节点
4.改变页面元素样式时尽量操作className，而不是频繁使用xxx.style.（其实还有很多这种DOM修改操作的细节比如opacity替代visibility ，多个DOM统一操作（虽然V8会有缓存优化） ，先将DOM离线，即display：none；修改后显示 ，不要把DOM放在已给循环中作为循环变量 ，不要使用table ）
5.避免不必要的重定向
6.合并js css及图片，减少请求数量
7.使用CDN
8.合理利用缓存
9…
关于CDN？
https://zhuanlan.zhihu.com/p/39028766
CDN中文名“内容分发网路”，作用是减少传播时延，找最近的节点。CDN本质就一个是缓存，只是这个缓存离你特别近，不管是作为用户还是开发人员都能从中享受一点福利。
CDN的优点
1.访问加速
2.减轻服务器负载
3.抗住攻击
CDN的缺点
1.只能对静态资源加速
2.内容更新时需要分发到其他节点
3.代价高昂
与传统网站访问方式的不同
传统的网站会直接解析域名获得IP地址然后发送请求
使用了CDN的网站则增加了缓存层，解析域名→获取对应CNAME域名→对获取的域名进行解析得到缓存服务器的IP地址，将用户的访问请求引导到最优的缓存节点而不是源站。
总结：通过权威DNS服务器来实现最优节点的选择，通过缓存来减少源站的压力。主要应用于静态网页、大文件的下载等等。
应用与踩坑
缓存设置
max-age在Cache-Control中经常用于缓存的控制，可是max-age设置的缓存会应用于一个请求经过的每一级，如果我们希望CDN不缓存那么久，要怎么办呢？那就是s-maxage，它用于设置代理服务器的缓存时间，会覆盖max-age的设置，这样我们可以把max-age用于本地缓存，把s-maxage用于CDN缓存时间，避免脏数据的产生。
缓存命中率
对于一个缓存而言，还有一点非常重要，就是你的缓存到底有没有用，衡量这个东西的就是缓存命中率。如果只是静态资源，在刷新缓存之后，可能导致命中率下降，因此CDN的资源不适合经常刷新，换句话说，如果一个请求结果会经常进行变更，那么CDN基本就没有什么存在的意义了。
判断是否命中缓存
还要考虑的一件事是：这个资源是否命中了CDN，是否是因为CDN导致的问题。
在各大厂商的CDN返回的数据中都会有一个X-Cache，上面内容是Hit或者Miss，还会加上诸如Memory或者Disk的缩写表示内存还是磁盘，如果出现Upstream或者Miss则表示没有命中。
资源预热
缓存设计中，预热是很重要的环节，在最初刚开始启动CDN的时候，CDN上并没有缓存数据，此刻大量的请求全部打向源站，肯定会把源站打挂，预热就是实现缓存热门数据，这样在业务上线时，CDN上已经有所需的数据了
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
好的衡量指标带你上天堂，不好的衡量指标带你睡…嗨，本周Nathan 与大家分享下一些在UX 工作中，常会听到的一些衡量指标专有名词，有些或许是你常常听到但不太确定的，有些则可能是你所在的领域或项目比较少讨论的。
虽然在大多数的公司中，与中小型的设计团队，采用快速定性的研究，可能是比较符合CP 值的方式。但当产品、用户甚至团队具有一定规模时，关于量化指标的重要性，在2019 年的今天想必已经不需要再重复叙述。
不太一样或是常被误会的是，对于设计师来说，多数在工作中使用的量化衡量指标，其实大多是围绕设计工作的显性部分，也就是可用性(Usability) 上，而可用性工作其实只是UX Design 的一环。
但， UX 毕竟是由商业环境中反推学术的一门职位。
如果仅仅只是将量化指标用在UX Designer 的工作上，反而是自己自废武功。不要忘记小至前端展现，大至商业策略，都可以是UX Design 的范围。
Five Levels of UXs ConversionXL
因此如何学习使用一些既带有商业特性，又能体现用户体验的指标，是每个UX 工作者，多少都要知道的。
We are not design the UX，but we can design for UX
另外，本篇主要在分享一些使用体验横标指标上的一些迷思，与介绍工作中常用的一些指标，至于如何透过这些指标帮助UX Designer 在工作中提升重要性，来自证UX 工作能带来的价值部分，可以看一下Nathan 以前写过的一篇古早文。
当有一定的用户后，结合常见的数据分析工具或内部团队自建的数据埋点，网站和应用马上就能出现许多可供分析的数据，似乎只要有这些数据，令人惊喜的洞察就会自动浮出水面。
GSM（Goal-Signal-Metrics）是Google 提出的目标导向衡量模型，用来拆解用户使用产品时的设计目标-行为信号-衡量指标的一种模式。
Google GSM Framework, Goal-Signal-Metrics
在商业场景中，所有的数据衡量必定带有明确的目标，比如：透过观察宽口转化和窄口转化，分析广告投放效益以及GMV 成本。甚至，如果仅基于这些观察数据进行动作性的优化，没有配合中长期的决策时，变化仅会流于短期效益。
一个数据指标容易监测与计算，并不意味着它对你的产品来说就是重要的。透过现在大部分的分析工具，可以很容易就监测跟踪成百上千的各种指标，而且分析的工具也层出不穷。新产品团队往往因为能获取大量的数据，然后就期望洞察自动出现，但往往不遂人意。
例如，网页或App 的PV 数据很容易收集，但如果你的网页或产品是属于内容消费类型的，它就无法呈现用户是否在你的网站消费内容（有效时长更具代表性）。高的PV 或许是由市场广告转化过来的用户，但对内容消费类的产品目标，肯定不是确定每个用户到底浏览了多少页面，PV 可能是衡量广告效果的重要度量，但它并不是监测用户参与度的良好方式。
如果你不确定你正在用的数据指标，是否有正向帮助的话。可以参考AARRR 的转化模型，来帮助自己梳理清楚核心的转化链路。
如上面所说相较于PV、UV、DAU，用户在网站或应用中的有效停留时长，可能更适合用来衡量用户在产品中的参与度。
但停留时间越长可能是正面的，也可能是负面的。在电商产品类的转化过程中，如果在关键的转化节点用户停留较久，可能意味着用户因困惑、分心或挫败而花费了大量时间。即便同时监测网站或应用的停留时长和转化率，你可能仍然不清楚为什么用户参与度如此高，对于最后的成交却没有太大帮助。
这时就需要透过配合更细致的数据指标组合，慢慢的定位用户在操作步骤中的关键问题，并尝试透过A/B Testing 来解决。
大家常用的数据指标，并不一定适合自己当前产品阶段或企业目标。
正常而言企业的主力产品，正是代表着企业主要的商业营利模式，因此在发布产品后要监测的各种衡量指标，通常在产品准备进入市场前，都已依照商业模式进行拆分。但在产品的冷启动时期，这些依商业模式拆分的指标，很多时候无法反映出，企业的产品是否正在往好的方向成长。
比如Saas服务类型的产品，通常都会使用净收入留存NDRR （Net Dollar Retention Rate）作为主要的商业模式指标，但在前期用户量少时，搭配NPS或PSAT等类型的指标，才能够好的回归到Saas产品的服务体验本质。了解企业目前提供的服务，对用户来说是否是正向的，并且能持续增长。
在产品开发迭代中发布新功能后，数据可能会开始上升。产品团队可能认为这是新功能的发布造成的，但销售部分却可能会将它与一项新的促销活动联系起来，而UX 团队则可能认为这与他们的新设计相关。
这种场景在产品的数据到达一定规模时十分常见。真实情况是只能透过控制一些固定因子，来做更细部的A/B Testing 拆分。但大多时候产品的迭代时间与开发资源，很难真正做到能明确确认是因为什么原因。
因此结合前面所说的，各团队在主要的数据指标中，配合其他辅助指标，甚至提取更与团队紧密相关的个别指标，来了解在产品的迭代过程中，各自团队做的决策是否是正向的。
用户体验指标，跟易用性和商业指标目的不同
下面就会介绍几种工作中常用的，与体验相关的衡量指标，部分指标在订定的一开始，本身即包涵了商业与体验维度。
大部分的体验衡量指标，都会基于三个主要价值观，结合其他用户态度类型作为衡量基准。
下面介绍几种，在工作中可能常用到的通用型，与不同业务场景型的体验衡量指标。
01 传统网站服务使用的PULSE
PULSE 是基于商业和技术的衡量模型，被很多组织和公司广泛应用于跟踪产品的整体表现。包含：
但不难看出PULSE 指标仅覆盖了UX 设计中最最基础的可用性部分，和衡量用户体验的直接关系不大，难以评估设计工作到来的影响，毕竟这个指标创建之初是用来衡量产品的技术与商业效果。
因此为了弥补PULSE 指标中存在的问题，Google 提出了HEART 指标模型。HEART 是“以用户为中心度量的指标体系，以及把产品目标与创建指标体系相互关联的过程”
02 以使用者为中心的HEART
HEART其实也是业界使用的老黄历了，尤其常用GA ( Google Analytics ) / Adobe Omniture的人一定都对他不陌生。
早期产品开发上线的阶段，大多是订定业务KPI 作为衡量项目产出的价值，但在用户体验的部份，却很难有可视化以可及量化的衡量指标。因此Google 尝试把产品目标以及体验指标相互结合，建立以用户为中心的HEART 度量体系。
Google Heart 体验衡量指标模型
01 NPS（ Net Promoter Score净推荐值）
净推荐值最早是由贝恩咨询的创始人Fred Reichheld 在2003 提出，通过测量用户的推荐意愿，从而了解用户之于产品或服务的忠诚态度。
NPS 算是近几年用户体验领域上的当红指标（甚至业内还有所谓的NPS 教派XD），基本上互联网类产品都可以使用。其基本核心理念是，一个企业的用户可被划分为三类：推荐者、中立者和批评者。
相较于其他的指标，NPS 询问的是意愿而不是情感，对用户来说更容易回答，且直接反应了客户对企业的忠诚度和购买意愿，在一定程度上可以看到企业当前和未来一段时间的发展趋势和持续盈利能力。
02 CES（ Customer Effort Score用户费力度）
CES 指的是你的产品或服务，会需要用户花费多少力气才能满足自身需求。
根据Oracle 的一项研究，82％的人把他们的购买经历描述为“花费太多的努力”，CES背后的理论就是，应该想办法减少客户为了解决问题而付出的努力。CES可以帮助你找出可优化的方向，更容易理解在哪里进行改善，较低的费力度也与客户留存直接相关，从而增加客户的生命周期价值。
一般情况下，大多会先利用CSAT、PSAT这类的指标来衡量客户对产品或服务的体验反馈，当这套标准的价值到达临界点时，就应该尝试CES作为满意度指标的扩充，更充分的评估Saas产品的用户体验情况。
03 FCR（ First contact resolution一次性解决率）
作为Saas类服务型产品，在获取新客或帮助旧客时，大多是通过客户服务，在许多的互联网公司Customer Service团队也是重点投入资源的。而「FCR一次解决率」即是用来衡量这类客户服务的指标。
FCR 是指客户的服务需求在第一次客户服务中完全解决的占比率。
测量一次性解决率是相当简单的。通过单次交互（电子邮件响应，电话，聊天会话等）解决你收到的客户请求数量，并除以同一时期收到的请求总数。
一次性解决率不仅对Saas 产品的客户至为重要，也能体现客户服务的绩效和表现，甚至深入到每个员工的层面上。
01 SUS（ System Usability Scale系统可用性量表）、QUIS（Questionnaire for User Interface Satisfaction用户交互满意度）
SUS 应该也算是用来评估单个用户使用某个产品的可用性时，最常见的指标了。SUS 是一种用来量化定性数据的方法，并不仅仅依靠数据统计，需要结合用户具体参与来进行调研，通常作为可用性测试的组成部分。
SUS 通常用来作为改版效果的整体评估，在使用时可以对题目的主词产品进行替换，这些替换对最后的测量结果都没有影响。
而QUIS 则可以说是SUS 的进阶版，会更注重具体页面或操作节点的易用性，通常作为SUS 的延伸使用。比较简单的QUIS 版本包括27 个问题，分为5个类别：
Overall Reaction 总体反应、Screen 屏幕、Terminology/System Information 术语/系统信息、Learning 学习、System Capability 系统能力
02 CSAT（ Customer Satisfaction客户满意度）、PSAT（ Purchase Satisfaction购买满意度）
客户满意度也算是经典的衡量指标之一了，随着商业竞争的激烈，各类型的产品与企业都对客户满意度更加重视，很多时候你所熟悉的电话满意调研、电子邮件调研，甚至直接在消费后的星级评分，其实都是关于这类问题的问券。
PSAT 则是在CSAT 的基础上，针对消费类型产品进行细化，强调售后使用体验的部分。这类问卷的好处是简单且扩展性强，可大至系统小至任务。
但缺点就是用户容易在中等范围内回答问题，无法给企业带来真实的反馈。而且，即使在客户满意度很高的情况下，依然有可能遭遇留存流失问题。
因为满意度并不直接与客户忠诚度相关联。
其他相关的系统性可用型指标当然还有许多，不过在工作流程中一般来说都较少会使用到，主要还是更具专业性的用研User Researcher 角色较常使用，包含：
01 PSM（Price Sensitivity Measurement 价格敏感度测试）
PSM 衡量目标用户对不同价格的满意及接受程度，了解其认为合适的产品价格，从而得到产品价格的可接受范围。
PSM 考虑了消费者的主观意愿，又兼顾了企业追求最大利益的需求。但测试过程主要基于目标对象的自然反应，没有涉及到任何竞争产品的信息。所以在横向拉通上显得较为薄弱。
也正因为缺少对于竞争产品的分析，所以PSM 目前主要集中在自成体系的产品链路中，用来配合Saas 服务或虚拟产品的定价，在实体产品中已经较少被使用。
02 DSR（店铺质量评分）
DSR 算是电子商务类产品中的特殊指标，初期是在在阿里巴巴的电商生态中大规模使用，目前也慢慢变成电商场景的通用指标。
DSR 是指买家在电商平台上购物成功后，针对本次购物给出的评价分数。买家可以评分的项目包括「描述相符、服务态度、发货速度、物流速度」4 项。
DSR 评分计算方法：每项店铺评分取连续6个月内买家给与该项评分的总和/连续6个月内买家给与该项评分的次数，统计最近180天
DSR 评分直接影响卖家在电商平台中，商品搜索曝光权重的高低，从而影响商品与店铺的排名。因此对于平台类的UX Design Team 来说，建立类似DSR 的曝光评分机制，也是间接影响服务提供商的产品体验，进而提升整体平台中的用户体验质量。
03 ZMOT（Zero Moment Of Truth第零关键时刻）、FMOT（First Moment Of Truth第一关键时刻）、SMOT（Second Moment Of Truth第二关键时刻）
FMOT & SMOT 是目前新零售场景常会提到的指标模型，但其实在传统的零售行业早就是一个通用的衡量指标，FMOT 指的是消费者在接触到对应商品货价的关键3~7 秒，所有的商品售价、包装、摆设都是在这关键3~7 影响消费者拿取商品甚至购买的关键因素。
而SMOT 则是指这类实体产品，在消费者购买回家后的首次体验，是否符合这个商品的广告语，对于一个品牌来说，即是是否成功地履行了它的承诺还是令人感到失望，这也是消费者是否会成为一个品牌的粉丝，甚至在线上或线下渠道分享的关键（是否很像NPS 的精神？）。
延伸出的ZMOT，即是线上线下结合的新零售关键指标，让消费者在「尚未接触」到特定商品前，就透过线上向消费者进行行销，当消费者主动进行相似活动、搜索时，就能接收到产品的正面讯息来影响消费意向。
本质核心也就是
当广告出现在用户需要的时刻，就变成了服务
ZMOT & FMOT & SMOT
用户体验的主观评估，大多是偏观察式的方法，也是大家比较耳熟能详的用定性调研法，比如眼动仪、观察法、品牌问卷… etc.。
当然如果要尽可能尝试量化这类User Attitude 主观评估数据时，前提都是把用户体验理解成两种维度，一种维度是实用性（Pragmatic）偏向常说的可用性，另一种是享乐性（Hedonic）也就是常说的舒适性，享乐性维度还会被拆分成了几种属性，例如Stimulation和Identification。
01 UEQ（User Experience Questionnaire 用户体验调查表）
UEQ 是SAP 开发的一套定量分析用户体验的工具。用户在问卷上表达出他们在使用产品和服务中的感受，印象和态度，然后生成一个包含用户体验数个方面的量化表。包括传统的易用性方面的指标：
也包括三个体验方便的指标：
02 HQ（Hedonic Quality享受性质量）、PQ（Pragmatic Quality实用性质量）& AttrakDiff
HQ 主要是用来消费型产品的情感衡量指标，较常使用消费者对于消费类型产品的评价。而PQ 则主要是在易用性层面上加入主观因素的评分，如果要针对性地对HQ & PQ 进行系统性评分，AttrakDiff 则是一个较常使用的工具。
AttrakDiff 包含了28 项题目，每一项都是一个7 分制量表，分和最高分代表一对具有评价性质的反义词，用户需要根据使用产品过程中的某一方面的体验从低到高进行评分，比如“混乱的— — 清晰的”，分数越高，表明产品的某一方面设计得越清晰。
在产品或业务中导入体验数据衡量指标，不是新入行的设计师想像的这么简单。真正的实务过程绝不是将文章中的指标，直接导入自己对接的产品中，每一个数据指标都有其目的，且不同的人即便看到的数据相同，也都会有自己的解读方式。
过于依赖指标，如果不随时依据市场动态与公司策略进行调整，不仅容易因为短期的良好数据忽视了中长期的产品成长，也会慢慢的丧失设计师的感性创意能力。
所以，清楚的认知到哪个指标可以帮助我进行什么样的设计策略。才是真正的使用方式。千万别让设计师变成动作导向的工作职位，
Value-Driven 价值导向的工作模式，才是设计师的生存法则
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
很多设计师和产品经理在刚入门时，都会对一些数据指标很模糊（这些花花绿绿的是啥玩意儿）。尤其是与产品团队和运营扯需求、与开发谈指标、谈实现等场景，数据指标就更为常见。假如我们对指标不了解、没有概念，则会被多方质疑你的专业能力，同时你也无法提升“数据驱动业务、数据驱动产品、数据驱动设计”的核心能力。
关注数据指标，不仅仅是产品经理或运营的“专利”，作为交互和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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com