我们常说，现在是体验至上的时代，用户对产品的使用不再是单纯的需求满足，更要获得满意的体验。服务设计的发展为我们改善用户的体验提供了新的思路，从本质出发，任何产品都是在提供某种服务，服务的质量从根本上决定了用户的体验。
什么是服务设计
服务设计一直在我们的生活中，我们无时无刻不在体验着各式各样的服务。荷兰一家专业的服务设计机构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 使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可生成一个静态网页展示我们发布的文章，同时也提供了大量精美的博客主题供我们使用。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BUkzFJqh-1622032930743)(pictures/image-20210524011732509.png)]](https://img-blog.csdnimg.cn/20210526204228907.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
我们使用Centos7系统作为演示，使用其他linux系统也是可以的，只需要更换为对应Linux版本的软件安装命令即可。
1.安装Git
直接使用yum安装即可，在命令行输入 yum -y install git
完成之后输入git version 查看是否安装成功，如果显示git版本信息即为成功，如下：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gVJMnq6W-1622032930745)(pictures/image-20210526142911469.png)]](https://img-blog.csdnimg.cn/2021052620425035.png)
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
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 #让环境变量生效
2.3：测试是否安装成功：
在命令行输入node -v 和 npm -v，若是显示出了版本号，即为安装成功：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-47pt856h-1622032930748)(pictures/image-20210526143600103.png)]](https://img-blog.csdnimg.cn/20210526204418535.png)
3.安装并使用Hexo
Hexo的安装较为简单，使用如下命令安装
npm install -g hexo-cli #这里有一点要注意的就是，npm的源是在国外的，访问可能会很慢，这里可以换成我们国内的源进行安装加快速度。操作如下： npm config set registry https://registry.npm.taobao.org
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TEjeb2E6-1622032930750)(pictures/image-20210526143826327.png)]](https://img-blog.csdnimg.cn/20210526204930856.png)
3.1：初始化Hexo
上面的安装完成之后执行下面的命令进行对Hexo进行一个初始化
#这个文件名字可以自己指定，之后会在当前目录下生成对应文件夹 hexo init <文件名字> cd 文件名字 npm install
可以看到安装好之后的一个目录结构：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-raE9WJQX-1622032930751)(pictures/image-20210526144057199.png)]](https://img-blog.csdnimg.cn/20210526204949450.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
目录文件说明：
_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的版本以及对应的数据：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1B3aWxn9-1622032930752)(pictures/image-20210526144143747.png)]](https://img-blog.csdnimg.cn/20210526205007939.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
3.2生成静态文件，并开启Hexo服务：
进入到了hexo的安装目录之后，使用hexo generate来生成静态文件，也可以使用hexo g，之后使用hexo server（可以写成hexo s）命令启动服务，操作如下：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YuvIWOuI-1622032930753)(pictures/image-20210526144957135.png)]](https://img-blog.csdnimg.cn/20210526205023957.png)
可以看到4000端口的服务已经开启，之后在你的浏览器输入http://<你的linux机器的ip地址或者服务器公网地址>:4000,如下可以看到最开始的一个界面：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w9ELcFFg-1622032930753)(pictures/image-20210526145217729.png)]](https://img-blog.csdnimg.cn/20210526205035279.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
4.初步使用Hexo：
使用前，我们对我们的站点进行一个配置，也就是我们创建的hexo目录的_config.yml文件，可以修改的部分介绍如下：
# Site
title: QIMING.INFO #博客网站的标题
subtitle: #博客网站的副标题
description: #你的网站描述
keywords: #网站的关键词
author: #作者的名字
language: #博客网站使用的语言
timezone: #网站时区
我自己的修改如下供大家参考，这里的修改没有太大的限制：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G0cTYgQ1-1622032930754)(pictures/image-20210526145734893.png)]](https://img-blog.csdnimg.cn/20210526210405679.png)
4.1：开始使用Hexo发布自己的第一篇博客！
执行下面的目录创建一篇新文章：
hexo new post <文章标题>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Tz5aBlT-1622032930755)(pictures/image-20210526145922392.png)]
这里我创建了一篇标题为First_Blog的博客，创建之后hexo目录下面的source/_post文件夹下会产生一个First_Blog.md的文件
4.2:编辑文章
进入到上面说的那个目录下可以看到我们创建的博客文件：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cuPREJLQ-1622032930756)(pictures/image-20210526150208204.png)]](https://img-blog.csdnimg.cn/20210526210424359.png)
直接使用vim或者vi就可以对我们的博客文章进行编辑了，打开此First_Blog.md后可以看到—分隔的区域，这部分主要对文章进行标注变量，如下：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GOYKjBSu-1622032930756)(pictures/image-20210526150326264.png)]](https://img-blog.csdnimg.cn/20210526210437302.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
title：标题
tage：标签
categories：分类
date：时间
这些标注大家在-----区域可以进行使用
4.3：发布文章
输入如下命令，生成静态网页，静态网页会存放在public文件下
hexo g
hexo s
之后就可以去浏览器访问了！可以看到我们发布的文章已经成功在浏览器显示，到这里个人博客网站就已经成功搭建了。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ZpSg9fl-1622032930757)(pictures/image-20210526150824449.png)]](https://img-blog.csdnimg.cn/20210526210506192.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
5.主题的选择：
主题网站：https://hexo.io/themes/ hexo提供了大量精美的主题供我们选择，选择喜欢的主题，在hexo目录下的themes文件夹下使用git clone下载主题，之后再配置文件_config.yml把theme后面修改成下载的主题的名字，之后运行hexo clean ，hexo g即可看到生效的主题。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eN5cZDmN-1622032930757)(pictures/image-20210526161641366.png)]](https://img-blog.csdnimg.cn/20210526210519406.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
如果是有服务器的小伙伴，也可以将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
下载编译安装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 #编译安装
启动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
之后我们需要配置服务器公网ip，编辑配置文件。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TOR7RVwA-1622032930758)(pictures/image-20210526174027780.png)]](https://img-blog.csdnimg.cn/20210526210531881.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
之后再重启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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
人的时间精力都是有限的，建立良好的信息架构和层级，能让用户在有限的时间里快速获取和理解有用的信息，并进行下一步操作。
一张图上有四句话，读者根据 字号 判断先读哪一句。在从测试和调研中收集来的用户需求和期望的基础上，首先明确内容和交互的优先级，确认信息的先后顺序和关联性后，才能够设计出有重点的交互界面。这些行为是为了引导用户在阅读过程中 一眼获取重要信息。
用视觉语言来说，上面的例子只是通过调整 文案的尺寸 去探索如何设计页面层级。同时，通过调整其他平面设计元素例如 字重、颜色、透明度 等等也可以达成同样的效果。当然，这种行为同时适用于 按钮、菜单栏、表单 等其他控件。
通过距离划分视觉元素展示它们之间联系的基础前提是 格式塔心理学 组织原则，这是在构建数字界面时所考虑的设计系统的基础指导理论。因为用户一般通过 视觉元素的位置 来判断阅读顺序，设计视觉元素和控件的位置是为了促使用户完成任务，同时在某些情况下，也会引导用户去做他们所期望的事。在很多情况下，用户会自己选择想看的信息。
“在网络上，人们会一目十行而不是逐字逐句的阅读内容。他们一般倾向于付出更少的精力，以高效的方式达成目标。”
这意味着在一个拥有很多功能的页面上，用户会一目十行的迅速寻找他们的目标，因此 大部分的视觉信息会被屏蔽。
用户在网络上的阅读方式高度取决于：
用户的任务目标
用户习惯
页面层级
页面内容形式
这就非常明显了：最后两个因素是设计师可以控制的，并且考虑到网络设计越来越先进，运用知识和技术推动用户行为，而不是使电子产品成为用户的阻碍。基于这个原因，我提出一个设计原则。
有一些人说如果需要在图标旁边放一个文字说明，图标就没有存在意义了，因为它的认知优先级被降低了，成为了识别序列里的一个负担。因为图标视觉系统是建立在 逻辑原则 上的（和文字表达的意思相同），所以无论是对于有没有相关交互经验的用户而言，图标被认为是可以帮助用户迅速理解功能的。
一个只有文字说明的软件菜单和同时拥有图标和文字的菜单相比，图标可以帮助用户更快的理解。在上图中，根据用户所期望的功能，可以看到菜单中的图标带有要访问页面的标题名。接下来，当用户习惯图标后，图标将会更加简单的引导用户快速的在界面中寻找到所需要的内容。
当设计一个新界面时设计师需要知道，页面必定会被有不同阅读习惯的人使用。为了促进理解，我会把用户分成三种人并且定义为：新手用户、中间用户、专家用户。
新手用户 — 就像你所想象的那样，这是一个 第一次接触 这个界面的用户。如果这个界面是某个系统中的一部分，那意味着始终有某些功能点是他第一次接触到的。这个趋势是说，这个等级的用户 理解页面的速度会低于用户理解页面的平均值，并且花费更多的时间去理解语句直到找到所需的内容为止。
中间用户 — 比新手用户多一些数字产品的使用经验，但并不是一个界面使用专家，理解界面的时间大概是处于平均值左右。
专家用户 — 他们已经使用这个平台很多次了，所以可以较快的阅读，而且并不需要通过阅读所有的内容去理解界面，可以 快速识别元素、布局和交互的视觉呈现。也许正因为这些原因，很多用户 对产品界面的突然改变抱有抵触心理。
现在，想想看如果一个投资 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次定义和清洗，所以只能对通用性质的数据进行采集。而针对性的内容，由数据采集定义后，由前端上报后，可能做到定点，定期精细具体的统计。
两者大致能产出什么数据分析呢？主要以平台/系统这个角度看：
整体分析-通用全埋点
用户活跃、用户留存、用户跳出率、用户停留时长、用户流量分布...
局部与特定分析-手动埋点
关键事件点击率、关键入口渠道流量总计与分布、关键链路漏斗、关键具体区域曝光与停留时长...
为了获取更精准的业务/行为数据，我们一般会采用手动埋点的方式，所以前期 第一阶段会在场景中确定分析目标，然后梳理相应需要的指标，书写明确的埋点需求是很重要的一个环节，书写的足够明确，才能和业务、前端、数据分析师进行准确的沟通，分析目标一致，然后上线后建立相应的数据看板。
注意点：采集方式｜统计口径｜数据精准度校验
那怎么定义数据分析时的埋点需求呢？可以用以下方式去描述：
什么用户=用户定义
什么时间=时间戳
什么环境=地理位置+网络环境+硬件环境+软件环境+哪个页面（来源页面）+什么位置
什么行为=事件ID+命名
什么条件=可以以某个行为或者业务交易为条件
结果如何=用户操作的结果
示例：
一个后台系统悬浮帮助功能使用的情况需求
一个搜索使用的情况需求
这2个是比较细致的数据采集的描述。规则了统计的对象，范畴，以及条件，结果观测等等的需求，大家可以在业务和行为数据相关采集中，试着撰写下这样明确的需求。这样的数据采集才具有精准的分析价值。
追踪问题：用户都是哪些人，谁使用了这些功能 ？
人群标签可以理解为数据型用户画像。为什么在这里提及，因为大量数据（特别是具体的采集数据）都会涉及到人群这个角度。人群也是定量数据中最具有独立观察价值的数据。
人群标签就是根据人群特点，进行描述分类，对人群打标签。我们根据不同的获取路径，可以大致分两类。
一类是利用基本数据进行定义，比较简单直接
从不同的端，可以获取用户的基本来源，如访问端的类型，或地理位置等，可以定义为“客户端用户”、“江浙沪用户”等。
通过唯一用户ID所匹配的一系列用户注册时的基本信息内容，如性别、职业、行业、兴趣等。可以定义为“女性用户”、“定制类用户”等。
还有一类就是复合型自定义，一般是根据用户的业务、行为数据或者类别属性来定义的，它非常的灵活聚焦。
使用某类条件公式来定义某一波用户
如我们将购买能力从高低来分层用户：月购买小于5000的为中购买力用户，大于5000的为高购买力用户，周活跃大于2但无购买记录为潜力用户。
另外一种构建用户范畴的方式：通过“时间、地点、事件”等一系列复杂描述来勾勒圈选用户
如我们定义“第一次访问站点时，在首页有关注过每日推荐“的用户。
这里的复合定义很多时候都会用到多指标多维度。是一种深度结合业务场景来圈选人群，定义用户的方式。
人群标签，不仅帮助我们细分数据，知道“到底是什么人做了什么事”，聚焦使用人群的各项指标健康情况。最终，还可以定位产品，定位人群，精细化运营产品：现在的用户大致都集中在哪些人群中？哪些功能是头部用户需要的？哪些功能最受基础版用户的欢迎等等。在探索商业需求的时候，更容易找到抓钩，去深挖商业价值。
常用画像的场景
2.定量用户画像：用定量的数据做某些值的规则，来圈定用户人群
某产品生命周期使用示例：
性能数据一般指由产品进行页面渲染及前后端交互时，监测到的时长数据。观测系统性能，是因为系统数据量很大时，在产品渲染交互环节中，容易产生卡顿，造成用户体验的下降，导致流失率。而系统性能，一般是由性能监控等产品产出质量报告。在一些浏览器中，也有嵌入的插件统计报告。
这里大致介绍下业界google最新的关于7大性能指标的定义
这其中，最重要的3大核心指标是：
可以通过官方出品，安装 web-vitals-extension 插件来获取三大核心指标，也可以通过通过安装 Lighthouse 插件来获取如下指标，现在已经内置在浏览器中
即选择典型用户角色，针对问题或者内容进行集中测试或者访谈：用户访谈、焦点问题调研、可用性测试等。
比较常用的是：系统可用性量表（SUS）、有效性、满意度和易用性的问卷（USE）
不管哪种方式，我们都是围绕“可用性”这个角度去进行评估和研究的。业内可用性这个词称为：“Usability”「ISO9241/11」中有明确的相关定义：一个产品可以被特定的用户在特定的境况中，有效、高效并且满意得达成特定目标的程度。可用性关注的是用户与对象在互动过程中的有效性（effectiveness）、效率（efficiency）和满意度（satisfaction）。
用户反馈中我们获取到什么样的信息，我们第一：明确用户对此内容的态度，观察用户行径中的顺畅度，感受用户认知反馈。第二：询问其严重程度和影响程度，正面负面情绪。这两层是由表及里的，互相关联。但侧重有所不一样。
通常用到以下几种度量
而这些内容中一般包含数据是
而从场景分我们如何使用这几种度量呢？
不难发现，我们最常用到的是「自我报告式的度量」
它比较宽泛的反应了产品综合情况。这里举一个自我报告度量涵盖的范畴
追踪问题：用户使用后，在情感上反应如何？
初步知晓用户反馈情况后，可以深入用户情绪感受，进行点状问题的挖掘。进而对问题进行定性分析追踪和程度评级。用户在一定严重情绪影响下，是对产品会产生排斥的，所以有时候对情绪的收集，能让我们对内容具备敏感度。且在设计过程中，充分建立共情和同理心。
连续型描述模型往往认为人类的情感状态是分布在若干个维度组成的某一个空间中，不同情感状态之间不是独立的，而是连续的，可以转化的。
当度量情绪变化阶梯时，可以试着使用连续情绪。比如：挫折——》生气、沮丧——》厌烦等。而有些程度词是和时间长度有直接关系的，比如说疲惫。我们需要关注场景特点，用户可能会长时间沉浸式体验时，它是否能接受打扰，是否会因为一些内容受挫。这些都会导致他最终直观感受的好与坏。
举例子来陈述：
情绪评分卡：
在各种用户态度反馈中，我们也可以直接去获取针对性的情绪化度量表进行5分表计量评分。
具体方式：
以下为目标设定的取词示例：
常用评估：
高中低评估
低－会让参加者心烦或沮丧，但不会导致任务失败的问题。
中－这类问题会显著提高任务的难度，但不会直接导致任务的失败。
高－所有直接导致任务失败的问题。遇到这类问题后基本没有可能再完成任务。
综合因素评估
多维度的评估
前两个较常用，后两个看产品及技术配合
对用户体验的影响
预期的发生频率
对商业目标的影响
技术／实现成本评分（0=低，1=中，2=高）
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：酷家乐UED
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如何确定方法？我们需要的是一个完整的度量框架，以及能够聚焦用户体验层为驱动，分解并有力的去解决问题。经过大量的实践和验证得到，抓住一个击破点作为产品体验提升的目标，并一种合理的方式进行推导和验证，这是一种最直接度量体验的标准流程性方式，这里的目标必须是：
体现用户主观感受或者具有行为驱动的目标。
基于业务目标定义+用户诉求了解后，得到的以用户为中心驱动的用户行为。
面对设计圈内已经存在的和部分大厂创造的度量模型，评估优劣后最终我们选取了HEART模型。因为HEART是个比较全面和具备更多扩展性的分析框架，同时足够的权威和标准，而且市面上的模型基本都被HEART的五维囊括。除了这些考虑因素外，再给出以下几个明显的优势点：
1、HEART同时涵盖了定性和定量的不同数据维度。
2、HEART框架同时包含了：宏观和微观的层面
3、HEART模型并不单纯的再定义体验质量，同时也链接了商业价值。把用户体验的原则和收益驱动的指标关联在了一起。
整体的思路是：首先分析业务目标，并就业务目标所落地的产品服务的链路进行拆解，分析链路后，找到其中对体验有决定性影响的因素，提取其因素后，即形成体验目标。
➢示例：商品素材搜索链路
需要注意的是，决定性因素的选取必须在具体的触点中才有意义，脱离后无法判断是否有阻塞性影响。另外，某些设计因素是否是决定性可能在跨触点中体现出来，需要联系整个链路进行交叉分析确定。
决定性因素“搜索结果的分类”，引申出的设计目标为“更清晰的信息层级”、“更完整的信息”。
通过链路触点的分析，决定性因素的提取，设计目标的匹配，我们已对设计优化方向有了准确的了解。这个时候需要从设计师视角做一个完善而精准的”体验目标“的表述。
需要注意的是，HEART模型因其维度的广泛定义，不仅仅可用于体验目标的度量，也可以对产品目标、业务结果进行度量，对体验目标的度量因要从产品因素中剥离出体验问题，相对来说较为复杂，是本次叙述的重点。
通过逐一对度量维度进行体验变量提取，有基础值则进行对比的方式，无基础值则使用趋势的表述方式，结合业务目标的情况下，去概念性假设体验目标的正向或反向结果，最终通过标准的格式提炼出信号，信号的提炼的可以用固定的格式进行书写： 格式：用户 用什么 做什么 体验变量 趋势&数值
体验变量所直接产生的属于原生数据，而一组数据通过某种分析加工后，可以成为一个更有价值的信息，如均值、中位值。选择对数据进行哪种方式处理，受目标的影响较大，每一种数据处理方式，都有指向特征，通过与目标的匹配，可以选取出合适的数据处理方式。
确定指标的注意事项
案例A
度量维度：愉悦度
信号：家装设计师 使用搜索功能 搜索素材时 易操作性达到4.0
体验变量：易操作度
数据：易操作度评分
指标：易操作度评分的均值
4.另外，除了准确的定位、度量、转化的逻辑推导外，参考业务目标进行范围收敛，也是非常重要的工作，它影响着每一个推导环节，以避免偏离产品方向，有效的过滤弱关联或无关联的因素。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：酷家乐UED
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1、了解你的用户
因为你的用户是最终评判用户界面好坏的人，所以用户即是你的终极目标，不了解用户需求，即使你的界面做得再好，也不是用户想要的产品。了解用户的需求是你开始做界面的前提，试着沉下心来仔细观察用户的喜好，并了解他们的技能水平和体验观察他们在界面中如何操作。不要迷恋于追逐设计趋势的更新，或是不断添加新的功能，始终记住，首要的任务是关注你的用户，这样才能创造出一个能让用户达成目标的界面。
2、重视UI模型
在软件中，用户的大部分时间都消耗在界面操作中，比如数据录入、数据修改、数据查阅等等，这点与浏览为主的网站类页面的用户操作是完全不同的，所以我们无需画蛇添足。用户希望在新创造的界面中看到那些已有的、相似功能的或遵循基本操作方式的软件界面，即可利用已成惯例的UI模型，使用户产生亲切感。
3、保持一致
用户需要知道一旦他们学会做某项操作，那么下次也同样可行。语言、布局和设计是需要保持一致性的几个界面元素。一致性的界面可以让用户对于如何操作有更好的理解，从而提升效率。
4、清晰的视觉层次
设计时，要让用户把注意力放在最重要的地方。每一个元素的尺寸、颜色还有位置，它们为理解界面共同指明了道路。清晰的层级关系将对降低外观的复杂性起到重要作用。
5、提供反馈
界面要始终保持和用户的沟通，不管是他们的行为对错与否。随时提示用户的行为：状态更改、出现错误或者异常信息。视觉提示或是简单文字提醒都能告诉用户，他们的行为是否能够达到预期的结果。
6、容错机制
无论你的设计多么的清晰明了，用户都会犯错。你的界面应当允许并要为用户提供可以撤销行为的方式，并且对五花八门的输入数据尽量宽容（没人愿意只是因为填错了生日的格式而重头再来）。同样，如果用户的行为引起了一个错误，在恰当的时机运用信息显示什么行为是错误的，并确保用户明白如何防止这种错误的再次发生。
7、鼓励用户
一旦用户在完成了关键操作，可以通过弹出对话框等方式及时告知用户。值得注意的是，把一个复杂的流程任务分解为若干简单步骤，将会更显繁复和让人精力分散。所以无论正在执行的任务有多么复杂和漫长，在界面上要保持流程的不间断性。
8、语言有亲和力
所有的界面或多或少都有文字在其上，让文稿尽量口语化，而不是华美辞藻的堆砌。为行为提供清晰、简明的标签，保持简朴的文字叙述。。
9、保持简洁
最好的用户界面就是没有界面。优秀的软件界面中，你看不到华而不实的UI修饰，更看不到那些用不到的设计元素。所以当想着是否要在界面上加一个新功能或是新元素的时候，再思考一下：用户或者界面中真的需要这些么？为什么用户想要在这里当这个小巧的动态图标？是否只是因为出于自我喜好和页面的漂亮而去添加这些元素？优秀的UI工程师做出来的软件界面不会十分华丽，界面中没有任何分散用户注意力打搅用户操作的元素。甚至应该达到在用户使用系统的时候完全注意不到页面和操作复杂的问题，一切都应该是顺理成章的。
（图片来源于图虫创意）
文章来源：快资讯 作者：德方科技
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
第一步：
-
//安装
-
npm install crypto-js --save-dev
第二步：在src目录下新建个放公用js文件夹(common)，再建一个AES.js文件，例如：
第三步：在AES.js中填写如下代码，key密钥长度则可以是128，192或256位（默认情况下是128位），正常情况下固定16位数即可
-
import CryptoJS from 'crypto-js';
-
-
export default {
-
//随机生成指定数量的16进制key
-
generatekey(num) {
-
let library = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-
let key = "";
-
for (var i = 0; i < num; i++) {
-
let randomPoz = Math.floor(Math.random() * library.length);
-
key += library.substring(randomPoz, randomPoz + 1);
-
}
-
return key;
-
},
-
-
//加密
-
encrypt(word, keyStr) {
-
keyStr = keyStr ? keyStr : 'abcdsxyzhkj12345'; //判断是否存在ksy，不存在就用定义好的key
-
var key = CryptoJS.enc.Utf8.parse(keyStr);
-
var srcs = CryptoJS.enc.Utf8.parse(word);
-
var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
-
return encrypted.toString();
-
},
-
//解密
-
decrypt(word, keyStr) {
-
keyStr = keyStr ? keyStr : 'abcdsxyzhkj12345';
-
var key = CryptoJS.enc.Utf8.parse(keyStr);
-
var decrypt = CryptoJS.AES.decrypt(word, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
-
return CryptoJS.enc.Utf8.stringify(decrypt).toString();
-
}
-
-
}
第四步：在需要的地方引入
import AES from "@/common/AES.js";第五步：调用
-
// var keys = AES.generatekey(16);
-
-
//如果是对象/数组的话，需要先JSON.stringify转换成字符串
-
// 不传key值，就默认使用上述定义好的key值
-
-
var encrypts = AES.encrypt(JSON.stringify(cars));
-
var dess = JSON.parse(AES.decrypt(encrypts));
-
-
// var encrypts = AES.encrypt('1234asdasd');
-
// var dess = AES.decrypt(encrypts);
-
-
console.log(encrypts)
-
console.log(encrypts.length)
-
console.log(dess)
特别提示：当解密的时候是为空的时候（也没有报错），那么就一定是你的key长度不符合规范， 可以调整为key长度为16位。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：csdn
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
首先项目是基于vue开发的项目
需要引入js
import cryptoJs from 'crypto-js'
// DES加密
export const encryptDes = (message, key) => {
return cryptoJs.DES.encrypt(message, cryptoJs.enc.Utf8.parse(key), {
mode: cryptoJs.mode.ECB,
padding: cryptoJs.pad.Pkcs7
}).toString()
}
package com.huihui.until;
import java.security.SecureRandom;
import java.util.Scanner;
import javax.crypto.Cipher;
import javax.crypto.SecretKeyFactory;
import javax.crypto.spec.DESKeySpec;
import org.apache.commons.codec.binary.Base64;
/**
* <b>类说明：DES</b>
* <p>
* <b>详细描述：</b>
* @since 2019年3月31日 下午17:00:16
*/
public class DESCryptUtil {
private static final String DES = "DES";
public static final String desKey = "ba54ee44";
public static String doEncrypt(String plainMessage, String hexDesKey) throws Exception {
byte desKey[] = hexDesKey.getBytes();
byte desPlainMsg[] = plainMessage.getBytes();
return Base64.encodeBase64URLSafeString(desCrypt(desKey, desPlainMsg, Cipher.ENCRYPT_MODE));
}
/**
* 获取解密后的字符串
* @param hexEncryptMessage
* @param hexDesKey
* @return
* @throws Exception
*/
public static String doDecrypt(String hexEncryptMessage, String hexDesKey) throws Exception{
if (hexEncryptMessage == null) {
return null;
}
byte desKey[] = hexDesKey.getBytes();
byte desPlainMsg[] = Base64.decodeBase64(hexEncryptMessage);
return new String(desCrypt(desKey, desPlainMsg, Cipher.DECRYPT_MODE));
}
/**
* 获取解密后的数组
* @param desPlainMsg
* @param hexDesKey
* @return
* @throws Exception
*/
public static byte[] doDecryptByte(byte[] desPlainMsg, String hexDesKey) throws Exception{
if (desPlainMsg == null) {
return null;
}
byte desKey[] = hexDesKey.getBytes();
return desCrypt(desKey, desPlainMsg, Cipher.DECRYPT_MODE);
}
private static byte[] desCrypt(byte[] desKey, byte[] desPlainMsg, int CipherMode) throws Exception{
try {
SecureRandom sr = new SecureRandom();
DESKeySpec dks = new DESKeySpec(desKey);
SecretKeyFactory keyFactory = SecretKeyFactory.getInstance(DES);
javax.crypto.SecretKey key = keyFactory.generateSecret(dks);
Cipher cipher = Cipher.getInstance(DES);
cipher.init(CipherMode, key, sr);
return cipher.doFinal(desPlainMsg);
} catch (Exception e) {
String message = "";
if (CipherMode == Cipher.ENCRYPT_MODE) {
message = "DES\u52A0\u5BC6\u5931\u8D25";
} else {
message = "DES\u89E3\u5BC6\u5931\u8D25";
}
throw new Exception(message, e);
}
}
/**
* 获取8位的key
* @param str
* @return
*/
public static String processString(String str) {
if(str==null||"".equals(str)) {
return "";
}
StringBuilder sb = new StringBuilder();
for(int i=0;i<8;i++) {
int index = i<<2&(32-i);
sb.append(str.charAt(index));
}
return sb.toString();
}
public static void main(String[] args) throws Exception{
DESCryptUtil se=new DESCryptUtil();
for (int i = 0; i < 5; i++) {
Scanner scanner=new Scanner(System.in);
/*
* 加密
*/
System.out.println("请输入要加密的内容:");
String content = scanner.next();
System.out.println("加密后的密文是:"+se.doEncrypt(content, desKey));
/*
* 解密
*/
System.out.println("请输入要解密的内容:");
content = scanner.next();
System.out.println("解密后的明文是:"+se.doDecrypt(content, desKey));
}
}
}
这是我是在在线生成公钥私钥的网站中生成了自己的公钥私钥用来测试
前台
import JsEncrypt from 'jsencrypt'
// RSA加密
export function encryptRsa(publickey, message) {
const rsa = new JsEncrypt()
rsa.setPublicKey(publickey)
return rsa.encrypt(message)
}
后台
package com.huihui.until;
import org.apache.commons.codec.binary.Base64;
import com.googosoft.config.GlobalConstants;
import javax.crypto.Cipher;
import java.security.KeyFactory;
import java.security.KeyPair;
import java.security.KeyPairGenerator;
import java.security.NoSuchAlgorithmException;
import java.security.SecureRandom;
import java.security.interfaces.RSAPrivateKey;
import java.security.interfaces.RSAPublicKey;
import java.security.spec.PKCS8EncodedKeySpec;
import java.security.spec.X509EncodedKeySpec;
import java.util.HashMap;
import java.util.Map;
public class RSAUtil {
private static Map<Integer, String> keyMap = new HashMap<Integer, String>(); //用于封装随机产生的公钥与私钥
public static void main(String[] args) throws Exception {
//生成公钥和私钥
genKeyPair();
//加密字符串
String message = "df723820";
//GlobalConstants.PUBLICKEY 公钥加密
String messageEn = encrypt(message,GlobalConstants.PUBLICKEY);
System.out.println(message + "\t加密后的字符串为:" + messageEn);
//GlobalConstants.PRIVATEKEY 私钥解密
String messageDe = decrypt(messageEn,GlobalConstants.PRIVATEKEY);
System.out.println("还原后的字符串为:" + messageDe);
}
/**
* 随机生成密钥对
* @throws NoSuchAlgorithmException
*/
public static void genKeyPair() throws NoSuchAlgorithmException {
// KeyPairGenerator类用于生成公钥和私钥对，基于RSA算法生成对象
KeyPairGenerator keyPairGen = KeyPairGenerator.getInstance("RSA");
// 初始化密钥对生成器，密钥大小为96-1024位
keyPairGen.initialize(1024,new SecureRandom());
// 生成一个密钥对，保存在keyPair中
KeyPair keyPair = keyPairGen.generateKeyPair();
RSAPrivateKey privateKey = (RSAPrivateKey) keyPair.getPrivate(); // 得到私钥
RSAPublicKey publicKey = (RSAPublicKey) keyPair.getPublic(); // 得到公钥
String publicKeyString = new String(Base64.encodeBase64(publicKey.getEncoded()));
// 得到私钥字符串
String privateKeyString = new String(Base64.encodeBase64((privateKey.getEncoded())));
// 将公钥和私钥保存到Map
keyMap.put(0,publicKeyString); //0表示公钥
keyMap.put(1,privateKeyString); //1表示私钥
}
/**
* RSA公钥加密
*
* @param str
* 加密字符串
* @param publicKey
* 公钥
* @return 密文
* @throws Exception
* 加密过程中的异常信息
*/
public static String encrypt( String str, String publicKey ) throws Exception{
//base64编码的公钥
byte[] decoded = Base64.decodeBase64(publicKey);
RSAPublicKey pubKey = (RSAPublicKey) KeyFactory.getInstance("RSA").generatePublic(new X509EncodedKeySpec(decoded));
//RSA加密
Cipher cipher = Cipher.getInstance("RSA");
cipher.init(Cipher.ENCRYPT_MODE, pubKey);
String outStr = Base64.encodeBase64String(cipher.doFinal(str.getBytes("UTF-8")));
return outStr;
}
/**
* RSA私钥解密
*
* @param str
* 加密字符串
* @param privateKey
* 私钥
* @return 铭文
* @throws Exception
* 解密过程中的异常信息
*/
public static String decrypt(String str, String privateKey) throws Exception{
//64位解码加密后的字符串
byte[] inputByte = Base64.decodeBase64(str.getBytes("UTF-8"));
//base64编码的私钥
byte[] decoded = Base64.decodeBase64(privateKey);
RSAPrivateKey priKey = (RSAPrivateKey) KeyFactory.getInstance("RSA").generatePrivate(new PKCS8EncodedKeySpec(decoded));
//RSA解密
Cipher cipher = Cipher.getInstance("RSA");
cipher.init(Cipher.DECRYPT_MODE, priKey);
String outStr = new String(cipher.doFinal(inputByte));
return outStr;
}
}
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：csdn
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com