文字，是最常见的动效对象之一。我们可以通过对透明度、位置或者角度的改变，制作出丰富的动态效果。但你可能不知道的是，AE内置了超多的文字预设，只需用鼠标点击几下，就可以完成复杂丝滑的文字动效。 

AE文字动效预设使用方法 

       在AE的窗口中打开“效果和预设”面板，所有和文字有关的效果都在动画预设中的Text文件夹内，共十七种动效类型

       将动效预设拖动到对象上，即可应用动效。

17种动效预设预览

      十七种类型分别为：3D文字动效、入场动效、离场动效、模糊动效、曲线动效、表达式动效、填充与描边动效、图形动效、亮度与透明度动效、机械化动效、多样化动效、多行文案动效、拟态化动效、路径动效、旋转动效、缩放动效以及字间距动效。

预设搭配组合

          有些效果可以相互叠加组合，理论上我们能做出成百上千种不同的效果。 

文章来源：UI中国       作者：设计师深海

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

前阵子回老家的时候，在老人家里看到这样一个机器，这个机器的功能主要为家庭教育、视频通话与监控等等。

如果这几个主要功能入口屏幕占比能更大些、界面中的菜单导航层级能再简化些...也不至于连我自己想找到一个能跟亲人通话的入口都比较困难，更别说老人了。

当然了，这个机器最后只被家里的老人当成，一个只会定点报时的“摆设”。

除了把字号放大，适老化设计还需要做什么？以下分享京东直播在适老化设计上的几点探索。

强化对比——看清信息

直到近几年才知道，家里的长辈喜欢发微信语音，其实是因为老花眼打字不方便。

在适老化设计中，需要注意界面中的信息与背景的对比度，是否足以让老年人清楚识别，这涉及到对色域跨度的调整。

我们通过 H（色相）S（饱和度）B（明度）的数值来划分色域。如下图，在统一H值的情况下，规定了10个标准的S、B值，从而形成一个色带。所以我们在前后景的颜色选择上，需要满足跨度至少为5 ，才能让老龄用户清晰地识别到前景信息。

比如在京东直播的老年版界面中，不仅加深了原标准版中的浅灰色文字信息，同时对一些暗文设计也进行了调整，如搜索框暗文“点击搜索主播名/商品”等内容，提升暗文明度以确保与其背景间的色域跨度大于5。

所以在适老化设计中，需要让界面中的信息与其背景间的色域跨度至少为5，才能足以让老年人看清信息。

传达共识——看懂内容

90前的人想要表示“打电话”，会用手比出6的姿势贴在耳边；而现在的00后，会用手掌当作手机的样子贴在耳边来表示…

在让老年人能够看清界面中的信息之后，我们的设计还需要有更清晰的表意信息，让他们能够看懂。其中的关键在于，这些信息是否能够“传达共识”。

无法传达共识的设计，就像00后的小孩突然摆出用手掌贴在耳边的姿势，家里的老人看了可能也无法领会到，这表示的是“打电话”的意思。

在设计中想要”传达共识”，需要尽量避免图形icon的单独出现，用纯文字或图+文的形式表达。不过除了给图标加上文字，其实我们在图标本身的设计上也可以进行适当调整。

比如同样表达“话费充值”，是用手机还是座机，哪个更能让那个年代的长辈理解？哪些事物是那个年代惯用的，哪些事物是在那之后才诞生的？哪些是我们日常生活中就存在的东西，哪些又是专属于互联网世界的产物呢？

所以在适老化设计中，除了帮界面里的所有图标加上文字以外，在图标的设计上也可以结合年代、群体环境的因素，让图形表现的是老龄年代惯用的、日常生活中固有的内容，让老年人也能轻松领会到，这表示的是什么。

联系认知——找到点击区

就算没使用过手机的人，在生活中看到凸起的事物也会忍不住按一按；但如果他们看到的是一个圆圈，就不太可能有这种反应了。

在适老化界面中，需要代入更多能够联系生活经验的认知锚点，帮助老年人顺利在界面中找到点击区域。其实不妨回想一下，即使是现在熟练使用手机的我们，也是从当时iOS4的拟物化界面，开始慢慢地培养心智，才能到如今就算看到一个线框、甚至只有纯文字，也能轻松分辨出哪里是可点击的按钮。

而当下的老人，也正像当时一开始接触智能手机的我们，需要在界面中找到与自己生活经验的对照，才能利用熟悉的事物作为认知锚点，帮助自己理解联系上一些陌生的概念。

比如将界面中可点击的区域强化投影或高光，帮助老人们联系起生活中对凹凸的认知试着去点一点。除此之外，我们还需要把一些会对点击认知产生干扰的内容进行弱化。

比如在标准版的京东直播中，存在像红包雨、奖券这种运营标签，其样式看起来与按钮很像，但实际为不可点区域，所以在老年版界面中弱化了这些标签，将他们与所在的列表内容作为一个整体背景，让视觉重心聚焦在可点击的按钮上。

所以在适老化设计中，除了需要对可点击区域强化投影以联系认知，也需要将一些不可点击的干扰项进行弱化，保证视觉重心最终落在可点击区域上。

行为指引——完成点击

美国新泽西北部一家电影院做了一个潜意识实验：在电影中每隔5秒就插入0.03秒的字幕，写着“吃爆米花”和“喝可乐”，虽然人的肉眼无法捕捉到0.03秒出现的事物但它们可以堆积成潜意识，随后当天影院的可乐销量增加15%，而爆米花则增加了58%。

在适老化设计中，我们还可以运用潜意识作为界面中的隐形向导，帮助老年人顺利完成目标行为。

比如在按钮的文案中包含行为动作、结果去向的内容，像“点击领券”中的“点击”——对当下需要完成的动作描述，“领券”——动作完成后的结果去向，让每个一眼晃过的引导效果堆积，成为界面中的隐形向导，帮助老年人了解如何完成操作。

像在京东直播的老年版界面中，也同样设计了这些隐形向导。比如在列表上加入“点击进入直播间”的按钮，引导老年人顺利了解到“我当下可以进行点击”以及“我点击后可以进入直播间”的信息。

除了对按钮文案的调整，我们还可以为一些非明确的可点击区域加上行为指引。比如在主播力荐中，每个商品图片都可点击看对应的主播讲解，因此为每个商品加上带明确行为意图的点击按钮，避免让人以为这只是一些展示图而并不知道这其实都是可以点击的。

所以在适老化设计中，可以在按钮文案中加入行为动作、结果去向的内容，同时对一些非明确的可点击区域加上行为按钮，发挥潜意识的隐形引导作用，帮助老年人顺利地完成目标行为。

以上仅展示阶段性成果，设计方式、设计理念等，我们的探索远没有结束，期待下一次分享中与你们的交流。

文章来源：站酷   作者：SDL艺术实验室

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

移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。

如果这几个主要功能入口屏幕占比能更大些、界面中的菜单导航层级能再简化些...也不至于连我自己想找到一个能跟亲人通话的入口都比较困难，更别说老人了。

接下来为大家分享精美的app UI设计案例：

蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。

--手机appUI设计--

调查问卷，是一个低成本快速收集资料的定量分析工具。这是个看起来简单，产出的问卷也看似很简单，但是在整体设计的过程却是需要很多的思考和预备。

关于调查问卷，会分成三个部分来解说，

• 第一部分是关于「设计前的准备」
• 第二部分是关于「如何设计问卷」
• 第三部分是关于「数据清理和产出问卷报告」

废话不说，直接开干！

着手设计问卷前，先问

1. 为什么做问卷

这个是问卷的目的，也直接影响后面问题的设计。

2. 如何使用问卷的研究结果

