近一年多接触到了插画 Banner 设计，算是自己边做边摸索，还在学习探索期，目前总结了一些做稿的思路，分享的目的是为了梳理完善自己的方法论，让自己继续向前进一步。
本篇文章分享内容：插画 Banner 的三个层次。
插画 Banner 的三个层次：文案层、画面元素、背景层。
相关联元素和点缀元素可以二选一，也可以同时使用，具体根据设计画面而定。
以下内容是我目前总结的背景层类型。选择背景时的注意事项：背景一定要和元素风格一致。我经常会出现这样的问题，主体物和背景不融合，导致设计看起来主体元素是贴上去的。
注：以上所用到的图片素材均来自于懒设计、稿定设计
Banner 设计画面千千万，套路来回就几样。希望大家能在框架的基础上进行思维发散，创作出好的作品。
定量的设计套路（不变）+百变的设计风格（变）=属于你的千变万化的 Banner 作品
（原文章地址：https://www.uisdc.com/banner-design-guide）
动效设计，是 UI 设计当中不可或缺的一环。大家对动效的认知也从最初认为动效只是为了美观酷炫，到逐渐理解了动效对于提升用户体验和产品需求的重要作用。而导致这种认知的转变，相当一部分原因是因为硬件性能的发展和动效输出方式的优化。
因为动效实现的过程就是设计师和开发之间互相博弈的过程。设计师可能通过 AE 或者其他工具做出炫酷的效果，和开发对接就懵了。要么无法实现，要么极其复杂。毕竟开发工程师要通过代码把动效实现出来，设计师得用开发所能理解的语言来描述。就如同你能完美地解出一道数学题一样，让你把解题思路教给别人，你可能就没那么顺畅了。一方面取决于你的表述能力，而更重要的是对方的理解能力。过去所广泛采用的通过动效标注输出给开发的方式，都存在还原度的问题。很多时候还原度达到 80% 可能都算比较好的了。
而今天要说到的 Lottie 不仅可以 100% 还原动效，而且无需动效标注。直接通过 AE 输出动效文件给开发。开发人员直接调用，然后完美还原。
Lottie 是 Airbnb 开源的一个动画渲染库，同时支持 Android、iOS、React Native 平台。Lottie 支持渲染播放 AE 动画。通过 AE 插件 bodymovie 导出 json 文件作为动画数据。
Lottie 可以应用在 UI 设计的很多场景中。以下举出几个常用例子。
1. 动态启动页
2. 动态图标/按钮
3. 空页面
以上仅列举了部分常用案例，其实 Lottie 的应用场景远不止这些。在 APP 的多个模块中都可以运用，那么我们要如何将 Lottie 运用在自己的工作项目中呢？那就要了解 Lottie 的原理了。
前面已经提过 Lottie 是 Airbnb 开源的一个动画渲染库。我们可以理解为它是一个多功能的视频播放器，开发人员需要将这个播放器部署到相应的环境中。然后设计人员提供视频（动效文件）给开发人员，让开发人员按照要求播放视频文件，即可完成动效的应用。
假设该按钮动效一共10帧，整个按钮切换分为两部分，第一部分：从菜单切换到关闭（1-10帧）；第二部分：从关闭切换到菜单（10-1）。我们可以让开发通过以下控制方式，完成我们想要的效果。
按钮动效默认显示第1帧（菜单状态），点击按钮以后开始播放动效，动效播放到第10帧的时候停止，并停在第10帧（关闭状态）。当按钮为关闭状态（第10帧）时，点击按钮以后动效从第10帧倒放到第1帧（关闭状态），并停在第1帧（菜单状态）。
通过以上方式就完成了对一个动效按钮的控制。而日常工作中我们可以灵活地运用多种控制方式。
首先动效的触发，可以是一次交互事件，比如点击、滑动；也可以是监听到了广播，比如网络异常等。而触发以后的动效控制也多种多样，可以从开始播放到结束，也可以进行倒放；可以循环播放某一段动效；也可以从某一帧播放到另一帧，或者某一个时间点播放到另一个时间点；更多的控制方式需要大家在工作中慢慢挖掘。
Lottie虽然能够满足多种场景需要，但是并非支持所有的 AE 效果。设计制作时，需要考虑该效果是否支持。否则，会导致出错或者所用效果无法生效。
上图为 Lottie 支持的主要 AE 属性，此处有删减掉部分不常用的属性。可以打开以下链接查看完整版http://airbnb.io/lottie/#/supported-features
需要注意的是文档中虽然说支持渐变，但是会出错，所以大家在使用矢量图形时，请勿使用渐变效果。关于渐变效果的修复后续文章会提到，官网以后也会修复相关问题，但是没有确切时间。
通过上图我们可以了解到，Lottie 支持的 AE 属性基本包含以下几类：
（原文章来源于：https://www.uisdc.com/lottie-dynamic-design-guide）
禁用继承属性inheritAttrs和$attrs的使用
Index.html:
<div id="app">
<test-input
v-bind:class="class1"
v-bind:style="{fontSize:17+'px'}"
v-bind:test1='test1'
test2="test2"
placeholder="placeholder test3"
></test-input>
</div>
Index.js:
Vue.component('test-input', {
inheritAttrs: false,
template: <label ><br /> <p v-bind="$attrs">测试</p><br /> <input v-bind="$attrs"><br /> </label>
})
new Vue({
el:'#app',
data:{
class1:'class1note',
test1:'test1note',
test2:'test2note',
},
})
页面结果：
当将属性修改为：inheritAttrs: true,的时候
页面的结果：
包含了所有的属性：
最后总结：
当inheritAttrs的属性值为true（不写该行属性的结果同true，也就是inheritAttrs默认为true），组件的根元素会自动继承所有的属性！当为false的时候，根元素只会继承注册的属性，自建的属性不会继承！！
attrs:它包含了父组件所有的自建属性！可以通过v−kind=“ attrs:它包含了父组件所有的自建属性！可以通过v-kind=“attrs:它包含了父组件所有的自建属性！可以通过v−kind=“attrs”将所有自建属性赋给想要的元素上！！
在涉及体验细节的小需求上，避免所有的不周到，方才是周到
其中，个人认为，最为核心的是第二点：多体验原型或产品，直到自己觉得周到为止。
文章来源：站酷
自从做设计以来经常会看到一些很高大上的理论，例如：格式塔法则、网格系统、黄金分割法等等，这些词语给人第一印象就是很高大上，很难学会，也有很多设计师看到这些理论就被吓到，认为自己学不会，也不想学，因为理论知识确实是学起来很枯燥。对于初学者的设计师来说，这些理论可以在短时间不用学太多，但是对已经工作几年的设计师来说，这些设计理论知识也是必不可少的。
只有掌握设计中必要的设计知识，才能让自己的设计眼界、技能得到提升。就我个人而言，我在设计初期也是很反感这些所谓的理论知识，对于我来说简单通俗的教学才是最容易让人接受的，理论太深奥，我真的无法从中体会到真正的奥秘。但是，越到后面，我越喜欢研究那些设计理论知识，因为我越来越懂得那些理论的重要性，对我的设计也有很大的帮助。所以今天我采用通俗易懂的方法，教大家去理解和掌握这些高大上的设计理论知识。
今天主要分享我们经常听到的黄金分割构图法。
黄金分割构图法：是一种由古希腊人发明的几何学公式，遵循这一规则的构图形式被认为是「和谐」的，在欣赏一件形象作品时这一规则的意义在于提供了一条被合理分割的几何线段。
黄金分割构图法的基本理论来自于黄金比例 ── 1 : 1.618。
黄金分割构图法运用到海报设计、画册设计、网页设计、绘画、服装设计、logo 设计、电视电影、建筑等等领域。在摄影中也经常会引入黄金分割比例，可以让照片感觉更自然、舒适，更能吸引观赏者，给人一种赏心悦目的视觉感受。
我们先赏析一些运用黄金分割法的优秀案例，通过赏析能让我们体会到它的美和重要性。
1. 在海报中的应用
从上面的 2 张人物海报案例中，可以看出都利用了黄金分割螺旋法的技巧，当整张图作为背景时，我们不知道图片主题位置的掌控时，就可以采用黄金分割法的原则。对于人物，可以根据想要突出的人物某一部位，直接采用这种分割方法快速找到版面位置
下面2张海报是通过图形和文字的结合，主题文字排版的位置也都刚刚好是黄金分割的编排，带给人一种美的、舒适的画面感，图片和文字在版面的比例刚好是 1 : 0.618。
2. 在网页中的应用
上面 2 个网页都采用了黄金分割的原则，大体将版面分为图片区+文案区，比例为 1 : 0.618。上面同时采用了网格重叠的形式，而下面的就是最基本的黄金分割比例。版面的编排整体给人一种呼吸感、有序的、层次分明的视觉感受，并且浏览的顺序也是井井有条，如下图阅读顺序指引：
3. 在绘画上的应用
像我们看熟悉的名画「蒙娜丽莎」、「维纳斯的诞生」等也符合黄金分割的比例。黄金分割比例也在这些作品上经过了历史认证，利用黄金分割布局，让画面更耐看、更精致。
4. 在摄影上的应用
在摄影中也经常会引入黄金分割比例，可以让照片感觉更自然、舒适，更能吸引观赏者，给人一种赏心悦目的视觉感受。使用黄金分割的摄影可以制造出一种空旷、寂静的视觉效果，也可以制造出一种特写镜头的效果。不知道怎么拍照好看，学会这一招你的摄影立马高大上。
5. 在建筑上的应用
在建筑设计中的运用也有很多案例，例如上面的金字塔和泰姬陵的多处布局都能看出黄金分割，第三张中国古建筑也都运用了黄金分割构图。自古以来很多文化建筑都采用了这个构图，让建筑看起来更加美观、耐看、精致。
了解了螺旋黄金分割法的用途和好处，我们最主要的是需要知道怎么来画这个螺旋黄金图。
1. 新建画布
2. 画正方形
这里画正方形是最关键的一步，我们只要知道螺旋黄金图的比例就可以很快的画出来。
螺旋黄金图比例为：13 : 8 : 5 : 3 : 2 : 1
只要知道螺旋黄金图的比例我们就可以开始画正方形了，简单的正方形不用我多说吧。我们按 10 倍的比例来画图，简单的意思就是前面的螺旋黄金图比例都乘 10，变为 130 : 80 : 50 : 30 : 20 : 10，再根据这个数字画出 6 个正方形。
正方形画好后按照这个转圈的顺序排好即可。
3. 画圆弧线
正方形画好后，画圆弧线，可以通过画正圆得到。
圆弧线为正圆的四分之一，圆的半径为每个不同正方形的边长，通过不同大小的正方形画出不同大小的圆弧即可。
开始画圆弧：以大正方形的右下角为圆心画正圆，注意相切位置，画好后删除多余的锚点。
△ 圆心位置
△ 相切位置
△ 删除多余锚点
△ 圆弧画完后
到了这一步基本也就出现我们想要的螺旋黄金图，最后只需要将我们的正方形改成描边的模式即可。
△ 最终图形
这里展示一下第二种方法：
螺旋黄金比1 : 1.618在画面中怎么看？
说了这么多，没有实际的操作案例你们是不是也很头痛，到底拿到这个技巧怎么去使用呢？在我这里例举一个横版和一个竖版的案例。
找素材
这里找来几张图片，因为是做分析案例，所以我就选择我自己喜欢的图，我选择的是图1。
图片调整
图片确定后，我们就需要把图放到我们的画布中。
但是问题来了，一般我们的设计尺寸基本是不会和找到的素材是一样大的，我们到底要怎样放大图片呢？图片中哪些元素可以忽略，哪些需要重视？螺旋黄金分割法就可以用上了。
利用我们的螺旋黄金分割图，放在我们的版面中。接下来就放大我们的素材图片，分析图片结构。图片上方都是天空，左边是海和天空，只有右下比较复杂，有人和零碎的石头，所以我们这里图片就以人为画面中的焦点，那么我们的螺旋图就需要改变一下位置。
调整图片大小和位置，将图片中的人物放在螺旋图的焦点位置，这样我们的版面就快速地确定了视觉焦点。
文字排版
将文字排版在画布中，再根据文字竖排的样式，和人阅读的习惯，调整图的方向和文字位置，使人看向主题文字，给人一种指引的方向。
总结：主要利用螺旋黄金分割法调整图片的位置焦点，使画面中心达到舒适耐看和精致的视觉效果。
标记分析图：
这个案例我就不做太多的讲解，因为很简单，直接利用螺旋黄金分割构图的方法，将版面按1 : 0.618的比例划分，然后在这个比例画布中排版文案和图片。
图片位置排版
素材选择上面的图2，这里就做一张竖版的海报。
将素材图放在画布中，准备好我们的螺旋黄金分割图，也放在画布中。根据图片本身的特点，人物只有上半身，所以将图片放在底部最为合适。至于人物应该靠中间还是靠边，我们同可以根据图片人物本身的姿势判断，根据人物是微抬头向上看，角度约 30 度，所以选择将人物靠边。
再就是人物具体位置的掌控，我们同样和上面的案例一样直接利用螺旋黄金分割图做参考位置选择，所以就很快找到合适的位置，如上面右图。
填充背景和文案
我们将背景颜色填充为天空统一的色彩，建立网格，将文案排版在画布中，上面主要是海报中的主要文案及主题文案，文案和图片的总体比例为1 : 0.618，遵循我们的黄金法则。
根据图片的气质，图片中的色彩和人物都属于文艺气质，清新、寂静、雅致的感觉，所以我们这里可以选衬线体宋体，结合韩文来体现整体的气质。
效果展示
最后看看海报效果吧，主要讲解螺旋黄金分割图的使用，所以排版方面讲解的比较简单，以及主题文字都采用最简单粗暴的字体，没有过多的修饰。
文章分享了螺旋黄金分割构图的用途，很广泛，包含海报设计、画册设计、网页设计、绘画、服装设计、logo设计、电视电影、建筑、摄影等等领域，以及分享了黄金分割图形的画法，3 个简单的案例实操，利用黄金分割构图来帮助我们构图和排版，最有利于我们对图片焦点位置的选择和排版分布的掌控。
文章来源：优设
在做项目做产品的过程中，作为互联网产品设计师的我们，经常会接到来自 PM/领导/业务方等等的各种需求。有的时候，哪怕一个小功能、次次次级页面都会争得不可开交。这个时候怎么办呢？到底应该听谁的呢？哪个需求优先级高？哪种呈现方法是更靠谱的呢？
今天我们就来聊聊一个非常实用的需求分级方法 — KANO模型。
KANO 模型是东京理工大学教授狩野纪昭（Noriaki Kano）发明的对用户需求分类和排序的工具。通过分析用户对产品功能的满意程度，对产品功能进行分级，从而确定产品实现过程中的优先级。
KANO 模型是一个典型的定性分析模型，一般不直接用来测量用户的满意度，常用于识别用户对新功能的接受度。帮助企业了解不同层次的用户需求，找出顾客和企业的接触点，挖掘出让顾客满意至关重要的因素。
在 KANO 模型中，根据不同类型的需求与用户满意度之间的关系，可将影响用户满意度的因素分为五类：基本型需求、期望型需求、兴奋型需求、无差异需求、反向型需求。
兴奋型需求
所谓暗处，用户意想不到的，需要挖掘/洞察。若不提供此需求，用户满意度不会降低；若提供此需求，用户满意度会有很大的提升。
当用户对一些产品或服务没有表达出明确的需求时，企业提供给顾客一些完全出乎意料的产品属性或服务行为，使用户产生惊喜，用户就会非常满意，从而提高用户忠诚度。
这类需求往往是代表顾客的潜在需求，企业的做法就是去寻找发掘这样的需求，领先对手。
期望型需求
所谓痒处。当提供此需求，用户满意度会提升；当不提供此需求，用户满意度会降低。
它是处于成长期的需求，客户、竞争对手和企业自身都关注的需求，也是体现竞争能力的需求。
对于这类需求，企业的做法应该是注重提高这方面的质量，力争超过竞争对手。
基本型需求
所谓痛点。对于用户而言，这些需求是必须满足的，理所当然的。当不提供此需求，用户满意度会大幅降低，但优化此需求，用户满意度不会得到显著提升。
对于这类需求，是核心需求，也是产品必做功能，企业的做法应该是注重不要在这方面减分，需要企业不断调查和了解用户需求，并通过合适的方法在产品中体现这些要求。
无差异需求
用户根本不在意的需求，对用户体验毫无影响。
无论提供或不提供此需求，用户满意度都不会有改变。对于这类需求，企业的做法应该是尽量避免。
反向型需求
用户根本都没有此需求，提供后用户满意度反而下降。
总而言之，我们做产品设计时，需要尽量避免无差异型需求、反向型需求，至少做好基本型需求、期望型需求，如果可以的话再努力挖掘兴奋型需求。
KANO 模型分析方法主要是通过标准化问卷进行调研，根据调研结果对各因素属性归类，解决需求属性的定位问题，以提高用户满意度。
1. 明确目的
做之前，必须明白调研的目的是什么，是否合适用 KANO 模型解决，为什么要用 KANO 模型解决。
例如：企业为卖家开发的 CRM 工具，随着卖家客户的不断增长，CRM 系统中需引入一些新的功能满足其管理需求。而我们作为产品开发设计者，需要知道这些功能哪些是基本功能，哪些是增值功能，功能的优先级又该如何排列等等。
KANO 模型就可以帮助我们很好的贴和业务需求，从具备程度和满意程度这两个维度出发，将 CRM 中新增的功能进行区分和排序，从而知道：哪些功能是一定要有，否则会直接影响用户体验的（基础属性、期望属性）；哪些功能是没有时不会造成负向影响，拥有时会给用户带来惊喜的（兴奋属性）；哪些功能是可有可无，具备与否对用户都不会有大影响的（无差异因素）。
2. 设计问卷
此问卷调查表划分维度有两个：提供时的满意程度、不提供时的满意程度。而满意程度被划分为 5 级（非常满意、满意、一般、不满意、很不满意），因为人的满意程度往往是渐变的，而不是突变的。
满意程度的文案可根据实际问题灵活修改，如使用（非常喜欢、理应如此、无所谓、勉强接受、很不喜欢 或者 非常有用、挺实用、无所谓、不实用、很不实用 ）更加形象的描述。
例如：在「通讯录」中，是否需要直接提供「拨打电话」的按钮？问卷设置正反两题：
如果我们在「通讯录」的客户列表中，提供「拨打电话」的按钮，你的感受是：
A.非常喜欢 B.理应如此 C.无所谓 D.勉强接受 E.很不喜欢
如果我们在「通讯录」的客户列表中，没有提供「拨打电话」的按钮，你的感受是：
A.非常喜欢 B.理应如此 C.无所谓 D.勉强接受 E.很不喜欢
为了更加形象且一目了然，我们可以如下设计。填问卷的人只需要在空白处打勾打叉就好了，非常方便。
设计问卷的过程中，有几点要注意：
例如：
3. 清洗数据
在收集所有问卷之后，注意清洗掉个别的明显胡乱回答的个例。如全部问题都选择「我很喜欢」或「很不喜欢」的，这种回答毫无参考价值。
4. 整理分类
为了能够将需求区分为基本型需求、期望型需求和兴奋需求，需按照正向和负向问题的回答对属性进行分类，具体分类对照下表。
当正向问题的回答是「我喜欢」，负向问题的回答是「我不喜欢」，那么 KANO 评价表中，这项功能特性就为「O」，即期望型。
如果将用户正负向问题的回答结合后，为「M」或「A」，则该功能被分为基本型需求或兴奋型需求。
其中，R 表示用户不需要这种功能，甚至对该功能有反感；I 类表示无差异需求，用户对这一功能无所谓。
Q 表示有疑问的结果，一般不会出现这个结果（除非这个问题的问法不合理，或者是用户没有很好的理解问题，或者是用户在填写问题答案时出现错误）。
简单来说就是：
A：兴奋型；O：期望型；M：必备型；I：无差异型；R：反向型；Q：可疑结果
注意：以上对照表只是的最常见的一种归类方式。实际操作中，可因人而异，因产品、公司、地域而异（尤其是关于「R」和「O」的定义），因为满意度本身就难以衡量。
判断 KANO 属性
记录所有合理的数据，计算出各项占比，填写在下面的对照表里面。
从上表中不难看出，「通讯录中「拨打电话」「这个功能在 6 个维度上均可能有得分，将相同维度的比例相加后，可得到6 个属性维度的占比总和。 总和最大的一个属性维度，便是该功能的属性归属。
可看出「在通讯录中提供 ‘拨打电话’ 功能属于兴奋型需求。即说明没有这个功能，用户不会有强烈的负面情绪，但是有了这个功能，会让用户感受到满意和惊喜。
如果你只判断这一个需求，那么进行到这一步就可以到此为止了。如果涉及到多个需求的排序分级，你还需进行下一步。
计算 better-worse系数
Better-worse 系数，表示某功能可以增加满意或者消除不喜欢的影响程度。
Better，可以解读为增加后的满意系数。Better 的数值通常为正，代表如果产品提供某种功能或服务，用户满意度会提升。正值越大/越接近 1，则表示用户满意度提升的效果会越强，满意度上升的越快。
Worse，可以叫做消除后的不满意系数。Worse 的数值通常为负，代表产品如果不提供某种功能或服务，用户的满意度会降低。其负值越大/越接近 -1，则表示对用户不满意度的影响最大，满意度降低的影响效果越强，下降的越快。
因此，根据 better-worse 系数，对两者系数绝对分值较高的项目应当优先实施。
其计算公式如下：
结果产出
例如：某产品希望优化 5 项功能，但是不知道哪些是用户需要的。通过 KANO 调研分析，可以分别计算出 5 项功能的better-worse 系数。
根据 5 项功能的 better-worse 系数值，将散点图划分为四个象限，以确立需求优先级。
在实际项目中：
结论：
根据 KANO 模型计算出的 better-worse 系数值，说明该产品先满足功能 5 和 4，再优化功能 2，最后满足功能 1。而功能 3对用户来说有或者没有都无所谓，属无差异型需求，并没有必要花大力气去实现。
KANO 模型定义了三个层次的需求：基本型需求、期望型需求和兴奋型需求。
根据 KANO 模型建立产品需求分析优先级，运用到产品设计中就是要抓住用户的核心需求，解决用户痛点（基本型需求），抓住用户痒点（期望型需求）。在确保这两者都解决的前提下，再给用户一些 high 点（兴奋型需求）。
严格来说，KANO 模型并不是一个测量用户满意度的模型，而是对用户需求的分类，通常在满意度评价工作前期作为辅助研究的 典型定性分析模型。
KANO 模型的目的是通过对用户的不同需求进行区分处理，了解不同层次的用户需求，帮助企业找出提高产品用户满意度的切入点，或者识别出使用户满意至关重要的因素。
但需求会因人而异，会因文化差异而不同； 也会随着时间变化。可能前段时间的期望型需求，甚至兴奋型需求，到如今已变成了基础型需求。所以作为产品设计者，我们应该持续调研需求，对产品进行迭代优化。
重分组介绍
语法：<?for-each-group: BASE-GROUP;GROUPING-ELEMENT?>
用法：重分组可以把XML数据做重新分组，这样数据的展示就不一定必须按照XML数据的结构显示。例如原来的XML数据结构是CD类别->CD信息（名称，年份，国家，价格），我们可以用重分组功能按CD年份->CD国家来显示.
重分组应用
1 按照和XML数据不同的结构显示数据
XML数据格式如下：
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
。。。。。
</CATALOG>
报表打算按照国家和年份重新分组，用到的重分组如下：
<?for-each-group:CD;COUNTRY?>
<?for-each:current-group();YEAR?>
1
2
这里的current-group()表示当前COUNTRY组下的子分组
2 显示PIVOT报表
XML数据如下：
<ROWSET>
<RESULTS>
<INDUSTRY>Motor Vehicle Dealers</INDUSTRY>
<YEAR>2005</YEAR>
<QUARTER>Q1</QUARTER>
<SALES>1000</SALES>
</RESULTS>
<RESULTS>
<INDUSTRY>Motor Vehicle Dealers</INDUSTRY>
<YEAR>2005</YEAR>
<QUARTER>Q2</QUARTER>
<SALES>2000</SALES>
</RESULTS>
<RESULTS>
<INDUSTRY>Motor Vehicle Dealers</INDUSTRY>
<YEAR>2004</YEAR>
<QUARTER>Q1</QUARTER>
<SALES>3000</SALES>
</RESULTS>
。。。。
</ROWSET>
如果想按年份生成PIVOT表，可以用如下TAG实现：
<?for-each-group@column:RESULTS;YEAR?>
<?YEAR?>
<?end for-each-group?>
<?for-each-group:RESULTS;INDUSTRY?>
<?for-each-group@cell:current-group();YEAR?>
<?sum(current-group()//SALES)?>
<?end for-each-group?>
<?end for-each-group?>
这里的@cell是给每个组生成一个CELL
vue中关于插槽的文档说明很短，语言又写的很凝练，再加上其和methods，data，computed等常用选项使用频率、使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”，于是就关闭了vue说明文档。
实际上，插槽的概念很简单，下面通过分三部分来讲。这个部分也是按照vue说明文档的顺序来写的。
进入三部分之前，先让还没接触过插槽的同学对什么是插槽有一个简单的概念：插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。 实际上，一个slot最核心的两个问题这里就点出来了，是显示不显示和怎样显示。
由于插槽是一块模板，所以，对于任何一个组件，从模板种类的角度来分，其实都可以分为非插槽模板和插槽模板两大类。
非插槽模板指的是html模板，指的是‘div、span、ul、table’这些，非插槽模板的显示与隐藏以及怎样显示由插件自身控制；插槽模板是slot，它是一个空壳子，因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置确由子组件自身决定，slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块。
首先是单个插槽，单个插槽是vue的官方叫法，但是其实也可以叫它默认插槽，或者与具名插槽相对，我们可以叫它匿名插槽。因为它不用设置name属性。
单个插槽可以放置在组件的任意位置，但是就像它的名字一样，一个组件中只能有一个该类插槽。相对应的，具名插槽就可以有很多个，只要名字（name属性）不同就可以了。
下面通过一个例子来展示。
父组件：
-
<template>
-
<div class="father">
-
<h3>这里是父组件</h3>
-
<child>
-
<div class="tmpl">
-
<span>菜单1</span>
-
<span>菜单2</span>
-
<span>菜单3</span>
-
<span>菜单4</span>
-
<span>菜单5</span>
-
<span>菜单6</span>
-
</div>
-
</child>
-
</div>
-
</template>
子组件：
-
<template>
-
<div class="child">
-
<h3>这里是子组件</h3>
-
<slot></slot>
-
</div>
-
</template>
在这个例子里，因为父组件在<child></child>里面写了html模板，那么子组件的匿名插槽这块模板就是下面这样。也就是说，子组件的匿名插槽被使用了，是被下面这块模板使用了。
-
<div class="tmpl">
-
<span>菜单1</span>
-
<span>菜单2</span>
-
<span>菜单3</span>
-
<span>菜单4</span>
-
<span>菜单5</span>
-
<span>菜单6</span>
-
</div>
最终的渲染结果如图所示：
-
-
注：所有demo都加了样式，以方便观察。其中，父组件以灰色背景填充，子组件都以浅蓝色填充。
匿名插槽没有name属性，所以是匿名插槽，那么，插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现N次。出现在不同的位置。下面的例子，就是一个有两个具名插槽和单个插槽的组件，这三个插槽被父组件用同一套css样式显示了出来，不同的是内容上略有区别。
父组件：
-
<template>
-
<div class="father">
-
<h3>这里是父组件</h3>
-
<child>
-
<div class="tmpl" slot="up">
-
<span>菜单1</span>
-
<span>菜单2</span>
-
<span>菜单3</span>
-
<span>菜单4</span>
-
<span>菜单5</span>
-
<span>菜单6</span>
-
</div>
-
<div class="tmpl" slot="down">
-
<span>菜单-1</span>
-
<span>菜单-2</span>
-
<span>菜单-3</span>
-
<span>菜单-4</span>
-
<span>菜单-5</span>
-
<span>菜单-6</span>
-
</div>
-
<div class="tmpl">
-
<span>菜单->1</span>
-
<span>菜单->2</span>
-
<span>菜单->3</span>
-
<span>菜单->4</span>
-
<span>菜单->5</span>
-
<span>菜单->6</span>
-
</div>
-
</child>
-
</div>
-
</template>
子组件：
-
<template>
-
<div class="child">
-
// 具名插槽
-
<slot name="up"></slot>
-
<h3>这里是子组件</h3>
-
// 具名插槽
-
<slot name="down"></slot>
-
// 匿名插槽
-
<slot></slot>
-
</div>
-
</template>
显示结果如图：
可以看到，父组件通过html模板上的slot属性关联具名插槽。没有slot属性的html模板默认关联匿名插槽。
最后，就是我们的作用域插槽。这个稍微难理解一点。官方叫它作用域插槽，实际上，对比前面两种插槽，我们可以叫它带数据的插槽。什么意思呢，就是前面两种，都是在组件的template里面写
-
匿名插槽
-
<slot></slot>
-
具名插槽
-
<slot name="up"></slot>
但是作用域插槽要求，在slot上面绑定数据。也就是你得写成大概下面这个样子。
-
<slot name="up" :data="data"></slot>
-
export default {
-
data: function(){
-
return {
-
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
-
}
-
},
-
}
我们前面说了，插槽最后显示不显示是看父组件有没有在child下面写模板，像下面那样。
-
<child>
-
html模板
-
</child>
写了，插槽就总得在浏览器上显示点东西，东西就是html该有的模样，没写，插槽就是空壳子，啥都没有。
OK，我们说有html模板的情况，就是父组件会往子组件插模板的情况，那到底插一套什么样的样式呢，这由父组件的html+css共同决定，但是这套样式里面的内容呢？
正因为作用域插槽绑定了一套数据，父组件可以拿来用。于是，情况就变成了这样：样式父组件说了算，但内容可以显示子组件插槽绑定的。
我们再来对比，作用域插槽和单个插槽和具名插槽的区别，因为单个插槽和具名插槽不绑定数据，所以父组件是提供的模板要既包括样式由包括内容的，上面的例子中，你看到的文字，“菜单1”，“菜单2”都是父组件自己提供的内容；而作用域插槽，父组件只需要提供一套样式（在确实用作用域插槽绑定的数据的前提下）。
下面的例子，你就能看到，父组件提供了三种样式(分别是flex、ul、直接显示)，都没有提供数据，数据使用的都是子组件插槽自己绑定的那个人名数组。
父组件：
-
<template>
-
<div class="father">
-
<h3>这里是父组件</h3>
-
<!--第一次使用：用flex展示数据-->
-
<child>
-
<template slot-scope="user">
-
<div class="tmpl">
-
<span v-for="item in user.data">{{item}}</span>
-
</div>
-
</template>
-
-
</child>
-
-
<!--第二次使用：用列表展示数据-->
-
<child>
-
<template slot-scope="user">
-
<ul>
-
<li v-for="item in user.data">{{item}}</li>
-
</ul>
-
</template>
-
-
</child>
-
-
<!--第三次使用：直接显示数据-->
-
<child>
-
<template slot-scope="user">
-
{{user.data}}
-
</template>
-
-
</child>
-
-
<!--第四次使用：不使用其提供的数据, 作用域插槽退变成匿名插槽-->
-
<child>
-
我就是模板
-
</child>
-
</div>
-
</template>
子组件：
-
<template>
-
<div class="child">
-
-
<h3>这里是子组件</h3>
-
// 作用域插槽
-
<slot :data="data"></slot>
-
</div>
-
</template>
-
-
export default {
-
data: function(){
-
return {
-
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
-
}
-
}
-
}
结果如图所示：
以上三个demo就放在GitHub了，有需要的可以去取。使用非常方便，是基于vue-cli搭建工程。
https://github.com/cunzaizhuyi/vue-slot-demo
hexo pc机上的配置 (一切操作都是在git bash)
安装git
安装nodejs
安装hexo
备注：用 npm 安装话经常出现卡住而导致无法正常安装，解决办法就是修改 npm 的安装源，
这里选择淘宝 NPM 镜像，这是一个完整 npmjs.org 镜像，你可以用此代替官方版本，同步频
率目前为 10分钟 一次以保证尽量与官方服务同步。
npm config set registry https://registry.npm.taobao.org
创建 你的Hexo 目录
mkdir "your hexo dir name"
//创建一个自定义的hexo目录，比如我就在用户根目录创建了一个myhexo文件夹（macOS）
cd "your hexo dir name" //进入到刚刚创建的目录
安装 hexo-cli
npm install -g hexo-cli
初始化该文件夹
hexo init
安装hexo的扩展插件
npm install
等执行成功以后安装两个插件， hexo-deployer-git 和 hexo-server ,这俩插件的作用分别是使用Git自动部署，和本地简单的服务器。
npm install hexo-deployer-git --save
npm install hexo-server --save
到这里hexo的本地搭建已经基本结束了。
打开hexo
hexo g
hexo server
git用户
创建以用于提交
git config --global user.name "yourname"
git config --global user.email "youremail
生成ssh公钥密钥
cd ~/.ssh
ssh-keygen -t rsa -C "你的email"
-----------------------------------------------------------------------------------------------------------------
linux (ubuntu + 阿里云) 服务器上的配置
安装nginx
切换至root用户
sudo su root
apt-get install nginx
查看nginx版本
nginx -v
启动nginx
service nginx start
可以查看nginx的端口号
ps -aux | grep nginx
启动后，在网页重输入ip地址，即可看到nginx的欢迎页面。至此nginx安装成功
cd /etc/nginx
vim sites-available/default
因为我们是拿nginx做 Web 服务器，所以我们需要安装部署好nginx,我们可以专门为hexo创建一个部署目录，比如我创建了/home/xufushen/hexo文件夹，并把nginx的配置文件nginx.conf中的部署目录改为/home/xufushen/hexo，配置文件在/etc/nginx/conf里；同样可以使用默认目录，nginx的默认目录为/var/www/html.
安装node.js
curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
apt-get install -y nodejs
安装git
apt-get install -y git
创建一个git用户
sudo adduser git
虽说现在的仓库只有我们自己在使用，新建一个 git 用户显得不是很有必要，但是为了安全起见，还是建议使用单独的 git 用户来专门运行 git 服务
添加证书登入
mkdir .ssh
mkdir authorized_keys
刚在在本地创建或者已经拥有的公钥，也就是 ~/.ssh/id_rsa.pub 文件里的内容添加到服务器的 /home/git/.ssh/authorized_keys 文件中，如上所说，添加公钥之后可以防止每次 push 都输入密码。 (使用Xftp软件直接将文件拖入)
初始化 Git 仓库
可以将git仓库放到自定义位置，我是将其放在 /xufushen/blog/ 目录下的
sudo mkdir /xufushen/blog/
cd /xufushen/blog/
git init --bare blog.git
使用 --bare 参数，Git 就会创建一个裸仓库，裸仓库没有工作区，我们不会在裸仓库上进行操作，它只为共享而存在。
配置 git hooks
我们这里要使用的是 post-receive 的 hook，这个 hook 会在整个 git 操作过程完结以后被运行.关于hooks的内容详情点击这里
在 blog.git/hooks 目录下新建一个 post-receive 文件
cd /var/repo/blog.git/hooks
编辑这个文件
vim post-receive
设置这个文件的可执行权限
chmod +x post-receive
改变 blog.git 目录的拥有者为 xufushen 用户
chown -R xufushen:gxufushenit blog.git
禁用 xufushen 用户的 shell 登录权限
出于安全考虑，我们要让 xufushen 用户不能通过 shell 登录。可以编辑 /etc/passwd 来实现
vim /etc/passwd
#将
git:x:1001:1001:,,,:/home/git:/bin/bash
#改成
git:x:1001:1001:,,,:/home/git:/usr/bin/git-shell
这样 xufushen 用户可以通过 ssh 正常使用 git，但是无法登录 shell。 至此，服务器环境的搭建已经基本结束。
配置本地_config.yml文件,完成自动化部署
配置 hexo 的 deploy
修改 hexo 目录下的 _config.yml 找到 deploy, 修改为：
deploy:
ype: git
repo: xufushen@47.100.184.175:/home/xufushen/blog/blog.git
branch: master
repo的地址为你自己的地址以及 git 仓库目录
使用hexo blog
新建文章：
hexo new "post name"
生成 & 部署：
hexo clean && hexo g && hexo d
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
在搭建的过程遇到的问题
连到服务器后无法连接到repository
这是因为你在创建blog.git与hexo文件时要把的归属用户与用户组更改为创建的用户
UML类图几种关系的总结，泛化 = 实现 > 组合 > 聚合 > 关联 > 依赖
在UML类图中，常见的有以下几种关系: 泛化（Generalization）, 实现（Realization），关联（Association)，聚合（Aggregation），组合(Composition)，依赖(Dependency)
泛化（Generalization）
【泛化关系】：是一种继承关系，表示一般与特殊的关系，它指定了子类如何特化父类的所有特征和行为。例如：老虎是动物的一种，即有老虎的特性也有动物的共性。
【箭头指向】：带三角箭头的实线，箭头指向父类
实现（Realization）
【实现关系】：在这里插入图片描述是一种类与接口的关系，表示类是接口所有特征和行为的实现.
【箭头指向】：带三角箭头的虚线，箭头指向接口
关联（Association)
【关联关系】：是一种拥有的关系，它使一个类知道另一个类的属性和方法；如：老师与学生，丈夫与妻子关联可以是双向的，也可以是单向的。双向的关联可以有两个箭头或者没有箭头，单向的关联有一个箭头。
【代码体现】：成员变量
【箭头及指向】：带普通箭头的实心线，指向被拥有者
上图中，老师与学生是双向关联，老师有多名学生，学生也可能有多名老师。但学生与某课程间的关系为单向关联，一名学生可能要上多门课程，课程是个抽象的东西他不拥有学生。
聚合（Aggregation）
【聚合关系】：是整体与部分的关系，且部分可以离开整体而单独存在。如车和轮胎是整体和部分的关系，轮胎离开车仍然可以存在。
聚合关系是关联关系的一种，是强的关联关系；关联和聚合在语法上无法区分，必须考察具体的逻辑关系。
【代码体现】：成员变量
【箭头及指向】：带空心菱形的实心线，菱形指向整体
小技巧：空心菱形表示聚合，好聚好散，所以生命周期可以不同。
组合(Composition)
【组合关系】：是整体与部分的关系，但部分不能离开整体而单独存在。如公司和部门是整体和部分的关系，没有公司就不存在部门。
组合关系是关联关系的一种，是比聚合关系还要强的关系，它要求普通的聚合关系中代表整体的对象负责代表部分的对象的生命周期。
【代码体现】：成员变量
【箭头及指向】：带实心菱形的实线，菱形指向整体
依赖(Dependency)
【依赖关系】：是一种使用的关系，即一个类的实现需要另一个类的协助，所以要尽量不使用双向的互相依赖.
【代码表现】：局部变量、方法的参数或者对静态方法的调用
【箭头及指向】：带箭头的虚线，指向被使用者
各种关系的强弱顺序：
泛化 = 实现 > 组合 > 聚合 > 关联 > 依赖
下面这张UML图，比较形象地展示了各种类图关系：
蓝蓝设计的小编 http://www.lanlanwork.com