如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
情感化在我们的决策过程中起着至关重要的作用。一秒钟的情感交互可以改变人对产品的整体体验
人类是一种情绪驱动的物种;我们选择某些产品并不是因为它们有意义，而是我们认为它们会给我们带来什么样的感受。未来的界面将在产品设计的基础上使用情感化的概念。人们使用的经验将基于智商（IQ）和情商（EQ）。
本文试图展望未来，看看我们将在未来的十年内设计什么样的界面。我们将仔细研究三种交互媒介：
01、语音
02、增强现实（AR）
03、虚拟现实（VR）
未来情感化界面的实例
将来的界面会是什么样子？尽管我们还没有这个问题的答案，但是我们可以讨论界面可能具有的特性。在我看来，我相信我们最终会远离那些充满菜单、面板、按钮的界面，而转向更“自然的界面”，即扩展我们身体的界面。未来的界面不会锁定在物理屏幕上，而是使用整个五官感觉的力量。
因此，他们需要的学习成本更少——理想情况下，根本没有学习成本。
情商在商业中的重要性
除了让体验更加自然和减少学习成本外，情感化设计还为产品创造者带来了另一个好处：它提高了用户对产品的使用率。合理的利用人类对情感的行动能力来创造更好的用户参与度。
体会真实的语音界面
现在，以语音为主要界面的产品越来越受欢迎。我们当中的许多人在使用亚马逊Echo和苹果Siri进行日常活动，如设置闹钟或预约等。但目前市场上的大多数语音交互系统仍有一个与生俱来的限制：他们没有考虑用户的感受，因此，当用户现在与谷歌这样的产品交互时，他们会有很强的与机器交流的意识，并非是真正的人类。系统可预测地响应，并编写响应脚本。与这样一个系统进行有意义的对话是不可能的。
但是如今市场上有一些完全不同的系统。其中一个是社交聊天机器人应用程序Xiaoice。这个应用程序的核心是一个情感计算框架；这个应用程序是建立在这样一个理念之上的，即首先要与用户建立情感联系。Xiaoice能够动态地识别情绪，并通过长时间的对话和相关的回应吸引用户。因此，当用户与Xiaoice互动时，他们会觉得自己在和一个真正的人交谈。
许多人在电影《她》（2013）中看到了基于语音的互动影响力。Theodore ( Joaquin Phoenix 主要角色) 爱上了一个 Samantha (一个复杂的操作系统)。这也使我们相信，未来基于语音的交互系统，主要目的之一将是为用户提供虚拟伴侣。这部电影最有趣的是 Theodore 没有 Samantha 的视觉形象——他只有她的声音。要建立这种亲密关系，就必须产生反映一致个性的回应。这将使系统具有可预测性和可信赖性。
虽然技术离Samantha这样的操作系统还很遥远，但我相信语音优先的多模式界面将是语音支持界面发展的下一篇章。这些界面将使用语音作为主要的交互方式，并在创建和构建连接感的上下文中提供附加信息。
为Brain.ai设计的语音界面示例（图片来源：Gleb Kuznetsov）
AR体验的演变
增强现实（AR）被定义为现实世界之上的数字覆盖，并将我们周围的物体转化为交互式数字体验。我们的环境变得更加“智能化”，用户的手指尖上会出现“有形”物体的错觉，这样就在用户和产品（或内容）之间建立了更深层次的联系。
使用AR重新定义现有概念
AR的独特之处在于它为我们提供了与数字内容进行物理交互的非凡能力。它可以帮助我们看到以前无法看到的东西，这有助于我们了解更多关于周围环境的信息。AR属性有利于帮助设计人员使用熟悉的理念创造新的的层次体验。
例如，通过使用移动AR，可以打造一个新的飞行体验感受，允许乘客查看有关其它班机或当前航班飞行进度的详细信息：
AR在空中客车A380的飞行体验中。（图片来源：Gleb Kuznetsov）
AR帮助我们在空间中找到自己的路，并让我们一目了然地获得所需的信息。例如，AR可用于为当前位置创建丰富的上下文提示。被称为SLAM（同步定位和映射）的技术非常适合这种场景。SLAM允许对环境进行实时映射，还可以将多媒体内容放入环境中。
为用户提供价值的机会有很多。例如，用户可以将他们的设备指向建筑，并在屏幕上了解更多关于这个建筑的信息。它能够显著的减少工作量，并通过允许导航和访问实现轻松的情感体验。
在上下文中提供其他信息（图片来源：Gleb Kuznetsov）
我们周围的环境（如墙壁或地板）可以变成一个可交互的场景，这种方式在过去仅限于我们的智能手机和电脑。
你在下面看到的概念设计就是这样的；它使用物理对象（白墙）作为通常使用数字设备传送的内容的画布：
交互式墙的概念 - 在现实世界之上的数字覆盖。（图片来源：Gleb Kuznetsov）
避免信息过载
许多人都看过一个叫做“超现实”的视频。在这段视频中，物理世界和数字世界已经融合，用户被大量信息所淹没。技术允许我们同时显示几个不同的对象。如果使用不当，很容易造成过载。信息过载是一个严重的问题，它会对用户体验产生负面影响，避免信息过载将是AR设计的目标之一。精心设计的应用程序将会过滤掉那些与使用人工智能的用户不相关的内容。
高级个性化
当系统实时地根据用户的需求和期望来调整内容或功能时，就会发生数字体验的个性化。现在许多移动应用和网站使用个性化的概念来提供相关内容。例如，当你访问Netflix时，你看到的电影列表会根据你的兴趣进行个性化设置。
AR眼镜允许创造一种新的个性化水平，即“高级”的个性化水平。由于系统“看到”了用户看到的内容，因此可以利用这些信息提出相关建议或在上下文中提供其他信息。试想一下，你很快就会戴上AR眼镜，传输到视网膜的信息将根据你的需要进行调整。
从增强现实走向虚拟现实，创造沉浸式体验
AR体验具有自然的局限性。作为用户，我们在内容和内容之间有明确的界限; 这条线将一个世界（AR）与另一个世界（现实世界）分开。这条线让人感觉到AR世界显然是不真实的。
你可能知道该如何解决这个限制，例如虚拟现实（VR），当然。虚拟现实并不是一种全新的媒介，但直到最近几年，技术才达到让设计师创造沉浸式体验的程度。
沉浸式VR体验消除了现实世界与数字之间的障碍。当你戴上VR耳机时，你的大脑很难处理你收到的信息是否真实。
以下是设计人员在创建沉浸式虚拟环境时需要记住的内容：
01、写一个故事
有意义的VR需要有一个强有力的故事核心。这就是为什么在你开始设计VR环境之前，你需要为用户旅程写一个故事。一个被称为“故事板”的强大工具可以帮助你做到这一点。使用故事板，可以创建故事并检查所有可能的结果。当你审视你的故事时，你将看到何时以及如何使用视觉和音频提示来创造一种沉浸式的体验。
02、与角色建立更深层次的连接
为了让用户相信虚拟现实中他们周围的一切都是真实的，我们需要与用户扮演的角色建立联系。最明显的解决方案之一是在虚拟场景中包含用户手的表示。这个表示应该是实际的手-而不仅仅是一个假造的复制品。考虑不同的因素（如性别或肤色）是至关重要的，因为这会使互动更加现实。
用户可以看到他或她的手，看他们看起来像一个角色。（来源：leapmotion）
也可以将现实生活中的一些对象带到虚拟现实环境中，以创建这种连接。例如，一面镜子。当用户查看镜像并在反射中看到其角色时，它可以在用户和虚拟角色之间实现更真实的交互。
虚拟现实用户会查看虚拟镜像并将自己视为VR环境中的角色。
03、使用手势而不是菜单
在设计沉浸式虚拟现实体验时，我们不能依赖与传统的菜单和按钮形式。为什么呢？因为显示菜单相对容易打破沉浸感。用户将会知道他们周围的一切都不是真实的。设计师不需要使用传统的菜单形式，而是需要依赖手势。设计界仍在为使用手势定义一种通用语言的过程中，参加这项活动是有趣和令人兴奋的。棘手的部分是让用户熟悉和可预测的手势。
试图将现有的交互概念重用于VR体验。不幸的是，这个概念会打破沉浸感。新媒体需要新的互动模式。
04、与VR环境中的元素交互
要创建一个感觉真实的环境，我们需要让用户能够与现实中的对象交互。理想情况下，环境中的所有对象都可以设计成允许用户触摸和查看它们的方式。这样的物体会起到刺激作用，帮助你创造一种更沉浸的体验。触摸对于探索环境极其重要；婴儿在最初几天获得的最重要信息是通过触摸获得的。
05、在虚拟现实中分享情感
虚拟现实有机会成为一种新的社会体验。但要做到这一点，我们需要解决一个重要的问题，即，把非言语的暗示带入交互中。
当我们与他人互动时，我们获得的信息中的一个重要部分来自肢体语言。惊奇、厌恶、愤怒——所有这些情绪都存在于我们的面部表情中，在面对面的交流中，我们从眼睛区域推断信息。当人们在虚拟现实环境中交互时，提供这些信息是很重要的，以此来创建更真实的交互。
好消息是，头戴式设备（HMD）将很快覆盖情感识别。在虚拟现实中，几乎任何人与人之间的互动都会从面部表情中受益。
06、为VR环境设计声音和音乐适合
音频是沉浸式体验的重要组成部分。如果不为环境设计声音，就不可能创造真正的沉浸式体验。声音既可以用作背景元素（即周围风的声音）也可以用作方向。在后一种情况下，声音可以作为提示-通过播放方向性（声音来自何处）和距离（用户可以将注意力集中在特定元素上）。
在为虚拟现实设计音频时，最重要的是使声音成为3D。2D声音对虚拟现实来说不太好，因为它会使一切变得过于平坦。三维声音是你可以听到的声音，在你周围的每个方向-前面，后面，上面和后面-所有的地方。您不需要专门的耳机来体验3D声音；可以使用HMD的标准立体声扬声器来创建它。
头部跟踪是良好声音设计的另一个关键方面。让声音以现实的方式表现是至关重要的。这就是为什么当用户移动头部时，声音应该根据头部移动而变化。
结论
当我们考虑到产品设计的现代状态时，很明显我们只是处于冰山一角，因为我们非常局限于平板电脑。
我们见证了人机交互（HCI）的根本转变——重新思考数字体验的整个概念。在未来的十年里，设计师们将打破玻璃（我们今天所熟知的移动设备时代），转而使用未来的接口——复杂的语音接口、先进的ARS和真正的沉浸式VRS。当我们要创造一种新的体验时，我们必须明白，我们唯一的界限就是我们的大脑告诉我们，它必须一直是怎样的。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
这是一个移动端的时代，Twitter 的移动客户端经历了很多版本的迭代，但是桌面端的更新改版则非常的克制。一周之前，Twitter 将接近7年未曾大幅度改版的桌面端页面，从里到外重新翻新了设计。
新浪微博的每一次小幅度调整都会带来大量的吐槽和不适，更不用说像Twitter 这样的世界级的社交媒体网站。用户的不适应不理解和负面反馈是避免不了，这样的大幅更新改版背后，有着这个平台不得不做的理由。
最近 Twitter 新版背后的设计师接受了连线杂志的采访，深入地聊了一下改版背后的考量。
设计技术和工具的快速发展，视觉设计本身，尤其是 UI 界面的很多具体的执行端的工作慢慢的没有那么麻烦了，但是找到为什么这么设计的设计决策，并不是那么简单。
在整体视觉风格上，Twitter 桌面端的设计给人的整体感知是更加现代的——并且和移动端版本的设计靠近且保持了一致。这绝对是一个以数字产品为核心的科技公司应该做到的最基本的事情。
原本置于顶部的导航栏消失了，功能性更强的左侧边栏承载了主要的导航功能。
其中，原本被隐藏的「书签（bookmarks）」和「列表（LIsts）」是非常实用的内容管理功能，在这次改版的时候被直接显示在侧边栏当中。
而更重要的改变在于，关于当下正在发生的热门事件，单独占据了右侧的侧边栏「Trends for you」，大家正在热烈讨论的热门事件以Twitter 中标志性的标签（Hashtags）的形式呈现，相当于微博中的「热门微博」。而这在老版的 Twitter 中，这类内容的存在感并没有那么强烈，原本存在于第一屏的左侧侧边栏中，并且只有标签，除非你有意识地去关注和点击，否则很容易错过。
搜索栏同样被挪到了右侧边栏，置于「热门趋势」内容的顶部。这一设计巧妙的地方在于，它暗示了内容呈现的逻辑：当你搜索内容的时候，搜索结果会直接覆盖在右侧，而不会占据中间的主要的信息流。
毫无疑问，新版的 Twitter 在布局上更加扁平了，但是信息的扁平化呈现还不止布局上，交互上也相应的变化。在老版的 Twitter 中，当你点击具体的推文条目的时候，内容会以弹出框的形式呈现，但是新版中则会在当前层中直接扩展开显示，不会弹出，整体的融合感和有机感会更强。
老版 Twitter 中推文弹出框
新版 Twitter 中的界面
同样的，用户在回复、转推和点赞的时候，也不用在不同的弹出框模式下进行，而是更加直觉地在当前的页面中完成，整体感更强，更加直觉。
用户交互频次相对较高的转赞评和「热门」和主要信息流都不会在弹出框和叠加层控件中完成了，主要信息流也不会被因此而覆盖，整个 Twitter 因此显得更加敞亮开阔。
另外一方面，新版 Twitter 提供了更加丰富的个性化设计的体验，这也是对于 Twitter 用户体验的一次重要提升：
虽然在之前老版的 Twitter 中也可以定制字体大小色彩，但是之前的字体大小是纯粹的随意设置，这种自由度让很多并不熟悉的用户难以控制好文本和色彩的对比度，从而造成了整体视觉的愉悦度较低的情况。
新版中的配色和字体大小都是经过调校之后，比较合理的选择，这样拥有了足够的选择空间，又保持了整体视觉体验上的愉悦性的设计。在产品颗粒度的控制上，Twitter 有着一套成熟精准的设计方案。
与此同时，所有人都期待的，深色模式，同样随着这次页面重设计，一并打包更新了：
对于深色模式的控制，Twitter 和和其他的平台略有一点不同，他们所设计的深色模式包括「昏暗（Dim）」和「熄灯（Light out）」两种，前者的背景色是深灰，而后者则几乎是全黑。
任何一个社交媒体平台，大量的用户涌入进来之后都会面临着复杂的管控问题，更不用说 Twitter 这个已经存在了13年的世界性的平台。许多状况不可能简单的一刀切来解决。
作为平台，Twitter 已经在竭力推动「健康的对话」，但是在充满分歧和对抗的网络当中，情绪化是常态，简单的依靠 Twitter 官方的帐号来发声，并不足以覆盖如此广泛的垂直领域和复杂多样的用户群体，以及不同的国家和地区。
「我们以前经常会推出一些新的设计和小功能。上线之后，过一阵子我们再搜出来，用投影仪投到墙上重新审视，」Twitter 的联合创始人 Biz Stone 说：「然后我们会觉得，好像不应该这么设计。」
「我们的目的是为公众的对话来服务的。但是目标明确之后，还需要问一个问题：我们真的够好吗？」Biz Stone 在采访的时候，这么说道。正是在这样一个问题促使之下，Twitter 的改版重设计就悄然推动起来了。
从左到右分别为 Biz Stone，Bryan Haggerty 和 Mike Kruzeniski 。图片来自 Wired，摄影师：Samantha Cooper
Twitter 团队对此选择了谨慎行事。他们选择了类似灰度测试的方法，让不同的用户参与到不同的「测试」当中来，包括不同的书签模块的设计，不同的深色模式，不同的搜索模式，等等。绝大多数的设计都正面的，但是它们也并不是爆炸性的。
如今所呈现出来的新版页面当中，绝大多数的设计都克制而微妙，以往的很多功能都得到了简化。「我们正在试图寻找合适的机会，重新创造更加大胆的设计，但是它需要一个稳固的基础，所以我们打算从这一次的重设计开始，从我们最好的功能和服务开始。这就是基础。」Twitter 的高级产品设计总监 Mike Kruzeniski 面对连线杂志的采访，是这么解释他们设计的初衷。
所以，Twitter 的这次重设计只是一个开始。对于这个平台上大量的关于仇恨和骚扰相关的负面内容，清理起来并不是一套规则就可以全部解决的，而 Twitter 更倾向于人为来处理和干预，但是平台本身需要更好的支持这方面的功能。
在 Twitter 早期阶段，视觉设计并不是他们的重心。「我们只是尽全力地让产品具备可用性，」Stone 回忆当时的情况：「我们并没有试图让它看起来好看……我们只是努力让平台保持活力。」当时的 Twitter 整个团队大概只有30个人。
实际上，随着后面更加专业的 UI 设计师加入进来之后，整个团队的设计能力也越来越强。UI 界面是Twitter 和用户进行沟通的媒介。
虽然现在是移动端为主的时代，但是桌面端 Twitter 的重要性并没有弱化。Twitter 的网页重设计项目的负责人 Jesar Shah 说：「人们在桌面上大量使用 Twitter 来搜寻感兴趣的信息，跟他们息息相关的信息内容。」在页面的左侧，有一个快速的账户切换的功能，对于这一点，Shah 补充道：「围绕这个功能点，我们从全球不同的地方获得了反馈。比如日本就是Twitter 最大的市场之一，当地用户基于自己不同的兴趣点创建的账户，比如一个账户专门是关于美食的，一个是专门关于旅行的，还有一个则是给自己的宠物猫的。无论你使用哪个设备，都要能够快速便捷地切换帐号，这是我们这么长时间的调研中，听到最多的一个需求点。」
从左到右分别为 Ashlie Ford，Marina Zhao 和 Jesar Shah ，她们主导了这次 Twitter 的设计。
「我们需要确保整体体验足够优秀，所以原则上需要严谨。鉴于我们服务对象是全球客户，所以我们需要尽可能满足不同用户的诉求。」Shah 和 Ford 所带领的团队专门创建了一份调查问卷，以获取反馈。他收到了来自全球总计20万份问卷，Ford 的团队花了整整一周的时间，借助翻译工具将其中来自非英语国家的问卷都翻译出来，并且梳理汇总了。
「用户肯定会以为我们不会仔细阅读这些问卷，但其实我们都仔细阅读过了。」Shah 说道。她阅读到的第一个用户需求反馈就是想要更多的表情符，为了应对这样的需求，Twitter 制作了一个分组表情输入控件。同时，他们还提供另一个不断更新的热门 Gif 图片表情合集，非常贴合用户需求了。
Twitter 已经 13岁了。
在 这个社交媒体平台上，@realDonaldTrump 可以进行「Twitter 治国」，还有大量的流言和不真实的信息，骚扰和不够人性化的内容。这都是客观存在的，亟待解决。在今年年初的时候，策展人 Chris Anderson 将 Twitter 比作是正在撞向冰山的泰坦尼克号。的确如此。
但是，设计改变不了一切。Twitter 的设计团队在接受采访的时候也坦诚地接受了这个事实。但是他们认为，设计可以帮助他们界定和构建 Twitter 功能，并且逐步地帮助用户来解决身份认同的问题。
「如果你在 Twitter 上问一个用户，Twitter 是什么，你会得到一千个答案。」Kruzeniski 说：「曾经我们认为这样很糟糕，但是现在我认为这是一个很棒的事情。因为现在我们可以更好地帮你找到特定的兴趣，并且和你的兴趣、你所关注的主题连接到一起。」
曾经的推特是一个铺满木地板，到处都是品牌标志性蓝色的「鸟笼」式的建筑，但是如今重新装修过的办公室则更加现代，墙壁上到处是各种各样的涂鸦，这些涂鸦代表着Twitter 这个平台内的各种垂直社区，比如 Black Twitter、NBA Twitter，以及各路名人的粉丝社区。
走过Twitter 的办公室，你会清晰地收到这样的一个信息：一切都是关于人的，而不是产品。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
多参数柯里
原生bind
实现promise
防抖节流函数
多参数柯里化
参数fn可以是function(a,b,c){}，也可以是function(a,b,c,d,f){}
// 支持多参数传递
function progressCurrying(fn, args) {
var _this = this
var len = fn.length;
var args = args || [];
return function() {
var _args = Array.prototype.slice.call(arguments).concat(args);
// 如果参数个数小于最初的fn.length，则递归调用，继续收集参数
if (_args.length < len) {
return progressCurrying.call(_this, fn, _args);
}
// 参数收集完毕，则执行fn
return fn.apply(this, _args);
}
}
原生js实现bind
Function.prototype.myBind = function(Othis){
if(typeof this !== "function"){
return new TypeError("not a function");
}
let _this = this;
let args = [...arguments].slice(1);
let func = function(){};
let fBound = function () {
return _this.apply(this instanceof func ?this:Othis,[...arguments].concat(args));
}
func.prototype = _this.prototype;
fBound.prototype = new func();
return fBound;
}
防抖函数
//每wait时间内执行一次，若期间被触发，则重新执行
function debounce(func,wait) {
var timeout ;
return function(){
let args = [...arguments];
let _this = this;
if(timeout){
clearTimeout(timeout);
}
timeout = setTimeout(function() {
func.apply(_this,args);
}, wait);
}
}
节流函数
//每wait时间执行一次
function throttle(func,wait){
var timeStart = 0 ;
return function(){
let _this = this;
let args = [...arguments];
let now = Date().now();
if(now - timeStart >wait){
func.apply(_this,args);
timeStart = now;
}
}
}
实现一个promise
function _Promise(func){
this.status = 'pending'
this.result = '' ;
func(this.resolve.bind(this),this.reject.bind(this));
}
_Promise.prototype.resolve = function(result){
if(this.status == 'pending'){
this.status = 'fullfilled';
this.result = result;
}
}
_Promise.prototype.reject = function(error){
if(this.status == 'pending'){
this.status = 'rejected';
this.result = error;
}
}
_Promise.prototype.then = function(preResolve,preReject){
let _isPromise ;
if(this.status == 'fullfilled'){
_isPromise = preResolve(this.result);
}else if(this.status == 'rejected' && arguments[1]){
_isPromise = preReject(this.result);
}
return _isPromise instanceof _Promise ? _isPromise:this;
}
实现一个promise.all()
function promiseAll(promiseArray){
//首先参数一定是一个数组
//然后此函数返回的是一个promise,如果全部成功，则返回结果的数组，只要有一个失败，则返回失败的结果
return new Promise(function (resolve,reject){
if(!Array.isArray(promiseArray)){
return reject(new TypeError("not a function"));
}
let resolveNum = 0;
let arrNum = promiseArray.length;
let resolveResult = [];
for(let i=0; i<arrNum ;i++){
(function (i){
Promise.resolve(promiseArray[i]).then(function(result){
resolveNum ++;
resolveResult.push(result);
if(resolveNum == arrNum){
return resolve(resolveResult);
}
},function(error){
return reject(error);
})
})(i);
}
}) //返回的promise结束
}
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
减少页面加载时间的方法：
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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com