在与客户的沟通中，聆听了许多建议，学习到了很多知识，也收到过赞美与批评，在经过千锤百炼过后  总结了一点点经验

首先：

框架选择

    网站css框架选择（简洁，节约成本，快速开发）

    对于一些简单静态网站，展示类网站项目，达到快速开发建站，而又节约成本人力的情况下 选择一些用于css库的框架最为合适，

1.Bootstrap

        Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

        预处理工具  虽然可以直接使用 Bootstrap 提供的 CSS 样式表，但是不要忘记，Bootstrap 的源码是采用最流行的 CSS 预处理工具

        一个框架、多种设备。 你的网站和应用能在 Bootstrap 的帮助下通过同一份源码快速、有效地适配手机、平板和 PC 设备，这一切都是 CSS 媒体 查询（Media Query）的功劳。

功能完备  Bootstrap 提供了全面、美观的文档，你能在这里找到关于普通 HTML 元素、HTML 和 CSS 组件以及 jQuery 插件方面的所有详细文档。

Bootstrap 是最受欢迎的 CSS 框架，被认为是拥有最好的响应性的CSS框架。专为前端开发而设计，有助于构建web设计理念、移动优先项目、网格系统、排版和按钮等。

2.layui

开源模块化前端 UI 框架

开源模块化前端 UI 框架

      由职业前端倾情打造，面向全层次的前后端开发者，易上手开箱即用的 Web UI 组件库

Layui 是一款采用自身模块规范编写的情怀型前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。

   3.Semantic-UI

Semantic 是一个开发框架，可以使用人性化的 HTML 帮助创建漂亮的响应式布局。Semantic UI 旨在使网站构建过程更加语义化。核心特征是利用自然语言原理使代码更易于阅读，更容易理解。

4.Pure

Pure 非常轻量级，经过压缩后不过 3.8KB。这是一个特别为移动端考虑的框架，为了压缩大小，每一行代码都经过仔细考量。当然如果你不使用框架给出的全部模块，体量还可以更小。

5.Skeleton

Skeleton 如其名字，非常小巧，设计简约，麻雀虽小五脏俱全。网格系统，文本，表单，按钮，列表，表格，媒体查询等功能面面俱到。非常适合快速创建简约网站的需求。

快速搭建

为客户节省时间成本， 并满足客户快速建站的需求，开发过程中 使用到css模块化,html也应简洁实用。

手写源生 CSS

在我们最初学习写页面的时候，大家都学过怎么去写 css，也就以下几种情况：

• 行内样式，即直接在 html 中的 style 属性里编写 css 代码。
• 内嵌样式，即在 html h 中的 style 标签内编写 class，提供给当前页面使用。
• 导入样式，即在内联样式中 通过 @import 方法，导入其他样式，提供给当前页面使用。
• 外部样式，即使用 html 中的 link 标签，加载样式，提供给当前页面使用。

我们在不断摸索中，逐渐形成了以编写内嵌样式和外部样式为主要的编写习惯。

读到这里大家肯定有所疑问，为什么不建议使用行内样式？

使用行内样式的缺点

• 样式不能复用。
• 样式权重太高，样式不好覆盖。
• 表现层与结构层没有分离。
• 不能进行缓存，影响加载效率。

然后我们继续剖析一下，为什么不建议使用导入样式？

经测试，在 css 中使用 @import 会有以下两种情况：

1、在 IE6-8 下，@import 声明指向的样式表并不会与页面其他资源并发加载，而是等页面所有资源加载完成后才开始下载。

2、如果在 link 标签中去 @import 其他 css，页面会等到所有资源加载完成后，才开始解析 link 标签中 @import 的 css。

使用导入样式的缺点 - 导入样式，只能放在 style 标签的第一行，放其他行则会无效。 - @import 声明的样式表不能充分利用浏览器并发请求资源的行为，其加载行为往往会延后触发或被其他资源加载挂起。 - 由于 @import 样式表的延后加载，可能会导致页面样式闪烁。

使用预处理器 Sass/Less

随着时间的不断发展，我们逐渐发现，编写源生的 css 其实并不友好，例如：源生的 css 不支持变量，不支持嵌套，不支持父选择器等等，这些种种问题，催生出了像 sass/less 这样的预处理器。

预处理器主要是强化了 css 的语法，弥补了上文说了这些问题，但本质上，打包出来的结果和源生的 css 都是一样的，只是对开发者友好，写起来更顺滑。

后处理器 PostCSS

随着前端工程化的不断发展，越来越多的工具被前端大佬们开发出来，愿景是把所有的重复性的工作都交给机器去做，在 css 领域就产生了 postcss。

postcss 可以称作为 css 界的 babel，它的实现原理是通过 ast 去分析我们的 css 代码，然后将分析的结果进行处理，从而衍生出了许多种处理 css 的使用场景。

常用的 postcss 使用场景有：

• 配合 stylelint 校验 css 语法
• 自动增加浏览器前缀 autoprefixer
• 编译 css next 的语法

更多 postcss 使用场景

CSS 模块化迅速发展

随着 react、vue 等基于模块化的框架的普及使用，我们编写源生 css 的机会也越来越少。我们常常将页面拆分成许多个小组件，然后像搭积木一样将多个小组件组成最终呈现的页面。

但是我们知道，css 是根据类名去匹配元素的，如果有两个组件使用了一个相同的类名，后者就会把前者的样式给覆盖掉，看来解决样式命名的冲突是个大问题。

为了解决这个问题，产生出了 CSS 模块化的概念。

CSS 模块化定义

• 你是否为 class 命名而感到苦恼？
• 你是否有怕跟别人使用同样 class 名而感到担忧？
• 你是否因层级结构不清晰而感到烦躁？
• 你是否因代码难以复用而感到不爽？
• 你是否因为 common.css 的庞大而感到恐惧？

你如果遇到如上问题，那么就很有必要使用 css 模块化。

CSS 模块化的实现方式

BEM 命名规范

BEM 的意思就是块（block）、元素（element）、修饰符（modifier）。是由 Yandex 团队提出的一种前端命名方法论。这种巧妙的命名方法让你的 css 类对其他开发者来说更加透明而且更有意义。

BEM 的命名规范如下：

/* 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。 */ .block { } /* 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。 */ .block__element { } /* 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观 */ .block--modifier { }

通过 bem 的命名方式，可以让我们的 css 代码层次结构清晰，通过严格的命名也可以解决命名冲突的问题，但也不能完全避免，毕竟只是一个命名约束，不按规范写照样能运行。

CSS Modules

CSS Modules 指的是我们像 import js 一样去引入我们的 css 代码，代码中的每一个类名都是引入对象的一个属性，通过这种方式，即可在使用时明确指定所引用的 css 样式。

并且 CSS Modules 在打包的时候会自动将类名转换成 hash 值，完全杜绝 css 类名冲突的问题。

使用方式如下：

1、定义 css 文件。

.className { color: green; } /* 编写全局样式 */ :global(.className) { color: red; } /* 样式复用 */ .otherClassName { composes: className; color: yellow; } .otherClassName { composes: className from "./style.css"; }

2、在 js 模块中导入 css 文件。

import styles from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">'; 

3、配置 css-loader 打包。

CSS Modules 不能直接使用，而是需要进行打包，一般通过配置 css-loader 中的 modules 属性即可完成 css modules 的配置。

// webpack.config.js module.exports = { module: { rules: [ { test: /\.css$/, use:{ loader: 'css-loader', options: { modules: { // 自定义 hash 名称  localIdentName: '[path][name]__[local]--[hash:base64:5]', } } } ] } }; 

4、最终打包出来的 css 类名就是由一长串 hash 值生成。

._2DHwuiHWMnKTOYG45T0x34 { color: red; } ._10B-buq6_BEOTOl9urIjf8 { background-color: blue; }

CSS In JS

CSS in JS，意思就是使用 js 语言写 css，完全不需要些单独的 css 文件，所有的 css 代码全部放在组件内部，以实现 css 的模块化。

CSS in JS 其实是一种编写思想，目前已经有超过 40 多种方案的实现，最出名的是 styled-components。

使用方式如下：

import React from "react"; import styled from "styled-components"; // 创建一个带样式的 h1 标签 const Title = styled.h1`  font-size: 1.5em;  text-align: center;  color: palevioletred; `; // 创建一个带样式的 section 标签 const Wrapper = styled.section`  padding: 4em;  background: papayawhip; `; // 通过属性动态定义样式 const Button = styled.button`  background: ${props => (props.primary ? "palevioletred" : "white")};  color: ${props => (props.primary ? "white" : "palevioletred")};   font-size: 1em;  margin: 1em;  padding: 0.25em 1em;  border: 2px solid palevioletred;  border-radius: 3px; `; // 样式复用 const TomatoButton = styled(Button)`  color: tomato;  border-color: tomato; `; <Wrapper> <Title>Hello World, this is my first styled component!</Title> <Button primary>Primary</Button> </Wrapper>; 

