盡管我們對COVID-19還不夠了解，但疫情流行已經為可穿戴設備、線上醫療和人工智能等數字健康的發展搭建了舞臺?？梢灶A見，到2021年，這些行業將繼續發展。
同時，一些非凡的自我監控應用程序繼續應用到可穿戴設備上，提供步數、睡眠、心率、血壓的即時可視化數據。這些復雜的功能可以讓用戶掌控健康，并獲知如何改變生活方式。
到2025年，全球醫療人工智能軟件、硬件和服務市場預計將超過340億美元。
線上醫療，即醫患病雙方開展虛擬咨詢。線上醫療之所以得以發展，是因為在疫情嚴重時期，提倡人們減少直接接觸。可以預見，衛生服務部門希望將醫療資源和資金分配給最需要的患者，而這種線上的方式將繼續的發展成熟。
還有人工智能，人工智能將賦能精準醫療、基因組學、新藥研發和醫學成像。以癌癥治療為例，借助人工智能的模式識別，醫生可以根據患者的基因組成和生活方式定制個性化的治療方案。
-------
虛擬現實（VR）是一項“未來主義”技術，在一段時間內很難成為主流，特別是其配件——Facebook的Oculus Rift、HTC Vive和PS VR等頭盔的價格居高不下。
然而，《半條命：愛莉克斯》等新發行游戲取得成功；能夠創造動態和創造性混合現實解決方案的開發者涌現；健康、展覽和娛樂藝術等非游戲市場的需求增加VR技術將再次崛起。
VR游戲行業的全球收入預計將從2017年的4億美元增長到2024年的24億美元。
那么，非游戲市場是如何適應VR的呢？在疫情期間，GDC 2020以VR形式舉辦了討論會，借助360度全景展臺、網絡研討平臺和聊天室，遠程與會者也能參加互動。2021年，預計會有更多的組織者利用這項技術來觸及全球更多的觀眾。
此外，為優化在慢性疼痛、焦慮和創傷后應激障礙方面的治療，VR技術在數字健康領域將有更多的應用。甚至，VR技術可能在劇院和博物館得以應用，讓文藝的大門幾乎對全公眾開放。
------
增強現實（AR）是另一種“未來主義”技術。AR越來越流行。想在花園里見到一只真實大小的長頸鹿？想看看宜家家具在室內的擺放？甚至想嘗試紋身？AR正以許多新奇的方式進入人們的生活。
AR產品的全球市場在未來四年內將激增85%，達到1650億美元。
蘋果公司已經在重建和重組產品，讓日常用戶更易上手使用。據美國《行業周刊》（Industry Week）雜志報道，蘋果這家科技巨頭正在研發數款AR產品
如：數字眼鏡可以與iPhone無線連接，將電影、地圖等內容發送給佩戴者。是不是很酷?
新的AR技術和應用出現，將刺激企業尋找能夠創建AR界面和圖形疊加的設計師。市場上出現了谷歌ARCore、Adobe Aero和XD(現在具有3D轉換功能)等低價的設計應用程序，讓沉浸式增強體驗設計日漸成為現實。
-------
用戶語音界面（Voice User Interface， VUI）無疑是2020年最熱門的趨勢之一。蘋果、谷歌和亞馬遜等知名品牌改變了搜索信息和使用智能家居設備的方式。
全球超過四分之一的線上人口正在移動設備上使用語音功能。
以VUI為例，要調暗燈光，只需說：“谷歌，調暗燈光”；或者也可以快速叫一輛優步，呼叫：“Alexa，叫優步。”這些語音命令現在已經深入到日常生活中，VUI技術的身影也正隨處可見。
VUI無疑是主旋律，將VUI作為UX組成部分的企業估計將越來越多。因此，企業將尋找設計沉浸式語音體驗的工具、技能和人才。
VUI是新事物，在設計應用程序或技術時，找到可以遵循的流程很不容易。但是，CareerFoundry從流行的設計思維中尋找方法，已經創建了簡單的VUI框架。所以，到2021年，將會出現更多用于設計語音體驗的工具和技術。
-------
微文案（microcopy）是UI上幫助用戶做某些操作的小段文字。沒有好的微文案會讓界面彼此脫節，會缺乏人情味。如果技術進步了，可語言缺乏人味，那么也難以和用戶建立良好的關系。
根據倫敦的《語言內容設計報告》（Voice and Content Design London），英國人口的平均閱讀年齡為9歲。
在2021年，UX文案撰稿人將會更加活躍，熟練的溝通風格會引起人們的共鳴。所撰的文稿引人入勝、獨具特點和令人信賴。因此，他們在產品開發過程中將扮演著重要角色。
出色的UX微文案將為虛擬助手增添人情味、為用戶查詢提供上下文語境、簡化反饋和引入人性化語言。Marshmallow、Gousto、Airbnb等公司的UX文案撰寫人員在這一方面尤為出彩。
-------
市場過度飽和，競爭激烈，要讓用戶選擇您的產品或服務，需要對他們的內在需求有更深入的了解。知道是什么觸動他們的心靈、什么是他們的痛點、什么能引起他們的反應，這些是提高產品活躍度和留存率的關鍵。
行為設計是一個刻意、系統地改變人類行為的框架。而這一框架需通過說服用戶改變物理環境和數字環境。到2021年，行為設計的需求將會增加，從而吸引用戶的注意力、增強社交圈子、改善健康、保持平靜的心態、鼓勵自我實現、讓人們走上正確的道路，擁有更好的未來。
那些經科學驗證能鼓勵行為改變的技術將幫助企業確定新的設計策略，提高產品的用戶生命周期價值；甚至能像蘋果智能手表的洗手檢測功能那樣，鼓勵人們采取新行為。
-------
2014年，劍橋分析公司（Cambridge Analytica，是一家進行資料探勘及數據分析的私人公司）丑聞啟發了全世界——個人數據變得越來越有價值，比原油更有價值！在數十億美元的行業中，技術平臺不斷在尋找新的方式來保持用戶的點擊量、閱讀量和分享量。
技術平臺可供用戶點擊、閱讀和分享，從而賺了數十億美元。
幾年來，我們討論了技術和社交媒體對人類的危害。Netflix在2020年上線的紀錄片《社交困境》，特別探討了社交媒體的興起及其對美國社會的損害，專家們發出了警惕。
采用保護用戶隱私的設計規范，創造出更多滿足用戶需求的“人性化”產品。如何在不詢問太多個人信息的情況下提供出色的體驗？還有，真的有必要讓用戶長時間停留在產品上嗎
-------
站在歲尾，我們翹首以盼，期待來年有更多令人興奮的產品、創新和身臨其境的體驗。隨著人們對生活方式和幸福感的認識不斷提高，新的發展將從數字醫療開始，選用可穿戴和遠程醫療的用戶將持續增長。
身臨其境的非游戲VR體驗越來越多，未來技術將獲得更多關注，甚至可能成為主流。我們可以看到通過“另一種現實”，參與展覽、娛樂，甚至參加辦公室會議的用戶越來越多。
然后，展望AR和VUI的新設計過程。您如果盡早學習工具和技能，就可以超越傳統的基于屏幕的體驗做出創新。此外，UX文案將在塑造產品UI中扮演更重要的角色。
最后，行為設計包含一系列認知科學，這些認知科學可以為設計師和研究人員提供不同的人性化設計理念。當然，應該使用合乎道德的方式來構建引導用戶的技術，從而確保用戶的心理健康和需求始終走在設計的第一位。
所以，2021年應該是UX不平凡的一年。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：一百percent
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
這是5月參加阿里設計周“智能與計算”分論壇后的感想小結，因為論壇大部分在講算法和實現方式，所以在這里我就其中的AI與設計相關部分做一些深入分享。
我的思路大概分為三個部分：AI時代的來臨；AI如何影響設計；未來的設計何去何從。
第一部分：聊聊AI時代來臨，設計的世界發生了什么變化？
每個時代的設計都有不同的定義，農業和工業時代的設計更多是指設計師通過手工制作的方式闡釋自己對美感和藝術的理解。
到了信息時代，設計除了要考慮美感，還要考慮是否實用和好用。設計的對象開始從真實世界轉向數字世界，設計思想開始考慮以用戶為中心的設計；設計方向也增加了很多領域，包括都多媒體藝術、游戲設計、網頁設計、移動應用設計等。
在人工智能時代下，AR設計、智能硬件逐漸發展，設計的改革更多考慮的是如何將真實世界和數字世界進行融合，如何在自己產品上更好地闡釋藝術、美感和實用性。
第二部分，AI如何影響設計，設計因為人工智能而產生了哪些改變呢？
結合論壇的內容，我覺得從以上五個方面產生了較為深遠的影響。
人工智能幫助設計師解決在創意過程中面臨的一系列問題，將重復勞動變得自動化 ，節省設計師大量的時間，減輕設計師的工作量。
數據驅動自動生成，取代人工建模，減少了設計的時間成本。通過組件標準化，來構建三維幾何，然后geometry格式入庫，最后由渲染引擎繪制。
再比如，雙11期間有1.7 億個BANNER，都來自阿里的“鹿班”AI設計系統。設計數據—機器學習、訓練模型—生成設計結果并評估。如果這些工作量由人工來完成，那么設計師真的就成了“沒有感情的作圖機器”了。
當今社會，隨著產業智能的發展，在這個變革中，挑戰不單單來自技術，也來自客戶對智能數字體驗的極致追求。這給開發人員和設計師都提出了全新的難題，在可視化領域，通過技術和設計兩個角色更緊密的捆綁，產生了讓人欣喜的化學反應。
從原始數據到圖表并不是直接的，它需要經過交互的分析，得到指標結果，最終以可視化圖表呈現，而呈現的視覺方式是多樣化的。
這就是所謂的兩種數據，三層講述：
第一步是原始數據的準確轉譯，工具需要數據對接能力，即對現狀的講述。
第二步是分析過程，從腳本模式跨入數據驅動，讓數據的分析變得可知可信。
第三部是觀點數據的表達，也就是創作強化，將結論以可視化的多樣形式被表達。
這是根據地圖的原始數據得到的多種可視化設計方案，同一份原始數據，卻得到了不同的形式表達。
因為僅僅有準確的數據結論是不夠的，因為數據需要更好地被講述和表達，如果僅僅將數據呈現給用戶，那么理解難度將會大大提高，而設計是為了讓產品變得更加容易使被理解和使用。
第二點，體現在建筑的三維可視。
首先，在二維地圖選取建模范圍，通過智能化的處理，根據數據構建初始的三維地圖。
然后通過數據聯動，將城市建筑虛擬還原。
整個過程從數月—> 數周—> 數天，時間大大縮短，人力成本減少，釋放更多的精力去進行創意工作。
建筑三維化的應用：比如車道級地圖。
相比于傳統地圖，車道級地圖導航在信息精細度、定位準確性、動態信息豐富度上有大幅提升。
車道級導航能清晰顯示道路上的虛實標線、自己的車行駛在哪條車道上，還能在地圖上看到車身攝像頭和雷達檢測到的周圍車輛、錐桶、防撞桶等。
當設計對象從單個產品轉變到用戶的經歷和當前環境時，設計師不能只考慮自己的產品體驗，需要從大局出發，思考每個產品之間的聯動，考慮不同場景下自己的產品如何服務用戶以及如何與其他產品聯動。產品設計從單體變成一塊需要考慮兼容上下左右外部環境的拼圖。
智能化的場景的改變對設計有哪些影響呢，我們來看這張圖：設計的場景從有形—>無形、靜態—>動態、永恒—>瞬間的轉變。體驗設計的趨勢從GUI到TUI(實體交互)，再到Radical Atoms，場景的改變對設計的影響維度不是單一的。
設計場景在AI時代不僅局限于手機，還涉及到實時場景的設計情況。
比如谷歌的實時翻譯、語音翻譯。輸入與輸出是同步進行的，這就對設計提出了新的要求。
此外，還有語音智能VUI，徹底打破了以往的交互體驗，改變了人和工具之間的互動關系，反向塑造著人類的認知方式和學習行為。下面來看一個小愛5.0案例：
對話是人與人之間交換信息的普遍方式，語音交互設計涉及系統學、語言學和心理學，因此它比 GUI的交互設計更加復雜。
體驗設計經歷了PC時代、Mobile時代，現在進入IoT體驗時代。設計的解決方案與技術的發展息息相關，設計和技術互相促進帶來新的體驗革命，設計師一直在探討和實踐在新技術環境下的新體驗設計，并基于出行、醫療、社區、政務等行業持續挖掘服務聚合模式與場景體驗的創新。
在新零售的場景下，購買和支付流程發生了改變，這就需要設計師重新思考消費者的心理地圖。例如無人零售、Amazon Go、支付寶IOT支付等等。下面來看一下Amazon Go的案例：
如何讓用戶使用更便捷、體驗更順暢；要向用戶提供什么樣的服務，如何讓用戶注意到我們的產品，如何向他們傳遞企業的服務價值和特點，這是IOT新零售下需要設計深入研究的方面。
在云端實現企業產品的全區域管控，監控的設計視覺和交互又是不一樣的，比如論壇上的案例：荷魯斯之眼、全區域覆蓋的云監控等等。
通過對多個實體空間中的數字設計探索，重新塑造人與空間的交互界面，提升人們對于空間的使用體驗。下面舉個例子：
AT&T discovery district是一個數字化的互動商業社區。
它從重新審視建筑本體開始。通過虛實和光影的變幻，營造出了實體空間體驗，空間本體就是對話的那個界面。實體空間和數字內容的結合，構建出人與建筑之間新的交互界面。
廣場的數字球體入口，人的位置和數量變動，球體內的燈光也會跟隨變動。
人工智能促使了交叉學科的工種產生：數字體驗設計師、創意工程師。這兩種職業是做什么呢？面對正在到來的智能時代，體驗設計師和創意工程師將共同面對“AI”這一全新的命題，在智慧工地、智慧教育、數字警務室、神經符號AI等應用中，提煉出智能感設計方法、利用圖形技術能力自研產品并賦能業務。
數字世界中的設計師：橫跨了藝術、文化、科學、商業多個學科；從傳播學、心理學、應用科學和統計學進行用研，去解決用戶遇到的問題。
它不僅涉及到需求分析和產品設計，還貫穿至產品運維、測試、發布、分析，從設計洞察中做出創新設計。
未來的設計師將融合人工智能和創意編程技術，在世界數智化的大潮中找到新的定位和新的機遇。
第三部分，在人工智能時代下，未來的設計會走向哪里？新時代的設計師怎樣找準自己的定位呢？
人工智能的成熟對部分設計師來說簡直是災難性的打擊，之前無論是通過技法還是數據分析才能完成的工作，人工智能一下子就可以完成，后續根本不需要這么多設計師來完成這些工作。那么設計師是否會被人工智能取代？我們先來看一張人類能力地圖：
這張圖中，海拔高度代表這項任務被計算機執行的難度，不斷上漲的海平面代表計算機現在能做的事情。從圖中可以看出，目前人工智能水平預警線距離代表藝術的山峰還很遠。
人工智能沒有人類的跨領域推理、抽象類比能力，也沒有人類的主觀能力如靈感、感覺和感受；更沒有人類特有的靈魂、愛、意識、理想、意圖、同理心、價值觀、人生觀等，這導致人工智能在未來很長一段時間內都無法很好理解人類的心理和行為是什么，在解決推理和情感問題時會不盡人意。
設計除了解決問題外，還涉及對美的理解和創作，美感是對美的體會和感受，它是復雜的，包含了歷史、文化、環境、情感等客觀因素和主觀因素，所以在不同的時代、階級、民族和環境中，有著不同文化文化修養和個性特征的人對美的定義也不同。
人工智能依賴數據和經驗解決問題，它能解決大部分智力可解決的問題，但解決不了需要情感和美感才能解決的問題。而設計的擅長領域，是人工智能不擅長的：跨領域推理、抽象能力、常識、審美、自我意識與情感。那么AI與設計的關系怎樣的呢？
設計是為了解決問題。人工智能使機器代替人類實現認知、識別、分析、決策等功能，其本質是為了讓機器幫助人類解決問題，也就是說，人工智能在一定程度上也是一種設計，它會創作出與人類思維模式類似的解決方案。所以AI與設計師是一種共生關系。因此設計師不用杞人憂天，擔心自己被人工智能取代。
隨著AI 技術的成熟，設計必定會發生新一輪的變化，在未來，更多領域和行業需要用到界面設計、人機交互等技能，各行各業的設計師需要掌握以上技能才能更好地服務當前業務。那么未來的設計將走向哪里呢？
新一代的設計師是“與互聯網共同成長的一代”，相信在未來幾年里有更多的新晉設計師會掌握編程開發能力以及其他能力，綜合素質會比目前的設計師更強，所以我們要保持終身學習，懂得如何將自己的能力和經驗轉換為優勢，這樣才能在設計道路上不被超越。
那設計師可以從哪些方面來應對智能時代的機遇和挑戰呢？
每一代人都有被下一代人取代的風險，但有些很厲害的人就不容易被取代？因為他們在不斷創造價值。無論在社會、行業還是在企業里，當具備一定的影響力后，他們能更容易積累人脈和資源，然后反哺自己的價值，就跟滾雪球一樣，當雪球越大，他們越不容易被別人取代，設計師需要有這樣的意識。
設計師需要懂得更多領域的知識和技術才能拓寬自己的視野，這些領域包括但不局限于傳感技術、網絡技術、智能仿真技術、虛擬技術、生物技術、納米技術等。因此科學與藝術是可以并且很有必要相通與交融的，設計師一定要學會跨界思考。人工智能時代下，數字世界和物理世界會逐漸融合，大到城市建設、公共服務、衣食住行和醫療；小到智能家居、穿戴式設備，這些機會將會留給已準備好的挑戰者，所以設計師一定要拓寬自己的視野，不要把自己的目光局限在界面設計上。
如果不想被人工智能領先，人類的設計應該是創新的（未成熟、未被發現規律的），包含更多元素的（更多復雜參數如歷史、文化、環境、情感等），“設計”這個詞語就涵蓋了以上元素。人工智能在藝術設計上還遠遠達不到人類的水平，深耕藝術設計將會為設計師帶來更多機會。
在人工智能時代下，當產品基本都能滿足永不需求時，能為產品帶來活力和差異的除了自身的底層技術基礎，更多的是藝術型設計師的理念和風格，以及自身的品牌。就像時尚品牌優衣庫和Gucci，單件商品兩者的品牌和設計所帶來的的利潤差距巨大，相信未來的人工智能產品也會面臨類似的問題，設計師應該考慮如何為產品賦予更多價值，如何彰顯用戶的個性。
既然AI是一個強大的工具，那么我們要思考如何運用它來創造更多的價值。AI能夠快速便捷地獲取大量信息，幫助設計師拓展自己的視野，不斷更新自己的世界觀，從新的視角看待問題和解決問題。除了快速獲取信息外，設計師也應該考慮如何通過AI提高自己的工作效率，例如哪些純勞動力工作交給AI去做效率會更高；哪些工作可以和AI一起協同完成更能激發創意。
最后，用一本科普書改編的話來結尾：一想到，還有95%的問題留給開發同學，我就放心了。
最后附上一張本文的腦圖：
參考資料：
[1]阿里設計周.智能與計算.2021
[2]薛志榮.AI改變設計.2019
[3][美]詹姆斯·弗拉霍斯.智能語音時代.2019
[4][美]梅瑞狄斯·布魯薩德.人工不智能.2018
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
智能家居越來越普及，智能化的生活是由一個個智能設備組成，這次通過近距離體驗智能面板，來研究一下它們是如何提升產品體驗的。
隨著互聯網的發展，生活智能化越來越普及，各類智能產品逐漸出現到人們面前，在體驗的過程中，其實里面有很多細節需要深挖和思考。很多產品細節的背后都是為了提升用戶操作效率、兼容用戶使用場景、滿足用戶情感表達，以最終達到對用戶體驗的提升。作為智能產品的設計師只有充分了解市面上的智能產品，才能設計出更好的產品。
開關對于每個人都不陌生，它用來控制設備的狀態，傳統開關的數量和要控制的設備數量有關，設備越多，開關越多，為了簡化人們的操作，智能面板孕育而出，它不僅可以操控家中單獨的設備，還可以對一系列設備進行聯動控制。
1. 使用場景
室內近場控制，滿足用戶家中近距離控制設備的場景。
2. 產品選擇
Gira、ORVIBO、綠米
為什么選他們？
3. 研究方向
本文將從結構、色彩、手勢操控方式、卡片形式、功能點這些方向展開分析。
Gira g1
TFT 屏、KNX 協議、定價 8000 元起
KNX 屬于歐洲總線技術，穩定性最好，需要從設計階段介入，高門檻的技術要求讓 KNX 難以實現全民普及。
ORVIBO 智能開關
多點觸控電容屏、Wifi、藍牙、Zigbee、定價 899 元
Wifi、藍牙、Zigbee 屬于無線通信技術，穩定性不如 KNX，但免布線，易擴展，利于全民普及。
Aqara 智能開關 S1 觸摸屏
IPS 屏、zigbee 協議、定價 899 左右
通過以上分析，Gira 的人群定位是有全屋定制需求的高消費人群，其他兩個品牌的人群定位是面向嘗鮮體驗的廣大普通消費群體。
1. 功能點對比
通過功能列表中的對比發現，三個品牌的產品都通過場景聯動設備執行來提高人們的操控體驗，通過左右滑動來快速切換功能模塊類型；
Gira 和 ORVIBO 支持快速返回首頁、面板內排序；
ORVIBO 的個性化體驗最好，它具有語音控制、設備自動添加、設備自動歸類功能，這些差異點讓它比其他兩個產品更加智能。
以 Gira G1 為例，從結構、色彩、手勢操控方式、卡片形式、功能點這些方向展開分析。
界面整體用以黑白灰為主，搭配少量顏色，給人簡潔干凈的感覺；
思考：智能面板除了具有功能屬性，還具有裝飾屬性，黑白灰為經典搭配，可以更好兼容各種家裝風格，還可以更好的展現內容；少量的顏色用來強調正在運行的設備狀態。
輔助色大方向上使用兩對互補色，在色環上形成了一個矩形，通過調節亮度飽和度達到統一和諧多彩的效果。
主要分為 2 大層級：功能卡片列表、設置為第一層級，設備控制為第二層級；
對于 gira 這種全屋定制的產品，家中一般會有很多設備，功能卡片放置在第一層級的好處是，便于用戶瀏覽鎖定目標功能卡片。
區域 1 顯示 KNX 協議類型，室內外溫度，時間；這部分內容占比很小，說明這些內容用戶不常用，但用戶會偶爾還是會看一下；
區域 2 為房屋名稱，返回上一級、返回首頁、設置、展示形式切換，這一區域全局置頂顯示，用戶在多級操作后，可以很快速的返回到首頁；
區域 3 顯示設備、場景的數量，用戶可以清楚的掌握家中設備場景的數量；
區域 4 為設備場景列表，用灰色背景來強調主操作區域。
一屏最多 6 個設備，通過左右滑動來展示更多設備
思考：為什么不是上下滑動，而是左右滑動
有 2 點猜測：
卡片內容從上到下依次為設備場景 icon、名稱、狀態及快捷操作；
用戶可以通過 icon 快速鎖定設備類型，通過名稱確定目標設備，進行快速操作；
各功能模塊獨立劃分，快捷操作區域可以很好的兼容不同設備的功能鍵。
操控界面劃分為 2 部分，一部分為信息展示區，內容為設備名稱、所屬區域；
另一部分為控制區，這部分區域固定，可以讓不同的設備控制看起來更統一；
大面積區域留給核心功能，輔助功能布局在四周，便于用戶準確操控。
設備控制界面通過左右劃動快速切換其他設備，不需要返回菜單界面。
手掌長按屏幕，可喚起提前設置好的開關功能，這時面板相當于簡單的開關，可以很快速的關閉開啟所在區域的燈。
Gira 這樣做還原了開關的本質，當想要開啟或關閉該房間內的燈時，就不需要到菜單界面找這個設備了。
燈
燈操控界面用刻度形式表現，每一度為一個刻度，并且還可以通過中間的加減號進行精確到 1 個百分比的亮度微調，品牌方想為用戶打造成清晰準確調控的形象；
但在實際使用場景中，我們不大會對燈進行這么精確的調節。
溫控器
溫控界面同樣可以精確調節，每 0.5 攝氏度為一個刻度；
溫控的精準調節，就比較貼近我們日常的使用習慣，溫控器控制界面是沒有開關的，因為目標人群家中多數是中央空調，隨便就可以關閉，對于大戶型的用戶來說是不友好的。
右下角的定時按鈕可以讓設備在特定時間內以某一狀態運行。
窗簾
窗簾的狀態值與操控條左右排列，這樣的排布好處是可以讓操控條長度最大化，便于用戶控制；
窗簾控制界面只分為有調角度的和沒有角度的；
窗簾操控條豎直排列，向上滑到頂部為窗簾全開，滑到底部為全關；
窗簾的行程和角度都用百分比的形式展現。
設計設備控制界面的思考方向一般有 2 種：
1. 界面控制方式要和設備的實際運行方式一致
這種思考方向要考慮實際窗簾有左右運行和上下運行之分，上下劃動的操控方式來控制左右運行的窗簾會有認知上的偏差；
百葉簾的角度有正向和反向轉動之分，如果只按最后的遮光百分比來做，會造成設備兼容問題。
也就是說為了模擬真實的操控方式，需要設計出若干不同種類窗簾控制界面。
2. 界面控制方式與設備運行結果關聯
這種思考方式不需要考慮窗簾的種類及開合方向，將所有種類的窗簾行程及角度歸為開、關兩種結果狀態，
就像 Gira 這樣，只需要做兩套界面就可以兼容幾乎全部的窗簾設備。
Gira 豎排控制條的優勢
如果橫向布局，那么左右滑動切換設備時，會觸發控制條左右手勢，造成誤操作。
背景音樂
設備列表中背景音樂卡片的快捷按鈕很特別，由靜音、播放、下一曲組成，我們設計的時候一般會做成對稱的：上一曲、播放、下一曲，Gira 并沒有這么做，因為在背景音樂的使用中，一般有幾種需要快速響應的場景：用戶在家中發起臨時談話，需要暫時安靜一下；不想聽了；這首歌的風格不喜歡；
背景音樂操控界面功能和音樂應用差不多，唯一不一樣的是，底部可以快速切換歌單，可以很快速切換不同音樂風格。
文件夾功能
隨著設備、場景的增多，用戶可以根據自己的喜好將設備或場景歸類放置，便于快速定位功能卡片；
點擊文件夾卡片，進入到顯示著眾多功能名稱的文件夾界面，點文件夾，才能進入功能卡片列表，為什么要多一個文件夾查看的界面。
我們想象一下有這樣一種場景：面板中有幾十個功能卡片，用戶想開啟娛樂場景，這個場景好像在客廳文件夾或走廊文件夾里，于是去客廳文件夾快速翻看這里面有沒有，再點進去操作。
Gira 這樣做符合用戶在功能卡片多的情況下快速選擇的習慣。
排序功能
可以通過拖動來調節設備卡片在菜單中的位置，省去了去后臺設置的步驟；
定時功能
定時列表用具象的時鐘來體現開始運行時間，還用黑白來區分夜晚和白天，對于用戶來說掃一眼圖片就可以知道運行時間，這種體驗很好。
以 ORVIBO Mix Pad 為例，從結構、色彩、手勢操控方式、卡片形式、功能點這些方向展開分析。
整體運用深色色調，使用幾何圖案作為背景；
用白色體現基礎信息，用色彩強調設備場景的狀態及天氣信息；
運用圓角元素，更加生活化。
顏色運用比較豐富，以藍、橙兩互補色為主，其他顏色分別為它們的鄰近色；既能保持強對比，還能讓顏色變得柔和。
主要分為 2 大層級：首屏、設備控制界面、場景列表、鬧鐘為第一層級；設備類型、設置為第二層級；
智能面板一般裝在墻面，用戶站立操作，用戶不可能花太長時間來操控；
歐瑞博的人群為廣大普通消費群體，家中的設備不會太多，設備控制界面層級前移，可以方便用戶直達控制區，用完即走。
首頁主要分為 2 個區域：
日期天氣區
時間、日期、天氣狀況信息，可以滿足用戶日常出門關注的內容，并且在這個區域有多種表現形式供用戶選擇，既保持個性化還不失統一感。
快捷控制區
可以將常用的功能置頂在首頁展示，最多設置 2 個，用戶在首屏既能看到日期天氣還可以控制設備，大大提升了屏幕的利用率和用戶的操作效率。
這樣做的好處：
當用戶準備出門時，看了一眼面板上的天氣，點一下關玄關燈，就可以直接出門了，不需要滑到燈的菜單界面找到玄關燈然后再關閉它，真的很方便。
底部有向上滑動提示，告訴用戶下面還有重要內容。
卡片內容左右排布，從左到右依次為 icon、名稱及狀態、快捷控制，這種排布的好處是可以縮小每個卡片的高度，從而提高屏幕利用率；
但有個問題就是，左右排布的方式，內容最多呈現 4 個文字，需要考慮這幾個字能否清楚的定義該卡片功能。
上滑可以查看全部功能卡片，給用戶在手機上瀏覽信息的熟悉感；
在新的操控設備運用用戶熟悉的交互方式可以降低用戶的學習成本；
移動端上常見的手勢對應結果有：左右滑——代表切換，向下滑——代表喚起相關功能設置，向上滑動——瀏覽更多信息。
用戶在首屏左右滑動就可以切換不同功能模塊，不需要返回上一級，在設備類型少的情況下，這種盲操會比較方便。
下滑進入功能類型選擇、系統設置界面，這一區域相當于導航，可以實現功能模塊間的快速切換。
多種手勢的組合可以在有限的屏幕內操作更加靈活，但手勢太多會帶來一些問題：
針對以上問題解決的方法可以是：
場景卡片分為未激活、運行中、運行結束三種狀態；
場景運行狀態變化在卡片 icon 區域體現，既傳達了運行的過程，又不會打擾到用戶。
點擊卡片列表最底部的編輯按鈕，可以選擇將某一功能卡片置頂到首屏，方便用戶快捷操作。
將普通燈、場景、門窗等操控方式相近的設備進行了歸類顯示，并且和空調、色溫燈、背景音樂等設備放置在同一層級；
從交互體驗層講：由于家里的普通燈、場景、門窗的操控方式簡單統一、數量多，按照類別整合在一起便于查找控制；
從視覺層講：設備操控界面布局形式多，會給用戶造成整體視覺上的不統一，增加學習成本。
空調
空調控制界面，只能通過左右滑動以整數的形式來調節溫度，開啟中的時候，背景會有對應模式的色彩氛圍效果，給用戶更直觀的感受；
底部只保留用戶最常用的模式、風速、風向三個功能。
色溫燈
色溫燈界面默認為用戶推薦 6 種不同場景下使用的色溫選項，底部提供亮度調節功能，用戶只需要去選擇，大大縮短了用戶的操作路徑。
個性推薦在電商類產品中很常見，推薦機制基于對用戶行為習慣的分析，需要強大的后臺數據支持，智能家居這一塊通過窮舉用戶生活中的設備使用場景、目的從而提煉出對應的功能選項可以大大提升產品使用體驗。
窗簾
窗簾控制界面采用半寫實風格，給用戶更加直觀感受，學習成本低，拖動窗簾區域就可以進行行程的控制，由于沒有微調按鈕和行程狀態百分比，所以無法做到窗簾精準控制；
選擇這種寫實的設計風格，需要考慮設備控制界面布局、樣式對新增窗簾類型的兼容性。
背景音樂
背景音樂默認界面只保留了當前播放音樂封面元素，更多復雜操作被隱藏到了下一級界面，用戶在當前界面可以進行暫停、播放、收藏等簡單操作；
在小屏幕中做設計時，有時候會在一個層級界面中堆砌許多功能按鈕，使界面變的臃腫，一來容易讓用戶誤操作，二來讓用戶找不到重點功能，操作效率低下；
我們在處理這些信息時應該結合使用場景，按用戶的使用頻率進行權重劃分，將權重低的進行隱藏處理，突出核心功能，減輕用戶操作負擔。
智能家居廠商大多都是靠賣硬件賺錢，歐瑞博巧妙的運用會員機制結合背景音樂功能來售賣音樂服務（49 元一年），更加具有互聯網商業思維。
在語音設置中，可以選擇是否開啟語音控制，系統默認 2 組喚醒詞激活語音控制；
歐瑞博為用戶提供了更便捷的語音控制功能——快捷口令，說出指令就可以快速執行，由于沒有房間、設備名稱的限定，這個功能只能實現面板內所有同類型設備的開或關，適用于小戶型簡單的場景。
傳統上添加一臺新設備需要：選擇要添加的設備——選擇網關——輸入正確Wifi密碼——進入設備配網流程——配網成功——設備名稱設置，操作流程繁瑣，中間稍微有些環節沒有操作對，最后就無法成功添加設備，歐瑞博通過簡化中間過程，成功解決了這一痛點。
用戶可以在面板中直接設置首屏的風格樣式，系統一共有 3 種風格外和一個隨機演示選項供用戶選擇，并且這三種風格的功能架構是一樣的，只是對背景圖、元素大小、布局做了設計區分。
以 AQARA S1 為例，從結構、色彩、手勢操控方式、卡片形式、功能點這些方向展開分析。
整體使用黑色做背景，用白色體現基礎信息，底部的色塊元素貌似起裝飾作用，和天氣情況并沒有聯系；
首屏主要分為日期時間和環境狀況 2 個區域，天氣、溫度、濕度、空氣質量信息并行排列，個人認為用戶對這 4 個信息的關注度是不一樣的，看看我們手機上的天氣 app 的信息排布就知道了，這樣并列排布會讓用戶分不清主次。
顏色以藍色及其鄰近色為主，搭配少量的對比色，整體色調統一。
主要分為 2 大層級：首屏、設備控制界面、場景列表為第一層級；設置為第二層級；
形式和歐瑞博一致，都是為了讓用戶更便捷的操控；
但進入設置頁面，設置主題類型的步數比歐瑞博的多一步，用戶設置完成后還得一步步返回，這里可以將用戶常用的“顯示”內容上移一個層級，減少頁面跳轉次數；
AI 手勢這種有特色的功能隱藏的太深，不便于用戶的使用。
綠米同樣運用左右滑動進行首屏、場景列表、設備間的快速切換，對于相同類型的窗簾設備，并沒有整合成列表放置同一屏，而是另起一屏，設備多的時候就會存在操控效率低的問題。
下滑進入系統設置界面，這個區域只有一個設置功能，有點浪費空間，索性就把設置下一級的功能選項移到下拉頁面，還能提高用戶的操作效率。
場景運行過程以進度條的形式在卡片底部體現，對用戶的干擾小，并且只傳遞出開始到結束的過程，沒有成功提示，這種邏輯是正確的，因為面板只是傳達出了一個命令出去，具體什么時候傳出、接收設備是否正常運行，這些信息面板是獲取不到的。
場景列表與設備控制界面一個層級，溫控器、調光燈運用半圓的元素作為控制區域，新穎的設計風格是綠米智能面板的特色；
仔細看，會發現設備控制界面不統一，相同功能的開關按鈕，在不同的設備中位置卻不一樣，還有就是普通燈是偏寫實的 3 路開關樣式，其他界面卻是抽象的圓環幾何樣式，不統一的界面會增加用戶的學習成本。
空調
空調控制界面，通過上下滑動以整數的形式來調節溫度，新穎的操控方式讓用戶加深對品牌的印象；
底部開關、模式、風速同級展示，這里存在幾個問題：1、用戶在設置空調時很容易誤點關閉按鈕；2、缺少常用的風向調節，功能缺失造成較差使用體驗。
燈
普通燈可以在 App 中設置 1、2、3 路開關樣式，這種形式同樣存在問題：一屏最多放三個開關，屏幕下方大片區域空置，利用率低。
窗簾
窗簾控制界面顯示窗簾的名稱及行程狀態；窗簾的開、合，綠米給了 2 種方式：滑動控制、全開全關按鈕；
增加暫停功能可以提升使用體驗，因為用戶在操控窗簾設備時，會以窗簾實際的運動行程為依據來決定窗簾需要開合到什么程度，而不是看界面上窗簾的位移，當用戶覺著窗簾行程可以了，按暫停鍵就可以準確停留在用戶想要的位置上。
調色燈
調色燈用戶可以自定義或選擇系統推薦的顏色；
為了涵蓋大多數的用戶偏好，調色燈的 4 個推薦色采用色環上差距大的顏色，并且根據用戶使用場景篩選出常用的幾種色調，排除了用戶不常用的綠色、紫色、粉色。
用戶可以根據自己的使用偏好，將最常用的功能模塊頁面放到第一屏，這個功能在一定程度上可以提升操作效率，當設備多，還是需要切換很多屏。
用戶使用面板分為：緊急情況、常用情況，緊急情況不一定常用，就像出門需要關燈；常用情況不一定緊急，例如看時間
綠米為了讓用戶便捷，給出默認頁自定義功能，存在的問題是：如果用戶把燈作為開機第一頁，那么日常中看時間要翻頁；日期時間作為第一頁，開關燈需要翻頁，都不是特別便捷。實際上可以做成像 Gira 那樣，通過增加手勢喚起快捷開關功能，首屏留給日期時間，既滿足了日常需要，又能滿足緊急需求。
通過上述分析，我們得到了這些產品的共同點與差異點，以及背后的思考方式，了解共同點可以讓我們彌補自己產品的不足，不被市場淘汰；學習它們差異化的思考方式可以幫助提升我們產品的競爭力。
作為一名合格的設計師，除了學習視覺技法和理論，還應該多玩、多看、多思考真實的線上產品，體驗其核心操作流程，推敲和思考產品設計背后的原理和邏輯，才能不斷提升體驗設計思維。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：Aaron杜斌
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
智能產品的設計過程中，常常用到動效設計，那么動效設計用在哪些地方及對提升智能設備體驗帶來什么幫助，是這篇文章要講的。
上期回顧：
通過大小、位置和透明度的變化，使得界面與界面之間、界面上元素的出現和消失都有關聯，讓用戶和產品的交互過程更流暢，給用戶更好的體驗。請看以下案例：
1. Nest 溫控器控制界面
Nest 溫控器從時鐘轉變到溫控調節界面的過程中，時鐘的指針向圓心收縮，周圍的時間刻度生長并一起向中心收縮，指針收縮動效對應溫控調節界面溫度值的顯現，時間刻度的生長收縮動效對應溫度刻度的顯現，由于元素之間進行有關聯的變化，操控過程中會有絲滑流暢感。
2. Gira 窗簾設備
當用戶調節行程時，中間的控制點跟隨手指實時運動，而進度條會有延時拖拽效果。為什么會是這樣呢？原因是：用戶在控制面板上的操作是需要由面板向窗簾設備發送指令的，也就是說面板上控制窗簾到窗簾設備運行中間會有一小段時間間隔，用戶會有延遲感，所以 Gira 在控制窗簾行程的過程中，進度條為了與窗簾設備運行同步，加入延時效果，讓用戶感覺操控響應快的錯覺。
3. Nest 新款溫控器
用戶在滑動切換功能時，功能 icon 會按照先后順序由大到小變化，由于連續性運動，每個元素運動都有銜接，會有流暢操控感受。
4. Nest 智能鎖
用戶輸入密碼后至鎖打開這段時間，數字依次向下消失，鎖 icon 逐漸出現并且打開，體現出柔緩的感覺；實際上動效有時候可以彌補設備執行緩慢的不足，當設備需要長時間才能執行時，這段時間加入動效，動效運行時間和設備實際執行時間一致，用戶就會覺得很順暢；也可以讓動效運行時間小于設備執行時間，這時用戶會覺得操控反應更快。
通過動效能夠幫助用戶使用功能，對功能的方向、位置、喚出操作、路徑等進行暗示和指導，方便用戶在最短的時間內來學會操作產品的一些功能。請看以下案例：
1. Amazon Echo
用戶第一次設置好監控后，通過放射動效提示用戶雙擊屏幕，通過上下擴張的箭頭動效提示用戶可以通過手指來進行監控畫面的放大縮小。
2. Lenovo Smart Clock
當設備第一次配好網重新開啟后，通過遮罩、圓點大小位置運動搭配文字告訴用戶長按屏幕可以控制什么功能。
頂部弧形的上下變化，告知用戶下拉可以控制什么功能。通過簡單的元素既能起到提升用戶的作用，還不打擾用戶。
通過動效給用戶展示需要的內容及產品側想讓用戶了解的內容，讓用戶更樂意更易于理解，強化功能感知。請看以下案例：
1. B&O 觸控音箱
雙擊音樂標題，進度條從左向右生長出現、操控點放大出現，既強調了進度條這個隱藏功能，還暗示用戶可以拖動操控點從左向右拖動操作。
2. Google Nest Hub 調光燈界面
用戶從列表進入調光燈界面時，調光條灰底從左向右弧度生長，隨后當前亮度條生長出現、亮度值出現，先暗示了用戶可以從左向右弧度操作，后強調了當前設備狀態。
3. Google Nest Hub 睡眠質量檢測界面
用戶查看睡眠質量數據時，睡眠質量標題信息漸隱漸現，睡眠數據條、數字生長，讓數據展示有主次之分，強調了用戶想要看的內容據，更人性。
在產品設計里面有一個非常重要的原則：讓用戶有操縱感。這種操縱感不僅僅表現在對用戶的操作有了反應、有了顯示，還有一種方式是讓用戶知道當前產品運行的狀態，是正在等待還是正在加載，還是正在下載或變化，那這種狀態的告知也是增強用戶操縱感的方式之一。請看以下案例：
1. LG 智能洗衣機
當用戶往洗衣機里加入衣物后，出現量杯倒入洗衣液的動畫，告知用戶當前洗衣機正在進行哪一個環節，我們分析一下這里加入動效的用意，首先，一般的洗衣機沒有屏幕，有的話也就顯示當前的功能選項，LG 的這款洗衣機是液晶屏，那么它的定位就是高端人群，通過融入動效，打造差異化，提升使用體驗，加深用戶對 LG 品牌的印象。
2. Lenovo Smart Clock 起床鬧鐘功能
用戶設置好起床時間后，系統會根據時間段自動進行背景顏色的過度，來模擬天色的變化，直觀的告知用戶當前的時間是白天還是晚上或是黃昏。
3. Orvibo 除濕界面
設備進行除濕的過程中，面板上圓形元素進行旋轉，伴隨粒子擴散效果，模擬水分子消失的過程，直觀形象的告訴用戶現在正在做什么。
4. Lenovo Smart Clock 貓眼通話界面
用戶接通貓眼后，通話 icon 進行電播擴散動效，模擬聲波擴散效果，準確的向用戶告知當前通話中的狀態。
5. Google Nest Hub 語音喚起
當用戶說話喚起語音控制時，原先的全屏畫面收縮，響應用戶的指令，四周留白，為通話內容提供展示空間，然后彩色點元素起伏變化，通話內容出現，告知用戶已接收到指令；隨后彩色點元素旋轉加載，體現正在執行中。在語音控制的每一個環節都加入動效反饋，會讓用戶覺得他不是在和一個冰冷的機器講話，富有人情味。
6. Orvibo 窗簾控制界面
運用輕擬物效果和與實物一致的運動方式，用戶可以直觀的看到窗簾的行程位置與開合狀況，大大的提升了產品易用性。
面對一款新的智能產品時，用戶可能不知道怎么操作它，通過動效向用戶交待頁面內容之間的關系，讓用戶清楚的知道從哪里來，到哪里去，更易于理解從而可以快速上手使用。請看以下案例：
1. Nest 溫控器設置界面
溫控器的設置模塊通過左右滾動以便在有限的屏幕中展現，那么模塊的下一級頁面跳轉做成像 App 那樣左滑切入是無法明確層級內容的，此時需要一個與左右滑動不一樣的動效來區分模塊的切換，Nest 運用翻轉效果，強化了層級感，清楚交待了頁面翻轉后面的內容與頁面前的關系。
2. Google Nest Hub 設備控制界面
用戶從頂部導航中進入設備列表過程中，設備列表頁面從右向左進入，暗示用戶“當你想返回上一級，可以左滑離開哦”，用戶上下滑動設備列表時，屏幕左邊滑動條出現，更加明確了“左滑返回上一頁”的功能；
當用戶通過列表進入操控界面以及切換功能頁時使用淡入淡出的效果，弱化它們之間的跳出感，來強調它們是一個層級的內容，從細微處可見 Google 的設計師在動效的使用、選擇上非?？酥?，值得我們學習。
3. Google Nest Hub 日程提醒界面
用戶發出查看日程安排的命令時，日歷界面從左到右進入，告訴用戶這是一個新的頁面，接著日期數字 21 進行大小位移變化，月份不做變化，為了強調這是 21 號的日程，2 條日程信息按照時間先后從下向上運動，交代了日程處理的優先級。Google 設計師將信息展現的每一步都讓用戶看的清楚明白。
在可用性良好的前提下，通過一致性、趣味性的動效設計和創新的交互方式為產品增加亮點，帶來更驚喜的體驗，傳達產品的氣質與態度。請看以下案例：
1. Google 多端運行動效
在品牌塑造上，Google 已被證明做得極為成功，而且在視覺表現層面，Google 系產品具備著“一致性”和“連貫性”，這讓 Google 獲得了品牌識別上的利益。在不同設備的動效設計中，Google 都統一使用代表品牌的紅、黃、藍、綠顏色和幾何圖形，遵循化繁為簡的設計準則，通過簡潔貼近真實的運動方式，讓產品更有人情味，讓用戶更加專注于內容。
2. 智能圓鏡
用戶在靠近圓鏡設備時，鏡面中心人臉識別 icon 縮放，周圍點元素波動擴散，吸引用戶的同時，傳達出科技感。
3. Apple HomePod 命令反饋界面
當 HomePod 在執行一項指令時，頂部的屏幕會出現彩球融合翻轉動畫，多變朦朧的色彩可以喚起用戶情緒，球體間的融合過程讓產品生動有趣，讓用戶感受到品牌的人情味。
4. Apple Watch 洗手提示界面
Apple Watch 洗手功能開啟后，會有一個 20 秒的倒計時，倒計時以肥皂泡沫消失擴散的形式展現，很貼合當前洗手的情景，讓原本一個普通的倒計時變得生動且有趣味性，用戶更加樂意使用，強化了用戶對品牌的感知。
5. 智能溫控器
這款溫控器已經有一定年代了，當時那個年代，能用到溫控器，那就很有科技感了，智能溫控器還將流動的線條動效運用至透明背景上，向用戶傳達了超前的科技感，只要見了就會記住這款產品。
下面為大家整理了一份動效在產品中的應用場景以及設計思路：
實際上智能產品中的動效設計，并不是要向用戶炫技，也不是做的越炫酷越好。動效是以解決問題為目的的一種手段。我們要去觀察現有好產品的動效設計落地點及分析他們的小心思，從而運用至自己產品中，提升產品使用體驗。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：Aaron杜斌
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
寫在前面
什么時候該使用動效，什么時候該保持應有的克制，什么樣的動效是好的動效我在之前寫過一遍文章，感興趣都盆友可以了解下，標題《動效/動畫在直播類應用中都運用和落地》，本篇文章應該可以算是上篇文章的下半場
接下來要說的這個案例，它可能和我們平常所見的動效體驗原則是“背道而馳”的,因為它終究是一個等待運力調度的場景（簡單的說就是等待司機接駕的過程）每天成百上千萬訂單的背后有著一套非常復雜的算法去支撐，這就造成了這個場景它本身不會像動效指導原則那樣順利，平滑，愉悅，但是既然是做設計，核心是去解決問題，所以繞不開這個場景本身。通過數據去解讀用戶的想法和行為，將設計與業務進行更緊密的結合，從而達到更好的效果
對用戶 “等待應答“這個場景的動效改進，以拉美地區最終AB測試數據為結論，使我更加確信動效能做的不僅僅是體驗上的提高，在特殊場景下完全可以解決視覺感知層面無法解決的痛點，為業務方拿結果
所有數據對外均作了隱藏處理~
項目背景
滴滴出行在拉美地區飛速發展,單量持續增高的同時，用戶對產品本身的期望也越來越大，我們一如既往的重視用戶體驗。無論嚴寒酷暑，早晚高峰，我們和我們的用戶都不希望等待接駕變成一件漫長、無預期、盲目的行為
數據分析
* 乘客等待時長主要分布在A時段左右，多數乘客會選擇在此時間段內取消訂單，而消訂單的乘客并不會停止叫車服務，而是進行二次發單，重新進入等待隊列，這就造成了因個人因素延長了等待應答的總時長
* 等待應答B分鐘左右，是較容易叫車階段，數據顯示用戶處于這個時間段內容易被接單
*延長乘客等待預期,調節愿等時長閾值的操作空間，乘客愿等時長的具有較大彈性，如在打車較為容易的時段為 xx 秒，在打車較難時段為 xxx 秒
結論：用戶對于排隊規則的并不理解，使得用戶在最容易叫到車的時間段之前會選擇二次發單，取消訂單會導致重新排入隊列，進行排序
抓手：知悉乘客取消應答集中時間段和容易打車時間段后前提后，在不通過增加物理運力/調整算法的前提下，通過設計的手法去緩解用戶的等待感知，從而增加用戶的等待應答時長，將用戶的等待時長延伸至容易打車時段，從而促成訂單的完成，是這次設計的突破口
了解問題，明確挑戰
對用戶的調研我們發現用戶對等待應答動畫存在以下感知
通過對用戶數據進行分析后得出結論，篩選出核心問題進行優化，讓用戶對等待應答有一個新的認知,是這次的關鍵所在。我們希望通過這次設計的優化，乘客能強感知此刻所處運力調動的狀態，并最大程度上弱化時間概念降低人腦對時間的敏感程度，減緩用戶的焦慮情緒，使其相信這是一個可以等待運力到來的排期
面對的挑戰有：
1.增強播單動畫感知,讓用戶明確自己所處狀態,從而減少應答前的取消率 P0助力業務
2.通過設計吸引視覺弱化時間概念,降低人腦對時間的敏感,從而增長應答前平均取消時長 P0助力業務
3.符合用戶打車預期的前提下,盡可能讓動畫用起來連貫,順暢,可預期,讓用戶感到愉悅,用戶體驗提高 D1體驗提高
4.符合品牌調性的場景動畫,讓應答場景融入App保持體驗上的流暢，統一和性能平衡 D1體驗提高
5.涉及到地圖開發/端上研發同學的密切配合，高度還原設計文件也將是一個挑戰 D2設計訴求
決策方向，設計執行
明確目標之后，就開始了設計的決策方向和關鍵詞
作為一個單量百萬級的應用，面對的用戶群年齡分布也是非常廣泛，因此動畫的效果一定要適合大眾群體的認知，不應該為了吸引視覺焦點而有個性化存在-> 波紋效果
運力調度本身是一件等待的過程，長時間的等待消耗用戶的耐心，應該給予更多的可預見的可期待的暗示 ->路徑
俯視視角更適合對周圍環境，路況，運力的的觀察和掌控，適合打車前對環境的觀察，而一旦進入等待場景，用戶需要做的只是等待接單，將場景透視化，貼近高空觀察事物的視角，更加符合真實世界-> 透視視角
老版本沿用的等待應答場景，可以在地圖上進行交互操作，但是無法帶來明確的有效信息。新版設計為了增強調度的感知，增強了動畫效果。而動畫效果在地圖上需要一直靠渲染運算生成，任何的地圖移動都將加大運算量，耗電發熱則會大大增加，因此這里為了保證性能將一個可自由操作的場景，變成了一個固定的場景 -> 蒙層
設計執行
明確了方向和關鍵詞之后，設計的思路其實就已經非常清晰。在框架層考慮清楚信息布局，整體頁面交互流程。在表現層吸引用戶視覺，加強感知，降低用戶對時間敏感度即可
初稿的設計其實非常順利，整個設計稿從需求分析到第一個DEMO落地大概用時1天左右，而且1稿過完設計內部。在設計之初，leader建議不需要考慮太多落地問題，可以適當天馬行空的，不要因為技術的限制而限制自己的想法。在完成設計稿之后我們與技術評審之前就開始與端上開發同學進行邏輯層的分析，發現這個設計稿雖然滿足要求，但是在細節位置需要分情況考慮，造成研發成本的大額增加，開啟漫 漫 改 圖 路 （細節就略過了）~
最終效果以這個動效為基礎進行研發，中間涉及到了地圖視角的偏移/定位點跟蹤/X-panel規則/最佳view調整等復雜邏輯的調整
設計改進的細節
優化進入等待應答頁的動效，優化頁面布局
設計進場動效不僅僅是為了視覺上有強感知和更好的體驗，核心是防止用戶多次取消，多次叫單的行為發生
當長時間打不到車時，乘客會選擇取消訂單讓系統重新派單，認為這樣有可能會更快有司機接單。而真實情況則很像排隊買票，前面的走不完買票流程后面的人則無法前進，所以當乘客選擇取消，離開排隊隊列，只能重新回到對尾，重新排隊
下方的等待應答信息卡片包含了等待時長和取消功能，規則是展示3s之后隱藏取消按鈕,如果乘客要取消，需要上滑拉起卡片點擊取消
通過調整視角和擴大蒙層動畫范圍，用戶的視覺將會集中在屏幕的上方避免地圖上的無效信息干擾，視覺持續注意力集中在3-6s左右，從而很好的為隱藏取消做了掩護
當用戶的視覺從上方移動到其他位置的時候運力調度已經開始了6s+，無形中給用戶時間感知的緩沖時間，使得平均等待時長延長，等待時長閾值向易接單時間段靠攏
后期通過數據分驗證現乘客拉起卡片的幾率相比之前剛發布時候已大幅下降，也從正面說明乘客已經適應了這種收起的策略
優化頁面樣式
舊版的等待應答，地圖外露供乘客拖動地圖觀看周圍情況。但是用戶在等待接駕的情況下，是沒有辦法看到周圍運力這條非常有用的信息，而地圖上卻外透了街道/店鋪的信息，會使這個頁面看起來非常沉重卻沒有很大的意義，且會弱化波紋擴散的感知
新版的等待應答，會在地圖上方蓋住一個80%透明度的的蒙層，同時會讓地圖視角整體抬高。讓用戶感覺到的是更大范圍的運力調度，并且隨著地圖視角的抬高，街道/店鋪的名稱會得到隱藏，減少無意義信息的透傳。通過對地圖的縮放，自動減少了街道信息外透，無需通過代碼層面的修改，減少了rd的工作量的同時讓界面整體看起來更加清爽，拉美在發單前會有定位點的二次確認定位點，也保證用戶正確感知到自己在空間上所處位置
舊版本的波紋，速度緩慢并且不夠明顯，很難給人一種強感知，不像是一個等待運力調度的場景
新版本的波紋，會增強波紋的速度，調整波紋的速率，讓用戶有一種強感知，此刻正在進行最大范圍的進行運力調度的搜索
不再支持用戶操作手機地圖，查看周圍信息。減少波紋因地圖位移而產生的實時渲染，減少不必要的耗電行為發生
保證應答前后體驗連貫性
在重新設計等待應答這個場景時，我不希望它是一個很重的loading的感覺
不希望像loading的原因在于loading處于數據調取狀態，而數據調取一旦完成，會立刻跳轉進入下個場景，會讓整個體驗被割裂，不流暢。而這里通過設計手法的表達我覺得可以做到體驗上前后的一致,從而打通設計上的從發單->接單->送駕 這一小閉環
在得到了數據請求后，我們會將View_3D視角返回到正常2D的俯視視角，而車作為最終的載體則會自然而然的出現，同時會根據最佳視角算法自動調整到，人和車同時出現在屏幕正中（距離越遠地圖View縮放越大，人車始終出現在屏幕當中）
接著，真實的車載路線會以路徑生長的方式呈現于用戶的手機當中，會根據距離的遠近來控制路徑生長速度的快慢，同時司機卡片同時加載出來~
等待應答的收尾過程不會像競品那樣直接進行頁面跳幀而是一種 合理的 有意義的（2D->3D->2D）完完整整的過程
推動落地，保證還原
完成了設計稿/產品/技術評審過后我們便開始與開發同學進行詳細的對接
因為此次設計相對復雜，涉及到了端上和地圖上的rd同學，所以非?？简炑邪l的效果還原能力，既要把動效實現原理拆分的非常明確又要保證聯調的時候前后一致性
這里就不多贅述，貼個輸出圖好了 （開發動效邏輯拆分圖by zhoulu）
其中有用到lottie輸出（感興趣的可以翻看我之前的文章）-》《動效/動畫在直播類應用中都運用和落地》
結論~Rd同學非常OK的完成了最終的效果DEMO，還原度90%+
非常感謝rd （鞠躬）
數據驗證
在拉美地區上線，進行了的AB測試，核心評估指標收益顯著，整體數據遠超當初的預期~
總結
成長方面：這是我來國際化團隊的參與的第一個項目，也是設計內部帶頭發起的一個項目，現在回頭來看還有些地方能做到更好，可能那多一點的“更好”能讓我在產出的時候更加細致，和研發對接思考的更加的完整，對業務的提升也許會更好
在說點題外的，現在的大環境講究“全鏈”，賦予了設計師更多的權利，對于設計來說絕對是利大于弊，這點深有體會，更多的上游思考，更前一步對業務的理解，把業務的場景想的明白，把數據看懂，站在全局的高度看問題，站在產品的角度去設計，設計賦能，通過設計去助力業務去拿結果
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：大寶蛋
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
本文主要從以下5個方面介紹2021年UI設計發展趨勢，廢話不多說直接上干貨！
趨勢一：極簡
一份來自微軟的調查數據表明：2000年，人類的集中注意力的時間平均在12秒，而到了2015年，變成了8秒。而另一個研究發現：有47%的用戶希望一個網頁能在2秒之內加載完成。
但事實上，目前網頁的平均加載時長達到了8.6秒，而在移動端，則變成了22秒。
網站的加載速度會受到很多原因的影響，UI設計是其中重要的因素之一。更少地使用圖形元素和更簡約的UI會在很大程度上加快一個網頁的加載速度，同時更明確的「指引」和元素的區分也更能讓用戶快速熟悉網頁的交互，甚至，簡約的網站還能影響其搜索結果排名，Google 在今年就開始建議網站的加載時間不應超過3秒，并將其加入到搜索排名的影響因子中。
趨勢二：微動畫
今年是「全面屏」手勢的加入，讓廠商們發覺「跟手感」會在很大程度上影響用戶體驗到的品質感，于是許多國產廠商開始注重微動畫的設計來盡量對用戶在屏幕上的滑動產生回應。
但僅有系統層級實現的這些微動畫還遠遠不夠，當用戶進入到APP中，如果這些微動畫不復存在，那產生的割裂感會讓整個用戶體驗大打折扣。所以，安卓手機系統UI 的精細化會倒逼 APP UI 設計的進步，當然，對于那些「懶得設計，照著iOS 版再做一遍嘍」的廠商們，如果再不用心做，就要面臨著被淘汰的風險了。
趨勢三：重疊效應
什么是重疊效應?簡單來解釋就是，通過把不同的元素(如色塊，文字和圖像)重疊地放在一起以達到說明內容和視覺引導的效果。
本來由于對比度不足，重疊效應在LCD面板上的效果并不理想，一些明度接近或者色彩對比不夠明朗的設計很容易讓用戶混淆不同的元素，同時一些低透明度的元素會讓LCD 面板對比度不足的缺陷徹底暴露。而在 OLED 面板上，這些問題自然迎刃而解，未來必然會有更多的設計師來更加得心應手地運用「重疊效應」以實現他們想要的效果。
趨勢四：移動設備適配要優先考慮
在去年，移動端流量消耗占比為 52.2%，實現了首次真正意義上的趕超PC(包括 Tablet 電腦)。并且這個趨勢在2021年會繼續保持。
這意味著從今天起，一個網站(或互聯網產品)的UI設計需要首先適配移動端，從而滿足更多數的用戶使用場景。
趨勢五：深度空間
一個帶有縱深方向的空間必然要比平面具有更高的信息效率，更能在視覺上對用戶的操作進行正確引導。
其中發展最成熟以及最高效的還是「陰影」相比于普通的高斯模糊以及高級點的「毛玻璃」，陰影的特點在于不光能在UI中把某一個特定的頁面提前，還能同時展現多個頁面并賦予它們對應的縱深關系，以及大多數的 UI 設計工具(如 PS、AI、Axure)對陰影的支持都十分友好。
文章來源：傳智教育
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
相信很多人在開車時都用過手機或車機上的地圖導航，而今天 Alibaba Design 想和大家分享的就是大家常用的地圖導航的換代升級版——車道級導航。
先來說說車道級導航有哪些不一樣。相比于傳統地圖，車道級地圖導航在信息精細度、定位準確性、動態信息豐富度上有大幅提升。比如，車道級導航能清晰顯示道路上的虛實標線、自己的車行駛在哪條車道上，還能在地圖上看到車身攝像頭和雷達檢測到的周圍車輛、錐桶、防撞桶等。
車道級導航在智能汽車的駕駛場景中，有兩方面的用戶價值：
目前，高德已經發布搭載了車道級導航能力的量產產品——高德第三代車載導航，已在小鵬P7車型的NGP*自動導航輔助駕駛系統中落地。
*NGP 是高級智能輔助駕駛系統，可以在全中國大部分高快速道路上進行自主并線、超車、駛入匝道等。
車道級地圖導航承載的信息與傳統地圖有明顯差異，如何將這些信息加工轉化為愉悅的駕駛體驗，就是設計師要解決的問題了。下面分享一些我們在車道級導航設計中的思考。
車道級導航應用于智能汽車的人車共駕場景，需要同時考慮用戶的駕乘體驗和車企客戶的設計定制訴求。包含三部分內容：
車道級地圖中所呈現的數據元素對比普通地圖更多更復雜，而且在不斷采集更新中，但大致能劃分為三類：動態識別元素、高精道路元素以及場景氛圍元素，如下圖所示。
我們要做的設計，就是將以上這些數據元素以三維視覺化的方式進行呈現，最終服務于駕駛場景中的駕駛者。我們總結了幾個重要的構建原則：
「 清晰的空間關系展示 」
數字地圖的優勢在于能清晰展示復雜世界的空間結構、空間關系?？臻g關系的清晰表達能讓駕駛者更了解當前所處道路環境，心里更有底，這對于開啟自動駕駛的車輛尤為重要。
空間關系表達的關鍵在于表現道路的上下層級和聯通關系、坡度變化，加上仿真的車輛及視角變化，實現高架穿橋而過、相機視角由遠及近的場景展示。
空間關系表達的另一重點在于道路與周圍環境的關系，比如道路與山脈，通過高精地圖可以看到遠方道路的彎曲路形，提前減速，提升山路駕駛安全性。
「 簡約元素風格提煉 」
地圖設計時整體風格選擇需要克制，既要保證地圖中各元素之間的區隔度，又要保證地圖整體與上層業務組件拉開視覺層級。這樣才能更好的突出當前需要駕駛者注意的重點元素，提升整體的信息傳達效率和體驗。
既要讓駕駛者能快速識別地圖中的元素是什么，又需要讓畫面整體有序，主次明確。所以我們使用介于寫實與抽象風格之間的簡約風格，既能寫實展示元素的關鍵特征，整體又不復雜。
對于單個元素的設計上，主要是通過元素現實中的關鍵特征提取，去掉一些不影響認知的細節，讓駕駛者一眼就能明確這個元素是什么。
「 動靜風格統一 」
靜態元素是由高精地圖生成，而運動元素則是車輛傳感器識別的車輛、交通設施等。地圖上的這些元素的仿真表達，能夠反應車周圍的實時動態環境信息，增強駕駛者對車輛感知能力的信任。
對于這些動態識別元素，我們推薦客戶在設計風格上與地圖相呼應，在保證識別性的前提下，兩者風格盡量統一，形成整體感。
下面是客戶設計團隊制作的動態元素模型：
對于行人、自行車等出現人體的元素，我們通過循環的骨骼動畫原地播放，以及傳感器確定的運動軌跡，來模擬對應的人體運動。
地圖畫面是由渲染引擎程序的攝像機拍攝出來的。攝像機的位置、俯仰角、投影中心、裁剪區域等都會影響用戶看到的畫面內容。
「 遠近兼顧的視野 」
為了讓駕駛者有全局的掌控感，車道級地圖的攝像機視野需要兼顧眼前和遠方的信息呈現。在地圖上既可以看清眼前的車道標線、周圍的車輛，又可以看到 500 米甚至一公里后的路形變化、高速出口等。
「 自動駕駛動態視角 」
我們與客戶設計團隊一起，對自動駕駛場景拆分做了多次討論，最后決定對車速和并線這兩個變量設計動態視角。
在自動駕駛場景中，攝影機與自車的距離會隨著車速大小在一定范圍內變化。當車速較慢時，拉近攝影機與自車的距離，以強化顯示自車周圍的動態信息。當車速較快時，拉遠攝影機與自車的距離，獲得更遠的視野和足夠的預判時間。
自動駕駛的關鍵場景是車輛自動并線。為了強化駕駛者對車輛并線決策的感知，在汽車進入并線等待狀態時，相機的投射中心會移動到目標車位。
「 車道級導航動態視角 」
與自動駕駛相對的是人駕駛的場景。按與下一個轉向路口的距離遠近，人在駕車導航時可抽象為 4 個階段：順行、預判、確定、動作。
不同的駕駛階段需要不同的攝像機視角，來強調最相關的信息。例如：當下一個轉彎路口在幾公里以后時，駕駛員對幾公里范圍內路況的需求要強于對前方路口位置的需求；當臨近路口時，駕駛員對前方從哪里轉彎、走哪條車道的需求又會強于對幾公里后路況的需求。
下面詳細介紹一下臨近路口時，攝像機視角的動態過渡策略：
過程 1：根據用戶位置和交通情況，提示用戶并線，此時將攝像機拉近，畫面從 2D 地圖視野平滑放大到車道級地圖視野，突出并線引導和目標車道；
過程 2：保持攝像機與自車距離不變，仰角隨著自車與路口的距離逐漸減?。存i定路口在屏幕上的位置）。這樣既能有清晰的路口距離感知，又能讓路口形狀逐漸清楚，規避了大仰角導致的離路口越近，路口形狀越扁平的問題。
不同的路口形狀適合不同的仰角參數。例如分叉路口用“大仰角”就能既看清路口形狀，十字路口則需要偏鳥瞰的“小仰角”才能看清路口形狀。另外，當轉彎路口之前很近的位置還有一個路口時，還需要調整相機的旋轉角度，來清晰傳達兩個路口的位置和形狀，防止駕駛員走錯。
車道級地圖與自動駕駛關聯緊急，且依賴于車輛的精準定位能力，是車輛智能化的核心功能展示，對于設計上每個車企都會考慮進行深度定制，與自身 HMI 風格統一，且功能上有與其他車企的差異化與賣點，這就需要我們考慮規?；O計中的效率問題。
規模化難點在于，與客戶產研設團隊的合作鏈路摸索和優化；車道級元素種類多、狀態多，設計產出的落地文件生成方式也不同；預覽驗證困難，導致新接觸的客戶設計師理解門檻高，缺乏對應的工具集。
「 低成本風格定制 」
第一階段，我們為客戶提供了各個設計階段需要的設計規范、源文件、教程。第二階段，客戶可以使用高德設計團隊打造的 D-Map 平臺，通過所見即所得的方式進行設計方案配置，并且能快速預覽設計效果。
「低成本增減元素」
對于車道級地圖中新增三維元素，梳理了對應的元素新增流程，規范前期建模中的模型面數、坐標、法線等，減少返工調整。
傳統導航地圖的使用對象只是人，而車道級導航地圖是人車共用的。在自動駕駛時，車道級導航地圖不僅為自主駕駛系統提供地圖和導航路徑，駕駛者與乘客也可以通過地圖更清楚地了解車輛做決策的依據，增強對于車輛的信任感；而在人駕駛時，通過車道級的精細引導，可為駕駛員帶來更舒適、更安全的導航體驗。
地圖是人類文明的坐標，隨著科技進步，地圖不斷被賦予新的內涵。對于車道級導航的設計探索才剛開始，未來，我們也會嘗試利用不斷增強的車載硬件算力，與車企一起創造次世代的車載導航體驗，為用戶提供更準確好用的高德地圖。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：AlibabaDesign
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
去年大家看到更多的設計和文章都在圍繞“新擬物化”展開行動，隨著各種硬件的提升，代碼的優化，更多的風格和效果一一出現在我們的生活中，而今天呢，我們一起探索一下生活中最常見的，你可能沒有注意到的設計風格——“玻璃擬物化”風格，英文“Glassmorphism”，這也可能會成為新的設計趨勢。
在生活中的攝影，通過玻璃的層次感，給人以朦朧的美感，那什么是玻璃擬物化呢？
油管一管主Malewicz 小哥對于這種風格特征歸結為4點：
透明：使用帶有模糊磨砂質感背景的透明效果
懸?。簬в忻黠@懸浮感的多個層級
鮮明：使用鮮艷色彩作為強調色并且從半透明層中透出
微妙：使用輕薄微妙的邊框來強化物理質感
通過玻璃透明，加周圍顏色環境的烘托，頁面的層次能更容易的呈現出來。
你在哪，從哪里來，玻璃擬物化就很明白的告訴你了。通過透明的玻璃材質，能告訴你所覆蓋的層級。
蘋果的合計將玻璃擬物化的風格運用的惟妙惟肖，無論是mac，iPhone還是iPad，設計風格都保持著相對一致的玻璃擬物化風格。
首先：我們打開sketch，建立一個畫板，隨便找張圖片作為背景，畫一個白色矩形
接下來：調整矩形的屬性，再填充色中設置透明度為50%，邊框可以吸取一個30%透明的白色，2px，再添加一個環境色的10%陰影，做出層次感，最后就是調整玻璃模糊的效果了，玻璃擬物的關鍵就在于sketch自帶的背景模糊功能，我們常常以為這里只有一個高斯模糊，但卻忽略隱藏在里面的其他模糊效果。設置背景模糊值為10%，不用太大，太大的話模糊效果就沒有那么真實了，具體調整還是要看效果。我們看效果：
單層的效果不是很明顯，我們復制兩個調好的玻璃效果，調整他們的透明度，底部的透明度為70%、中間的為50%，最上層的為30%，看效果：
在界面設計中，就可以通過不同層級，調整對應的參數，達到更好的層級效果。
我們以這個照片的圖標為例來拆解分析，通過運用剛才繪制的玻璃面的方法，與圖標色塊組合起來，在組合的時候，調整好層級，一個輕巧且富有玻璃質感的圖標就繪制出來了，很簡單、很容易上手對不對？一起來快來試試吧
透明：使用帶有模糊磨砂質感背景的透明效果
懸?。簬в忻黠@懸浮感的多個層級
鮮明：使用鮮艷色彩作為強調色并且從半透明層中透出
微妙：使用輕薄微妙的邊框來強化物理質感
隨著科技的進步和互聯網的發展，過去機械的單向交互方式逐漸被打破，用戶使用移動端的場景越來越豐富，設計師也開始需要通過主動的觀察用戶所處的不同場景，感受用戶情感，預判用戶意圖，來為用戶提供更智能更便捷更貼心更高效的服務，場景化設計已經融入互聯網設計的方方面面，下面的文章當中，我將從三個方向去闡述和列舉場景化設計。
隨著移動端的不斷發展，從固定電話到移動電話，移動端的設計漸漸的融入在用戶的身邊，深度的跟隨著用戶，陪伴著用戶，慢慢的，開始觀察用戶，感受用戶，在這個過程背后當中，場景設計逐漸產生，設計師通過針對用戶所在的實際場景來設計，建立用戶與場景之間的聯系，給用戶帶來更貼心，更高效的體驗設計。
如今各大產品都在上線了“青少年模式”，越來越多的產品關注到了成人與兒童這兩個不同的用戶群體，騰訊視頻在青少年模式中推出的播放器護眼模式，通過攝像頭來獲取用戶當前距離手機屏幕的距離，當用戶離屏幕太近會有提醒并停止播放，當用戶位置在正常距離以后，提醒消失。幫助青少年養成合理觀看手機，愛護視力的好習慣。
滴滴打車新增了“關懷模式”，在關懷模式下，整體的頁面字號放大，在功能上，更極簡的打車模式，將復雜的任務拆分為拆分為目標清晰的子任務，并提供清晰的反饋，來方便用戶的使用，關懷模式更有利于老年用戶以及視障用戶使用產品。
產品在體驗上的提升不應該僅僅是針對主要群體，跟多的是考慮到特殊群里的體驗，以上兩個案例，根據不同的年齡人群“青少年和老年”，適應了不同的產品體驗模式，讓更多的用戶群體都能夠得到更好的產品體驗。
當用戶在騰訊地圖設置中開啟左手操作功能，首頁地圖上的側方操作控件會移動到屏幕的左側，方便左手用戶點擊和操作，人性化的設計容納了擁有不同使用習慣的用戶。
在地圖軟件當中，我們通常都會用紅色表示路段擁堵，綠色表示通暢，在色盲色弱人群當中，紅綠色盲也是比較常見的色盲類型，所以在高德地圖中，為色盲色弱用戶做了專屬的路況配色，貼心的考慮到了特殊人群的體驗。
優酷視頻在更多模式選擇中，為用戶提供了“色弱模式”，并有不同色弱人群的細分“紅色弱”“綠色弱”“藍黃色弱”
在餓了么送貨騎手中，約8%受色盲色弱的困擾（全國男性群體中紅綠色盲色弱占比達8%-9%，餓了么騎手男性占比90%），為此餓了么設計團隊在2019年對app的進行了重新設計，包括使用WCAG無障礙色彩對比度，以及無障礙色盤，以及調整字階，使用輔助圖形等設計手段來解決部分騎手在送貨途中使用APP的痛點問題。
外賣行業本身就具有一定的時間屬性細分，用戶早中晚點餐上肯定會有不同的訴求，美團外賣在不同的時間順應用戶的不同訴求來推薦不同的內容，幫助用戶挑選在該時間段內的用餐。
美團在一些周末和特殊節日上，用戶在不同時間的訴求不同的，相關推薦也會有所不同。
QQ音樂會根據不同的時間，給用戶推薦不同的個性化push通知，早上是“每天起床氣一句”“最氣不過起床氣” 冬日是“冬夜需要”。結合用戶當前時間段下推薦相關的push，不僅增加了用戶的點擊欲望，也拉近了和用戶的距離，讓用戶時而暖心，時而感到有趣，這么可愛的push通知，也是辛苦QQ音樂的運營小編了～
在iOS12系統當中，新增了地點勿擾模式，長按勿擾模式的按鈕，可以選擇“直至我離開此位置”，用戶在看電影，會議或一些特定的地點可以靈活的使用該功能。
在使用大眾點評時，當我的地理位置在我的常駐地北京時和將地理位置切換到“重慶”時，首頁展示的信息和內容框架都發生了變化，產品根據我的地理位置推斷出我現在搜索的目標地不是我的常駐地，預判到我可能存在即將出游到當前定位的城市，會直接給我推薦一些攻略，和一些“怎么玩”“”訂住宿“”游景點“的旅游攻略向內容。
iPhone在用戶接電話的場景下，根據用戶所處環境不同，適配了不同的方案。不同的當iPhone處于息屏狀態接電話時滑動接聽，防止誤觸；當iPhone在使用時接聽電話為按鍵接聽。減少用戶操作成本。
在支付寶的收款碼掃一掃功能中，用戶向他人展示收款碼時，手機向下傾斜后，掃碼的提示文字和用戶的頭像會發生旋轉，其他功能會相應弱化或者直接消失，以便方便付款人閱讀，充分考慮到了現實中的操作環境，保證了雙方的使用體驗。
支付寶等金融類的產品，在用戶開啟后臺后，會對頁面進行高斯模糊處理，避免了后臺場景下用戶無意中泄漏自己的信息，也防止了被偷窺。（支付寶在頁面底端還添加了溫馨提示：支付寶全力保護你的信息安全）
在輸入車牌省份時，會直接彈出各省/直轄市的縮寫專用鍵盤，并且可以直接進行大寫字母與城市簡稱的切換，降低了用戶的輸入成本，提高了整個功能的使用效率。
百度鍵盤在游戲模式下，會接入游戲快捷回復語并自動開啟和諧模式，增加趣味性的同時方便了我們在游戲進程中的快捷輸入，將九宮格按鍵進行等比縮小展示，方便用戶點擊。
Pad OS鍵盤在使用中，可雙指捏合可以快速縮小鍵盤，然后將它移到合適的位置，即能單手打字，又能給你的app留出更多的空間，并且增加了快速輸入的功能，只需要在鍵盤之前輕掃，即可打字。
情景預判的交互設計是建立在整個產品的框架上和對用戶深刻理解上的細節迭代。預判設計主要有兩類目的：一是在用戶初次體驗某種功能時引導用戶，避免用戶陷入困惑；二是提前判斷用戶行為，縮短行為路徑。新功能引導更傾向于產品功能本身的邏輯和價值，這次我們主要主要講第二點，提前判斷用戶行為。
預判設計強調主動性和智能性,是決定產品是否體貼、聰明的重要因素，是走向人工智能的基礎，對微交互中的預判設計進行分類研究有助于加深對其了解和認識,進而在實踐中應用以提升用戶體驗。預判設計可以很好的在用戶的操作過程當中進行簡單高效的引導和預判，幫助用戶更流暢舒適的使用產品。
在互聯網發展中，產品功能的流程越長，操作步驟越多，越要求用戶的理解能力和學習成本更大，耗時也會相應增加。因此體驗設計師在理解用戶行為的交互設計的基礎上能夠做到減少冗余步驟，簡化操作流程。順應用戶行為的預判設計也可總結為四個字：以簡馭繁。拋開繁雜的操作過程，運用更少的任務和行為來達成用戶目標。簡約不僅僅是視覺的形容詞，同樣適合行為。
聊天頁轉賬：在支付寶聊天頁，很多時候我們想給對方轉賬，會習慣性的在輸入框中輸入相應的數字，但在操作錯誤之后，支付寶會在輸入框上方彈出相應數字的轉賬，點擊之后會直接進入轉賬頁面進行操作。對我來說，這個功能已經不是簡單的幫助用戶糾錯，現在更像是一個快捷鍵一樣方便著我們的操作。
手機號轉賬：當我們復制手機號后打開支付寶轉賬功能，會彈出該號碼的轉賬氣泡引導，提前判斷了用戶通過手機號去轉賬的路徑。用戶可以點擊氣泡一鍵跳轉到轉賬頁面。
消息頁 - 找人轉賬：在消息頁面，當用戶開始上滑操作時，會出現「找人轉賬」的氣泡提示，點擊進入用戶列表的簡約頁面，去掉了一些生活號服務號企業號等無用的對話框，提高了用戶尋找的效率。
一個轉賬的功能，在不同的頁面不同的場景下，支付寶在體驗上把用戶情景預判設計做到了極致，事實上，用戶的行為中滲透了意識。從用戶的行為推斷用戶意圖，將用戶的意圖結果化，結合用戶的使用場景，順應用戶的行為，縮短用戶的路徑，才能給用戶帶來最流暢的交互體驗。
正如《一目了然》中所說，“當一個軟件設計得很糟的時候，我們往往能立刻指出哪里做的很差；但一個優秀的軟件，你卻往往難以解釋優秀從何而來”，因為沉浸式的流暢體驗為你減輕了很多思考的路徑與時間。
在新建收貨地址的場景下，填寫復雜的地址信息的過程往往都是繁瑣而費時的，而設計師在此場景下考慮到用戶需要地址的多樣性，以及用戶行為背后的含義，當用戶復制了一段收貨地址，打開新建地址頁面時，App將主動提示彈窗“是否粘貼剛復制的信息”點擊“確認粘貼”即可粘貼收貨地址到對應列表項，這種預判設計對于用戶來說是自然且讓人愉悅的。我們不僅順應了用戶的操作行為，還在其中大大的幫助用戶減少了很多操作。
預判設計的主體是用戶行為，從用戶的視角出發，分析用戶行為，是設計師建立在整個產品的交互里路程和功能框架上，對用戶的行為深刻洞察后進行細節的改進。
當我們使用電腦時，總會發現找不到鼠標位置的情況，iMac設計師在識別到用戶開始連續晃動鼠標時，分析到用戶當前的狀態可能是在尋找鼠標的位置，會對鼠標做一個放大的效果，幫助用戶快速定位到鼠標的位置。
在抖音我們刷到一些連載視頻后，我們都會去進入作者的個人頁去尋找上下集，在作者個人頁作品很多的情況下，可能要尋找好久，抖音在個人頁的作品卡片上添加“剛剛看過”的提示，方便了用戶在瀏覽中能夠更快速的定位到剛才的視頻。方便繼續銜接觀看。雖然一個小小的功能提示，我們從用戶行為，預判到用戶的需求，帶給用戶更方便更快捷的體驗。
在美團外賣中用戶可以在訂單頁面直接點擊「再來一單」按鈕選擇和上次一模一樣的商品加入購物車，如果一家店沒有營業的話那么則會顯示一個「相似商家」按鈕。
結合實際我們操作的場景，外賣產品，我們重復下單的頻率會比較高，當我們來到這個訂單頁面，「再來一單」的按鈕可以更方便更快速的幫助我們下單，但當商家休息的時候，這個時候繼續展示「再來一單」按鈕對用戶來說也是無效的，我們往往會回到首頁去搜索相關類似的相關產品，然后再重新下單，而這時候「相似商家」按鈕直接幫助用戶一鍵定位到后續的一系列操作，真正的做到在分析用戶行為中，預判用戶操作。
設計師做需求時，往往需要考慮在特定情景下，用戶行為背后的思考與需求。因此符合情景的預判，我們也可稱其為“符合用戶感知的預判”。思考用戶使用產品的情景，及時而高效的迎合用戶對于當前場景的需求。
墨跡天氣的降水雷達走勢圖，進入之后，放大、縮小屏幕就可以查看全中國的云圖了，墨跡天氣的云圖可以查看到降水情況、閃電、積雪（冬天才有的功能），并且伴有文字提示，在未來兩個小時的天氣情況，方便了有出門需要的同學實時查看天氣。
在微信聊天功能中，我們可以對兩分鐘以內的消息進行撤回，但相信大家都有跟我一樣的尷尬經歷，發了錯誤的內容想要撤回，卻一不小心點了刪除，再也沒有機會撤回了。
微信在這個功能上做了很好的改進，當我們的發出的消息小于兩分鐘時，該消息只能撤回，去掉了刪除功能，在該消息超過兩分鐘后，則撤回按鈕消失，只能進行刪除操作，兩個功能進行了互斥處理，很好的避免了這個場景下用戶會誤觸。
當我們選擇好評的時候，會自動勾選到“公開狀態”，當我們勾選差評時，系統會自動取消”公開“狀態勾選，默認匿名發送該評價，很好的保障了差評用戶的人身安全問題和個人隱私問題。
當我們在淘寶搜索電腦包時，展示的內容下方會自動展示商品的容量標簽“可放14寸電腦”，幫助用戶在列表頁面就能篩選到更合適自己的商品，當搜索玩具時，也會展示當前商品適用的年齡段。產品根據用戶搜索的內容，自動匹配能夠幫助用戶進行篩選的標簽。
預判設計當中我們從三個層面進行了分析，從順應用戶行為的預判設計，到分析用戶行為的預判設計和符合用戶行為的預判設計。一個好的產品，往往會更多的使用用戶語言，通俗易懂地讓用戶可以對整體的使用方式一目了然，而不是產生一系列的問題，迫使用戶停下來，進行不必要的思考。用戶的每一次停頓對我們來說可能都是一次用戶流失。而預判設計要做的，是根據用戶的行為/用戶所在的場景，讓功能主動找到用戶，并讓用戶與之產生自然的交互。
場景化設計中，以情感化為目標的設計同樣需要具體場景具體分析，通過細節上的改變使得產品在當前場景下能夠與用戶產生更多共鳴，主要從細節出發滿足用戶在當前場景下的情感需求，讓用戶感動，給用戶驚喜。
其實用戶在使用產品的過程中，同樣渴望在使用產品時能夠得到情感上的互動，這反映在設計上即是產品情感化設計。情感化把握得好的產品往往更能抓住用戶的心。
躺平是一款阿里旗下的生活方式APP可愛的小人和擬人的語氣，設計師讓每一個空白枯燥的空頁面瞬間變得可愛和有趣起來。
快手在每一個特殊的節日都會給用戶送來精美的開屏祝福，讓用戶在節日當天打開app就能接受感受到產品滿滿的心意和祝福。
在用戶生日的這個特定時間和特定場景下，很多產品都給予了用戶不同的生日祝福，B站是一張有關于星座的動漫海報，快手給用戶定制了專屬生日開屏，網易云音樂的每日推薦為用戶獻上生日快樂歌，不同的產品結合自身不同的產品屬性，給一位用戶都帶來了不同的生日祝福。
想必大家都有熬夜刷劇的經歷，在騰訊視頻中，在全屏模式下點擊退出清屏模式下，頁面上方的時間旁邊會顯示夜深了，只是簡簡單單的三個字，這深夜在這個場景下，感覺內心也有一瞬間被人關心的觸動，體驗了一個產品的人文關懷和對用戶的體貼。
QQ音樂的綠鉆到期挽留彈窗真的是別出心裁，推薦了4首歌曲，連起來就是VIP我們舍不得重要的你，用歌曲的的名字來表達對用戶的訴求，趣味化的設計讓這個小小的挽留彈窗不僅沒有感覺到打擾，還感覺很有趣。
當有特殊天氣時，我們打開美團外賣的配送頁面時，頁面會在頁面中做當前天氣的擬實物效果，下雨天整個頁面也是下著大雨，下雪天整個頁面飄著雪花，甚至霧霾天氣整個頁面是是伴著黃黃沉沉的云，設計師預判到用戶打開該頁面是想看外賣到了哪里，看到外面的天氣如此糟糕，大家都不忍心催促外賣小哥了，大大減少了特殊天氣下配送不及時的投訴率。
在B站輸入密碼的時候，頁面上方的小人會遮住眼睛，潛臺詞：我不看，你放心輸入吧。在輸入密碼的情景下，設計師用趣味生動的卡通形象給用戶帶來了更信任更安全的感知。
黃油相機的加載動畫，是一個可愛的切黃油的小人，并且加載當中的文案，會告訴用戶當去前正在加載的內容是什么，能夠讓用戶對于加載的時間有預期，讓等待加載的過程不會枯燥。
蘋果新增 13 個與殘障人士相關的 emoji，包括導盲犬、輪椅、義肢、戴著助聽器的耳朵等。有意思的是，蘋果不僅按照以往的做法為涉及人物的 emoji 按照性別和膚色提供多個版本，而且在表示輔助器具的 emoji 中還做了細節上的區分，比如輪椅有手動和自動之分，不同導盲犬的導盲鞍樣式也有所不同。
回看歷年蘋果emoji的更新，從膚色平等，到性別、性向平等，再到為殘疾人設計，這讓我想起了蘋果為殘章人士做的廣告 - 科技屬于任何人
最近，快手B站豆瓣等都陸續上線了“紀念賬號”，產品的意義不僅僅是留住生者的精彩瞬間，更多的也是留住逝者的人生印記，對已故用戶的賬號進行保護，豆瓣在已故賬號上做了悼念用戶的活動“在他/她的頭邊放一束山茶花”的方式來紀念已故的用戶。
騰訊公益的404頁面，這個項目的靈感源于歐洲失蹤兒童聯合會主導的，名為“NotFound Project”的網絡公益工程。就是利用404頁面展示那些被拐賣兒童、失蹤兒童的信息，幫助那些孩子重新找到家人。
丁香園404頁面界面展現了因惡性醫患遇害的醫生同道，文案是“你所訪問的頁面就如那些遇害的同道，已離我們遠去?！毕旅孢€會有這些白衣天使的照片和名字。以這樣的方式悼念亡者，也側面展現了丁香園的社會價值。
在頁面走失的這種特殊場景下，404頁面視作可被利用的空間，來呈現公益信息，這種方法暫時減弱了用戶對產品頁面走失的憤怒，將注意力轉向對弱勢群體或社會問題的關心，側面感受產品的社會價值，這種方法適用于社會公益性質或相關業務的產品。以上的騰訊公益和丁香園對于這塊的設計都是很好的案例參考。
在快手搜索一些負面的情緒詞匯時，會提示用戶“別怕，我們都在”。并附有24消失免費心理危機咨詢熱線，從推薦位banner點擊后會進入一個群聊，里面都是其他用戶留下的暖心話語，這些情感化的設計讓那些正在經歷困難，或者想要終止生命的人傳遞以溫暖。我們可以幫助你，你并不是孤單一人。微信/知乎等搜索引擎下都有不同的對于該情況的情感化設計。
在京東搜索穿山甲，會直接挑戰到保護瀕危動物頁面，傳遞出了一個企業對動物的保護意識。頁面中的穿山甲≠治病，向全民科普瀕危動物的現狀和對于人們對于野生動物的錯誤認知。淘寶更是對野生動物保護啟動了綠網計劃，搜索穿山甲/象牙等都會進入到該活動頁面。
情感化離不開場景化設計，上面四個案例分別是兩個404頁面以及兩個搜索引擎的不同設計，不同的產品賦予了不同的含義。不同的場景下設計師也需要有不同的思考，陪伴產品一同進步。
情感化設計更多的是帶給用戶瞬間感動，很難形成長期的用戶激勵或用戶增長，因此情感化設計主要目的是通過情感累加，提升產品品牌形象；產品不僅是所有功能的集合，他們真正的價值可以是滿足人們的情感需求，而其中最重要的需求就是建立自我形象與社會地位。 反思層是包含并超越前兩個層次，我們要經常思考，為什么同類型的產品，我們要選擇它，為什么它給我留下了很深刻的印象，這都是反思水平的設計需要做的。
文章來源：站酷 作者：劉狗蛋
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
