在去餐廳用餐之前，我們還有些時間再了解一項基礎設計原理。讓我們回頭看看在「鄰近性」原理當中提到的燈光明暗控制開關。你能僅通過最左側這個開關的樣式看出它所控制的燈光明暗度嗎？
如下圖這樣又如何？
我們之所以能從后者當中進行判斷，所依據的就是映射關系。所謂「映射」，即是指，將被控對象的行為規律體現到控件自身的操作方式中，譬如開關把手的上升和下降，對應著燈光亮度的升高和降低。
映射同樣體現在多個控件的布局當中，它們的次序應該能夠反映出多個被控對象之間的相對位置關系。
我們假設這三個開關用于控制臥室天花板上的三盞燈。依據映射關系而設計的開關位置應該能夠幫助人們快速判斷出它們各自控制著哪一盞燈。映射原理有助于設計師對控件的類型、位置和次序進行決策。
當映射關系不明確時，我們通常需要依靠文本標簽才能理解開關與燈之間的對應關系。這并非完美的解決方案，因為閱讀和理解文字需要花費時間和精力，同時人們也難以依靠記憶進行快速操作。
在界面設計當中，映射關系也體現在控件類型的選擇上。例如通過滑塊（slider）控制文本的橫向字間距就是很符合直覺的交互方式。而相比于滑塊或是步進控件（stepper），旋鈕則更適于旋轉操作。
當然，最直接的映射才是最好的映射。為人們提供直接操作目標對象的能力是最為簡單、精準、符合直覺的解決方案。macOS 上的鼠標指針操作，或 iOS 當中的手勢操作，都可以為人們帶來直接操作的體驗。
不知各位如何，我是很餓了，這就準備下樓去吃飯。我們在大堂見，然后一起去餐廳。
坐在餐桌前，你會看到面前擺放著一個空盤子。我們能用這個盤子做什么？顯然，放些食物在里面。除此之外呢？
盤子很光滑，可以旋轉或是滑來滑去。
盤子有一圈寬邊，可以抓著拎起來。
我們對于如何與這個盤子進行互動的觀點便是可供性的體現。換句話說，盤子的外形特征為我們提供了如何與之進行互動的視覺及觸覺線索，使我們意識到哪些交互行為可行，哪些不可行。我們會意識到要將食物放進去，或是將它滑到其他地方。但我們通常不會想要倒水進去，然后端起來喝。
可供性并非物體自身所具備的屬性，它更多是在代表行為主體與目標對象之間的互動關系?？晒┬詴蛐袨橹黧w的差異而有所不同。舉個極端些的例子，對我而言，飛盤可以用來抓住或扔出去，而對我的狗來說，飛盤就是單單用來叼的。不過另一方面，碟子對我和我的狗來說都是用來盛放食物的。
由于可供性所具有的主觀特性，一個人能感知到的交互特性在另一個人看來則未必如此。當可供性所傳達的交互特性與人們的常規行為有著高度關聯時，人們會更加容易感知到。
例如，我其實可以把碟子當作茶托，這會是個不錯的茶托。但我猜我們大家日常很少真的這樣去做，因此我會更樂于將碟子視為盛放食物的容器，而非將水杯放在里面。
我們能從我們所互動過的任何環境及事物當中感知到可達性。當我們走進餐廳時，門的大小及形狀可以傳達出供人穿過的特性，連續的地面使我們意識到可以在上面安穩地行走。
椅子的造型暗示我們可以坐下，桌子的構造令我們明白可以將物品擺放在上面。
人造物品當中都包含有傳達可供性的視覺線索，使人們明白哪些行為可行。清晰的、顯而易見的視覺線索可以幫助人們迅速了解如何與之進行互動。
對于 app 界面設計而言也是同樣的道理?；瑝K控件由把手和滑軌構成，暗示著拖拽的特性。
旋鈕的樣式意味著可以旋轉。
按鈕則一目了然地傳達著可點擊的特征。
在以上每一個例子當中，可供性的傳達效率都是極高的。事實上，隨著時間的推移，我們會越發適應于抽象度不斷提升的可供性傳達形式。我們所熟悉的界面當中的按鈕，無非是現實世界里真實按鈕的高度抽象化版本；那四個圓角足以將虛擬與現實兩個版本的同一種物體關聯起來。
同理，滑塊把手周圍那細微的投影效果也足以讓我們意識到其獨立于滑軌之上的操作特性。
而且，僅有的這一點點視覺線索可能都不是必需的，對于很多人來說，一條直線上的一個實心圓足矣傳達滑動操作的可供性了。
有時候，可供性也可以通過動效進行傳達。在天氣 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移除。
在佐藤看來，這些整理工作常常被他人視為是在浪費時間，而實際上整理是一種培養思路的好習慣，長此以往，不僅能讓自己的思路變得更加清晰，同時，思維也會跟著變得更加敏銳起來。
在與客戶的溝通過程中，我們可以清楚的了解到，具體需求是什么。隨后再將這個需求中的關鍵點進行提煉與整理，最終完成這個設計。而不應該全是憑借設計師自己的靈感和專業水準去完成創作。
△ 多摩美術大學以「自由與意力」作為教育理念?，F為日本規模最大的美術大學。
佐藤的父親是位建筑師，祖父是俄羅斯語學者、前東京外國語大學榮譽教授。在這樣的家庭環境的熏陶之下，讓佐藤從小就喜歡上了畫畫。并且在報考志愿的時候，也選擇了藝術類的大學。但這一切似乎并沒有那么容易，沒錯，他落榜了。
但這并沒有讓他放棄這個想法，經過了兩次落榜之后，終于在他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)的幫助下開始了這個項目，創作出一個紅色立方體建筑，但一個月后，這座建筑的顏色一夜之間變成了樸素的白色木材。
佐藤可士和將建筑概念定義「變化」?！缸兓故菚r尚的本質，隨著時間的變化而變化。他將建筑與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個驚嘆號「！?。 箒肀憩F「發明和發現」的喜悅。內部基調以紅色和白色為主，簡潔明了。并將這一理念體現在博物館的平面，空間和展示內容。
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一直致力于此。
總的設計價值
我們所服務的互聯網企業不斷爭搶用戶注意力，都期望用戶停留更多時間為企業創造更多價值，但卻忽略了尊重用戶的時間、尊嚴、和能力?！狢yd 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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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: $);<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.syprn.cn