可以看到，我们直接在 js 中编写 css，案例中在定义源生 html 时就创建好了样式，在使用的时候就可以渲染出带样式的组件了。

除此之外，还有其他比较出名的库：

• emotion
• radium
• glamorous

总结

最后放一张总结好的图。

下一篇我们讲一下主流js框架 与js开发

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

部分借鉴自：知乎 作者：孟思行

原文链接：

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

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

这篇文章很好，提供了一种“以用户为中心”把自己和项目组成员随时假定为一个用户的身份，去思考，提出一系列问题，把这些问题编号，去一一解决，注重用户体验，以此为基本框架，严格遵守，一旦设立不增加临时的多余的功能，不把没有用户故事的界面元素放在界面上，保证了精简的内容围绕确立的框架中，井井有条。这篇文章值得看十遍。

随着大数据的兴起，数据价值的不断挖掘，图表作为数据呈现与分析的有效手段，正扮演着越来越重要的角色。我们在进行B端平台设计时也在思考：如何让图表清晰的传达信息，同时带来美观的视觉感受。

为了达到清晰传达和视觉美观的目标，我们结合实际项目，进行大量探索及思考，梳理总结了一套适用于B端后台类产品的图表设计思路及方法，涵盖了曲线图、柱状图、饼图、雷达图、漏斗图等各类常用图表类型。

图表视觉层级

图表能够承载大量数据信息，同时视觉元素较多，如果只是凭借设计师的审美喜好进行视觉设计，没有整体信息读取考量，可能会导致重要信息未能凸显，降低用户读取效率。

为清晰传达信息，进一步提升读取效率，我们采用元素重要程度与视觉强度相绑定的方法。依据元素重要程度，将图表元素分为三类，分别为“底层元素”、“中层元素”和“顶层元素”，并依据不同视觉强度分别设计三类元素。底层元素最弱，顶层元素最强。通过这种方法，梳理图表元素的前后关系，能够清晰把握元素视觉层次，保证信息传递效率。

| 底层元素设计

在各类图表中，我们把辅助说明数据的轴线、刻度等定义为底层元素。为了减少视觉干扰，最大程度突出主图形，底层元素全部使用浅灰色进行设计。我们发现，当元素与背景颜色的明度对比在1.2:1时，人眼较难看到元素；当对比度在2.0:1时，视觉强度过强，易吸引用户注意力。通过元素视觉强度的调研及视觉尝试，最终确定元素与背景对比度在1.6:1左右，视觉强度偏弱但人眼能够看清的程度。以保证元素视觉不突兀，只在需要查看时可以被发现。

| 中层元素设计

中层元素的内容包括数据图形、数据线段等承载主要数据信息的元素，是图表中表达数据的关键元素。与底层元素相比，中层元素采用更低明度与更高饱和度的数据色来表现，使元素从页面中凸显出来，保证可读性。同时在样式上适当加入渐变、描边等样式，丰富视觉层次，带来美观的视觉感受。

| 顶层元素设计

我们把顶层元素定义为图表高亮信息，内容包括悬停样式、悬停后的详细数据说明等。在设计上为保证视觉样式突出，使用深灰色、强调色等强对比度样式，并辅以动画、投影等手法保证明显的视觉强调效果，保证顶层信息最有效的传达给用户。

| 最终效果

通过层级梳理，并绑定元素重要程度和视觉强度的方法，设计后图表主次信息均按重要程度进行对应视觉强度的展示，让用户能够在第一时间接收到最重要的信息，提升信息读取效率。

图表排版设计

图表排版是指各元素在图表中的尺寸及布局等，对于B端后台类产品来说，不同排版对用户使用体验造成较大影响。如何建立一套合理的规范保证用户的使用体验？我们经过大量讨论推敲，梳理出一套针对B端后台类产品的排版规则，力求保证用户图表的使用体验。

| 图表尺寸

图表尺寸指图表整体长宽高。在项目中我们发现不同尺寸的图表对数据展现效果影响巨大，例如巨量数据的图表挤在名片大小的区域例显示，这使得信息读取的效率大打折扣。为此我们收集并提取出“全貌概览”、“多角度环视”、“详情分析”三类典型场景，并制定了“迷你图”、“中号图表”、“大号图表”三类尺寸，针对不同尺寸优化图表的信息展示密度，以达到高效读取信息的目的。

“迷你图”尺寸最小，舍弃了Y轴等不必要信息，利用小面积展示最关键的图表信息，并控制数据密度，保证信息高效读取。

“中号图表”尺寸受限，限制坐标轴刻度数量和数据的密度，例如曲线图数据点不高于每4像素1个数据点，Y轴坐标刻度不超过5个，以确保信息密度不过载，这类图表尺寸通常用在针对某大类内容进行多方面检视时。

“大号图表”尺寸最大，不限制数据信息密度，给予最全最详细的展示，这类尺寸通常用在数据详情页等详细分析场景中。

最后考虑到多图表混合排列时，饼图、地图等大面积填色图表，相较折线图等描边型图表，视觉感受更加膨胀。我们缩小了填色类图表的实际高度，保证多种图表混合排列时，视觉感受的均衡。

| 坐标轴

坐标轴在图表中出现的频率较高，那么坐标轴常见的设计问题有哪些呢？

第一是横纵坐标轴的刻度出现过密情况。

如果坐标轴所承载的是连续数据（连续数据指可量化的，连续不断的，在区间内可任意取值的数据，如时间、金额、人数等），设计师可自行增减刻度数量以保证视觉舒适度。如果承载是离散数据（离散数据指不可量化的，无关联的，不可在区间内任意取值的数据，如分类、软件版本、省份等），可采取增加坐标轴缩放功能以解决.

第二个常见问题是刻度的说明文字过长。

如果是X轴（横轴）文字过长，除了在可控范围内减少刻度，还可采取文字倾斜45°~90°的办法(如文字全部为中文，可用竖排代替倾斜90°)，缓解信息过密看不清的情况。

如果是Y轴（纵轴）文字过长，需联合研发一起调整数据的单位，比如把“元”调整为“百万元”。

如果不能调整，那就要根据所使用的图表库有针对性调整。例如常用的Echarts图表、D3图表等开源图表库，需要提前预估刻度文字长度并预留出来，否则刻度文字可能会被页面裁掉而不能完全显示。如你是用的是AntV等可自适应的图表库，则不必提前处理，图表库会自动按刻度长度进行整体调整。

| 图例

图例作为图表中不可或缺的部分，在各类图表库中位置不尽相同，由于不同图表样式差异很大，图例的位置需整体考虑并适当布局摆放，但在同一产品或页面内，过于随意的摆放图例，会导致页面统一性较差，同时增加用户的浏览成本。我们团队所负责的B端商业产品矩阵，作为面向用户的产品集合，产品间联系非常紧密。过于灵活随意的图例摆放不利于用户对于图表的浏览。为解决此问题，我们基于业务特点，针对B端商业产品矩阵制定了图例布局指导原则。

我们以提升屏幕信息密度为目标，分析不同场景的页面排布，制定了顶部和右侧两种较为宽松的指导原则，供设计师在没有明确的更优方案时选用。

当图表是左右两端对齐的类型，例如折线图、柱状图时，建议将图例放置在图表顶部。这样能结合标题等其他元素进行统一排布，减少占用空间。当图表本身左右都有空余空间时，例如饼图，建议将图例放置于图表的右侧。也能够节省页面的空间。

数据色板设计

色板作为常见的数据表达手段，能够利用不同颜色明确体现分类信息、数值高度、状态信息等。但目前市面上鲜有专业用途图表的配色工具。我们经过大量探索尝试，梳理总结出图表色彩的两个关键维度：辨识度与统一性。既需要颜色间突出强烈可清晰辨别，又需要颜色整体能形成统一风格，以达到清晰传递和美观的目标。如何平衡辨识度与统一性，是我们遇到的难题。

| 辨识度

辨识度在图表中有两方面：颜色与页面底色的辨识度，各颜色之间的辨识度。对于第一种，我们采用控制颜色的明亮程度来确保色彩辨识度，尤其对于黄色、青色等本身较亮的颜色，降低颜色的明度，确保在浅色背景下颜色可辨识。