这是关于问卷解决方案的落地。不需要太过细致的落地计划，但是至少要清楚，这份问卷的研究成果，可以获得多少支持力度。不管问卷发现了多么伟大的问题，如果没有落地，其实是没有无意义。也切忌不要今年做的研究结果，明年来实施，那问卷的时效性和准确性就会大打折扣了，因为市场的瞬息万变。

问卷的目的

这是做所有事前，都要问的问题，「为什么做 Why」。而这个问题为什么重要呢，因为这会关系到设计问卷的核心内容是什么，会影响问卷的构成，当然最后也会产出不同的结果。

问卷的目的主要可以分为六个方面

1. 收集用户信息

很多时候，我们或许知道理想目标用户是谁，但是谁才是真正使用我们产品的用户呢？了解真正使用的用户，可以对用户进行更针对性的分析和设计。

2. 了解用户使用习惯

了解用户在产品上是如何使用产品的，以及用户的使用路径是否按着我们期待的方式进行，这是很有必要，这也是一个验证的过程。

2. 满意度

了解用户对产品的满意程度，对于用户不满意的方面，可以进行归纳总结，并给出合理的解决方案

3. 建议反馈、吐槽、好评

从问卷中收集用户的心声，明白槽点是什么。同时也收集用户的好评，这也是激励团队一个很好的方法，因为是直接来自用户。

4. 体验优化

对一个成功的产品来说，它要好用，它也要好看。产品有大改版前，可以用问卷来评估整体产品的体验如何，以便在重新设计的方向上能更好聚焦。

5. 需求验证

很多时候，需求可能没那么明确，用户和产品间始终存在着 gap， 所以我们有时对方案琢磨不定时，可能会试运行，后续看用户反馈。通过合理设计问卷，我们也可以稍微窥探到用户的想法

但是对需求的验证，单通过问卷还是比较难的，只能窥探到比较浅的一层，最好后续可以对用户进行访谈来做后续跟踪，以便了解事情的全面。

这里要注意的是，问卷不适合探索用户的新的需求，或者要验证很精准的信息等比较复杂性的问题。

如果你问用户，近期会推出新功能，问他会不会用。大致上，你得到的回答都是肯定。很多时候，同意比拒绝更简单。

问卷问题的分类

根据提问的方式，可以分为 「是什么」「怎么样」「怎么办」

1. 是什么

主要是用户信息、使用习惯等问题。

例如，年龄层、职业、使用产品目的、知道产品的渠道、使用频率、使用竞品软件、整体满意度等

2. 怎么样

主要是询问用户原因，比如打这个分数的原因，某功能使用如何等

3. 怎么办

主要是询问用户的建议、期待产品改进的地方

设计问题需注意几点

问卷中并不是所有问题都适合问，有一些比较敏感的问题需要去避免，以免激起用户的负面情绪

1. 敏感性问题

个人信息类的问题比较容易会有敏感信息存在，就像你问用户工资区间，和在问卷最后告知用户参与问卷都有奖品，需要填写收货地址。很明显收货地址的准确性会比工资更高。

2. 措辞严谨

• 无错别字，文明用词
• 用词不产生歧义，准确表达；比如平时，比较多、近期，每个人对此理解是不同的，要提供明确的时间节点
• 一个问题，就只问一件事
• 尽量用陈述语句，不使用反问句、疑问句、否定句，用户可能无法准确明白，特别是否定句，用户有可能看成肯定句。
• 避免用语过于口语话，不中英文夹杂，除非名词已完全普遍。根据目标群体的不同，会有差异性。比如 iOS 系统，不一定所有人都知道，这指的是苹果的手机系统。
• 标准用词，尽可能或不使用缩写，比如 h，hr, 直接写小时，会更好。

3. 问卷的顺序

先简单后复杂，并注意整体逻辑性的表达。循序渐进，如果一开头就是很难的问题，用户很容易放弃答题

4. 问题长度

尽量保持所有问题在一个差不多的长度呢，保持一样的节奏。避免时长时短

5. 避免专业词汇

很多时候，我们会用一些所谓的“行话”来表达，但是在问卷当中，无法保证用户同样是理解的，而且也会让用户产生距离感，非必要情况下，不要使用专业词汇

6. 选择题枚举要穷尽

题目数最好不多于 7 个，太多也会造成用户选择困难，最后记得加个其他并提供文本框输入

7. 避免互斥、重复、相似

问题避免前后矛盾，造成用户困扰，也不要重复或相似度极高的问题，除非这个问题是陷阱题，为了检验用户是否认真答题。但是在数量有限的问题中，一般比较少使用陷阱题

8. 保持开放性

为所有选择的选项，加入「其他——」「以上都不是」「不知道」，用户可能会觉得问题或答案不匹配，而不知道选什么，这时需要给用户一个出口，避免产生无效数据

9. 避免询问引导性的问题

大部分用户认为 XX 功能，很好用，你觉得呢？

如果看到这样问题，大概可以从中读出两个信息，1. 大家都觉得好用 2. 平台希望我说好用。

这个问题所传达出来的隐藏含义会引导用户做出不真实的反馈，这是没有意义的问题

10. 避免让用户选择「 是/否」「真/假」「好/坏」

强制选择非黑即白，大部分情况下没什么意思，因为用户可能不确定。这个问题本身也没有太大价值，也会错过用户一些比较有趣的回答。

所以如果这个问题的目的，是一定要知道的，可以更改提问的方式。

对于用户的问题，答案要可以量化表达，来产生数据，才便于后续数据的分析

11. 避免问用户将来的事，或回忆许久前的事

当人们将自己的行为投射到未来时，通常会过于简单化和理想化，人们更擅于解释当下进行的内容。

所以，如果要知道特定环境下用户的操作，则要配合合适的场景预设，并且是用户熟悉的场景。或者可以直接问，今天你会如何如何

所以可以通过询问今天的行为来，确定将来会不会使用。当然这不是绝对的，毕竟未来存在太多变数。

对于许久前的用户的操作行为，也尽量不询问，因为会忘记，而当强迫他去思考时，他可能自己脑补，产生不准确的记忆，进而对研究结果产生偏差。

12. 其他

问卷中存在多选题，必选题，选填题，记得预览问卷时，注意问题平台有无自动添加文字说明。

不要用 checkbox, radio 来区别多选和单选，这是不能准确的传达，也有可能用户没有注意到，或者就不清楚，而使用文字的表述会更清晰，不会产生歧义。

必选题，选填题，如果问卷平台，也只是用*号来表达必选时，建议在文字上也加上这样的说明

设定日程安排

整体问卷的过程需要时间，所以也需要的具体的日程安排，以便整体问卷的进行是井然有序。

日程安排中，要包括：

• 确定问卷的目标人群、确定问卷目的
• 问卷设计时间
• 问卷评审时间
• 问卷内测时间
• 问卷投放时间、时间长度
• 产出问卷报告

最后的话

调查问卷从准备到产出报告，需要一个过程，建议与其他设计师或 PD 来一起配搭工作，更高效的完成，一个人去做，总是会有一些盲点，并且会比较大的压力。

如果你在问卷方面是新手，也建议找个有经验的设计师或 PD 来做你顾问，减少一些不必要的坑。

文章来源：优设网       作者：箴盐设计

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

JS学习笔记

js和java的异同点

变量声明

函数声明

js中的变量提升和函数提升

为什么有变量提升

总结

js和java的异同点

首先，js的语法和kottlin的语法有些相似。比如var，方法声明用



  function 方法名称 (参数名称...){

  //方法内部逻辑

  }



还有变量类型声明 :



数据类型 : 变量名=值



区别：一：js的数据类型和java类似。只不过js中的数据类型number将java中的int，double，float整合了。

二：js中可以不用声明变量类型。变量不声明数据类型的话，那么他的类型取决于当前的值是什么数据类型。举例：



var num=0;

num-"lyyyyyyyyyyyyyy";

num=[];

num={};



三：js中的类型判断：



