在去餐廳用餐之前，我們還有些時(shí)間再了解一項(xiàng)基礎(chǔ)設(shè)計(jì)原理。讓我們回頭看看在「鄰近性」原理當(dāng)中提到的燈光明暗控制開關(guān)。你能僅通過最左側(cè)這個(gè)開關(guān)的樣式看出它所控制的燈光明暗度嗎？
如下圖這樣又如何？
我們之所以能從后者當(dāng)中進(jìn)行判斷，所依據(jù)的就是映射關(guān)系。所謂「映射」，即是指，將被控對(duì)象的行為規(guī)律體現(xiàn)到控件自身的操作方式中，譬如開關(guān)把手的上升和下降，對(duì)應(yīng)著燈光亮度的升高和降低。
映射同樣體現(xiàn)在多個(gè)控件的布局當(dāng)中，它們的次序應(yīng)該能夠反映出多個(gè)被控對(duì)象之間的相對(duì)位置關(guān)系。
我們假設(shè)這三個(gè)開關(guān)用于控制臥室天花板上的三盞燈。依據(jù)映射關(guān)系而設(shè)計(jì)的開關(guān)位置應(yīng)該能夠幫助人們快速判斷出它們各自控制著哪一盞燈。映射原理有助于設(shè)計(jì)師對(duì)控件的類型、位置和次序進(jìn)行決策。
當(dāng)映射關(guān)系不明確時(shí)，我們通常需要依靠文本標(biāo)簽才能理解開關(guān)與燈之間的對(duì)應(yīng)關(guān)系。這并非完美的解決方案，因?yàn)殚喿x和理解文字需要花費(fèi)時(shí)間和精力，同時(shí)人們也難以依靠記憶進(jìn)行快速操作。
在界面設(shè)計(jì)當(dāng)中，映射關(guān)系也體現(xiàn)在控件類型的選擇上。例如通過滑塊（slider）控制文本的橫向字間距就是很符合直覺的交互方式。而相比于滑塊或是步進(jìn)控件（stepper），旋鈕則更適于旋轉(zhuǎn)操作。
當(dāng)然，最直接的映射才是最好的映射。為人們提供直接操作目標(biāo)對(duì)象的能力是最為簡(jiǎn)單、精準(zhǔn)、符合直覺的解決方案。macOS 上的鼠標(biāo)指針操作，或 iOS 當(dāng)中的手勢(shì)操作，都可以為人們帶來直接操作的體驗(yàn)。
不知各位如何，我是很餓了，這就準(zhǔn)備下樓去吃飯。我們?cè)诖筇靡姡缓笠黄鹑ゲ蛷d。
坐在餐桌前，你會(huì)看到面前擺放著一個(gè)空盤子。我們能用這個(gè)盤子做什么？顯然，放些食物在里面。除此之外呢？
盤子很光滑，可以旋轉(zhuǎn)或是滑來滑去。
盤子有一圈寬邊，可以抓著拎起來。
我們對(duì)于如何與這個(gè)盤子進(jìn)行互動(dòng)的觀點(diǎn)便是可供性的體現(xiàn)。換句話說，盤子的外形特征為我們提供了如何與之進(jìn)行互動(dòng)的視覺及觸覺線索，使我們意識(shí)到哪些交互行為可行，哪些不可行。我們會(huì)意識(shí)到要將食物放進(jìn)去，或是將它滑到其他地方。但我們通常不會(huì)想要倒水進(jìn)去，然后端起來喝。
可供性并非物體自身所具備的屬性，它更多是在代表行為主體與目標(biāo)對(duì)象之間的互動(dòng)關(guān)系。可供性會(huì)因行為主體的差異而有所不同。舉個(gè)極端些的例子，對(duì)我而言，飛盤可以用來抓住或扔出去，而對(duì)我的狗來說，飛盤就是單單用來叼的。不過另一方面，碟子對(duì)我和我的狗來說都是用來盛放食物的。
由于可供性所具有的主觀特性，一個(gè)人能感知到的交互特性在另一個(gè)人看來則未必如此。當(dāng)可供性所傳達(dá)的交互特性與人們的常規(guī)行為有著高度關(guān)聯(lián)時(shí)，人們會(huì)更加容易感知到。
例如，我其實(shí)可以把碟子當(dāng)作茶托，這會(huì)是個(gè)不錯(cuò)的茶托。但我猜我們大家日常很少真的這樣去做，因此我會(huì)更樂于將碟子視為盛放食物的容器，而非將水杯放在里面。
我們能從我們所互動(dòng)過的任何環(huán)境及事物當(dāng)中感知到可達(dá)性。當(dāng)我們走進(jìn)餐廳時(shí)，門的大小及形狀可以傳達(dá)出供人穿過的特性，連續(xù)的地面使我們意識(shí)到可以在上面安穩(wěn)地行走。
椅子的造型暗示我們可以坐下，桌子的構(gòu)造令我們明白可以將物品擺放在上面。
人造物品當(dāng)中都包含有傳達(dá)可供性的視覺線索，使人們明白哪些行為可行。清晰的、顯而易見的視覺線索可以幫助人們迅速了解如何與之進(jìn)行互動(dòng)。
對(duì)于 app 界面設(shè)計(jì)而言也是同樣的道理?；瑝K控件由把手和滑軌構(gòu)成，暗示著拖拽的特性。
旋鈕的樣式意味著可以旋轉(zhuǎn)。
按鈕則一目了然地傳達(dá)著可點(diǎn)擊的特征。
在以上每一個(gè)例子當(dāng)中，可供性的傳達(dá)效率都是極高的。事實(shí)上，隨著時(shí)間的推移，我們會(huì)越發(fā)適應(yīng)于抽象度不斷提升的可供性傳達(dá)形式。我們所熟悉的界面當(dāng)中的按鈕，無非是現(xiàn)實(shí)世界里真實(shí)按鈕的高度抽象化版本；那四個(gè)圓角足以將虛擬與現(xiàn)實(shí)兩個(gè)版本的同一種物體關(guān)聯(lián)起來。
同理，滑塊把手周圍那細(xì)微的投影效果也足以讓我們意識(shí)到其獨(dú)立于滑軌之上的操作特性。
而且，僅有的這一點(diǎn)點(diǎn)視覺線索可能都不是必需的，對(duì)于很多人來說，一條直線上的一個(gè)實(shí)心圓足矣傳達(dá)滑動(dòng)操作的可供性了。
有時(shí)候，可供性也可以通過動(dòng)效進(jìn)行傳達(dá)。在天氣 app 中點(diǎn)擊主體內(nèi)容，界面整體便會(huì)稍稍上升，暗示著可以通過滾屏來查看更多內(nèi)容。
無論你使用何種方法，都必須確保 app 界面能夠清晰準(zhǔn)確地傳達(dá)其自身的交互特性，否則，人們將困惑于如何與之互動(dòng)。他們很可能會(huì)以錯(cuò)誤的方式進(jìn)行操作，然后發(fā)現(xiàn)無果，進(jìn)而將控件理解成不可交互的元素，app 的可用性也會(huì)因此而受損。
一、生命周期鉤子的差別
vue1.0的生命周期如下：
vue2.0的生命周期如下：
用一張表格來做對(duì)比：
二、代碼片段
在vue1.0中可以在template編寫時(shí)出現(xiàn)：
<template>
<div>第一行</div>
<div>第二行</div>
</template>
在vue2.0中在template編寫時(shí)，必須只有一個(gè)根元素，否則會(huì)報(bào)錯(cuò)。
<template>
<div id='root'>
<div>這是第一行</div>
<div>這是第二行</div>
</div>
</template>
三、for循環(huán)遍歷數(shù)組、對(duì)象時(shí)的參數(shù)順序的變更，遍歷數(shù)組之前是（index,value），現(xiàn)在是（value,index）；對(duì)象的之前是（key,value），現(xiàn)在是（value,key）.
移除了$index和$key兩個(gè)隱式聲明變量，以便在v-for中顯式聲明。
之前的track-by已經(jīng)替換為key來代替
v-for的循環(huán)范圍也發(fā)生了改變，之前v-for='item in 10'，范圍為0-9，現(xiàn)在是：1-10。
四、Props 的參數(shù)
1、如果需要檢查 prop 的值，創(chuàng)建一個(gè)內(nèi)部的 computed 值，而不再在 props 內(nèi)部去定義coerce。
之前是：
props: {
username: {
type: String,
coerce: function (value) {
return value
.toLowerCase()
.replace(/\s+/, '-')
}
}
}
現(xiàn)在改成用computed來代替：
props: {
username: String,
},
computed: {
normalizedUsername: function () {
return this.username
.toLowerCase()
.replace(/\s+/, '-')
}
}
這樣有一些好處：
可以對(duì)保持原始 prop 值的操作權(quán)限。
通過給予驗(yàn)證后的值一個(gè)不同的命名，強(qiáng)制開發(fā)者使用顯式申明。
2、twoWay參數(shù)的移除，v-bind 的 .once和.sync 修飾符 移除
Props 現(xiàn)在只能單向傳遞。為了對(duì)父組件產(chǎn)生反向影響，子組件需要顯式地傳遞一個(gè)事件而不是依賴于隱式地雙向綁定。
3、
五、計(jì)算屬性
cache: false 棄用，在 Vue 未來的大版本中，計(jì)算屬性的緩存驗(yàn)證將會(huì)被移除。把不緩存的計(jì)算屬性轉(zhuǎn)換為方法可以得到和之前相同的結(jié)果。
六、Built-In 指令
v-bind 真/假值 變更；在2.0中使用 v-bind 時(shí)，只有 null, undefined，和 false 被看作是假。這意味著，0 和空字符串將被作為真值渲染。比如 v-bind:draggable="''" 將被渲染為 draggable="true"；
用 v-on 監(jiān)聽原生事件 變更，現(xiàn)在在組件上使用 v-on 只會(huì)監(jiān)聽自定義事件 (組件用 $emit 觸發(fā)的事件)。如果要監(jiān)聽根元素的原生事件，可以使用 .native 修飾符；
帶有 debounce 的 v-model移除；
使用 lazy 或者 number 參數(shù)的 v-model ，替換；
使用內(nèi)聯(lián) value的v-model 移除；
v-model with v-for Iterated Primitive Values 移除；
帶有 !important 的v-bind:style 移除；
v-el 和v-ref 替換，簡(jiǎn)單起見，v-el 和 v-ref 合并為一個(gè) ref 屬性了，可以在組件實(shí)例中通過 $refs 來調(diào)用；
v-show后面使用v-else 移除。
七、自定義指令
自定義指令 簡(jiǎn)化；
八、過渡
transition 參數(shù) 替換，Vue 的過渡系統(tǒng)有了徹底的改變，現(xiàn)在通過使用 <transition> 和 <transition-group> 來包裹元素實(shí)現(xiàn)過渡效果，而不再使用 transition 屬性；
可復(fù)用的過渡 Vue.transition 替換，在新的過渡系統(tǒng)中，可以通過模板復(fù)用過渡效果；
過渡的 stagger 參數(shù) 移除。
九、事件
events 選項(xiàng) 移除，事件處理器現(xiàn)在在created鉤子中被注冊(cè)；
events 選項(xiàng) 移除Vue.directive('on').keyCodes 替換，新的簡(jiǎn)明配置 keyCodes 的方式是通過 Vue.config.keyCodes；
$dispatch 和 $broadcast 替換，可使用Vuex。
十、過濾器
插入文本之外的過濾器 移除；
過濾器參數(shù)符號(hào) 變更 現(xiàn)在過濾器參數(shù)形式可以更好地與 js 函數(shù)調(diào)用方式一致，因此不用再用空格分隔參數(shù)，現(xiàn)在用圓括號(hào)括起來并用逗號(hào)分隔。
內(nèi)置文本過濾器 移除，替換 json 過濾器；替換 capitalize 過濾器；替換 uppercase 過濾器；替換 lowercase 過濾器；替換 pluralize 過濾器。
雙向過濾器 替換。
十一、插槽
重名的插槽 移除；
通過具名 <slot> 插入的片段不再保持 slot 的參數(shù)。請(qǐng)用一個(gè)包裹元素來控制樣式
十二、特殊屬性
keep-alive 屬性替換，不再是一個(gè)特殊屬性，而是一個(gè)包裹組件。
十三、計(jì)算插值
屬性內(nèi)部的計(jì)算插值 移除；
HTML計(jì)算插值 移除，取代的是v-html指令；
單次綁定替換成v-once。
十四、響應(yīng)
vm.$watch 換成 update生命周期鉤子；
Array.prototype.$set棄用，用Vue.set代替
Array.prototype.$remove 移除 用 Array.prototype.splice 替代；
Vue.set 和 Vue.delete 移除；
替換vm.$data 移除；
vm.$get 移除，可以直接取回響應(yīng)數(shù)據(jù)。
十五、圍繞DOM的實(shí)例方法
vm.$appendTo 移除；
vm.$before 移除；
vm.$after 移除；
vm.$remove 移除。
十六、底層實(shí)例方法
vm.$eval 移除；
vm.$interpolate 移除；
vm.$log 移除
十七、實(shí)例DOM選項(xiàng)
replace: false 移除，現(xiàn)在組件總是會(huì)替換掉他們被綁定的元素。為了模仿，可以用一個(gè)將要替換元素類似的元素將根組件包裹起來。
十八、全局配置
Vue.config.debug移除，因?yàn)榫嫘畔⒛J(rèn)在堆棧信息里輸出；
Vue.config.async移除，異步操作現(xiàn)在需要渲染性能的支持；
Vue.config.delimiters移除，可以在使用自定義分隔符時(shí)避免影響第三方模板；
Vue.config.unsafeDelimiters移除，HTML的插值替換為v-html。
十九、全局API
帶el的Vue.extend移除；
Vue.elementDirective移除；
Vue.partial移除。
在佐藤看來，這些整理工作常常被他人視為是在浪費(fèi)時(shí)間，而實(shí)際上整理是一種培養(yǎng)思路的好習(xí)慣，長(zhǎng)此以往，不僅能讓自己的思路變得更加清晰，同時(shí)，思維也會(huì)跟著變得更加敏銳起來。
在與客戶的溝通過程中，我們可以清楚的了解到，具體需求是什么。隨后再將這個(gè)需求中的關(guān)鍵點(diǎn)進(jìn)行提煉與整理，最終完成這個(gè)設(shè)計(jì)。而不應(yīng)該全是憑借設(shè)計(jì)師自己的靈感和專業(yè)水準(zhǔn)去完成創(chuàng)作。
△ 多摩美術(shù)大學(xué)以「自由與意力」作為教育理念。現(xiàn)為日本規(guī)模最大的美術(shù)大學(xué)。
佐藤的父親是位建筑師，祖父是俄羅斯語學(xué)者、前東京外國(guó)語大學(xué)榮譽(yù)教授。在這樣的家庭環(huán)境的熏陶之下，讓佐藤從小就喜歡上了畫畫。并且在報(bào)考志愿的時(shí)候，也選擇了藝術(shù)類的大學(xué)。但這一切似乎并沒有那么容易，沒錯(cuò)，他落榜了。
但這并沒有讓他放棄這個(gè)想法，經(jīng)過了兩次落榜之后，終于在他20歲的時(shí)候，進(jìn)入了多摩美術(shù)大學(xué)就讀。
1989年，剛剛從多摩美術(shù)大學(xué)畢業(yè)的佐藤，憑借著優(yōu)異的成績(jī)，入職了一家日本知名的廣告公司「博報(bào)堂」。在這期間，受到了Takuya Onuki先生的指導(dǎo)，成長(zhǎng)迅速。經(jīng)過長(zhǎng)達(dá)六年的工作積累，佐藤終于小有成就。他的作品「本田型格（Honda Integra）」獲得藝術(shù)指導(dǎo)協(xié)會(huì)的（ADC）年度大獎(jiǎng)。在「博報(bào)堂」工作的這些年，佐藤除了收獲了大量的經(jīng)驗(yàn)和知識(shí)外，還遇上了在人生中給予他巨大幫助的人，也就是他的妻子佐藤悅子。
時(shí)間一轉(zhuǎn)又過了五年，這時(shí)的佐藤已經(jīng)習(xí)得了一身本領(lǐng)，終于有一天，他決定離開這家公司，去成立屬于自己的工作室 「 株式會(huì)社サムライ」 ，至此開啟了他魔術(shù)般的設(shè)計(jì)生涯。
△ 事務(wù)所內(nèi)部一角
在次偶然的情況下，有位外國(guó)攝影師問他「可士和」在英文里是什么意思，當(dāng)他解釋到第二個(gè)字」士」的時(shí)候就卡住了，因?yàn)樵谌瘴牡陌l(fā)音羅馬里「 SAMURI 」是武士的意思。也這是事件啟發(fā)了他的想法，并且給自己的事務(wù)所命名為「 SAMURI 」。根據(jù)佐藤的妻子回憶，當(dāng)時(shí)她聽到這名字的第一反應(yīng)是：「什么？武士事務(wù)所？也太土了吧！」
在佐藤可士和的作品中，除了人盡皆知的優(yōu)衣庫設(shè)計(jì)。他所經(jīng)手的工作還包括有：偶像團(tuán)體「SMAP」的整體視覺設(shè)計(jì)、NTT移動(dòng)電話設(shè)計(jì)、紐約全球旗艦店的創(chuàng)意指導(dǎo)、迅銷公司的企業(yè)識(shí)別設(shè)計(jì)、藤幼稚園的更新計(jì)劃、國(guó)立新美術(shù)館的標(biāo)志設(shè)計(jì)等。
除了獲得眾多獎(jiǎng)項(xiàng)外，在2007年，佐藤成為了明治學(xué)院的客座教授，同時(shí)也是東京ADC（藝術(shù)指導(dǎo)俱樂部）、東京TDC（字形指導(dǎo)俱樂部）、JAGDA（日本平面設(shè)計(jì)師協(xié)會(huì)）的常駐會(huì)員。
在佐藤可士和看來，只依靠靈感的設(shè)計(jì)是遠(yuǎn)遠(yuǎn)不夠的，除此之外，設(shè)計(jì)師還需要去考慮產(chǎn)品背后的邏輯。靈感如果太跳躍性，太過超前的話，是沒辦法解決現(xiàn)有問題的。但是在設(shè)計(jì)的過程中，靈感也是必不可少的關(guān)鍵因素，許多時(shí)候我們都需要通過「靈感」來擴(kuò)充想法。而靈感的并不一定非要在自己的腦海中產(chǎn)生，通常創(chuàng)意的答案就在客戶哪里，而我們做的工作只是總結(jié)對(duì)方的思緒并加以重新創(chuàng)造。
△ 佐藤可士和的超整理術(shù)
在《佐藤的整理術(shù)》這本書中也曾表明過，他自己的工作室里面沒有多余的東西，沒有電話和電視，偌大的會(huì)議室里也只有一條長(zhǎng)長(zhǎng)的會(huì)議桌和雪白的墻。
△ 佐藤可士和的事務(wù)所（內(nèi)部）
把環(huán)境中的干擾元素清理到限度，這有助于人對(duì)的情緒的整理。還有每當(dāng)他完成一個(gè)項(xiàng)目都會(huì)聚集所有員工來整理所有的資料。目的也在于在整理的過程中讓人時(shí)刻的保持清醒的精神狀態(tài)，以做出更迅速、更準(zhǔn)確的判斷。
佐藤所從事的職位是「藝術(shù)指導(dǎo)」，可能一般人認(rèn)為的藝術(shù)指導(dǎo)工作，就是負(fù)責(zé)「擬定和執(zhí)行平面計(jì)劃的統(tǒng)籌者?！?
但在他看來藝術(shù)指導(dǎo)是「擬定全盤的溝通戰(zhàn)略，并運(yùn)用設(shè)計(jì)的力量將其化為有形之物」的工作，通過跟客戶進(jìn)行多次全方位的溝通，整理出客戶的需求以及內(nèi)心的期待，從而做出符合客戶與市場(chǎng)需求的解決方案。佐藤將自己的職位定位為醫(yī)生，客戶就是患者，通過「望聞問切」找出癥狀的病因和治療方向。
在整理的過程中需要統(tǒng)理對(duì)方的思緒，很多時(shí)候客戶雖然對(duì)自己的產(chǎn)品非常了解，但對(duì)于產(chǎn)品的市場(chǎng)價(jià)值卻并沒有明確的認(rèn)知，或者頭緒很亂，不能總結(jié)出產(chǎn)品特點(diǎn)和價(jià)值。也有些客戶對(duì)于自己的需求說不清楚，有時(shí)候是他們想要的太多，但他們并沒有明確自己的目標(biāo)是什么。這時(shí)就需要跟客戶深度溝通一一推敲客戶堆積如山的問題，加以整理、逐步將產(chǎn)品最關(guān)鍵最本質(zhì)的焦點(diǎn)提取出來，將其打磨精致成為聯(lián)結(jié)產(chǎn)品和消費(fèi)者的橋梁。
1. SMAP（2000）
2000年，佐藤可士和擔(dān)任了由木村拓哉等超人氣偶像組成的組合SMAP的整體形象策劃。這次設(shè)計(jì)中他采用全新的傳播策略。否定傳統(tǒng)的廣告宣傳方式，為日本流行音樂領(lǐng)軍團(tuán)體之一SMAP的十周年紀(jì)念引入了一種很酷的宣傳方式。
佐藤可士和以「流行樂隊(duì)就是品牌」的新視角，重新定位了SMAP，并制定一種新的傳播策略，在CD夾克和各種音樂會(huì)商品上都使用了獨(dú)特的視覺標(biāo)識(shí)。佐藤可士和將涉谷停放的汽車披上印著樂隊(duì)形象的車罩，在路燈上懸掛橫幅、為公共汽車車身設(shè)計(jì)特殊的視覺樣式，還有報(bào)紙廣告和海報(bào)宣傳等其他傳播媒介。
受樂隊(duì)CD包，盒子，碟底的啟發(fā)，他重新修改了位置和顏色比例，設(shè)計(jì)出一個(gè)容易讓人記住的三色符號(hào)。并通過各種街頭活動(dòng)營(yíng)造出轟動(dòng)，熱鬧切且有吸引力的熱點(diǎn)。
他將整個(gè)城市定位為一個(gè)大型傳播媒介的想法得到了高度認(rèn)可，并在2000年贏得了許多著名獎(jiǎng)項(xiàng)?？墒亢瓦€為樂隊(duì)設(shè)計(jì)了一種以他們發(fā)行的CD命名的飲料，「Drink Smap!」并進(jìn)行了更多的實(shí)驗(yàn)廣告。他設(shè)計(jì)了飲料運(yùn)輸車、工人工作服和安裝在音樂商店的自動(dòng)售貨機(jī)。利用這獨(dú)特的產(chǎn)品作為廣告媒介，成功的吸引了大量的關(guān)注。
2. OZOC （2002）
佐藤可士和曾擔(dān)任OZOC(年輕女性時(shí)尚品牌)的創(chuàng)意總監(jiān)，并負(fù)責(zé)其旗艦店的傳播策略，該旗艦店于2002年在原宿開業(yè)。佐藤可士和在建筑師荒木伸男(Nobuo Araki)的幫助下開始了這個(gè)項(xiàng)目，創(chuàng)作出一個(gè)紅色立方體建筑，但一個(gè)月后，這座建筑的顏色一夜之間變成了樸素的白色木材。
佐藤可士和將建筑概念定義「變化」?！缸兓故菚r(shí)尚的本質(zhì)，隨著時(shí)間的變化而變化。他將建筑與OZOC品牌的靈活性進(jìn)行了結(jié)合，展示OZOC品牌對(duì)潮流的敏感度。OZOC在日本有100多家商店，它希望為品牌傳播創(chuàng)造一種獨(dú)特的方法。
佐藤可士和拋棄了以往時(shí)裝廣告策略，即使用外國(guó)模特的照片。將OZOC的新旗艦店作為媒介，并稱之為「原宿廣告架構(gòu)項(xiàng)目」（haap）。為了強(qiáng)調(diào)這一理念，佐藤可士和利用建筑工藝，為店面外部建造了一系列廣告板。為了強(qiáng)調(diào)設(shè)計(jì)概念，還將建筑過程和設(shè)計(jì)的稿圖，模型等應(yīng)用于廣告主題。佐藤還制作了一本特殊的概念書里面記錄著建筑的施工過程，并在開幕式上分發(fā)給記者和其他相關(guān)從事者。
他證明了除了文字，照片等傳統(tǒng)廣告媒介外，建筑設(shè)計(jì)和室內(nèi)設(shè)計(jì)也能在品牌傳播中發(fā)揮著積極和重要的作用。
3. 藤幼兒園（2004）
佐藤先生為藤幼兒園提出了一個(gè)全新的觀點(diǎn)，指出「幼兒園本身就是一個(gè)巨大的游樂場(chǎng)」的宏偉概念。他將建筑作為培養(yǎng)每個(gè)孩子創(chuàng)造力的媒介賦予了新的視角。佐藤先生利用場(chǎng)地上現(xiàn)有的日本大榆樹，提出了一個(gè)木制屋頂和甜甜圈型的建筑，孩子們可以在上面每天跑步和玩耍。中間的區(qū)域被設(shè)計(jì)一個(gè)中央庭院，來促進(jìn)平時(shí)公共活動(dòng)時(shí)的團(tuán)結(jié)性。佐藤先生也為幼兒園設(shè)計(jì)了操場(chǎng)設(shè)備，將它融入了幼兒園本身。他的想法是使幼兒園成為「學(xué)習(xí)的接口」，成為新的幼兒教育模式。
佐藤與手塚夫婦建筑團(tuán)隊(duì)合作，手塚夫婦的設(shè)計(jì)以融合自然的多功能空間而聞名。他們的建筑理念是:「無人獨(dú)處的空間」。幼兒園的空間設(shè)計(jì)也秉持著這一理念。屋頂作為孩子們的游樂場(chǎng)，為孩子們提供了豐富而有趣的內(nèi)置設(shè)備。
讓孩子可以屋頂上自由地奔跑和玩耍，然后通過滑梯或繩梯回到地面。甚至連排水系統(tǒng)都是為孩子們?cè)O(shè)計(jì)的，從屋頂收集的雨水形成瀑布。佐藤先生還為幼兒園標(biāo)志、網(wǎng)站和兒童t恤設(shè)計(jì)了類似剪紙的字體和字符。
該項(xiàng)目以「幼兒園本身就是一個(gè)巨大的游樂場(chǎng)，培養(yǎng)每個(gè)孩子的創(chuàng)造力」為理念，代表幼兒教育的未來，在國(guó)際上獲得了高度贊譽(yù)，獲得了2011國(guó)際機(jī)構(gòu)（CELE）頒發(fā)的「最優(yōu)秀設(shè)施獎(jiǎng)」，以及眾多其他全球建筑和教育獎(jiǎng)項(xiàng)。
4. 優(yōu)衣庫（2006）
2006年優(yōu)衣庫在紐約SOHO的旗艦店開業(yè)開始，佐藤可士和負(fù)責(zé)了時(shí)尚品牌優(yōu)衣庫的所有全球品牌傳播活動(dòng)。為了實(shí)現(xiàn)優(yōu)衣庫獨(dú)特的創(chuàng)意和設(shè)計(jì)基礎(chǔ)，他提出了以「具有美學(xué)意識(shí)的超合理性」為概念，總結(jié)了優(yōu)衣庫對(duì)世界的價(jià)值和主張。
可士和通過修改日本片假名和原始字體設(shè)計(jì)出新的視覺標(biāo)志，并組織了由建筑師、室內(nèi)設(shè)計(jì)師和平面藝術(shù)家組成的專家團(tuán)隊(duì)，為倫敦、巴黎、上海、東京和柏林的每一家旗艦店設(shè)計(jì)，每個(gè)地區(qū)的旗艦店都延續(xù)著相同的基調(diào)和感覺。這種與優(yōu)衣庫整體業(yè)務(wù)管理直接相關(guān)的全面?zhèn)鞑ゲ呗?，提升了?yōu)衣庫品牌的全球影響力。
優(yōu)衣庫在紐約Soho的第一家全球旗艦店的logo，用回了原logo鮮艷的紅色，片假名和英文表達(dá)了優(yōu)衣庫如何將歐美的休閑裝轉(zhuǎn)變成日本風(fēng)格。
整個(gè)平面設(shè)計(jì)從標(biāo)志到原始字體都是傳播策略的核心。佐藤將標(biāo)志和字體組合成一種視覺圖案，并將其運(yùn)用在建筑外墻面板，出租車車廂，屋頂，和各種媒體，通過各種傳播形式來吸引人們對(duì)優(yōu)衣庫的興趣，促使人們?nèi)チ私鈨?yōu)衣庫。
此外，以負(fù)責(zé)設(shè)計(jì)各個(gè)旗艦店的片山正通先生、擔(dān)任網(wǎng)站設(shè)計(jì)的中村勇吾先生為中心，組建了在全球展開的創(chuàng)意團(tuán)隊(duì)將優(yōu)衣庫的品牌形象，在巴黎、倫敦、柏林、莫斯科、上海等各城市進(jìn)行品牌本地化。
佐藤還為優(yōu)衣庫的襯衫品牌「UT」進(jìn)行設(shè)計(jì)，2007年東京原宿旗艦店開業(yè)并發(fā)布襯衫專業(yè)品牌「ut」，并以「襯衫的未來的便利店」為概念開展了設(shè)計(jì)。將t恤衫放入瓶包裝瓶，陳列在設(shè)計(jì)成飲料機(jī)型的展架上呈現(xiàn)出一種未來式的購物感。
「UT」一發(fā)布就在日本國(guó)內(nèi)引起熱烈反響，商店數(shù)天擠滿了客戶甚至連店內(nèi)的商品也出現(xiàn)了銷售一空的場(chǎng)景，這種現(xiàn)象讓人不禁發(fā)出欣喜的贊嘆。佐藤以一種全新的品牌設(shè)計(jì)戰(zhàn)略來重塑優(yōu)衣庫。將公司經(jīng)營(yíng)與品牌設(shè)計(jì)相結(jié)合創(chuàng)造出一種全新的品牌戰(zhàn)略。
5. 今治毛巾品牌形象（2006）
「Imabari毛巾品牌項(xiàng)目」于2006年作為日本經(jīng)濟(jì)、貿(mào)易和工業(yè)部推廣日本品牌項(xiàng)目的一部分。由于無法招募到下一代工人，Imabari面臨著與廉價(jià)外國(guó)產(chǎn)品的競(jìng)爭(zhēng)，前途未卜。佐藤可士和得知情況后為該公司制定了新的品牌標(biāo)識(shí)和品牌策略，將Imabari的高價(jià)值轉(zhuǎn)化為「最安全、最可靠、質(zhì)量最高的品牌」。佐藤可士和創(chuàng)造的標(biāo)志象征著Imabari（今治）地區(qū)豐富的自然和工業(yè)的復(fù)興。將Imabari的品牌定位為品質(zhì)保證的標(biāo)志，選擇了純白的毛巾作為主打產(chǎn)品，體現(xiàn)了品牌的精髓。
將「最安全」和「最可靠」作為核心品牌理念。當(dāng)時(shí)，由于發(fā)生了幾起食品安全事件，日本消費(fèi)者的危機(jī)感增強(qiáng)了。人們對(duì)食品信息的安全性非常重視。佐藤可士和利用這種焦慮，直接定位Imabari產(chǎn)品的可追溯性和高質(zhì)量。紅、藍(lán)、白分別代表太陽、海洋和水，是Imabari毛巾高品質(zhì)的基礎(chǔ)。這個(gè)標(biāo)志的首字母是「I」，增加了歐洲的味道，為「全球品牌」定下了基調(diào)。
白毛巾以前并沒有被用來代表高質(zhì)量，但佐藤認(rèn)為，作為Imabari的主要產(chǎn)品，它最清楚地代表了Imabari的價(jià)值。這清晰明確的信息極大地提高了Imabari的品牌知名度和銷量，并將其定位為日本的全球品牌之一。
2012年，在東京青山南美開設(shè)了第一家概念店。2017年在產(chǎn)地今治設(shè)立了旗艦店和毛巾實(shí)驗(yàn)室。為了展示日本Imabari毛巾的區(qū)域生產(chǎn)商。還新成立了「毛巾實(shí)驗(yàn)室」，讓游客可以在這里體驗(yàn)毛巾的安全高質(zhì)量的品質(zhì)。所有這些活動(dòng)都有助于加深消費(fèi)者對(duì)該品牌的吸引力和熱情。這個(gè)項(xiàng)目的創(chuàng)新方向，包括制定和執(zhí)行的溝通策略，大膽的標(biāo)志和清晰的品牌信息獲得該地區(qū)100多家公司的共同關(guān)注。
6. 國(guó)立新美術(shù)館(2007)
2007年1月開幕的國(guó)立新美術(shù)館，是日本第五個(gè)國(guó)立美術(shù)館，也是最大的國(guó)家美術(shù)館，也是三十年來第一家開放的博物館。它沒有永久的收藏，作為一個(gè)展覽場(chǎng)所更多的活動(dòng)來源于藝術(shù)教育和展覽活動(dòng)。
佐藤可士和以」全新「做為出發(fā)點(diǎn)，將」沒有收藏品「的缺點(diǎn)轉(zhuǎn)化為優(yōu)點(diǎn)，并結(jié)合美術(shù)館做為「日本最大的展示空間」的優(yōu)點(diǎn)來規(guī)劃策略。
識(shí)別標(biāo)志以「新」這個(gè)字作為主要元素，想要用視覺表現(xiàn)出美術(shù)館的與過去其他美術(shù)館的不同，「就不能局限于舊框架，通過迄今沒有任何人做過的嘗試。佐藤可士和提取」開放「做為關(guān)鍵詞，因?yàn)樵撁佬g(shù)館致力發(fā)揮藝術(shù)中心的功能，除了搜集信息之外，更是期望美術(shù)館能成為信息交流地。
佐藤將「新」設(shè)計(jì)成美術(shù)館的視覺標(biāo)志并通過標(biāo)志強(qiáng)調(diào)這種「開放場(chǎng)所」的特征，去除「新」這個(gè)文字里所有線條和彎角的封閉部分，制作獨(dú)特的開放式字體。此外，所有線條都是一邊直角，另一邊圓角，這個(gè)靈感源自黑川紀(jì)章先生建筑的啟發(fā)，美術(shù)館建筑的正面呈現(xiàn)海浪般的曲線，另一側(cè)的展示空間則是直線，通過字體的特征讓人聯(lián)想到建筑的外形。
他還為博物館衍生品和標(biāo)牌開發(fā)了原創(chuàng)的模板式英文和數(shù)字字體，以表達(dá)博物館的開放性和多元化，并將其核心價(jià)值觀和獨(dú)特建筑統(tǒng)一為一體，作為其綜合視覺傳播策略的一部分。通過統(tǒng)一建筑概念和視覺傳播概念，提升了美術(shù)館的設(shè)計(jì)完整度和統(tǒng)一性，確立美術(shù)館整體的全新形象。
7. 千里復(fù)健醫(yī)院(2007)
「康復(fù)度假村」是佐藤可士和2007年為這家醫(yī)院開發(fā)的宏偉概念。醫(yī)院的作用是提供康復(fù)治療的施設(shè)，為正在康復(fù)的病人恢復(fù)活力和信心讓他們回歸正常生活。
通過理事長(zhǎng)橋本康子醫(yī)生的敘述的詳情，整理和思索后提出「復(fù)健休閑中心」概念。醫(yī)院是修養(yǎng)的場(chǎng)所，但是通過提供舒適的空間和真誠(chéng)的服務(wù)，能發(fā)揮心靈康復(fù)的功能。
由可士和擔(dān)任家具設(shè)計(jì)的監(jiān)制，建筑內(nèi)部采用休閑飯店風(fēng)格，有熱帶魚悠游其間的水槽，客廳有暖爐，芳香療法，和圖書館。家具全部是摩登的北歐制品，采用柔和的間接照明，充滿溫馨感的木質(zhì)地板讓患者放松心情。員工制服全服翻新，委托滝沢直己先生設(shè)計(jì)，新的制服給人整齊潔凈的印象，又兼具「整齊」和「高雅」的高級(jí)感可以使患者感到安心。
醫(yī)院的結(jié)構(gòu)都是木質(zhì)材料目的是為了營(yíng)造出溫暖的氛圍，讓患者感受到大自然的治愈能力。佐藤先生還制定了康復(fù)醫(yī)院新腦卒中病房的更新計(jì)劃，該病房是為紀(jì)念康復(fù)醫(yī)院成立10周年而建造的。他擴(kuò)大了「康復(fù)度假村」的概念，為患者提供放松的環(huán)境，并將重點(diǎn)放在康復(fù)上，作為醫(yī)院新計(jì)劃的一部分。
此外醫(yī)院還設(shè)置了一間音樂室和一間鋪著木板的美術(shù)室。佐藤先生還將自己親自創(chuàng)作的繪畫和瓷器放置在大廳內(nèi)外展出，為患者提供一種新的治療藝術(shù)能量。
8. 7-11便利店（2010）
7-11便利店是世界上最大的便利店連鎖集團(tuán)。它不僅具備便利店個(gè)性化和便捷化的特色，更有著其經(jīng)營(yíng)和發(fā)展的獨(dú)到之處。其龐大的店鋪網(wǎng)絡(luò)，規(guī)范化的商品管理，與時(shí)俱進(jìn)的經(jīng)營(yíng)理念。
在即將到來40周年之際，佐藤可士和為7-11便利店重新制定了一套經(jīng)營(yíng)戰(zhàn)略，重新定位該品牌的重點(diǎn)，便利店的優(yōu)點(diǎn)并不在于價(jià)格而在他的產(chǎn)品質(zhì)量和形象，為了提高品質(zhì)和形象，可士和為便利店重新設(shè)計(jì)了1700多項(xiàng)商品包裝。這一舉措打破了每季度最高銷售記錄。佐藤可士和強(qiáng)調(diào)賣的不只是商品，而是對(duì)生活的重視，設(shè)計(jì)源于生活，應(yīng)該通過設(shè)計(jì)來培養(yǎng)生活美感。
佐藤先生還參與了「Seven Cafe」（七咖啡）咖啡機(jī)的命名、包裝和設(shè)計(jì)并創(chuàng)造出超高的人氣，可以被認(rèn)為是一種社會(huì)現(xiàn)象。并在1年里占據(jù)國(guó)內(nèi)咖啡銷量No.1的位置。
佐藤先生專注于最細(xì)節(jié)的設(shè)計(jì)，以最大限度地發(fā)揮這些優(yōu)勢(shì)。簡(jiǎn)單的包裝設(shè)計(jì)，非常適合個(gè)人家庭餐桌，受到尋求高品質(zhì)產(chǎn)品的消費(fèi)者的歡迎。佐藤還針對(duì)食品進(jìn)行分類，并按類別放置品牌標(biāo)簽，以便客人能夠根據(jù)自己的需求輕松地選擇產(chǎn)品。品牌重塑的第二年開始，以日常用品為主的「生活方式」品類開始逐步打造自有品牌。
在第三年，他推出了「Seven Café」，給7-11便利店帶來了巨大的成功。佐藤先生將重塑品牌的傳播方法結(jié)合到產(chǎn)品中，并從設(shè)計(jì)的角度出發(fā)結(jié)合。這是其他便利店產(chǎn)品都沒有的一個(gè)因素。因此，他不僅帶來了巨大的經(jīng)濟(jì)成功，也帶來了巨大的影響，創(chuàng)新日本的生活方式。
9. 開被樂記念館（2011）
「開杯樂紀(jì)念館」以創(chuàng)造思考為概念，通過有關(guān)方便面的各種展覽和體驗(yàn)項(xiàng)目，讓參觀者在愉快的氣氛中了解發(fā)明、發(fā)現(xiàn)的重要性，學(xué)習(xí)創(chuàng)業(yè)精神，是一個(gè)體驗(yàn)型飲食教育設(shè)施。該公司的創(chuàng)業(yè)者安藤百福先生生前一直有一個(gè)念頭：「希望告訴孩子們發(fā)明、發(fā)現(xiàn)的重要性」 紀(jì)念館的logo創(chuàng)作靈感來源于開杯樂靠近杯口的外沿設(shè)計(jì)，設(shè)計(jì)3個(gè)驚嘆號(hào)「?。?！」來表現(xiàn)「發(fā)明和發(fā)現(xiàn)」的喜悅。內(nèi)部基調(diào)以紅色和白色為主，簡(jiǎn)潔明了。并將這一理念體現(xiàn)在博物館的平面，空間和展示內(nèi)容。
10. YANMAR公司（2013）
為了紀(jì)念Yanmar誕生 100周年，佐藤可士和為yanmar公司重新定制了一個(gè)品牌戰(zhàn)略，該公司涉及工程、農(nóng)業(yè)、建筑、海洋工程和全球能源等多個(gè)領(lǐng)域。
為了實(shí)現(xiàn)yanmar公司全球化的目的，佐藤制定了名為「高端品牌項(xiàng)目」戰(zhàn)略，以展示洋馬公司計(jì)劃的未來發(fā)展方向。
佐藤為公司設(shè)計(jì)新的標(biāo)志，還與創(chuàng)作者合作，創(chuàng)造了拖拉機(jī)原型和新農(nóng)業(yè)服裝，作為體現(xiàn)洋馬全球化的意愿。YANMAR的品牌形象在國(guó)內(nèi)外有所不同，在日本它以其拖拉機(jī)和公司卡通男孩角色Yanboh和Marboh而聞名。在海外，洋馬是游艇和海洋工業(yè)的熱門品牌。基于這一事實(shí)，佐藤將洋馬的許多活動(dòng)轉(zhuǎn)移到「食品生產(chǎn)」和「能源轉(zhuǎn)型」這兩個(gè)主要視角，專注于一個(gè)企業(yè)使命，即追求一個(gè)可持續(xù)的，循環(huán)型社會(huì)。
佐藤設(shè)計(jì)了源自O(shè)ni-Yanma的Flying Y標(biāo)志，該標(biāo)志啟發(fā)了公司名稱，在日語中意為「蜻蜓」。此外，在新聞發(fā)布會(huì)和經(jīng)銷商活動(dòng)上以新拖拉機(jī)和新農(nóng)業(yè)、海洋服裝的設(shè)計(jì)為特色，有力地表達(dá)了Yanmar的未來愿景。
佐藤還負(fù)責(zé)監(jiān)制和指導(dǎo)位于大阪的新辦公樓的建設(shè)，在辦公樓在2014年建成。建筑本身的定位旨在通過采用進(jìn)的環(huán)境技術(shù)實(shí)現(xiàn)零排放的概念模型。佐藤可士和將YANMAR FLYING-Y BUILDING大樓定位為傳播媒體，不斷傳遞洋馬「可持續(xù)未來」的使命。
11. MoltBene企業(yè)新形象（2015）
MoltBene是日本著名護(hù)發(fā)公司，在即將到來的40周年紀(jì)念，邀請(qǐng)了佐藤可士和為公司制定新品牌戰(zhàn)略的策劃和執(zhí)行，包括改變公司名稱， 并為「MoltBene」開發(fā)新的企業(yè)形象。他為公司提出一個(gè)新的命題「人生中，體驗(yàn)新的美」。他還將集團(tuán)子公司整合在這一新口號(hào)和新公司名稱「美的體驗(yàn)」概念里。
佐藤設(shè)計(jì)的新標(biāo)志靈感來自于「美」的日文漢字形式。整個(gè)標(biāo)志是由 「美」簡(jiǎn)化和抽象而形成的，并使用紫色作為公司的新企業(yè)顏色。這區(qū)分了公司的獨(dú)特性，因?yàn)樽仙皇枪净諛?biāo)中常用到顏色。同時(shí)負(fù)責(zé)新公司總部的入口和美容工作室的室內(nèi)設(shè)計(jì)，并負(fù)責(zé)安裝藝術(shù)品。
佐藤先生設(shè)計(jì)了公司新總部?jī)?nèi)部新美容工作室。用于員工培訓(xùn)，與新聞會(huì)議等，旨在該空間與整體品牌戰(zhàn)略同步。
從工作室天花板上的織物和佐藤先生在墻上的表達(dá)了這個(gè)工作室作為新「美」的體驗(yàn)發(fā)源地的定位。通過在新公司名稱、新標(biāo)識(shí)、新美容工作室的內(nèi)部設(shè)計(jì)以及其他新的傳播媒介中象征性地融入新的使命宣言，將這些元素融合在一起，向社會(huì)提出了一種新的品牌戰(zhàn)略方案。
12. Miwa Yamamoto（2016）
Miwa Yamamoto是一家Tenobe Somen（日本手工細(xì)麥面）公司。為了紀(jì)念誕生300周年，佐藤可士和被委托設(shè)計(jì)新的公司名稱和新標(biāo)識(shí)，還有公司的旗艦產(chǎn)品「白龍」新包裝設(shè)計(jì)。在整個(gè)項(xiàng)目中，佐藤致力于將當(dāng)代日常生活和傳統(tǒng)工藝與日本食品傳統(tǒng)之間相融合創(chuàng)造出和諧共生的形態(tài)，同時(shí)也為品牌創(chuàng)造了未來的形象。
考慮到公司日后擴(kuò)張其他產(chǎn)品生產(chǎn)線，從而應(yīng)對(duì)日益多樣化的消費(fèi)者飲食習(xí)慣，佐藤可士和先生提出將公司名字「Miaw SomenYamamoto」簡(jiǎn)化成為「Miwa Yamamoto」。
他表示公司歷史悠久，與奈良古城歷史相互交織有著深刻的歷史淵源?；谶@份歷史情感佐藤以印章的形式設(shè)計(jì)出公司的新標(biāo)志。公司產(chǎn)品」白龍」的包裝以白色為基調(diào)，配合極簡(jiǎn)又細(xì)致的圖案。簡(jiǎn)單而現(xiàn)代的，與其他競(jìng)爭(zhēng)產(chǎn)品區(qū)別開來。包裝上的圖案細(xì)膩又精致與產(chǎn)品產(chǎn)生呼應(yīng)，同時(shí)標(biāo)志象征著Miwa Yamamoto細(xì)麥面背后獨(dú)特而精致的技術(shù)水平。
13. DIFFERENCE（2016）
2016年佐藤為DIFFERENCE更新品牌形象系統(tǒng),還為此定制了一套全新的西裝訂購系統(tǒng)?？腿送ㄟ^店內(nèi)的裁縫進(jìn)行初步測(cè)量，將測(cè)量好的尺寸保存進(jìn)一個(gè)獨(dú)特的APP應(yīng)用中，從開始的測(cè)量尺寸到選材，布料，到支付都可通過該應(yīng)用完成。
這建立了一套全新的服務(wù)模式，將線下實(shí)體店和線上店鋪連接起來創(chuàng)造出一套新的訂購系統(tǒng)。佐藤先生還提供了根據(jù)每個(gè)顧客的數(shù)據(jù)進(jìn)行促銷信息分析，將合適的促銷信息傳播到合適的客戶身上。極大限度地發(fā)揮了定制西服的優(yōu)勢(shì)。
2016年10月在青山開業(yè)，佐藤先生設(shè)計(jì)了一個(gè)精致的室內(nèi)空間。該應(yīng)用程序允許商店提前詢問顧客的個(gè)人喜好和預(yù)算，向他們展示不同的西裝選擇和面料樣品，這樣顧客一旦來到商店，就可以觸摸和感覺他們「想要」的西裝。顧客在真實(shí)商店和虛擬商店之間有一種無縫的體驗(yàn)。很多客戶都很歡迎這項(xiàng)服務(wù)，因?yàn)槊總€(gè)人都可以在整個(gè)過程中享受到高質(zhì)量的服務(wù)和個(gè)性化。
14. 武田制藥（2018）
佐藤可士和為武田制藥有限公司在東京·日本橋本町建設(shè)了的新全球總部提供了室內(nèi)設(shè)計(jì)指導(dǎo)。佐藤設(shè)計(jì)了一個(gè)精致又具有代表性的室內(nèi)空間，向世界展示武田公司的品牌核心。
他根據(jù)武田自成立以來的使命「生命的力量」為概念來進(jìn)行設(shè)計(jì)并體現(xiàn)在公司的內(nèi)部結(jié)構(gòu)中， 從入口到接待處到工作區(qū)域的運(yùn)動(dòng)過程講述了人類生活的故事。
并以生命中不可缺少的八個(gè)元素，生命，水，光，地球，樹，人，聯(lián)系和未來的漢字來作為空間裝飾里的主要形式。將這些漢字提煉成現(xiàn)代符號(hào)，傳達(dá)出了一種日本企業(yè)特有的「和」的感覺，并作為藝術(shù)品應(yīng)用于墻壁、地毯和燈光。
該項(xiàng)目作為空間品牌的視角得到了廣泛關(guān)注，不僅是為了傳達(dá)武田支持「生命的力量」，還為所有與武田合作的人提供了分享同樣美好未來的空間。
15. 日清食品公司設(shè)計(jì)工廠（2019）
2019年負(fù)責(zé)日清食品關(guān)西工廠的參觀設(shè)施的創(chuàng)意指導(dǎo)、室內(nèi)裝飾設(shè)計(jì)。佐藤結(jié)合了趣味性和品牌歷史，設(shè)計(jì)出與普通工廠不同的形式。
在入口處是巨大的杯,面外觀采用日清的代表色：紅與白為主，從入口處走進(jìn)內(nèi)部參觀后，映入眼簾的便是一條長(zhǎng)長(zhǎng)的紅色走廊,全長(zhǎng)200米的鮮紅的參觀通道內(nèi)部同樣延續(xù)了入口處的紅白設(shè)計(jì)，與工廠內(nèi)部的干凈用色形成強(qiáng)烈對(duì)比，給人留下一種沖擊又和諧的對(duì)比，在紅色走廊里有40個(gè)大顯示器展示生產(chǎn)過程，每分鐘生產(chǎn)400個(gè)杯面,同時(shí)還能聽到生產(chǎn)線中發(fā)生的聲音取樣。
日清工廠總面積約10萬平方米，1年內(nèi)最多可生產(chǎn)10億頓產(chǎn)品。擁有尖端設(shè)備和IoT技術(shù)，是國(guó)內(nèi)最大的食品工廠之一。
16. SAMURAI INCUBATE(2019)
2019年7月SAMURAI INCUBATE在日本總部的公司更換了全新的辦公地點(diǎn)，同時(shí)也重新修訂了企業(yè)形象系統(tǒng)。佐藤可士和為該公司重新整理了行動(dòng)的方針，對(duì)齊經(jīng)營(yíng)理念提出修正，把焦點(diǎn)聚焦在「志勇禮誠(chéng)」這句話上。
LOGO標(biāo)志把「志勇禮誠(chéng)」這四個(gè)字，無限的抽象化與簡(jiǎn)化，使logo的視覺表現(xiàn)上與日本極簡(jiǎn)的審美觀念融合統(tǒng)一。
四個(gè)正方形水平排列，即統(tǒng)一又平衡穩(wěn)固，象征了今后公司新事業(yè)的基礎(chǔ)。新辦公司在東京都港區(qū)的六本木一丁目街道中，佐藤認(rèn)為新的公司地點(diǎn)是新開始的舞臺(tái)，寓意著在這里能創(chuàng)造出更多新的商業(yè)機(jī)遇。新公司在六本木區(qū)選擇了一棟三層樓并以「無」作為概念，去除了樓中附屬的東西讓大樓接近剛建好的狀態(tài)。
公司二樓的靈感來自于「道場(chǎng)」這里能根據(jù)不同的用途靈活運(yùn)用其空間，也可以做為一些特殊活動(dòng)的場(chǎng)所。正面有一面純白的墻，傳達(dá)著一種從無到有的理念，同時(shí)也是這個(gè)空間中重要的標(biāo)志。其他的空間是無隔斷的一體化空間設(shè)計(jì)，可以滿足快速的繁忙事務(wù)的處理。在空間設(shè)計(jì)中材質(zhì)選擇了木頭、不銹鋼、布、玻璃，希望這里散發(fā)出輕松和質(zhì)樸的氛圍。
早些時(shí)候，在medium上看到了政府UX設(shè)計(jì)師，Cyd Harrell所寫的以”尊重用戶“為主題的文章，里面提到了尊重用戶的時(shí)間，尊重用戶的能力以及尊重用戶價(jià)值。
閱讀后使我腦海中一個(gè)一直以來都若隱若現(xiàn)的想法逐漸露出一角，從那開始我漸漸關(guān)注用戶、時(shí)間、掌控力、注意力這一組詞語所組成的一個(gè)模糊的概念，這個(gè)概念的核心就是產(chǎn)品如何侵?jǐn)_用戶，過度商業(yè)化然后導(dǎo)致用戶的信息超載情況。
這個(gè)觀點(diǎn)一開始還是很模糊，我并沒有獲得足夠的信息支持我闡述清楚這個(gè)主題，直到后面，我看到NNG（尼爾森諾曼集團(tuán)官網(wǎng)）的一篇關(guān)于”注意力經(jīng)濟(jì)“的文章，終于把這一系列元素組織好，產(chǎn)出了今天這篇文章。（本來以為理清這一個(gè)主題要很久）
首先我要提出一個(gè)詞語，"wicked problems”。在我學(xué)習(xí)國(guó)外的設(shè)計(jì)思維課程時(shí)，在前面幾個(gè)章節(jié)中有提到一個(gè)“wicked problems”即棘手的問題這樣一個(gè)概念，也可以翻譯為抗解問題。指的是極為復(fù)雜，嚴(yán)重，上升到社會(huì)層面及人類層面的問題。如環(huán)境污染，農(nóng)民工問題，教育問題等。而設(shè)計(jì)思維被發(fā)明出來一個(gè)重要目的或者說任務(wù)就是用于解決一些這樣的問題，用系統(tǒng)思維和創(chuàng)新性的視角來挖掘潛藏的核心問題，以及探索對(duì)應(yīng)的最佳解決方案。
我提到這一點(diǎn)不是要對(duì)比國(guó)內(nèi)國(guó)外環(huán)境，也不是要贊美國(guó)外的設(shè)計(jì)氛圍，而是想提醒大家，我們?cè)O(shè)計(jì)師可以做更多，可以想得更多，可以用設(shè)計(jì)思維，結(jié)合理性和創(chuàng)意去解決很多問題。我一直以來翻譯一些國(guó)外的系統(tǒng)理論，設(shè)計(jì)方法論，也是想用自己的力量讓大家了解更多設(shè)計(jì)的可能，除了眼前的屏幕，我們的視野應(yīng)該放的更長(zhǎng)更遠(yuǎn)，去思考我們解決的問題，以及我們所設(shè)計(jì)的方案可能會(huì)衍生的一系列問題。
我接下來要講的，就是在當(dāng)下環(huán)境下一個(gè)很關(guān)鍵的問題，用戶注意力。
一：用戶的注意力
注意力成為人類的限制因素
大家回憶一下，每天清晨，都有哪些內(nèi)容吸引你的注意力？了解時(shí)間、看一下微信未讀消息、早報(bào)新聞等等等等。到了公司食堂，你看一下周圍有多少人一邊吃東西一遍盯著手機(jī)屏幕？在去工位的路上，又有多少人低頭玩著手機(jī)走路？這還沒完，到了工位上，打開電腦，接收郵件，查看工作事項(xiàng)；打開網(wǎng)站閱讀一些學(xué)習(xí)內(nèi)容；微信突然跳出來一個(gè)紅點(diǎn)，打開網(wǎng)易云音樂挑選一首歌，選著選著看到群聊里一條新鮮軼事，然后騰訊新聞彈出來，忍不住又去點(diǎn)開閱讀下。
沒錯(cuò)，這是我的日常生活，我是一個(gè)選擇恐懼癥患者，但我卻總是忍不住把自己置于一個(gè)同時(shí)處理超多個(gè)事項(xiàng)的情況下。讀這篇文章的你也應(yīng)該一樣。我曾經(jīng)很多次想，這種情況應(yīng)該怪我自己?jiǎn)幔窟€是別的什么問題？
OK，這確實(shí)并不單純是人的問題，還有產(chǎn)品、服務(wù)的問題。注意力是當(dāng)下時(shí)代最為寶貴的資源，而產(chǎn)品一直在爭(zhēng)搶的所謂的時(shí)間，也只是注意力的一部分而已。在信息大爆炸甚至工業(yè)革命之前，人類的大部分歷史中，知識(shí)、信息都是很寶貴的資源，只有很少部分人能夠閱讀，能夠獲取一定的信息。但在信息大爆炸的今天，我們可以輕易獲得大部分我們想了解的或不想了解的信息，只需要?jiǎng)觿?dòng)手指，只需要睜開眼睛。
我們獲得了巨量的信息，但我們的信息處理能力并沒有產(chǎn)生什么變化，是的我們現(xiàn)在處理信息的總量，和幾百年前的人類祖先并沒有什么區(qū)別。因此，幾百年后的今天，信息資源已經(jīng)不是限制因素了，注意力才是，用有限的注意力，去獲取無限的信息，結(jié)果顯而易見。你在瀏覽文章的時(shí)候是沒有辦法看動(dòng)漫的，當(dāng)然你在作圖時(shí)也無法瀏覽新聞。
分心導(dǎo)致低效
到這里，大家應(yīng)該都清楚，人類的注意力有限，我們無法同時(shí)做很多事情，然而很多時(shí)候，我們卻在同時(shí)進(jìn)行很多事情，因?yàn)橐淮涡酝瓿啥鄠€(gè)任務(wù)，對(duì)于我們有著很強(qiáng)的吸引力，然而結(jié)果往往是錯(cuò)誤百出或者是更低的效率。
在《簡(jiǎn)約至上，交互設(shè)計(jì)四策略》中專門提到了分心對(duì)用戶的影響，有時(shí)候，分心不是用戶自發(fā)的，而是來自產(chǎn)品的錯(cuò)誤引導(dǎo)。產(chǎn)品界面中過多干擾元素，或者誘導(dǎo)元素導(dǎo)致用戶經(jīng)常性的轉(zhuǎn)移注意力，這些東西讓原本簡(jiǎn)單的任務(wù)變得異常復(fù)雜。比如閱讀。
如果你經(jīng)常在medium閱讀文章，你會(huì)發(fā)現(xiàn)一類文章讀起來效率很低，且經(jīng)常容易令你分心乃至焦慮。那就是在文內(nèi)插入各種鏈接的文章。每一個(gè)鏈接仿佛都在勾引你，快來看一下吧，這里有好東西，然后讀者就打開了一個(gè)、兩個(gè)乃至四五個(gè)網(wǎng)頁，因此讀一篇文章附送了五篇文章，那么讀者需要把這些附加內(nèi)容瀏覽完畢再重新開始閱讀最初的那篇文章嗎？當(dāng)然有些人會(huì)憑借頑強(qiáng)的毅力（或者根本不感興趣）跳過那些鏈接并閱讀完整篇文章，那你很厲害，但是大部分人都做不到，尤其是設(shè)計(jì)師，因?yàn)槲覀儗?duì)知識(shí)始終保持饑渴。
（寫到這里微信突然彈出來幾條消息，然后youtube推了一個(gè)視頻，最后我又想起來長(zhǎng)安十二時(shí)辰最后一集我并沒有看，再次回來已經(jīng)是十分鐘后了，這還是我強(qiáng)忍住去看視頻和電視劇的結(jié)果）
這些鏈接分明可以放在文章的結(jié)尾，感興趣的人自然會(huì)去擇優(yōu)而讀。除了文內(nèi)鏈接，文章左右兩側(cè)的廣告、彈窗以各種形式挑戰(zhàn)你的注意力，瞥一眼你就會(huì)浪費(fèi)幾秒，沒忍住點(diǎn)進(jìn)去則會(huì)浪費(fèi)更多時(shí)間，是的我是誰我在哪我在干什么？我只是想閱讀一篇文章而已，所以為什么現(xiàn)在逛淘寶。
各種設(shè)備也在不斷地使我們分心，不僅限于屏幕，還包括聽覺觸覺，如手機(jī)的語音提醒、震動(dòng)。持續(xù)的打斷甚至?xí)谷藗兩习a，可能下一個(gè)消息很重要，我必須看一下，于是你又拿起手機(jī)解鎖然后打開微信，你看個(gè)錘子肯定又是騰訊新聞。不停的打斷會(huì)影響我們的正常任務(wù)，可能是學(xué)習(xí)也可能是工作。最終我們可能需要花費(fèi)更多的時(shí)間來完成計(jì)劃事項(xiàng)，且完成的質(zhì)量堪憂。
PS：打游戲應(yīng)該很少分心
在現(xiàn)實(shí)中，人類不會(huì)這樣互相打斷，如果我們想要請(qǐng)求某人幫忙，會(huì)根據(jù)對(duì)方所處的場(chǎng)景狀態(tài)來決定是否打斷對(duì)方，也會(huì)考慮事件的緊急程度。如果事情很重要比如你的手機(jī)在網(wǎng)吧被偷了（重要），而你在玩游戲（沒那么重要），那我們會(huì)選擇打斷對(duì)方。
而機(jī)器的問題在于，它不會(huì)以人的方式思考，我們?cè)O(shè)計(jì)師經(jīng)常提到要以人為中心，但機(jī)器本身只會(huì)執(zhí)行指令，企業(yè)的指令，因此不管信息是否重要，它會(huì)按照設(shè)定推送給你。事實(shí)上，社交應(yīng)用及各種產(chǎn)品都應(yīng)該區(qū)分信息的重要程度，而不是各種信息不分主次不分場(chǎng)景一股腦推送出來。
我們都知道福格模型B=MAT，想要促成結(jié)果需要對(duì)應(yīng)的需求，更確切的說是場(chǎng)景+時(shí)機(jī)+需求。當(dāng)我在公司門口，打開滴滴準(zhǔn)備打車時(shí)自動(dòng)彈出了家的地址，我只需要點(diǎn)擊就能填寫完畢而沒必要重復(fù)輸入，這是一個(gè)很流暢且體驗(yàn)良好的提醒。
而我這樣一個(gè)輕度視頻用戶，偶然打開愛奇藝瞬間收到40多條內(nèi)容推送，要不是因?yàn)殚_了會(huì)員我會(huì)當(dāng)場(chǎng)卸載?。?
分心也是拖延癥的一個(gè)罪魁禍?zhǔn)?，我們拖延的一個(gè)重要原因是注意力被其他事物所吸引，有可能是游戲，有可能是新聞資訊。大部分人都不能按照自己的最初計(jì)劃完美及時(shí)的去完成?？偸且煌显偻?，可能并不是我們想拖延，而是有太多內(nèi)容在吸引我們的注意力。凱利教授的《自控力》中就提到所有人想要擁有自控力，都需要知道我想要、我不想和我要做這三部分內(nèi)容。以便抵制來自生活中的各種吸引力或者說誘惑。
二：注意力經(jīng)濟(jì)的崛起
1997年，Michael H. Goldhaber寫道，“全球經(jīng)濟(jì)正在從物質(zhì)經(jīng)濟(jì)轉(zhuǎn)向基于人類注意力的經(jīng)濟(jì)”。許多服務(wù)都是免費(fèi)提供的，而用戶為服務(wù)需要花費(fèi)的貨幣就是注意力。用戶不用付費(fèi)，只需要支付注意力。
產(chǎn)品爭(zhēng)搶用戶注意力
注意力經(jīng)濟(jì)的最初概念竟然從1997年就被提出，我看到時(shí)相當(dāng)震驚，在二十多年前，企業(yè)就開始低效的使用用戶注意力來變現(xiàn)，國(guó)內(nèi)是什么時(shí)候開始的呢，答案應(yīng)該是從爭(zhēng)搶用戶使用時(shí)長(zhǎng)的競(jìng)爭(zhēng)策略開始，占領(lǐng)用戶時(shí)間就等于占領(lǐng)用戶注意力。
我們已經(jīng)沉溺于爭(zhēng)搶注意力策略這個(gè)泥沼中，從各種花費(fèi)巨量時(shí)間的游戲如王者榮耀，到風(fēng)靡至今的各類直播平臺(tái)，再到時(shí)下流行的短視頻，我們?cè)诓煌５幕ㄙM(fèi)時(shí)間、時(shí)間、時(shí)間，注意力被無意識(shí)的“竊取”。用戶不需要花費(fèi)一分錢也可以正常娛樂，而你的參與，你的注意力的參與卻在幫助企業(yè)不斷掙錢。
如果你還不清楚自己是如何被爭(zhēng)搶乃至竊取注意力的話，你可以回憶一下你每天接收到各種推送信息，除了各類應(yīng)用的Push，還有短信、電話、郵件等等。推送提醒你關(guān)注的主播上線了，提醒你的內(nèi)容新聞，提醒你一切可以誘惑你的信息。購房后銷售人員信誓旦旦說不會(huì)泄露業(yè)主信息，交房前一年就有各種裝修家居的短信和電話轟炸。淘寶購物沒有一周就各種五星好評(píng)的消息請(qǐng)求。這則是另一種層面的竊取用戶注意力了。
如果給你推送的是你想要的內(nèi)容你是應(yīng)該開心呢還是擔(dān)憂呢。因?yàn)槟阌袝r(shí)也會(huì)想，關(guān)于你的信息是不是已經(jīng)被泄露到處都是。當(dāng)然并不都是惡意泄露，隨著技術(shù)進(jìn)步我們有了大數(shù)據(jù)技術(shù)，但精準(zhǔn)推薦雖好，用戶隱私是否也應(yīng)該劃入考慮范圍？
畸形的注意力變現(xiàn)策略
我們?cè)谏厦嫣岬搅舜髷?shù)據(jù)、智能推薦廣告技術(shù)的負(fù)面影響，即侵犯用戶隱私，隨著用戶對(duì)這一技術(shù)的感知越發(fā)明顯，抱怨聲會(huì)接踵而來，企業(yè)不得不考慮傾聽用戶的聲音，將保護(hù)用戶隱私納入考慮范圍，當(dāng)然這應(yīng)當(dāng)是個(gè)可選項(xiàng)，那些有意識(shí)想要擺脫這種隱私暴露問題的用戶，可以選擇關(guān)閉這項(xiàng)技術(shù)在它個(gè)人生活中的應(yīng)用，而并不介意隱私問題的用戶可以繼續(xù)享受智能推薦帶來的便利。
我們雖然一再強(qiáng)調(diào)它導(dǎo)致的隱私問題，但事實(shí)上智能推薦利用現(xiàn)代技術(shù)實(shí)現(xiàn)了精準(zhǔn)投放廣告這一的廣告變現(xiàn)形式，相比其余的商業(yè)模式要委婉的多。
廣告的本意即廣而告之，其目的在于將產(chǎn)品推薦給有需要的用戶，廣告本身是沒有任何貶義的詞匯，但在信息爆炸的當(dāng)下，廣告對(duì)于用戶甚至對(duì)于廣告投放者本身都變成了一個(gè)帶有貶義的詞，產(chǎn)生這種意識(shí)變化的原因就是當(dāng)下廣告的性質(zhì)產(chǎn)生了畸變，廣告已經(jīng)不是一個(gè)雙贏的推薦行為，而是一個(gè)過于干擾用戶的打擾行為。
更多情況下，廣告投放者傾向于用巨量的投放數(shù)量來換取一定比率的轉(zhuǎn)化，這是一種傳統(tǒng)低效的廣告變現(xiàn)手段，當(dāng)然平臺(tái)獲得實(shí)實(shí)在在的收益，建立在展示付費(fèi)模式下的廣告不用考慮最終轉(zhuǎn)化率，只需要無腦投放，這導(dǎo)致了廣告信息的總量產(chǎn)生了巨幅的提升。除此之外，更多廣告是建立在吸引注意力這一誘導(dǎo)行為上，更鮮艷的顏色，夸張的動(dòng)效，讓人血脈噴張的文案，H內(nèi)容擦邊球，不論用戶當(dāng)前在執(zhí)行什么任務(wù)，只要他不是瞎子都會(huì)或多或少被轉(zhuǎn)移注意力乃至引導(dǎo)到廣告詳情頁面。
除此之外，我們還會(huì)利用設(shè)計(jì)思維，預(yù)測(cè)用戶行為，根據(jù)用戶習(xí)慣主動(dòng)將干擾性內(nèi)容放置在用戶的核心路徑，從而產(chǎn)生一些誤操作的假象，比如將關(guān)閉按鈕做的微小，比如將banner無限接近按鈕從而引發(fā)誤操作。結(jié)果就是用戶的任務(wù)中斷，不得不重復(fù)的返回修正操作，這樣持續(xù)性的犯錯(cuò)使用戶困擾且失落，卻不知道這是設(shè)計(jì)人員的策略。吸引用戶注意力的變現(xiàn)策略大多建立在犧牲用戶體驗(yàn)的基礎(chǔ)上，我們都能意識(shí)到這不是一種可持續(xù)發(fā)展的收益模式，它容易侵害用戶價(jià)值，培養(yǎng)低質(zhì)量用戶，且會(huì)衍生一系列其他問題。
目前這種盜竊用戶注意力的變現(xiàn)性質(zhì)主要有以下幾個(gè)方式。
1.引人注目的動(dòng)畫吸引注意力
2.擁擠不堪的界面設(shè)計(jì)，一次性顯示大量信息，期望一定比率的內(nèi)容可以吸引一定數(shù)3量的用戶
3.強(qiáng)迫用戶聚焦的廣告行為，如不可關(guān)閉的視頻
4.網(wǎng)站或應(yīng)用頻繁發(fā)送服務(wù)通知和廣告通知期望用戶重新參與進(jìn)產(chǎn)品
三：注意力爭(zhēng)奪的負(fù)面結(jié)果
低效的廣告效率
還是那個(gè)簡(jiǎn)單的邏輯，用戶的注意力有限，同時(shí)各種產(chǎn)品和服務(wù)的廣告通知鋪天蓋地而來，且數(shù)量不斷增加，不僅引用戶反感，更造成廣告?zhèn)鬟_(dá)效率低下的現(xiàn)狀，無論是PC還是移動(dòng)端，人口紅利已經(jīng)消耗殆盡，用戶自身更是形成抗拒廣告的習(xí)慣，這種情況下，繼續(xù)延續(xù)傳統(tǒng)的粗放型廣告投放收益只會(huì)持續(xù)下降，不同的廣告商盲目的放量，最終造成的結(jié)果是用戶全部忽略。
用戶事實(shí)上都比較懶，能不去做任何行動(dòng)，就會(huì)一直保持原狀。例如郵箱訂閱了幾十家內(nèi)容，每天都會(huì)收到數(shù)十封推廣郵件，用戶或許并不會(huì)因?yàn)閰挓┒c(diǎn)開每封郵件逐一退訂，但他會(huì)直接忽略所有內(nèi)容，不論如何，造成的結(jié)果就是廣告低效乃至無效。與之相反，我們看一個(gè)正面例子，Youtube的廣告模式。Youtube提供一個(gè)五秒的試看期限，超過五秒后用戶可以選擇繼續(xù)看廣告或者直接跳過去瀏覽心儀的內(nèi)容。若是用戶對(duì)廣告感興趣，那他可以接受廣告并轉(zhuǎn)化為對(duì)應(yīng)的消費(fèi)者，廣告投放者和消費(fèi)者是一個(gè)雙贏的狀態(tài)，這樣不僅考慮了企業(yè)利益，更考慮了用戶價(jià)值，尊重用戶的選擇，使內(nèi)容可控。
再來看國(guó)內(nèi)的視頻平臺(tái)，體貼的為大家提供了一個(gè)關(guān)閉聲音的按鈕，我不否認(rèn)這也是一個(gè)提升體驗(yàn)的地方，因?yàn)榇蟛糠钟脩舳紝?duì)長(zhǎng)達(dá)一分鐘的廣告并不感冒，因此經(jīng)常性的操作是關(guān)閉聲音，然后在這一分鐘去做一些其他的事情。這種情況下，廣告的作用并沒有發(fā)揮，而廣告投放者仍然要為之付出對(duì)應(yīng)的費(fèi)用，因?yàn)閺V告確實(shí)被展示了，只是用戶沒有看。從用戶的視角，則是我對(duì)這則廣告（對(duì)應(yīng)的商品）并不感興趣，但我不得不為之浪費(fèi)一分鐘。
當(dāng)然這就是國(guó)內(nèi)產(chǎn)品的現(xiàn)狀，當(dāng)其他人都在使用粗放的競(jìng)爭(zhēng)手段，你就很難與其劃分界限。且企業(yè)往往會(huì)考慮到品牌曝光等策略，考慮長(zhǎng)遠(yuǎn)投入而不是眼下的轉(zhuǎn)化，那就是另一種情況了。
廣告盲現(xiàn)象
廣告盲現(xiàn)象是由廣告現(xiàn)狀培養(yǎng)出來的用戶習(xí)慣，指的是人們會(huì)自動(dòng)忽略一些常用的廣告投放位置的內(nèi)容，自動(dòng)忽略看起來像是廣告的內(nèi)容。這種現(xiàn)象很廣泛和常見，比如百度搜索頂部的前幾條，帶有廣告標(biāo)簽的搜索結(jié)果，用戶一般并不會(huì)去點(diǎn)擊，而是選擇下拉瀏覽其他選項(xiàng)，另外在PC兩側(cè)的信息往往容易被忽略，因?yàn)檫@里也是廣告經(jīng)常投放的位置。
若手機(jī)同時(shí)出現(xiàn)三行以上的推送，用戶往往不會(huì)仔細(xì)閱讀而是直接清空。甚至連最吸引注意力的彈窗廣告也能第一時(shí)間被識(shí)別并關(guān)掉，在彈窗還未加載完畢前。
廣告通常為了爭(zhēng)搶用戶注意力而被刻意做的不一樣，但用戶忍耐力比想象中更好，這個(gè)情況可以參考適應(yīng)性偏見原則，且用戶主動(dòng)屏蔽信息也越來越成為習(xí)慣性行為，尤其是那些看起來花哨、內(nèi)容豐富理應(yīng)很吸引人的banner，正因如此吸引人，用戶能快速分辨并將其定義為廣告然后自動(dòng)忽略，例如我們?cè)诰€閱讀小說是中間插入的banner，往往只會(huì)短暫打斷我們的閱讀進(jìn)程。
與medium的閱讀體驗(yàn)不同，medium的文內(nèi)鏈接更多的是吸引力，用戶能意識(shí)到這些鏈接是更具吸引力的內(nèi)容，且是正向的有益的（往往屬于知識(shí)性質(zhì)的優(yōu)質(zhì)內(nèi)容），而我們?cè)诰€閱讀小說中插入的廣告則會(huì)使用戶形成誤解——推銷類廣告，沒有任何意義。因此用戶會(huì)立即忽略。我們都了解一個(gè)詞即耐受性，事實(shí)上用戶往往比他自己了解的更加能夠忍受一些東西。雖然從商業(yè)角度考慮，各種產(chǎn)品服務(wù)都在爭(zhēng)搶用戶注意力，從而不斷的打斷用戶的工作、思考、學(xué)習(xí)，但人們已經(jīng)逐漸掌握了一定竅門，來主動(dòng)屏蔽一些無益的廣告內(nèi)容，乃至形成廣告盲的行為習(xí)慣。
針對(duì)這種情況了，設(shè)計(jì)人員和廣告投放者應(yīng)該怎么辦呢？你可以選擇加大投放數(shù)量，這種做法必然會(huì)很快見效，但不是長(zhǎng)遠(yuǎn)之計(jì)，更佳的方案是考慮用戶場(chǎng)景、習(xí)慣，通過洞察用戶來提高廣告投放的效率質(zhì)量，智能推薦是一種做法，針對(duì)自家產(chǎn)品制定個(gè)性化方案也是一種方法，創(chuàng)意推動(dòng)廣告自傳播也是一種手法，總之，傳統(tǒng)買量放量的投放方式應(yīng)該重新被考慮，如何雙贏來回歸用戶價(jià)值是每個(gè)企業(yè)應(yīng)該認(rèn)真考慮的問題。
我把企業(yè)圍繞注意力經(jīng)濟(jì)不斷爭(zhēng)搶用戶注意力的現(xiàn)象定義為一場(chǎng)戰(zhàn)爭(zhēng)，企業(yè)與企業(yè)，企業(yè)與用戶都被編織在這張羅網(wǎng)中。在這場(chǎng)戰(zhàn)爭(zhēng)中用戶是一個(gè)什么狀態(tài)，我的回答是被掌控、被投入以及被摧毀。
四：被控制的用戶
產(chǎn)品掌控用戶而不是用戶掌控產(chǎn)品
這個(gè)時(shí)代，人仿佛是手機(jī)的奴隸。新技術(shù)的發(fā)展往往會(huì)給一批人帶來恐懼，因?yàn)樗匆馕吨叩男?，更方便的生活，也意味著過去的消逝甚至迷失。從工業(yè)化在到信息化，變化一直在發(fā)生，我們迎接新生事物的同時(shí)也迎接來一批同樣數(shù)量的問題。
我們實(shí)際上并沒有被手機(jī)掌控，而是被手機(jī)里的一系列產(chǎn)品所掌控。當(dāng)然，你不會(huì)被微信閱讀這樣的產(chǎn)品掌控，大部分人都不會(huì)閱讀成癮。但與之對(duì)應(yīng)的，社交成癮、游戲成癮、八卦成癮等現(xiàn)象卻屢見不鮮。我們生活在大文娛時(shí)代，來自各方面的欲望、誘惑在不斷地吸引注意力，不斷的打斷正常的任務(wù)目標(biāo)。我們內(nèi)心深處想要學(xué)習(xí)練習(xí)，想要更好的成績(jī)，想要更好的工作，但這些從社會(huì)價(jià)值和個(gè)人價(jià)值角度更加正向的目標(biāo)卻往往被各種娛樂向產(chǎn)品打斷，且往往過度沉溺，因?yàn)楹苌儆挟a(chǎn)品會(huì)提醒你已經(jīng)花了多少時(shí)間，他們只想占領(lǐng)你所有的注意力，然后把注意力貨幣轉(zhuǎn)化為自己的收益。
“慣性”導(dǎo)致的持續(xù)投入
關(guān)于用戶持續(xù)投入進(jìn)一個(gè)產(chǎn)品，而忽略時(shí)間、精力的現(xiàn)象，在當(dāng)下已經(jīng)是常態(tài)。我們都知道沉沒成本和雞蛋理論。但我認(rèn)為這兩個(gè)概念還不夠，因此我引入了一個(gè)慣性的概念，同滾雪球效應(yīng)異曲同工。持續(xù)投入產(chǎn)生慣性，最終導(dǎo)致難以逃離，與之對(duì)應(yīng)的用戶行為就是頻繁的卸載又安裝游戲，以及成癮性的過度使用某個(gè)產(chǎn)品，好吧說到這大家都能猜到是什么游戲什么產(chǎn)品。事實(shí)上我沒有針對(duì)性，而是講的一個(gè)更普遍的現(xiàn)象。
慣性投入導(dǎo)致的沉迷產(chǎn)品我們?nèi)绾味x的，為何強(qiáng)調(diào)沉迷現(xiàn)象？因?yàn)槌撩栽斐傻慕Y(jié)果是用戶時(shí)間和精力的消耗，從社會(huì)價(jià)值考慮過度娛樂而消耗時(shí)間是不被認(rèn)可的行為。設(shè)計(jì)師經(jīng)?？紤]體驗(yàn)層，考慮商業(yè)價(jià)值，但的確很少考慮到用戶價(jià)值，及與之對(duì)應(yīng)的社會(huì)價(jià)值的實(shí)現(xiàn)。這里面一個(gè)重要因素就是時(shí)間，我之前分享的《用戶體驗(yàn)設(shè)計(jì)基礎(chǔ)》中提到的一套交互設(shè)計(jì)理論中，就把時(shí)間納入考慮范圍，事實(shí)上這是貫穿用戶使用流程中的一個(gè)關(guān)鍵因素，但我們的確很少考慮到，不僅僅是完成任務(wù)的時(shí)間，更有使用產(chǎn)品的總時(shí)長(zhǎng)，及會(huì)衍生的一系列問題。
我們也曾體驗(yàn)過一些尊重用戶時(shí)間的產(chǎn)品，如閱讀超過2個(gè)小時(shí)會(huì)提醒用戶進(jìn)行休息，同時(shí)在沉浸式體驗(yàn)的界面設(shè)計(jì)中仍然保留時(shí)間的展示。
所以現(xiàn)在，體驗(yàn)已經(jīng)不僅限于交互、任務(wù)完成率、可用性易用性這些基礎(chǔ)內(nèi)容，體驗(yàn)還涉及到用戶價(jià)值，尊重用戶，你更可能會(huì)獲得用戶的尊重。
越來越多的自控力挑戰(zhàn)
自控力挑戰(zhàn)來自兩方面，一方面是用戶自身，即用戶自我控制能力，另一方面則來源于挑戰(zhàn)，即海量的信息對(duì)注意力的爭(zhēng)搶乃至盜竊。當(dāng)然這些挑戰(zhàn)不局限于好壞某個(gè)方面。因?yàn)槲覀兗瓤赡鼙挥螒虻葕蕵讽?xiàng)目吸引，也有可能被學(xué)習(xí)內(nèi)容吸引，更有可能被同時(shí)完成多個(gè)任務(wù)的期望所吸引。
個(gè)人的自我控制能力是天生的，但可以通過后期鍛煉來進(jìn)一步提升。問題在于生活中的誘惑，吸引力的來源變多了，用戶沉迷于各種產(chǎn)品真的應(yīng)當(dāng)歸咎于用戶自身嗎？這個(gè)問題就像是美國(guó)核事故操作失誤應(yīng)該完全歸咎于操作人員一樣可笑，畢竟控制開關(guān)的設(shè)計(jì)本身存在更多問題。外在信息的干擾的確在成倍的增加，網(wǎng)絡(luò)小說、游戲、短視頻不斷增加的自控力挑戰(zhàn)都是罪魁禍?zhǔn)?。你期望七八歲的小孩子能有多強(qiáng)大的自控力呢？同理，青年群體就應(yīng)該有很強(qiáng)大的自控力嗎？（成年人很多都沒有如此強(qiáng)大的自控力可以面對(duì)社會(huì)上的各種吸引力）。
我們還經(jīng)常陷入低效學(xué)習(xí)怪圈，以一個(gè)過于分心的狀態(tài)去學(xué)習(xí)知識(shí)。比如同時(shí)收藏了UX體驗(yàn)書籍課程、插畫設(shè)計(jì)課程、動(dòng)效設(shè)計(jì)、C4D等等在學(xué)習(xí)UX時(shí)忍不住想到插畫，學(xué)習(xí)插畫時(shí)又想到C4D，無法掌握自控力的結(jié)果就是分心產(chǎn)生同時(shí)完成多個(gè)任務(wù)的欲望，最終結(jié)果就是注意分散導(dǎo)致的低效率學(xué)習(xí)，投入與產(chǎn)出完全不成正比。
五：設(shè)計(jì)師如何參與到這場(chǎng)戰(zhàn)爭(zhēng)
事實(shí)上我們已經(jīng)參與到了這場(chǎng)戰(zhàn)爭(zhēng)中，當(dāng)作為設(shè)計(jì)支持人員為商業(yè)目標(biāo)而進(jìn)行設(shè)計(jì)時(shí)，我們已經(jīng)在爭(zhēng)搶用戶注意力。雖然存在用戶注意力被過度經(jīng)濟(jì)化的問題，但這是行業(yè)現(xiàn)狀，也不是個(gè)人能夠解決的，它已經(jīng)上升到wicked problem的層面。那么作為企業(yè)一份子的我們必然需要了解如何爭(zhēng)搶用戶注意力，這和企業(yè)盈利掛鉤。這也是目前大部分設(shè)計(jì)師都正在做的事情。另一方面我們應(yīng)該利用設(shè)計(jì)思維探索其他可能，即“戒癮”的可能性。兼顧商業(yè)價(jià)值和體驗(yàn)，最終在保證收益的情況下避免過度爭(zhēng)搶用戶注意力。
打造上癮產(chǎn)品
提到打造成癮的產(chǎn)品，最為人熟知的就是上癮模型，觸發(fā)——行動(dòng)——多變的酬勞——投入。不同于工具類產(chǎn)品，成癮產(chǎn)品大部分發(fā)生在killtime的產(chǎn)品類型中。如游戲、短視頻、直播、新社交產(chǎn)品等。上癮模式最早來源于游戲設(shè)計(jì)，后來逐漸被應(yīng)用于其他產(chǎn)品設(shè)計(jì)中。簡(jiǎn)單來說，設(shè)計(jì)師需要了解幾個(gè)核心元素，動(dòng)機(jī)、行為、觸點(diǎn)，洞察用戶需求與動(dòng)機(jī)，創(chuàng)造對(duì)應(yīng)的觸發(fā)器，然后使用戶按照預(yù)期的方案進(jìn)行交互，最終將商業(yè)目標(biāo)轉(zhuǎn)化為用戶行為。常見的用法如游戲中的排行榜，利用攀比心理引導(dǎo)用戶付費(fèi)。再如積分商城，利用持續(xù)的投入減少用戶流失的比例，從而創(chuàng)造更多變現(xiàn)機(jī)會(huì)。
打造上癮產(chǎn)品關(guān)鍵點(diǎn)在于對(duì)用戶心理的把握，這需要一定的敏感度，以及對(duì)應(yīng)的心理學(xué)知識(shí)如沉沒成本、金發(fā)姑娘效應(yīng)等。同時(shí)也需要對(duì)應(yīng)的方法來幫助梳理可能的痛點(diǎn)機(jī)會(huì)點(diǎn)。較常用的是用戶體驗(yàn)地圖，我們通常用它來發(fā)掘體驗(yàn)向的問題，但事實(shí)上作為梳理用戶體驗(yàn)流程和對(duì)應(yīng)情緒節(jié)點(diǎn)的方法可以適用很多場(chǎng)景，比如上癮點(diǎn)的挖掘。
關(guān)于用戶體驗(yàn)地圖（也叫用戶旅程圖）可以查閱梓暄的這篇文章https://mp.weixin.qq.com/s/SgQUbAhtjadrUqQS9SMI-A。
我接下來提供另一個(gè)方法用來梳理用戶與各種設(shè)計(jì)元素的關(guān)系。這是一種幫助我們系統(tǒng)思考的方法，具體分為五個(gè)步驟。
1.將信息分解為節(jié)點(diǎn)（信息塊 如對(duì)象、概念）和鏈接（節(jié)點(diǎn)之間的鏈接和關(guān)系）
2.可視化信息（草繪或?qū)⑺鼈償[在現(xiàn)實(shí)中，黑板上桌子上等等）
幫助了理解信息及關(guān)系。
3.與他人協(xié)作，包括利益相關(guān)者。分享你的思維模式可以幫助其他人在你的想法上繼續(xù)思考，反之亦然。創(chuàng)建物理圖和分組注釋以生成不同的系統(tǒng)模型，允許團(tuán)隊(duì)綜合多個(gè)觀點(diǎn)。
4.快速發(fā)布解決方案以持續(xù)收集反饋，反饋有助于解決我們沒有找到正確答案的問題，收集的反饋越多，下一步中有效指導(dǎo)信息就越多。
5.迭代，每次迭代都能利用反饋來解決一些新的問題，從而最終解決整個(gè)棘手的問題。
能打造出一款真正讓用戶上癮的產(chǎn)品固然很重要，但像我強(qiáng)調(diào)過好多遍的那樣，我們應(yīng)當(dāng)考慮用戶價(jià)值，考慮衍生問題。如果一定要爭(zhēng)搶用戶注意力，也請(qǐng)遵循一個(gè)總的設(shè)計(jì)原則，即下面要提到的總的設(shè)計(jì)價(jià)值，由Cyd Harrell提出，且Cyd Harrell一直致力于此。
總的設(shè)計(jì)價(jià)值
我們所服務(wù)的互聯(lián)網(wǎng)企業(yè)不斷爭(zhēng)搶用戶注意力，都期望用戶停留更多時(shí)間為企業(yè)創(chuàng)造更多價(jià)值，但卻忽略了尊重用戶的時(shí)間、尊嚴(yán)、和能力?！狢yd Harrell
這是我很贊同的一個(gè)總的設(shè)計(jì)原則，即尊重用戶的時(shí)間尊嚴(yán)和能力。如果問你，有沒有一個(gè)全世界通用的大家都認(rèn)可的設(shè)計(jì)價(jià)值？ 我想那就是尊重用戶。
很多時(shí)候，我們?cè)O(shè)計(jì)師都無意識(shí)的參與到了爭(zhēng)搶用戶注意力的戰(zhàn)爭(zhēng)中，從近些年的設(shè)計(jì)主題由視覺到體驗(yàn)再到商業(yè)，我們可以看出其實(shí)設(shè)計(jì)師仍然處于純粹的為企業(yè)服務(wù)的狀態(tài)，互聯(lián)網(wǎng)設(shè)計(jì)圍繞著企業(yè)機(jī)器運(yùn)轉(zhuǎn)，忽略用戶價(jià)值，忽略用戶注意力承載度，最終導(dǎo)致了廣告盲及各種成癮現(xiàn)象。從社會(huì)價(jià)值角度講，用戶應(yīng)該把更多時(shí)間投入到工作學(xué)習(xí)與生活中，而不是在無意義的各種推廣和獵奇信息中沉溺迷失。
借用Cyd Harrell的話，如果不能夠讓一些企業(yè)采取這樣的價(jià)值觀，并將它們運(yùn)用在產(chǎn)品中，僅在我們?cè)O(shè)計(jì)領(lǐng)域傳播這種價(jià)值觀是沒有任何意義的。但相信有很多體驗(yàn)設(shè)計(jì)領(lǐng)域的設(shè)計(jì)師都在努力幫助企業(yè)做出正確的選擇，去尊重用戶價(jià)值。很高興的是從王者榮耀的防沉迷策略，到抖音的青年保護(hù)計(jì)劃，我們能看到一些企業(yè)對(duì)于這些產(chǎn)品衍生問題進(jìn)行方案探索。
無論是沉迷問題，還是低效率問題都是以用戶注意力為核心的一個(gè)wicked problem，它沒有清晰的解決方案，且會(huì)持續(xù)很久，我們無法知道哪種解決方案是最終方案，只有更好的方案和差一些的方案，這也是wicked problem的 一大特性。讀到這文章也要結(jié)束了，我無法提供一個(gè)注意力問題的解決方案，因?yàn)樗w的領(lǐng)域，相關(guān)的利益者實(shí)在太龐雜，不是簡(jiǎn)單的處理某個(gè)節(jié)點(diǎn)的問題就能夠解決的。寫這篇文章的目的更多的是讓大家了解到我們目前介入及面臨的一個(gè)現(xiàn)實(shí)存在的問題——注意力問題。同時(shí)希望大家能開始意識(shí)到尊重用戶這一設(shè)計(jì)原則的重要性，尊重用戶，尊重用戶的時(shí)間和尊嚴(yán)，這句話對(duì)我感觸很大，希望也能觸發(fā)你對(duì)于設(shè)計(jì)的另一種認(rèn)識(shí).
最后，我們可能不知道答案是什么，但我們知道我們必須不停的探索。
轉(zhuǎn)自-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 基礎(chǔ)一
https://blog.csdn.net/jb_7113/article/details/89948215 基礎(chǔ)二
————————————————
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
動(dòng)效在用戶界面中的應(yīng)用是當(dāng)今引起人們高度關(guān)注和爭(zhēng)論的話題。雖然有很多人覺得動(dòng)效是一個(gè)不必要的功能，他會(huì)使用戶界面過載并使其變得更加復(fù)雜，但大多數(shù)用戶都認(rèn)為動(dòng)效是交互體驗(yàn)不可或缺的一部分。設(shè)計(jì)人員和開發(fā)人員研究了越來越復(fù)雜的方法，使動(dòng)畫看起來令人愉快，并且能夠解決現(xiàn)代應(yīng)用程序和網(wǎng)站的問題。
為什么用戶如此熱愛動(dòng)效？大多數(shù)情況下，因?yàn)閯?dòng)效支持實(shí)際和真實(shí)交互的本質(zhì)，它創(chuàng)造了與人們?cè)诂F(xiàn)實(shí)生活中物理對(duì)象交互時(shí)所具有的感受和感知水平。這種感覺可以提高用戶的積極性，因?yàn)橛脩舾杏X越自然，處理應(yīng)用程序或網(wǎng)站所需的精力就越少，工作方式也就越清晰。讓用戶滿意，沒有任何秘密，滿足和愉悅是鼓勵(lì)人們?cè)俅问褂迷摦a(chǎn)品的最重要的事情。
就像界面中的所有內(nèi)容以及與之交互的過程一樣，動(dòng)效必須是一個(gè)功能元素，而不僅僅是裝飾。在規(guī)劃圍繞數(shù)字產(chǎn)品的用戶旅程時(shí)考慮運(yùn)動(dòng)元素，設(shè)計(jì)師應(yīng)該在決定將其應(yīng)用于布局或過渡之前，深入分析其提高產(chǎn)品的可用性，實(shí)用性和可取性的潛力。用戶界面中的動(dòng)效需要經(jīng)過深思熟慮的思考，并且始終需要有一個(gè)明確的目標(biāo)。在交互過程中使用它的優(yōu)點(diǎn)和實(shí)用性必須是顯而易見的并且要大于可能存在的缺點(diǎn)。動(dòng)效應(yīng)該成為錦上添花，而不是美中不足。
定義問題
使用動(dòng)效不僅具有吸引力，也是揭示可能存在問題的最佳方法之一。它可以在設(shè)計(jì)過程的任何一個(gè)階段進(jìn)行：
用戶調(diào)查會(huì)讓你知道目標(biāo)用戶是誰，他們的年齡，偏好，技術(shù)水平，使用產(chǎn)品的環(huán)境和條件，以及來自用戶方面的許多其他因素會(huì)影響用戶體驗(yàn);
營(yíng)銷研究將洞察現(xiàn)有產(chǎn)品的強(qiáng)弱面，形成用戶忠誠(chéng)度的方法，這是界定USP解決特定用戶問題的良好依據(jù)，也是產(chǎn)品呈現(xiàn)和表現(xiàn)原始方式的良好基礎(chǔ);
UX線框圖階段可以考慮交互，布局和轉(zhuǎn)場(chǎng)的邏輯，并得到可以通過動(dòng)效增強(qiáng)目的的第一個(gè)假設(shè);
原型設(shè)計(jì)階段將揭示與屏幕實(shí)時(shí)交互的新方式；
UI設(shè)計(jì)階段將為產(chǎn)品方案和系統(tǒng)提供復(fù)雜的視覺展示，為應(yīng)用程序或網(wǎng)站應(yīng)用動(dòng)效提供新的視角；
用戶測(cè)試將揭示動(dòng)效元素的方案是否正確，它們的好處是否真的大于可能存在的缺點(diǎn)。
在每個(gè)階段，如果設(shè)計(jì)師設(shè)定的目標(biāo)是揭示用戶可能遇到的大或小問題，那么動(dòng)效以及任何其他設(shè)計(jì)元素都可以扮演問題解決者的角色。
讓我們回顧一下可以通過界面動(dòng)效解決的一些典型問題。
問題：我想知道行動(dòng)已經(jīng)完成
這是可以通過在UI中應(yīng)用動(dòng)效細(xì)節(jié)輕松快速解決的問題之一。通過清晰的運(yùn)動(dòng)并結(jié)合微交互，為用戶創(chuàng)建快速反饋，使得導(dǎo)航變得簡(jiǎn)單直觀，同時(shí)也變得更加。動(dòng)效按鈕、切換鍵、切換開關(guān)和其他交互元素在幾秒鐘內(nèi)通知用戶，激活快速視覺感知的所有潛力。
開關(guān)控制動(dòng)畫
漢堡菜單動(dòng)畫
漢堡按鈕互動(dòng)
標(biāo)簽欄交互
添加按鈕交互
橡膠指示器
問題：我想知道行動(dòng)正在進(jìn)行中
當(dāng)用戶與數(shù)字產(chǎn)品交互時(shí)，他們想知道每一步都發(fā)生了什么。讓用戶等待將會(huì)導(dǎo)致用戶流失。但是，當(dāng)用戶得到反饋時(shí)，等待就不會(huì)那么煩人了。所以，這方面應(yīng)該在設(shè)計(jì)中著重考慮，通過界面動(dòng)效來減少等待感有很多種方法。這是“拉動(dòng)-刷新”發(fā)揮作用最大效果的最佳時(shí)機(jī)。
拉動(dòng)刷新
預(yù)載
拉動(dòng)刷新
拉下 - 沙漏
拉下 - 太空船
問題：我看不到進(jìn)展，也不明白需要多長(zhǎng)時(shí)間
通常僅僅讓用戶知道該過程正在進(jìn)行是不夠的。他們想要的還有很多：看看進(jìn)展的速度和所需要的時(shí)間。此時(shí)，界面動(dòng)效就是一個(gè)很好的幫手。加載條和進(jìn)度條，動(dòng)效時(shí)間軸和其他動(dòng)態(tài)元素等等，都可以一石二鳥：
1、它們能夠讓用戶明確當(dāng)前進(jìn)度狀態(tài)
2、它們可以成為消除互動(dòng)過程中等待的負(fù)面情緒的一種娛樂元素
3、它們可以成為一個(gè)病毒性的功能，用戶希望與其他人分享，并吸引更多的用戶來使用產(chǎn)品
時(shí)間線應(yīng)用程序的GIF
動(dòng)態(tài)滾動(dòng)的GIF
問題：我不想讓我的屏幕弄得一團(tuán)糟
在界面設(shè)計(jì)中考慮這一點(diǎn)至關(guān)重要。如果屏幕或頁面的信息看起來亂七八糟，這些信息沒有經(jīng)過明確的梳理編組，那么用戶需要付出額外的努力來了解它的工作原理以及可以找到所需信息的位置。
在絕大多數(shù)情況下，用戶希望擁有能夠簡(jiǎn)化和改善他們生活的應(yīng)用程序和網(wǎng)站，甚至可能會(huì)為他們做一些工作，而不是在交互上花費(fèi)更多的精力和時(shí)間。動(dòng)效在增強(qiáng)與各種數(shù)據(jù)模塊和部分交互方面是一種很好的方法，即使是在高度數(shù)據(jù)飽和和復(fù)雜的界面中，也能夠使所有內(nèi)容清晰明了。
問題：我想先看看關(guān)鍵的事情
視覺層次和清晰的導(dǎo)航一直是設(shè)計(jì)人員創(chuàng)造交互式數(shù)字產(chǎn)品的一大關(guān)注點(diǎn)。用戶應(yīng)根據(jù)其目標(biāo)和條件，立即關(guān)注交互的關(guān)鍵要素。界面中的動(dòng)效元素為這方面提供了強(qiáng)大的支持力，使布局中重要元素的視覺標(biāo)記更快、更清晰。
問題：我想要感受自然的互動(dòng)
這是大多數(shù)用戶無法形容的問題，但對(duì)用戶體驗(yàn)有著很大的影響。如果用戶說“我不確定出了什么問題，但肯定有問題”，試著考慮讓動(dòng)效更加自然。界面中的動(dòng)效可以創(chuàng)造出令人愉快的錯(cuò)覺，接近與物理對(duì)象的自然交互，這通常不需要太多的認(rèn)知過程。例如，如果拉動(dòng)物體，按下它，移出標(biāo)簽，動(dòng)作應(yīng)該感覺自然。用戶無法看到設(shè)計(jì)師完成這項(xiàng)復(fù)雜工作的難度，他們會(huì)認(rèn)為這是理所當(dāng)然的，而讓他們感到舒適的事實(shí)，將是對(duì)設(shè)計(jì)解決方案的最大贊譽(yù)。
這種問題同樣存在與WEB界面中。在滾動(dòng)網(wǎng)頁時(shí)，布局元素的平滑移動(dòng)可以顯著增強(qiáng)用戶體驗(yàn)，并且創(chuàng)建一個(gè)整體流暢交互的感覺，而不是幾個(gè)單獨(dú)的頁面?？傊?，這是令人愉快并且有吸引力的，這些情緒是留住用戶的一個(gè)很好的因素。
問題：屏幕/頁面很無聊
在談?wù)摻缑鏁r(shí)，人們常常把功能性和可用性作為關(guān)鍵或者有時(shí)甚至是唯一需要考慮的因素前置到前面。這是正確的，也是合乎邏輯的，但是不能否定這樣一個(gè)事實(shí)，那就是人們不僅僅受邏輯驅(qū)動(dòng)。情感和審美滿意度等因素對(duì)用戶體驗(yàn)的影響也很大。一方面，實(shí)用性和可用性與情感和美學(xué)之間的巧妙平衡可以給用戶帶來友好的產(chǎn)品。動(dòng)效在界面設(shè)計(jì)上是一個(gè)很好的助推器。它可以勾勒出色彩和漸變的美，將生活氣息融入到布局中，使運(yùn)動(dòng)充滿活力，反之亦然，通過運(yùn)動(dòng)和原始過渡增強(qiáng)用戶界面元素的力量。
因此，毫無疑問，用戶界面中的動(dòng)效在解決各種交互問題方面具有巨大的潛力。盡管如此，即使是添加到UI中的最細(xì)微的動(dòng)作也需要經(jīng)過深思熟慮的考慮，不僅要分析優(yōu)點(diǎn)，還分析可能存在的缺點(diǎn)。動(dòng)效應(yīng)該幫助用戶，這是它在界面中的主要目標(biāo)。
轉(zhuǎn)自-ui
還在頻繁地使用彈窗對(duì)用戶展示重要提示嗎？明知這樣有損體驗(yàn)卻沒有更好的選擇嗎？那么不妨來試試干擾度更低，卻依然可以用于重要提示的 Sheet 控件吧。
Sheets 控件并非彈窗，通常會(huì)被熟稱為「浮層」或「浮窗」。
該控件在 iOS 和 Android 系統(tǒng)規(guī)范中都有相關(guān)定義，屬于多才多藝的控件，可以用于給予信息提示，也可用于展示更多的拓展信息。
從用于提示的角度來看，Sheets 控件和 Dialogs 控件的相同點(diǎn)和不同點(diǎn)在哪里呢？
模態(tài)化
二者都可以設(shè)置模態(tài)，當(dāng)模態(tài)控件顯示時(shí)，頁面背景會(huì)顯示深色遮罩，并立即打斷用戶當(dāng)前操作。
承載操作和信息
二者都可以承載豐富的操作和信息，支持嵌入列表、選擇器等控件及圖片、文本信息。
觸發(fā)方式不同
Dialog 可以不通過用戶操作而自動(dòng)觸發(fā)，Sheet 必須通過用戶操作才可以觸發(fā)顯示，因此用戶對(duì) Sheet 的顯示會(huì)更有預(yù)期。
關(guān)閉方式不同
Dialog 的關(guān)閉方式較少，通常會(huì)要求用戶進(jìn)行選項(xiàng)操作后才可關(guān)閉；Sheet 的關(guān)閉方式較多，對(duì)于用戶而言有更豐富的選擇權(quán)。
因此綜上所述，我們可以發(fā)現(xiàn)，Sheet 對(duì)比 Dialog 的優(yōu)勢(shì)在于，它的顯示會(huì)更符合用戶的預(yù)期，它的干擾層度也會(huì)低于Dialog（因?yàn)楦钻P(guān)閉）。
下面就由我來依次詳解其特性和玩法吧。
專屬于 Android 的 Sheets 控件。
用于補(bǔ)充內(nèi)容相關(guān)的更多信息（非模態(tài)）、提供可交互的菜單或?qū)υ挘B(tài)）或其它關(guān)鍵功能/任務(wù)的拓展。
菜單樣式
可嵌套 Menus，展示多個(gè)選項(xiàng)內(nèi)容。
宮格樣式
可使用宮格布局，展示多個(gè)選項(xiàng)內(nèi)容。
迷你樣式（非模態(tài)）
一個(gè)非模態(tài)底部浮窗可被設(shè)置固定展示在頁面底部，用戶可以隨時(shí)用它來對(duì)其它功能/任務(wù)進(jìn)行快捷操作，如進(jìn)入購物車、查看所選圖片、查看聊天和查看剛才的視頻等。
非模態(tài)浮窗：如左下圖所示，非模態(tài)浮窗與內(nèi)容保持在同一層級(jí)，用戶可同時(shí)對(duì)內(nèi)容和浮窗進(jìn)行操作。
模態(tài)浮窗：如右下圖所示，模態(tài)浮窗層級(jí)高于內(nèi)容，背景深色顯示遮罩，用戶僅能對(duì)浮窗進(jìn)行操作。
顯示
浮窗顯示時(shí)從底部向上滑入，非模態(tài)浮窗顯示時(shí)不會(huì)打斷用戶操作，模態(tài)浮窗顯示時(shí)會(huì)顯示深色遮罩以打斷用戶操作。
消失
浮窗消失時(shí)會(huì)向底部滑出。
模態(tài)浮窗在以下情況下會(huì)消失：
非模態(tài)浮窗在以下情況下會(huì)消失：用戶選中浮窗上的對(duì)應(yīng)按鈕（自定義）。
當(dāng)浮窗底部仍有未顯示的內(nèi)容時(shí)，可設(shè)置通過滑動(dòng)或拖動(dòng)浮窗來使其變?yōu)槿琳故荆⒃陧敳匡@示 Toolbar 來展示關(guān)閉/收起操作。
模態(tài)浮窗中可以展示其它應(yīng)用的深層鏈接內(nèi)容或操作，譬如調(diào)用 Google 翻譯。
抖音的評(píng)論功能使用的是模態(tài) Bottom sheet；百度地圖的路線切換功能使用的是非模態(tài) Bottom sheet。
專屬于 Android 的 Sheets 控件。
用于補(bǔ)充內(nèi)容相關(guān)的更多信息（非模態(tài)）或提供可交互的列表信息（模態(tài)）。
菜單樣式：可嵌套 Menus，展示多個(gè)選項(xiàng)內(nèi)容。
宮格樣式：可使用宮格布局，展示多個(gè)選項(xiàng)內(nèi)容。
如左下圖所示，非模態(tài)浮窗與內(nèi)容保持在同一層級(jí)，用戶可同時(shí)對(duì)內(nèi)容和浮窗進(jìn)行操作（在移動(dòng)端較少使用，通常用于 PC 端）。
如右下圖所示，模態(tài)浮窗層級(jí)高于內(nèi)容，背景深色顯示遮罩，用戶僅能對(duì)浮窗進(jìn)行操作。
顯示
浮窗顯示時(shí)從左/右邊緣滑入，非模態(tài)浮窗顯示時(shí)不會(huì)打斷用戶操作，模態(tài)浮窗顯示時(shí)會(huì)顯示深色遮罩以打斷用戶操作。
消失
浮窗消失時(shí)會(huì)向左/右邊緣滑出。
模態(tài)浮窗在以下情況下會(huì)消失：
非模態(tài)浮窗在以下情況下會(huì)消失：用戶選中浮窗上的對(duì)應(yīng)按鈕（自定義）。
支持上下滑動(dòng)，不支持左右滑動(dòng)。
淘寶的篩選功能使用的是 Side sheet。
專屬于 iOS 的 Sheets 控件。
用于呈現(xiàn)一組與當(dāng)前操作相關(guān)的選項(xiàng)，如啟動(dòng)某個(gè)任務(wù)，或者確認(rèn)是否開始執(zhí)行某個(gè)可能具有破壞性的操作。
在 Android 中不建議使用 Action sheet，建議使用原生的 Bottom sheet 或 Simple dialog。
如下所示，支持單個(gè)或多個(gè)操作的展示，以及說明文案的展示：
顯示
浮窗顯示時(shí)從底部向上滑入，會(huì)顯示深色遮罩以打斷用戶操作。
消失
浮窗消失時(shí)會(huì)向底部滑出。會(huì)在以下情況消失：
豎屏?xí)r顯示在頁面底部，橫屏是居中顯示在頁面底部。
微信的選擇朋友圈發(fā)布類型及清除聊天記錄的二次確認(rèn)，都是使用的 Action sheet。
專屬于 iOS 的 Sheets 控件。
用于呈現(xiàn)一組與當(dāng)前操作相關(guān)的選項(xiàng)表，如復(fù)制、收藏或分享。
在 Android 中不建議使用 Activity views，建議使用原生的 Bottom sheet。
列表樣式
宮格樣式
混合樣式
顯示
浮窗顯示時(shí)從底部向上滑入，會(huì)顯示深色遮罩以打斷用戶操作。
消失
浮窗消失時(shí)會(huì)向底部滑出。會(huì)在以下情況消失：
豎屏?xí)r顯示在頁面底部，橫屏是居中顯示在頁面底部。
當(dāng)面板底部仍有未顯示的內(nèi)容時(shí)，可設(shè)置通過滑動(dòng)或拖動(dòng)面板來使其高度進(jìn)行延伸，從而展示更多信息。
愛奇藝的分享功能和泡泡圈選擇發(fā)布內(nèi)容類型，都使用的是 Activity view。
建議針對(duì)非系統(tǒng)級(jí)或業(yè)務(wù)級(jí)的重要提示，使用 Sheets 控件進(jìn)行提示；Dialogs 控件僅用于最重要的信息提示才算是「好鋼用在了刀刃上」。
另外在調(diào)用原生 Sheets 組件時(shí)，記得分端的差異性。
文章來源：優(yōu)設(shè)網(wǎng)
概述
Vue 2.x 及以前的高階組件的組織形式或多或少都會(huì)面臨一些問題，特別是在需要處理重復(fù)邏輯的項(xiàng)目中，一旦開發(fā)者組織項(xiàng)目結(jié)構(gòu)組織得不好，組件代碼極有可能被人詬病為“膠水代碼”。而在 Vue 2.x 及之前的版本，解決此類問題的辦法大致是下面的方案：
mixin
函數(shù)式組件
slots
筆者維護(hù)的項(xiàng)目也需要處理大量復(fù)用邏輯，在這之前，筆者一直嘗試使用mixin的方式來實(shí)現(xiàn)組件的復(fù)用。有些問題也一直會(huì)對(duì)開發(fā)者和維護(hù)者造成困惑，如一個(gè)組件同時(shí)mixin多個(gè)組件，很難分清對(duì)應(yīng)的屬性或方法寫在哪個(gè)mixin里。其次，mixin的命名空間沖突也可能造成問題。難以保證不同的mixin不用到同一個(gè)屬性名。為此，官方團(tuán)隊(duì)提出函數(shù)式寫法的意見征求稿，也就是RFC：Function-based component API。使用函數(shù)式的寫法，可以做到更靈活地復(fù)用組件，開發(fā)者在組織高階組件時(shí)，不必在組件組織上考慮復(fù)用，可以更好地把精力集中在功能本身的開發(fā)上。
注：本文只是筆者使用vue-function-api提前體驗(yàn) Vue Function API ，而這個(gè) API 只是 Vue 3.0 的 RFC，而并非與最終 Vue 3.x API 一致。發(fā)布后可能有不一致的地方。
在 Vue 2.x 中使用
要想提前在Vue 2.x中體驗(yàn) Vue Function API ，需要引入vue-function-api，基本引入方式如下：
import Vue from 'vue';
import { plugin as VueFunctionApiPlugin } from 'vue-function-api';
Vue.use(VueFunctionApiPlugin);
基本組件示例
先來看一個(gè)基本的例子：
<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函數(shù)是Vue Function API 構(gòu)建的函數(shù)式寫法的主邏輯，當(dāng)組件被創(chuàng)建時(shí)，就會(huì)被調(diào)用，函數(shù)接受兩個(gè)參數(shù)，分別是父級(jí)組件傳入的props和當(dāng)前組件的上下文context。看下面這個(gè)例子，可以知道在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函數(shù)創(chuàng)建一個(gè)包裝對(duì)象，它包含一個(gè)響應(yīng)式屬性value：<br /> <br /> <br /> <br /> 那么為何要使用value呢，因?yàn)樵贘avaScript中，基本類型并沒有引用，為了保證屬性是響應(yīng)式的，只能借助包裝對(duì)象來實(shí)現(xiàn)，這樣做的好處是組件狀態(tài)會(huì)以引用的方式保存下來，從而可以被在setup中調(diào)用的不同的模塊的函數(shù)以參數(shù)的形式傳遞，既能復(fù)用邏輯，又能方便地實(shí)現(xiàn)響應(yīng)式。<br /> <br /> 直接獲取包裝對(duì)象的值必須使用.value，但是，如果包裝對(duì)象作為另一個(gè)響應(yīng)式對(duì)象的屬性，Vue內(nèi)部會(huì)通過proxy來自動(dòng)展開包裝對(duì)象。同時(shí)，在模板渲染的上下文中，也會(huì)被自動(dòng)展開。<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) // 作為另一個(gè)響應(yīng)式對(duì)象的屬性，會(huì)被自動(dòng)展開<br /> <br /> obj.count++ // 作為另一個(gè)響應(yīng)式對(duì)象的屬性，會(huì)被自動(dòng)展開<br /> count.value++ // 直接獲取響應(yīng)式對(duì)象，必須使用.value<br /> <br /> return {<br /> count,<br /> };<br /> },<br /> template:<button @click="count++">{{ count }}</button>,<br /> };<br /> 如果某一個(gè)狀態(tài)不需要在不同函數(shù)中被響應(yīng)式修改，可以通過state創(chuàng)建響應(yīng)式對(duì)象，這個(gè)state創(chuàng)建的響應(yīng)式對(duì)象并不是包裝對(duì)象，不需要使用.value來取值。<br /> <br /> watch & computed<br /> watch和computed的基本概念與 Vue 2.x 的watch和computed一致，watch可以用于追蹤狀態(tài)變化來執(zhí)行一些后續(xù)操作，computed用于計(jì)算屬性，用于依賴屬性發(fā)生變化進(jìn)行重新計(jì)算。<br /> <br /> computed返回一個(gè)只讀的包裝對(duì)象，和普通包裝對(duì)象一樣可以被setup函數(shù)返回，這樣就可以在模板上下文中使用computed屬性?？梢越邮軆蓚€(gè)參數(shù)，第一個(gè)參數(shù)返回當(dāng)前的計(jì)算屬性值，當(dāng)傳遞第二個(gè)參數(shù)時(shí)，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 /> // 可寫的計(jì)算屬性值<br /> const writableComputed = computed(<br /> // read<br /> () => count.value + 1,<br /> // write<br /> val => {<br /> count.value = val - 1;<br /> },<br /> );<br /> watch第一個(gè)參數(shù)和computed類似，返回被監(jiān)聽的包裝對(duì)象屬性值，不過另外需要傳遞兩個(gè)參數(shù)：第二個(gè)參數(shù)是回調(diào)函數(shù)，當(dāng)數(shù)據(jù)源發(fā)生變化時(shí)觸發(fā)回調(diào)函數(shù)，第三個(gè)參數(shù)是options。其默認(rèn)行為與 Vue 2.x 有所不同：<br /> <br /> lazy：是否會(huì)在組件創(chuàng)建時(shí)就調(diào)用一次回調(diào)函數(shù)，與 Vue 2.x 相反，lazy默認(rèn)是false，默認(rèn)會(huì)在組件創(chuàng)建時(shí)調(diào)用一次。<br /> deep：與 Vue 2.x 的 deep 一致<br /> flush：有三個(gè)可選值，分別為 'post'（在渲染后，即nextTick后才調(diào)用回調(diào)函數(shù)），'pre'（在渲染前，即nextTick前調(diào)用回調(diào)函數(shù)），'sync'（同步觸發(fā)）。默認(rèn)值為'post'。<br /> // double 是一個(gè)計(jì)算包裝對(duì)象<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 /> 當(dāng)watch多個(gè)被包裝對(duì)象屬性時(shí)，參數(shù)均可以通過數(shù)組的方式進(jìn)行傳遞，同時(shí)，與 Vue 2.x 的vm.$watch一樣，watch返回取消監(jiān)聽的函數(shù)：<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: $);<br /> }<br /> );<br /> <br /> stop();<br /> 注意：在RFC：Function-based component API初稿中，有提到effect-cleanup，是用于清理一些特殊情況的副作用的，目前已經(jīng)在提案中被取消了。<br /> <br /> 生命周期<br /> 所有現(xiàn)有的生命周期都有對(duì)應(yīng)的鉤子函數(shù)，通過onXXX的形式創(chuàng)建，但有一點(diǎn)不同的是，destoryed鉤子函數(shù)需要使用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 調(diào)整為 unmounted<br /> onUnmounted(() => {<br /> console.log('unmounted!');<br /> });<br /> },<br /> };<br /> 一些思考<br /> 上面的詳解部分，主要抽取的是 Vue Function API 的常見部分，并非RFC：Function-based component API的全部，例如其中的依賴注入，TypeScript類型推導(dǎo)等優(yōu)勢(shì)，在這里，由于篇幅有限，想要了解更多的朋友，可以點(diǎn)開RFC：Function-based component API查看。個(gè)人也在Function-based component API討論區(qū)看到了更多地一些意見：<br /> <br /> 由于底層設(shè)計(jì)，在setup取不到組件實(shí)例this的問題，這個(gè)問題在筆者嘗試體驗(yàn)時(shí)也遇到了，期待正式發(fā)布的 Vue 3.x 能夠改進(jìn)這個(gè)問題。<br /> <br /> 對(duì)于基本類型的值必須使用包裝對(duì)象的問題：在 RFC 討論區(qū)，為了同時(shí)保證TypeScript類型推導(dǎo)、復(fù)用性和保留Vue的數(shù)據(jù)監(jiān)聽，包裝屬性必須使用.value來取值是討論最激烈的<br /> <br /> 關(guān)于包裝對(duì)象value和state方法命名不清晰可能導(dǎo)致開發(fā)者誤導(dǎo)等問題，已經(jīng)在Amendment proposal to Function-based Component API這個(gè)提議中展開了討論：<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 中可能被用作組件狀態(tài)對(duì)象，導(dǎo)致變量命名空間的沖突問題，團(tuán)隊(duì)認(rèn)為將state API 更名為 reactive 更為優(yōu)雅。開發(fā)者能夠?qū)懗鯿onst state = ... ，然后通過state.xxxx這種方式來獲取組件狀態(tài)，這樣也相對(duì)而言自然一些。
value方法用于封裝基本類型時(shí)，確實(shí)會(huì)出現(xiàn)不夠優(yōu)雅的.value的情況，開發(fā)者可能會(huì)在直接對(duì)包裝對(duì)象取值時(shí)忘記使用.value，修正方案提出的 reactive API，其含義是創(chuàng)建響應(yīng)式對(duì)象，初始化狀態(tài)state就使用reactive創(chuàng)建，可保留每項(xiàng)屬性的getter和setter，這么做既滿足類型推導(dǎo)，也可以保留響應(yīng)式引用，從而可在不同模塊中共享狀態(tài)值的引用。
但reactive可能導(dǎo)致下面的問題，需要引入binding API。 解決，如使用reactive創(chuàng)建的響應(yīng)式對(duì)象，對(duì)其使用拓展運(yùn)算符...時(shí)，則會(huì)丟失對(duì)象的getter和setter，提供toBindings方法能夠保留狀態(tài)的響應(yīng)式。
當(dāng)然，目前 Vue Function API 還處在討論階段，Vue 3.0 還處在開發(fā)階段，還是期待下半年 Vue 3.0 的初版問世吧，希望能給我們帶來更多的驚喜。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com