对于第二种也就是各颜色之间的辨识度，通过实验发现单纯的颜色色相变化，例如红色与橙色的区分，人眼不容易分辨。所以采用了色相变化+明度变化的方法，既深红色与亮橙色，深蓝色与亮紫色等，这样用户能在第一眼就明确分辨，保证颜色间的辨识度。最终把颜色映射到色彩空间的三维坐标中，运用欧几里得距离公式测算颜色间的距离长短，来衡量各颜色间色差数值。颜色间距离越远代表色差越大，利用数据辅助衡量辨识效果。

| 统一性

色彩统一性的作用在于确保图表整体风格一致，色彩搭配舒适，从而带来美观、统一的视觉感受。为达目的，我们首先提炼商业产品设计风格为明亮、强对比，其次把设计风格转化为色彩数值。经过实验，把颜色明度限制在50%-70%，把饱和度限制在75%-85%，并在区间内不断波动。这样既保证了色彩视觉感受的统一，各颜色间又能够有清晰的辨识度。

| 颜色量化与工具

量化颜色，将色彩转化为数值，利用数值来验证设计师的「感觉」，能够保证方案合理性，保证设计质量。但通过尝试，我们常用的色彩模式均不能科学合理的量化颜色。通过查阅大量资料，我们最终决定以小众的HCL色彩模式来衡量色彩。其中H表示色相、C表示饱和度、L表示明度。HCL区别于传统的RGB或HSB模式，它能够将人眼对颜色的感知精确的量化为数值，例如黄色相比蓝色明度更高，都能如实的反馈到数值上。也由于此特性，HCL模式在诞生距今不到20年间，已被一些先锋设计师用于数据可视化的呈现中。

但是HCL作为小众色彩模式，目前设计软件鲜有支持，造成了HCL色彩不直观、不方便调色等的问题。为解决此问题，我们已初步完成智能配色程序，只需输入品牌色，就能自动生成图表色版，并在风格上与品牌色匹配，达到整体色彩的统一。我们也将一套调配好的色板及HCL实用小工具附在文末，帮助大家直观的查看和使用HCL模式颜色。 

结语

数据价值就像不为人知的宝藏，隐藏在一条条枯燥晦涩的数据背后。而图表则是开启宝藏的钥匙，是发掘数据价值的强有力武器。通过对图表的不断探索优化，我们希望能够最大化数据的价值。通过图表，让数据最直观的展现；通过图表，让其背后的规律浮出水面被人探知；通过图表，让B端不再有难懂的数据。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷  作者：百度MEUX

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

我们常说，现在是体验至上的时代，用户对产品的使用不再是单纯的需求满足，更要获得满意的体验。服务设计的发展为我们改善用户的体验提供了新的思路，从本质出发，任何产品都是在提供某种服务，服务的质量从根本上决定了用户的体验。

什么是服务设计

服务设计一直在我们的生活中，我们无时无刻不在体验着各式各样的服务。荷兰一家专业的服务设计机构31 Volts是这样描述服务设计的：“如果有两家紧挨着的咖啡店，出售同样价格的咖啡时，服务设计是让你走进其中一家而不是另一家的原因。”这个描述很生动，同时也说明了服务设计的作用。

其实服务设计的定义还有很多，行业内不同的专家和学者都有自己的理解和解读，不管定义如何，重要的是服务设计的思维方式，可以帮助我们从全局改善服务体验。

服务设计的原则及案例说明

2010年在《This is Service Design Thinking》一书中，作者首次提出了5个服务设计基本原则，这些原则之后也被广泛使用，但随着服务设计的不断发展，其中的一些原则也需要重新去审视和思考，因此在2017年作者将其更新修订为6项。

a.以人为中心(Human-centered)

以人为中心的设计理念在产品设计、交互设计等领域已经得到了广泛的应用，服务设计当然也没有例外，以人为中心就是要站在用户的角度上看待和思考问题，考虑所有被服务影响的人。

在日本，农产品市场存在这样一个问题，农产品批发商无法及时从种植者处了解农产品的相关状况、收获量等信息，因此他们也就无法与要购买农产品的人进行谈判，这样造成的结果可能是粮食的浪费。日本的一家软件公司NJC（Nippon Jimuki Co. Ltd.）发现了这一问题，他们希望利用自身能力（软件方面的优势）去解决这一问题，因此将目标设定为：创建一个可以提供有用数据而又不给农民或农产品批发商带来负担的系统。

最终的产出的结果是Fudoloop这个应用程序，通过Fudoloop，批发商可以提前一天从农民那里收到信息，进而协调买家的各种要求。Fudoloop的使用者分为两种，一种是需要更新农产品信息的农民，一种是从Fudoloop上获取农产品信息的批发商，Fudoloop分别为两种用户进行了设计。

图片来源：Fudoloop

在设计Fudoloop时存在这样一个问题，农产品市场中的相关从业人员普遍年龄较大、受教育程度低、软件使用经验很少，面对这样的用户，显然通常的软件设计并不符合他们的需求，因此Fudoloop的界面设计非常简单且信息突出，从事农产品相关工作的人员可以轻松的使用Fudoloop完成农产品信息的更新，而不会因为学习产生很大的压力。Fudoloop还在大型农业贸易展览会邀请了一些行业内的人员和用户参与到了产品的体验中，并收集了他们反馈的建议，以改善产品。

图片来源：IDEO

NJC在设计Fudoloop时充分坚持了以人为中心的原则，考虑到服务涉及的不同用户，并根据用户本身的特点和需求进行设计。NJC的CMO佐藤贤一是这样评价Fudoloop的：“当简单、以人为本的思想汇聚在一起时，创新就会发生”。

b.协作(Collaborative)

这条原则说的是，不同背景和职能的利益相关者应该参与到服务设计流程中，收集多方诉求，发现不同看待问题的角度，才会更好的解决问题。

在美国旧金山，有一所学校和Revolution Foods这家餐饮公司合作，为学校内的人员提供丰富的、营养的午餐，但是实际来餐厅就餐的人数与预期相差很大，数据显示，有72%可以承担起午餐费用的人并没有来到食堂吃午餐。经过调查发现其中的原因，很多学生等校内人员并不愿意排长队或者匆忙的吃完午餐，因此他们选择了去校外享受午餐的时间。

为了改善这种情况，这所学校请来了全球顶尖的设计咨询公司IDEO，他们与1300多名学生、父母、营养人员、董事会专员、校长、老师和社区团体等利益相关者一起工作，重新去设计了学校的午餐，并且制定了针对三种年龄的就餐体验的建议，完成了饮食、就餐空间、新技术使用等多方面的优化和设计。

图片来源：IDEO

最终，学校完美的改善了午餐服务的体验，这其中包含了所有利益相关者的想法和工作，因此设计成果也被人们所接受，越来越多的校内人员会选择学校的午餐，之后，这种设计模式也被旧金山的许多学校采纳和推出。

所以，服务中涉及到的利益相关者有很多，多收集他们的想法与建议，甚至让他们参与到服务设计中去，问题会得到更好的解决。

c.迭代(Iterative)

迭代是一个不断接受反馈不断优化的过程，如此重复执行，让产品变得越来越好。服务设计也需要迭代，不要避免犯错误，而是从错误中学习和改变，同时也要不断的收集各方的反馈信息，这些信息是服务进行迭代的核心所在。随着互联网的发展，迭代的思维早已渗透到每一个互联网产品，此处就不再过多解释。

d.有序(Sequential)

服务设计应该是一系列相互关联的活动，并且是按照顺序进行的，精准的把控服务每一个环节的节奏，用户才能获得更愉悦的体验。

以外卖为例，用户的使用过程包含订外卖时的商家选择到下单过程，下单后配送外卖，用户收到外卖和用餐后这几个过程，而服务的提供者主要包括商家、平台和外卖小哥，为了保证用户能够获得流畅的服务体验，需要各个服务提供者在服务展开的不同环节推出优质的服务，如下图。

在订外卖时，平台会为用户推出“超值优惠”“限时秒杀”等优惠活动，商家推荐、订单历史等商家选择渠道，以及不同的筛选条件，以上的目的都在于帮助用户快速找到自己期望的、合适的商家。在用户选定商家后，进入到选择商品并下单的过程，一方面，商家会推出优惠的活动、推荐菜品等，另一方面，平台也会给出自己的优惠。