判断基本类型，返回一个字符串

1

console.log(typeof '');//string

console.log(typeof []);//object

console.log(typeof {});//object

console.log(typeof 1);//number

console.log(typeof null);//object

console.log(typeof undefined);//undefined

console.log(typeof true);//boolean

console.log(typeof function(){});//function

console.log(typeof /\d/);//object





检查某个对象属于哪个构造函数，返回true/false

1

function A(){};

function B(){};

let a = new A();

console.log(a instanceof A);

console.log(a instanceof B);

console.log([] instanceof Array);//true

console.log({} instanceof Object);//true

console.log(/\d/ instanceof RegExp);//true

console.log(function(){} instanceof Object);//true

console.log(function(){} instanceof Function);//true





变量声明

js的变量声明其实大体上可以分为三种：var声明、let与const声明和函数声明。



函数声明

doSomething();

 

function doSomething() {

    console.log('doSomething');

}

var foodoSomething= 2;



你觉得上面会输出什么？TypeError吗？其实输出的结果是foo。这就引出了我们的问题了，当函数声明与其他声明一起出现的时候，是以谁为准呢？答案就是，函数声明高于一切，毕竟函数是js的第一公民。



那么，下面的例子呢？



doSomething();

 

function doSomething() {

    console.log('1');

}

 

function doSomething() {

    console.log('2');

}



当出现多个函数声明，那怎么办呢？以上代码输出结果为2。

因为有多个函数声明的时候，是由最后面的函数声明来替代前面的。



domeSomething();

 

var domeSomething= function() {

    console.log('domeSomething');

}



var domeSomething = function() {}这种格式我们叫做函数表达式。



它其实也是分为两部分，一部分是var foo,而一部分是foo = function() {}，参照例2，我们可以知道，这道题的结果应该是报了TypeError(因为foo声明但未赋值，因此foo是undefined)。



js中的变量提升和函数提升

在js中对变量进行操作后打印值经常会出现undefined的现象。其实原因是因为js中有一个叫做变量提升的功能。举例：

1

var data="lyyyyy";

getData();

function getData(){

//第一次打印

console.log("data值为: ", data);

var data="yyyyyyy";

//第二次打印

console.log("data值为: ", data);

}



打印的值第一个为undefined，而第二个打印的值为yyyyy.



原因：

在执行getData()方法的时候会在函数内部首先将变量的声明提升到第一步。

然后再声明函数内部的函数（如果函数内部有函数的话）。

之后才会按照方法内部的逻辑先后顺序执行代码。前两步只是声明！！！

看到这里应该就已经知道为什么会有上面那样的结果了。



实际的方法内部代码执行顺序应该是这样的：



function getData(){

//一。声明变量

var data;

//二。声明函数（如果函数内部有函数的话）



//三。按照代码的顺序执行

console.log("data值为: ", data);

data="yyyyyyy";

//第二次打印

console.log("data值为: ", data);

}



看到拆分后的代码执行顺序对结果也就不迷茫了。



为什么有变量提升

那么为什么会出现变量提升这个现象呢?



其实js和其他语言一样，都要经历编译和执行阶段。而js在编译阶段的时候，会搜集所有的变量声明并且提前声明变量，而其他的语句都不会改变他们的顺序，因此，在编译阶段的时候，第一步就已经执行了，而第二步则是在执行阶段执行到该语句的时候才执行。



总结

1.js会将变量的声明提升到js顶部执行，因此对于这种语句:var a = 2;其实上js会将其分为var a;和a = 2;两部分，并且将var a这一步提升到顶部执行。



2.变量提升的本质其实是由于js引擎在编译的时候，就将所有的变量声明了，因此在执行的时候，所有的变量都已经完成声明。

3.当有多个同名变量声明的时候，函数声明会覆盖其他的声明。如果有多个函数声明，则是由最后的一个函数声明覆盖之前所有的声明。

————————————————
版权声明：本文为CSDN博主qq_45272690的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

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

用户体验设计就像是一场直面自我的修行，无论是从认知提升、工作能力等维度，都在时间和实践中不断去促进自我对事物的探索，在过程中不断获取对世界的感知和成就感。在学校里所接触的关于交互设计的认知，大部分局限于产品领域与基础交互，而后逐渐过渡到交互体验与设计的结合并且作用于商业，成长过程中也会不断思考，这次想聊聊设计价值，大概分为三点：价值思维、价值判断、价值体现。

建立价值思维

我的设计能够给用户/产品产生什么价值？如何体现设计的价值？可能很多朋友也会和我一样有这样的疑惑，假如能够在接触需求后便思考该需求背后的价值，那对应的行动也会有很大差异性。

1. 设计的困境

可能对于大部分的设计师而言，作为主要的执行力，需要肩负起项目的责任，所以会把大部分时间都投身在项目需求和日常沟通来提升自身能力，很少有剩余时间去沉淀已做完的设计，只有在产品体验会或者其他渠道的反馈中获取最后的问题，久而久之就像是打补丁，既无法体现设计价值，自身能力也无法得到完整的提高。然而促使设计师进步的往往不是技能的熟练，而是对业务需求思考的广度和深度。因此需要树立起价值的概念，价值可以驱使行动产生改变。

2. 价值驱使行动

价值观因人而异，而价值观会影响一个人的行为引导其做出选择，对价值的思考取决于思维上升空间有多大。因此需要有一个思维模型能够帮助我们更好的建立起价值思维，可以帮到我们更加有逻辑的思考。相信许多朋友都听过「Why-How-What」即黄金圈法则，个人认为可以从日常需求中帮助设计师建立起一套价值思维。黄金圈解析：

• Why：为什么做一件事，基于什么样的目标
• How：怎么做，是实现目标的途径
• What：具体的行为

△ 图片来自网上

3. 黄金圈法则实践

了解黄金法则后，我们看看如何把黄金圈的思维模型运用到工作中。

假设我们接到一个「商城系统」的设计需求，可以尝试这样拆分：

WHY：我为什么做

• 商城是产品重要的盈利渠道，能够为产品带来核心收益
• 设计赋能商业化，是设计的价值体现
• 能够帮助设计师更好理解产品的商业化结构

关注点：站在产品角度，对产品真正的帮助和提升

HOW：我要怎么做：

• 梳理玩家的购物场景和细分需求
• 整理同类竞品的优缺点，挖掘机遇点
• 明确设计目标，突出商品展示特点

关注点：需求做的更好，超出玩家预期

WHAT：需要做什么

• 高效便捷的购买流程
• 兼顾玩家的情感诉求（炫耀、仪式感）等细分场景设计

关注点：让玩家使用更加高效，满足多种场景

综上所述，设计师处于不同的阶段，所关注的价值层面对应的行动也会不同，不仅要求设计师在需求之外还需要全局思维的思考延伸，了解当前产品阶段最需要的是什么，更多需要设计师自我审视，建立价值思维的思考模型，不仅仅停留在行动层的思考。

（我为什么要做）价值观——（我要怎么做）能力——（我要做什么）行动

形成价值判断

「黄金圈」法则可以帮助我们建立起价值思维，然而每个设计师有各自的价值衡量，以下是我认为的一些价值维度：

1. 层次与目标

日常我们总会接受到大大小小的需求，简单和复杂会掺杂混合，从工作角度而言需求是都要做的，但是从设计价值的角度而言，需求是有轻重缓急之分。那如何进行价值判断呢，一般的设计需求从目标上可分为三个层次：

• 基础目标：满足「可用性」
• 体验目标：满足「易用性」
• 惊喜目标：满足前两者基础，让用户感受「愉悦感」并且超出预期

2. 二八法则分配

当有了一个基础划分后，就可以对需求进行合理评估，考虑到现实情况下通常会面临这些情况：

时间紧迫：日常需要大量的时间进行协作沟通和跟进

