在去餐厅用餐之前，我们还有些时间再了解一项基础设计原理。让我们回头看看在「邻近性」原理当中提到的灯光明暗控制开关。你能仅通过最左侧这个开关的样式看出它所控制的灯光明暗度吗？
如下图这样又如何？
我们之所以能从后者当中进行判断，所依据的就是映射关系。所谓「映射」，即是指，将被控对象的行为规律体现到控件自身的操作方式中，譬如开关把手的上升和下降，对应着灯光亮度的升高和降低。
映射同样体现在多个控件的布局当中，它们的次序应该能够反映出多个被控对象之间的相对位置关系。
我们假设这三个开关用于控制卧室天花板上的三盏灯。依据映射关系而设计的开关位置应该能够帮助人们快速判断出它们各自控制着哪一盏灯。映射原理有助于设计师对控件的类型、位置和次序进行决策。
当映射关系不明确时，我们通常需要依靠文本标签才能理解开关与灯之间的对应关系。这并非完美的解决方案，因为阅读和理解文字需要花费时间和精力，同时人们也难以依靠记忆进行快速操作。
在界面设计当中，映射关系也体现在控件类型的选择上。例如通过滑块（slider）控制文本的横向字间距就是很符合直觉的交互方式。而相比于滑块或是步进控件（stepper），旋钮则更适于旋转操作。
当然，最直接的映射才是最好的映射。为人们提供直接操作目标对象的能力是最为简单、精准、符合直觉的解决方案。macOS 上的鼠标指针操作，或 iOS 当中的手势操作，都可以为人们带来直接操作的体验。
不知各位如何，我是很饿了，这就准备下楼去吃饭。我们在大堂见，然后一起去餐厅。
坐在餐桌前，你会看到面前摆放着一个空盘子。我们能用这个盘子做什么？显然，放些食物在里面。除此之外呢？
盘子很光滑，可以旋转或是滑来滑去。
盘子有一圈宽边，可以抓着拎起来。
我们对于如何与这个盘子进行互动的观点便是可供性的体现。换句话说，盘子的外形特征为我们提供了如何与之进行互动的视觉及触觉线索，使我们意识到哪些交互行为可行，哪些不可行。我们会意识到要将食物放进去，或是将它滑到其他地方。但我们通常不会想要倒水进去，然后端起来喝。
可供性并非物体自身所具备的属性，它更多是在代表行为主体与目标对象之间的互动关系。可供性会因行为主体的差异而有所不同。举个极端些的例子，对我而言，飞盘可以用来抓住或扔出去，而对我的狗来说，飞盘就是单单用来叼的。不过另一方面，碟子对我和我的狗来说都是用来盛放食物的。
由于可供性所具有的主观特性，一个人能感知到的交互特性在另一个人看来则未必如此。当可供性所传达的交互特性与人们的常规行为有着高度关联时，人们会更加容易感知到。
例如，我其实可以把碟子当作茶托，这会是个不错的茶托。但我猜我们大家日常很少真的这样去做，因此我会更乐于将碟子视为盛放食物的容器，而非将水杯放在里面。
我们能从我们所互动过的任何环境及事物当中感知到可达性。当我们走进餐厅时，门的大小及形状可以传达出供人穿过的特性，连续的地面使我们意识到可以在上面安稳地行走。
椅子的造型暗示我们可以坐下，桌子的构造令我们明白可以将物品摆放在上面。
人造物品当中都包含有传达可供性的视觉线索，使人们明白哪些行为可行。清晰的、显而易见的视觉线索可以帮助人们迅速了解如何与之进行互动。
对于 app 界面设计而言也是同样的道理。滑块控件由把手和滑轨构成，暗示着拖拽的特性。
旋钮的样式意味着可以旋转。
按钮则一目了然地传达着可点击的特征。
在以上每一个例子当中，可供性的传达效率都是极高的。事实上，随着时间的推移，我们会越发适应于抽象度不断提升的可供性传达形式。我们所熟悉的界面当中的按钮，无非是现实世界里真实按钮的高度抽象化版本；那四个圆角足以将虚拟与现实两个版本的同一种物体关联起来。
同理，滑块把手周围那细微的投影效果也足以让我们意识到其独立于滑轨之上的操作特性。
而且，仅有的这一点点视觉线索可能都不是必需的，对于很多人来说，一条直线上的一个实心圆足矣传达滑动操作的可供性了。
有时候，可供性也可以通过动效进行传达。在天气 app 中点击主体内容，界面整体便会稍稍上升，暗示着可以通过滚屏来查看更多内容。
无论你使用何种方法，都必须确保 app 界面能够清晰准确地传达其自身的交互特性，否则，人们将困惑于如何与之互动。他们很可能会以错误的方式进行操作，然后发现无果，进而将控件理解成不可交互的元素，app 的可用性也会因此而受损。
一、生命周期钩子的差别
vue1.0的生命周期如下：
vue2.0的生命周期如下：
用一张表格来做对比：
二、代码片段
在vue1.0中可以在template编写时出现：
<template>
<div>第一行</div>
<div>第二行</div>
</template>
在vue2.0中在template编写时，必须只有一个根元素，否则会报错。
<template>
<div id='root'>
<div>这是第一行</div>
<div>这是第二行</div>
</div>
</template>
三、for循环遍历数组、对象时的参数顺序的变更，遍历数组之前是（index,value），现在是（value,index）；对象的之前是（key,value），现在是（value,key）.
移除了$index和$key两个隐式声明变量，以便在v-for中显式声明。
之前的track-by已经替换为key来代替
v-for的循环范围也发生了改变，之前v-for='item in 10'，范围为0-9，现在是：1-10。
四、Props 的参数
1、如果需要检查 prop 的值，创建一个内部的 computed 值，而不再在 props 内部去定义coerce。
之前是：
props: {
username: {
type: String,
coerce: function (value) {
return value
.toLowerCase()
.replace(/\s+/, '-')
}
}
}
现在改成用computed来代替：
props: {
username: String,
},
computed: {
normalizedUsername: function () {
return this.username
.toLowerCase()
.replace(/\s+/, '-')
}
}
这样有一些好处：
可以对保持原始 prop 值的操作权限。
通过给予验证后的值一个不同的命名，强制开发者使用显式申明。
2、twoWay参数的移除，v-bind 的 .once和.sync 修饰符 移除
Props 现在只能单向传递。为了对父组件产生反向影响，子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定。
3、
五、计算属性
cache: false 弃用，在 Vue 未来的大版本中，计算属性的缓存验证将会被移除。把不缓存的计算属性转换为方法可以得到和之前相同的结果。
六、Built-In 指令
v-bind 真/假值 变更；在2.0中使用 v-bind 时，只有 null, undefined，和 false 被看作是假。这意味着，0 和空字符串将被作为真值渲染。比如 v-bind:draggable="''" 将被渲染为 draggable="true"；
用 v-on 监听原生事件 变更，现在在组件上使用 v-on 只会监听自定义事件 (组件用 $emit 触发的事件)。如果要监听根元素的原生事件，可以使用 .native 修饰符；
带有 debounce 的 v-model移除；
使用 lazy 或者 number 参数的 v-model ，替换；
使用内联 value的v-model 移除；
v-model with v-for Iterated Primitive Values 移除；
带有 !important 的v-bind:style 移除；
v-el 和v-ref 替换，简单起见，v-el 和 v-ref 合并为一个 ref 属性了，可以在组件实例中通过 $refs 来调用；
v-show后面使用v-else 移除。
七、自定义指令
自定义指令 简化；
八、过渡
transition 参数 替换，Vue 的过渡系统有了彻底的改变，现在通过使用 <transition> 和 <transition-group> 来包裹元素实现过渡效果，而不再使用 transition 属性；
可复用的过渡 Vue.transition 替换，在新的过渡系统中，可以通过模板复用过渡效果；
过渡的 stagger 参数 移除。
九、事件
events 选项 移除，事件处理器现在在created钩子中被注册；
events 选项 移除Vue.directive('on').keyCodes 替换，新的简明配置 keyCodes 的方式是通过 Vue.config.keyCodes；
$dispatch 和 $broadcast 替换，可使用Vuex。
十、过滤器
插入文本之外的过滤器 移除；
过滤器参数符号 变更 现在过滤器参数形式可以更好地与 js 函数调用方式一致，因此不用再用空格分隔参数，现在用圆括号括起来并用逗号分隔。
内置文本过滤器 移除，替换 json 过滤器；替换 capitalize 过滤器；替换 uppercase 过滤器；替换 lowercase 过滤器；替换 pluralize 过滤器。
双向过滤器 替换。
十一、插槽
重名的插槽 移除；
通过具名 <slot> 插入的片段不再保持 slot 的参数。请用一个包裹元素来控制样式
十二、特殊属性
keep-alive 属性替换，不再是一个特殊属性，而是一个包裹组件。
十三、计算插值
属性内部的计算插值 移除；
HTML计算插值 移除，取代的是v-html指令；
单次绑定替换成v-once。
十四、响应
vm.$watch 换成 update生命周期钩子；
Array.prototype.$set弃用，用Vue.set代替
Array.prototype.$remove 移除 用 Array.prototype.splice 替代；
Vue.set 和 Vue.delete 移除；
替换vm.$data 移除；
vm.$get 移除，可以直接取回响应数据。
十五、围绕DOM的实例方法
vm.$appendTo 移除；
vm.$before 移除；
vm.$after 移除；
vm.$remove 移除。
十六、底层实例方法
vm.$eval 移除；
vm.$interpolate 移除；
vm.$log 移除
十七、实例DOM选项
replace: false 移除，现在组件总是会替换掉他们被绑定的元素。为了模仿，可以用一个将要替换元素类似的元素将根组件包裹起来。
十八、全局配置
Vue.config.debug移除，因为警告信息将默认在堆栈信息里输出；
Vue.config.async移除，异步操作现在需要渲染性能的支持；
Vue.config.delimiters移除，可以在使用自定义分隔符时避免影响第三方模板；
Vue.config.unsafeDelimiters移除，HTML的插值替换为v-html。
十九、全局API
带el的Vue.extend移除；
Vue.elementDirective移除；
Vue.partial移除。
在佐藤看来，这些整理工作常常被他人视为是在浪费时间，而实际上整理是一种培养思路的好习惯，长此以往，不仅能让自己的思路变得更加清晰，同时，思维也会跟着变得更加敏锐起来。
在与客户的沟通过程中，我们可以清楚的了解到，具体需求是什么。随后再将这个需求中的关键点进行提炼与整理，最终完成这个设计。而不应该全是凭借设计师自己的灵感和专业水准去完成创作。
△ 多摩美术大学以「自由与意力」作为教育理念。现为日本规模最大的美术大学。
佐藤的父亲是位建筑师，祖父是俄罗斯语学者、前东京外国语大学荣誉教授。在这样的家庭环境的熏陶之下，让佐藤从小就喜欢上了画画。并且在报考志愿的时候，也选择了艺术类的大学。但这一切似乎并没有那么容易，没错，他落榜了。
但这并没有让他放弃这个想法，经过了两次落榜之后，终于在他20岁的时候，进入了多摩美术大学就读。
1989年，刚刚从多摩美术大学毕业的佐藤，凭借着优异的成绩，入职了一家日本知名的广告公司「博报堂」。在这期间，受到了Takuya Onuki先生的指导，成长迅速。经过长达六年的工作积累，佐藤终于小有成就。他的作品「本田型格（Honda Integra）」获得艺术指导协会的（ADC）年度大奖。在「博报堂」工作的这些年，佐藤除了收获了大量的经验和知识外，还遇上了在人生中给予他巨大帮助的人，也就是他的妻子佐藤悅子。
时间一转又过了五年，这时的佐藤已经习得了一身本领，终于有一天，他决定离开这家公司，去成立属于自己的工作室 「 株式会社サムライ」 ，至此开启了他魔术般的设计生涯。
△ 事务所内部一角
在次偶然的情况下，有位外国摄影师问他「可士和」在英文里是什么意思，当他解释到第二个字」士」的时候就卡住了，因为在日文的发音罗马里「 SAMURI 」是武士的意思。也这是事件启发了他的想法，并且给自己的事务所命名为「 SAMURI 」。根据佐藤的妻子回忆，当时她听到这名字的第一反应是：「什么？武士事务所？也太土了吧！」
在佐藤可士和的作品中，除了人尽皆知的优衣库设计。他所经手的工作还包括有：偶像团体「SMAP」的整体视觉设计、NTT移动电话设计、纽约全球旗舰店的创意指导、迅销公司的企业识别设计、藤幼稚园的更新计划、国立新美术馆的标志设计等。
除了获得众多奖项外，在2007年，佐藤成为了明治学院的客座教授，同时也是东京ADC（艺术指导俱乐部）、东京TDC（字形指导俱乐部）、JAGDA（日本平面设计师协会）的常驻会员。
在佐藤可士和看来，只依靠灵感的设计是远远不够的，除此之外，设计师还需要去考虑产品背后的逻辑。灵感如果太跳跃性，太过超前的话，是没办法解决现有问题的。但是在设计的过程中，灵感也是必不可少的关键因素，许多时候我们都需要通过「灵感」来扩充想法。而灵感的并不一定非要在自己的脑海中产生，通常创意的答案就在客户哪里，而我们做的工作只是总结对方的思绪并加以重新创造。
△ 佐藤可士和的超整理术
在《佐藤的整理术》这本书中也曾表明过，他自己的工作室里面没有多余的东西，没有电话和电视，偌大的会议室里也只有一条长长的会议桌和雪白的墙。
△ 佐藤可士和的事务所（内部）
把环境中的干扰元素清理到限度，这有助于人对的情绪的整理。还有每当他完成一个项目都会聚集所有员工来整理所有的资料。目的也在于在整理的过程中让人时刻的保持清醒的精神状态，以做出更迅速、更准确的判断。
佐藤所从事的职位是「艺术指导」，可能一般人认为的艺术指导工作，就是负责「拟定和执行平面计划的统筹者。」
但在他看来艺术指导是「拟定全盘的沟通战略，并运用设计的力量将其化为有形之物」的工作，通过跟客户进行多次全方位的沟通，整理出客户的需求以及内心的期待，从而做出符合客户与市场需求的解决方案。佐藤将自己的职位定位为医生，客户就是患者，通过「望闻问切」找出症状的病因和治疗方向。
在整理的过程中需要统理对方的思绪，很多时候客户虽然对自己的产品非常了解，但对于产品的市场价值却并没有明确的认知，或者头绪很乱，不能总结出产品特点和价值。也有些客户对于自己的需求说不清楚，有时候是他们想要的太多，但他们并没有明确自己的目标是什么。这时就需要跟客户深度沟通一一推敲客户堆积如山的问题，加以整理、逐步将产品最关键最本质的焦点提取出来，将其打磨精致成为联结产品和消费者的桥梁。
1. SMAP（2000）
2000年，佐藤可士和担任了由木村拓哉等超人气偶像组成的组合SMAP的整体形象策划。这次设计中他采用全新的传播策略。否定传统的广告宣传方式，为日本流行音乐领军团体之一SMAP的十周年纪念引入了一种很酷的宣传方式。
佐藤可士和以「流行乐队就是品牌」的新视角，重新定位了SMAP，并制定一种新的传播策略，在CD夹克和各种音乐会商品上都使用了独特的视觉标识。佐藤可士和将涉谷停放的汽车披上印着乐队形象的车罩，在路灯上悬挂横幅、为公共汽车车身设计特殊的视觉样式，还有报纸广告和海报宣传等其他传播媒介。
受乐队CD包，盒子，碟底的启发，他重新修改了位置和颜色比例，设计出一个容易让人记住的三色符号。并通过各种街头活动营造出轰动，热闹切且有吸引力的热点。
他将整个城市定位为一个大型传播媒介的想法得到了高度认可，并在2000年赢得了许多著名奖项。可士和还为乐队设计了一种以他们发行的CD命名的饮料，「Drink Smap!」并进行了更多的实验广告。他设计了饮料运输车、工人工作服和安装在音乐商店的自动售货机。利用这独特的产品作为广告媒介，成功的吸引了大量的关注。
2. OZOC （2002）
佐藤可士和曾担任OZOC(年轻女性时尚品牌)的创意总监，并负责其旗舰店的传播策略，该旗舰店于2002年在原宿开业。佐藤可士和在建筑师荒木伸男(Nobuo Araki)的帮助下开始了这个项目，创作出一个红色立方体建筑，但一个月后，这座建筑的颜色一夜之间变成了朴素的白色木材。
佐藤可士和将建筑概念定义「变化」。「变化」是时尚的本质，随着时间的变化而变化。他将建筑与OZOC品牌的灵活性进行了结合，展示OZOC品牌对潮流的敏感度。OZOC在日本有100多家商店，它希望为品牌传播创造一种独特的方法。
佐藤可士和抛弃了以往时装广告策略，即使用外国模特的照片。将OZOC的新旗舰店作为媒介，并称之为「原宿广告架构项目」（haap）。为了强调这一理念，佐藤可士和利用建筑工艺，为店面外部建造了一系列广告板。为了强调设计概念，还将建筑过程和设计的稿图，模型等应用于广告主题。佐藤还制作了一本特殊的概念书里面记录着建筑的施工过程，并在开幕式上分发给记者和其他相关从事者。
他证明了除了文字，照片等传统广告媒介外，建筑设计和室内设计也能在品牌传播中发挥着积极和重要的作用。
3. 藤幼儿园（2004）
佐藤先生为藤幼儿园提出了一个全新的观点，指出「幼儿园本身就是一个巨大的游乐场」的宏伟概念。他将建筑作为培养每个孩子创造力的媒介赋予了新的视角。佐藤先生利用场地上现有的日本大榆树，提出了一个木制屋顶和甜甜圈型的建筑，孩子们可以在上面每天跑步和玩耍。中间的区域被设计一个中央庭院，来促进平时公共活动时的团结性。佐藤先生也为幼儿园设计了操场设备，将它融入了幼儿园本身。他的想法是使幼儿园成为「学习的接口」，成为新的幼儿教育模式。
佐藤与手塚夫妇建筑团队合作，手塚夫妇的设计以融合自然的多功能空间而闻名。他们的建筑理念是:「无人独处的空间」。幼儿园的空间设计也秉持着这一理念。屋顶作为孩子们的游乐场，为孩子们提供了丰富而有趣的内置设备。
让孩子可以屋顶上自由地奔跑和玩耍，然后通过滑梯或绳梯回到地面。甚至连排水系统都是为孩子们设计的，从屋顶收集的雨水形成瀑布。佐藤先生还为幼儿园标志、网站和儿童t恤设计了类似剪纸的字体和字符。
该项目以「幼儿园本身就是一个巨大的游乐场，培养每个孩子的创造力」为理念，代表幼儿教育的未来，在国际上获得了高度赞誉，获得了2011国际机构（CELE）颁发的「最优秀设施奖」，以及众多其他全球建筑和教育奖项。
4. 优衣库（2006）
2006年优衣库在纽约SOHO的旗舰店开业开始，佐藤可士和负责了时尚品牌优衣库的所有全球品牌传播活动。为了实现优衣库独特的创意和设计基础，他提出了以「具有美学意识的超合理性」为概念，总结了优衣库对世界的价值和主张。
可士和通过修改日本片假名和原始字体设计出新的视觉标志，并组织了由建筑师、室内设计师和平面艺术家组成的专家团队，为伦敦、巴黎、上海、东京和柏林的每一家旗舰店设计，每个地区的旗舰店都延续着相同的基调和感觉。这种与优衣库整体业务管理直接相关的全面传播策略，提升了优衣库品牌的全球影响力。
优衣库在纽约Soho的第一家全球旗舰店的logo，用回了原logo鲜艳的红色，片假名和英文表达了优衣库如何将欧美的休闲装转变成日本风格。
整个平面设计从标志到原始字体都是传播策略的核心。佐藤将标志和字体组合成一种视觉图案，并将其运用在建筑外墙面板，出租车车厢，屋顶，和各种媒体，通过各种传播形式来吸引人们对优衣库的兴趣，促使人们去了解优衣库。
此外，以负责设计各个旗舰店的片山正通先生、担任网站设计的中村勇吾先生为中心，组建了在全球展开的创意团队将优衣库的品牌形象，在巴黎、伦敦、柏林、莫斯科、上海等各城市进行品牌本地化。
佐藤还为优衣库的衬衫品牌「UT」进行设计，2007年东京原宿旗舰店开业并发布衬衫专业品牌「ut」，并以「衬衫的未来的便利店」为概念开展了设计。将t恤衫放入瓶包装瓶，陈列在设计成饮料机型的展架上呈现出一种未来式的购物感。
「UT」一发布就在日本国内引起热烈反响，商店数天挤满了客户甚至连店内的商品也出现了销售一空的场景，这种现象让人不禁发出欣喜的赞叹。佐藤以一种全新的品牌设计战略来重塑优衣库。将公司经营与品牌设计相结合创造出一种全新的品牌战略。
5. 今治毛巾品牌形象（2006）
「Imabari毛巾品牌项目」于2006年作为日本经济、贸易和工业部推广日本品牌项目的一部分。由于无法招募到下一代工人，Imabari面临着与廉价外国产品的竞争，前途未卜。佐藤可士和得知情况后为该公司制定了新的品牌标识和品牌策略，将Imabari的高价值转化为「最安全、最可靠、质量最高的品牌」。佐藤可士和创造的标志象征着Imabari（今治）地区丰富的自然和工业的复兴。将Imabari的品牌定位为品质保证的标志，选择了纯白的毛巾作为主打产品，体现了品牌的精髓。
将「最安全」和「最可靠」作为核心品牌理念。当时，由于发生了几起食品安全事件，日本消费者的危机感增强了。人们对食品信息的安全性非常重视。佐藤可士和利用这种焦虑，直接定位Imabari产品的可追溯性和高质量。红、蓝、白分别代表太阳、海洋和水，是Imabari毛巾高品质的基础。这个标志的首字母是「I」，增加了欧洲的味道，为「全球品牌」定下了基调。
白毛巾以前并没有被用来代表高质量，但佐藤认为，作为Imabari的主要产品，它最清楚地代表了Imabari的价值。这清晰明确的信息极大地提高了Imabari的品牌知名度和销量，并将其定位为日本的全球品牌之一。
2012年，在东京青山南美开设了第一家概念店。2017年在产地今治设立了旗舰店和毛巾实验室。为了展示日本Imabari毛巾的区域生产商。还新成立了「毛巾实验室」，让游客可以在这里体验毛巾的安全高质量的品质。所有这些活动都有助于加深消费者对该品牌的吸引力和热情。这个项目的创新方向，包括制定和执行的沟通策略，大胆的标志和清晰的品牌信息获得该地区100多家公司的共同关注。
6. 国立新美术馆(2007)
2007年1月开幕的国立新美术馆，是日本第五个国立美术馆，也是最大的国家美术馆，也是三十年来第一家开放的博物馆。它没有永久的收藏，作为一个展览场所更多的活动来源于艺术教育和展览活动。
佐藤可士和以」全新「做为出发点，将」没有收藏品「的缺点转化为优点，并结合美术馆做为「日本最大的展示空间」的优点来规划策略。
识别标志以「新」这个字作为主要元素，想要用视觉表现出美术馆的与过去其他美术馆的不同，「就不能局限于旧框架，通过迄今没有任何人做过的尝试。佐藤可士和提取」开放「做为关键词，因为该美术馆致力发挥艺术中心的功能，除了搜集信息之外，更是期望美术馆能成为信息交流地。
佐藤将「新」设计成美术馆的视觉标志并通过标志强调这种「开放场所」的特征，去除「新」这个文字里所有线条和弯角的封闭部分，制作独特的开放式字体。此外，所有线条都是一边直角，另一边圆角，这个灵感源自黑川纪章先生建筑的启发，美术馆建筑的正面呈现海浪般的曲线，另一侧的展示空间则是直线，通过字体的特征让人联想到建筑的外形。
他还为博物馆衍生品和标牌开发了原创的模板式英文和数字字体，以表达博物馆的开放性和多元化，并将其核心价值观和独特建筑统一为一体，作为其综合视觉传播策略的一部分。通过统一建筑概念和视觉传播概念，提升了美术馆的设计完整度和统一性，确立美术馆整体的全新形象。
7. 千里复健医院(2007)
「康复度假村」是佐藤可士和2007年为这家医院开发的宏伟概念。医院的作用是提供康复治疗的施设，为正在康复的病人恢复活力和信心让他们回归正常生活。
通过理事长桥本康子医生的叙述的详情，整理和思索后提出「复健休闲中心」概念。医院是修养的场所，但是通过提供舒适的空间和真诚的服务，能发挥心灵康复的功能。
由可士和担任家具设计的监制，建筑内部采用休闲饭店风格，有热带鱼悠游其间的水槽，客厅有暖炉，芳香疗法，和图书馆。家具全部是摩登的北欧制品，采用柔和的间接照明，充满温馨感的木质地板让患者放松心情。员工制服全服翻新，委托滝沢直己先生设计，新的制服给人整齐洁净的印象，又兼具「整齐」和「高雅」的高级感可以使患者感到安心。
医院的结构都是木质材料目的是为了营造出温暖的氛围，让患者感受到大自然的治愈能力。佐藤先生还制定了康复医院新脑卒中病房的更新计划，该病房是为纪念康复医院成立10周年而建造的。他扩大了「康复度假村」的概念，为患者提供放松的环境，并将重点放在康复上，作为医院新计划的一部分。
此外医院还设置了一间音乐室和一间铺着木板的美术室。佐藤先生还将自己亲自创作的绘画和瓷器放置在大厅内外展出，为患者提供一种新的治疗艺术能量。
8. 7-11便利店（2010）
7-11便利店是世界上最大的便利店连锁集团。它不仅具备便利店个性化和便捷化的特色，更有着其经营和发展的独到之处。其庞大的店铺网络，规范化的商品管理，与时俱进的经营理念。
在即将到来40周年之际，佐藤可士和为7-11便利店重新制定了一套经营战略，重新定位该品牌的重点，便利店的优点并不在于价格而在他的产品质量和形象，为了提高品质和形象，可士和为便利店重新设计了1700多项商品包装。这一举措打破了每季度最高销售记录。佐藤可士和强调卖的不只是商品，而是对生活的重视，设计源于生活，应该通过设计来培养生活美感。
佐藤先生还参与了「Seven Cafe」（七咖啡）咖啡机的命名、包装和设计并创造出超高的人气，可以被认为是一种社会现象。并在1年里占据国内咖啡销量No.1的位置。
佐藤先生专注于最细节的设计，以最大限度地发挥这些优势。简单的包装设计，非常适合个人家庭餐桌，受到寻求高品质产品的消费者的欢迎。佐藤还针对食品进行分类，并按类别放置品牌标签，以便客人能够根据自己的需求轻松地选择产品。品牌重塑的第二年开始，以日常用品为主的「生活方式」品类开始逐步打造自有品牌。
在第三年，他推出了「Seven Café」，给7-11便利店带来了巨大的成功。佐藤先生将重塑品牌的传播方法结合到产品中，并从设计的角度出发结合。这是其他便利店产品都没有的一个因素。因此，他不仅带来了巨大的经济成功，也带来了巨大的影响，创新日本的生活方式。
9. 开被乐记念馆（2011）
「开杯乐纪念馆」以创造思考为概念，通过有关方便面的各种展览和体验项目，让参观者在愉快的气氛中了解发明、发现的重要性，学习创业精神，是一个体验型饮食教育设施。该公司的创业者安藤百福先生生前一直有一个念头：「希望告诉孩子们发明、发现的重要性」 纪念馆的logo创作灵感来源于开杯乐靠近杯口的外沿设计，设计3个惊叹号「！！！」来表现「发明和发现」的喜悦。内部基调以红色和白色为主，简洁明了。并将这一理念体现在博物馆的平面，空间和展示内容。
10. YANMAR公司（2013）
为了纪念Yanmar诞生 100周年，佐藤可士和为yanmar公司重新定制了一个品牌战略，该公司涉及工程、农业、建筑、海洋工程和全球能源等多个领域。
为了实现yanmar公司全球化的目的，佐藤制定了名为「高端品牌项目」战略，以展示洋马公司计划的未来发展方向。
佐藤为公司设计新的标志，还与创作者合作，创造了拖拉机原型和新农业服装，作为体现洋马全球化的意愿。YANMAR的品牌形象在国内外有所不同，在日本它以其拖拉机和公司卡通男孩角色Yanboh和Marboh而闻名。在海外，洋马是游艇和海洋工业的热门品牌。基于这一事实，佐藤将洋马的许多活动转移到「食品生产」和「能源转型」这两个主要视角，专注于一个企业使命，即追求一个可持续的，循环型社会。
佐藤设计了源自Oni-Yanma的Flying Y标志，该标志启发了公司名称，在日语中意为「蜻蜓」。此外，在新闻发布会和经销商活动上以新拖拉机和新农业、海洋服装的设计为特色，有力地表达了Yanmar的未来愿景。
佐藤还负责监制和指导位于大阪的新办公楼的建设，在办公楼在2014年建成。建筑本身的定位旨在通过采用进的环境技术实现零排放的概念模型。佐藤可士和将YANMAR FLYING-Y BUILDING大楼定位为传播媒体，不断传递洋马「可持续未来」的使命。
11. MoltBene企业新形象（2015）
MoltBene是日本著名护发公司，在即将到来的40周年纪念，邀请了佐藤可士和为公司制定新品牌战略的策划和执行，包括改变公司名称， 并为「MoltBene」开发新的企业形象。他为公司提出一个新的命题「人生中，体验新的美」。他还将集团子公司整合在这一新口号和新公司名称「美的体验」概念里。
佐藤设计的新标志灵感来自于「美」的日文汉字形式。整个标志是由 「美」简化和抽象而形成的，并使用紫色作为公司的新企业颜色。这区分了公司的独特性，因为紫色不是公司徽标中常用到颜色。同时负责新公司总部的入口和美容工作室的室内设计，并负责安装艺术品。
佐藤先生设计了公司新总部内部新美容工作室。用于员工培训，与新闻会议等，旨在该空间与整体品牌战略同步。
从工作室天花板上的织物和佐藤先生在墙上的表达了这个工作室作为新「美」的体验发源地的定位。通过在新公司名称、新标识、新美容工作室的内部设计以及其他新的传播媒介中象征性地融入新的使命宣言，将这些元素融合在一起，向社会提出了一种新的品牌战略方案。
12. Miwa Yamamoto（2016）
Miwa Yamamoto是一家Tenobe Somen（日本手工细麦面）公司。为了纪念诞生300周年，佐藤可士和被委托设计新的公司名称和新标识，还有公司的旗舰产品「白龙」新包装设计。在整个项目中，佐藤致力于将当代日常生活和传统工艺与日本食品传统之间相融合创造出和谐共生的形态，同时也为品牌创造了未来的形象。
考虑到公司日后扩张其他产品生产线，从而应对日益多样化的消费者饮食习惯，佐藤可士和先生提出将公司名字「Miaw SomenYamamoto」简化成为「Miwa Yamamoto」。
他表示公司历史悠久，与奈良古城历史相互交织有着深刻的历史渊源。基于这份历史情感佐藤以印章的形式设计出公司的新标志。公司产品」白龙」的包装以白色为基调，配合极简又细致的图案。简单而现代的，与其他竞争产品区别开来。包装上的图案细腻又精致与产品产生呼应，同时标志象征着Miwa Yamamoto细麦面背后独特而精致的技术水平。
13. DIFFERENCE（2016）
2016年佐藤为DIFFERENCE更新品牌形象系统,还为此定制了一套全新的西装订购系统。客人通过店内的裁缝进行初步测量，将测量好的尺寸保存进一个独特的APP应用中，从开始的测量尺寸到选材，布料，到支付都可通过该应用完成。
这建立了一套全新的服务模式，将线下实体店和线上店铺连接起来创造出一套新的订购系统。佐藤先生还提供了根据每个顾客的数据进行促销信息分析，将合适的促销信息传播到合适的客户身上。极大限度地发挥了定制西服的优势。
2016年10月在青山开业，佐藤先生设计了一个精致的室内空间。该应用程序允许商店提前询问顾客的个人喜好和预算，向他们展示不同的西装选择和面料样品，这样顾客一旦来到商店，就可以触摸和感觉他们「想要」的西装。顾客在真实商店和虚拟商店之间有一种无缝的体验。很多客户都很欢迎这项服务，因为每个人都可以在整个过程中享受到高质量的服务和个性化。
14. 武田制药（2018）
佐藤可士和为武田制药有限公司在东京·日本桥本町建设了的新全球总部提供了室内设计指导。佐藤设计了一个精致又具有代表性的室内空间，向世界展示武田公司的品牌核心。
他根据武田自成立以来的使命「生命的力量」为概念来进行设计并体现在公司的内部结构中， 从入口到接待处到工作区域的运动过程讲述了人类生活的故事。
并以生命中不可缺少的八个元素，生命，水，光，地球，树，人，联系和未来的汉字来作为空间装饰里的主要形式。将这些汉字提炼成现代符号，传达出了一种日本企业特有的「和」的感觉，并作为艺术品应用于墙壁、地毯和灯光。
该项目作为空间品牌的视角得到了广泛关注，不仅是为了传达武田支持「生命的力量」，还为所有与武田合作的人提供了分享同样美好未来的空间。
15. 日清食品公司设计工厂（2019）
2019年负责日清食品关西工厂的参观设施的创意指导、室内装饰设计。佐藤结合了趣味性和品牌历史，设计出与普通工厂不同的形式。
在入口处是巨大的杯,面外观采用日清的代表色：紅与白为主，从入口处走进內部参观后，映入眼帘的便是一条长长的红色走廊,全长200米的鲜红的参观通道内部同样延续了入口处的红白设计，与工厂内部的干净用色形成强烈对比，给人留下一种冲击又和谐的对比，在红色走廊里有40个大显示器展示生产过程，每分钟生产400个杯面,同时还能听到生产线中发生的声音取样。
日清工厂总面积约10万平方米，1年内最多可生产10亿顿产品。拥有尖端设备和IoT技术，是国内最大的食品工厂之一。
16. SAMURAI INCUBATE(2019)
2019年7月SAMURAI INCUBATE在日本总部的公司更换了全新的办公地点，同时也重新修订了企业形象系统。佐藤可士和为该公司重新整理了行动的方针，对齐经营理念提出修正，把焦点聚焦在「志勇礼诚」这句话上。
LOGO标志把「志勇礼诚」这四个字，无限的抽象化与简化，使logo的视觉表现上与日本极简的审美观念融合统一。
四个正方形水平排列，即统一又平衡稳固，象征了今后公司新事业的基础。新办公司在东京都港区的六本木一丁目街道中，佐藤认为新的公司地点是新开始的舞台，寓意着在这里能创造出更多新的商业机遇。新公司在六本木区选择了一栋三层楼并以「无」作为概念，去除了楼中附属的东西让大楼接近刚建好的状态。
公司二楼的灵感来自于「道场」这里能根据不同的用途灵活运用其空间，也可以做为一些特殊活动的场所。正面有一面纯白的墙，传达着一种从无到有的理念，同时也是这个空间中重要的标志。其他的空间是无隔断的一体化空间设计，可以满足快速的繁忙事务的处理。在空间设计中材质选择了木头、不锈钢、布、玻璃，希望这里散发出轻松和质朴的氛围。
早些时候，在medium上看到了政府UX设计师，Cyd Harrell所写的以”尊重用户“为主题的文章，里面提到了尊重用户的时间，尊重用户的能力以及尊重用户价值。
阅读后使我脑海中一个一直以来都若隐若现的想法逐渐露出一角，从那开始我渐渐关注用户、时间、掌控力、注意力这一组词语所组成的一个模糊的概念，这个概念的核心就是产品如何侵扰用户，过度商业化然后导致用户的信息超载情况。
这个观点一开始还是很模糊，我并没有获得足够的信息支持我阐述清楚这个主题，直到后面，我看到NNG（尼尔森诺曼集团官网）的一篇关于”注意力经济“的文章，终于把这一系列元素组织好，产出了今天这篇文章。（本来以为理清这一个主题要很久）
首先我要提出一个词语，"wicked problems”。在我学习国外的设计思维课程时，在前面几个章节中有提到一个“wicked problems”即棘手的问题这样一个概念，也可以翻译为抗解问题。指的是极为复杂，严重，上升到社会层面及人类层面的问题。如环境污染，农民工问题，教育问题等。而设计思维被发明出来一个重要目的或者说任务就是用于解决一些这样的问题，用系统思维和创新性的视角来挖掘潜藏的核心问题，以及探索对应的最佳解决方案。
我提到这一点不是要对比国内国外环境，也不是要赞美国外的设计氛围，而是想提醒大家，我们设计师可以做更多，可以想得更多，可以用设计思维，结合理性和创意去解决很多问题。我一直以来翻译一些国外的系统理论，设计方法论，也是想用自己的力量让大家了解更多设计的可能，除了眼前的屏幕，我们的视野应该放的更长更远，去思考我们解决的问题，以及我们所设计的方案可能会衍生的一系列问题。
我接下来要讲的，就是在当下环境下一个很关键的问题，用户注意力。
一：用户的注意力
注意力成为人类的限制因素
大家回忆一下，每天清晨，都有哪些内容吸引你的注意力？了解时间、看一下微信未读消息、早报新闻等等等等。到了公司食堂，你看一下周围有多少人一边吃东西一遍盯着手机屏幕？在去工位的路上，又有多少人低头玩着手机走路？这还没完，到了工位上，打开电脑，接收邮件，查看工作事项；打开网站阅读一些学习内容；微信突然跳出来一个红点，打开网易云音乐挑选一首歌，选着选着看到群聊里一条新鲜轶事，然后腾讯新闻弹出来，忍不住又去点开阅读下。
没错，这是我的日常生活，我是一个选择恐惧症患者，但我却总是忍不住把自己置于一个同时处理超多个事项的情况下。读这篇文章的你也应该一样。我曾经很多次想，这种情况应该怪我自己吗？还是别的什么问题？
OK，这确实并不单纯是人的问题，还有产品、服务的问题。注意力是当下时代最为宝贵的资源，而产品一直在争抢的所谓的时间，也只是注意力的一部分而已。在信息大爆炸甚至工业革命之前，人类的大部分历史中，知识、信息都是很宝贵的资源，只有很少部分人能够阅读，能够获取一定的信息。但在信息大爆炸的今天，我们可以轻易获得大部分我们想了解的或不想了解的信息，只需要动动手指，只需要睁开眼睛。
我们获得了巨量的信息，但我们的信息处理能力并没有产生什么变化，是的我们现在处理信息的总量，和几百年前的人类祖先并没有什么区别。因此，几百年后的今天，信息资源已经不是限制因素了，注意力才是，用有限的注意力，去获取无限的信息，结果显而易见。你在浏览文章的时候是没有办法看动漫的，当然你在作图时也无法浏览新闻。
分心导致低效
到这里，大家应该都清楚，人类的注意力有限，我们无法同时做很多事情，然而很多时候，我们却在同时进行很多事情，因为一次性完成多个任务，对于我们有着很强的吸引力，然而结果往往是错误百出或者是更低的效率。
在《简约至上，交互设计四策略》中专门提到了分心对用户的影响，有时候，分心不是用户自发的，而是来自产品的错误引导。产品界面中过多干扰元素，或者诱导元素导致用户经常性的转移注意力，这些东西让原本简单的任务变得异常复杂。比如阅读。
如果你经常在medium阅读文章，你会发现一类文章读起来效率很低，且经常容易令你分心乃至焦虑。那就是在文内插入各种链接的文章。每一个链接仿佛都在勾引你，快来看一下吧，这里有好东西，然后读者就打开了一个、两个乃至四五个网页，因此读一篇文章附送了五篇文章，那么读者需要把这些附加内容浏览完毕再重新开始阅读最初的那篇文章吗？当然有些人会凭借顽强的毅力（或者根本不感兴趣）跳过那些链接并阅读完整篇文章，那你很厉害，但是大部分人都做不到，尤其是设计师，因为我们对知识始终保持饥渴。
（写到这里微信突然弹出来几条消息，然后youtube推了一个视频，最后我又想起来长安十二时辰最后一集我并没有看，再次回来已经是十分钟后了，这还是我强忍住去看视频和电视剧的结果）
这些链接分明可以放在文章的结尾，感兴趣的人自然会去择优而读。除了文内链接，文章左右两侧的广告、弹窗以各种形式挑战你的注意力，瞥一眼你就会浪费几秒，没忍住点进去则会浪费更多时间，是的我是谁我在哪我在干什么？我只是想阅读一篇文章而已，所以为什么现在逛淘宝。
各种设备也在不断地使我们分心，不仅限于屏幕，还包括听觉触觉，如手机的语音提醒、震动。持续的打断甚至会使人们上瘾，可能下一个消息很重要，我必须看一下，于是你又拿起手机解锁然后打开微信，你看个锤子肯定又是腾讯新闻。不停的打断会影响我们的正常任务，可能是学习也可能是工作。最终我们可能需要花费更多的时间来完成计划事项，且完成的质量堪忧。
PS：打游戏应该很少分心
在现实中，人类不会这样互相打断，如果我们想要请求某人帮忙，会根据对方所处的场景状态来决定是否打断对方，也会考虑事件的紧急程度。如果事情很重要比如你的手机在网吧被偷了（重要），而你在玩游戏（没那么重要），那我们会选择打断对方。
而机器的问题在于，它不会以人的方式思考，我们设计师经常提到要以人为中心，但机器本身只会执行指令，企业的指令，因此不管信息是否重要，它会按照设定推送给你。事实上，社交应用及各种产品都应该区分信息的重要程度，而不是各种信息不分主次不分场景一股脑推送出来。
我们都知道福格模型B=MAT，想要促成结果需要对应的需求，更确切的说是场景+时机+需求。当我在公司门口，打开滴滴准备打车时自动弹出了家的地址，我只需要点击就能填写完毕而没必要重复输入，这是一个很流畅且体验良好的提醒。
而我这样一个轻度视频用户，偶然打开爱奇艺瞬间收到40多条内容推送，要不是因为开了会员我会当场卸载！！
分心也是拖延症的一个罪魁祸首，我们拖延的一个重要原因是注意力被其他事物所吸引，有可能是游戏，有可能是新闻资讯。大部分人都不能按照自己的最初计划完美及时的去完成。总是一拖再拖，可能并不是我们想拖延，而是有太多内容在吸引我们的注意力。凯利教授的《自控力》中就提到所有人想要拥有自控力，都需要知道我想要、我不想和我要做这三部分内容。以便抵制来自生活中的各种吸引力或者说诱惑。
二：注意力经济的崛起
1997年，Michael H. Goldhaber写道，“全球经济正在从物质经济转向基于人类注意力的经济”。许多服务都是免费提供的，而用户为服务需要花费的货币就是注意力。用户不用付费，只需要支付注意力。
产品争抢用户注意力
注意力经济的最初概念竟然从1997年就被提出，我看到时相当震惊，在二十多年前，企业就开始低效的使用用户注意力来变现，国内是什么时候开始的呢，答案应该是从争抢用户使用时长的竞争策略开始，占领用户时间就等于占领用户注意力。
我们已经沉溺于争抢注意力策略这个泥沼中，从各种花费巨量时间的游戏如王者荣耀，到风靡至今的各类直播平台，再到时下流行的短视频，我们在不停的花费时间、时间、时间，注意力被无意识的“窃取”。用户不需要花费一分钱也可以正常娱乐，而你的参与，你的注意力的参与却在帮助企业不断挣钱。
如果你还不清楚自己是如何被争抢乃至窃取注意力的话，你可以回忆一下你每天接收到各种推送信息，除了各类应用的Push，还有短信、电话、邮件等等。推送提醒你关注的主播上线了，提醒你的内容新闻，提醒你一切可以诱惑你的信息。购房后销售人员信誓旦旦说不会泄露业主信息，交房前一年就有各种装修家居的短信和电话轰炸。淘宝购物没有一周就各种五星好评的消息请求。这则是另一种层面的窃取用户注意力了。
如果给你推送的是你想要的内容你是应该开心呢还是担忧呢。因为你有时也会想，关于你的信息是不是已经被泄露到处都是。当然并不都是恶意泄露，随着技术进步我们有了大数据技术，但精准推荐虽好，用户隐私是否也应该划入考虑范围？
畸形的注意力变现策略
我们在上面提到了大数据、智能推荐广告技术的负面影响，即侵犯用户隐私，随着用户对这一技术的感知越发明显，抱怨声会接踵而来，企业不得不考虑倾听用户的声音，将保护用户隐私纳入考虑范围，当然这应当是个可选项，那些有意识想要摆脱这种隐私暴露问题的用户，可以选择关闭这项技术在它个人生活中的应用，而并不介意隐私问题的用户可以继续享受智能推荐带来的便利。
我们虽然一再强调它导致的隐私问题，但事实上智能推荐利用现代技术实现了精准投放广告这一的广告变现形式，相比其余的商业模式要委婉的多。
广告的本意即广而告之，其目的在于将产品推荐给有需要的用户，广告本身是没有任何贬义的词汇，但在信息爆炸的当下，广告对于用户甚至对于广告投放者本身都变成了一个带有贬义的词，产生这种意识变化的原因就是当下广告的性质产生了畸变，广告已经不是一个双赢的推荐行为，而是一个过于干扰用户的打扰行为。
更多情况下，广告投放者倾向于用巨量的投放数量来换取一定比率的转化，这是一种传统低效的广告变现手段，当然平台获得实实在在的收益，建立在展示付费模式下的广告不用考虑最终转化率，只需要无脑投放，这导致了广告信息的总量产生了巨幅的提升。除此之外，更多广告是建立在吸引注意力这一诱导行为上，更鲜艳的颜色，夸张的动效，让人血脉喷张的文案，H内容擦边球，不论用户当前在执行什么任务，只要他不是瞎子都会或多或少被转移注意力乃至引导到广告详情页面。
除此之外，我们还会利用设计思维，预测用户行为，根据用户习惯主动将干扰性内容放置在用户的核心路径，从而产生一些误操作的假象，比如将关闭按钮做的微小，比如将banner无限接近按钮从而引发误操作。结果就是用户的任务中断，不得不重复的返回修正操作，这样持续性的犯错使用户困扰且失落，却不知道这是设计人员的策略。吸引用户注意力的变现策略大多建立在牺牲用户体验的基础上，我们都能意识到这不是一种可持续发展的收益模式，它容易侵害用户价值，培养低质量用户，且会衍生一系列其他问题。
目前这种盗窃用户注意力的变现性质主要有以下几个方式。
1.引人注目的动画吸引注意力
2.拥挤不堪的界面设计，一次性显示大量信息，期望一定比率的内容可以吸引一定数3量的用户
3.强迫用户聚焦的广告行为，如不可关闭的视频
4.网站或应用频繁发送服务通知和广告通知期望用户重新参与进产品
三：注意力争夺的负面结果
低效的广告效率
还是那个简单的逻辑，用户的注意力有限，同时各种产品和服务的广告通知铺天盖地而来，且数量不断增加，不仅引用户反感，更造成广告传达效率低下的现状，无论是PC还是移动端，人口红利已经消耗殆尽，用户自身更是形成抗拒广告的习惯，这种情况下，继续延续传统的粗放型广告投放收益只会持续下降，不同的广告商盲目的放量，最终造成的结果是用户全部忽略。
用户事实上都比较懒，能不去做任何行动，就会一直保持原状。例如邮箱订阅了几十家内容，每天都会收到数十封推广邮件，用户或许并不会因为厌烦而点开每封邮件逐一退订，但他会直接忽略所有内容，不论如何，造成的结果就是广告低效乃至无效。与之相反，我们看一个正面例子，Youtube的广告模式。Youtube提供一个五秒的试看期限，超过五秒后用户可以选择继续看广告或者直接跳过去浏览心仪的内容。若是用户对广告感兴趣，那他可以接受广告并转化为对应的消费者，广告投放者和消费者是一个双赢的状态，这样不仅考虑了企业利益，更考虑了用户价值，尊重用户的选择，使内容可控。
再来看国内的视频平台，体贴的为大家提供了一个关闭声音的按钮，我不否认这也是一个提升体验的地方，因为大部分用户都对长达一分钟的广告并不感冒，因此经常性的操作是关闭声音，然后在这一分钟去做一些其他的事情。这种情况下，广告的作用并没有发挥，而广告投放者仍然要为之付出对应的费用，因为广告确实被展示了，只是用户没有看。从用户的视角，则是我对这则广告（对应的商品）并不感兴趣，但我不得不为之浪费一分钟。
当然这就是国内产品的现状，当其他人都在使用粗放的竞争手段，你就很难与其划分界限。且企业往往会考虑到品牌曝光等策略，考虑长远投入而不是眼下的转化，那就是另一种情况了。
广告盲现象
广告盲现象是由广告现状培养出来的用户习惯，指的是人们会自动忽略一些常用的广告投放位置的内容，自动忽略看起来像是广告的内容。这种现象很广泛和常见，比如百度搜索顶部的前几条，带有广告标签的搜索结果，用户一般并不会去点击，而是选择下拉浏览其他选项，另外在PC两侧的信息往往容易被忽略，因为这里也是广告经常投放的位置。
若手机同时出现三行以上的推送，用户往往不会仔细阅读而是直接清空。甚至连最吸引注意力的弹窗广告也能第一时间被识别并关掉，在弹窗还未加载完毕前。
广告通常为了争抢用户注意力而被刻意做的不一样，但用户忍耐力比想象中更好，这个情况可以参考适应性偏见原则，且用户主动屏蔽信息也越来越成为习惯性行为，尤其是那些看起来花哨、内容丰富理应很吸引人的banner，正因如此吸引人，用户能快速分辨并将其定义为广告然后自动忽略，例如我们在线阅读小说是中间插入的banner，往往只会短暂打断我们的阅读进程。
与medium的阅读体验不同，medium的文内链接更多的是吸引力，用户能意识到这些链接是更具吸引力的内容，且是正向的有益的（往往属于知识性质的优质内容），而我们在线阅读小说中插入的广告则会使用户形成误解——推销类广告，没有任何意义。因此用户会立即忽略。我们都了解一个词即耐受性，事实上用户往往比他自己了解的更加能够忍受一些东西。虽然从商业角度考虑，各种产品服务都在争抢用户注意力，从而不断的打断用户的工作、思考、学习，但人们已经逐渐掌握了一定窍门，来主动屏蔽一些无益的广告内容，乃至形成广告盲的行为习惯。
针对这种情况了，设计人员和广告投放者应该怎么办呢？你可以选择加大投放数量，这种做法必然会很快见效，但不是长远之计，更佳的方案是考虑用户场景、习惯，通过洞察用户来提高广告投放的效率质量，智能推荐是一种做法，针对自家产品制定个性化方案也是一种方法，创意推动广告自传播也是一种手法，总之，传统买量放量的投放方式应该重新被考虑，如何双赢来回归用户价值是每个企业应该认真考虑的问题。
我把企业围绕注意力经济不断争抢用户注意力的现象定义为一场战争，企业与企业，企业与用户都被编织在这张罗网中。在这场战争中用户是一个什么状态，我的回答是被掌控、被投入以及被摧毁。
四：被控制的用户
产品掌控用户而不是用户掌控产品
这个时代，人仿佛是手机的奴隶。新技术的发展往往会给一批人带来恐惧，因为它即意味着更高的效率，更方便的生活，也意味着过去的消逝甚至迷失。从工业化在到信息化，变化一直在发生，我们迎接新生事物的同时也迎接来一批同样数量的问题。
我们实际上并没有被手机掌控，而是被手机里的一系列产品所掌控。当然，你不会被微信阅读这样的产品掌控，大部分人都不会阅读成瘾。但与之对应的，社交成瘾、游戏成瘾、八卦成瘾等现象却屡见不鲜。我们生活在大文娱时代，来自各方面的欲望、诱惑在不断地吸引注意力，不断的打断正常的任务目标。我们内心深处想要学习练习，想要更好的成绩，想要更好的工作，但这些从社会价值和个人价值角度更加正向的目标却往往被各种娱乐向产品打断，且往往过度沉溺，因为很少有产品会提醒你已经花了多少时间，他们只想占领你所有的注意力，然后把注意力货币转化为自己的收益。
“惯性”导致的持续投入
关于用户持续投入进一个产品，而忽略时间、精力的现象，在当下已经是常态。我们都知道沉没成本和鸡蛋理论。但我认为这两个概念还不够，因此我引入了一个惯性的概念，同滚雪球效应异曲同工。持续投入产生惯性，最终导致难以逃离，与之对应的用户行为就是频繁的卸载又安装游戏，以及成瘾性的过度使用某个产品，好吧说到这大家都能猜到是什么游戏什么产品。事实上我没有针对性，而是讲的一个更普遍的现象。
惯性投入导致的沉迷产品我们如何定义的，为何强调沉迷现象？因为沉迷造成的结果是用户时间和精力的消耗，从社会价值考虑过度娱乐而消耗时间是不被认可的行为。设计师经常考虑体验层，考虑商业价值，但的确很少考虑到用户价值，及与之对应的社会价值的实现。这里面一个重要因素就是时间，我之前分享的《用户体验设计基础》中提到的一套交互设计理论中，就把时间纳入考虑范围，事实上这是贯穿用户使用流程中的一个关键因素，但我们的确很少考虑到，不仅仅是完成任务的时间，更有使用产品的总时长，及会衍生的一系列问题。
我们也曾体验过一些尊重用户时间的产品，如阅读超过2个小时会提醒用户进行休息，同时在沉浸式体验的界面设计中仍然保留时间的展示。
所以现在，体验已经不仅限于交互、任务完成率、可用性易用性这些基础内容，体验还涉及到用户价值，尊重用户，你更可能会获得用户的尊重。
越来越多的自控力挑战
自控力挑战来自两方面，一方面是用户自身，即用户自我控制能力，另一方面则来源于挑战，即海量的信息对注意力的争抢乃至盗窃。当然这些挑战不局限于好坏某个方面。因为我们既可能被游戏等娱乐项目吸引，也有可能被学习内容吸引，更有可能被同时完成多个任务的期望所吸引。
个人的自我控制能力是天生的，但可以通过后期锻炼来进一步提升。问题在于生活中的诱惑，吸引力的来源变多了，用户沉迷于各种产品真的应当归咎于用户自身吗？这个问题就像是美国核事故操作失误应该完全归咎于操作人员一样可笑，毕竟控制开关的设计本身存在更多问题。外在信息的干扰的确在成倍的增加，网络小说、游戏、短视频不断增加的自控力挑战都是罪魁祸首。你期望七八岁的小孩子能有多强大的自控力呢？同理，青年群体就应该有很强大的自控力吗？（成年人很多都没有如此强大的自控力可以面对社会上的各种吸引力）。
我们还经常陷入低效学习怪圈，以一个过于分心的状态去学习知识。比如同时收藏了UX体验书籍课程、插画设计课程、动效设计、C4D等等在学习UX时忍不住想到插画，学习插画时又想到C4D，无法掌握自控力的结果就是分心产生同时完成多个任务的欲望，最终结果就是注意分散导致的低效率学习，投入与产出完全不成正比。
五：设计师如何参与到这场战争
事实上我们已经参与到了这场战争中，当作为设计支持人员为商业目标而进行设计时，我们已经在争抢用户注意力。虽然存在用户注意力被过度经济化的问题，但这是行业现状，也不是个人能够解决的，它已经上升到wicked problem的层面。那么作为企业一份子的我们必然需要了解如何争抢用户注意力，这和企业盈利挂钩。这也是目前大部分设计师都正在做的事情。另一方面我们应该利用设计思维探索其他可能，即“戒瘾”的可能性。兼顾商业价值和体验，最终在保证收益的情况下避免过度争抢用户注意力。
打造上瘾产品
提到打造成瘾的产品，最为人熟知的就是上瘾模型，触发——行动——多变的酬劳——投入。不同于工具类产品，成瘾产品大部分发生在killtime的产品类型中。如游戏、短视频、直播、新社交产品等。上瘾模式最早来源于游戏设计，后来逐渐被应用于其他产品设计中。简单来说，设计师需要了解几个核心元素，动机、行为、触点，洞察用户需求与动机，创造对应的触发器，然后使用户按照预期的方案进行交互，最终将商业目标转化为用户行为。常见的用法如游戏中的排行榜，利用攀比心理引导用户付费。再如积分商城，利用持续的投入减少用户流失的比例，从而创造更多变现机会。
打造上瘾产品关键点在于对用户心理的把握，这需要一定的敏感度，以及对应的心理学知识如沉没成本、金发姑娘效应等。同时也需要对应的方法来帮助梳理可能的痛点机会点。较常用的是用户体验地图，我们通常用它来发掘体验向的问题，但事实上作为梳理用户体验流程和对应情绪节点的方法可以适用很多场景，比如上瘾点的挖掘。
关于用户体验地图（也叫用户旅程图）可以查阅梓暄的这篇文章https://mp.weixin.qq.com/s/SgQUbAhtjadrUqQS9SMI-A。
我接下来提供另一个方法用来梳理用户与各种设计元素的关系。这是一种帮助我们系统思考的方法，具体分为五个步骤。
1.将信息分解为节点（信息块 如对象、概念）和链接（节点之间的链接和关系）
2.可视化信息（草绘或将它们摆在现实中，黑板上桌子上等等）
帮助了理解信息及关系。
3.与他人协作，包括利益相关者。分享你的思维模式可以帮助其他人在你的想法上继续思考，反之亦然。创建物理图和分组注释以生成不同的系统模型，允许团队综合多个观点。
4.快速发布解决方案以持续收集反馈，反馈有助于解决我们没有找到正确答案的问题，收集的反馈越多，下一步中有效指导信息就越多。
5.迭代，每次迭代都能利用反馈来解决一些新的问题，从而最终解决整个棘手的问题。
能打造出一款真正让用户上瘾的产品固然很重要，但像我强调过好多遍的那样，我们应当考虑用户价值，考虑衍生问题。如果一定要争抢用户注意力，也请遵循一个总的设计原则，即下面要提到的总的设计价值，由Cyd Harrell提出，且Cyd Harrell一直致力于此。
总的设计价值
我们所服务的互联网企业不断争抢用户注意力，都期望用户停留更多时间为企业创造更多价值，但却忽略了尊重用户的时间、尊严、和能力。——Cyd Harrell
这是我很赞同的一个总的设计原则，即尊重用户的时间尊严和能力。如果问你，有没有一个全世界通用的大家都认可的设计价值？ 我想那就是尊重用户。
很多时候，我们设计师都无意识的参与到了争抢用户注意力的战争中，从近些年的设计主题由视觉到体验再到商业，我们可以看出其实设计师仍然处于纯粹的为企业服务的状态，互联网设计围绕着企业机器运转，忽略用户价值，忽略用户注意力承载度，最终导致了广告盲及各种成瘾现象。从社会价值角度讲，用户应该把更多时间投入到工作学习与生活中，而不是在无意义的各种推广和猎奇信息中沉溺迷失。
借用Cyd Harrell的话，如果不能够让一些企业采取这样的价值观，并将它们运用在产品中，仅在我们设计领域传播这种价值观是没有任何意义的。但相信有很多体验设计领域的设计师都在努力帮助企业做出正确的选择，去尊重用户价值。很高兴的是从王者荣耀的防沉迷策略，到抖音的青年保护计划，我们能看到一些企业对于这些产品衍生问题进行方案探索。
无论是沉迷问题，还是低效率问题都是以用户注意力为核心的一个wicked problem，它没有清晰的解决方案，且会持续很久，我们无法知道哪种解决方案是最终方案，只有更好的方案和差一些的方案，这也是wicked problem的 一大特性。读到这文章也要结束了，我无法提供一个注意力问题的解决方案，因为它涵盖的领域，相关的利益者实在太庞杂，不是简单的处理某个节点的问题就能够解决的。写这篇文章的目的更多的是让大家了解到我们目前介入及面临的一个现实存在的问题——注意力问题。同时希望大家能开始意识到尊重用户这一设计原则的重要性，尊重用户，尊重用户的时间和尊严，这句话对我感触很大，希望也能触发你对于设计的另一种认识.
最后，我们可能不知道答案是什么，但我们知道我们必须不停的探索。
转自-UI
谈一谈vue3.0和2.0的不同及其改变，还有vue3.0脚手架的搭建
步骤：
先卸载vue2.0的脚手架：npm uninstall vue-cli -g，全局卸载
安装vue3.0的脚手架： npm install -g @vue/cli，全局安装
入口：https://blog.csdn.net/jb_7113/article/details/89928402 基础一
https://blog.csdn.net/jb_7113/article/details/89948215 基础二
————————————————
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
动效在用户界面中的应用是当今引起人们高度关注和争论的话题。虽然有很多人觉得动效是一个不必要的功能，他会使用户界面过载并使其变得更加复杂，但大多数用户都认为动效是交互体验不可或缺的一部分。设计人员和开发人员研究了越来越复杂的方法，使动画看起来令人愉快，并且能够解决现代应用程序和网站的问题。
为什么用户如此热爱动效？大多数情况下，因为动效支持实际和真实交互的本质，它创造了与人们在现实生活中物理对象交互时所具有的感受和感知水平。这种感觉可以提高用户的积极性，因为用户感觉越自然，处理应用程序或网站所需的精力就越少，工作方式也就越清晰。让用户满意，没有任何秘密，满足和愉悦是鼓励人们再次使用该产品的最重要的事情。
就像界面中的所有内容以及与之交互的过程一样，动效必须是一个功能元素，而不仅仅是装饰。在规划围绕数字产品的用户旅程时考虑运动元素，设计师应该在决定将其应用于布局或过渡之前，深入分析其提高产品的可用性，实用性和可取性的潜力。用户界面中的动效需要经过深思熟虑的思考，并且始终需要有一个明确的目标。在交互过程中使用它的优点和实用性必须是显而易见的并且要大于可能存在的缺点。动效应该成为锦上添花，而不是美中不足。
定义问题
使用动效不仅具有吸引力，也是揭示可能存在问题的最佳方法之一。它可以在设计过程的任何一个阶段进行：
用户调查会让你知道目标用户是谁，他们的年龄，偏好，技术水平，使用产品的环境和条件，以及来自用户方面的许多其他因素会影响用户体验;
营销研究将洞察现有产品的强弱面，形成用户忠诚度的方法，这是界定USP解决特定用户问题的良好依据，也是产品呈现和表现原始方式的良好基础;
UX线框图阶段可以考虑交互，布局和转场的逻辑，并得到可以通过动效增强目的的第一个假设;
原型设计阶段将揭示与屏幕实时交互的新方式；
UI设计阶段将为产品方案和系统提供复杂的视觉展示，为应用程序或网站应用动效提供新的视角；
用户测试将揭示动效元素的方案是否正确，它们的好处是否真的大于可能存在的缺点。
在每个阶段，如果设计师设定的目标是揭示用户可能遇到的大或小问题，那么动效以及任何其他设计元素都可以扮演问题解决者的角色。
让我们回顾一下可以通过界面动效解决的一些典型问题。
问题：我想知道行动已经完成
这是可以通过在UI中应用动效细节轻松快速解决的问题之一。通过清晰的运动并结合微交互，为用户创建快速反馈，使得导航变得简单直观，同时也变得更加。动效按钮、切换键、切换开关和其他交互元素在几秒钟内通知用户，激活快速视觉感知的所有潜力。
开关控制动画
汉堡菜单动画
汉堡按钮互动
标签栏交互
添加按钮交互
橡胶指示器
问题：我想知道行动正在进行中
当用户与数字产品交互时，他们想知道每一步都发生了什么。让用户等待将会导致用户流失。但是，当用户得到反馈时，等待就不会那么烦人了。所以，这方面应该在设计中着重考虑，通过界面动效来减少等待感有很多种方法。这是“拉动-刷新”发挥作用最大效果的最佳时机。
拉动刷新
预载
拉动刷新
拉下 - 沙漏
拉下 - 太空船
问题：我看不到进展，也不明白需要多长时间
通常仅仅让用户知道该过程正在进行是不够的。他们想要的还有很多：看看进展的速度和所需要的时间。此时，界面动效就是一个很好的帮手。加载条和进度条，动效时间轴和其他动态元素等等，都可以一石二鸟：
1、它们能够让用户明确当前进度状态
2、它们可以成为消除互动过程中等待的负面情绪的一种娱乐元素
3、它们可以成为一个病毒性的功能，用户希望与其他人分享，并吸引更多的用户来使用产品
时间线应用程序的GIF
动态滚动的GIF
问题：我不想让我的屏幕弄得一团糟
在界面设计中考虑这一点至关重要。如果屏幕或页面的信息看起来乱七八糟，这些信息没有经过明确的梳理编组，那么用户需要付出额外的努力来了解它的工作原理以及可以找到所需信息的位置。
在绝大多数情况下，用户希望拥有能够简化和改善他们生活的应用程序和网站，甚至可能会为他们做一些工作，而不是在交互上花费更多的精力和时间。动效在增强与各种数据模块和部分交互方面是一种很好的方法，即使是在高度数据饱和和复杂的界面中，也能够使所有内容清晰明了。
问题：我想先看看关键的事情
视觉层次和清晰的导航一直是设计人员创造交互式数字产品的一大关注点。用户应根据其目标和条件，立即关注交互的关键要素。界面中的动效元素为这方面提供了强大的支持力，使布局中重要元素的视觉标记更快、更清晰。
问题：我想要感受自然的互动
这是大多数用户无法形容的问题，但对用户体验有着很大的影响。如果用户说“我不确定出了什么问题，但肯定有问题”，试着考虑让动效更加自然。界面中的动效可以创造出令人愉快的错觉，接近与物理对象的自然交互，这通常不需要太多的认知过程。例如，如果拉动物体，按下它，移出标签，动作应该感觉自然。用户无法看到设计师完成这项复杂工作的难度，他们会认为这是理所当然的，而让他们感到舒适的事实，将是对设计解决方案的最大赞誉。
这种问题同样存在与WEB界面中。在滚动网页时，布局元素的平滑移动可以显著增强用户体验，并且创建一个整体流畅交互的感觉，而不是几个单独的页面。总之，这是令人愉快并且有吸引力的，这些情绪是留住用户的一个很好的因素。
问题：屏幕/页面很无聊
在谈论界面时，人们常常把功能性和可用性作为关键或者有时甚至是唯一需要考虑的因素前置到前面。这是正确的，也是合乎逻辑的，但是不能否定这样一个事实，那就是人们不仅仅受逻辑驱动。情感和审美满意度等因素对用户体验的影响也很大。一方面，实用性和可用性与情感和美学之间的巧妙平衡可以给用户带来友好的产品。动效在界面设计上是一个很好的助推器。它可以勾勒出色彩和渐变的美，将生活气息融入到布局中，使运动充满活力，反之亦然，通过运动和原始过渡增强用户界面元素的力量。
因此，毫无疑问，用户界面中的动效在解决各种交互问题方面具有巨大的潜力。尽管如此，即使是添加到UI中的最细微的动作也需要经过深思熟虑的考虑，不仅要分析优点，还分析可能存在的缺点。动效应该帮助用户，这是它在界面中的主要目标。
转自-ui
还在频繁地使用弹窗对用户展示重要提示吗？明知这样有损体验却没有更好的选择吗？那么不妨来试试干扰度更低，却依然可以用于重要提示的 Sheet 控件吧。
Sheets 控件并非弹窗，通常会被熟称为「浮层」或「浮窗」。
该控件在 iOS 和 Android 系统规范中都有相关定义，属于多才多艺的控件，可以用于给予信息提示，也可用于展示更多的拓展信息。
从用于提示的角度来看，Sheets 控件和 Dialogs 控件的相同点和不同点在哪里呢？
模态化
二者都可以设置模态，当模态控件显示时，页面背景会显示深色遮罩，并立即打断用户当前操作。
承载操作和信息
二者都可以承载丰富的操作和信息，支持嵌入列表、选择器等控件及图片、文本信息。
触发方式不同
Dialog 可以不通过用户操作而自动触发，Sheet 必须通过用户操作才可以触发显示，因此用户对 Sheet 的显示会更有预期。
关闭方式不同
Dialog 的关闭方式较少，通常会要求用户进行选项操作后才可关闭；Sheet 的关闭方式较多，对于用户而言有更丰富的选择权。
因此综上所述，我们可以发现，Sheet 对比 Dialog 的优势在于，它的显示会更符合用户的预期，它的干扰层度也会低于Dialog（因为更易关闭）。
下面就由我来依次详解其特性和玩法吧。
专属于 Android 的 Sheets 控件。
用于补充内容相关的更多信息（非模态）、提供可交互的菜单或对话（模态）或其它关键功能/任务的拓展。
菜单样式
可嵌套 Menus，展示多个选项内容。
宫格样式
可使用宫格布局，展示多个选项内容。
迷你样式（非模态）
一个非模态底部浮窗可被设置固定展示在页面底部，用户可以随时用它来对其它功能/任务进行快捷操作，如进入购物车、查看所选图片、查看聊天和查看刚才的视频等。
非模态浮窗：如左下图所示，非模态浮窗与内容保持在同一层级，用户可同时对内容和浮窗进行操作。
模态浮窗：如右下图所示，模态浮窗层级高于内容，背景深色显示遮罩，用户仅能对浮窗进行操作。
显示
浮窗显示时从底部向上滑入，非模态浮窗显示时不会打断用户操作，模态浮窗显示时会显示深色遮罩以打断用户操作。
消失
浮窗消失时会向底部滑出。
模态浮窗在以下情况下会消失：
非模态浮窗在以下情况下会消失：用户选中浮窗上的对应按钮（自定义）。
当浮窗底部仍有未显示的内容时，可设置通过滑动或拖动浮窗来使其变为全屏展示，并在顶部显示 Toolbar 来展示关闭/收起操作。
模态浮窗中可以展示其它应用的深层链接内容或操作，譬如调用 Google 翻译。
抖音的评论功能使用的是模态 Bottom sheet；百度地图的路线切换功能使用的是非模态 Bottom sheet。
专属于 Android 的 Sheets 控件。
用于补充内容相关的更多信息（非模态）或提供可交互的列表信息（模态）。
菜单样式：可嵌套 Menus，展示多个选项内容。
宫格样式：可使用宫格布局，展示多个选项内容。
如左下图所示，非模态浮窗与内容保持在同一层级，用户可同时对内容和浮窗进行操作（在移动端较少使用，通常用于 PC 端）。
如右下图所示，模态浮窗层级高于内容，背景深色显示遮罩，用户仅能对浮窗进行操作。
显示
浮窗显示时从左/右边缘滑入，非模态浮窗显示时不会打断用户操作，模态浮窗显示时会显示深色遮罩以打断用户操作。
消失
浮窗消失时会向左/右边缘滑出。
模态浮窗在以下情况下会消失：
非模态浮窗在以下情况下会消失：用户选中浮窗上的对应按钮（自定义）。
支持上下滑动，不支持左右滑动。
淘宝的筛选功能使用的是 Side sheet。
专属于 iOS 的 Sheets 控件。
用于呈现一组与当前操作相关的选项，如启动某个任务，或者确认是否开始执行某个可能具有破坏性的操作。
在 Android 中不建议使用 Action sheet，建议使用原生的 Bottom sheet 或 Simple dialog。
如下所示，支持单个或多个操作的展示，以及说明文案的展示：
显示
浮窗显示时从底部向上滑入，会显示深色遮罩以打断用户操作。
消失
浮窗消失时会向底部滑出。会在以下情况消失：
竖屏时显示在页面底部，横屏是居中显示在页面底部。
微信的选择朋友圈发布类型及清除聊天记录的二次确认，都是使用的 Action sheet。
专属于 iOS 的 Sheets 控件。
用于呈现一组与当前操作相关的选项表，如复制、收藏或分享。
在 Android 中不建议使用 Activity views，建议使用原生的 Bottom sheet。
列表样式
宫格样式
混合样式
显示
浮窗显示时从底部向上滑入，会显示深色遮罩以打断用户操作。
消失
浮窗消失时会向底部滑出。会在以下情况消失：
竖屏时显示在页面底部，横屏是居中显示在页面底部。
当面板底部仍有未显示的内容时，可设置通过滑动或拖动面板来使其高度进行延伸，从而展示更多信息。
爱奇艺的分享功能和泡泡圈选择发布内容类型，都使用的是 Activity view。
建议针对非系统级或业务级的重要提示，使用 Sheets 控件进行提示；Dialogs 控件仅用于最重要的信息提示才算是「好钢用在了刀刃上」。
另外在调用原生 Sheets 组件时，记得分端的差异性。
文章来源：优设网
概述
Vue 2.x 及以前的高阶组件的组织形式或多或少都会面临一些问题，特别是在需要处理重复逻辑的项目中，一旦开发者组织项目结构组织得不好，组件代码极有可能被人诟病为“胶水代码”。而在 Vue 2.x 及之前的版本，解决此类问题的办法大致是下面的方案：
mixin
函数式组件
slots
笔者维护的项目也需要处理大量复用逻辑，在这之前，笔者一直尝试使用mixin的方式来实现组件的复用。有些问题也一直会对开发者和维护者造成困惑，如一个组件同时mixin多个组件，很难分清对应的属性或方法写在哪个mixin里。其次，mixin的命名空间冲突也可能造成问题。难以保证不同的mixin不用到同一个属性名。为此，官方团队提出函数式写法的意见征求稿，也就是RFC：Function-based component API。使用函数式的写法，可以做到更灵活地复用组件，开发者在组织高阶组件时，不必在组件组织上考虑复用，可以更好地把精力集中在功能本身的开发上。
注：本文只是笔者使用vue-function-api提前体验 Vue Function API ，而这个 API 只是 Vue 3.0 的 RFC，而并非与最终 Vue 3.x API 一致。发布后可能有不一致的地方。
在 Vue 2.x 中使用
要想提前在Vue 2.x中体验 Vue Function API ，需要引入vue-function-api，基本引入方式如下：
import Vue from 'vue';
import { plugin as VueFunctionApiPlugin } from 'vue-function-api';
Vue.use(VueFunctionApiPlugin);
基本组件示例
先来看一个基本的例子：
<template>
<div>
<span>count is {{ count }}</span>
<span>plusOne is {{ plusOne }}</span>
<button @click="increment">count++</button>
</div>
</template>
<script>
import Vue from 'vue';
import { value, computed, watch, onMounted } from 'vue-function-api';
export default {
setup(props, context) {
// reactive state
const count = value(0);
// computed state
const plusOne = computed(() => count.value + 1);
// method
const increment = () => {
count.value++;
};
// watch
watch(
() => count.value 2,
val => {
console.log(`count 2 is ${val});<br /> }<br /> );<br /> // lifecycle<br /> onMounted(() => {<br /> console.log(mounted);<br /> });<br /> // expose bindings on render context<br /> return {<br /> count,<br /> plusOne,<br /> increment,<br /> };<br /> },<br /> };<br /> </script><br /> 详解<br /> setup<br /> setup函数是Vue Function API 构建的函数式写法的主逻辑，当组件被创建时，就会被调用，函数接受两个参数，分别是父级组件传入的props和当前组件的上下文context。看下面这个例子，可以知道在context中可以获取到下列属性值<br /> <br /> const MyComponent = {<br /> props: {<br /> name: String<br /> },<br /> setup(props, context) {<br /> console.log(props.name);<br /> // context.attrs<br /> // context.slots<br /> // context.refs<br /> // context.emit<br /> // context.parent<br /> // context.root<br /> }<br /> }<br /> value & state<br /> value函数创建一个包装对象，它包含一个响应式属性value：<br /> <br /> <br /> <br /> 那么为何要使用value呢，因为在JavaScript中，基本类型并没有引用，为了保证属性是响应式的，只能借助包装对象来实现，这样做的好处是组件状态会以引用的方式保存下来，从而可以被在setup中调用的不同的模块的函数以参数的形式传递，既能复用逻辑，又能方便地实现响应式。<br /> <br /> 直接获取包装对象的值必须使用.value，但是，如果包装对象作为另一个响应式对象的属性，Vue内部会通过proxy来自动展开包装对象。同时，在模板渲染的上下文中，也会被自动展开。<br /> <br /> import { state, value } from 'vue-function-api';<br /> const MyComponent = {<br /> setup() {<br /> const count = value(0);<br /> const obj = state({<br /> count,<br /> });<br /> console.log(obj.count) // 作为另一个响应式对象的属性，会被自动展开<br /> <br /> obj.count++ // 作为另一个响应式对象的属性，会被自动展开<br /> count.value++ // 直接获取响应式对象，必须使用.value<br /> <br /> return {<br /> count,<br /> };<br /> },<br /> template:<button @click="count++">{{ count }}</button>,<br /> };<br /> 如果某一个状态不需要在不同函数中被响应式修改，可以通过state创建响应式对象，这个state创建的响应式对象并不是包装对象，不需要使用.value来取值。<br /> <br /> watch & computed<br /> watch和computed的基本概念与 Vue 2.x 的watch和computed一致，watch可以用于追踪状态变化来执行一些后续操作，computed用于计算属性，用于依赖属性发生变化进行重新计算。<br /> <br /> computed返回一个只读的包装对象，和普通包装对象一样可以被setup函数返回，这样就可以在模板上下文中使用computed属性。可以接受两个参数，第一个参数返回当前的计算属性值，当传递第二个参数时，computed是可写的。<br /> <br /> import { value, computed } from 'vue-function-api';<br /> <br /> const count = value(0);<br /> const countPlusOne = computed(() => count.value + 1);<br /> <br /> console.log(countPlusOne.value); // 1<br /> <br /> count.value++;<br /> console.log(countPlusOne.value); // 2<br /> <br /> // 可写的计算属性值<br /> const writableComputed = computed(<br /> // read<br /> () => count.value + 1,<br /> // write<br /> val => {<br /> count.value = val - 1;<br /> },<br /> );<br /> watch第一个参数和computed类似，返回被监听的包装对象属性值，不过另外需要传递两个参数：第二个参数是回调函数，当数据源发生变化时触发回调函数，第三个参数是options。其默认行为与 Vue 2.x 有所不同：<br /> <br /> lazy：是否会在组件创建时就调用一次回调函数，与 Vue 2.x 相反，lazy默认是false，默认会在组件创建时调用一次。<br /> deep：与 Vue 2.x 的 deep 一致<br /> flush：有三个可选值，分别为 'post'（在渲染后，即nextTick后才调用回调函数），'pre'（在渲染前，即nextTick前调用回调函数），'sync'（同步触发）。默认值为'post'。<br /> // double 是一个计算包装对象<br /> const double = computed(() => count.value * 2);<br /> <br /> watch(double, value => {<br /> console.log('double the count is: ', value);<br /> }); // -> double the count is: 0<br /> <br /> count.value++; // -> double the count is: 2<br /> 当watch多个被包装对象属性时，参数均可以通过数组的方式进行传递，同时，与 Vue 2.x 的vm.$watch一样，watch返回取消监听的函数：<br /> <br /> const stop = watch(<br /> [valueA, () => valueB.value],<br /> ([a, b], [prevA, prevB]) => {<br /> console.log(a is: ${a});<br /> console.log(b is: ${b});<br /> }<br /> );<br /> <br /> stop();<br /> 注意：在RFC：Function-based component API初稿中，有提到effect-cleanup，是用于清理一些特殊情况的副作用的，目前已经在提案中被取消了。<br /> <br /> 生命周期<br /> 所有现有的生命周期都有对应的钩子函数，通过onXXX的形式创建，但有一点不同的是，destoryed钩子函数需要使用unmounted代替：<br /> <br /> import { onMounted, onUpdated, onUnmounted } from 'vue-function-api';<br /> <br /> const MyComponent = {<br /> setup() {<br /> onMounted(() => {<br /> console.log('mounted!');<br /> });<br /> onUpdated(() => {<br /> console.log('updated!');<br /> });<br /> // destroyed 调整为 unmounted<br /> onUnmounted(() => {<br /> console.log('unmounted!');<br /> });<br /> },<br /> };<br /> 一些思考<br /> 上面的详解部分，主要抽取的是 Vue Function API 的常见部分，并非RFC：Function-based component API的全部，例如其中的依赖注入，TypeScript类型推导等优势，在这里，由于篇幅有限，想要了解更多的朋友，可以点开RFC：Function-based component API查看。个人也在Function-based component API讨论区看到了更多地一些意见：<br /> <br /> 由于底层设计，在setup取不到组件实例this的问题，这个问题在笔者尝试体验时也遇到了，期待正式发布的 Vue 3.x 能够改进这个问题。<br /> <br /> 对于基本类型的值必须使用包装对象的问题：在 RFC 讨论区，为了同时保证TypeScript类型推导、复用性和保留Vue的数据监听，包装属性必须使用.value来取值是讨论最激烈的<br /> <br /> 关于包装对象value和state方法命名不清晰可能导致开发者误导等问题，已经在Amendment proposal to Function-based Component API这个提议中展开了讨论：<br /> <br /> setup() {<br /> const state = reactive({<br /> count: 0,<br /> });<br /> <br /> const double = computed(() => state.count * 2);<br /> <br /> function increment() {<br /> state.count++;<br /> }<br /> <br /> return {<br /> ...toBindings(state), // retains reactivity on mutations made tostate`
double,
increment,
};
}
引入reactive API 和 binding API，其中reactive API 类似于 state API ， binding API 类似于 value API。
之前使用的方法名state在 Vue 2.x 中可能被用作组件状态对象，导致变量命名空间的冲突问题，团队认为将state API 更名为 reactive 更为优雅。开发者能够写出const state = ... ，然后通过state.xxxx这种方式来获取组件状态，这样也相对而言自然一些。
value方法用于封装基本类型时，确实会出现不够优雅的.value的情况，开发者可能会在直接对包装对象取值时忘记使用.value，修正方案提出的 reactive API，其含义是创建响应式对象，初始化状态state就使用reactive创建，可保留每项属性的getter和setter，这么做既满足类型推导，也可以保留响应式引用，从而可在不同模块中共享状态值的引用。
但reactive可能导致下面的问题，需要引入binding API。 解决，如使用reactive创建的响应式对象，对其使用拓展运算符...时，则会丢失对象的getter和setter，提供toBindings方法能够保留状态的响应式。
当然，目前 Vue Function API 还处在讨论阶段，Vue 3.0 还处在开发阶段，还是期待下半年 Vue 3.0 的初版问世吧，希望能给我们带来更多的惊喜。
蓝蓝设计的小编 http://www.lanlanwork.com