下单后，用户面临的是一个配送过程中的等待时间，为了缓解用户在等待过程中的焦虑情绪，平台会及时更新和推送外卖小哥的状态，如到达商家、取餐中、与用户的距离等，同时会给出用户预期的送达时间，若超过预期时间用户还可进行催单，商家可以联系用户表达歉意，整个过程用户对配送状态是可视的。

用户收到外卖时首先会与外卖小哥接触，包括与外卖小哥提前确定取餐的时间地点，取外卖时的短暂对话等，这些都会影响用户对服务的印象，因此外卖小哥需要保证服务态度的礼貌和友好。收到外卖后，食品包装首先给到了用户对商家的第一印象，然后是餐品是否符合用户预期，让用户满意。

在用户就餐后，首先平台要提供给用户评价的功能，用户可以分享自己就餐的感受，商家也可以通过平台为用户提供更多的优惠，引导用户能够再次回到商家订餐。

从外卖的案例中我们可以看到，服务是一个过程，是需要有序展开的，每一个环节的体验都会影响到用户对服务的印象，在恰当的环节提供恰当的优质服务，才能确保用户的整体体验。

e.真实(Real)

服务本质上是无形的，应该用“物理元素”来可视化，这样可以用户的服务记忆，增强用户对他们所接受服务的感知。

同样以上述外卖为例，商家为用户提供餐食，这部分是借助美团这个平台和外卖小哥来完成的，用户和商家的接触仅仅是送达的餐食，因此无法通过像到店体验一样，让用户感知到商家提供的更多服务。

为了让服务变得更加“有形化”，商家就需要花费更多的心思，如图，商家为了增强用户对服务的感知，一般会在在包装上花费很多功夫，精致的包装让商家的形象更好且更加值得信任，一些有趣的包装还可能让用户的心情变得愉悦。另外，商家也可以通过一张便利贴的温馨问候或者赠送小礼品等方式让用户更真实的感受到服务，通过这样的手段，即使用户并没有真的接触到商家，体验也会变得很好，商家的形象也会提升很多。

图片来源：古田路9号

f.整体(Holistic)

整体就是要着眼于整个用户旅程，考虑用户与服务的每个触点（触点的概念后文会进行介绍），并兼顾多方利益相关者的需求。也就是所谓的全方位服务体验，考虑服务环境的方方面面，没有任何遗漏。这个原则实施起来并不是那么简单，从整体角度思考问题会使问题变得复杂。不过在服务设计中，是有一些方法和工具是可以帮助我们完成整体思考的，比如服务蓝图。

服务设计的常用方法-服务蓝图

a.服务蓝图简介

服务蓝图是一张图表，通过列出在每个阶段发生的、不同角色执行的所有活动，显示了服务的整个过程。如图所示是一个服务蓝图的简单示例，垂直方向上展示服务中的利益相关者，水平方向上为用户的历程，也就是用户经历的不同阶段。在服务蓝图中有两条线，一条是可见线（line of visibility），可见线上方为用户可与之交互的服务，也可以称之为“前台”，可见线下方代表的是后台进程，用户无法看到但需要给用户提供支持，后台进程还可以存在内部交互线，用来表示内部人员的联系。用户与前台服务之间存在另外一条交互线（line of interaction），用来表示用户与服务之间的接触。

图片来源：Service Design Tools

明确了服务蓝图的大致框架之后，还需要注意服务蓝图中一个非常重要的概念——触点。触点就是在服务的各阶段，用户和产品、服务、后台产生的接触，每个触点也是服务可以进行展开和优化的方向。

b.Uber服务蓝图绘制

为了明确服务蓝图的绘制和分析过程，下面将结合下图所示的Uber服务蓝图进行说明。

图片来源：Medium

(1) 明确用户历程

用户使用Uber打车服务主要可以简单分为以下三个阶段：注册（下载APP - 新用户注册），乘车阶段（下单 - 等待车辆到达 - 乘车 - 到达目的地）、乘车后（付款 - 评价）。

(2) 明确利益相关者

用户与之产生互动的前台服务人员为司机，而设计师、开发人员、项目经理等负责后台的服务支持，以保证Uber按照预期的目标运作。

(3) 明确前后台活动

一方面，需要明确和用户接触的前台活动有哪些，Uber打车服务中和用户产生接触的主要为司机及车辆，因此需要确保司机是合格的、车辆内部的环境是干净舒适的，同时司机在与用户接触的过程中需要提供礼貌的问候和交流，满足用户在乘车过程中的要求，完成乘车费用的收取，提醒用户离开前带好随身物品，以及评价乘客等。

另一方面，用户对后台的流程可能并不了解，但需要明确哪些后台活动和支持会对用户产生影响。比如在用户下单时能够自动获取用户定位，告知用户预期的时间和价格，以及发送给用户司机的状态等。

在明确前后台活动时，我们可以以用户历程为线，分步骤进行分析，确保每个环节中涉及到的前后台活动没有被遗漏。

(4)明确关键触点

在服务蓝图中我们可以标注用户与服务的主要接触点，针对触点进行设计是提升服务体验的一个重要和有效的手段。

在Uber打车服务中还有一些需要注意的触点，一是等待时间，这包括用户发起乘车请求后、付款时以及评价司机时，等待时间是造成用户体验较差的一个原因，因此需要注意标注出这些触点，并想办法优化，在服务设计中需要注意相关环节的应尽量简单，减少用户的等待。另外需要注意的是会对体验影响较大的触点，如司机态度不友好、乘客下车时忘记带随身物品等，可能造成失败的服务体验的触点应该精心地去设计，避免这样的情况发生。

通过以上过程我们完成了Uber服务蓝图的绘制，从中可以获取到Uber打车服务的整体概貌及其相互关系。

///

结语

服务设计的思维能够帮助我们从全局的角度去审视和思考，发现更多改善服务的可能性，从而为用户提供更好的体验。因此对于产品和设计等相关人员来说，不能仅仅把目光放在产品本身，而是要从服务的角度去正确看待产品和用户的关系，以用户为中心，找到用户与产品的每一个接触点来进行服务设计，这样才能保证用户在整个流程中都能得到好的体验。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷  作者：百度MEUX

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

即时通讯界面设计 表达其物流行业的专业性和商务性，标识整体精致细腻，令人印象深刻，在界面设计时以厚重，大气的配色方案和视觉风格提升整个品牌的含义。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

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

现在是互联网逐渐发展，已经出现了很多可以供自己写博客的网站，大家可以在上面 发表自己的文章，供自己记录或者是供他人阅读。但是，可不可以自己搭建一个只属于自己的个人博客网站呢？这篇文章就带你从0开始搭建一个自己的个人博客网站，并部署到属于自己服务器。这里有一点要说的是，没有服务器的同学使用自己机器的linux系统也是一样的操作。我们选用一个很好用的博客框架Hexo进行搭建我们的个人博客。

博客框架Hexo介绍：

Hexo是一个快速，简介而且高效的博客框架，Hexo 使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可生成一个静态网页展示我们发布的文章，同时也提供了大量精美的博客主题供我们使用。

Hexo博客框架的优点

• 速度极快：Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。
• 支持MarkDown：Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
• 一键部署：只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。
• 插件和可扩展性：这个也是hexo很强大的一个地方，强大的 API 带来无限的可能，与数种模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）轻易集成

Hexo博客框架搭建：

我们使用Centos7系统作为演示，使用其他linux系统也是可以的，只需要更换为对应Linux版本的软件安装命令即可。

1.安装Git

直接使用yum安装即可，在命令行输入 yum -y install git

完成之后输入git version 查看是否安装成功，如果显示git版本信息即为成功，如下：

2.安装Node.js

Node.js是一种运行在服务端的JavaScript，是一个基于Chrome JavaScript运行时建立的一个平台。

Hexo基于Node.js，所以安装Node.js是必须的一个操作，安装步骤如下：

2.1：下载安装包：

wget https://nodejs.org/dist/v12.13.1/node-v12.13.1-linux-x64.tar.xz  


    

        1
    

2.2：解压缩软件包并配置环境变量：

#解压 tar -xvJf node-v6.10.1-linux-x64.tar.xz #移动到/usl/lcoal目录下 mv node-v6.10.1-linux-x64 /usr/local/node-v6 #创建软链接 ln -s /usr/local/node-v6/bin/node /bin/node ln -s /usr/local/node-v6/bin/npm /bin/npm #添加环境变量 echo 'export PATH=/usr/local/node-v6/bin:$PATH' >> /etc/profile source /etc/profile #让环境变量生效  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

2.3：测试是否安装成功：

在命令行输入node -v 和 npm -v，若是显示出了版本号，即为安装成功：

3.安装并使用Hexo