精力有限：任务重加班多，无法长时间保持高效的工作状态

所以可尝试根据二八法则对时间精力进行分配，对于一些价值较低的需求，可以和需求方充分沟通，过滤无效信息后快速处理；对于价值较高的需求，投入大量时间与精力设计与打磨。对于初中级的设计师来说，满足「可用性」和「易用性」是仍需要多加锤炼的基础能力，对于高级以上的设计师来说，有了一定的经验下达成前两者较为容易，可以把更多的时间精力投入在「愉悦感」的设计上。

体现设计价值

前面讲了价值与判断，但设计无论是赋能或者是驱动，还是需要明确最终目标是什么，我的理解是最终服务于产品解决问题。那如何体现设计价值就显得尤为重要，以下简单抛出两点：

1. 提升体验和口碑

虽然不能直接为产品带来实际收益，但是带来体验提升，而口碑的增长相当于为长线运营打下基础，也为后续进入的产品矩阵留下增长空间，例如最近大火的《天地劫》，相信后续的出品也会让玩家更加期待。

像这类的例子有许多，例如《王者荣耀》的公众号还有专门的 UI 迭代日记，即便是运营多年的产品仍然在不断的打磨和提升体验，为产品带来正面影响。

△ 图片来自王者荣耀公众号

2. 带来商业利润，促进社交、消费增长

这类体现通常是商业化/社交相关，《阴阳师》众所周知的抽卡系统和「画符咒」的交互方式也带来了大量的社交互动和用户增长，还有《Pokémon GO》捕捉宝可梦和「投掷精灵球」，促进了玩家大量的线下的互动场景，我认为这些都是设计价值的体现。

这些设计相对于大部分玩家是一种「隐形」的存在，不像角色、场景设计等容易被感知，对于设计的价值体现一定不只是给产品锦上添花，是能够通过对用户/玩家群体的理解去塑造和满足需求。

文章来源：优设   作者：阿泽与设计

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

先看目录！

• 1.什么是流量分发

• 2.为什么要做流量分发

• 3.首页中流量分发的类型

• 4.流量转化模型

• 5.流量如何分配的

• 6.设计案例与流量分发

• 7.如何衡量流量的效果

1.什么是流量分发

相信大家对流量并不陌生，我们在运营的口中经常会听到这个词：流量。运营通过各种手段和策略吸引用户来接触、使用我们的产品，从而吸引到了许多的流量，流量越多机会也就越多，比如一家奶茶店门店选址要考虑的最关键因素就是人流量。

流量分发的本质其实就是用户需求分发，我们设计师的价值就在于如何让这些流量发挥出更大的价值，让流量价值和用户价值相匹配。流量就像是一片海，海水通过不同的分支流入大陆形成了江、河，如果没有这些分支，那么这些水永远无法被利用，发挥出它们的价值。流量分发我们最常见的方式有：搜索分发、算法分发、社交分发、人工分发、付费分发

举一个比较典型的例子：海底捞在进行流量转化之前，并不是单纯的在店门口给用户一排座位让用户去等待，因为这部分用户就像没有被分流的海水是死的，这时候的用户其实也有自己的目标，就是消磨时间，那么海底捞就提供了一系列服务让这部分用户活动起来，比如给零食、玩具、做指甲等等，于是这部分用户其实就相当于进入了就餐流程的分支，提前享受服务和餐厅提供的福利，除了提升用户体验以外，也消化了大部分的流量。试想一下如果一下来了许多客户，但你只有十几张椅子让用户等待，势必造成更多的损失。

流量是无序混乱的，只有到它应该去的地方，它才会有价值。产品与用户双方都需要有清晰的目标，产品提供解决方案和导流不同的场景，用户负责完成目标给业务带来价值。

2.为什么做流量分发

2.1.减少成本

流量分发最典型的就是电商产品，因为业务目标非常明确，就是实现gmv的提升，但同时其用户的需求场景也是相对来说很复杂的。那么一个好的流量分发策略，可以大大的减少用户完成目标的时间和精力，也让产品可以准确的掌握用户的需求流向。

2.2.价值最大化

流量不分发或者错误分发就会造成更多的消耗，什么意思呢？我们举个例子，譬如下方的模坑app首页，首页中虽然提供了搜索、分类和标签栏不同模块，但是核心的内容显示区域则只有一张预售产品的大图。我们知道用户类型非常多，这样的布局对于小白和第一次用此款产品的小白来说会十分迷茫，因为最显眼的内容中并没有他们想要获取的信息。我们不求满足所有用户，但至少需要覆盖大部分用户和核心用户，此外，这样的形式就像一个漏斗，只靠一个出口漏水，效率自然不高。

同时为了达到最大化，流量的分发并不是单向的，而是并行、串联的。比如你可以在通过搜索找到某件商品，参与活动、运营板块、商品分类、网红直播等等区域都可以发现这个商品，同理，你想要购买视频app的会员，不仅仅可以去个人中心，你还可以去详情。所以流量就像一个大网格，单纯的给漏斗戳几个洞还不够，甚至要把这些洞用很多根管子串起来。

2.3.满足业务需求

流量分发可以帮助盘活新业务以及寻找新的价值，例如我们之前的电商产品在前期是以时间轴为核心的消化方式，商品以单品列表平铺的形式展示，在产品发展过程中形态会发生变化，单纯以这样的形态承载用户需求肯定是不够的，所以更多运营板块和推荐可以分担这部分“旧”流量。

3.首页常见的分发类型

我们在移动端的首页可以常看见的类型有：搜索、宫格型板块、信息流、banner、fab等。

3.1.搜索

搜索给有明确需求的用户提供了入口，同时在搜索这个显性场景中我们也可以细化出更多的场景给流量提供更有效的支持

例如搜索场景下除了热门搜索、搜素历史以外还可以提供不同的分类内容推荐。

3.2.Banner

逐渐走下神坛的banner，曾经可是在UI界叱咤风云，在当时由于他是首页占比一哥，很多产品在首页规划中都认为banner会承载大部分的流量，尤其是像淘宝等电商产品，banner不仅仅可以靠图片吸引用户，在做一些大促活动时候还可以变成氛围担当，和导航栏上下呼应。我们说首页是寸土寸金的，但是大家发现没有，banner的流量和他本身的价值可能不相匹配。也就是说虽然他面积很大，但是用户点击率相比于其他板块并没有什么优势，甚至还低。所以淘宝目前的首页已经看不到banner了，这个区域可以放下更多的运营区块和流量入口，当需要它的时候再配置起来就可以了。

3.3.宫格板块

这个板块除了业务分类的“金刚区”以外还有运营活动的配置区域，我们先来说以业务划来划分的流量入口，以这样的形式来分配流量是常规的手段，当然他也是有利弊的，有利的地方在于几乎每个业务板块雨露均沾，至少是在同一屏幕中呈现，还可以左右滑动切换更多。弊端的话就是层级深，并且用户浏览效率低不聚焦，对于那些泛浏览型的用户并不友好，因为你进入一个业务板块后发现内容自己 不感兴趣需要就需要再返回。所以这样的分流更适合深度使用产品的用户

那有没有另外一种形式可以分配流量给不同业务板块呢？当然是有的，比如tab标签，有了tab标签，泛浏览的型的用户会更喜欢，他们能更快的找到自己喜欢的内容，比如bilibili、腾讯视频的首页，这个当然也和产品目标有关，他们希望让用户看到更多的内容，让产品更扁平化。

那么你即想扁平又想让用户直观的看到业务板块分类怎么办呢，你可以这么做，就像大众点评一样上边是宫格，下面是tab标签

3.4.fab悬浮按钮/挂件

