如今，Page Speed（頁面速度）的意義非凡。
自從Google改變Googlebot's的算法以高度支持快速，適合移動設備的網站以來，擁有快速網站變得越來越重要。如果這還不夠好，用戶通常會花更少的時間，轉化率也會更低，你的網站體驗越慢，用戶的轉化率就越低。
什么是Page Speed
Page Speed是將內容完全加載到網頁上所花費的時間。
對于任何給定的用戶來說，頁面緩慢的原因可能有很多，你的用戶可能正在火車上，通過信號弱的隧道，或者他們的互聯網速度很慢。
通過遵循最佳實踐，我們至少可以通過確保我們已經做了最好的工作來緩解問題。
現在你知道它是什么了，下面我就來教你如何提高頁面速度。
注意：這些是按難度順序列出的。在某個時候，你將需要開發人員來幫助優化你的網站。
1.使用CDN
CDN是內容傳輸網絡的縮寫。使用CDN可以讓你有效地訪問全球數百臺小服務器，這些服務器為你提供網站的副本，大大減少了你的網站獲取時間。如果你沒有使用CDN，你的網站的每一個請求（包括圖片、CSS和JavaScript）都會被緩慢地傳送到你的服務器上。
根據HTTPArchive中的4.68億個請求，48%的請求不是來自CDN。那是超過2.24億的請求，如果他們花幾分鐘的時間給自己的網站添加一個CDN，速度可能會超過50%。
一定要檢查你的CDN配置是否正確——在你的CDN中緩存丟失意味著CDN必須向你的源服務器請求資源，這就違背了使用CDN的初衷！所以，你的CDN必須要有一個正確的配置。
2.啟用GZIP壓縮
在一些CDN上，GZIP壓縮只是一個標有 "啟用壓縮 "的復選框。這大概會減少一半的文件大小，你的用戶需要下載文件才能使用你的網站，你的用戶會因此而喜歡你。
3.使用較小的圖像
這意味著既要降低分辨率（例如，攝像頭的輸出從4000x3000像素減少到網絡的1000x750），又要通過壓縮文件來減小尺寸。
如果你的網站使用WordPress，則有一些插件會在你上傳圖片時自動為你執行此操作。
在撰寫博客文章時，我個人使用TinyJPG壓縮圖像。
https://tinyjpg.com/
4.減少頁面發出的請求數
目標是減少加載頁面頂部部分所需的請求數量。
這里有兩種思維方式，你可以：
通過刪除花哨的動畫或不能改善網站體驗的圖像，減少整個頁面上的請求數量。
或者，你可以通過使用延遲加載來推遲優先級不高的加載內容。
5.盡可能避免重定向
重定向會大大降低網站速度。使用響應式CSS并從一個域為你的網站提供服務，而不是為移動用戶提供特殊的子域。
有些重定向是不可避免的，比如 www-> 根域 或 根域 ->www，但你的大部分流量不應該經歷重定向來查看你的網站。
6.減少到第一個字節的時間
到第一個字節的時間是指你的瀏覽器在發出資源請求后，從服務器接收到第一個字節的數據所花費的時間。
有兩個部分：
在服務器上花費的時間
發送數據所花費的時間
你可以通過優化你的服務器端渲染、數據庫查詢、API調用、負載平衡、你的應用程序的實際代碼以及服務器的負載本身（特別是如果你使用的是廉價的虛擬主機——這將影響你的網站的性能），來改善你在服務器上花費的時間。
你可以使用CDN大大減少發送數據所花費的時間。
7.減少并刪除阻止渲染的JavaScript
外部腳本（特別是那些用于營銷的外部腳本）往往會寫得很差，會阻止你的頁面加載，直到它運行完畢。
你可以通過將外部腳本標記為異步來減少這種影響：
<script async src="https://example.com/external.js"></script>
你還可以延遲加載市場營銷腳本，直到用戶開始滾動為止：
window.addEventListener(
'scroll',
() =>
setTimeout(() => {
// 在此插入營銷片段
}, 1000),
{ once: true }
);
8.縮小CSS和JS
Minifying是指使用工具來刪除空格、換行符和縮短變量名。通常情況下，這將作為構建過程的一部分自動完成。
要縮小JavaScript，請查看UglifyJS。
http://lisperator.net/uglifyjs/
要縮小CSS，請查看cssnano。
9.刪除未使用的CSS
自Chrome 59（2017年4月發布）以來，在Chrome DevTools中可以看到未使用的JS和CSS。
要看這個，打開DevTools，顯示控制臺抽屜（就是點擊Esc時出現的那個煩人的東西），點擊左下角的三個小點，打開 "Coverage"，就可以看到。
點擊帶有重新加載圖標的按鈕將刷新頁面，并審核CSS和JS的使用情況。
在Google Chrome瀏覽器中審核初始頁面時，外觀如下所示：
10.定期跟蹤網站速度
在你的網站速度變慢的瞬間，修復網站速度問題就會容易得多。除此之外，如果你把檢查網站速度作為一種習慣，那么修復網站速度慢的問題就會變成一件小得多的事情。
有免費的工具可以監視你網站的速度，其中的兩個是WebPageTest和Google Lighthouse。這些工具的缺點是你需要記住在進行更改之前和之后都必須運行它們。
PerfBeacon是一項服務（由本文的作者創建），該服務定期運行Google Lighthouse，并讓你隨時跟蹤網站的速度。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
據悉，截至2019年12月31日，肯德基會員數量超過2.15億，必勝客會員數量超過7000萬，相比去年同比增長35%和33%。
付費會員卡持續受到消費者歡迎，在第四季度售出超過300萬張，從付費會員卡項目推出以來已經累計售出1500萬張，尊享卡帶來的銷售占比持續增加。
為什么會KFC付費會員發展如此迅速呢？有哪些值得我們學習的設計點呢？我們今天就來分析下。
上周末，孩子突然想吃肯德基，娃命難違，我們就去了家附近的KFC。點餐的時候，發現有個「親子卡」活動，于是就好奇的了解了一下，看完之后，我就毫不猶豫地加入了親子卡會員。
回到家后，職業病就犯了。開始思考「我為什么會開卡？是什么吸引了我呢？」，簡單做下自我分析。
1. 用戶需求
其實我不算是肯德基的忠實粉絲，吃肯德基的次數比較少，但是如果吃漢堡類的快餐，我首選肯德基。
我兒子才是真正的目標用戶，因為他更喜歡吃肯德基，基本上1～2周就會吃一次。因此當考慮是否開卡時，我認為吃肯德基對我來說是強需求。
2. 消費場景
肯德基線下門店眾多，特別是地鐵、商場等人流量密集的場所。我家附近、孩子周末上課的地方都有肯德基門店，與孩子的生活軌跡重合度較高，到店就餐比較方便，無需外送費等額外消費。因此開卡后不存在消費障礙點。
3. 商品特點
肯德基的商品基本可以說老少咸宜，用戶接受度較高，不會因為口味等問題，讓孩子無法接受。
??
拋開平臺差異等因素，用戶進行開卡決策時，最核心的問題就是「值不值得付費開卡」。這里面包含了2個關鍵因素，會員費和權益價值。
會員費是一定的，變動的是用戶對權益價值的認知。親子卡的權益有什么特點呢？
通過上圖可以看出肯德基的親子卡權益并不復雜，我將權益劃分為四種類型，抽離出一個簡單的權益模型，可以明顯看出權益的分層設計。
開卡權益
作為開卡權益，也是最有吸引力的權益，就是免費享受價值68元的親子桶。而「親子卡」會員費是78元，基本保證了用戶可以「一單回本」，消除了用戶支付「會員費」時的回本擔憂，很容易激發用戶的開卡欲望。
日常權益
激起用戶開卡欲望后，需要通過各種日常權益，提升權益的價值感。又可以促進用戶到店消費，產生二次消費。肯德基采用了低價商品（冰淇淋/蛋撻）周末免費贈送的策略，可以更好的吸引用戶到店使用消費。
關鍵節點權益
特定節日的消費行為，可以減少了用戶的記憶負擔，保證用戶不容易忘記使用消費券。而在消費之后，用戶也會產生獨特的記憶點，提升對KFC的消費好感。另外半價權益進一步增強用戶省錢認知。
推廣權益
我之前偶爾會看到家長和小朋友聚在肯德基舉行生日會，知道在肯德基有這項服務，但從未主動了解其中的細節。辦卡之后，我主動了解了權益內容，從而對生日會有了更多的認知。
因此這項權益主要目的，或許是占領用戶心智，鼓勵更多的用戶在肯德基舉辦生日會。
總結下親子卡體驗設計的特點：
開卡立享，增強用戶獲得感
肯德基「開卡立享」的形式，讓用戶認為自己免費吃了一頓，從而提高了開卡權益的價值感。同時對于「免費」獲得套餐，用戶也不會太計較親子桶中的商品種類。
如果我們將「開卡立享」權益，換成「再付20元立享88元親子桶」。用戶可能就要考慮「又要付錢，這權益不咋地啊」，「還要再花費20元，總共要花掉98元，這頓飯超支了」等，「桶里有什么呢，是不是我喜歡吃的」等疑問，會增加用戶決策過程中的阻礙點。
特定商品，減少用戶思考
由于肯德基食品的普適性，開卡立享的親子桶食物是特定的，用戶不需要自選。也沒有采用68元的優惠券、折扣等形式。因為特定的套餐可以減少用戶選擇和思考時間，縮短用戶思考路徑長度，避免思考過程中的用戶流失。
權益簡單化，快速決策
親子卡權益數量不多，但是聚焦就餐核心權益，增強對用戶的吸引力，同時方便用戶理解。例如周末免費，半價商品等，里面沒有復雜的計算公式，用戶不需要過多的思考，就可以快速做出決策。
門店推廣，清除開卡障礙點
肯德基到店消費，為產品推廣提供了更多便利條件。當用戶在開卡過程中遇到任何問題，都可以尋找店內工作人員得到快速解決，從而減少了用戶的后顧之憂。例如我當時想要了解下「半價桶」價格是怎樣的，直接咨詢店內人員就解決了。
1. 拼多多&淘寶月卡
同樣的設計也體現在拼多多、淘寶月卡中。面對下沉市場用戶，兩者都將權益簡單化處理，通過簡單直白的無門檻券、優惠紅包作為賣點，主打「回本」、「30天未使用全部退款」等策略，對于平臺新人、忠實用戶都可以形成較強的吸引力，提升用戶開卡轉化率。
2. 天貓會員店
天貓會員店采用的是「券+新人價商品」的策略。
連續包季的會費是25元，而新人價商品的省錢金額基本可以保證用戶「省回會費」。商品定價主要采用1元新人價的形式，基本消除了用戶的價格疑慮，保證用戶不需要各大平臺比價，減少用戶比價過程中的流失。
另外新人價商品主要是普適性很強的生活快銷品，作為生活必需品，可囤貨、消耗快，用戶在商品選擇時不會消耗過多的精力。
用戶一旦開卡后，形成了沉沒成本，每月多種規格的滿減券又可以提升用戶的消費頻率，從而提升商品轉化率。
付費會員在各個行業領域都在快速發展，而且衍生出了多種付費類型，例如主打權益價值、追求豐富權益的淘寶「88會員」、京東「PLUS會員」，主打省錢的拼多多「省錢月卡」、淘寶「紅包省錢卡」，還有「付費會員制」的天貓會員店等。
無論哪種付費會員產品，開卡率都是產品的核心指標。而在體驗設計上，我們需要減少用戶的開卡阻力，增強用戶的權益感知，縮短用戶的思考路徑，從而更好地為商業賦能。
文章來源：優設 作者：子牧設計筆談
世界和技術正在飛速發展，每年都會影響設計趨勢的走向。作為設計師，我們需要了解現有和即將到來的設計趨勢，不斷學習，改進和擴大我們的知識儲備，以便與時俱進。
根據研究、經驗和觀察，我們非常仔細地選擇了2020年應該注意的8種UI / UX設計趨勢。那就讓我們開始吧～
通過對插圖，或者讓插圖進行運動，可以使我們的設計脫穎而出，并使其栩栩如生-增加額外的細節和個性。
微交互完美證明了：著重于細節和發揚這些細節可能會大大改善你的APP的用戶體驗，并將使之更高能/更。
新的Web瀏覽器功能為3D圖形打開了大門，作為設計師可以在現代Web和移動界面中創造和實現驚人的3D圖形。
游戲行業常將創新、和新技術帶入產品設計中。
在AR空間中，有無數令人興奮的體驗機會。AR的UI設計將成為2020年的主要趨勢之一，因此，作為設計師，我們應該做好準備，并主動在創建AR體驗時學習新的工具和原理。
VR / AR技術的增長，以及最流行的設計平臺上顯示的那些優秀的設計告訴我們：設計趨勢可能會使擬物設計在2020年卷土重來，但這一次，它會加入更多現代時尚。
非對稱布局有很大的創造空間，不過創建優秀的非對稱布局需要我們有一定的經驗和時間去處理它。
講故事就是以最佳的信息和創意方式將數據傳輸給用戶。講故事也是一種出色而有效的營銷工具，可以極大地提高你的產品/服務的銷售額。
插畫在產品設計中已經存在了很長時間。最近幾年的發展更是令人矚目。插畫作為非常流行的設計元素，為我們產品的整體UX添加了「自然的感覺」和「人性化的感覺」。插畫也是吸引注意力的焦點：通過對這些插畫進行動效的展示，可以使我們的產品栩栩如生，并使它們脫穎而出-增加更多的細節和個性。
歡迎來到我們的商店！
入職動畫
動效展示的另一個好處是可以吸引用戶的注意力并使用戶與您的產品互動。動畫也是講述您的品牌、產品或服務故事的最有效方法之一。
微交互幾乎存在于每個APP或網站中。每次打開喜歡的APP時，你都會看到它們。例如，Facebook有大量不同的微交互，其中「贊」功能就是一個很好的例子。雖然有時我們甚至不會特意感知到它的存在，因為它非常明顯的、自然的「融合」到用戶界面中去了。但是如果你從界面中刪除它們，你將很快意識到，某些重要的功能丟失了。
菜單切換關閉動畫
標簽欄活動動畫
一般來說，在UI / UX設計中，有時即使很小的更改也可能產生巨大的影響。微交互完美證明了細節和發揚它們可能會大大改善你的APP的整體用戶體驗，并將其置于更高能/更的層次。在每一年，每種新設備都會帶來新的創造全新的微交互的機會，當然，2020年也不例外。
3D圖形幾乎無處不在-在電影，視頻游戲，街頭廣告中。3D圖形是幾十年前才被引入到產品設計中的，從那時起，它已經得到了極大到改善，并得到了高速的發展。移動和網絡技術也在快速增長。新的Web瀏覽器功能為3D圖形打開了大門，我們作為設計師可以在現代Web和移動界面中創建和實現炫目的3D圖形。
3D翻轉菜單
汽車健康報告用戶界面
創建3D圖形并將其實現到Web和移動界面中需要一些特定的技能和大量的工作，但是通常結果是非常有意義的。
Apple AirPods Pro登陸頁面
3D圖形以一種更具交互性和吸引力的方式來展示產品或服務：例如，可以以360度演示方式查看3D圖形，從而改善了產品的用戶體驗。
在2020年，更多的品牌將使用3D模型來展示產品或服務，打通線上線下，以模擬現實世界（店內）的購物體驗。
2019年對于VR來說，是重要的一年。在過去的幾年，我們見證了VR技術的發展和其不可思議的效果，其中大部分是在游戲行業。游戲行業通常會首先在產品設計中引入創新和新技術。研究證明VR也不例外，2019年Oculus Quest推出后，其他行業也嘗試了很多可能性。Facebook首席執行官馬克·扎克伯格（Mark Zuckerberg）已經測試了令人興奮的手部交互功能，并于2020年初正式宣布了Quest的手部跟蹤更新！
Oculus Quest-手互動功能
PlayStation虛擬現實網站設計
索尼和微軟將在2020年發布其新一代游戲機。這些將為虛擬現實技術帶來很多機遇和增長空間。
過去幾年中，我們看到了AR的許多發展和改進。世界領先的科技公司在AR開發方面投入了數百萬美元，我們應該期望在2020年行業會擴展和發展此項技術。甚至蘋果公司也推出了自己的AR工具包ARKIT 3，以幫助設計人員和開發人員構建基于AR的產品。
ARKit 3 蘋果
公共交通應用
Nathan Riley的植物之家AR概念
在AR空間中，有無數令人興奮的體驗機會。AR的UI設計將成為2020年的主要趨勢之一，因此，作為設計師，我們應該做好準備，并主動在創建AR體驗時學習新的工具和原理。
一般來說，擬物設計是指以逼真的樣式/方式創建的設計元素，以匹配現實生活中的對象。VR / AR技術的增長和最流行的設計平臺（Dribbble，Behance等）上顯示的設計趨勢顯示：擬物設計可能會在2020年卷土重來，但這一次，它會加入更多現代時尚。同時有了一個略作修改的名稱：“新擬物” （也稱為Neumorphism）。
Skeuomorph手機銀行的黑暗模式
音樂播放器
睡眠周期應用程序
我們可能已經注意到：「新擬物設計」代表非常詳細和的設計風格。高光，陰影，發光都被運用在設計中去。他們對細節的關注令人非常印象深刻。這已經啟發了來自世界各地的許多設計師，并且很有可能成為2020年最大的UI設計趨勢。
在過去的幾年中，我們注意到產品設計中大量使用不對稱布局?；?nbsp; 傳統/模板 的布局漸漸消失。2020年將依舊如此，因為這一趨勢將繼續保持。正確使用非對稱布局會為我們的設計增加很多特征、動態和個性，或許它們將不再拘泥于模板。
Limnia高級珠寶首飾網格
卡琳時裝商店
創建非對稱布局時、有很大的創造空間。盡管創建成功的非對稱布局需要一定的經驗和時間、將元素隨機放置在網格上當然是不行的) 此外，應謹慎使用和實現它們-因為我們要始終牢記用戶的需求：我們不希望用戶使用我們產品的時候感到困惑。
故事在產品設計中的用戶體驗中扮演著非常重要的角色?？赡軙诘卿涰撁嫔辖洺？吹剿鼈?，作為對品牌，產品或新功能的介紹。講故事就是以最佳的信息和創意方式將數據傳輸給用戶。這可以通過「版權（品牌）保護」與「強大而平衡的視覺等級」（印刷術，插圖，高質量照片，大膽的色彩，動畫和交互式元素）混合來實現。
講故事就是以最佳的信息和創意方式將數據傳輸給用戶。
「本周青年實驗室」頁面故事動畫
講故事確實有助于在品牌和用戶之間建立積極的情感和關系。講故事還可以使您的品牌更令人難忘，并使用戶覺得他們是我們產品或服務的一部分，因此他們希望與他們建立聯系。話雖如此，講故事還是一種出色而有效的營銷工具，可能會大大提高您的產品/服務的銷售額。作為非常成功的工具，講故事將在2020年繼續并擴大。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
文章來源：站酷 作者：一個辛普森
了解如何使用JavaScript中的Cache API緩存資源。
Cache API允許服務工作者對要緩存的資源（HTML頁面、CSS、JavaScript文件、圖片、JSON等）進行控制。通過Cache API，服務工作者可以緩存資源以供脫機使用，并在以后檢索它們。
檢測Cache支持
檢查 caches 對象在 window 中是否可用。
let isCacheSupported = 'caches' in window;
caches 是 CacheStorage 的一個實例。
創建/初始化Cache
我們可以使用 open 方法創建一個具有 name 的緩存，這將返回 promise。如果緩存已經存在，則不會創建新的緩存。
caches.open('cacheName').then( cache => {
});
你不能訪問為其他源(域)設置的緩存。
你正在創建的緩存將為你的域創建。
你可以為同一個域添加多個緩存，可以通過 caches.keys() 訪問。
將項目添加到緩存
可以使用三種方法 add，addAll，set 來緩存資源。 add() 和 addAll() 方法自動獲取資源并對其進行緩存，而在 set 方法中，我們將獲取數據并設置緩存。
add
let cacheName = 'userSettings';
let url = '/api/get/usersettings';
caches.open(cacheName).then( cache => {
cache.add(url).then( () => {
console.log("Data cached ")
});
});
在上面的代碼中，內部對 /api/get/usersettings url的請求已發送到服務器，一旦接收到數據，響應將被緩存。
addAll
addAll 接受URL數組，并在緩存所有資源時返回Promise。
let urls = ['/get/userSettings?userId=1', '/get/userDetails'];
caches.open(cacheName).then( cache => {
cache.addAll(urls).then( () => {
console.log("Data cached ")
});
});
Cache.add/Cache.addAll 不緩存 Response.status 值不在200范圍內的響應，Cache.put 可以讓你存儲任何請求/響應對。
put
put 為當前的 Cache 對象添加一個key/value對，在 put 中，我們需要手動獲取請求并設置值。
注意：put() 將覆蓋先前存儲在高速緩存中與請求匹配的任何鍵/值對。
let cacheName = 'userSettings';
let url = '/api/get/userSettings';
fetch(url).then(res => {
return caches.open(cacheName).then(cache => {
return cache.put(url, res);
})
})
從緩存中檢索
使用 cache.match() 可以得到存儲到URL的 Response。
const cacheName = 'userSettings'
const url = '/api/get/userSettings'
caches.open(cacheName).then(cache => {
cache.match(url).then(settings => {
console.log(settings);
}
});
settings 是一個響應對象，它看起來像
Response {
body: (...),
bodyUsed: false,
headers: Headers,
ok: true,
status: 200,
statusText: "OK",
type: "basic",
url: "https://test.com/api/get/userSettings"
}
檢索緩存中的所有項目
cache 對象包含 keys 方法，這些方法將擁有當前緩存對象的所有url。
caches.open(cacheName).then( (cache) => {
cache.keys().then((arrayOfRequest) => {
console.log(arrayOfRequest); // [Request, Request]
});
});
arrayOfRequest是一個Request對象數組，其中包含有關請求的所有詳細信息。
檢索所有緩存
caches.keys().then(keys => {
// keys是一個數組，其中包含鍵的列表
})
從緩存中刪除項目
可以對 cache 對象使用 delete 方法來刪除特定的緩存請求。
let cacheName = userSettings;
let urlToDelete = '/api/get/userSettings';
caches.open(cacheName).then(cache => {
cache.delete(urlToDelete)
})
完全刪除緩存
caches.delete(cacheName).then(() => {
console.log('Cache successfully deleted!');
})
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
作為一個曾經的Java coder, 當我第一次看到js里面的裝飾器(Decorator)的時候，就馬上想到了Java中的注解，當然在實際原理和功能上面，Java的注解和js的裝飾器還是有很大差別的。本文題目是Vue中使用裝飾器，我是認真的，但本文將從裝飾器的概念開發聊起，一起來看看吧。
通過本文內容，你將學到以下內容:
了解什么是裝飾器
在方法使用裝飾器
在class中使用裝飾器
在Vue中使用裝飾器
本文首發于公眾號【前端有的玩】，不想當咸魚，想要換工作，關注公眾號，帶你每日一起刷大廠面試題，關注 === 大廠offer。
什么是裝飾器
裝飾器是ES2016提出來的一個提案，當前處于Stage 2階段，關于裝飾器的體驗，可以點擊 https://github.com/tc39/proposal-decorators查看詳情。裝飾器是一種與類相關的語法糖，用來包裝或者修改類或者類的方法的行為，其實裝飾器就是設計模式中裝飾者模式的一種實現方式。不過前面說的這些概念太干了，我們用人話來翻譯一下，舉一個例子。
在日常開發寫bug過程中，我們經常會用到防抖和節流，比如像下面這樣
class MyClass {
follow = debounce(function() {
console.log('我是子君，關注我哦')
}, 100)
}
const myClass = new MyClass()
// 多次調用只會輸出一次
myClass.follow()
myClass.follow()
上面是一個防抖的例子，我們通過debounce函數將另一個函數包起來，實現了防抖的功能，這時候再有另一個需求，比如希望在調用follow函數前后各打印一段日志，這時候我們還可以再開發一個log函數，然后繼續將follow包裝起來
/**
* 最外層是防抖，否則log會被調用多次
*/
class MyClass {
follow = debounce(
log(function() {
console.log('我是子君，關注我哦')
}),
100
)
}
上面代碼中的debounce和log兩個函數，本質上是兩個包裝函數，通過這兩個函數對原函數的包裝，使原函數的行為發生了變化，而js中的裝飾器的原理就是這樣的，我們使用裝飾器對上面的代碼進行改造
class MyClass {
@debounce(100)
@log
follow() {
console.log('我是子君，關注我哦')
}
}
裝飾器的形式就是 @ + 函數名，如果有參數的話，后面的括號里面可以傳參
在方法上使用裝飾器
裝飾器可以應用到class上或者class里面的屬性上面，但一般情況下，應用到class屬性上面的場景會比較多一些，比如像上面我們說的log,debounce等等，都一般會應用到類屬性上面，接下來我們一起來具體看一下如何實現一個裝飾器，并應用到類上面。在實現裝飾器之前，我們需要先了解一下屬性描述符
了解一下屬性描述符
在我們定義一個對象里面的屬性的時候，其實這個屬性上面是有許多屬性描述符的，這些描述符標明了這個屬性能不能修改，能不能枚舉，能不能刪除等等，同時ECMAScript將這些屬性描述符分為兩類，分別是數據屬性和訪問器屬性，并且數據屬性與訪問器屬性是不能共存的。
數據屬性
數據屬性包含一個數據值的位置，在這個位置可以讀取和寫入值。數據屬性包含了四個描述符，分別是
configurable
表示能不能通過delete刪除屬性，能否修改屬性的其他描述符特性，或者能否將數據屬性修改為訪問器屬性。當我們通過let obj = {name: ''}聲明一個對象的時候，這個對象里面所有的屬性的configurable描述符的值都是true
enumerable
表示能不能通過for in或者Object.keys等方式獲取到屬性，我們一般聲明的對象里面這個描述符的值是true,但是對于class類里面的屬性來說，這個值是false
writable
表示能否修改屬性的數據值，通過將這個修改為false,可以實現屬性只讀的效果。
value
表示當前屬性的數據值，讀取屬性值的時候，從這里讀??；寫入屬性值的時候，會寫到這個位置。
訪問器屬性
訪問器屬性不包含數據值，他們包含了getter與setter兩個函數，同時configurable與enumerable是數據屬性與訪問器屬性共有的兩個描述符。
getter
在讀取屬性的時候調用這個函數，默認這個函數為undefined
setter
在寫入屬性值的時候調用這個函數，默認這個函數為undefined
了解了這六個描述符之后，你可能會有幾個疑問： 我如何去定義修改這些屬性描述符？這些屬性描述符與今天的文章主題有什么關系？接下來是揭曉答案的時候了。
使用Object.defineProperty
了解過vue2.0雙向綁定原理的同學一定知道，Vue的雙向綁定就是通過使用Object.defineProperty去定義數據屬性的getter與setter方法來實現的，比如下面有一個對象
let obj = {
name: '子君',
officialAccounts: '前端有的玩'
}
我希望這個對象里面的用戶名是不能被修改的，用Object.defineProperty該如何定義呢?
Object.defineProperty(obj,'name', {
// 設置writable 是 false, 這個屬性將不能被修改
writable: false
})
// 修改obj.name
obj.name = "君子"
// 打印依然是子君
console.log(obj.name)
通過Object.defineProperty可以去定義或者修改對象屬性的屬性描述符，但是因為數據屬性與訪問器屬性是互斥的，所以一次只能修改其中的一類，這一點需要注意。
定義一個防抖裝飾器
裝飾器本質上依然是一個函數，不過這個函數的參數是固定的，如下是防抖裝飾器的代碼
/**
*@param wait 延遲時長
*/
function debounce(wait) {
return function(target, name, descriptor) {
descriptor.value = debounce(descriptor.value, wait)
}
}
// 使用方式
class MyClass {
@debounce(100)
follow() {
console.log('我是子君，我的公眾號是 【前端有的玩】，關注有驚喜哦')
}
}
我們逐行去分析一下代碼
首先我們定義了一個 debounce函數，同時有一個參數wait，這個函數對應的就是在下面調用裝飾器時使用的@debounce(100)
debounce函數返回了一個新的函數，這個函數即裝飾器的核心，這個函數有三個參數，下面逐一分析
target: 這個類屬性函數是在誰上面掛載的，如上例對應的是MyClass類
name: 這個類屬性函數的名稱，對應上面的follow
descriptor: 這個就是我們前面說的屬性描述符，通過直接descriptor上面的屬性，即可實現屬性只讀，數據重寫等功能
然后第三行 descriptor.value = debounce(descriptor.value, wait), 前面我們已經了解到,屬性描述符上面的value對應的是這個屬性的值，所以我們通過重寫這個屬性，將其用debounce函數包裝起來，這樣在函數調用follow時實際調用的是包裝后的函數
通過上面的三步，我們就實現了類屬性上面可使用的裝飾器，同時將其應用到了類屬性上面
在class上使用裝飾器
裝飾器不僅可以應用到類屬性上面，還可以直接應用到類上面，比如我希望可以實現一個類似Vue混入那樣的功能，給一個類混入一些方法屬性，應該如何去做呢?
// 這個是要混入的對象
const methods = {
logger() {
console.log('記錄日志')
}
}
// 這個是一個登陸登出類
class Login{
login() {}
logout() {}
}
如何將上面的methods混入到Login中，首先我們先實現一個類裝飾器
function mixins(obj) {
return function (target) {
Object.assign(target.prototype, obj)
}
}
// 然后通過裝飾器混入
@mixins(methods)
class Login{
login() {}
logout() {}
}
這樣就實現了類裝飾器。對于類裝飾器，只有一個參數，即target,對應的就是這個類本身。
了解完裝飾器，我們接下來看一下如何在Vue中使用裝飾器。
在Vue中使用裝飾器
使用ts開發Vue的同學一定對vue-property-decorator不會感到陌生，這個插件提供了許多裝飾器，方便大家開發的時候使用，當然本文的中點不是這個插件。其實如果我們的項目沒有使用ts，也是可以使用裝飾器的，怎么用呢？
配置基礎環境
除了一些老的項目，我們現在一般新建Vue項目的時候，都會選擇使用腳手架vue-cli3/4來新建，這時候新建的項目已經默認支持了裝飾器，不需要再配置太多額外的東西，如果你的項目使用了eslint,那么需要給eslint配置以下內容。
parserOptions: {
ecmaFeatures:{
// 支持裝飾器
legacyDecorators: true
}
}
使用裝飾器
雖然Vue的組件，我們一般書寫的時候export出去的是一個對象，但是這個并不影響我們直接在組件中使用裝飾器，比如就拿上例中的log舉例。
function log() {
/**
* @param target 對應 methods 這個對象
* @param name 對應屬性方法的名稱
* @param descriptor 對應屬性方法的修飾符
*/
return function(target, name, descriptor) {
console.log(target, name, descriptor)
const fn = descriptor.value
descriptor.value = function(...rest) {
console.log(`這是調用方法【${name}】前打印的日志`)
fn.call(this, ...rest)
console.log(`這是調用方法【${name}】后打印的日志`)
}
}
}
export default {
created() {
this.getData()
},
methods: {
@log()
getData() {
console.log('獲取數據')
}
}
}
看了上面的代碼，是不是發現在Vue中使用裝飾器還是很簡單的，和在class的屬性上面使用的方式一模一樣，但有一點需要注意，在methods里面的方法上面使用裝飾器，這時候裝飾器的target對應的是methods。
除了在methods上面可以使用裝飾器之外，你也可以在生命周期鉤子函數上面使用裝飾器，這時候target對應的是整個組件對象。
一些常用的裝飾器
下面小編羅列了幾個小編在項目中常用的幾個裝飾器，方便大家使用
1. 函數節流與防抖
函數節流與防抖應用場景是比較廣的，一般使用時候會通過throttle或debounce方法對要調用的函數進行包裝，現在就可以使用上文說的內容將這兩個函數封裝成裝飾器， 防抖節流使用的是lodash提供的方法，大家也可以自行實現節流防抖函數哦
import { throttle, debounce } from 'lodash'
/**
* 函數節流裝飾器
* @param {number} wait 節流的毫秒
* @param {Object} options 節流選項對象
* [options.leading=true] (boolean): 指定調用在節流開始前。
* [options.trailing=true] (boolean): 指定調用在節流結束后。
*/
export const throttle = function(wait, options = {}) {
return function(target, name, descriptor) {
descriptor.value = throttle(descriptor.value, wait, options)
}
}
/**
* 函數防抖裝飾器
* @param {number} wait 需要延遲的毫秒數。
* @param {Object} options 選項對象
* [options.leading=false] (boolean): 指定在延遲開始前調用。
* [options.maxWait] (number): 設置 func 允許被延遲的最大值。
* [options.trailing=true] (boolean): 指定在延遲結束后調用。
*/
export const debounce = function(wait, options = {}) {
return function(target, name, descriptor) {
descriptor.value = debounce(descriptor.value, wait, options)
}
}
封裝完之后，在組件中使用
import {debounce} from '@/decorator'
export default {
methods:{
@debounce(100)
resize(){}
}
}
2. loading
在加載數據的時候，為了個用戶一個友好的提示，同時防止用戶繼續操作，一般會在請求前顯示一個loading,然后在請求結束之后關掉loading，一般寫法如下
export default {
methods:{
async getData() {
const loading = Toast.loading()
try{
const data = await loadData()
// 其他操作
}catch(error){
// 異常處理
Toast.fail('加載失敗');
}finally{
loading.clear()
}
}
}
}
我們可以把上面的loading的邏輯使用裝飾器重新封裝，如下代碼
import { Toast } from 'vant'
/**
* loading 裝飾器
* @param {*} message 提示信息
* @param {function} errorFn 異常處理邏輯
*/
export const loading = function(message = '加載中...', errorFn = function() {}) {
return function(target, name, descriptor) {
const fn = descriptor.value
descriptor.value = async function(...rest) {
const loading = Toast.loading({
message: message,
forbidClick: true
})
try {
return await fn.call(this, ...rest)
} catch (error) {
// 在調用失敗，且用戶自定義失敗的回調函數時，則執行
errorFn && errorFn.call(this, error, ...rest)
console.error(error)
} finally {
loading.clear()
}
}
}
}
然后改造上面的組件代碼
export default {
methods:{
@loading('加載中')
async getData() {
try{
const data = await loadData()
// 其他操作
}catch(error){
// 異常處理
Toast.fail('加載失敗');
}
}
}
}
3. 確認框
當你點擊刪除按鈕的時候，一般都需要彈出一個提示框讓用戶確認是否刪除，這時候常規寫法可能是這樣的
import { Dialog } from 'vant'
export default {
methods: {
deleteData() {
Dialog.confirm({
title: '提示',
message: '確定要刪除數據，此操作不可回退。'
}).then(() => {
console.log('在這里做刪除操作')
})
}
}
}
我們可以把上面確認的過程提出來做成裝飾器，如下代碼
import { Dialog } from 'vant'
/**
* 確認提示框裝飾器
* @param {*} message 提示信息
* @param {*} title 標題
* @param {*} cancelFn 取消回調函數
*/
export function confirm(
message = '確定要刪除數據，此操作不可回退。',
title = '提示',
cancelFn = function() {}
) {
return function(target, name, descriptor) {
const originFn = descriptor.value
descriptor.value = async function(...rest) {
try {
await Dialog.confirm({
message,
title: title
})
originFn.apply(this, rest)
} catch (error) {
cancelFn && cancelFn(error)
}
}
}
}
然后再使用確認框的時候，就可以這樣使用了
export default {
methods: {
// 可以不傳參，使用默認參數
@confirm()
deleteData() {
console.log('在這里做刪除操作')
}
}
}
是不是瞬間簡單多了,當然還可以繼續封裝很多很多的裝飾器，因為文章內容有限，暫時提供這三個。
裝飾器組合使用
在上面我們將類屬性上面使用裝飾器的時候，說道裝飾器可以組合使用，在Vue組件上面使用也是一樣的，比如我們希望在確認刪除之后，調用接口時候出現loading，就可以這樣寫(一定要注意順序)
export default {
methods: {
@confirm()
@loading()
async deleteData() {
await delete()
}
}
}
本節定義的裝飾器，均已應用到這個項目中 https://github.com/snowzijun/vue-vant-base, 這是一個基于Vant開發的開箱即用移動端框架，你只需要fork下來，無需做任何配置就可以直接進行業務開發，歡迎使用，喜歡麻煩給一個star。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
身為用戶體驗設計師，無時無刻不被世界上的新事物沖刷著認知——互聯網紅利下降帶來變化莫測的商業動向、循著摩爾定律野蠻生長日新月異的新技術、各類亞文化群體催生出多元復雜的圈層文化、腦洞口味越來越獨特的年輕人，甚至眼下席卷全球的黑天鵝事件……
任何一個新事物的悄悄冒頭，都有可能在未知的將來影響著用戶體驗設計師。我們能做的是，在起初感受到微微震幅時，便沿著震感逐步尋找源頭，并思考未來的發展走向。趕在變化降臨前先擁抱變化。
本文通過研究近一兩年科技、社會文化以及自身用戶體驗領域的變化，從用戶體驗領域關鍵的用戶、媒介(設備與應用）、交互行為、信息與場景的五個角度出發，探索用戶體驗設計未來的趨勢，希望能帶來啟發。
隨著人工時代到來，過去機械的單向交互方式逐漸被打破，機器漸漸演化成了會主動「觀察」真實場景，「感受」用戶情感，預判用戶意圖并自動完成任務的貼心小棉襖。機器如何為人們提供更智能便捷的服務，未來還有非常大的想象空間。
1. 基于真實場景推理用戶意圖
隨著AI技術的發展，智能設備可以越來越無縫地將數字世界和物理世界嫁接起來，主動感知用戶所處情境并智能提供相應服務。
在2019的 Google I/O 大會上，Google Lens 展示的AR點菜功能可以智能識別用戶掃描的菜單并將美食網站上的相關推薦直接呈現在屏幕上。
當用 Google Lens 識別到小票信息時，可快速提取小票上的金額，且可自動彈起計算器快速幫助用戶計算人均消費，節省人工計算的時間成本。
隨著信息入口從數字空間延伸到周圍的物理空間中，未來萬物皆可為用戶體驗的媒介，設計師未來在設計的時候需要注意：
尋找適合的打通真實世界的切入點：在陌生語言、信息復雜或者難以處理等苛刻的環境下，充分發揮智能設備對信息智能讀取、批量識別與翻譯等強大能力，幫助用戶完成任務；
將用戶旅程的上下游串聯：根據生活常識和經驗預判用戶行為目的，前置推薦服務；
更加系統細心地考量干擾因素：真實場景是動態變化的，需要更全方位考慮光線的強弱、多源的噪音、實體的可視性、人員和事件的打斷等因素。
2. 任務自動化，簡化用戶旅程
為了完成一項任務，用戶往往需要借助多個應用來回切換配合，使用起來瑣碎麻煩。如今應用越做越強大也越復雜，過去僅僅解決單一場景的解決方案不再適應于用戶對于完成任務的訴求。
Google Assistant 的新能力 Duplex on the web 可以通過自動跨應用任務處理來簡化用戶旅程。只需要用戶發出語音指令「預定一輛去某地的車」，助手便可自動跨郵件、日歷、付款等應用調取信息、自動根據使用習慣做選擇，并自動填寫信息，而用戶全程需要的只是在關鍵節點輕敲「確認」即可。
2019年隨著 iOS 13 的更新，「快捷指令」推出了「自動化」能力，用戶通過「if…then…」語法便可為自己的App設計一套程序，實現如：「當我回到公司時提醒我打卡」、「每天早上10點給我的女朋友發送一條表白短信」等能力，將不相關的場景動作串聯字一起自動化執行，大大節省人工操作成本。
提升使用效率是用戶體驗設計孜孜不倦努力的方向之一。在利用新技術進一步簡化用戶旅程時，設計師可以充分利用以下因素：
借助語音輸入：比起界面觸控操作，語音交互的直達性可以「穿透」復雜界面，讓設備第一時間明確用戶目標；
基于用戶行為形成習慣記憶：對用戶長期重復的行為做分析處理，構建用戶習慣模型并主動提供服務；
適當考慮專家級用戶：隨著部分用戶的智能設備使用水平越來越高，可以考慮為專家用戶提供自定義操作腳本，滿足其自身的獨特需求。
3. 基于情感感知，主動理解用戶需求
隨著人臉識別、表情識別、肢體跟蹤等技術的提升，機器逐漸學會感性語言，主動感知用戶內在情感和心理需求。
2019年1月的CES展上起亞亮相的互動式「情感駕駛空間」技術，可通過傳感器讀取用戶的面部表情、心率等反應，調整駕駛空間內的燈光、影片類型、音樂風格等，舒緩艙內乘客心情，由此提供更人性化的出行體驗。
用戶總是會期待更貼心的服務，設計師未來對同理心的情感嗅覺更加敏銳：
利用感性線索定位用戶情緒：需要通過面部表情、特殊時間節點或者識別到的關鍵詞，對用戶情緒進行理解和定位，判斷用戶情感理解用戶內心訴求是自由探索、趣味娛樂、或者靜謐修行并提供符合用戶當下心境的服務。
綜合使用感性元素進行設計：通過使用線條、色彩、聲音和動作等傳達并喚起相對應的情感，提供更加人性化的體驗。
4. 小結
更智能的服務提供方式會讓人們生活擁有更多可能性，但一旦火候把握不得當，可能就會造成對人們生活的野蠻入侵。關于如何讓科技更好造福于人們，早在上個世紀，施樂帕克研究中心提出了寧靜技術（Calm Technology）的愿景，認為影響最深遠的技術應該是隱匿不見的，它們如纖維般融入日常生活，絲絲入扣，直至不可分辨。
隨著科技的發展，設計師對新技術不應是不加克制地應用，而應該潤物細無聲般地提供服務，幫助人們從繁雜喧囂的數字世界中解脫出來，將寶貴的注意力資源投放在讓生活更美好的事物上。
回顧人類和機器的交流語言，從命令行界面、圖形用戶界面到自然用戶界面，人機交互方式越來越貼合人與人之間更自然的交流方式，其背后是心智模型與實現模型的高度擬合的趨勢。
在自然用戶界面中，為滿足新形態智能硬件對新接口的需求，以及人們對更豐富強大的交互方式的自然訴求，越來越多的自然用戶界面被開發出來。語音交互和隔空手勢交互便是近幾年迅速發展并落地的兩種交互方式。
1. 隔空手勢交互：更自由、更靈動
為了讓機器更好地讀懂用戶的身體語言，能夠感知深度信息的攝像頭走進了日常手機。2019年國內外手機廠商的發布大會上，LG 手機 G8 ThinQ 以及華為發布 Mate 30 系列推出的隔空手勢，可實現一些簡單的諸如滑動、切歌、截屏等效果。
除此以外，隔空手勢支持更加細微的手勢，如旋轉、揉搓等，可以更直觀、更靈活的方式操控界面，讓用戶獲得一種像魔術師用意念控制事物運作的快感。
對于隔空手勢操作網上的言論褒貶不一，其中爭議性最大的就是隔空手勢宛如「殺雞用牛刀」，明明可以用更加精準的手勢觸控，為什么還要用看似很酷炫其實精準度更低的隔空手勢操作？
隔空手勢并不是要替代觸控手勢成為主流的人機交互方式，更多是對情境式障礙場景的補充。在某些場景下，用戶使用設備的條件可能是充滿干擾的。想想看當你邊看手機食譜邊炒菜的時候、邊煲劇邊剝小龍蝦的時候、疫情期間出門佩戴橡膠手套無法正常觸控手機屏幕時…..隔空手勢是不是特別好用？
每個人在特殊的場景下都有可能面臨感官障礙，未來的設計也應該更多地考慮情境式障礙的場景，讓用戶無論身處何時何地依舊能一如既往無障礙地使用設備。
2. 語音交互：更精準、更好玩
語音交互作為更趨近于人與人之間最自然的交流方式，近些年有許多發展的突破點。
在發展主線上，語音交互趨向更自然、更人性化、更個性化。過去反人類的一些溝通方式慢慢被「調教」。此外，多人會話場景下的技術方案日漸增多。
2019的 Google I/O 大會展示了一個視頻片段，視頻中的兩位嘉賓相繼吐槽，經常出現針鋒相對難以聽清的時候，這時用戶可以調節音源音量選擇性增強自己關注的人物聲音，讓另一個人「靜音」。
△ 滑動選擇音源
此外，語音交互除了在智能音箱領域廣泛應用以外，也逐漸應用在廣告等更多的傳播媒介中，刷新人們日常使用體驗。2020年2月索尼提交了一項廣告播放新專利。當用戶在觀看電視節目時，如果出現廣告，只要站起來大喊廣告中對應品牌的名字，便可直接跳過這個廣告。
設計師在語音交互場景下，需要留意以下幾個比較容易被忽視的因素：
用戶語音交互習慣培養：如今還處于培養用戶語音交互使用習慣階段，設計師需要更多地考慮應用的語音交互規則如何才能更趨近于人們日常的溝通習慣，并進一步為人們的社會習俗所接納。
真實場景下的多人音源：在現實情境中， 在多人對話場景下將面臨音源不清、穿插停頓、噪音過多等影響體驗的情況，由于計算機聽覺分析能力開始從單人音源拓寬到了多人音源，多人對話解決方案上還有很大想象空間。
改變傳統的視聽體驗：在使用場景上，語音交互接口也將逐漸運用到更多的媒介上，更全面地刷新用戶體驗。
3. 小結
人類擁有雙手、眼睛、耳朵和發聲的嘴巴，但是并不總是在每個使用場景下都能自如地使用：在安靜的自習室下聲音收到限制，在駕駛場景下注意力受到限制，在雙手拎著東西場景下雙手受到限制……但目前許多產品設計都建立在用戶能完整使用感官功能這一理想化的基礎上。
未來的發展趨勢傾向于將視、聽、觸、嗅等多通道信息完美整合起來，綜合使用多種輸入通道和輸出通道，根據用戶使用場景用最恰當的方式傳遞服務，滿足用戶多方位的需求。
盡管喬布斯曾斷言3.5英寸是手機的黃金尺寸，但作為人們日常內容消費與娛樂的窗口，手機屏幕毫無疑問地變得越來越大，甚至超出傳統物理限制。人們對大屏享受的追求與設備攜帶便捷性之間的矛盾由來已久，硬件形態的變化對舊有的用戶體驗設計思路帶來的新的挑戰。
屏幕橫縱比越來越大，而人類的手部具有先天限制，曾經慣用的界面布局方式在高橫縱比的屏幕上可能無法被大拇指無障礙全覆蓋，使得越來越多的設計更加重視利用移動屏幕下半部分。
操作與信息進一步下移：
高德地圖、蘋果地圖的搜索框下移，方便單手操作用戶快速激活輸入框；
影視資訊平臺IMDB強化底部標簽欄功能，雙擊「搜索」tab即可激活輸入框，無須艱難地觸摸頂部。
即時戰斗類手游皇室戰爭的說明卡片主要展示在下半部分，方便用戶進行卡片上的相關操作。
底部導航被賦予更多能力：
Pocket的底部標簽欄現在兼任漢堡菜單功能，在激活狀態下再次點擊主頁icon可選擇主頁上須展示的內容。
利用下滑手勢代替點擊：
Snapchat的許多表示前后進退關系的頁面都不是」返回「按鈕，而是向下箭頭，用戶可下滑退出當前頁面。
為了解決設備形態和人類手部先天限制之間的矛盾，折疊屏誕生瀏覽并顛覆舊有的界面設計方式。
更靈活的信息布局
過去在單屏設計下，考慮到用戶注意力由上到下縱向衰減，因此信息布局更多是按照優先級從上往下排序。而折疊屏中，屏幕展開后便可以開辟出更大的可利用空間，將次級頁面或者較為重要的內容曝光在第二屏，對信息的布局將帶來全新的變化。設計師為保證大小屏下順暢的閱讀體驗，需要對信息模塊在不同空間布局下的流動性有更強的把控能力。
更便捷的多任務操作
在過去的單屏體驗中，用戶只能將注意力完全集中在當前的界面中，一次只做一件事。但在實際生活中，用戶面臨的情景往往是主線任務和支線任務的頻繁交錯，并且根據會任務不同的性質自由調動自己的注意力重心，如邊看視頻邊聊天、邊看直播邊逛街等等。在折疊屏中，設計師可以探索更多主線和支線交錯進行的場景，利用折疊屏帶來的更大的屏幕空間，可以讓用戶在不離開主線場景的基礎上進行支線任務的處理，大大節約了在不同App上來回切換的操作成本。
更直觀的拖拽交互
此外，隨著多任務處理越來越廣泛使用，拖拽交互將成為重要的交互模式之一。文本、表情包、圖片、視頻等交互對象，不再需要經過復雜的分享轉發流程才能在不同App中流轉，通過拖拽的方式可以更直觀地進行交互。
雙面屏互動玩法
外折疊屏在折疊狀態下可轉為雙面屏，等于是給用戶增加多一個觀看視角。例如華為 Mate X 的鏡像拍攝可以讓被拍攝者即時獲知自己的鏡頭影像是否滿意，這一拍女友神器有望成為直男拍攝終結者。在未來更多的多人觀看和互動玩法將被開拓出來。
△ 華為Mate X 的鏡像拍攝
未來隨著5G通訊技術的成長，越來越多的設備可以同時加入物聯網，人們的生活將被各種智能設備圍繞，設計師需要參與更多屏幕外的設計，讓不同設備串聯在一起協同合作，讓用戶能更加自在地享受科技的便利。
席卷全球的新冠疫情讓數十億用戶乖乖待在家里。過去需要花費大量精力去教育的用戶使用習慣因為疫情紛紛轉變。云購物、云蹦迪、云賞櫻、云監工……人們足不出戶便可還原許多線下場景。隨著用戶線上和線下生活的界限進一步模糊，用戶對于應用的效率和情感訴求也發生了變化。
疫情讓遠程辦公學習需求劇增，多人協作場景越來越頻繁，許多企業隨之升級了電話、視頻會議、文檔制作等多人協作效率軟件。過去僅僅考慮少人場景協作的方式不適用，設計師需要比以往更多地考慮多人協作場景下，如何對海量密集的信息進行分析處理和展示。
在學習方式上，由于線下學習轉移至線上，學生群體對于娛樂向軟件也有了效率訴求。為了順應用戶訴求變化，2020年5月QQ推出學習模式，屏蔽娛樂性的內容推送，讓學生更專注在學習上。
除了效率訴求急劇提升以外，隨著長時間的線上學習與辦公所產生社交疏離感和缺失感，人們對于線上學習工作的情感化訴求也進一步增強。
2020年推出的plagi遠程辦公軟件支持設置每個人的avartar形象，讓大家在遠程辦公時依舊能時刻感受到彼此的存在。在完成任務時還可以放鞭炮慶祝，讓員工能感受到親密無間的線上辦公體驗。
設計師需要更加關注如何讓線上生活進一步與現實生活圈和時間線接軌，通過拓展真實社交下的更多伴生行為讓線上也能還原線下的真實場景細節和互動體驗，以彌補用戶對真實社交的缺失感。
疫情的發生加速了人與信息之間的連接。人們越來越習慣將自身的身體資料、心情狀態等信息沉淀在智能設備上。
為了做好廣大市民群眾的健康監測服務，輔助疫情防控工作，微信和支付寶在2020年年初都上線了健康碼服務，不同顏色的健康碼代表人們不同的健康情況，市民出入特定場所都需初始健康碼。
隨著人的數據化越來越深入，個人身份信息的線上化在各平臺上將成為更加通用的能力。設計師需要考慮如何更自然更低成本地將線下動態變化的資料信息線上化，更有效地對用戶信息進行加工處理，以及記憶用戶的使用習慣和行為，以便幫助用戶更地完成任務。
疫情的出現加速了線下生活線上化，短短時間內我們看到日常習以為常的應用為響應疫情下的特殊需求紛紛出現改造，釘釘、QQ群被改造成上網課、批改作業的地方，醫療衛生公眾號開辟了實時疫情播報與辟謠通道，無接觸設計和服務需求異常突出……這也啟發了設計師需要保持對突發事件的敏感力以及應急能力，在日常生活中留心思考，為日后突發事件提供充足的場景支撐。
在洶涌的資本語境下，互聯網設計師裹挾在商業驅動的結果導向中狂奔，對設計的倫理和責任鮮有發聲，但伴隨著互聯網紅利退潮，發展放緩，狂奔之下的人本問題也逐漸浮出水面。在大趨勢下，UX設計師需要培養自身設計對倫理和責任的敏感度，在滿足商業目的外，重拾節操，為多群體，為大社會設計，更加注重「以人為本」。
包容性設計師指在做設計產品的時候，考慮到各類用戶的訴求，輸出具有包容性的設計方案。包容性設計依舊是2020年設計主題之一，伴隨著互聯網產品全球化，在通用性和包容性上也提出了新的要求。
為身障人士設計
三星在2019年針對東南亞市場推出了一款讓聾盲人士和健全人實時交流的app：Good Vibes，盲聾人輕擊屏幕輸入摩斯電碼，預先連線好的另一臺手機就會顯示從盲聾人發來的短信。健全人用普通的文字輸入回復，在盲聾人這一端就會翻譯成摩斯電碼、以手機振動的方式讀出短信內容。
GOOD VIBES宣傳視頻：https://v.qq.com/x/page/g3108sr8qc9.html
餓了么：在餓了么送貨騎手中，約8%受色盲色弱的困擾（全國男性群體中紅綠色盲色弱占比達8%-9%，餓了么騎手男性占比90%），為此餓了么設計團隊在2019年對app的進行了重新設計，包括使用WCAG無障礙色彩對比度，以及無障礙色盤，以及調整字階，使用輔助圖形等設計手段來解決部分騎手在送貨途中使用APP的痛點問題。
△ 餓了么UED：《為騎士創造平等 — 配送 App 的包容性設計》
跨年齡段設計
谷歌助手禮貌功能 ( Google Pretty Please ) ：開啟谷歌助手禮貌功能后，如果使用者在下達指令的語句中包括「Please」，谷歌助手會對禮貌的請求表示感謝，以此培養孩子的禮貌言行。
Google Pretty Please功能宣傳：https://v.qq.com/x/page/e3108ue3e2t.html
Swift Playground：當10后小學生VITA君的編程課被「可敬的發量」刷滿彈幕時，Swift playgrounds功不可沒，這款為兒童新手學習編程的軟件，用趣味的游戲方式為4歲以上低齡用戶提供了一個學習編程的低門檻平臺。
為性別平等而設計
蘋果emoji：回看歷年蘋果emoji的更新，從膚色平等，到性別、性向平等，再到為殘疾人設計，2020年再為跨性別者增加新表情，性別平等依舊是包容性設計中重要一環。
Airbnb插畫：愛彼迎在插畫系統中，也為不同膚色，不同職業，不同性別，以及身障人士進行了人物的繪制。
2019是互聯網科技隱私問題沉浮的一年，國外有Facebook因泄露隱私收到史上最大罰單，國內則打響了「人臉識別第一案」?；\罩在隱私信任危機下，個人信息和數據立法突飛猛進，美國推動《加州消費者隱私法案》，國內也將在2020年出臺《個人信息保護法》和《數據安全法》。
MIUI12推出隱匿面具功能
Android開放生態導致的權限隱私問題一直被用戶所詬病，某些APP存在用戶不授權就無法使用情況，針對這一情況，MIUI12推出了隱匿面具功能。當用戶在開啟某些APP要求授權權限時，可以選擇空白通行證進行授權，從而保護用戶真實信息。
在MIUI12的更新中，還推出了照明彈、攔截網兩項隱私保護功能
iOS 14剪貼板提醒
在iOS 14的更新中，保護用戶隱私方面進一步升級。
其中剪貼板提醒設計很貼心，當用戶打開應用，如果該應用讀取了你剪貼板的內容，會在系統頂部彈出提示，用戶能在第一時間意識到剪貼板內容被讀取，幫助用戶更好的保護自己的隱私內容。
科技的發展是一把雙刃劍，互聯網產品的發展給用戶帶來便捷和沉浸體驗的同時，也使得用戶沉溺于科技所帶來的惰性和投食之下，逐漸喪失了對真實生活的把控權，被科技綁架。
數字福祉（digital wellbeing）近年被頻頻提起，指科技產品需要權衡好數碼產品和真實生活之間的平衡，防止數碼產品過渡分散用戶的注意力而影響生活質量。
Android Q 專注模式 Google Android Q Focus Mode
Android Q的更新加入了專注模式，用戶在專注模式下，可以在系統層面快捷地關閉使你分心的應用，讓你聚焦于更重要的事情。
防沉迷系統升級
推薦技術的進步，產品體驗的升級，給用戶帶來了更合胃口的菜式和沉浸體驗，但同時也被冠上了「電子海洛因」的稱號。游戲或者內容產品的防沉迷系統依舊會是數字福祉下不可避免的趨勢。
王者榮耀在2020年升級防沉迷系統，對青少年的娛樂時間和點券充值的限制進行了進一步升級。承接話。B站在2019年推出青少年模式，在該模式下，使用時長和內容推薦等做了定制化處理。
2020年的UI設計趨勢，一方面是對往年風格的衍變和細化，另一方面，在扁平克制的界面風格盛行后，設計師們向往更自由、更突破的視覺表達。
1. 深色模式
2019年iOS 13深色模式姍姍來遲，緊接著大廠APP相繼推出此功能。在2020年，深色模式會繼續普及外，也會在可視性和實現成本方面有更多細節打磨和研究。
2. 新擬態
設計趨勢的發展是螺旋式上升的，在扁平化設計流行之后，對物體的擬真再一次回歸設計圈，新擬態以一種對舊擬物風格的再創新，重新流行起來。
新擬物風格（Neumorphism）緣起于設計師Alexander Plyuto發布在dribbble的一組作品，以投影重新對扁平界面進行了塑造，模仿出類似浮雕的視覺效果，感受耳目一新，引起大量設計師相盡模仿。
新擬態的實用性和可落地性有待商榷，但是作為一種新的風格受到設計師擁躉，也不失為下一波風潮到來前的靈感繆斯。
WWDC2020對mac OS的更新也重新定義了新擬態設計語言，在mac OS新系統Big Sur中，圖標的設計增添了輕微的漸變、投影、高光，以此來營造圖標內元素之間的縱深關系。
3. 多彩配色
在扁平簡潔UI風格盛行之后，豐富的色彩依舊是設計趨勢之一，大面積色塊，碰撞配色，帶來更具沖擊感的視覺體驗。
4. 字體裝飾化
UI界面逐漸扁平，色塊圖標弱化，為突出頁面重心和內容，iOS 11在界面標題上使用更大的字號，更粗的字重。近年在大標題的風格衍變下，文字在傳達信息外，也開始有了裝飾性作用，采用超大字體，成為頁面排版美化的一部分。
5. 更大圓角
大圓角的風格會繼續延續，相較以往，卡片的處理圓角會更大，隨之帶來的是多的留白處理，結合大字號，帶來更透氣通透的視覺感受。
Mac OS Big Sur的界面相對舊版本采用了更大的圓角；系統圖標的設計統一成圓角矩形。
6. 更豐富的插圖
UI插圖的豐富體現在樣式和內容上，樣式上開始3D化，內容上更注重插圖敘事的表達。
7. 3D插圖
3D圖形往年更多運用在動態影像或運營類設計中，隨著3D的普及運用，UI插圖也會迎來3D化，給用戶帶來更立體，更新鮮的視覺感受。
8. 講求敘事表意
相較于往年追求形式的UI插圖，新趨勢下的插圖更講求功能性，每一副插圖都承載一定的作用——傳達功能信息或透傳品牌情感；同時插圖更講求畫面表意和情節，給用戶敘事性的視覺體驗，增進用戶和產品之間的情感聯系。
9. 插圖組件化
插畫的流行，隨之而來的是成本的水漲船高——一套系列插圖為保持風格統一，往往由唯一設計師繪制，同時為兼容各類場景，設計師往往要繪制多張。
為解決插圖的成本和效率，插圖開始以組件化的方式進行繪制——插圖設計師將插畫進行拆分繪制——不同人物，不同場景，不同物件等，再通過組件化的拼接合成，使用組件的設計師可以根據需求場景自由組合，也避免了風格不統一問題。
設計師Pablo Stanley將日常繪制的插畫制成一套矢量插圖組件庫，將人物分為：半身、全身和坐姿3大類。通過不同表情、發型和服裝可自由搭配出近60萬種組合。
Pablo Stanley人物插畫系統：https://v.qq.com/x/page/s3108yeyhmt.html
10. 多維度動畫表現
新趨勢下，動畫一方面回溯復古線描手繪風格，另一方面追求更三維的體驗，同時幀率進一步提升，追求更流暢的視覺感受。
11. 手繪動畫
手繪插圖是往年的熱門，其隨性自然的筆觸，能給用戶帶來親切的感受，在新的趨勢下，動畫的加入賦予手繪插圖一份靈性和趣味。
12. 3D運動
Google Material Design通過卡片投影層級和二維動畫規律，賦予扁平界面Z軸的縱深感。隨著3D的普及流行，新趨勢下的界面，界面的運動從二維走向三維，表現出3D場景下透視感。
13. 高幀率動畫
高幀率影視從線下電影院移步到線上流媒體，手機高幀率屏幕從90Hz到120Hz逐步升級，用戶對畫面流暢的定義一再刷新，UI動畫的幀率升級也會是新的一輪趨勢。
Telegram的表情采用了高幀率動畫，給用戶更流暢的視覺感受。
體驗的持續升級，產品的高速迭代，對UX設計師的設計師效率提出了更高的要求。的設計方式是一個永恒的趨勢。
1. 從本地文件到云端協作
傳統的文件交接方式效率低下，導致設計師之間信息不對稱，最終影響產品的一致性體驗。近些年在線設計協同工具發展迅速，從UI設計、 設計交付以及組件協同等環節上給設計師提供更加實時的協作體驗，獲得大量UX設計師的簇擁。在2019 uxtool的設計工具調研中，在線設計協同工具佼佼者figma以其協作和性能優勢，大有追趕sketch之勢。
隨著團隊對設計效率要求的提高，設計文檔從本地走向云端協作是不可逆趨勢。不過設計工具的迭代是需要成本的，尤其在大型設計團隊，設計工具需要渡過陣痛期來完成迭代，進而提升設計效率和體驗一致性。
2. 科學有效的設計系統
UX的發展，從早期的靜態規范到當下的動態設計系統，是為解決產品迭代增速后帶來的設計效率和產品體驗問題。商業驅動下的產品迭代速度有增無減，設計系統依舊會是未來幾年的設計趨勢之一。
這里說的設計系統不是廣義上的設計系統，而是在互聯網設計的發展中，對組件化設計逐步迭代升華的一套設計協作方法：
「設計系統（Design systems）是一組為了共同目標而服務的內在相互聯系的設計模式和多人協同執行的方法?！梗ㄒ浴禗esign systems》，Alla Kholmatova，C7210翻譯）。
3. 設計系統歷程衍變
組件化的發展歷經規范文檔到UI組件，再到設計系統，形態從最初對設計一致性的指導規范，到對產品研發流程的規范，以及產品設計價值觀的輸出，當下的設計系統以集大成者形式影響整個產品的設計形態。
設計系統的結構見下圖：
4. 設計系統的求同存異
設計系統并非一成不變的，他是一個動態進化的系統，會根據團隊性質、產品特性在內容上有所區分——比如大團隊更應該大而全，小團隊更傾向小而精；成熟產品的設計系統更傾向于打造完整閉環的合作流程機制，新產品的設計系統應該以小為始，快速迭代……
隨著產品的垂直化，細分化，設計系統的趨勢會是在趨勢大同之下找到適合產品和團隊自身的形態和節奏。
Material Design是一個包含了指導規范、組件，以及設計開發工具的自適應性設計系統。
它作為平臺型性設計系統，更為大而全的規范了整個生態系統的設計風格，以及提供工具讓研發者能快速產出符合規范的產品。
△ Google生態龐大繁雜，Material Design更為全面
Ant Design作為一個為to B產品提供解決方案的平臺，更多從設計可用性和完整性考慮設計系統的搭建。
△ Ant Design通過模塊化解決方案，降低冗余的生產成本，讓設計者專注于更好的用戶體驗
QQ作為一款面向95后的2C社交產品，其設計系統Q語言從風格調性上對設計進行規范，同時給予設計師一定的自由度；也考慮到QQ內兼顧多個產品，以及界面主題樣式，對基礎組件的使用場景和代碼進行了規范，方便設計和開發敏捷開發。
Q語言，給予產品的自由調性之外，也針對主題和基礎組件進行了規范。
每個產品和團隊都有自身的特征，設計系統的建設也應該有的放矢，沒有可照搬的標準答案，在大方向下找到適合自身的解決方案才是的可行之道，將效率最大化。
5. 科學有效的優化迭代
組件是設計系統中的重要組成部分，但是以往靜態的、孤立的協作方式使得組件的更新迭代滯后和阻塞。隨著設計系統的發展，設計師組件化思維的普及，組件的更新需要更科學的方式進行管理。
Figma在2019年推出的Design System Analytics功能，組件設計師可以借此查看組件的使用情況，包括引用次數，解組次數等，并可以生成組件使用情況的曲線趨勢圖，以數據的形式，科學地推動組件的優化迭代。
選擇分析的時間段；組件使用的次數曲線圖；團隊使用情況；所有組件使用情況
未來的用戶體驗會出現什么新趨勢？人工智能等算法的發展、5G技術普及、新的智能設備形態、新的信息處理技術、新一代用戶的喜好和口味……這些往后或將影響用戶體驗發展的走向。未來用戶對體驗的要求只會越來越高。
用戶體驗設計師需要了解更多的技術動向，但安身立命之本還是讓用戶真正受益：立足于用戶真實使用場景，在理性價值層面上，打造可用、易用、的設計；在感性需求層上賦予情感上的愉悅性，在反思層面賦予意義價值。
文章來源：優設 作者：騰訊ISUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
目錄
1. Animista
2. Animate CSS
3. Vivify
4. Magic Animations CSS3
5. cssanimation.io
6. Angrytools
7. Hover.css
8. WickedCSS
9. Three Dots
10. CSShake
1.Animista
網站地址:http://animista.net/
網站描述:在線生成 css 動畫
Animista是一個在線動畫生成器，同時也是一個動畫庫，它為我們提供了以下功能
1. 選擇不同的動畫
我們可以選擇想要的動畫類型（例如entrance/exist），除了可以選擇某個動畫（例如，scale-in）外，甚至還可以為該動畫選擇不同的展示效果（例如： scale-in-right）。
2. 定制
Animista還提供了一個功能，允許我們定制動畫的某些部分，比如
duration
delay
direction
更好的是，可以選擇要設置動畫的對象:
3. 生成CSS代碼
選擇適合自己需要的動畫后，我們可以直接從網站上獲取代碼，甚者可以進行壓縮：
4. 下載代碼
另一個好用的功能是，可以把自己收藏自己喜歡的動畫，然后一起下載下來， 或者，我們也可以選擇將這些動畫的代碼復制到一起。
2. Animate CSS
網站地址:http://daneden.github.io/anim...
網站描述:齊全的CSS3動畫庫
想必這個不用介紹，大部分人都知道了。Animate CSS 可能是最著名的動畫庫之一。這里簡要介紹一下它的用法：
1. 用法
首先，必須在總需要動畫元素上添加類animated ，然后是動畫的名字。
<div class="animated slideInLeft"></div>
如果我們想讓動畫一直持續，可以添加infinite類。
通過 JS 來添加動畫：
document.querySelector('.my-element').classList.add('animated', 'slideInLeft')
通過 JQ 來添加動畫：
$(".my-element").addClass("animated slideInLeft")
2. 其它功能
Animate CSS提供了一些基本的類來控制動畫的延遲和速度。
delay
可以添加 delay 類來延遲動畫的播放。
<div class="animated slideInLeft delay-{1-5}"><div>
speed
我們還可以通過添加如下列出的類之一來控制動畫速度。
類名 速度時間
show 2s
slower 3s
fast 800ms
faster 500ms
<div class="animated slideInLeft slow|slower|fast|faster"><div>
3. Vivify
網站地址: http://vivify.mkcreative.cz/
網站描述: 一個更加豐富css動畫庫
Vivify 是一個動畫庫，可以看作是Animate CSS的增強版。它們的工作方式完全相同，有Animate CSS的大多數類且還擴展了一些。
<div class="vivify slideInLeft"></div>
使用 JS 方式：
document.querySelector('.my-element').classList.add('vivify', 'slideInLeft')
使用 JQ 方式：
$(".my-element").addClass("vivify slideInLeft")
與Animate CSS一樣，Vivify 還提供了一些類來控制動畫的持續時間和延遲。
延遲和持續時間類在以下間隔中可用：
<div class="delay|duration-{100|150|200|250...1000|1250|1500|1750...10750}"></div>
4. Magic Animations CSS3
網站地址: https://www.minimamente.com/p...
網站描述: Magic CSS3 Animations 是 CSS3 動畫的包，伴有特殊的效果，用戶可以自由的在 web 項目中使用。
這個動畫庫有一些非常漂亮和流暢的動畫，特別是3D的。沒什么好說的，自己去嘗試。
<div class="magictime fadeIn"></div>
使用 JS 方式：
document.querySelector('.my-element').classList.add('magictime', 'fadeIn')
使用 JQ 方式：
$(".my-element").addClass("magictime fadeIn")
5. cssanimation.io
網站地址: http://cssanimation.io/index....
cssanimation.io是一大堆不同動畫的集合，總共大概有200個，這很強大。如果你連在這里都沒有找到你所需的動畫，那么在其它也將很難找到。
它的工作原理與 Animista 類似。例如，可以選擇一個動畫并直接從站點獲取代碼，或者也可以下載整個庫。
用法
將cssanimation {animation_name}添加到指定的元素上。
<div class="cssanimation fadeIn"></div>
使用 JS
document.querySelector('.my-element').classList.add('cssanimation','fadeIn')
使用 JQ
$(".my-element").addClass("cssanimation fadeIn")
還可以添加 infinite 類，這樣動畫就可以循環播放。
<div class="cssanimation fadeIn infinite"></div>
此外，cssanimation.io還為我們提供了動漫字母的功能。使用這個需要引入letteranimation.js文件，然后將le {animation_name}添加到我們的文本元素中。
<div class="cssanimation leSnake"></div>
要使字母按順序產生動畫，添加sequence類，要使它們隨機產生動畫，添加random類。
<div class="cssanimation leSnake {sequence|random}"></div>
Sequence
Random
6.Angrytools
網站地址: https://angrytools.com/css/an...
如果使用不同的生成器，Angrytools實際上是一個集合，其中還包括CSS動畫生成器。
它可能不像Animista那么復雜，但我覺得這個也很不錯。這個站點還提供了一些自定義動畫的特性，比如動畫的持續時間或延遲。
但是我喜歡的是，我們可以在其展示時間軸上添加自定義的keyframes，然后可以直接在其中編寫代碼。 另外，也可以編輯現有的。
當我們完成的時候，可以得到完整的動畫代碼，也可以下載它。
7.Hover.css
網站地址: http://ianlunn.github.io/Hover/
網站描述: 純CSS3鼠標滑過效果動畫庫
Hover.css是許多CSS動畫的集合，與上面的動畫不同，每次將元素懸停時都會觸發。
一組CSS3支持的懸停效果，可應用于鏈接、按鈕、徽標、SVG和特色圖像等。
** 用法
它非常簡單:只需將類的名稱添加到元素中，比如
<button class="hvr-fade">Hover me!</button>
8.WickedCSS
網站地址: http://kristofferandreasen.gi...
WickedCSS是一個小的CSS動畫庫，它沒有太多的動畫變體，但至少有很大的變化。 其中大多數是我們已經熟悉的基礎知識，但它們確實很干凈。
它的用法很簡單，只需將動畫的名稱添加到元素中即可。
<div class="bounceIn"></div>
** 使用 JS
document.querySelector('.my-element').classList.add('bounceIn')
** 使用 JQ
$(".my-element").addClass("bounceIn")
9.Three Dots
網站地址: https://nzbin.github.io/three...
Three Dots是一組CSS加載動畫，它由三個點組成，而這些點僅由單個元素組成。
** 用法
只需創建一個div元素，并添加動畫的名稱
<div class="dot-elastic"></div>
10.CSShake
網站地址: https://elrumordelaluz.github...
顧名思義，CSShake是一個CSS動畫庫，其中包含不同類型的震動動畫。
** 用法
將shake {animation name}添加到元素中。
<div class="shake shake-hard"></div>
使用 JS
document.querySelector('.my-element').classList.add('shake','shake-hard')
使用 JQ
$(".my-element").addClass("shake shake-hard")
人才們的 【三連】 就是小智不斷分享的最大動力，如果本篇博客有任何錯誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。
代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
原文：https://dev.to/weeb/10-of-the...
交流
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
蘋果WWDC 2020在6月23日通過線上形式召開，本次開發者大會沒有發布太多硬件產品。不過macOS的新版本macOS big Sur依舊引來了大波關注，坦誠的講這次版本更新屬實是很震驚，這可能是近10年蘋果第二次顛覆性的改變，上次還是2013年的iOS 7開始全面扁平化，從而引發了設計圈「扁平擬物大戰」。
從系統連續性上看AirPods可以在不同設備上無縫切換，不同設備直接可以復制粘貼等等，顯而易見的一件事是，蘋果啟動了macOS的「 iOS化」，所以回歸到設計上，這次的升級對設計語言上的影響概括來說有以下幾個方面：
逐步 iOS 化的 macOS
不知道大家有沒有這種感覺：以前從諾基亞（或Android手機）切換到iPhone，動機是cool～，漂亮的外觀讓人第一面就愛上了，恨不得馬上就拿起來把玩?，F在給你個選擇切換回Android手機，不管那款手機有多漂亮多美好看，心里第一句話很有可能是：「XXX手機很棒，但我已經離不開蘋果的生態了哦！」（我就是這種德行，嘗試了N次還是回來了哈哈哈哈哈。）
這大概就是蘋果在系統打通的層面下的功夫，更加注重生態的維護，在不同的設備間尋找更多場景產生更多聯系。從設計的層面來看，iOS化的macOS對iPhone用戶更加友好，有相同的操作習慣，不必在mac和iOS上來回的切換。其實在Material Design推行的過程中就有相似的做法，Chrome的全面MD化，讓整個設計語言貫穿在移動設備和個人電腦中。
1. 完全繼承iOS基因的控制中心/通知中心和dock
全新的control center，可以看的出繼承了iOS/iPad OS的語言，UI和交互幾乎是沒有任何變化，整合系統一致性的初衷是甚好，在當下這個情況，不得不說亮度和聲音的調節我更依賴于物理鍵盤（或touchBar），不太清楚硬整合在一起的理由（難不成是過度解讀了，也許人家就想繼承繼承）。
從蘋果對產品的終局目標來看，也許會在硬件上取消物理控制按鍵或者更加優化 touchBar 去操控必要的屬性（也有傳聞說這是在為觸控版本的 macOS 做準備）。
同樣iOS化的通知中心（講真，用戶實際的桌面未必這么干凈，真是擔心本身在電腦側使用頻率就不是那么高的通知中心被混亂的文件夾淹沒）
2. 進一步強調的沉浸式氛圍
全局設計中最令我欣喜的是menu Bar的更進一步的優化！我在sketch里模擬了下效果（非嚴謹模擬哦），大概得出的結論是加高了背景模糊值，減少了本身的填充透明度，達到了現在的效果。
感官上來看的話是一個微小的改動，但從層級整合的角度這是蘋果設計的一大提升，通過光影等自然世界的隱喻抽象設計來減少硬性層級劃分，也符合Alan Dye（蘋果用戶界面設計副總裁）提出的「深度，陰影和半透明性用于創建層次結構」。
除了壁紙以外，圖標是最引人矚目的變化啦！iOS化的圖標規格的約束不用多說了，還有就是「新擬態」的第一次亮相。新擬態出現一定意義上是對這個時代獲取信息時枯燥感的厭煩與反抗，舉個例子：就像當你日復一日的穿基本款T恤的時候一定向往印花T恤，不管你是多么的成熟有型哈哈哈哈哈。
△ 左圖為新擬態，右圖為MD
icon的設計植入了新的設計理念，更突出去表現現實環境下的真實狀態，注重光影和厚度的變化，尤其是光影。細看每一個icon，嚴格遵循同一個光源（正頂光）去設計。
但話說回來，很難講這套icon是否成功，有幾個明顯的弊端也暴露出來了：
1. 可用性與美感的平衡
新擬態更重注光感的細膩程度，但對信息的有效呈現打了一定的折扣，這塊蘋果權衡決策下放棄了些許的美感，增強了有效的信息傳遞。
△ 圖片來源dribbble
2. 統一性
對一個生態來講，最最理想的是每一個生活在內的成員要和諧的相處，新的擬態風格相比扁平時代的圖標顯然給第三方開發者增加了難度，這種難度極有可能對沒有太多設計資源但又想好好開發應用的創業團隊造成一定的打擊（換句話說催生了設計外包的工作也不錯哈哈哈哈哈）。
總的來說，優勢和弊端同時存在吧，啥事都沒有完美的不是么～下圖是這次改版里我相對還比較喜歡的幾組icon了。
布局結構的簡化處理
從官方的HIG介紹中，sidebar被重點提到了。透過去看，其實是布局的底層邏輯發生了變化，10.15的時候上下兩段左右分欄的方式會存在一定的誤區：全局action控制當前試圖的交互？？？
從層級關系上也可以勉勉強強講得通，但實在是太牽強了，特別是前進后退按鈕存在所有文件之上這個蜜汁布局居然維持了這么久。層級清晰的梳理后帶來的一大優勢就是視覺的復雜性被降低了，借助現在這種列表視圖，很大程度上前進后退都用不到了。
另外要提及的是設計師可以思考的問題，下一代模糊效果-漸進模糊。這種模擬現實生活的真實模糊包括陰影/反光/相互透出，同時要考慮光源/角度/環境等等，不再單純的只是黑色/透明度（有興趣的話可以在sketch里模擬下或者留言討論討論～）。
人腦是需要一個提示來識別物體，我們稱之為反饋設計，這是人機交互中非常重要的一個環節，這也是為什么許多按鈕仍帶有陰影的原因。但是，這版本的macOS工具欄圖標丟失了形狀以消除視覺復雜性，所以重塑后的反饋會鼓勵用戶去操作。
對于設計師來講，不要害怕不強調所有選項，并非每個按鈕都需要具有形狀。只要設計足夠的反饋一樣可以起到被點擊的效果，例如當用戶將鼠標懸停在其表面上時，可能會出現更多的色彩更有趣的動畫，并盡可能消除視覺上的復雜性。
這次升級除了設計上的優化外，safari的變化也足夠令人欣喜，可以快速通過 tab 知道當前網頁的內容的功能真是令人欣喜（雖然我記得之前Yandex瀏覽器就是這么做的哈哈哈哈）。
可以預知時間地點的apple map：
悄悄的說，感覺蘋果越來越像騰訊了，有些小微企業的創新功能一受用戶喜歡不是買過來就是抄過來，有一種壟斷的感覺，想想悲催的Alfred和workflow都是這種命運。
macOS big Sur 的升級可以說是蘋果對未來的進一步探索，站在設計師的角度，有幾個值得學習的點：
文章來源：優設 作者：Nana的設計錦囊
毫無疑問，JavaScript是Web開發中最流行的編程語言之一。無論您使用的是React，Vue還是Angular，都只是JavaScript。圍繞JS展開了廣泛而重要的生態系統，提供了無數的框架和庫，可幫助你更快地開發應用程序。
但是有時候最好退一步，嘗試了解如何在沒有庫的情況下做事?？纯聪旅娴拇a片段，以優雅的方式解決簡單的問題，并在日常項目情況下使用這些知識或為編碼面試做準備。
1.反轉字符串
在此示例中，我們使用擴展運算符（…），Array的reverse方法和String的join方法來反轉給定的字符串。
const reverseString = string => [...string].reverse().join('');
// 例子
reverseString('javascript'); // 'tpircsavaj'
reverseString('good'); // 'doog'
2.計算數字的階乘
要計算給定數字的階乘，我們使用箭頭函數和嵌套三元運算符。
const factoriaOfNumber = number => number < 0 ? (() => {
throw new TypeError('No negative numbers please');
})()
: number <=1
? 1
: number * factoriaOfNumber(number -1);
// 例子
factoriaOfNumber(4); // 24
factoriaOfNumber(8); // 40320
3.將數字轉換為數字數組
在此示例中，我們使用擴展運算符（…），Array的map方法和 parseInt 函數將給定的數字轉換為一個單數的數組。
const convertToArray = number => [...`${number}`].map(el => parseInt(el));
// 例子
convertToArray(5678); // [5, 6, 7, 8]
convertToArray(123456789); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
4.檢查數字是否為2的冪
這很簡單。我們檢查該數字不是偽造的，并使用按位AND運算符（＆）來確定數字是否為2的冪。
const isNumberPowerOfTwo = number => !!number && (number & (number - 1)) == 0;
// 例子
isNumberPowerOfTwo(100); // false
isNumberPowerOfTwo(128); // true
5.從對象創建鍵值對數組
在此示例中，我們使用Object中的keys方法和Array中的map方法來映射Object的鍵并創建鍵/值對數組。
const keyValuePairsToArray = object => Object.keys(object).map(el => [el, object[el]]);
// 例子
keyValuePairsToArray({ Better: 4, Programming: 2 });
// [ ['Better', 4], ['Programming', 2] ]
keyValuePairsToArray({ x: 1, y: 2, z: 3 });
// [ ['x', 1], ['y', 2], ['z', 3] ]
6.返回數組中的[Number]個最大元素
為了從數組中返回最大元素，我們使用了一個箭頭函數，該函數獲取數組和我們希望函數返回的元素數。我們使用擴展運算符（…）以及Array中的sort和slice方法。請注意，如果我們不提供第二個參數，則 number 的默認值為 1，因此僅返回一個最大元素。
const maxElementsFromArray = (array, number = 1) => [...array].sort((x, y) => y - x).slice(0, number);
// 例子
maxElementsFromArray([1,2,3,4,5]); // [5]
maxElementsFromArray([7,8,9,10,10],2); // [10, 10]
7.檢查數組中的所有元素是否相等
在這個簡短的示例中，我們使用Array中的every方法檢查數組中的所有元素是否相等。我們基本上檢查每個元素是否等于數組中的第一個元素。
const elementsAreEqual = array => array.every(el => el === array[0]);
// 例子
elementsAreEqual([9,8,7,6,5]); // false
elementsAreEqual([4,4,4,4,4]); // true
8.返回兩個數的平均值
在此示例中，我們使用了擴展運算符（…）和Array中的reduce方法來返回兩個給定數字或一個數組的平均值。
const averageOfTwoNumbers = (...numbers) => numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0) / numbers.length;
// 例子
averageOfTwoNumbers(...[6,7,8]); // 7
averageOfTwoNumbers(6,7,8,9); // 7.5
9.返回兩個或多個數字的總和
要返回兩個或多個給定數字或一個數組的總和，我們再次使用擴展運算符（…）和Array中的reduce方法。
const sumOfNumbers = (...array) => [...array].reduce((accumulator, currentValue) => accumulator + currentValue, 0);
// 例子
sumOfNumbers(5,6,7,8,9.10); // 45
sumOfNumbers(...[1,2,3,4,5,6,7,8,9,10]); // 50
10.返回數字數組的冪集
在最后一個示例中，我們要返回數字數組的冪集。因此，我們使用Array中的reduce，map和concat方法。
const powersetOfArray = array => array.reduce((accumulator, currentValue) => accumulator.concat(accumulator.map(el => [currentValue].concat(el))), [[]]);
// 例子
powersetOfArray([4, 2]); // [[], [4], [2], [2, 4]]
powersetOfArray([1, 2, 3]); /
// [[], [1], [2], [2, 1], [3], [3, 1], [3, 2], [3, 2, 1]]
如你所見，使用JavaScript和一些ES6魔術來解決這些任務并不總是困難的。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