Hexo的安装较为简单，使用如下命令安装

npm install -g hexo-cli #这里有一点要注意的就是，npm的源是在国外的，访问可能会很慢，这里可以换成我们国内的源进行安装加快速度。操作如下： npm config set registry https://registry.npm.taobao.org  


    

        1
    

    

        2
    

    

        3
    

3.1：初始化Hexo

上面的安装完成之后执行下面的命令进行对Hexo进行一个初始化

#这个文件名字可以自己指定，之后会在当前目录下生成对应文件夹 hexo init <文件名字> cd 文件名字 npm install  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

可以看到安装好之后的一个目录结构：

目录文件说明：

_config.yml：网站的配置信息，您可以在此配置大部分的参数。

package.json：应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

scaffolds：模版文件夹。当您新建文章时Hexo 会根据 scaffold 来建立文件Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source：资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes：主题 文件夹。Hexo 会根据主题来生成静态页面。

查看hexo的版本以及对应的数据：

3.2生成静态文件，并开启Hexo服务：

进入到了hexo的安装目录之后，使用hexo generate来生成静态文件，也可以使用hexo g，之后使用hexo server（可以写成hexo s）命令启动服务，操作如下：

可以看到4000端口的服务已经开启，之后在你的浏览器输入http://<你的linux机器的ip地址或者服务器公网地址>:4000,如下可以看到最开始的一个界面：

4.初步使用Hexo：

使用前，我们对我们的站点进行一个配置，也就是我们创建的hexo目录的_config.yml文件，可以修改的部分介绍如下：

# Site
title: QIMING.INFO #博客网站的标题
subtitle:          #博客网站的副标题
description:       #你的网站描述
keywords:          #网站的关键词  
author:            #作者的名字
language:          #博客网站使用的语言
timezone:          #网站时区  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

我自己的修改如下供大家参考，这里的修改没有太大的限制：

4.1：开始使用Hexo发布自己的第一篇博客！

执行下面的目录创建一篇新文章：

hexo new post <文章标题>  


    

        1
    

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Tz5aBlT-1622032930755)(pictures/image-20210526145922392.png)]

这里我创建了一篇标题为First_Blog的博客，创建之后hexo目录下面的source/_post文件夹下会产生一个First_Blog.md的文件

4.2:编辑文章

进入到上面说的那个目录下可以看到我们创建的博客文件：

直接使用vim或者vi就可以对我们的博客文章进行编辑了，打开此First_Blog.md后可以看到—分隔的区域，这部分主要对文章进行标注变量，如下：

title：标题

tage：标签

categories：分类

date：时间

这些标注大家在-----区域可以进行使用

4.3：发布文章

输入如下命令，生成静态网页，静态网页会存放在public文件下

hexo  g
hexo s  


    

        1
    

    

        2
    

之后就可以去浏览器访问了！可以看到我们发布的文章已经成功在浏览器显示，到这里个人博客网站就已经成功搭建了。

5.主题的选择：

主题网站：https://hexo.io/themes/ hexo提供了大量精美的主题供我们选择，选择喜欢的主题，在hexo目录下的themes文件夹下使用git clone下载主题，之后再配置文件_config.yml把theme后面修改成下载的主题的名字，之后运行hexo clean ，hexo g即可看到生效的主题。

将Hexo部署上线到服务器：

如果是有服务器的小伙伴，也可以将Hexo部署到服务器供全网访问，服务器的购买这里就不多说，阿里云跟腾讯云上面对于学生也有较为优惠的价格。部署到服务器的话，就需要将上面的全部操作，在你的服务器系统上面执行，之后我们使用Nginx（反向代理服务器）进行部署。

Nginx安装：

Nginx是一款高性能的 HTTP 和反向代理服务器，这里我们采用编译安装的方式,按照下面的指引依次执行命令

#安装gcc编译环境： yum install -y gcc-c++ #安装zlib-devel库： yum install -y zlib-devel #安装OpenSSL密码库： yum install -y openssl openssl-devel #安装pcre正则表达式库：编译nginx，需要需要指定pcre的路径，这里我们选择安装稳定版本的。 下载地址：https://ftp.pcre.org/pub/pcre/ #选择对应的版本下载下来之后上传到我们的服务器，也可以使用wget直接下载 tar -xf pcre-8.43.tar.gz cd pcre-8.43 mkdir -p /usr/local/pcre
./configure --prefix=/usr/local/pcre make && make install  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

下载编译安装nginx：

nginx下载官网：http://nginx.org/en/download.html wget http://nginx.org/download/nginx-1.16.0.tar.gz mkdir -p /usr/local/nginx tar -xf nginx-1.16.0.tar.gz #编译指定安装路径需要进入nginx cd nginx-1.16.0
./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-http_stub_status_module --with-pcre #http_ssl_module  这是支持https的一个模块，就是可以使用https：//这样去访问。 make && make install #编译安装  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

启动nginx服务：

#启动： /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf #用指定配置文件的方式启动  -c #测试： /usr/local/nginx/sbin/nginx -t #这个用于测试nginx的语法是否有问题 显示is successful即为成功。 #关闭： /usr/local/nginx/sbin/nginx -s stop #继续输入以下命令使Nginx开机自动启动： systemctl enable nginx #配置文件的位置：/usr/local/nginx/conf  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

之后我们需要配置服务器公网ip，编辑配置文件。

之后再重启nginx服务，开启hexo服务，这个时候使用公网的ip就可以访问到我们的hexo服务了！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：csdn    作者：YO哥教你大数据

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

很久以前我写过一篇讲「用户体验」的文章，文中提到电影的观影体验是可以通过灯光、镜头、脚本、台词、道具、特效等等手段去塑造出来的。比如，《教父》中对灯光塑造角色形象的首次运用，营造出阴暗、冷酷、深不可测的角色形象，帮助观众去建立更立体的角色印象。

所以许多学习电影的同学会去分析电影里的某个镜头或某个片段的细节，聊这个镜头的拍摄用了什么样的手法，演员的表演传递出了一种什么样的信息，以值得我们去学习。于是许多学电影的新人就会以为，学好这些东西，就能拍出一部好电影。

但是作为一名导演，如果只关注这些细节去学习所谓的理论知识，而不知道这部电影背后的宗旨，支撑起整个故事脉络的重要信息，众多人物角色的复杂情感关系，以及剧本背景所表达的时代现象等等，那么就不可能在自己的电影里代入那些细节理论。甚至连如何推进到这样的场景都做不到，试问又怎么可能去聊某个镜头下的细节呢？

这叫缺乏上下文联系，也是任何行业的从业人员在学习该行业所需要具备的理论知识时，都会忽略掉的重要条件。

说一个真实故事。设计师 Teisanu Tudor 前阵子在 Instagram 上做了个实验。他扮演成一位资深 UX，每天通过网上找来的几张图片组成各种设计案例、教程、原则等帖子，分享在上面。受欢迎程度远超他的预期，而其中热度最高的帖子，是案例改版对比图，以及两个方案比较图，再加几句简单的总结。比如：

通过这样的说法，难道就能认为现在所有 App 或网页上的 banner 设计都是错误的？当然不能这么随意下定论。

许多人都以为通过这种简单的几个步骤就可以学会设计，且认为这个学习过程是有趣且轻松，可以速成的。

Teisanu Tudor 说：这种速成贴如此火爆，不免让人有些担忧。这些帖子里的案例几乎都是脱离改版目标的上下文背景去探讨体验的，可许多人都忘了目标才能决定设计改版后的效果，而不是单独看起来如何。

或者这类：

A 与 B，真的是 B 更好么？在不同设备与不同用户的条件下，仅仅通过视觉理论得出这样的结论，未免也过于仓促。

我们都知道，一个设计方案不可能适用于所有场景，设计师的主要能力之一就是在具体限制条件下，平衡好不同利益相关者，以及多个变量，产出合理方案。而类似这种帖子的火爆似乎在传递出一种信息，就是设计是不需要具体问题具体分析的，甚至通过这种细节的通用解法就能解决绝大多数设计问题。这就属于误人子弟了。

我经常会在一些地方看到有人在整理某个页面当中的设计细节，然后有模有样总结一遍，试图将其当做产品设计的某种理论或准则。比如截一张某款产品中的界面，说它的按钮摆放有问题，会导致用户如何如何，而依据就是之前得出的设计准则。其中最有趣的一次是，有个人拿着一款产品的设计方案去吐槽另一个产品的方案，说没对上…

在前面两篇理论文章里，我反复说过理论知识的重要性，它可以帮助我们产出设计方案。但是有一个点是没有被提及的，就是「理论知识的连接性」。