Fab和cta可以说是比较另类的存在了，几乎就是你想让用户去点，那你就放，所以这样的入口流量路径就比较单一，无法沉淀和升级流量，是短期目标的形态。fab的这样的悬浮入口会一直在首页显示，通常产品为了吸引用户会将其设计的比较吸引人，比如添加动效等，但是fab也会干扰用户正常浏览界面，所以一般可以用透明、伸缩的方式解决，不过伸缩要考虑用户实际操作，避免频繁的伸缩造成的更多干扰。

3.5.feed/信息流

大部分产品对于泛浏览用户的匹配场景都是提供信息流，但是单纯的给信息流依然无法让用户深入沉淀，所以需要在信息流中穿插一些分流入口，譬如品牌、话题、活动、排行等，让用户有更深入的浏览，这样才能促成转化。

4.流量转化模型

流量获取很容易，但是我们的目标并不是让用户进来逛一圈就走，所以流量的转化我把他以这样的模型展示，也就是说流量从获取到沉淀再到最后的进化过程。

新流量

获取新流量的方式很多，例如社交分发、线下活动引流等等，内部流量也可以通过打通多个板块进行流量互换。但是这些流量是表面的，不做进一步整合也就没有实际价值，所以我们需要将其沉淀下来。

流量沉淀

流量就像过江之鲫，如果你想让这条江里有更多鱼，你首先需要有个兜来留住这些用户，为了不让这些鱼继续游走，你可以给更多丰富的食物、创造更好的环境。如何让鱼更好的在这里生存呢，要让他们熟悉你的一切，要让这些鱼在其中发展、繁衍，所以当我们用内容吸引住用户后，要让用户留下来成为深度用户，这个前提就是让用户更长时间的使用产品，如何提升产品使用时长呢？譬如通过智能算法在很多断流的板块提供偏好推荐、帮助用户预判场景、社交互动、让用户有成就感、积分体系、个人成长系统、个人品牌塑造等。

流量进化

之前两步依然是在存量市场里盘流量，这是对的，从十四五国家发展规划来看，我们能看到一个关键的变化，就是从“速度”到“质量”的变化，如果你的流量已经完成沉淀，那么可以不着急找增量，而是找进化的方法。当然以下是我个人的一些思考，仅供参考。从浅层到深入，从深入到高效，从高效到创造，所以当你的流量已经比较成熟的时候，可能更多需要让这些用户再创造新的内容，他们可以利用你提供的产品创造自己的玩法，即便你不提供任何的帮助也可以形成生态，甚至还可以帮你引入增量市场。

譬如玩社群的都知道，引流简单，但是要维持社群的热度和培养超级粉丝是很难的，但是一旦你做到了，那么这些人就是帮你创造更多的价值，所以你需要一个庞大且智能的基建，还有更好的服务。

5.流量的分配

5.1流量分配与产品目标

判断流量分配是否合理的标准不在于多和广，而在于核心价值与目标是否达成。譬如内容型电商（抖音、快手）和传统型电商（淘宝、京东），内容型电商的流量是依靠内容带动电商去转化，更多的是依靠内容的质量，而传统型电商依靠的是商品，那么在这两个产品中，前者的流量更多还是要流向内容而非商品。

再举个例子，在首页的板块中，我们默认流量从大到小是板块越靠上的越多，越靠下的越少是吗？也不是，板块的分配是需要结合用户需求的，比如你规划的板块视觉上很明显但是从数据上看流量很低，那么这个板块就是有问题的，或者板块不明显但流量很高，这些都不是正常表现。

所以流量分发之前就要确定好，分发的目的和希望达成的目标。是能够让新用户更快了解产品，还是让成熟用户在使用时更高效，或者大力宣传新业务等等，不是一股脑儿随大流的把蛋糕切成几块。

5.2.流量分配的权重

不知道有没有在做抖音的小伙伴，抖音的流量分发让很多人搞不明白，其实抖音属于一个强运营平台，当用户制作一个视频发布后，他的流量并不是全部来自于已经关注你的粉丝，一部分是通过判断你的视频内容和质量分发给相应标签、可能会喜欢的用户。但是快手和抖音不同，快手的社交分发策略更重，用户发布的视频，已经关注的粉丝分发到的比例会更高，这样用户的互动也会更强。

6.流量分发效率与设计

通过一些设计案例我们来看看设计在流量分发中起到的作用。

1.提高分发效率

流量与曝光是有关系的，为了争取更多的曝光我们可以采用这样的方式进行设计，通常我们可以看到横向滚动结束后进入下一级界面需要点击更多，但点击的成本就高于滑动，所以在这里可以让用户直接通过滑动进入下一级界面，增加曝光。同时滑动是承接上一步手势操作，很连贯，相比点击的效率也会越高。

2.让流量扁平化

我们经常在用产品的时候能看到同一个界面可以从多个不同的入口进来，比如像小鹿茶app点击下单跳转到商品列表，也可以直接点击底部第二个tab切换过来。比如你可以在夜宵板块和品牌板块都能找到kfc，让一个区域的流量不仅仅从单独的方向流入，这样可以满足更多用户的场景需求。像淘宝的商品流量来自多个不同的层级

还有我们可以将更深层级的业务板块提到上一层级，提高子业务板块的点击率和曝光，譬如贝壳在下方的tab板块中除了信息流内容外还嵌入了精选、人气、热门三个分类。还有类似像德邦app这样的工具型首页其实版面利用率太低，本身产品功能不多其实不需要划分出这么多板块，让每个板块流量这么分散，可以直接在首页中加入查单号的功能，并且将寄件收件历史平铺在首页。

3.让流量沉淀

淘宝商品详情中会有店铺和店铺推荐内容，方便用户查看更多偏好商品，提高客单价。具有电商属性的社交产品在用户图文中可以添加商品链接、标签、话题等等。还有淘宝在首页的feed流中点击商品会进入另一个feed流，这里的商品又进行了算法权重的加持，会更加准确与多样，由于本身处于逛场景的用户，在这一步再次帮助用户进行准确选择，可以提高转化，当然了，这样中心化的分流方式对于商家而言不太友好。

7.如何衡量效果

7.1点击率

衡量流量分发的效果，我们可以查看板块的点击率（UV/PV）和预期。比如在某个周期中，有100个人进入这个界面，而这个界面中的banner最终点击量为1000次，那么这个banner的点击率为1000/100=10，平均每人点击了10次。点击率越高，该入口的流量自然更大。

7.2活跃度

每个产品对于活跃的标准不同，比如一个商场衡量活跃用户数会算那些进来蹭空调的大伯大妈吗？还是衡量那些有消费行为的顾客，同理一个产品计算活跃不是单纯看每天有多少人登录浏览就算活跃的。

那么观察活跃度有什么用呢？比如我们之前做一个大促活动，每个板块都有活动，但是大促结束后，只有童装类板块的日活流量在持续下降，于是我们通过相关调研，发现是因为童装类的品类太少，用户没有逛和再次购买的兴趣。

7.3页面停留时长

一波流量进入后，我们不仅要看他们去了哪里，还要查看这波流量在这里做了什么，于是我们通过查看页面停留时长可以判断一些问题，比如

1. 如果用户在本该停留时长长的页面反而停留时间短可能是当前内容不感兴趣、看不懂、闪退、临时有事等等

2.反之，在本该停留时间短但是用户停留时间长，说明可能文案排版或者解释的不清楚、用户可能在思考、临时有事等等

7.4跳失率

一波流量进入后，可能进入更深级界面也可能停留原地，那么还有一部分可能就直接离开了，查看流量的流失可以帮助我们判断以下问题

1.如果用户在进行某个多步骤任务，当我们发现其在即将完成时退出了，或者在中间步骤退出了，那说明可能出现了某些问题让用户进行不下去

2.用户可能对当前流程没有预期，也可能觉得有风险也可能是对某个地方产生不满

7.5页面访问路径

