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