许多人会把自己看到或学到的东西看作是一个独立的知识模块，且希望在工作时能运用上，然而却事与愿违。于是渐渐排斥理论，觉得理论无用，形成一种认知，就是理论无用论。再也不去读书，不去学习理论知识，以至于在知识体系层面停滞不前，无法说明白自己产出的方案，只能说感觉：我感觉可以。

这些人再也不会去思考自己为什么做这个需求，以及这个需求的利益相关者是谁，用户的目标，企业的目标，甚至是这次需求的指标，而只是看界面从某个原则上来说是否合理……而这所谓的原则，只是一些无关紧要的东西，却被人当做设计圣经。

这就是理论知识逐渐被人轻视的原因，许多人本末倒置，再也回不到正确的那条路上。

比如，前阵子有位读者问我：呆总，你看 QQ 这里把一些未开通的特权放出来，吸引用户去开通，但是绝大多数直播产品的勋章体系也挺丰富的，却很少看见会这么做的，是为什么呢？

类似这样的问题，在缺乏业务背景，商业目的，需求指标等前提下，是不可能得出一个绝对结论去证明其他产品为什么不这么做的。这是现在大多数人面临的问题，但却不自知。

就像我这个系列文章里说的一样，理论知识当然重要，但是破碎的理论，是有反作用的，所以需要串联，从全局角度出发，再深挖到细节。而不是只聊大方向，或只聊细节。

举个例子。当我们拿到一个需求，说要从 0-1 做一个长视频产品的弹幕体系。可能很多人就会无从下手，第一直觉想的是去找所谓的竞品抄一下。可能还会像上面那种对比图一样，把几个产品的弹幕界面截图下来比较下，试图从界面元素角度判断哪个设计得更合理。但是会发现，即使是抄，也会抄不到位，甚至会被老板质疑这个方案的合理性。而你能反驳的只是：别人也是这么做的。

而关于不同用户发布弹幕的权限，比如次数、时间限制、字符差异等重要信息，就被忽视掉了。包括各种违规弹幕，以及如何判断违规的弹幕，甚至是弹幕在屏幕上出现的密度、形式、速度等信息可能都无法考虑到。这就是现在许多设计师存在的问题 —— 过分专注界面元素，忽视其背后的信息。

虽然我在之前一篇文章里提到，注重细节的重要性，但是理论知识，从来都不是相互独立的，尤其是与项目相关的，更不可能从某个单点出发得出全面的设计方案理论。

如果你是刚入行的设计师，这么做无可厚非，就像学习电影的学生一样，它确实是学习理论的一种途径，只不过缺乏连接。但如果你已经入行一些日子，觉得自己进步缓慢，甚至感到迷茫，且读完我写的文章也意识到了这个问题，那你就要开始反思，自己对于理论知识的学习是否有主动去将它们串联起来。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：优设   作者：呆呆U理

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

一张图上有四句话，读者根据 字号 判断先读哪一句。在从测试和调研中收集来的用户需求和期望的基础上，首先明确内容和交互的优先级，确认信息的先后顺序和关联性后，才能够设计出有重点的交互界面。这些行为是为了引导用户在阅读过程中 一眼获取重要信息。

用视觉语言来说，上面的例子只是通过调整 文案的尺寸 去探索如何设计页面层级。同时，通过调整其他平面设计元素例如 字重、颜色、透明度 等等也可以达成同样的效果。当然，这种行为同时适用于 按钮、菜单栏、表单 等其他控件。

通过距离划分视觉元素展示它们之间联系的基础前提是 格式塔心理学 组织原则，这是在构建数字界面时所考虑的设计系统的基础指导理论。因为用户一般通过 视觉元素的位置 来判断阅读顺序，设计视觉元素和控件的位置是为了促使用户完成任务，同时在某些情况下，也会引导用户去做他们所期望的事。在很多情况下，用户会自己选择想看的信息。

“在网络上，人们会一目十行而不是逐字逐句的阅读内容。他们一般倾向于付出更少的精力，以高效的方式达成目标。”

这意味着在一个拥有很多功能的页面上，用户会一目十行的迅速寻找他们的目标，因此 大部分的视觉信息会被屏蔽。

用户在网络上的阅读方式高度取决于：

• 用户的任务目标

• 用户习惯

• 页面层级

• 页面内容形式

这就非常明显了：最后两个因素是设计师可以控制的，并且考虑到网络设计越来越先进，运用知识和技术推动用户行为，而不是使电子产品成为用户的阻碍。基于这个原因，我提出一个设计原则。

将用户分级
Users by levels

有一些人说如果需要在图标旁边放一个文字说明，图标就没有存在意义了，因为它的认知优先级被降低了，成为了识别序列里的一个负担。因为图标视觉系统是建立在 逻辑原则 上的（和文字表达的意思相同），所以无论是对于有没有相关交互经验的用户而言，图标被认为是可以帮助用户迅速理解功能的。

一个只有文字说明的软件菜单和同时拥有图标和文字的菜单相比，图标可以帮助用户更快的理解。在上图中，根据用户所期望的功能，可以看到菜单中的图标带有要访问页面的标题名。接下来，当用户习惯图标后，图标将会更加简单的引导用户快速的在界面中寻找到所需要的内容。

当设计一个新界面时设计师需要知道，页面必定会被有不同阅读习惯的人使用。为了促进理解，我会把用户分成三种人并且定义为：新手用户、中间用户、专家用户。

新手用户 — 就像你所想象的那样，这是一个 第一次接触 这个界面的用户。如果这个界面是某个系统中的一部分，那意味着始终有某些功能点是他第一次接触到的。这个趋势是说，这个等级的用户 理解页面的速度会低于用户理解页面的平均值，并且花费更多的时间去理解语句直到找到所需的内容为止。

中间用户 — 比新手用户多一些数字产品的使用经验，但并不是一个界面使用专家，理解界面的时间大概是处于平均值左右。

专家用户 — 他们已经使用这个平台很多次了，所以可以较快的阅读，而且并不需要通过阅读所有的内容去理解界面，可以 快速识别元素、布局和交互的视觉呈现。也许正因为这些原因，很多用户 对产品界面的突然改变抱有抵触心理。

现在，想想看如果一个投资 APP 每周通过 Email 将以下这个界面发送给用户。用户会不会阅读上面所有的内容呢？每次打开都会阅读吗？或者只是阅读对他比较重要的内容？

这个来自金融 APP 的卡片信息展示了用户的收入。看看这个例子，你的阅读顺序是怎么样的？我可以通过元素的摆放位置、比重、尺寸大小…所形成的视觉层级逻辑来理解它。由于缺乏明确的层级关系，有一些内容无法被精准获知，必须在事后实际运营的过程中调试，通过用户使用数据反馈来决定内容的优先级和必要性，并进行修改（使用 Hotjar，Crazy Egg 之类的热点地图可以收集数据）。

请注意在这些内容中：唯一的 动态信息 就是整个【 3 】模块中的重要信息【 4 】中的内容。所有的邮件页面中位于【 1 】的内容都是一样的。【 2 】中的信息是不变的，并且重复出现在每一封这类型的邮件中，它们都是其认知标识的一部分。

第一次看到的用户需要理解这是关于什么内容的信息，所以信息全面是非常重要的，但是 并不需要把所有信息都放在突出的位置上。考虑到这点，通过 减少色彩饱和度、改变字号大小 等降低视觉重量的方式，是不打断用户阅读过程的选择。

一张展示了用户收入的来自金融 APP 的 Email 卡片，它应用合理排版促进用户更好的理解信息。

在上面这张卡片里，简单的改变了内容排布，突出了最重要的内容。他们展示了 层级关系 对用户体验的影响。一味格式化的信息传递被更具个性化、同理心的方法所取代。头部和底部信息与主体信息相合并，通过这种隔离降低了被突出的可能性。最后，将主按钮更改为次级按钮（具体情况要根据点击率来决定，主按钮可能是最好的方式，有背景色的主按钮更能激起用户点击欲望）

在商业软件环境中，确切的说是在大量的表格中，更多见的是列表标题比每一行的内容更加突出。因为标题是固定信息，而且用户可能每天都会看到，而不是将重要等级修改为 主要和可变内容（列表内的内容信息）。

认识到设计界面时成本和实现功能之间的复杂性，遵循这一思路可以帮助设计师确定元素优先级，并且创建层级关系以提升用户的使用体验。同时，因为引导对新用户来说是必须的，所以在设计产品的时候，重要功能需要结合良好的入门教程、功能提示和及时反馈。这样便建立了可以提升用户日活及留存的高效、友好的用户体验。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷   作者：ZZiUP

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

