如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

本文是我学习Material Design设计规范的学习笔记和个人理解，希望对大家设计暗色主题有所帮助。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

中后台很难设计吗？需求PRD看不懂？或许看完这篇文章后，会有新的体会

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

文章从项目流程的各阶段来讲解UI设计师应该做些什么，如何做才能把自己的价值在项目中体现出最大化！

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

人类是一种情绪驱动的物种;我们选择某些产品并不是因为它们有意义，而是我们认为它们会给我们带来什么样的感受。未来的界面将在产品设计的基础上使用情感化的概念。人们使用的经验将基于智商（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 将接近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 以前写过的一篇古早文。

1、关于数据指标与衡量的常见迷思

01 数据指标的使用，不符合GSM 原则

当有一定的用户后，结合常见的数据分析工具或内部团队自建的数据埋点，网站和应用马上就能出现许多可供分析的数据，似乎只要有这些数据，令人惊喜的洞察就会自动浮出水面。

GSM（Goal-Signal-Metrics）是Google 提出的目标导向衡量模型，用来拆解用户使用产品时的设计目标-行为信号-衡量指标的一种模式。

Google GSM Framework, Goal-Signal-Metrics

在商业场景中，所有的数据衡量必定带有明确的目标，比如：透过观察宽口转化和窄口转化，分析广告投放效益以及GMV 成本。甚至，如果仅基于这些观察数据进行动作性的优化，没有配合中长期的决策时，变化仅会流于短期效益。

02 显而易见的数据指标，不代表就是有帮助的

一个数据指标容易监测与计算，并不意味着它对你的产品来说就是重要的。透过现在大部分的分析工具，可以很容易就监测跟踪成百上千的各种指标，而且分析的工具也层出不穷。新产品团队往往因为能获取大量的数据，然后就期望洞察自动出现，但往往不遂人意。

例如，网页或App 的PV 数据很容易收集，但如果你的网页或产品是属于内容消费类型的，它就无法呈现用户是否在你的网站消费内容（有效时长更具代表性）。高的PV 或许是由市场广告转化过来的用户，但对内容消费类的产品目标，肯定不是确定每个用户到底浏览了多少页面，PV 可能是衡量广告效果的重要度量，但它并不是监测用户参与度的良好方式。

如果你不确定你正在用的数据指标，是否有正向帮助的话。可以参考AARRR 的转化模型，来帮助自己梳理清楚核心的转化链路。

03 单一的数据指标，对于效果衡量可能是模糊的

如上面所说相较于PV、UV、DAU，用户在网站或应用中的有效停留时长，可能更适合用来衡量用户在产品中的参与度。

但停留时间越长可能是正面的，也可能是负面的。在电商产品类的转化过程中，如果在关键的转化节点用户停留较久，可能意味着用户因困惑、分心或挫败而花费了大量时间。即便同时监测网站或应用的停留时长和转化率，你可能仍然不清楚为什么用户参与度如此高，对于最后的成交却没有太大帮助。

这时就需要透过配合更细致的数据指标组合，慢慢的定位用户在操作步骤中的关键问题，并尝试透过A/B Testing 来解决。

04 正确的衡量指标，要依产品、企业本身而制定

大家常用的数据指标，并不一定适合自己当前产品阶段或企业目标。

正常而言企业的主力产品，正是代表着企业主要的商业营利模式，因此在发布产品后要监测的各种衡量指标，通常在产品准备进入市场前，都已依照商业模式进行拆分。但在产品的冷启动时期，这些依商业模式拆分的指标，很多时候无法反映出，企业的产品是否正在往好的方向成长。

比如Saas服务类型的产品，通常都会使用净收入留存NDRR （Net Dollar Retention Rate）作为主要的商业模式指标，但在前期用户量少时，搭配NPS或PSAT等类型的指标，才能够好的回归到Saas产品的服务体验本质。了解企业目前提供的服务，对用户来说是否是正向的，并且能持续增长。

05 大多时候，衡量指标并不会纯粹与设计相关

在产品开发迭代中发布新功能后，数据可能会开始上升。产品团队可能认为这是新功能的发布造成的，但销售部分却可能会将它与一项新的促销活动联系起来，而UX 团队则可能认为这与他们的新设计相关。

这种场景在产品的数据到达一定规模时十分常见。真实情况是只能透过控制一些固定因子，来做更细部的A/B Testing 拆分。但大多时候产品的迭代时间与开发资源，很难真正做到能明确确认是因为什么原因。

因此结合前面所说的，各团队在主要的数据指标中，配合其他辅助指标，甚至提取更与团队紧密相关的个别指标，来了解在产品的迭代过程中，各自团队做的决策是否是正向的。

用户体验指标，跟易用性和商业指标目的不同

下面就会介绍几种工作中常用的，与体验相关的衡量指标，部分指标在订定的一开始，本身即包涵了商业与体验维度。

2、工作中可能用到的几种体验衡量指标

大部分的体验衡量指标，都会基于三个主要价值观，结合其他用户态度类型作为衡量基准。

1. 可用性
2. 参与度
3. 转化率＋ User Attitude