流量就像是一群被标记过的小白鼠，从哪里来到哪里去，中间做了什么，都被我们记录了下来，那么页面访问路径也是我们查看这些流量去向的关键指标，例如cctalk在冷启动后默认打开发现页面，我们进行了一些用户的调研，发现90%以上的同学在进入后都会切换到上课这个界面，这里可以思考的是作为产品我们发现用户有这样的行为，需不需要对产品进行优化，产品这样的设计是否考虑到的是新用户和培养用户习惯让更多课程有曝光。其实这里可以做一些判断，如果用户近期有购课、上课的记录和行为，默认打开上课板块。若新用户或者长期没有上课行为的用户则默认打开发现界面。这样就可以起到更精准的分流。

8.总结

流量诚可贵，流失就白费。

今天分享就到这里，你学废了吗？ 

文章来源：站酷   作者：应骏

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

文章目录

1. 作用
   
2. 语法
   
3. 使用
   
4. 兼容性
   
5. 应用场景
   
   说起postMessage 可能平时大家也不遇到，但是如果遇到问题了，又想不起它，这里记录下防止后面忘记它。
   
   
   
   
   
6. 作用
   
   window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的iframe之间。
   
   
   
   通常情况下，受浏览器“同源策略”的限制跨域问题一直是个问题，window.postMessage()提供了一个受控的机制来安全地规避这个限制（如果使用得当的话）。
   
   
   
7. 语法
   
   一般来说，一个窗口可以获得对另一个窗口的引用(例如，通过targetWindow=window.opener)，然后使用targetWindow.postMessage()在其上派发MessageEvent。接收窗口随后可根据需要自行处理此事件，传递给window.postMessage()的参数通过事件对象暴露给接收窗口。
   
   
   
   基本语法：
   
   
   
   targetWindow.postMessage(message, targetOrigin, [transfer]);
   
   1
   
   targetWindow
   
   targetWindow就是接收消息的窗口的引用。 获得该引用的方法包括：
   
   
   
   Window.open
   
   Window.opener
   
   HTMLIFrameElement.contentWindow
   
   Window.parent
   
   Window.frames +索引值
   
   message
   
   要发送到目标窗口的消息。 数据使用结构化克隆算法进行序列化。 这意味着我们可以将各种各样的数据对象安全地传递到目标窗口，而无需自己对其进行序列化。
   
   
   
   targetOrigin
   
   定目标窗口的来源，必须与消息发送目标相一致，可以是字符串或URI。 表示任何目标窗口都可接收，为安全起见，请一定要明确提定接收方的URI。如果为"*"则都可以接收。
   
   
   
   transfer
   
   可选属性。是一串和message同时传递的Transferable对象,这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。
   
   
   
8. 使用
   
   postMessage程序
   
   
   
   var receiver = document.getElementById('receiver').contentWindow;
   
   var btn = document.getElementById('send');
   
   btn.addEventListener('click', function (e) {
   
       e.preventDefault();
   
       var val = document.getElementById('text').value;
   
       receiver.postMessage("Hello "+val+"！", "http://www.xxx.com");
   
   }); 
   
   
   
   接收端
   
   
   
   window.addEventListener("message", receiveMessage, false);
   
   function receiveMessage(event){
   
     if (event.origin !== "http://www.xxx.com")
   
       return;
   
   }
   
   
   
   event对象有三个属性，分别是origin，data和source。event.data表示接收到的消息；event.origin表示postMessage的发送来源，包括协议，域名和端口；event.source表示发送消息的窗口对象的引用; 我们可以用这个引用来建立两个不同来源的窗口之间的双向通信。
   
   
   
9. 兼容性
   
   
   
   总体兼容性还是很好的！
   
   
   
   
   
10. 应用场景
    
    跨域通信(包括GET请求和POST请求)
    
    WebWorker
    
    vue项目中使用到了iframe并且需要传递参数
    
    
    
    ————————————————
    
    版权声明：本文为CSDN博主「zy1281539626」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
    

    原文链接：https://blog.csdn.net/zy1281539626/article/details/114934551

    
    

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

    
    

SpringBoot与Web开发（超详细）

一、简介

二、SpringBoot对静态资源的映射规则

1、所有 /webjars/ ，都去 classpath:/META-INF/resources/webjars/ 找资源

2、"/" 访问当前项目的任何资源，都去静态资源的文件夹找映射

3、欢迎页： 静态资源文件夹下的所有index.html页面，被"/"映射

三、模板引擎

1、引入Thymeleaf

2、Thymeleaf的使用

1、导入thymeleaf的名称空间

2、使用thymeleaf语法

3、Thymeleaf的语法规则

四、SpringMVC自动配置

1、Spring MVC auto-configuration

2、扩展SpringMVC

原理

3、全面接管SpringMVC

原理

五、如何修改SpringBoot的默认配置

一、简介

使用SpringBoot的步骤：



1、创建SpringBoot应用，选中我们需要的模块。

2、SpringBoot已经默认将这些场景配置好了，只需要在配置文件中指定少量配置就可以运行起来。

3、自己编写业务代码。



自动配置原理：



xxxxAutoConfiguration：帮我们给容器中自动配置组件

xxxxProperties:配置类来封装配置文件的内容

1

2

二、SpringBoot对静态资源的映射规则

@ConfigurationProperties(prefix = "spring.resources", ignoreUnknownFields = false)

public class ResourceProperties implements ResourceLoaderAware {

  //可以设置和静态资源有关的参数，缓存时间等

1

2

3

WebMvcAuotConfiguration：

@Override

public void addResourceHandlers(ResourceHandlerRegistry registry) {

if (!this.resourceProperties.isAddMappings()) {

logger.debug("Default resource handling disabled");

return;

}

Integer cachePeriod = this.resourceProperties.getCachePeriod();

if (!registry.hasMappingForPattern("/webjars/")) {

customizeResourceHandlerRegistration(

registry.addResourceHandler("/webjars/**")

.addResourceLocations(

"classpath:/META-INF/resources/webjars/")

.setCachePeriod(cachePeriod));

}

String staticPathPattern = this.mvcProperties.getStaticPathPattern();

          //静态资源文件夹映射

if (!registry.hasMappingForPattern(staticPathPattern)) {

customizeResourceHandlerRegistration(

registry.addResourceHandler(staticPathPattern)

.addResourceLocations(

this.resourceProperties.getStaticLocations())

.setCachePeriod(cachePeriod));

}

}



       //配置欢迎页映射

@Bean

public WelcomePageHandlerMapping welcomePageHandlerMapping(

ResourceProperties resourceProperties) {

return new WelcomePageHandlerMapping(resourceProperties.getWelcomePage(),

this.mvcProperties.getStaticPathPattern());

}



      //配置喜欢的图标

@Configuration

@ConditionalOnProperty(value = "spring.mvc.favicon.enabled", matchIfMissing = true)

public static class FaviconConfiguration {



private final ResourceProperties resourceProperties;



public FaviconConfiguration(ResourceProperties resourceProperties) {

this.resourceProperties = resourceProperties;

}



@Bean

public SimpleUrlHandlerMapping faviconHandlerMapping() {

SimpleUrlHandlerMapping mapping = new SimpleUrlHandlerMapping();

mapping.setOrder(Ordered.HIGHEST_PRECEDENCE + 1);

              //所有  /favicon.ico 

mapping.setUrlMap(Collections.singletonMap("/favicon.ico",

faviconRequestHandler()));

return mapping;

}



@Bean

public ResourceHttpRequestHandler faviconRequestHandler() {

ResourceHttpRequestHandler requestHandler = new ResourceHttpRequestHandler();

requestHandler

.setLocations(this.resourceProperties.getFaviconLocations());

return requestHandler;

}



}





1、所有 /webjars/ ，都去 classpath:/META-INF/resources/webjars/ 找资源

webjars：以jar包的方式引入静态资源。WebJars



访问localhost:8080/webjars/jquery/3.3.1/jquery.js的结果：





2、"/" 访问当前项目的任何资源，都去静态资源的文件夹找映射

"classpath:/META-INF/resources/", 

"classpath:/resources/",

"classpath:/static/", 

"classpath:/public/" 

"/"：当前项目的根路径



例子：访问localhost:8080/abc 就是去静态资源文件夹里面找abc



例如我们访问js文件夹下的Chart.min.js：



访问结果：





3、欢迎页： 静态资源文件夹下的所有index.html页面，被"/"映射

编写index.html文件。



访问结果：





三、模板引擎

常见的模板引擎：JSP、Velocity、Freemarker、Thymeleaf（springboot推荐，语法更简单，功能更强大）





1、引入Thymeleaf

Thymeleaf官网



在pom.xml中添加以下依赖：