“文中示例相关数据都为假的模拟数据，而非真正的商业数据，以此声明”

度量是什么

【度量Measure】是一种测量评定对象的方式，它帮助我们结构化的获取对象的状态与变化，我们运用这些数据进行洞察，转化为有用的信息，帮助决策和优化，这个过程也是分析诊断的过程。

那日常会有怎样的一些信息获取呢？（这里面包含了数据也包含了一些正负性的反馈）

我们对一个功能上线进行一组完整的项目结果质量数据模拟：

• 净交易收入额比去年同期上升2.0%，达到2千万

• 订单量为222，比上周上升了2.0%（对交易产生直接正向作用）

• 方案产出数共222件，比上周上升了22.2% （对内容产出有直接的提升）

• 用户的满意度为2.2 ，上升了2% （之前是2.0）

• 用户使用表现出沉静，轻松的情绪（比之前挫折，晦涩要好很多）

• 功能点击，周活跃2200，点击率22%，周留存22.2%（0-1）

• 功能渲染和可交互时长为0.2秒加载完成。用户在使用时交互顺畅无卡顿（符合业界前端质量交付标准）

这段描述符合整个产品使用的过程，它似乎是一个多面体，帮助我们了解整个产品黑盒。这个描述越精细越多维，我们得到的信息就越清晰越客观。（包含多元数据内容，并对数据已进行比对和使用，得到一定的有效信息）反之，假如哪个环节出现问题。我们能清晰看到问题出现的环节，并且通过其表征的信息进行问题的深挖（再细化相关数据或者关联的层次）。

我们可以拆解到这几个层次的数据

业务结果、用户反馈（态度与情绪）、行为点击、系统性能

可理解为：良好的产品运行-》用户流畅使用-》良好的用户反馈-》预期的产品转化结果

从获取方式来说，大致可以从两个大角度（这里从广义的范畴去分）

【qualitative research定性研究】：快速从样本中判断问题的性质和方向

【quantitative research定量研究】：数据的验证性，全面性、追踪性

定量获取

系统承载业务内容的运作，可以记录各种各样的明细数据表，在海量数据中，进行科学的关联与细分。以大数据驱动为最终目标，其特点是：数据的全面性和自动追踪获取。

业务结果

追踪问题：产品是否符合市场需求？产品是否良性发展？

业务型数据是围绕着整个商业建设和运作阶段而产生的数据。是最能体现产品、商业价值的部分。可以归纳为三类：内容建设->流量访问->商业交易。是商业链路中产生的具有直接商业结果的数据。

内容建设 是指经过人为输入，系统流转产生的比如商品、文章、方案等等具有实质内容价值的数据。是具有生产过程的（一般是经过一系列的操作完成的）。

流量访问/分发 则是针对商业内容的使用/运作，比如某个商品的浏览，某个内容的传播等等。这些和营销相关具备人群效应的数据也属于业务数据。最常见的就是曝光量点击量，而在中后台系统中则是以访问浏览为主。

商业交易 则是最直接的商业结果型数据，最常见的就是网站的GMV（成交金额：包括：付款金额和未付款。）

订单交易额、注册会员数等等。

以某平台中相关的业务数据为示例

业务结果的分析，是根据不同业务发展，确定核心业务指标，以及建立对核心指标的拆解逻辑。

它或许是个计算公式。或者是个一级指标到二级关联指标。例如以下，这里暂时不展开来讲。

对于业务数据的获取，我们大部分是直接通过后端的数据库沉淀下来的。但如果涉及到商业数据的细分（按照商业目标进行阶段性或者类别型的追踪监测）。比如想知道会员的vip的分层情况。或者知道某行业商品的生产细分情况等等。这些虽然可以通过后端拉数据，让数据分析师或者运营整理出来，但是每次都有加工成本，也没有办法看到实时数据，这时候就会要考虑去做细分埋点，下文会提及到埋点方式。

行为点击

追踪问题：产品使用情况如何？用户浏览习惯如何？

用户行为数据，是围绕用户访问某产品过程的用户行为轨迹数据。其中大体包含了用户量、曝光量、点击量、浏览量、访问时长、停留时长等等观测用户使用情况的表征数据。

这里是一组典型的平台用户使用行为的描述，而这些行为的最终，是产出了上面的业务数据（订单与成交金额）

访问首页->点击并浏览商品详情->点击客户咨询进行咨询->点击购买提交订单->点击支付，支付完成

由此我们可以解释，行为数据与业务结果之间的关系，并且两者的关注点也是有差异的，在行为链路中，我们更注重每一层的转化关系以及用户为什么没有向下转化的障碍点。

再以B端管理系统为例

B端的管理系统具有典型性，可以用点线面来归纳，点指的是诸如事件曝光点击等。线指的是用户使用路径，面则是广义的综合性观察，比如流量分布，比如区域热图等。通过观察这些，可以观察到用户的使用率和使用路径。并且得知用户使用产品是否真的贴合需求，设计的是否合理高效。

行为数据要结合具体的场景或者维度去观察，才能产生更有用的信息。

运用行为数据，我们可以去做很多分析：漏斗分析、留存分析、流量分布分析、路径分析 、单页热力分析、点击分析、 人群分析等等，这些都是分析方式，在后续关联篇章中会去探讨。

行为数据的获取是依赖于埋点的，在业界有两大类埋点方式：全埋点、手动埋点。

行为数据的三大事件类型基本可以归类为：曝光事件、点击事件、停留事件

对于C端侧重于曝光、点击。对于B端侧重点击、停留 （从流量转化与访问效能两个角度来说）

以上介绍了业务结果和行为点击两种数据，而这两种内容，都会涉及到埋点采集这件事，这里我们介绍下关于埋点采集数据这件事情。

埋点采集

追踪问题：如何根据人物、场景、动作制定精准的采集方案？

埋点，是对特定数据的采集，由前端埋点和上报、进行数据处理和数据分析。一般数据埋点分以下三种：

全埋点虽然是所有数据可按需可查，但是因为它的数据量极大，且需要2次定义和清洗，所以只能对通用性质的数据进行采集。而针对性的内容，由数据采集定义后，由前端上报后，可能做到定点，定期精细具体的统计。

两者大致能产出什么数据分析呢？主要以平台/系统这个角度看：

整体分析-通用全埋点

用户活跃、用户留存、用户跳出率、用户停留时长、用户流量分布...

局部与特定分析-手动埋点

关键事件点击率、关键入口渠道流量总计与分布、关键链路漏斗、关键具体区域曝光与停留时长...

为了获取更精准的业务/行为数据，我们一般会采用手动埋点的方式，所以前期 第一阶段会在场景中确定分析目标，然后梳理相应需要的指标，书写明确的埋点需求是很重要的一个环节，书写的足够明确，才能和业务、前端、数据分析师进行准确的沟通，分析目标一致，然后上线后建立相应的数据看板。

注意点：采集方式｜统计口径｜数据精准度校验

那怎么定义数据分析时的埋点需求呢？可以用以下方式去描述：

1. 什么用户=用户定义

2. 什么时间=时间戳

3. 什么环境=地理位置+网络环境+硬件环境+软件环境+哪个页面（来源页面）+什么位置

4. 什么行为=事件ID+命名

5. 什么条件=可以以某个行为或者业务交易为条件

6. 结果如何=用户操作的结果

示例：

一个后台系统悬浮帮助功能使用的情况需求

一个搜索使用的情况需求

这2个是比较细致的数据采集的描述。规则了统计的对象，范畴，以及条件，结果观测等等的需求，大家可以在业务和行为数据相关采集中，试着撰写下这样明确的需求。这样的数据采集才具有精准的分析价值。

人群标签

追踪问题：用户都是哪些人，谁使用了这些功能 ？

人群标签可以理解为数据型用户画像。为什么在这里提及，因为大量数据（特别是具体的采集数据）都会涉及到人群这个角度。人群也是定量数据中最具有独立观察价值的数据。

人群标签就是根据人群特点，进行描述分类，对人群打标签。我们根据不同的获取路径，可以大致分两类。

一类是利用基本数据进行定义，比较简单直接

从不同的端，可以获取用户的基本来源，如访问端的类型，或地理位置等，可以定义为“客户端用户”、“江浙沪用户”等。

通过唯一用户ID所匹配的一系列用户注册时的基本信息内容，如性别、职业、行业、兴趣等。可以定义为“女性用户”、“定制类用户”等。