下面介绍几种，在工作中可能常用到的通用型，与不同业务场景型的体验衡量指标。

2.1 通用型

01 传统网站服务使用的PULSE

PULSE 是基于商业和技术的衡量模型，被很多组织和公司广泛应用于跟踪产品的整体表现。包含：

• Page view 页面浏览量
• Uptime 响应时间
• Latency 延迟
• Seven days active user 7天活跃用户数
• Earning 收益

但不难看出PULSE 指标仅覆盖了UX 设计中最最基础的可用性部分，和衡量用户体验的直接关系不大，难以评估设计工作到来的影响，毕竟这个指标创建之初是用来衡量产品的技术与商业效果。

因此为了弥补PULSE 指标中存在的问题，Google 提出了HEART 指标模型。HEART 是“以用户为中心度量的指标体系，以及把产品目标与创建指标体系相互关联的过程”

02 以使用者为中心的HEART

HEART其实也是业界使用的老黄历了，尤其常用GA ( Google Analytics ) / Adobe Omniture的人一定都对他不陌生。

早期产品开发上线的阶段，大多是订定业务KPI 作为衡量项目产出的价值，但在用户体验的部份，却很难有可视化以可及量化的衡量指标。因此Google 尝试把产品目标以及体验指标相互结合，建立以用户为中心的HEART 度量体系。

Google Heart 体验衡量指标模型

2.2 Saas 服务型

01 NPS（ Net Promoter Score净推荐值）

净推荐值最早是由贝恩咨询的创始人Fred Reichheld 在2003 提出，通过测量用户的推荐意愿，从而了解用户之于产品或服务的忠诚态度。

NPS 算是近几年用户体验领域上的当红指标（甚至业内还有所谓的NPS 教派XD），基本上互联网类产品都可以使用。其基本核心理念是，一个企业的用户可被划分为三类：推荐者、中立者和批评者。

1. 推荐者是投入且重复使用产品的用户，他们会热情地向其他人推荐你的产品或服务。
2. 被动者是对产品满意，但缺乏热情和忠诚度的用户，他们很容易转而投向使用竞争者的产品或服务。
3. 批评者是那些明显对企业的产品或服务不满意的那部分用户

相较于其他的指标，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 产品的客户至为重要，也能体现客户服务的绩效和表现，甚至深入到每个员工的层面上。

2.3 系统性评估型

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 角色较常使用，包含：

• SUMI（Software Usability Measurement Inventory 软件可用性测试）
• CSUQ（Computer System questionnaire 计算机系统可用性测试
• USE （Usefulness, Satisfaction, and Ease of Use 有用性、满意度、易用性）

2.4 电商产品型

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

2.5 主观评估型

用户体验的主观评估，大多是偏观察式的方法，也是大家比较耳熟能详的用定性调研法，比如眼动仪、观察法、品牌问卷… etc.。

当然如果要尽可能尝试量化这类User Attitude 主观评估数据时，前提都是把用户体验理解成两种维度，一种维度是实用性（Pragmatic）偏向常说的可用性，另一种是享乐性（Hedonic）也就是常说的舒适性，享乐性维度还会被拆分成了几种属性，例如Stimulation和Identification。

01 UEQ（User Experience Questionnaire 用户体验调查表）

UEQ 是SAP 开发的一套定量分析用户体验的工具。用户在问卷上表达出他们在使用产品和服务中的感受，印象和态度，然后生成一个包含用户体验数个方面的量化表。包括传统的易用性方面的指标：

• Efficiency
• Perspicuity 易懂
• Dependability 可信任

也包括三个体验方便的指标：

• Attractiveness 吸引度
• Stimulation 激励性
• Novelty 新鲜度

02 HQ（Hedonic Quality享受性质量）、PQ（Pragmatic Quality实用性质量）& AttrakDiff

HQ 主要是用来消费型产品的情感衡量指标，较常使用消费者对于消费类型产品的评价。而PQ 则主要是在易用性层面上加入主观因素的评分，如果要针对性地对HQ & PQ 进行系统性评分，AttrakDiff 则是一个较常使用的工具。

AttrakDiff 包含了28 项题目，每一项都是一个7 分制量表，分和最高分代表一对具有评价性质的反义词，用户需要根据使用产品过程中的某一方面的体验从低到高进行评分，比如“混乱的— — 清晰的”，分数越高，表明产品的某一方面设计得越清晰。

3、写在最后

在产品或业务中导入体验数据衡量指标，不是新入行的设计师想像的这么简单。真正的实务过程绝不是将文章中的指标，直接导入自己对接的产品中，每一个数据指标都有其目的，且不同的人即便看到的数据相同，也都会有自己的解读方式。

过于依赖指标，如果不随时依据市场动态与公司策略进行调整，不仅容易因为短期的良好数据忽视了中长期的产品成长，也会慢慢的丧失设计师的感性创意能力。

所以，清楚的认知到哪个指标可以帮助我进行什么样的设计策略。才是真正的使用方式。千万别让设计师变成动作导向的工作职位，

Value-Driven 价值导向的工作模式，才是设计师的生存法则

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。