 <dependency>

   <groupId>org.springframework.boot</groupId>

     <artifactId>spring-boot-starter-thymeleaf</artifactId>

 </dependency>



2、Thymeleaf的使用

@ConfigurationProperties(prefix = "spring.thymeleaf")

public class ThymeleafProperties {



private static final Charset DEFAULT_ENCODING = Charset.forName("UTF-8");



private static final MimeType DEFAULT_CONTENT_TYPE = MimeType.valueOf("text/html");



public static final String DEFAULT_PREFIX = "classpath:/templates/";



public static final String DEFAULT_SUFFIX = ".html";



1

只要我们把HTML页面放在classpath:/templates/，thymeleaf就能自动渲染。



success.html：



HelloController：



package com.keafmd.springboot.controller;



import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;



/

  Keafmd

 

  @ClassName: HelloController

  @Description:

  @author: 牛哄哄的柯南

  @date: 2021-03-04 19:54

 */



@Controller

public class HelloController {



    @ResponseBody

    @RequestMapping("/hello")

    public String hello(){

        return "Hello World";

    }



    @RequestMapping("/success")

    public String success() {

        return "success";

    }

}



访问success的结果：





1、导入thymeleaf的名称空间

<html lang="en" xmlns:th="http://www.thymeleaf.org"&gt;

1

2、使用thymeleaf语法

HelloController：



package com.keafmd.springboot.controller;



import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;



import java.util.Map;



/*

  Keafmd

 

  @ClassName: HelloController

  @Description:

  @author: 牛哄哄的柯南

  @date: 2021-03-04 19:54

 /



@Controller

public class HelloController {



    @ResponseBody

    @RequestMapping("/hello")

    public String hello(){

        return "Hello World";

    }



    /*

      查出一些数据在页面显示

      @param map

      @return

     */

    @RequestMapping("/success")

    public String success(Map<String,Object> map) {

        map.put("hello","你好");

        return "success";

    }

}



success.html：



<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org"&gt;

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h1>成功</h1>

    <!--th:text 将div里面的文本内容设置为-->

    <div th:text="${hello}"></div>

</body>

</html>



运行结果：





3、Thymeleaf的语法规则

1、th：任意html属性，来替换原生属性的值



th:text — 改变当前元素里面的文本内容

更多参考下图：



2、表达式



Simple expressions:（表达式语法）

    Variable Expressions: ${...}：获取变量值；OGNL；

    1）、获取对象的属性、调用方法

    2）、使用内置的基本对象：

    #ctx : the context object.

    #vars: the context variables.

                #locale : the context locale.

                #request : (only in Web Contexts) the HttpServletRequest object.

                #response : (only in Web Contexts) the HttpServletResponse object.

                #session : (only in Web Contexts) the HttpSession object.

                #servletContext : (only in Web Contexts) the ServletContext object.

                

                ${session.foo}

            3）、内置的一些工具对象：

execInfo : information about the template being processed.

messages : methods for obtaining externalized messages inside variables expressions, in the same way as they would be obtained using #{…} syntax.

uris : methods for escaping parts of URLs/URIs

conversions : methods for executing the configured conversion service (if any).

dates : methods for java.util.Date objects: formatting, component extraction, etc.

calendars : analogous to #dates , but for java.util.Calendar objects.

numbers : methods for formatting numeric objects.

strings : methods for String objects: contains, startsWith, prepending/appending, etc.

objects : methods for objects in general.

bools : methods for boolean evaluation.

arrays : methods for arrays.

lists : methods for lists.

sets : methods for sets.

maps : methods for maps.

aggregates : methods for creating aggregates on arrays or collections.

ids : methods for dealing with id attributes that might be repeated (for example, as a result of an iteration).

    Selection Variable Expressions: {...}：选择表达式：和${}在功能上是一样；

    补充：配合 th:object="${session.user}：

   <div th:object="${session.user}">

    <p>Name: <span th:text="{firstName}">Sebastian</span>.</p>

    <p>Surname: <span th:text="{lastName}">Pepper</span>.</p>

    <p>Nationality: <span th:text="{nationality}">Saturn</span>.</p>

    </div>

    

    Message Expressions: #{...}：获取国际化内容

    Link URL Expressions: @{...}：定义URL；

    @{/order/process(execId=${execId},execType='FAST')}

    Fragment Expressions: ~{...}：片段引用表达式

    <div th:insert="~{commons :: main}">...</div>

   

Literals（字面量）

      Text literals: 'one text' , 'Another one!' ,…

      Number literals: 0 , 34 , 3.0 , 12.3 ,…

      Boolean literals: true , false

      Null literal: null

      Literal tokens: one , sometext , main ,…

Text operations:（文本操作）

    String concatenation: +

    Literal substitutions: |The name is ${name}|

Arithmetic operations:（数学运算）

    Binary operators: + , - , * , / , %

    Minus sign (unary operator): -

Boolean operations:（布尔运算）

    Binary operators: and , or

    Boolean negation (unary operator): ! , not

Comparisons and equality:（比较运算）

    Comparators: > , < , >= , <= ( gt , lt , ge , le )

    Equality operators: == , != ( eq , ne )

Conditional operators:条件运算（三元运算符）

    If-then: (if) ? (then)

    If-then-else: (if) ? (then) : (else)

    Default: (value) ?: (defaultvalue)

Special tokens:

    No-Operation: _ 



注意：内容过多，详细内容参考官方文档。



示例：↓



HelloController：



package com.keafmd.springboot.controller;



import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;



import java.util.Arrays;

import java.util.Map;



/*

  Keafmd

 

  @ClassName: HelloController

  @Description:

  @author: 牛哄哄的柯南

  @date: 2021-03-04 19:54

 /



@Controller

public class HelloController {



    @ResponseBody

    @RequestMapping("/hello")

    public String hello(){

        return "Hello World";

    }



    /*

      查出一些数据在页面显示

      @param map

      @return

     */

    @RequestMapping("/success")

    public String success(Map<String,Object> map) {

        map.put("hello","你好");

        map.put("hello1","<h1>你好</h1>");

        map.put("users", Arrays.asList("柯南","小兰","基德"));

        return "success";

    }

}



success.html：



<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org"&gt;

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h1>成功</h1>

    <!--th:text 将div里面的文本内容设置为-->

    <div id="div01" class="myDiv" th:id="${hello}" th:class="${hello}" th:text="${hello}">这里的内容被覆盖</div>



    <hr/>

    <div th:text="${hello1}"></div>

    <div th:utext="${hello1}"></div>

    <hr/>

    <!--th:each 每次遍历都会生成当前这个标签-->

    <h4 th:text="${user}" th:each="user:${users}"></h4>

    <hr/>

    <h4>

        <span th:each="user:${users}"> [[${user}]] </span>

    </h4>

</body>

</html>



效果：







四、SpringMVC自动配置

1、Spring MVC auto-configuration

参考官方文档：点这里



Spring Boot 自动配置好了SpringMVC



以下是SpringBoot对SpringMVC的默认配置：（WebMvcAutoConfiguration）