还有一类就是复合型自定义，一般是根据用户的业务、行为数据或者类别属性来定义的，它非常的灵活聚焦。

使用某类条件公式来定义某一波用户

如我们将购买能力从高低来分层用户：月购买小于5000的为中购买力用户，大于5000的为高购买力用户，周活跃大于2但无购买记录为潜力用户。

另外一种构建用户范畴的方式：通过“时间、地点、事件”等一系列复杂描述来勾勒圈选用户

如我们定义“第一次访问站点时，在首页有关注过每日推荐“的用户。

这里的复合定义很多时候都会用到多指标多维度。是一种深度结合业务场景来圈选人群，定义用户的方式。

人群标签，不仅帮助我们细分数据，知道“到底是什么人做了什么事”，聚焦使用人群的各项指标健康情况。最终，还可以定位产品，定位人群，精细化运营产品：现在的用户大致都集中在哪些人群中？哪些功能是头部用户需要的？哪些功能最受基础版用户的欢迎等等。在探索商业需求的时候，更容易找到抓钩，去深挖商业价值。

常用画像的场景

2.定量用户画像：用定量的数据做某些值的规则，来圈定用户人群

某产品生命周期使用示例：

系统性能

性能数据一般指由产品进行页面渲染及前后端交互时，监测到的时长数据。观测系统性能，是因为系统数据量很大时，在产品渲染交互环节中，容易产生卡顿，造成用户体验的下降，导致流失率。而系统性能，一般是由性能监控等产品产出质量报告。在一些浏览器中，也有嵌入的插件统计报告。

这里大致介绍下业界google最新的关于7大性能指标的定义

这其中，最重要的3大核心指标是：

可以通过官方出品，安装 web-vitals-extension 插件来获取三大核心指标，也可以通过通过安装 Lighthouse 插件来获取如下指标，现在已经内置在浏览器中

定性获取

即选择典型用户角色，针对问题或者内容进行集中测试或者访谈：用户访谈、焦点问题调研、可用性测试等。

比较常用的是：系统可用性量表（SUS）、有效性、满意度和易用性的问卷（USE）

不管哪种方式，我们都是围绕“可用性”这个角度去进行评估和研究的。业内可用性这个词称为：“Usability”「ISO9241/11」中有明确的相关定义：一个产品可以被特定的用户在特定的境况中，有效、高效并且满意得达成特定目标的程度。可用性关注的是用户与对象在互动过程中的有效性（effectiveness）、效率（efficiency）和满意度（satisfaction）。

用户反馈中我们获取到什么样的信息，我们第一：明确用户对此内容的态度，观察用户行径中的顺畅度，感受用户认知反馈。第二：询问其严重程度和影响程度，正面负面情绪。这两层是由表及里的，互相关联。但侧重有所不一样。

用户态度

通常用到以下几种度量

而这些内容中一般包含数据是

而从场景分我们如何使用这几种度量呢？

不难发现，我们最常用到的是「自我报告式的度量」

它比较宽泛的反应了产品综合情况。这里举一个自我报告度量涵盖的范畴

用户情绪

追踪问题：用户使用后，在情感上反应如何？

初步知晓用户反馈情况后，可以深入用户情绪感受，进行点状问题的挖掘。进而对问题进行定性分析追踪和程度评级。用户在一定严重情绪影响下，是对产品会产生排斥的，所以有时候对情绪的收集，能让我们对内容具备敏感度。且在设计过程中，充分建立共情和同理心。

连续型描述模型往往认为人类的情感状态是分布在若干个维度组成的某一个空间中，不同情感状态之间不是独立的，而是连续的，可以转化的。

当度量情绪变化阶梯时，可以试着使用连续情绪。比如：挫折——》生气、沮丧——》厌烦等。而有些程度词是和时间长度有直接关系的，比如说疲惫。我们需要关注场景特点，用户可能会长时间沉浸式体验时，它是否能接受打扰，是否会因为一些内容受挫。这些都会导致他最终直观感受的好与坏。

举例子来陈述：

情绪评分卡：

在各种用户态度反馈中，我们也可以直接去获取针对性的情绪化度量表进行5分表计量评分。

具体方式：

以下为目标设定的取词示例：

严重评级

常用评估：

高中低评估

低－会让参加者心烦或沮丧，但不会导致任务失败的问题。

中－这类问题会显著提高任务的难度，但不会直接导致任务的失败。

高－所有直接导致任务失败的问题。遇到这类问题后基本没有可能再完成任务。

综合因素评估

多维度的评估

前两个较常用，后两个看产品及技术配合

1. 对用户体验的影响

2. 预期的发生频率

3. 对商业目标的影响

4. 技术／实现成本评分（0=低，1=中，2=高）

数据层次结构总结

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷   作者：酷家乐UED

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

前言

一、体验度量怎么做？

如何确定方法？我们需要的是一个完整的度量框架，以及能够聚焦用户体验层为驱动，分解并有力的去解决问题。经过大量的实践和验证得到，抓住一个击破点作为产品体验提升的目标，并一种合理的方式进行推导和验证，这是一种最直接度量体验的标准流程性方式，这里的目标必须是：

• 体现用户主观感受或者具有行为驱动的目标。

• 基于业务目标定义+用户诉求了解后，得到的以用户为中心驱动的用户行为。

  
  

二、度量模型怎么选？

面对设计圈内已经存在的和部分大厂创造的度量模型，评估优劣后最终我们选取了HEART模型。因为HEART是个比较全面和具备更多扩展性的分析框架，同时足够的权威和标准，而且市面上的模型基本都被HEART的五维囊括。除了这些考虑因素外，再给出以下几个明显的优势点：

• 1、HEART同时涵盖了定性和定量的不同数据维度。

• 2、HEART框架同时包含了：宏观和微观的层面

• 3、HEART模型并不单纯的再定义体验质量，同时也链接了商业价值。把用户体验的原则和收益驱动的指标关联在了一起。

三、HEART模型简介

1.什么是HEART模型？

2.HEART模型的特性与应用场景

四、HEART模型的详细拆解指南

第一步：确定体验目标

整体的思路是：首先分析业务目标，并就业务目标所落地的产品服务的链路进行拆解，分析链路后，找到其中对体验有决定性影响的因素，提取其因素后，即形成体验目标。

1.确定业务目标

2.拆解产品链路

➢示例：商品素材搜索链路

3.分析触点并提取决定性因素

需要注意的是，决定性因素的选取必须在具体的触点中才有意义，脱离后无法判断是否有阻塞性影响。另外，某些设计因素是否是决定性可能在跨触点中体现出来，需要联系整个链路进行交叉分析确定。

4.体验目标的提取与表述

决定性因素“搜索结果的分类”，引申出的设计目标为“更清晰的信息层级”、“更完整的信息”。

通过链路触点的分析，决定性因素的提取，设计目标的匹配，我们已对设计优化方向有了准确的了解。这个时候需要从设计师视角做一个完善而精准的”体验目标“的表述。

第二步：确定度量维度

需要注意的是，HEART模型因其维度的广泛定义，不仅仅可用于体验目标的度量，也可以对产品目标、业务结果进行度量，对体验目标的度量因要从产品因素中剥离出体验问题，相对来说较为复杂，是本次叙述的重点。

第三步：确定信号

以度量维度为标准并引用体验目标确定信号

通过逐一对度量维度进行体验变量提取，有基础值则进行对比的方式，无基础值则使用趋势的表述方式，结合业务目标的情况下，去概念性假设体验目标的正向或反向结果，最终通过标准的格式提炼出信号，信号的提炼的可以用固定的格式进行书写： 格式：用户   用什么   做什么   体验变量   趋势&数值

寻找体验变量

确定信号的注意事项

第四步：确定指标

对数据进行处理

体验变量所直接产生的属于原生数据，而一组数据通过某种分析加工后，可以成为一个更有价值的信息，如均值、中位值。选择对数据进行哪种方式处理，受目标的影响较大，每一种数据处理方式，都有指向特征，通过与目标的匹配，可以选取出合适的数据处理方式。

确定指标的注意事项

案例A

度量维度：愉悦度

信号：家装设计师    使用搜索功能    搜索素材时    易操作性达到4.0

体验变量：易操作度

数据：易操作度评分

指标：易操作度评分的均值

五、总结

4.另外，除了准确的定位、度量、转化的逻辑推导外，参考业务目标进行范围收敛，也是非常重要的工作，它影响着每一个推导环节，以避免偏离产品方向，有效的过滤弱关联或无关联的因素。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷   作者：酷家乐UED

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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