Inclusion of ContentNegotiatingViewResolver and BeanNameViewResolver beans.



自动配置了ViewResolver（视图解析器：根据方法的返回值得到视图对象（View），视图对象决定如何渲染（转发？重定向？））

ContentNegotiatingViewResolver：组合所有的视图解析器的。

如何定制：我们可以自己给容器中添加一个视图解析器；自动的将其组合进来。

Support for serving static resources, including support for WebJars (see below).静态资源文件夹路径,webjars



Static index.html support. 静态首页访问



Custom Favicon support (see below). favicon.ico



自动注册了 of Converter, GenericConverter, Formatter beans.



Converter：转换器； public String hello(User user)：类型转换使用Converter

Formatter ：格式化器； 2017.12.17===Date

@Bean

@ConditionalOnProperty(prefix = "spring.mvc", name = "date-format")//在文件中配置日期格式化的规则

public Formatter<Date> dateFormatter() {

    return new DateFormatter(this.mvcProperties.getDateFormat());//日期格式化组件

}

1

2

3

4

5

自己添加的格式化器转换器，我们只需要放在容器中即可



Support for HttpMessageConverters (see below).



HttpMessageConverter：SpringMVC用来转换Http请求和响应的；User—Json



HttpMessageConverters 是从容器中确定；获取所有的HttpMessageConverter



自己给容器中添加HttpMessageConverter，只需要将自己的组件注册容器中（@Bean,@Component）



Automatic registration of MessageCodesResolver (see below)：定义错误代码生成规则



Automatic use of a ConfigurableWebBindingInitializer bean (see below).



我们可以配置一个ConfigurableWebBindingInitializer来替换默认的（添加到容器）



初始化WebDataBinder

请求数据=====JavaBean

1

2

org.springframework.boot.autoconfigure.web：web的所有自动场景



If you want to keep Spring Boot MVC features, and you just want to add additional MVC configuration (interceptors, formatters, view controllers etc.) you can add your own @Configuration class of type WebMvcConfigurerAdapter, but without @EnableWebMvc. If you wish to provide custom instances of RequestMappingHandlerMapping, RequestMappingHandlerAdapter or ExceptionHandlerExceptionResolver you can declare a WebMvcRegistrationsAdapter instance providing such components.



如果你想保持Spring Boot MVC 功能,你只是想添加额外的(MVC配置)(https://docs.spring.io/spring/docs/4.3.14.RELEASE/spring-framework-reference/htmlsingle MVC)(拦截器,格式器,视图控制器等)您可以添加自己的@ configuration类WebMvcConfigurerAdapter类型,但没有@EnableWebMvc。如果你想提供RequestMappingHandlerMapping, RequestMappingHandlerAdapter或ExceptionHandlerExceptionResolver的自定义实例，你可以声明一个WebMvcRegistrationsAdapter实例来提供这样的组件。



If you want to take complete control of Spring MVC, you can add your own @Configuration annotated with @EnableWebMvc.



如果你想完全控制Spring MVC，你可以添加你自己的@Configuration注解@EnableWebMvc。



2、扩展SpringMVC

实现如下功能：



<mvc:view-controller path="/hello" view-name="success"></mvc:view-controller>



<mvc:interceptors>

    <mvc:interceptor>

        <mvc:mapping path="/hello"/>

        <bean></bean>

    </mvc:interceptor>

</mvc:interceptors>



做法：编写一个配置类（@Configuration），是WebMvcConfigurerAdapter类型；不能标注@EnableWebMvc



特点：既保留了所有的自动配置，也能用我们扩展的配置。



在config包下创建个MyMvcConfig。



代码实现：



package com.keafmd.springboot.config;



import org.springframework.context.annotation.Configuration;

import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;





/*

  Keafmd

 

  @ClassName: MyMvcConfig

  @Description:

  @author: 牛哄哄的柯南

  @date: 2021-03-17 20:26

 /

@Configuration

public class MyMvcConfig implements WebMvcConfigurer {

    @Override

    public void addViewControllers(ViewControllerRegistry registry) {

        //浏览器发送 /keafmd 请求 来到success页面

        registry.addViewController("/keafmd").setViewName("success");

    }

}



原理

1、WebMvcAutoConfiguration是SpringMVC的自动配置类。

2、在做其他自动配置时会导入，@Import(EnableWebMvcConfiguration.class)。



   @Configuration

public static class EnableWebMvcConfiguration extends DelegatingWebMvcConfiguration {

     private final WebMvcConfigurerComposite configurers = new WebMvcConfigurerComposite();



     //从容器中获取所有的WebMvcConfigurer

     @Autowired(required = false)

     public void setConfigurers(List<WebMvcConfigurer> configurers) {

         if (!CollectionUtils.isEmpty(configurers)) {

             this.configurers.addWebMvcConfigurers(configurers);

            //一个参考实现；将所有的WebMvcConfigurer相关配置都来一起调用；  

            @Override

            // public void addViewControllers(ViewControllerRegistry registry) {

             //    for (WebMvcConfigurer delegate : this.delegates) {

              //       delegate.addViewControllers(registry);

              //   }

             }

         }

}



3、容器中所有的WebMvcConfigurer都会一起起作用。

4、我们的配置类也会被调用。



效果：SpringMVC的自动配置和我们的扩展配置都会起作用。



3、全面接管SpringMVC

SpringBoot对SpringMVC的自动配置不需要了，所有都是我们自己配置，所有的SpringMVC的自动配置都失效了。



做法：我们需要在配置类中添加@EnableWebMvc即可。



@EnableWebMvc

@Configuration

public class MyMvcConfig implements WebMvcConfigurer {

    @Override

    public void addViewControllers(ViewControllerRegistry registry) {

        //浏览器发送 /keafmd 请求 来到success页面

        registry.addViewController("/keafmd").setViewName("success");

    }

}





全面接管后，静态资源失效。

不推荐这样全面接管。





原理

加了@EnableWebMvc自动配置就失效了。



1、@EnableWebMvc的核心：



@Import({DelegatingWebMvcConfiguration.class})

public @interface EnableWebMvc {



2、DelegatingWebMvcConfiguration



@Configuration(

    proxyBeanMethods = false

)

public class DelegatingWebMvcConfiguration extends WebMvcConfigurationSupport {



3、WebMvcAutoConfiguration



@Configuration(

    proxyBeanMethods = false

)

@ConditionalOnWebApplication(

    type = Type.SERVLET

)

@ConditionalOnClass({Servlet.class, DispatcherServlet.class, WebMvcConfigurer.class})

//容器中没有这个组件的时候，这个自动配置类才生效

@ConditionalOnMissingBean({WebMvcConfigurationSupport.class})

@AutoConfigureOrder(-2147483638)

@AutoConfigureAfter({DispatcherServletAutoConfiguration.class, TaskExecutionAutoConfiguration.class, ValidationAutoConfiguration.class})

public class WebMvcAutoConfiguration {



4、@EnableWebMvc将WebMvcConfigurationSupport组件导入进来，自动配置类失效了。



5、导入的WebMvcConfigurationSupport只是SpringMVC最基本的功能。



五、如何修改SpringBoot的默认配置

1、SpringBoot在自动配置很多组件的时候，先看容器中有没有用户自己配置的（@Bean、@Component）如果有就用用户配置的，如果没有，才自动配置；如果有些组件可以有多个（ViewResolver）将用户配置的和自己默认的组合起来。

2、在SpringBoot中会有非常多的xxxConfigurer帮助我们进行扩展配置。

3、在SpringBoot中会有很多的xxxCustomizer帮助我们进行定制配置。



以上就是SpringBoot与Web开发（超详细）篇一的全部内容。

————————————————

版权声明：本文为CSDN博主「牛哄哄的柯南」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_43883917/article/details/114375472

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