隨著C端市場飽和與數(shù)字化的浪潮下，實體經(jīng)濟、ToB 、ToG的產(chǎn)業(yè)再次迎來了它的曙光。視頻動效的作品占比也已超過C端界面設計，相信今年視頻動效作品占比還會再次提升。
追波年度最佳作品來自大家最熟悉的UI8團隊中的Tran Mau Tri Tam ?，作者來自越南西貢，最佳作品截止目前355K瀏覽量，2933個贊。
為什么看似平平無奇的作品卻能獲得追波年度最佳作品呢？既不是C端也不是純B端的作品，更像一個網(wǎng)頁與平面的結(jié)合體。如果去掉搜索圖標、分類圖標和按鈕，你可以理解它就是一個平面作品，一個字體加幾何形體構(gòu)建的作品，為了豐富畫面的層次，讓畫面更加的活潑采用了多彩加幾何色塊，讓標題閱讀有停頓感和呼吸感。faster底部的橫線讓它從標題文字中脫穎而出，這種使用線條突出重要信息的設計也是今年追波設計流行趨勢之一。
MetroUI是Windows8的界面設計語言，在2010年至2013年間曾經(jīng)風靡一時，那也是移動互聯(lián)網(wǎng)的發(fā)展元年，現(xiàn)在國家推行實體經(jīng)濟、數(shù)字化帶動To B 、To G 的發(fā)展元年，通過幾何色塊（MetroUI）實現(xiàn)B端產(chǎn)品與C端設計風格的傳承與銜接，你會發(fā)現(xiàn)歷史總是驚人的相似。最后背景結(jié)合今年最流行的微軟風，毛玻璃的多彩高斯模糊漸變風，年度作品當之無愧。
最后來看下按鈕的設計，正常的按鈕要么文字加色塊，要么左圖標加右文字，它設計成左文本加右圖標，更加注重信息的可讀性和易讀性，也體現(xiàn)B端設計重功能和交互體驗，視覺點到為止的設計理念。
下面我們來欣賞年度最佳作品里面的流行趨勢吧。
字體三原則：可讀性、易識性、易讀性。當你同時讀一篇文言文和一篇設計文章，肯定設計文章的內(nèi)容可讀性更好。易識性是用在字體設計上，不能過于浮夸的改變字體骨架、形體而不易識別。易讀性和每個位設計師都息息相關，因為我們都需要編排文本。當我們小時候?qū)懽魑臅r，不會寫的文字可以用拼音代替。這時候讀者讀到拼音時會有停頓感，更加適合用戶閱讀。
通過給用戶制作停頓感來增加用戶的易讀性?？梢栽谙嚓P聯(lián)文本后面添加圖片、表情、圖標來更好的理解文本內(nèi)容，豐富文本內(nèi)涵。比如情侶間表達愛意時會輸入文本，“我愛你”、“我Love你”、“我ai你”、“我??你”，哪個更加會有情感共鳴呢？不言而喻，相信你心中已經(jīng)有答案了。
在標題文字上添加曲線來突出重要文案是2021追波最流行的趨勢之一，第一個設計目的就是突顯文字，其次就是想表現(xiàn)鉛筆真實書寫的感覺。之前很多帶有簽名的設計中，簽字的文本都是手寫體的感覺，手寫體對比電腦的機械字體會帶有一種人文氣息，也會讓兩者之間產(chǎn)生一種對比、矛盾。
除了突顯文本外，曲線還有視覺引導的作用。通過視覺引導讓用戶按照設計師編排的順序進行瀏覽界面。當然還有比這更科學的工具就是眼動儀測試，通過真實用戶眼睛瀏覽界面顯示對應的熱點圖。
多彩高斯?jié)u變風是從色彩的角度來傳達和豐富畫面的，多彩高斯?jié)u變風其實是從制造矛盾到平衡矛盾的過程，多彩漸變多為冷暖對比來制造畫面的沖突，需要控制冷暖畫面的大小來實現(xiàn)平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。
多彩高斯?jié)u變還可以結(jié)合輕擬物、幾何圖形、三維等新的組合方式去創(chuàng)新，給用戶呈現(xiàn)一種更加新穎的視覺表現(xiàn)形式。最后我們還是要回歸到內(nèi)容上，為了更好的傳達信息需要去設計與內(nèi)容相匹配的視覺風格。
B端設計的火爆帶動了B端相關模塊設計，更多的人也愿意嘗試B端相關模塊設計，側(cè)邊欄作為產(chǎn)品架構(gòu)中重要的導航系統(tǒng)，好的側(cè)邊欄設計能為用戶帶來更好的效率。主流側(cè)邊欄都做了展開、收起、拖拽等交互效果，也是受限于PC屏幕為展示更多數(shù)據(jù)而騰空間。側(cè)邊欄主要承擔的功能有導航、分類、自定義篩選、共享、新增等。追波的B端產(chǎn)品設計已經(jīng)不再是假大空概念設計，而是一套實用美觀可落地的設計。
儀表盤設計是一個很好的隱喻，想象一下開摩托車或汽車主駕駛前面的屏幕，汽車儀表有燃油表、車速表、里程表、水溫表、轉(zhuǎn)速表、故障指示燈等。B端類產(chǎn)品后臺界面的儀表盤設計也需要展示一些重要的數(shù)據(jù)和各種狀態(tài)，大體分為側(cè)標欄、導航欄、待辦任務、個人信息、報表數(shù)據(jù)、消息中心、快捷入口等。當然最重要的就是報表數(shù)據(jù)，團隊收益、任務進度、轉(zhuǎn)化比例、新增、存量、團隊工作時長等都是老板或領導關心的內(nèi)容。每個公司業(yè)務不同、每個人員權(quán)限不同，自定義的儀表盤也各有差異。重要的是突顯數(shù)據(jù)和業(yè)務狀態(tài)，需要分層級系統(tǒng)性去思考和設計。
復雜的事情簡單化，簡單的事情標準化，標準的事情流程化，流程的事情自動化。流程設計是每一個企業(yè)核心功能和業(yè)務，可自定義的管理流程系統(tǒng)搭建也是B端產(chǎn)品設計的難點，需要對業(yè)務高度抽象，讓每一個業(yè)務人員可自定義的流程才是好的流程設計。
B端C化是B端產(chǎn)品設計的視覺表現(xiàn)力慢慢往C端產(chǎn)品設計的視覺靠齊，國內(nèi)B端產(chǎn)品界面設計視覺水平還有很大的提高空間。除了視覺上的提升外，由于業(yè)務的發(fā)展，B端產(chǎn)品也開始移動化、智能化，國內(nèi)主流還是通過小程序、H5來現(xiàn)實B端產(chǎn)品C端化。
輕代碼化是一種低代碼賦能無代碼的方式，彌補無代碼拓展性差、覆蓋場景少的問題。在保有無代碼靈活、易用、快捷的同時，又能覆蓋低代碼使用場景。簡單理解就是無需代碼開發(fā)即可如搭積木般快速、靈活地創(chuàng)造屬于你的個性化管理系統(tǒng)，輕松實現(xiàn)多元業(yè)務場景的數(shù)字化管理。
輕代碼化將功能進行打包，升級成全局可以用的配置，技術人員配置好后，業(yè)務人員在應用編輯時直接選擇使用模版，綁定對應的變量即可使用。
為什么人加色塊的組合方式能流行起來？還是B端行業(yè)流行帶動的。B端講的更多的是企業(yè)對企業(yè)。企業(yè)對企業(yè)除了講行業(yè)解決方案外，還需要傳達公司的價值觀、使命、愿景。人加色塊的組合方式非常適合體現(xiàn)公司的企業(yè)文化。對于一家全球化的公司不同膚色的人物組合在一起，這種人文氣息和價值觀已經(jīng)就不言而喻了。
當然企業(yè)也需要進行營銷，抓人眼球。幾千年來的遺傳證明了，人的大腦對食物、性、動的東西、人臉和眼睛、危險的動物很敏感。人加色塊的組合方式也具有抓人眼球營銷的功能。真可謂一舉兩得。
這種風格更適合大公司，國內(nèi)的一些手機廠商OPPO、VIVO等也會通過手機+背景+人物來體現(xiàn)科技與人文的結(jié)合，而對于中小型公司產(chǎn)品差異化和行業(yè)解決方案展現(xiàn)應該還是重中之重。
毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的順應當下UI扁平化的設計趨勢。蘋果Mac OS Big Sur系統(tǒng)的圖標、界面中運用了大量毛玻璃和半透明元素，界面更扁平。至于C4D三維彩色玻璃的視頻教程可以在B站搜索“透光藝術-C4D創(chuàng)建彩色玻璃的4個技法”，完全能滿足UI設計師。當然還有一個好消息就是Mac用戶可以享有OC一年免費的使用權(quán)，具體安裝購買方法可以上“某寶”就可以輕松搞定，真香。
輕擬物這幾年一直流行，在UI設計中趨于穩(wěn)定的位置。從寫實到扁平再到輕擬物，其實是設計師們一路不斷探索的結(jié)果。本質(zhì)就是光影對形體產(chǎn)生的視覺感受。在色彩中對高光、亮面、明暗交界線、暗面、反光（環(huán)境光）五個部分的處理。寫實三維的圖標等設計更適用于簡潔的畫面中，扁平等設計更適用于復雜一點的界面中，比如B端產(chǎn)品界面中的功能圖標。輕擬物可使用的范圍更廣，效果更佳。Sketch、Figma軟件對于漸變、高光、投影、高斯模糊處理已經(jīng)非常簡單且出彩。
簡潔設計遵從了密斯·凡德羅的“少即是多”的設計原則，在B端產(chǎn)品界面中更加需要簡潔設計，我們最熟悉的Sketch軟件界面已經(jīng)是相當?shù)暮啙嵙?。回到現(xiàn)實當需求功能不斷增加，產(chǎn)品界面的編排如何取舍，如何保證界面的簡潔是設計師需要深度思考的問題？如何與上級溝通？該功能是否可做可不做？是否需要埋點用數(shù)據(jù)說話？如果只是一味競品有我們就需要有，功能不斷累加只會讓界面越來越重。
幾何圖形和幾何插畫有異曲同工之妙，幾何圖形多為產(chǎn)品界面和宣傳內(nèi)容的抽象，產(chǎn)品界面的幾何圖形多為占位符形式，加上色彩和幾何色塊讓其成為一個整體。B端產(chǎn)品視覺設計C端化的進程中，幾何圖形、幾何色彩不失為最好的突破口，相信今年追波B端產(chǎn)品的視覺設計一定會更上一個臺階。
幾何圖形另一個場景化的地方就是品牌，作為一名UI設計師一定會經(jīng)歷從圖標到幾何圖形到品牌設計的過程，品牌設計的技巧基本還是以幾何圖形為主，至于品牌的內(nèi)涵需要更深層次的解讀。掌握主流品牌設計的技巧對產(chǎn)品定位、品牌宣傳打下扎實的基礎。
暗黑模式的設計是解決在微弱環(huán)境下內(nèi)容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設備時長增大，如何在夜晚這個特定場景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞，提高在夜間使用的可讀性。
在設計暗黑主題時，不能為了突顯視覺上的逼格，而去使用高飽和度鮮艷的色彩來突顯界面的品質(zhì)感。而應該把舒適度、可讀性作為設計的衡量指標。Material Design給出了暗黑主題的設計準則，即正文和背景之間的對比度應至少為15.8:1。按照此標準設計，可讀性都還不錯。這里介紹一個插件“Stark”（Figma、Sketch、XD、Chrome插件）用來測試界面的對比度。
為什么叫模塊化，而不叫組件化，組件化更多的利用原子系統(tǒng)從原子、分子、組織、模版、頁面來快速的搭建界面，但在B端產(chǎn)品設計中基礎組件和業(yè)務組件的搭建是以提高工作效率為前提，是否有從0到1搭建B端產(chǎn)品組件的經(jīng)歷是設計師一生中最寶貴的經(jīng)驗之一，它能提高設計師的系統(tǒng)化思維、邏輯思維和抽象思維能力。
產(chǎn)品模塊化設計就是將產(chǎn)品分成幾個部分，也就是幾個模塊，每一部分都是具有獨立功能，具有一致的連接接口和一致的輸入、輸出接口的單元，相同種類的模塊在產(chǎn)品族中可以重用和互換，相關模塊的排列組合就可以形成最終的產(chǎn)品。通過模塊的組合配置，就可以創(chuàng)建不同需求的產(chǎn)品，滿足客戶的定制需求 。
插畫作為設計的一大品類，不同的插畫師都有自己擅長的風格，本質(zhì)是都有自己的個性，但是在產(chǎn)品設計中更多是需要共情、共性來講故事，表達產(chǎn)品理念和價值觀。這就需要插畫師去嘗試并探尋出適合互聯(lián)網(wǎng)產(chǎn)品設計類的插畫風格。設計的本質(zhì)是舊元素的重新組合，插畫不會過時，而是需要結(jié)合當下和產(chǎn)品找到最匹配的設計風格。
幾何插畫算是插畫簡化的一種表現(xiàn)形式，人和物的形態(tài)不再寫實，而是抽象成幾何圖形拼湊的感覺，同時保留人物形態(tài)的神韻。加上幾何色塊與人物交互形態(tài)的表現(xiàn)，傳達出簡潔、科技的現(xiàn)代感。難點還是在人物形態(tài)的表現(xiàn)上，平時多練習練習速寫還是很有必要的。
線面插畫最近一兩年非常流行，準確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成，用塊面表現(xiàn)人物形態(tài)時某些結(jié)構(gòu)會表現(xiàn)不出來，這時候用線條簡單勾勒后，結(jié)構(gòu)就會清晰明了。其次當線面插畫運用在界面上時，可以打破界面純文字或組件化的機械和沉悶感。線面插畫的風格提升畫面熱鬧感的同時，還能保持界面的干凈整潔。
界面微交互動效會讓用戶的體驗更加精致到位。想要打造優(yōu)秀的產(chǎn)品設計，微交互和動效設計是繞不開的，UI界面設計通過微交互反饋告知用戶當前正在發(fā)生的事情，所處的狀態(tài)。細微的動效更能調(diào)動用戶情緒，取悅用戶。C端產(chǎn)品微交互和動效已經(jīng)很成熟了，一部分功勞來自iOS系統(tǒng)原生自帶的效果。B端產(chǎn)品的微交互和動效更多還是在學習海外產(chǎn)品，還需要給前端工程師灌輸微交互和動效的設計價值，共同打造產(chǎn)品體驗細節(jié)。
Mg動畫需要很好的節(jié)奏感、韻律，每一個場景動畫都需要其中的元素進行連接變化，讓轉(zhuǎn)場動畫更加自然，MG人物動畫通過點線面的動效變化讓畫面更加有趣、自然，通過粒子效果讓特定場景無限循環(huán)會讓人更加印象深刻。
MacOS Big Sur系統(tǒng)圖標的更新帶動了三維圖標的流行，三維圖標的應該場景還是需要有較大留白空間的界面，因為三維圖標太小后就看不到更多細節(jié)。三維圖標感覺又回到了擬物化和扁平化哪個更好的問題上？設計師應該保持開放多元的視角。設計本身也在不斷的演化融合，存在即合理。合適最重要，它們都會有適合自己的場景和設計價值。
為什么輕三維在界面設計中占有一席之位？一個是設計師不斷追求差異化的產(chǎn)物。另一個是更好的表現(xiàn)內(nèi)容，并與用戶產(chǎn)生共鳴。輕三維的基礎模型都是來自手機界面中的各種元素，比如組件、開關、按鈕、占位符、圖表、幾何圖形、圖標、進度條等，這些都是用戶日常使用系統(tǒng)軟件常見的元素，通過簡單的幾何形體建?！驘艄狻硬馁|(zhì)—渲染—PS調(diào)色。難度系數(shù)不大但效果很出彩。第一個出彩點是模型帶有厚度的倒角，結(jié)合燈光渲染的光澤是二維軟件不能比擬的。第二個出彩點就是材質(zhì)自由添加，特別是當下流行的毛玻璃效果，玻璃材質(zhì)渲染效果更佳。第三個出彩點就是可以加局部燈光，局部的漸變色或環(huán)境光更佳出彩。
P4D是PS加C4D的設計表現(xiàn)技法，也是視覺設計的最后一個環(huán)節(jié)，通過PS對C4D的渲染圖片進行調(diào)色，利用PS的調(diào)色技巧可以很好的解決C4D打燈光的瑕疵，還可以利用PS強大的合成功能，將渲染圖片與圖片素材進行合成，來表現(xiàn)畫面的視覺度，當然三維軟件比較難實現(xiàn)的水、粒子、煙花等效果，也可以通過PS的后期合成來實現(xiàn)，這也是P4D的強大之處。
卡通IP設計最近三四年技術的迭代已經(jīng)慢慢的走上成熟，卡通IP也從傳統(tǒng)的純PS手繪技法，轉(zhuǎn)到C4D建?！巧壎ā狹D衣服制作—OC渲染—PS（靜態(tài)）/AE（動態(tài)）調(diào)色。
卡通IP火的本質(zhì)更適合做營銷，相比于品牌或Slogan，卡通IP具有親和力和畫面感。隨著各種手辦行業(yè)大熱，受互聯(lián)網(wǎng)大廠影響下，卡通IP已經(jīng)是互聯(lián)網(wǎng)B輪以上公司的標配了。如果團隊中沒有這樣能力的人，也可以通過繪制好二維，一套三維可以選擇外包完成。
對于UI設計師來說學習是有成本的，暫時并不是必備技能，如果喜歡完全可以學習，從設計差異化的角度來看三維視覺確實有一定的競爭力。
C4D三維場景動畫通過構(gòu)建實物和場景模擬生活中的現(xiàn)實場景，會讓用戶體驗真實感，三維軟件制作動效的最大優(yōu)勢是通過動力學和表達式來模擬真實感，未來在AR/VR領域會有更好的發(fā)展。相對于界面動效學習成本難度也相對較大。在三維動畫中C4D軟件對于域、動力學還是有一定的優(yōu)勢。
存在即合理，趨勢流行稍縱即逝，注定是不長久的，只有大浪淘沙歷史遺留下來的風格才能更長久。但我們也不能不去關注，因為哪有什么所謂的創(chuàng)新，只不過是舊元素的重新組合，并符合當下這個時代人的審美需求。香奈兒的“時尚易逝，風格永存”大概就是這個意思吧。
作者：水手哥 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
2022 年即將過半，疫情在家的我們重新花一些時間，回顧今年最引為人注目的一些設計趨勢，有些已經(jīng)變成現(xiàn)實，有些可能即將會發(fā)生。在過去的這十幾年里，全國的互聯(lián)網(wǎng)和移動互聯(lián)網(wǎng)行業(yè)蓬勃發(fā)展，引發(fā)了 UX / UI 行業(yè)的火爆，無論是在設計技術方面還是在設計實踐方面維持著快速發(fā)展狀態(tài)。設計探索受到了前所未有的關注。創(chuàng)新也永不停止，正在向各個方向延伸——有的是曇花一現(xiàn)，有的是重塑想象，有的卻循環(huán)往復。
下面我們將更詳細地向你探討一些 2022 年的設計趨勢。
The Badass Project 搗蛋派計劃
過去幾年里，大字排版的趨勢越來越明顯，字體尺寸也在增加！接下來，字體更大且?guī)缀鯖]有圖像的時尚 英雄形象 網(wǎng)頁設計，將成為主流風格。
（英雄形象在網(wǎng)頁設計中是一個特定的網(wǎng)頁橫幅，通常是一個包含與內(nèi)容相關的大圖像頁眉）
設計師和用戶都越來越習慣在登陸頁面前面和中心位置使用超大文字。無論是怪誕的無襯線字體還是現(xiàn)代奢華的襯線字體——這一趨勢就是在于越大越好。通過精心選擇的字體，網(wǎng)站可以做出比以往更大膽的宣傳，以吸引受眾的注意力并有效地信息傳達。
這些字體選擇通過 引人注目的動畫進一步生動起來。設計師正在實現(xiàn)通過鼠標移動或向下滾動頁面使排版移動并與用戶產(chǎn)生互動的創(chuàng)造性效果。以粗體、動畫和交互式排版為核心，許多網(wǎng)站也就不使用任何背景圖像，讓外觀變得干凈且精致。
MAFF
所以一定要試試這種趨勢：把文本尺寸放大，可以將其放置在一些圖像上，制作大尺寸的動態(tài)標題，讓用戶從中獲得樂趣。最重要的是，要勇于呈現(xiàn)大膽強烈視覺效果，從而可以立即吸引用戶的注意力。
案例：Medium 官網(wǎng)——https://medium.com/
Shakib - Sneakerbumb
在經(jīng)歷了充滿不確定性和陰郁的兩年，我們學會了尋找和珍惜任何享受幸福的機會。我們大量獨處時光的花在了數(shù)字空間上，這一現(xiàn)象也不例外。
La puce à l’oreille
為了回應這一需求，設計師從 80 年代和 90 年代獲得了巨大的靈感；將色彩豐富、質(zhì)感豐富、復古風格的主題與現(xiàn)代氣息結(jié)合起來，打造真實的外觀。鮮艷的色彩搭配柔和蠟筆肌理、古怪的排版、紋理豐富的背景、跨頁面網(wǎng)格的布局、非傳統(tǒng)的圖像和古怪的插圖，都可能會在接下來的一年吸引你的注意力。
Kristen Ryan for MakeReign
隨著這一切的發(fā)生，我們甚至可以說，在過去幾年里，每個人都學會了賦予自己一些自由的生活態(tài)度。這為我們提供了更多的實驗空間，當然也為設計和其他領域帶來了讓人愉快的成果。這就是說，設計師們覺得有必要從簡單和實用的用戶體驗轉(zhuǎn)向有趣、搞笑甚至愚蠢的交互。出人意料的是，讓別人微笑可能會是你的網(wǎng)站或 app 令人印象深刻的一種方式。
Blumenkopf
野獸派設計從 1950 年代的野獸派建筑運動中汲取靈感，延用其不修邊幅、毛糙粗狂的外觀形式，和故意做出的丑陋效果。就像在建筑中一樣，野蠻主義在網(wǎng)站中揭露和解構(gòu)(甚至慶祝)這種媒介的底層結(jié)構(gòu)和重要原則。原始、大膽和反動的本性使野獸派設計一直處于數(shù)字空間的邊緣，因為原始是互聯(lián)網(wǎng)的全部。然而，近年來，野獸派一直在緩慢而穩(wěn)定地復蘇，現(xiàn)在被一些人稱為新野獸派。
Caroselling
隨著互聯(lián)網(wǎng)上干凈、傳統(tǒng)的網(wǎng)站越來越多，個人網(wǎng)站變得難以脫穎而出。轉(zhuǎn)向野獸派，提供真誠、原始但獨特的視覺體驗，可能正是提升你下一個網(wǎng)站的方式。
無網(wǎng)格布局，強烈的調(diào)色板，重疊的元素，擁擠和幾乎混亂的設計只是你的野獸主義工具包的一部分。將它們與等寬和奇怪大小的排版結(jié)合起來，缺乏或極少的導航，這相當于沒有額外的“空間”或子頁面的“開放式版面”，你會得到一個引人注目的粗野派外觀。
Work with us
案例：阿里云設計官網(wǎng)——Alibaba Cloud Design - Not Design Just Future
當然，還有更多，但野獸派網(wǎng)頁設計的定義規(guī)則是沒有規(guī)則；它反對既定的規(guī)則和慣例。更重要的是，你需要用更強烈的意義價值和意圖來將你的野獸派杰作與另一個設計糟糕的網(wǎng)站區(qū)分開來。
Messenger
Figma、Todoist、Slack和 Messenger 等網(wǎng)站和移動應用程序都把時間和精力集中在桌面客戶端版本。
Todoist
越來越多的應用程序似乎也在效仿，因為研究表明，這樣用戶會感到 更舒適、更安全。用戶希望自己的應用程序遠離互聯(lián)網(wǎng)瀏覽器，遠離所有打開的標簽，回到指定的應用程序窗口，讓人感覺更寬敞、更專注。在使用這些應用程序時，不需要處理數(shù)分散注意力的標簽，這無疑是一種進步！此外，將通知直接發(fā)送到桌面，我們的通知管理也必然得到改善。
Figma
為阿拉伯語國家的谷歌搜索頁面布局
用戶研究團隊利用 人類心理學 領域的洞察，以及 可用性測試，已經(jīng)能夠塑造界面，為用戶提供最大的滿意度和愉快的體驗感受。幾十年來，這一直是用戶體驗設計的核心。
隨著技術的快速進步，我們看到數(shù)字產(chǎn)品體驗的保真度有了空前的提高。這一發(fā)展也為不同用戶群體之間的細微差異提供了新的理解。年齡、文化、地理位置、日常習慣、社會結(jié)構(gòu)（以及其他因素）的差異可能會導致人們對什么構(gòu)成令人滿意用戶體驗的期望存在顯著的差異。因此，這些體驗可能需要類似的設計，但肯定不是相同的設計方法。
隨著技術和研究方法的到位，我們開始看到一款產(chǎn)品的多種變體同時推出，以滿足不同用戶的需求。隨著許多大品牌都在努力擴大他們的用戶群體，創(chuàng)造本地化的產(chǎn)品體驗可能會成為一種大趨勢——如果不是標準的話。
NhuSW- Everyfit — Fitness for Everyone
包容性不僅是一種趨勢，也是一種運作模式；人類生存和共存是一個不可否認的重要方面。在日益全球化的復雜世界中，我們不斷意識到自己與其他個人或社群之間的差異。以同理心駕馭這些差異是我們的責任，并努力將所有文化、性別、性別、種族、能力和殘疾都有意義地適當?shù)丶{入全球社會。
Spotify
隨著數(shù)字空間引領著世界的全球化，它也毫無疑問地成為我們包容性努力的前沿。人們總是希望品牌和公司采用更具 包容性的敘述 和語言，并向包容性的平臺、產(chǎn)品和服務 邁進。他們被鼓勵在圖像、語言和視覺語言中推動多樣化的表現(xiàn)，這樣做不僅僅是為了營銷收益，而是為了更大的意義和價值。
這些是我們在 2022 年會看到的趨勢和現(xiàn)象。記住，它們是為了提醒我們當前的總體設計趨勢?？梢允褂盟鼈儊碇С趾褪跈?quán)您的設計決策，但不要害怕挑戰(zhàn)它們，或用它們?yōu)槿藗儎?chuàng)造更多積極有效的體驗。
原文標題：UI/UX Design Trends of 2022
文章來源：Codeart
原創(chuàng)作者：Taras Bakusevych & Maja Mitrovikj
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
2020年已經(jīng)過去一大半，這些時間以來，我一直在關注數(shù)字設計領域未來的設計趨勢。從年初就開始收集，到今8月份了，我想是時候?qū)l(fā)現(xiàn)的一些趨勢風格分享出來，這些風格很有可能繼續(xù)延續(xù)到2021的產(chǎn)品設計上。
對于UI界面視覺趨勢，同樣需要我們高度重視。畢竟每年改版方向，視覺風格研究是必不可少的一個環(huán)節(jié)，下面正式開始。
今年在各網(wǎng)站上看到大面積的漸變色設計，相對前兩年來說越來越少，設計上有所克制。大面積的漸變色雖然視覺沖擊力強，但大部分停留在概念中。
從今年設計中我們可以看到設計更加理性與克制，將漸變色彩運用到關鍵功能上，突出強調(diào)重要信息。
機票選購界面，將漸變色運用到頭部位置去強調(diào)功能。
運用在功能卡片上，突出重點信息。
如上圖，設計上同樣只將漸變色運用在背景上，其他卡片上基本沒有漸變色。
幾何圖形設計是目前運用最多一個設計手法，今年發(fā)現(xiàn)一些比較抽象藝術化包豪斯風格幾何圖形，在UI設計中大量運用，且效果還不錯。
這種圖形帶來好處就是記憶性強，應用廣，它不僅可以拓展在品牌包裝，品牌圖形延展，還可以運用在UI設計中。
卡片設計采用一些具有意向符號的圖形，來表達功能的設計，形成記憶點。
品牌設計上，也是重復這種極簡包豪斯風格幾何圖形。將logo元素提取，進行包豪斯風格化，重復運用在設計中。
今年這樣的設計屢見不鮮，大量3D運用在界面設計中，二維的界面已經(jīng)不再滿足當前設計需要。設計師去探索更多維度學科與UI界面融合，形成一種全新的視覺感官。
uber的概念官網(wǎng)就通過3D來呈現(xiàn)，表達功能亮點。
將二維世界三維化，將是2021年重要的趨勢。目前國內(nèi)外線上有一些產(chǎn)品，開始在部分功能模塊使用這樣設計手法，如Naver，支付寶等。
可以說是趨勢輪回，毛玻璃的效果又回來了。這也是今年在各網(wǎng)站設計上出現(xiàn)頻次多一些的設計。
新的毛玻璃效果更加去注重功能說明，用在視覺強調(diào)的地方。
如上圖設計，毛玻璃運用在頂部關鍵信息上。這樣設計即可減少其他色彩運用，還可以對功能信息進行強調(diào)。
毛玻璃效果運用在個人中心，人物頭像位置，進行設計強調(diào)。
運用毛玻璃去包裝UI界面，可以提升品質(zhì)感與神秘感。
將功能與場景融合設計，用戶在使用產(chǎn)品過程中，能產(chǎn)生更多情景體驗感觸。這也是最近今年喊的比較火的一種設計思路。在各網(wǎng)站上，這樣設計出現(xiàn)次數(shù)越來越多，設計效果沖擊力強，得到很多設計師的認可。
場景中關鍵人物元素與設計進行巧妙集合。
運用超現(xiàn)實設計手法，將人物與酒店場景進行排版布局。
將制作材料與產(chǎn)品集合。
擬真植物元素與土地進行巧妙集合，在視覺上傳達逼真效果。
雜志化設計風格鮮明，可以有助產(chǎn)品去打造強化記憶點。雜志化設計的優(yōu)勢可以不受到網(wǎng)格約束，排版使用大字體，同時設計排版上更加個性。我們在做產(chǎn)品概念探索前期，可以多去嘗試這樣的風格。
擬物圖標又回來了，Apple新版本的Big Sur系統(tǒng)，就采用擬態(tài)圖標，這也是一個新的嘗試，當然也是一個開始。我們很有必要時刻關注這個趨勢，未來將會在更多設計中看到擬物化圖標的出現(xiàn)。
不過這種風格也不能大面積運用在界面中，我們可以運用在一些關鍵功能入口設計上。
在天氣上的運用，相對之前扁平化設計，目前具有空間的擬物化設計，增加了真實感。
圓形趨勢，我想大家也許會忽略的點，最近幾年設計中，圓形的設計無處不在。它的好處不言而喻，親和力強、場景覆蓋廣，幾乎任何設計都能去用圓形。因此我們有必要去注意圓形運用技巧。
星巴克的web UI概念設計，采用圓形與產(chǎn)品進行集合設計排版。
新擬態(tài)趨勢是2020年受到廣泛關注的趨勢之一，這種趨勢大量使用了柔和的陰影和微弱漸變，使設計既具有未來感又具有現(xiàn)實感，并且為熟悉的界面帶來了新的感覺。相對之前大面積濃厚陰影而言，目前新的簡化擬態(tài)界面，會克制使用這些元素。
2021年擬態(tài)界面，更注重功能與體驗。擬態(tài)效果會使用在關鍵功能上，如儀表、按鈕，又或者需要重點強調(diào)的地方，避免了大面積使用這種設計手法。
2021年的趨勢相對來說，有繼續(xù)延續(xù)2020年一些設計風格，這些風格將會在繼續(xù)加強，同時我們也有發(fā)現(xiàn)，目前越來越多3D元素與二維界面進行集合設計，能更生動傳達功能與將故事，2021年大家務必要注意這種趨勢的延續(xù)。
作為設計師，我們對設計的思考不能只停留在表象層面，而更多的需要圍繞信息傳達這一設計的本質(zhì)功能，以充滿自省的精神深化和反思自己的設計意識，同時要時刻保持對趨勢的敏感度。將新趨勢合理的運用在產(chǎn)品設計中，以產(chǎn)生最大化收益。
轉(zhuǎn)載請注明：優(yōu)設網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
網(wǎng)站設計之一：怒馬！超實用的單頁網(wǎng)站設計指南（附大量資源）
網(wǎng)站設計之二：旅游網(wǎng)站設計分析！教你10個小技巧
網(wǎng)站設計之三：實例教學！如何將極簡風格的原則運用到網(wǎng)站設計中？
網(wǎng)站設計之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設計形式的幾種方法
網(wǎng)站設計之五：經(jīng)驗分享：移動網(wǎng)站設計應該避免的“七宗罪”
網(wǎng)站設計之六：4000 字快速回顧20多年的網(wǎng)頁設計發(fā)展史！
網(wǎng)站設計之七：騰訊出品！2021-2022設計趨勢報告：動態(tài)篇
網(wǎng)站設計之八：為什么千萬別隨便學國外的極簡設計？
網(wǎng)站設計之九：高手出品！2020~2021年UI界面設計趨勢
網(wǎng)站設計之十：如何做好網(wǎng)頁頭部內(nèi)容設計？來看 58 設計師的總結(jié)！
動態(tài)設計（Motion Design）有助于創(chuàng)建令人愉悅且直觀的用戶界面。好的動態(tài)設計，不僅能引導用戶對數(shù)字產(chǎn)品的體驗，還可傳達有關產(chǎn)品的品牌信息。本文將介紹近來最流行的動態(tài)設計趨勢，這些令人驚艷的動效表現(xiàn)手法，在不久的將來勢必席卷所有人的目光。
動態(tài)能激發(fā)用戶的情緒，為靜態(tài)的視覺設計注入活力與生命力。有趣、奇妙、吸引人的動態(tài)，能讓你的產(chǎn)品展現(xiàn)與眾不同的魅力。另一方面，動態(tài)有助于支持可用性，通過自然流暢的物理運動，突顯元素在過渡時的關聯(lián)性與狀態(tài)變化，增強用戶對產(chǎn)品功能的感知。
因此，動態(tài)設計必須是有意義的，同時兼具可用性與美感，UX 行業(yè)也將動態(tài)設計視為多學科的交集，細分成一個專業(yè)的設計門類。作為 UI 和 UX 設計中重要的組成部分，動態(tài)設計從三個層面發(fā)揮影響力：
提高連貫性（Increase Continuity）
讓界面元素在用戶流程中順暢地轉(zhuǎn)變與過渡，將用戶操作導向期望的任務結(jié)果。
連接場景（Connect Scenes）
在轉(zhuǎn)換場景的過程中扮演潤滑劑的角色，闡明場景之間的位置、層級與空間的關系。
視覺吸引（Visually Appealing）
聚焦用戶視線，將其注意力放在重要的事情上，從而起到信息傳達、提升識別度的作用。
植基于 UI 和 UX 設計而發(fā)展的第三維度，動態(tài)設計的趨勢自然與兩者密不可分。綜觀近年，多數(shù)作品巧妙地運用絢麗的動態(tài)圖像（Motion Graphics）與動效設計，讓新的視覺手法得以表現(xiàn)更為出彩。再者，隨著移動端芯片性能提升，跳脫二維平面的表現(xiàn)形式不再難以實現(xiàn)，讓設計師能夠解開束縛，發(fā)揮無限的想像空間。2021 年的動態(tài)設計可歸納為三個趨勢：
增強表達（Enhance Expression）
運用引人注目的表現(xiàn)手法將信息傳遞給用戶，包括變形、動態(tài)文字和背景動畫。
創(chuàng)造層次（Create Hierarchy）
在視覺平面中創(chuàng)建空間層次結(jié)構(gòu)，遮罩與視差是常用的表現(xiàn)手法。
擴展維度（Expand Dimensions）
突破二維限制，將界面元素多維化營造空間感，例如 3D 動態(tài)圖形和攝像機運動。
變形創(chuàng)造了一種連續(xù)的敘事狀態(tài)，告知用戶元素的狀態(tài)或作用發(fā)生變化，是一種最引人注目的表現(xiàn)手法，能將形狀、圖像、色彩無縫地融合與過渡。
動畫插圖 Animated Illustrations
2021 年看到許多有趣、吸引人的插圖，而更多的設計師開始為靜態(tài)圖像添加動態(tài)，也讓 GIF 和動畫插圖越來越受歡迎。
動畫插圖看起來更生動，并帶有敘事性質(zhì)。在示例中，運用動畫插圖來呈現(xiàn)這杯果汁是由哪些水果打成，比起文字描述更能吸引觀眾的注意力。
by Lobster
通過動畫插圖來呈現(xiàn)同一系列的轉(zhuǎn)變，有利于延續(xù)外形上的特征，讓不同的物體具有連結(jié)性。比如從桌子、衣柜到燈具的連續(xù)變化，同樣風格的系列家具利用動畫來體現(xiàn)一致性。
by Graceful illustrations ?
流體動態(tài) Liquid Motion
動態(tài)的有機形狀，包括流體、煙霧和火焰等粒子效果，能夠極大地增強視覺效果。流體動態(tài)并非明確的過渡與場景轉(zhuǎn)換，而是顏色在流動的液體中擴散，進而創(chuàng)造出抽象或真實的視覺形狀。這種風格能實現(xiàn)無縫過渡，并為設計增添有機感，也是 2021 年最引人注目的動畫趨勢之一。
運用流體動態(tài)來展現(xiàn)抽象的有機體，除了輕易地攫取受眾目光，還讓人不自覺地佇足在畫面上，感受流體變化的韻律與美感。這類動態(tài)設計可作為烘托主題的背景動畫，或是吸引目光焦點的主角。
by ?anton mishin?
流體動態(tài)運用到網(wǎng)站設計所營造的視覺沖擊力更為驚艷，能為用戶帶來獨特、新鮮的視覺感受， 使得流體動態(tài)深受風格前衛(wèi)的設計師喜愛。網(wǎng)站還能利用鼠標懸停與流體進行互動，因此會在許多特效網(wǎng)站見到流體動態(tài)的蹤跡。
by Gilles Tossoukpé
動態(tài)漸變 Dynamic Gradients
扁平化設計缺少現(xiàn)實質(zhì)感的元素，搭配漸變色能有效緩解不足，為設計創(chuàng)造深度與層次。變化中的漸變色同時帶有動感與舒緩，充滿活力卻又平靜。使用動態(tài)漸變能讓設計師展示一系列不斷變化的情緒，許多內(nèi)容創(chuàng)作者和品牌已經(jīng)注意到這一點，開始在廣告活動、識別設計和數(shù)字內(nèi)容使用動態(tài)漸變。
by Pixelz Studio
微交互 Micro Interactions
在用戶體驗設計中微交互變得日益重要，而動態(tài)設計正是微交互的靈魂所在，即使只是微小的視覺提示或反饋，都是人機交互易于使用的關鍵。從經(jīng)典案例來看，微交互的動畫細節(jié)必須帶有明確的目的性，讓用戶獲得實時反饋，指導用戶進行下一步。從近幾年的設計趨勢來看，微交互已成為不可或缺的存在。
by Илья Бабушкин
by Google
動畫商標 Animated Logos
過去幾年動畫商標是最流行的動畫趨勢之一，通過各種視覺效果，設計師能創(chuàng)造出不同類型的動畫商標，許多企業(yè)開始采用動畫商標作為吸引注意力的手段。多數(shù)情況下，商標是進入網(wǎng)站時最先看到的東西，因此商標應該令人難忘、引人入勝，并使用符號或排版來揭示品牌個性。結(jié)合動畫的優(yōu)勢，設計師可以運用一些動態(tài)或效果來講述簡短的故事以強調(diào)品牌特征，并為靜態(tài)排版和商標注入一股活力。
by Yulia K.
by Meta
動態(tài)文字是使用移動文本來吸引注意力的動畫技術，許多卓越的品牌在網(wǎng)頁設計中使用動態(tài)文字，為網(wǎng)站外觀增添動感和視覺沖擊力，是近年 UI 動畫的趨勢之一。
設計師使用動態(tài)文字為單詞或句子添加生動的元素，借此定下情緒氛圍與設計基調(diào)，吸引用戶的注意力。幾種常見的表現(xiàn)手法，擠壓和拉伸一個詞能會喚起一種俏皮感，而連續(xù)重復這個詞則具有催眠感和前衛(wèi)感。另外，使用大號和粗體字體來增強份量以強調(diào)某些信息，也是動態(tài)文字的特征之一。
無論在電商網(wǎng)站、電視廣告或音樂視頻，動態(tài)文字都占有舉足輕重的地位，有利于加深用戶對品牌的關注與印象。
by HOLOGRAPHIK®
by Hrvoje Grubisic
通過背景動畫來強化敘事，成為許多行業(yè)常用的品牌傳播手段。你可以創(chuàng)建動態(tài)的品牌故事，展示有趣的制造過程、產(chǎn)品的使用場景。背景動畫深獲大眾喜愛，它能讓用戶在進入登錄頁或網(wǎng)站首頁時，輕易地了解更多有關公司或產(chǎn)品的信息。調(diào)研顯示，從銀行、醫(yī)療保健公司、電商零售商、餐館到 B2B 供應商，這些跨越不同細分市場和行業(yè)的網(wǎng)站都開始使用背景動畫。
by Carlo Soleri
by Kirill Zhukovsky
遮罩過渡是將幾何或有機形狀作為銜接下個場景的遮擋物，等同于舞臺幕布設計，能在界面元素進場或退場時創(chuàng)造連續(xù)性效果。這種表現(xiàn)手法簡潔高效，是最常見的過渡動畫之一。
切換場景 Scene-Switching
其中一種遮罩過渡，是將當前場景完全置換，如同揭開蒙在上層的布，逐漸展露疊在下方的景，并利用景物相似性和動作延續(xù)性，讓兩個場景能夠順暢地銜接，不致于差異過大，造成用戶心理負擔。
by intent
by Minh Pham ?
狀態(tài)變換 State Transformation
另一種遮罩的表現(xiàn)形式，較無明顯的場景過渡，而是利用遮罩來表現(xiàn)景物的狀態(tài)變化，界面元素和布局基本保持一致，以此塑造無縫過渡的視覺效果，這種手法被廣泛地使用，例如氣候變化、人物換裝、產(chǎn)品組合等。
by Daniel Tan
by Outcrowd
視差是利用不同的界面元素以不同的速率移動，創(chuàng)造前后景深的分離效果，借此在平面中塑造空間層次，已成為網(wǎng)站首頁最為普遍的表現(xiàn)形式。
視差之所以能形成一股風潮，廣為各個行業(yè)所接受，一方面是信息層級更加清晰，明確定義各種元素的關系，讓用戶專注于主要操作和內(nèi)容，將背景或非交互元素往后退，同時保持設計的完整性。另一方面是豐富的層次變化，當用戶滾動或滑動時，能在扁平化界面拉開空間關系，利用不同的速率和縱深，塑造多層次的感官體驗。
by Studio V?R
by Studio V?R
近年來，結(jié)合 3D 動態(tài)圖形的界面設計呈現(xiàn)爆炸式增長，雖然創(chuàng)建 3D 動畫需要更多的時間、技巧與協(xié)作，但不可否認的，3D 動畫比 2D 圖形更加逼真，從而提供更具吸引力和互動性的用戶體驗，并有效地展示品牌的活力。
更生動的表情 Lively Emoji
動畫的吸引力在于能夠創(chuàng)建各種角色，并為無生命物體注入生命力，表情符號就是一個很好的例子。作為獨特的網(wǎng)絡語言，表情符號生動地描摹日常面對面交流的非言語信息，隨著圖形界面的設計趨勢逐漸結(jié)合 2D 與 3D，運用 3D 動態(tài)圖形來創(chuàng)造更加動感、擬人化的表情，能讓這些非言語信息更加豐富，有機會引領下一波風潮。
by Outcrowd
營造空間感 Spatial Awareness
3D 動態(tài)圖形為平面設計建構(gòu)了空間敘事框架，在扁平化界面中展現(xiàn)立體感，從而表達空間中元素的位置與層級關系。多維化的發(fā)展趨勢，推動了視覺表達形式的演變，空間感讓界面設計更符合人類的認知邏輯，運用各種 3D 運動特效，包括旋轉(zhuǎn)、翻轉(zhuǎn)、折疊、透視、Z 軸位移等，打造令人難忘的感官沖擊。
by UI8
by Bruno Ortolland
擬人動畫 Anthropomorphic Animations
擬人化能讓物體、植物、動物等非人類事物，表現(xiàn)出人類屬性的行為與狀態(tài)。動畫片運用擬人的手法是最普遍的，1927 年迪士尼第一部系列動畫《幸運兔子奧斯華》的主角便是擬人的兔子形象。由于人們?nèi)菀妆灰匀祟愋惺碌氖挛锼絹碓蕉嘣O計師在界面中添加擬人元素，利用這種效果讓畫面更加生動有趣，增強用戶體驗的愉悅感。
by Gregory Riaguzov
在動態(tài)設計中，攝像機運動是最自由、靈活的一種表現(xiàn)形式，能讓畫面過渡更有張力，突破 2D 平面在視角上的限制，創(chuàng)造一個無界線的立體空間。常見于影視、動畫和廣告的攝像機運動，包括推近、拉出、平移、跟拍等方式，備受動態(tài)設計師青睞，讓用戶以多變的視野探索數(shù)字產(chǎn)品。
推近/拉出 Dolly In/Dolly Out
推鏡頭是指被拍攝的對象不動，攝像機由遠而近，朝著對象不斷推進， 用來突出人或物的主體。鏡頭推近的運動方式，用來呈現(xiàn)從整體到局部、由分散到集中的變化，引領用戶進入故事情景，給人一種身臨其境的感受。
相反地，拉鏡頭則是將攝像機后退，使畫面逐漸遠離被攝主體，側(cè)重的是從局部到整體、由點到面的轉(zhuǎn)變，強調(diào)主體所處的空間環(huán)境。隨鏡拉出的景象，能激起人們無限的想像。
水平/垂直移動 Truck/Pedestal
水平向左或向右，垂直向上或向下移動攝像機，使畫面不斷變化，讓用戶跟隨鏡頭視角一起移動，產(chǎn)生一種置身其中的感覺。這種運鏡方式，通常用于具體的場景，利用角色或景物的延續(xù)性來消除場景過渡時的邊界，表現(xiàn)出一種流動感，無論是手勢滑動或鼠標滾動都能有順暢的操作體驗。
結(jié)合多種運鏡 Multiple Camera Movements
運用多種攝像機運動相當普遍，既能擴大視野，又有很強的空間感，可以更加自由與多樣地展示不同視角和情景。比方說結(jié)合橫搖（Pan）、直搖（Tilt）和跟隨（Tracking）鏡頭，連續(xù)而詳盡地展示一個產(chǎn)品，由于畫面始終跟隨一個主體，有利于突出產(chǎn)品特征，并讓用戶從不同的角度和距離觀看產(chǎn)品，是一種增強臨場感和參與感的有效方法。
一鏡到底 One Shot
在電影中為了不將觀眾的情感和注意力割裂，使用一個鏡頭來完成全片的場景刻畫和敘事，這種拍攝手法被稱作一鏡到底或長鏡頭。連續(xù)鏡頭逐漸被運用到界面過渡，以此增強操作過程的流暢性，例如一氣呵成的購物體驗，或是貫穿全場的人物角色，其特點是給用戶最沉浸的感官體驗，無間斷地體驗整個流程。
動態(tài)設計作為近年熱門的創(chuàng)作形式，廣泛應用到各個領域，逐漸成為設計的主流趨勢。受益于技術演進與發(fā)展，從創(chuàng)意生產(chǎn)到落地實現(xiàn)，動態(tài)設計的門檻不再遙不可及。設計師得以將想法轉(zhuǎn)化為生動、有趣的作品，并有機會創(chuàng)造新的表現(xiàn)手法，玩出許多新花樣，成為 2021 年動態(tài)設計的特色。
本文歸納的設計趨勢，有助于啟發(fā)設計師對動態(tài)設計的想像，激發(fā)更多創(chuàng)作靈感，為靜態(tài)界面賦予靈魂，打造令人難忘的視覺體驗和品牌形象。
轉(zhuǎn)載請注明：優(yōu)設網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
網(wǎng)站設計之一：怒馬！超實用的單頁網(wǎng)站設計指南（附大量資源）
網(wǎng)站設計之二：旅游網(wǎng)站設計分析！教你10個小技巧
網(wǎng)站設計之三：實例教學！如何將極簡風格的原則運用到網(wǎng)站設計中？
網(wǎng)站設計之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設計形式的幾種方法
網(wǎng)站設計之五：經(jīng)驗分享：移動網(wǎng)站設計應該避免的“七宗罪”
網(wǎng)站設計之六：4000 字快速回顧20多年的網(wǎng)頁設計發(fā)展史！
網(wǎng)站設計之七：騰訊出品！2021-2022設計趨勢報告：動態(tài)篇
網(wǎng)站設計之八：為什么千萬別隨便學國外的極簡設計？
網(wǎng)站設計之九：高手出品！2020~2021年UI界面設計趨勢
網(wǎng)站設計之十：如何做好網(wǎng)頁頭部內(nèi)容設計？來看 58 設計師的總結(jié)！
在本文中，我們將發(fā)現(xiàn)：
3D視覺設計師的內(nèi)卷將會越來越嚴重
數(shù)據(jù)可視化的工作將變得越來越重要
服務的移動化還需要做出更多努力
scrollytelling 技術會越來越流行
舊的滾動是無聊的。如果你想吸引注意力，你就需要實現(xiàn)滾動敘事（scrollytelling）。（彩云注：這個技術的核心在于邊滾動頁面邊講故事）
《紐約時報》是第一批在他們的文章《雪花飄落》中使用滾動敘事手法的機構(gòu)之一。
它是一種敘事形式，可以在網(wǎng)頁和APP上呈現(xiàn)。想象一下，在一個網(wǎng)站中每個插圖、文本和其他元素都開始變得生動起來。自然地，你會想看到這個故事的結(jié)局。它就像一個游戲，帶你穿越迷宮。雖然你不能影響它的進程，但卻讓你感覺自己能參與其中。
2022年，Scrollytelling將會出現(xiàn)在你看到的每一個流行網(wǎng)站上。
另一方面，scrolllytelling讓用戶真正去閱讀內(nèi)容。你可以用動態(tài)文本讓他們產(chǎn)生興趣，比如谷歌的網(wǎng)站 (https://www.google.com/search/howsearchworks/)。他們的團隊知道如何讓信息看起來更好:
Scrollytelling在用戶向下滾動時被激活，因此得名。沒有點擊，沒有選擇的麻煩，沒有彈出窗口。你似乎停留在一個地方，但通過滾動，把屏幕上的故事慢慢展開。這不僅要求設計師創(chuàng)造出酷炫的視覺效果，還需要認真思考一個你想要講述的故事情節(jié)。
所以，最好的網(wǎng)站不可能在2天內(nèi)建成，需要更多的時間去打磨。
IAmBinadam令人驚艷的敘述設計
滾動敘事的項目通常需要大量的時間和精力。不過，這樣做的結(jié)果是值得的。頁面變成“活的”，每一秒都有新的事情發(fā)生，所以在閱讀時很難感到無聊。
那么移動端APP呢? Pure是一款約會應用（彩云注，這個應用在app store可以搜到，推薦大家安裝一個體驗一下，非廣告），它創(chuàng)造了一種我稱之為“tappytelling”的故事(當你第一次點擊并打開應用時，它就會被激活):
Scrollytelling是為用戶而創(chuàng)建的，用戶很喜歡它，不需要到其他頁面去閱讀整個故事。相反，網(wǎng)頁設計的整個故事都是事先考慮好的，并盡可能以最有趣的方式設計出來。
如何在2022年做出一個還不錯的企業(yè)網(wǎng)站？你不會想告訴用戶你是“XX領域公認的領導者，該領域最好的之一”。這種標準的廣告表達并不傳達任何有價值的信息。
最好不要用形容詞，而是用事實來說明:你有多少分支機構(gòu)，在哪些城市，誰是你的客戶，以及你是如何幫助他們的。抽象信息是不可靠的。但如果你有很多想要分享的數(shù)據(jù)，你需要讓它不僅簡單，而且有趣。
數(shù)據(jù)可視化有助于以一種吸引人的方式傳達正確的信息。它也可以與滾動敘事（Scrollytelling）緊密結(jié)合。以下是IAmBinadam展示數(shù)據(jù)的方式:
通過去除數(shù)據(jù)集的復雜性，使信息更容易讓讀者感知。
不同級別的數(shù)據(jù)具有不同的大小，這樣用戶知道應該先從哪里查看
讀者可以很快注意到作者試圖通過圖片引出的結(jié)論?？紤]到如今人們消費的數(shù)據(jù)量巨大，那些干凈整潔的數(shù)字帶來的正面影響更大。
有些圖表乍一看甚至不像圖表，這使得它們更加能被注意到
還有一種現(xiàn)象叫做“新冠后遺癥”。這是Covid對公司及其員工的長期影響。根據(jù)英國國家統(tǒng)計局的數(shù)據(jù)，2018年，壓力和焦慮的平均得分約為2.7/10。自新冠疫情發(fā)生以來，得分已升至4.0/10，很少低于這一水平。同樣因為大流行，在過去兩年里工作量增加了4個小時。
人們壓力太大，卷的太辛苦，以至于不愿去看復雜的數(shù)據(jù)。
設計師做好數(shù)據(jù)可視化，以保持人們的注意力。記住，復雜的信息通常被忽略，因為讀者試圖節(jié)省他們的時間，更有可能使用滾動按鈕。
Illustration by Mona Chalabi
以下是我們推薦的一些表示數(shù)據(jù)的方式
1）圖表和曲線圖
2）插圖
3）靜態(tài)信息圖
4）互動信息圖
Illustration by Ink Factory
一個好的圖表，或者任何其他形式的數(shù)據(jù)可視化，都應該具有在Edward Tufte的“定量信息的可視化顯示”中描述的特征。在他的書中，Tufte通過圖表解釋了好圖表的3個原則：
1）展示數(shù)據(jù)的圖形元素與數(shù)值總數(shù)的比值應趨向于1。簡單地說，應該刪除一切不必要的元素，保持整潔。
2）充分利用好畫面空間。也就是說，需要將數(shù)據(jù)編排的更緊密
Graph by Hootsuite
3）客觀地描述數(shù)據(jù)。不要使用夸張的圖表，可視化數(shù)據(jù)可以看起來很酷，但真實永遠是更重要的。
根據(jù)We Are Social的數(shù)據(jù)，2021年有52.2億人使用手機，約占世界人口的66%。自2020年1月以來，手機用戶數(shù)量增長了1.8%(9300萬)，而手機聯(lián)網(wǎng)總數(shù)量增長了7200萬(0.9%)，到2021年初達到80.2億。
過去一年，社交媒體用戶的數(shù)量增長了13%以上。到2021年初，社交網(wǎng)絡上已有近5億新用戶注冊。根據(jù)App Annie的數(shù)據(jù)，Android用戶每天花在手機上的時間超過4小時。2020年，安卓用戶上網(wǎng)時長超過3.5萬億小時。
令人印象深刻的數(shù)字，是嗎？似乎到2022年，為產(chǎn)品做一個APP將成為必須擁有的東西。如何知道你的公司是否真的需要一款應用？有以下幾點可供評估：
1）用戶主要通過移動設備訪問你的網(wǎng)站這是你應該了解的重要數(shù)據(jù)。
客戶和你在一起的時間越長，你就有越多的機會去吸引他們，了解他們的習慣，并給他們想要的東西。（彩云注：這就是為什么各大廠之間都在拼命搶占用戶的在線時長。）
2）幫助內(nèi)部業(yè)務流程更加有效。
如果你想要提高員工的工作效率、改進工作流程或增加利潤，那么就制作一個可以幫助管理業(yè)務流程的移動應用。
如今，像這樣的手機應用使企業(yè)能夠執(zhí)行越來越復雜和多樣化的任務，加快日常重復操作和文檔管理。
3）實現(xiàn)一些網(wǎng)站上沒有的新功能。
如果你認為APP能為用戶打開新的觸點，并讓用戶體驗更加友好，那么它就值得考慮開發(fā)。問問自己的APP能提供什么新的商業(yè)機會？例如，隨著疫情的蔓延，許多人開始用上健身APP在家里鍛煉。
4）競爭對手做的情況。
要了解競爭對手在做什么，他們是否有APP，能做什么，以及他們是否真的對用戶有用。
查看App Store和谷歌Play的統(tǒng)計數(shù)據(jù)。下載和評論的數(shù)量可以告訴你用戶是如何使用競爭對手的應用的。如果他們的服務真的很方便而且很有必要，那么你就容易被甩在后面。
5）復購率。
一個應用可以幫助你留住那些習慣從你那里購買的人。如果想為老客戶開展促銷活動了，給他們發(fā)送一個通知就能完成，成本更低。
在正確的時間提供的報價越有吸引力，人們購買的可能性就越大。
6）促銷工具。
有了應用，你就不需要花錢設計和制作實體卡，客戶也不需要隨身帶卡。將促銷計劃整合到APP，并分享有用的促銷信息。
開發(fā)手機網(wǎng)站比開發(fā)手機應用需要更少的工作量，這反過來可以降低整體推廣成本。
這部分是由于響應式設計的出現(xiàn)，它允許你根據(jù)打開網(wǎng)站的設備屏幕來調(diào)整網(wǎng)站。至于APP，它們必須為許多移動平臺單獨編寫:Android、IOS、Windows等。
一些設計師認為“前端驅(qū)動的網(wǎng)絡體驗”會是2022年的一個好機會，我非常同意!（彩云注：在國內(nèi)，現(xiàn)在開發(fā)小程序的肯定越來越多了。）
我們一開始并沒有將其放在首位，因為這并不是一個新的趨勢，在很久以前設計師們就已經(jīng)設計了很多3D圖像和動畫了。
Cardi B rhymes with 3D
3D技術已經(jīng)在過去流行了很多年，但它不會很快消失。此外，我們預測3D圖形將變得更加多樣化和包容。
在過去的幾年里，3D藝術和動畫已經(jīng)出現(xiàn)在各種UI設計趨勢評論中。這意味著越來越多的設計師將它們整合到頁面中。
3D當然應該成為2022年最熱門的趨勢和預測之一，因為與經(jīng)典動畫相比，逼真的3D形狀結(jié)合動畫總是引人注目的。
“從技術上講，通過3D更容易傳達更多內(nèi)容，因為它比平面圖片更接近我們的感知。3D插圖更有深度，信息量更大，也更具互動性。"
許多設計師將3D對象無縫地“安置”在2D空間中。它允許創(chuàng)建更有趣的組合，也作為一個優(yōu)秀的工作方法蘊藏著巨大的潛力。
烏克蘭政府網(wǎng)站用3D手模擬了黑客帝國
注意一點：在整合3D圖形等重量級內(nèi)容之前，確保你的應用性能是OK的，能夠快速加載所有元素。
Meta的logo既不是2D也不是3D?；蛘邇烧呒娑兄?這就是即將到來的2022年的莫比烏斯帶和薛定諤的貓。
Meta logo的變化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)
（彩云注：這個概念在去年簡直不要太火，未來幾年肯定還會是一個大的趨勢，設計師也需要保持關注。跟著趨勢走，易于放大自身價值。）
越來越多的公司在網(wǎng)站和移動應用中使用動畫，以提高用戶的沉浸感和體驗，使內(nèi)容更有趣。
動畫是2022年重要的網(wǎng)頁設計趨勢。2022年，如果沒有它，你的產(chǎn)品很可能會看起來就像個半成品。混合風格的動畫越來越受歡迎:定格動畫和3D動畫的結(jié)合，2D動畫和3D動畫的結(jié)合。設計師這樣做是為了獲得不同尋常的風格解決方案，以及提高最終產(chǎn)品的質(zhì)量。
2022年，動畫設計將是品牌市場定位的重要組成部分，想想一個公司新的視覺形象——動畫形象。隨著這個領域的專業(yè)設計師數(shù)量的增長，實現(xiàn)新想法的機會也在增加。
1）講故事動畫。
可以通過在界面和用戶之間建立情感聯(lián)系來傳達信息。
加載動畫Yoichi Kobayashi
2）更有趣的加載。
用戶不愿意等待，除非載入畫面很有趣。帶有百分比的動畫不僅可以分散用戶的注意力，還可以告知他們加載頁面需要多少時間。使用進度條或者任何你能想到的可以顯示時間流逝的東西。
3）光標效果。
用戶可以精確地觀察光標所在的位置。通過添加智能互動動畫，對這個光標作出反應來探索網(wǎng)站。這種效果在21世紀初非常流行。如你所知，流行趨勢往往每20年就會重演一次。
4）動態(tài)排版
你有沒有想過讓字母跳舞?
據(jù)Statista統(tǒng)計，2020年全球動畫市場達到了2700億美元。趨勢是視頻，而不是靜態(tài)信息。全球品牌在社交網(wǎng)絡上使用動畫制作廣告。毫無疑問，動畫插圖的優(yōu)勢是它們非常靈活和多樣化。
寶馬歷史動畫
這樣的作品通常用于兩種情況:
1）用于解釋視頻
2）電商廣告
動畫解說的趨勢出現(xiàn)在幾年前，解說視頻清楚地顯示點擊的位置或公司的項目是關于什么的。
在招聘或商業(yè)視頻中，用戶更喜歡看畫出來的人物，而不是抽象的形狀或物品。畫出來的人物可以喚起情感共鳴，就像活著的人一樣。
微交互是幫助用戶瀏覽網(wǎng)站或應用的小界面變化。通常這些是作為提示用戶的視覺或聲音效果:它們顯示發(fā)生了什么，將導致什么操作，下一步需要做什么。
圖片來源awwards
動畫交互將為你的設計注入活力，并有助于保持用戶粘性。關注每一個細節(jié)是設計師工作的關鍵，因為設計中的所有元素都可以帶來積極的用戶體驗。
重要的是要達到元素的和諧，而不是把注意力分散到界面的各個方面。微交互作用的一個重要部分是顏色，它們?yōu)榻缑嬖卦鰪妰r值。
微交互有助于頁面導航，解釋它們的功能。最重要的方面之一是加快和簡化以前冗長的功能，以實現(xiàn)特定的行為。
2022年，在線品牌面臨著新的挑戰(zhàn)，需尋求新的解決方案，其中之一就是動畫logo設計。
圖片來源Toridori
動畫logo主要有以下幾點營銷優(yōu)勢:
1）吸引注意力。這意味著它們有助于提高品牌知名度。
2）有助于提高SEO。谷歌更傾向于動態(tài)內(nèi)容，帶有動態(tài)圖形的頁面更容易吸引用戶。
3）在移動端看起來更好。絲滑的動畫看起來比靜態(tài)的logo更有趣。
4）最重要的是展示了歷史。靜態(tài)logo背后的想法正在動畫中發(fā)展。由于這一點，在幾秒鐘內(nèi)，你可以展示品牌的使命，甚至它的價值!
一家洗衣機[公司]的標志(https://www.schulthess.ch/)
現(xiàn)在有很多設計模板，可以很容易地用字體制作一個動畫logo:
圖片來源Shabello, Bobby Voeten
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
Logo 勝過千言萬語。一個偉大的 Logo 不用一個字就能講述一個故事。
最近，許多公司的商標都經(jīng)歷了一次轉(zhuǎn)變。從通用汽車（GM）這樣的汽車公司，到漢堡王（Burger King）這樣的餐廳，再到品客（Pringles）這樣的食品公司，很明顯，許多公司都在嘗試重新設計商標。
然而，在重新設計的同時，也有反對聲音。反對改變的聲音是向來常見，然而不喜歡某一個特定的設計語言卻比較鮮見的，那么到底發(fā)生了什么?
通用汽車（General Motors）改變了自 1964 年以來一直使用的標志是廣為周知的，它用以保證電動汽車的發(fā)展。Dezeen /通用汽車
為什么要修復一些沒有損壞的東西，為什么要改變一個已經(jīng)受到喜愛的標志?這是每個人都會問的問題，每當一個新的標志出現(xiàn)，我們就必須考慮到一個標志的重新設計是不便宜的，往往會花費數(shù)百萬美元和多年的研究。乍一看，一家公司這么做毫無意義，然而每隔幾年就會有很多公司這么做。
雖然我不是平面設計師，但我個人認為 Logo 和品牌的重新設計有兩個主要驅(qū)動因素：技術和市場。
技術對設計影響很大，它既支持又限制了它。計算機硬件和軟件的采用和改進等技術進步為設計師們提供了嘗試新事物的機會。技術對設計也會有限制，比如有限的屏幕尺寸或能量消耗，但同時也會驅(qū)使設計師發(fā)揮創(chuàng)造性。雖然技術可以影響設計決策，但市場(在某種程度上可以等同于消費者)才是主要的決策者。
市場，無論是企業(yè)客戶還是目標消費者，在設計決策方面自然是最高的權(quán)威。如果一個公司覺得自己不能從中獲益(畢竟 Logo 的設計并不便宜)，重新設計 Logo 就很少發(fā)生，即使這可能會引起現(xiàn)有消費者的強烈反對和抵制。重新設計 Logo 可以是一個新的開始：向消費者傳達他們對未來的期望。
動物星球的標志變化過程，它隨著每一次迭代變得越來越簡單。
所以讓我們來談談這個非常顯而易見，而又容易被忽略的問題。從 iOS 7 到純果樂——極簡、極簡或扁平化的平面設計風格已經(jīng)興起近十年了。我們已經(jīng)討論了技術和市場是如何決定趨勢的，但是對于我們今天所面臨的當前趨勢：以最小的、扁平的、最簡單的標志重新設計，它又說明了什么呢?
技術的訴求——對在線展示的日益增長的需求是公司簡化其標識的主要原因?？焖僭鲩L的移動設備使用率導致高度詳細、高度程式化的徽標設計的舊設計方案越來越難以實現(xiàn)。在可伸縮性和文件大小等方面，矢量的圖像變得更加流行，與柵格圖像相比，它們更容易創(chuàng)建、操作和編輯。像 Airbnb、Animal Planet 和谷歌就采用無襯線和塊狀字體的商標，之所以這樣做，是因為這樣在手機等設備上更容易閱讀。
市場需求——企業(yè)和消費者似乎都支持（當然并不是沒有阻力），應該走更簡單的道路。更簡單的平面設計意味著它更容易被廣大用戶理解和識別。許多扁平化設計的支持者認為有效、友好、干凈和中性的特征是扁平化風格的優(yōu)點。誰還記得在 2000 年代，Windows Aero 的頂級設計是多么的混亂不堪?時代當然變了。
當平面設計成功時，就可以創(chuàng)造出華麗而有意義的標志，它們經(jīng)得起時間的考驗；IBM 和 Shell 的標志就是我最喜歡的幾個。但是，盡量簡單更容易創(chuàng)造出一些最好的標志一樣，也很容易失去目標。
是不是過于簡單了？
最近十年間，平面和極簡主義設計的標志重新設計正在興起。
在最近的十年里，很多公司一直在用扁平化風格來重新設計 Logo，Logo 隨著時間的推移變得越來越簡單，盡管在線社區(qū)的用戶們的感受各不相同。
任何重新設計都會遇到各種各樣的反對。沃爾什（Walsh）、凱倫?溫特奇（Karen Winterich）和維卡斯?米塔爾（Vikas Mittal）的一項研究顯示，消費者對品牌(品牌態(tài)度)的認知，在消費者對重新設計的看法中扮演著重要角色。
2003年，像蘋果這樣擁有高品牌忠誠度的公司決定更換 Logo，在宣布后數(shù)小時內(nèi)就收到了網(wǎng)上請愿書，這一點就很明顯。沃爾什、溫特奇和米塔爾認為，商標的重新設計擾亂了已經(jīng)形成的相對穩(wěn)定的關系，消費者顯然對此感到不安。
一位推特用戶對 firefox 徽標的改變非常憤怒，盡管它并沒有被實現(xiàn)。——UnfunnyLuigi
有一些被重新設計的 Logo，比如漢堡王卻受到了熱烈歡迎，而其他的，例如火狐和動物星球則受到了嚴厲的批評。漢堡王不僅采用了更簡單的設計，還抓住了人們的懷舊情緒，因此比動物星球（Animal Planet）這樣的 Logo 更容易被接受。
需要指出的是，扁平化的 Logo 設計本身并沒有什么錯，許多 Logo，如可口可樂、IBM 和殼牌，都由于其簡單易記的特性成為永恒的杰作。導致人們強烈反對扁平化 Logo 設計的原因可能是人們對企業(yè)和企業(yè)文化越來越反感和憤世嫉俗。像企業(yè)藝術風格、企業(yè)孟菲斯和全球同質(zhì)化等概念通常會被指責為“過度簡化”標識設計浪潮的罪魁禍首，因為很多設計決策都是冷血的，缺乏人文特征的，讓人感覺不自然或虛假。
不喜歡過于簡化的商標已經(jīng)成為網(wǎng)絡熱點，尤其是在YouTube上?！猂evified
由于許多內(nèi)容創(chuàng)造者和互聯(lián)網(wǎng)熱點已經(jīng)導致了文化抵制現(xiàn)象出現(xiàn)，人們不再只是隨意在社交媒體上發(fā)泄不滿；人們把這些過度簡化的商標描繪成冷酷無情的科學實驗的結(jié)果，有些人甚至證明了如果這種趨勢繼續(xù)下去，過度簡化的商標會導致什么，它們會創(chuàng)造出一個乏味的世界，每個商標都是一樣的，沒有個性。
Youtube 用戶 Solar Sands 在他的視頻文章《為什么企業(yè)的藝術風格讓人覺得非常虛假》( Why do corporate art styles feel fake )中指出，許多公司，尤其是大型科技公司，這些公司曾經(jīng)多次產(chǎn)生消費者的信任問題，而它們恰好使用了許多扁平化設計風格。我們就把負面問題與這種設計風格的聯(lián)系了起來，對這種風格留下了糟糕的印象，因此我們憎恨它；我們覺得這些冷血的公司正在奪走我們所愛的東西。在這波憤世嫉俗的浪潮之后，Solar Sands 以一段出人意料的評論結(jié)束了他的視頻：任何潮流都有保質(zhì)期。
接下來將是什么?
百事可樂不斷演變的標志讓我們很好地洞察了各自時代的設計趨勢?！狶ogaster
設計趨勢總是周期性的，每個趨勢都有保質(zhì)期。百事可樂的商標就是一個很好的例子，它說明了設計世界是多么地充滿活力：從簡單的設計到復雜的設計，再到簡單的設計。沒有一種設計風格是絕對好的，但它必須與時代相適應。
微軟的 Fluent Design 吸收了一個新的風格,強調(diào)光,深度、材料和尺度?！④?
隨著大眾對當前設計趨勢的不滿不斷發(fā)酵，扁平化設計風格可能要終結(jié)，但人們永遠不知道什么時候或者什么會取代這個簡約至上的時代。許多蘋果和微軟等公司都將新擬物風格和玻璃擬態(tài)的元素融入自己的設計語言，試圖為其添加性格和細節(jié)。雖然我們肯定不會在一夜之間回到過去那些充滿華麗而又過分精細的 Logo 的日子，但扁平化設計的流行趨勢可能會開始消退。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
當設計師被迫待在家里時，終于能有時間去反思現(xiàn)有的設計并重新創(chuàng)造。無聊是藝術家最大的敵人，他們會盡可能地打破困局。
對我們來說，2021年相當困難。世界上最長壽的貓慶祝了它的34歲生日，這可能是發(fā)生的唯一一件好事，順便說一下，你會在文末看到這只可愛的小貓照片。
那么，2022年的UI/UX設計趨勢是什么呢？看看現(xiàn)在的情況，我們已經(jīng)可以預測未來的設計趨勢，就像我們對2021年所做的預測一樣（回頭看非常準確）。
在本文中，我們將發(fā)現(xiàn)：
3D視覺設計師的內(nèi)卷將會越來越嚴重
數(shù)據(jù)可視化的工作將變得越來越重要
服務的移動化還需要做出更多努力
scrollytelling 技術會越來越流行
舊的滾動是無聊的。如果你想吸引注意力，你就需要實現(xiàn)滾動敘事（scrollytelling）。（彩云注：這個技術的核心在于邊滾動頁面邊講故事）
《紐約時報》是第一批在他們的文章《雪花飄落》中使用滾動敘事手法的機構(gòu)之一。
它是一種敘事形式，可以在網(wǎng)頁和APP上呈現(xiàn)。想象一下，在一個網(wǎng)站中每個插圖、文本和其他元素都開始變得生動起來。自然地，你會想看到這個故事的結(jié)局。它就像一個游戲，帶你穿越迷宮。雖然你不能影響它的進程，但卻讓你感覺自己能參與其中。
2022年，Scrollytelling將會出現(xiàn)在你看到的每一個流行網(wǎng)站上。
另一方面，scrolllytelling讓用戶真正去閱讀內(nèi)容。你可以用動態(tài)文本讓他們產(chǎn)生興趣，比如谷歌的網(wǎng)站 (https://www.google.com/search/howsearchworks/)。他們的團隊知道如何讓信息看起來更好:
Scrollytelling在用戶向下滾動時被激活，因此得名。沒有點擊，沒有選擇的麻煩，沒有彈出窗口。你似乎停留在一個地方，但通過滾動，把屏幕上的故事慢慢展開。這不僅要求設計師創(chuàng)造出酷炫的視覺效果，還需要認真思考一個你想要講述的故事情節(jié)。
所以，最好的網(wǎng)站不可能在2天內(nèi)建成，需要更多的時間去打磨。
IAmBinadam令人驚艷的敘述設計
滾動敘事的項目通常需要大量的時間和精力。不過，這樣做的結(jié)果是值得的。頁面變成“活的”，每一秒都有新的事情發(fā)生，所以在閱讀時很難感到無聊。
那么移動端APP呢? Pure是一款約會應用（彩云注，這個應用在app store可以搜到，推薦大家安裝一個體驗一下，非廣告），它創(chuàng)造了一種我稱之為“tappytelling”的故事(當你第一次點擊并打開應用時，它就會被激活):
Scrollytelling是為用戶而創(chuàng)建的，用戶很喜歡它，不需要到其他頁面去閱讀整個故事。相反，網(wǎng)頁設計的整個故事都是事先考慮好的，并盡可能以最有趣的方式設計出來。
如何在2022年做出一個還不錯的企業(yè)網(wǎng)站？你不會想告訴用戶你是“XX領域公認的領導者，該領域最好的之一”。這種標準的廣告表達并不傳達任何有價值的信息。
最好不要用形容詞，而是用事實來說明:你有多少分支機構(gòu)，在哪些城市，誰是你的客戶，以及你是如何幫助他們的。抽象信息是不可靠的。但如果你有很多想要分享的數(shù)據(jù)，你需要讓它不僅簡單，而且有趣。
數(shù)據(jù)可視化有助于以一種吸引人的方式傳達正確的信息。它也可以與滾動敘事（Scrollytelling）緊密結(jié)合。以下是IAmBinadam展示數(shù)據(jù)的方式:
通過去除數(shù)據(jù)集的復雜性，使信息更容易讓讀者感知。
不同級別的數(shù)據(jù)具有不同的大小，這樣用戶知道應該先從哪里查看
讀者可以很快注意到作者試圖通過圖片引出的結(jié)論?？紤]到如今人們消費的數(shù)據(jù)量巨大，那些干凈整潔的數(shù)字帶來的正面影響更大。
有些圖表乍一看甚至不像圖表，這使得它們更加能被注意到
還有一種現(xiàn)象叫做“新冠后遺癥”。這是Covid對公司及其員工的長期影響。根據(jù)英國國家統(tǒng)計局的數(shù)據(jù)，2018年，壓力和焦慮的平均得分約為2.7/10。自新冠疫情發(fā)生以來，得分已升至4.0/10，很少低于這一水平。同樣因為大流行，在過去兩年里工作量增加了4個小時。
人們壓力太大，卷的太辛苦，以至于不愿去看復雜的數(shù)據(jù)。
設計師做好數(shù)據(jù)可視化，以保持人們的注意力。記住，復雜的信息通常被忽略，因為讀者試圖節(jié)省他們的時間，更有可能使用滾動按鈕。
Illustration by Mona Chalabi
以下是我們推薦的一些表示數(shù)據(jù)的方式
1）圖表和曲線圖
2）插圖
3）靜態(tài)信息圖
4）互動信息圖
Illustration by Ink Factory
一個好的圖表，或者任何其他形式的數(shù)據(jù)可視化，都應該具有在Edward Tufte的“定量信息的可視化顯示”中描述的特征。在他的書中，Tufte通過圖表解釋了好圖表的3個原則：
1）展示數(shù)據(jù)的圖形元素與數(shù)值總數(shù)的比值應趨向于1。簡單地說，應該刪除一切不必要的元素，保持整潔。
2）充分利用好畫面空間。也就是說，需要將數(shù)據(jù)編排的更緊密
Graph by Hootsuite
3）客觀地描述數(shù)據(jù)。不要使用夸張的圖表，可視化數(shù)據(jù)可以看起來很酷，但真實永遠是更重要的。
根據(jù)We Are Social的數(shù)據(jù)，2021年有52.2億人使用手機，約占世界人口的66%。自2020年1月以來，手機用戶數(shù)量增長了1.8%(9300萬)，而手機聯(lián)網(wǎng)總數(shù)量增長了7200萬(0.9%)，到2021年初達到80.2億。
過去一年，社交媒體用戶的數(shù)量增長了13%以上。到2021年初，社交網(wǎng)絡上已有近5億新用戶注冊。根據(jù)App Annie的數(shù)據(jù)，Android用戶每天花在手機上的時間超過4小時。2020年，安卓用戶上網(wǎng)時長超過3.5萬億小時。
令人印象深刻的數(shù)字，是嗎？似乎到2022年，為產(chǎn)品做一個APP將成為必須擁有的東西。如何知道你的公司是否真的需要一款應用？有以下幾點可供評估：
1）用戶主要通過移動設備訪問你的網(wǎng)站這是你應該了解的重要數(shù)據(jù)。
客戶和你在一起的時間越長，你就有越多的機會去吸引他們，了解他們的習慣，并給他們想要的東西。（彩云注：這就是為什么各大廠之間都在拼命搶占用戶的在線時長。）
2）幫助內(nèi)部業(yè)務流程更加有效。
如果你想要提高員工的工作效率、改進工作流程或增加利潤，那么就制作一個可以幫助管理業(yè)務流程的移動應用。
如今，像這樣的手機應用使企業(yè)能夠執(zhí)行越來越復雜和多樣化的任務，加快日常重復操作和文檔管理。
3）實現(xiàn)一些網(wǎng)站上沒有的新功能。
如果你認為APP能為用戶打開新的觸點，并讓用戶體驗更加友好，那么它就值得考慮開發(fā)。問問自己的APP能提供什么新的商業(yè)機會？例如，隨著疫情的蔓延，許多人開始用上健身APP在家里鍛煉。
4）競爭對手做的情況。
要了解競爭對手在做什么，他們是否有APP，能做什么，以及他們是否真的對用戶有用。
查看App Store和谷歌Play的統(tǒng)計數(shù)據(jù)。下載和評論的數(shù)量可以告訴你用戶是如何使用競爭對手的應用的。如果他們的服務真的很方便而且很有必要，那么你就容易被甩在后面。
5）復購率。
一個應用可以幫助你留住那些習慣從你那里購買的人。如果想為老客戶開展促銷活動了，給他們發(fā)送一個通知就能完成，成本更低。
在正確的時間提供的報價越有吸引力，人們購買的可能性就越大。
6）促銷工具。
有了應用，你就不需要花錢設計和制作實體卡，客戶也不需要隨身帶卡。將促銷計劃整合到APP，并分享有用的促銷信息。
開發(fā)手機網(wǎng)站比開發(fā)手機應用需要更少的工作量，這反過來可以降低整體推廣成本。
這部分是由于響應式設計的出現(xiàn)，它允許你根據(jù)打開網(wǎng)站的設備屏幕來調(diào)整網(wǎng)站。至于APP，它們必須為許多移動平臺單獨編寫:Android、IOS、Windows等。
一些設計師認為“前端驅(qū)動的網(wǎng)絡體驗”會是2022年的一個好機會，我非常同意!（彩云注：在國內(nèi)，現(xiàn)在開發(fā)小程序的肯定越來越多了。）
我們一開始并沒有將其放在首位，因為這并不是一個新的趨勢，在很久以前設計師們就已經(jīng)設計了很多3D圖像和動畫了。
Cardi B rhymes with 3D
3D技術已經(jīng)在過去流行了很多年，但它不會很快消失。此外，我們預測3D圖形將變得更加多樣化和包容。
在過去的幾年里，3D藝術和動畫已經(jīng)出現(xiàn)在各種UI設計趨勢評論中。這意味著越來越多的設計師將它們整合到頁面中。
3D當然應該成為2022年最熱門的趨勢和預測之一，因為與經(jīng)典動畫相比，逼真的3D形狀結(jié)合動畫總是引人注目的。
“從技術上講，通過3D更容易傳達更多內(nèi)容，因為它比平面圖片更接近我們的感知。3D插圖更有深度，信息量更大，也更具互動性。"
許多設計師將3D對象無縫地“安置”在2D空間中。它允許創(chuàng)建更有趣的組合，也作為一個優(yōu)秀的工作方法蘊藏著巨大的潛力。
烏克蘭政府網(wǎng)站用3D手模擬了黑客帝國
注意一點：在整合3D圖形等重量級內(nèi)容之前，確保你的應用性能是OK的，能夠快速加載所有元素。
Meta的logo既不是2D也不是3D?；蛘邇烧呒娑兄?這就是即將到來的2022年的莫比烏斯帶和薛定諤的貓。
Meta logo的變化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)
（彩云注：這個概念在去年簡直不要太火，未來幾年肯定還會是一個大的趨勢，設計師也需要保持關注。跟著趨勢走，易于放大自身價值。）
越來越多的公司在網(wǎng)站和移動應用中使用動畫，以提高用戶的沉浸感和體驗，使內(nèi)容更有趣。
動畫是2022年重要的網(wǎng)頁設計趨勢。2022年，如果沒有它，你的產(chǎn)品很可能會看起來就像個半成品。混合風格的動畫越來越受歡迎:定格動畫和3D動畫的結(jié)合，2D動畫和3D動畫的結(jié)合。設計師這樣做是為了獲得不同尋常的風格解決方案，以及提高最終產(chǎn)品的質(zhì)量。
2022年，動畫設計將是品牌市場定位的重要組成部分，想想一個公司新的視覺形象——動畫形象。隨著這個領域的專業(yè)設計師數(shù)量的增長，實現(xiàn)新想法的機會也在增加。
1）講故事動畫。
可以通過在界面和用戶之間建立情感聯(lián)系來傳達信息。
加載動畫Yoichi Kobayashi
2）更有趣的加載。
用戶不愿意等待，除非載入畫面很有趣。帶有百分比的動畫不僅可以分散用戶的注意力，還可以告知他們加載頁面需要多少時間。使用進度條或者任何你能想到的可以顯示時間流逝的東西。
3）光標效果。
用戶可以精確地觀察光標所在的位置。通過添加智能互動動畫，對這個光標作出反應來探索網(wǎng)站。這種效果在21世紀初非常流行。如你所知，流行趨勢往往每20年就會重演一次。
4）動態(tài)排版
你有沒有想過讓字母跳舞?
據(jù)Statista統(tǒng)計，2020年全球動畫市場達到了2700億美元。趨勢是視頻，而不是靜態(tài)信息。全球品牌在社交網(wǎng)絡上使用動畫制作廣告。毫無疑問，動畫插圖的優(yōu)勢是它們非常靈活和多樣化。
寶馬歷史動畫
這樣的作品通常用于兩種情況:
1）用于解釋視頻
2）電商廣告
動畫解說的趨勢出現(xiàn)在幾年前，解說視頻清楚地顯示點擊的位置或公司的項目是關于什么的。
在招聘或商業(yè)視頻中，用戶更喜歡看畫出來的人物，而不是抽象的形狀或物品。畫出來的人物可以喚起情感共鳴，就像活著的人一樣。
微交互是幫助用戶瀏覽網(wǎng)站或應用的小界面變化。通常這些是作為提示用戶的視覺或聲音效果:它們顯示發(fā)生了什么，將導致什么操作，下一步需要做什么。
圖片來源awwards
動畫交互將為你的設計注入活力，并有助于保持用戶粘性。關注每一個細節(jié)是設計師工作的關鍵，因為設計中的所有元素都可以帶來積極的用戶體驗。
重要的是要達到元素的和諧，而不是把注意力分散到界面的各個方面。微交互作用的一個重要部分是顏色，它們?yōu)榻缑嬖卦鰪妰r值。
微交互有助于頁面導航，解釋它們的功能。最重要的方面之一是加快和簡化以前冗長的功能，以實現(xiàn)特定的行為。
2022年，在線品牌面臨著新的挑戰(zhàn)，需尋求新的解決方案，其中之一就是動畫logo設計。
圖片來源Toridori
動畫logo主要有以下幾點營銷優(yōu)勢:
1）吸引注意力。這意味著它們有助于提高品牌知名度。
2）有助于提高SEO。谷歌更傾向于動態(tài)內(nèi)容，帶有動態(tài)圖形的頁面更容易吸引用戶。
3）在移動端看起來更好。絲滑的動畫看起來比靜態(tài)的logo更有趣。
4）最重要的是展示了歷史。靜態(tài)logo背后的想法正在動畫中發(fā)展。由于這一點，在幾秒鐘內(nèi)，你可以展示品牌的使命，甚至它的價值!
一家洗衣機[公司]的標志(https://www.schulthess.ch/)
現(xiàn)在有很多設計模板，可以很容易地用字體制作一個動畫logo:
圖片來源Shabello, Bobby Voeten
記住，設計趨勢總是在變化的，但是設計的意義不會變。如果你不能深刻理解這一點，那么任何設計趨勢的文章不能幫你做好設計。
這是前面提到過的世界上最老的貓。她今年34歲(相當于人的160歲)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
簡單講，新擬態(tài)是一種圖形樣式，其原理是為界面的UI元素賦予真實感。
其實他也是算擬物風格的一種，只不過表現(xiàn)形式不一樣，最早出現(xiàn)在追波上，從2020年慢慢被大家熟知，討論，重視起來。暫且不論是不是未來的必然趨勢之一，一個事物的興起多少是有些道理，我們持辯證的眼光去看到，去學習、去了解便好。
原生名詞有幾個叫法，Neumorphism / soft ui，翻譯過來叫新擬態(tài)或者是軟ui。其實按照我們國內(nèi)的翻譯應該叫，新擬物風格。Neumorphism，是New +Skeuomorphism的組合詞。
地球是圓的，很多事情總是輪回的，原理是不變的，只不過是換了一種表達方式出現(xiàn)在我們的面前，在了解新擬物之前，先簡單說下UI整個風格的發(fā)展歷史，
說起ui設計風格不得不說起我們喬老爺子了，在2007時候年最早的iphone手機的手機界面就是擬物風格的，那時候覺得怎么會有那么好看的界面，設置圖標的齒輪，閱讀器的書架，以前的youtube圖標還是一個小小的電視，從而掀起一波擬物圖標風格流行趨勢。
說起擬物風格，不得不提一下當年的擬物大神——MIke，當時在追波掀起一波轟動，在國內(nèi)也迎來一陣臨摹潮，我還記得那時候我還臨摹過下面那只鋼筆，還有那個馬卡龍蛋糕，都是滿滿的回憶。對于當時MIke大神作品，用現(xiàn)在話說，奈何沒文化，一句臥槽走天下... ...
到了2014年，蘋果對界面進行了“扁平化”處理，以使外觀更簡單，同時又使其用戶易于理解。一直到今天扁平化設計風格仍然是UI設計的標準。
其實最早最早將扁平化風格設計運用在產(chǎn)品中的公司是微軟。他在Windows 8系統(tǒng)使用扁平化設計語言，但是Windows 8一直飽受爭議，但是反響并沒有很好。
Window 8平面設計示例
還是從追波說起，這一切的開始是源于在2019年11月05日的在Dribbble-Alexander Plyuto發(fā)布的作品，獲得了26W+的瀏覽，4400個贊，以及1800個收藏。以后在Dribbble上便成為流行，在探索更多的可能性。
再說新擬態(tài)有什么特點之前，我們先看幾個比較典型代表的視覺作品，以便于更好的了解這一風格
我們看下上面的一些視覺作品，第一眼看到比較明顯的是，在一些可點擊區(qū)域做了一些“浮雕”效果，點擊狀態(tài)和非點擊狀態(tài)，在視覺處理上是未選中狀態(tài)是凸出來的，已經(jīng)選中狀態(tài)是凹進去的，但顯然凹凸之間是有很多質(zhì)感細節(jié)處理的，等下再實操組件部分會講解到。
左上角亮色投影，右下角深色投影（有且只有一個光源照射）
元素與背景對比度比較弱
常常用于按鈕組件和卡片
按鈕狀態(tài)，視覺上凸出代表未選中，凹進去表示已選中狀態(tài)
1.有且只有一個光源照射
那作者在追波上按鈕也好還是卡片處理也好，仔細觀察不難發(fā)現(xiàn)，它定了一個光源，是從左上向右下照射的，所以，越靠近光源的部分，越亮，遠離光源的越暗（素描的繪畫時常常用到）。因為新擬態(tài)的光源是唯一的，是從左上角照射的，所以就不難解釋，或者分析得到，左上角亮色投影，右下角深色投影。這一基礎規(guī)律，不單單適用于新擬態(tài)風格的按鈕，它還適用于所有新擬態(tài)風格表現(xiàn)手法的視覺組件。
可以看到下圖，卡片、轉(zhuǎn)盤、按鈕，他們的受光面都是在左上角。
這里就要講一下，另一個叫法了soft ui，即軟ui。軟，有柔和的意思。為什么這么命名呢？其實就是由于新擬態(tài)的組件與背景的對比度很弱，我把收集到的幾千張素材中，挑選一部分進行進行色值對比，可以發(fā)現(xiàn)無論是亮色模式下和暗色模式下對比度都是很低的。
按鈕、投影、背景之間的關系都處理的非常柔和，這是新擬態(tài)的特征之一
素材庫
基于這一點，其實我們只要建立好卡片的和按鈕的樣式組件，新擬態(tài)在設計層的表現(xiàn)就可以高效率的實現(xiàn)，可能稍微麻煩的就是，在一些質(zhì)感細節(jié)上做一些優(yōu)化，前面也說到，新擬態(tài)是一種無紋理的擬物風。所以想要表現(xiàn)卡片/按鈕的質(zhì)感，在光影、厚度細節(jié)上，需要做更多的細節(jié)處理。
比如卡片的厚度感細節(jié)的處理，為了體現(xiàn)銀行卡的厚度感，在卡片增加了一個對角漸變描邊，從漸變色塊可以看到，漸變的規(guī)律，也是遵循“有且有個光源”定義的，靠近光源的是純白，近暗色投影端是比投影更重的一點的描邊色。
這樣做的好處不單單是為了體現(xiàn)卡片的厚度，因為我們前面講到，新擬態(tài)是軟ui，是對比很弱的。風格柔和帶來的另個一個不太好的就是，界面清晰度不夠，很容易把視覺處理“糊掉”。所以，增加對角漸變描邊在一定程度上也起到了，讓界面的視覺層級更加清新的作用。在實操部分，將會一一拆解各種情況的一些處理方式。
在新擬態(tài)中，視覺上凸出代表未選中，凹進去表示已選中狀態(tài)。是大部分人的處理方式，在這一小節(jié)里，先討論大部分的，在實操部分在列舉其他的處理手法。
這里可以明顯感受到，按鈕狀態(tài)的區(qū)別，凸出/懸浮的是沒有選中狀態(tài)，凹陷下去的是選中狀態(tài)。
細節(jié)觀察，新擬態(tài)風格，在按鈕上面的元素是做了內(nèi)陰影處理的，看起來有一點點雕刻的感覺，
在選中狀態(tài)按鈕的處理，首先是在光源的處理上是統(tǒng)一的，加上光影的處理，就很容易做出來凹進去的感覺，想要是凹槽的厚度感、質(zhì)感看起來更加舒服，這里的處理方式和卡片的處理方式原理一樣，添加漸變描邊就可以解決。
這里影響新擬態(tài)界面的可見性，主要有兩個因素，一個是可見性，另一個就是視覺層級關系。
識別度
前面我們說到，新擬態(tài)的的一個設計風格特點，就是低對比，弱對比。帶來界面柔和一面的同時，在視覺層上，也會很容易出現(xiàn)界面”糊掉“的一些情況，這樣就非常不利于信息的傳遞。試想，一個頁面從色調(diào)、按鈕、布局、交互上都很好，但是，就是看不清哪跟哪兒（識別度），那設計出來的東西是沒辦法落地的，頂多是個好看的花瓶。
所以，在設計新擬態(tài)風格的時候，需要格外的注意界面的識別度。但同時也要注意，界面的投影不能太重，如果太重，界面就很容易顯得“臟”。
那么，前面講到的，卡片厚度的塑造方法（增加漸變外描邊）可以在一定程度上提高界面的識別度，提高信息的傳遞。
因為新擬態(tài)風格的基礎原理是依托光影關系來塑造的，那在很多樣式組件界面中，就會產(chǎn)生很多懸浮或者下凹的投影，那么在很多時候是很難區(qū)分視覺層級關系的，用戶在看到這樣的界面的時候，第一時間會覺得頁面很“滿”，用戶就無從下手。
所以在做新擬態(tài)設計風格時候，一定要學會“視覺降噪”，需要避免整個頁面都很滿，最重要的是克制。
那前面說到可見性和視覺層級，這兩點是易用性原則里面的基礎組成部分，如果基礎組成部分都沒有得到很好的解決的話，那產(chǎn)品的易用性就無從談起。能用、好用的產(chǎn)品是前提，美感是對產(chǎn)品易用性的補充，能用、好用才是核心。
所以在設計新擬態(tài)風格的時候，對頁面的信息層級細分要求更高，對這個頁面的節(jié)奏處理需要更細膩，對用戶體驗的理解需要更加徹底，在商業(yè)與交互層面的持衡中，需要考慮的層面有多一個比較關鍵維度的考量——可見性
那么當我們可以處理好頁面元素之間的關系，也滿足易用性基本原則的時候，新擬態(tài)帶來的局限性將會變得不那么重要。
針對前面我們說到新擬態(tài)的一些特點，一些局限，目前比較適合以下兩個大類產(chǎn)品。
工具類的APP內(nèi)容相對固定，不需要時時更新，這樣設計師在視覺風格方面的表達空間更大一些。在追波上，發(fā)現(xiàn)大部分的作品都是偏工具類的
和工具類APP一樣，這些類頁面上運營性質(zhì)的東西相對較少，內(nèi)容的形式相對可控。
那么，大家最關心的問題來了，新擬態(tài)到底是不是2020年即將要流行的設計風格？相信 大家最近這段時間多多少少也看過很多關于新擬態(tài)一些介紹，在趨勢文章里面或者在其他文章里面看到。
首先必須得中肯的說，像大多數(shù)設計趨勢一樣，新擬態(tài)是設計用戶界面的一種看起來視覺比較新穎的表現(xiàn)手法，讓產(chǎn)品界面看起來既柔軟又方便，但是它也存在一些局限，前面我們也提到一些，比如它實現(xiàn)起來還是有一點難度，也不夠靈活等等
但是我說一點不同的是，這也是我一直認為的一點，就是UI設計運營化，運營設計游戲化，這是未來的趨勢。
反觀我們APP的主要生力軍，90、00這一批人，其實他們就是互聯(lián)網(wǎng)的原住民，他們就是在這注重交互，注重游戲化體驗的大環(huán)境出生的，成長起來的，所以他們對這些東西是非常了解的，他們也能接受這種游戲ui，這種寫實的東西，包括現(xiàn)在的這種體驗。
當然，趨勢不是我們預測的，因為只要蘋果出一個新的設計風格，那個風格就會是成為新的設計趨勢，目前來看，這是必然的。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 原創(chuàng)：木七設設計坊
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
團隊按領域分組收集素材
我們認為影響設計趨勢的因素主要有以下三個：
新冠疫情的持續(xù)除了改變了大眾的生活習慣外，也意外地推動了各行業(yè)加速線上化轉(zhuǎn)型、提供「無接觸」服務，出行上的限制催生了游戲等線上娛樂市場的蓬勃勢態(tài)，甚至一定程度上疫情也影響了社會和經(jīng)濟格局，導致了一些新政策的出臺。
新生代的崛起導致了流行風格的一系列變化：二次元等亞文化成功破圈進入主流消費市場、復古設計的重心從 90 年代向千禧年偏移。他們以更開放多元的思維方式和新視角，影響著下一個 10 年設計題材的選擇。
近年來智能設備的性能上限不斷被刷新，誕生了許多創(chuàng)新的設備形態(tài)，使更生動的交互體驗成為可能，另一方面，AR/VR 技術經(jīng)過上一個十年的雕琢，性能和效果逐步得到驗證，具備了量產(chǎn)的技術沉淀，將迎來一波商用普及的浪潮。
「 酸性平面」風格融合「Y2K」美學的未來感，形成了獨特的「未來酸性金屬風」，典型特征有：
酸性漸變：一種會引起不適但足夠刺激的迷幻漸變色。這類配色打破了傳統(tǒng)美感的標準，追求感官刺激，給人異次元下致幻而不安的感受。
金屬感：以熔融形態(tài)在環(huán)境光下呈現(xiàn)出詭秘的反射，這種反常規(guī)的液態(tài)質(zhì)感所帶來的違和，在傳統(tǒng)科技感上增添了幾分神秘。
未來酸性金屬風反差感兼具未來感的特征，決定了它在時尚、音樂、潮流以及藝術圈有很好的延展性。服裝鞋包、藝術家創(chuàng)作，以及傳達個性自我的品牌平面廣告，都可以看到其身影。
The Future Vision of Microsoft 365 宣傳視頻
隨著產(chǎn)品硬件性能的不斷升級，設計語言也開始追求真實感。相比過去，「類玻璃柔光材質(zhì)」除了更注重「輕」的概念，在質(zhì)感上也呈現(xiàn)出更加輕盈、細膩以及自然的趨勢。
類玻璃材質(zhì)的表面呈現(xiàn)微磨砂感的半透明質(zhì)感，透光而不透視，通過清晰的邊緣來強化物理質(zhì)感，兩者對比呈現(xiàn)出一種「虛實結(jié)合」的美感。該材質(zhì)多以輕薄的片狀形態(tài)懸浮于場景中，減輕重量感以帶來輕盈的視覺感受。
「類玻璃柔光材質(zhì)」輕盈與通透的視覺感受，能營造出未來感十足的場景，很適合闡述科技智能的概念。因此該風格成為了一大波科技背景公司的設計首選，其中主要以硬件系統(tǒng)以及B端、工具類的產(chǎn)品為主，應用場景包括界面設計、推廣視頻等。
Louis Vuitton × League of Legends Collection
近年來，品牌跨界合作的對象不再局限于品牌之間或明星名流，眾多服裝、奢侈品、數(shù)碼產(chǎn)品等消費市場的強勢品牌紛紛向游戲和二次元等虛擬 IP 拋出跨次元合作的橄欖枝。這種合作方式成就了「三次元」品牌與「二次元」IP 的雙贏局勢，將在 2021 年繼續(xù)發(fā)展并造成更廣泛的影響。
游戲和二次元元素大熱，手機、化妝品、服裝等產(chǎn)品通過結(jié)合該類元素，以新的形式吸引年輕用戶：為像素風格的游戲設計服裝、為全息的虛擬偶像捏臉塑形、為動漫人物拍攝雜志封面、在一款電子游戲里搭建新品發(fā)布會等，相應地，跨界應用對設計師的涉獵領域和技術跨度也有了更高的要求。
一線頂尖奢侈品品牌相比以往與動漫游戲類二次元 IP 合作更頻繁，除了經(jīng)典動漫，也不乏新鮮的熱度 IP。
在《Evangelion 新世紀福音戰(zhàn)士》25 周年，OPPO聯(lián)名這部影響一代人的動畫神作，推出了一款從快遞包裝、外盒甚至是卡針，里里外外都深度融合 EVA 元素的聯(lián)名機型。
OPPO × EVA 定制版手機 OPPO Ace2
美國說唱歌手 Travis Scott 2020 年在《堡壘之夜》（一款線上競技游戲）中辦了一場虛擬演唱會。這場演唱會共吸引了 1230 萬玩家同時在線觀看。
Travis Scott 在網(wǎng)絡游戲《堡壘之夜》內(nèi)舉辦虛擬演唱會
Photographed by Sean Thomas, Vogue, January 2020
「親生命性設計」原為建筑和空間設計中的概念，意為「運用天然材料、自然光和植物創(chuàng)造令人愉悅舒適的建筑環(huán)境」。受城市化進程加劇及全球疫情的影響，人們渴望親近自然的欲望和需求變得越來越強。產(chǎn)品和自然元素彼此交融，從主客體關系轉(zhuǎn)為互相依賴的存在，以更為和諧與自然的交互方式與用戶進行溝通與連接。
自然元素將在不同感知維度以更貼近真實自然的方式融入各個領域的設計，比如在工業(yè)產(chǎn)品設計中使用更加貼近自然物體的表面肌理，在建筑設計中將人造空間作為自然空間的延伸，在數(shù)字產(chǎn)品設計中使用更擬真的自然音效和光照等等。
2021 時尚界不約而同地強調(diào)了自然元素的使用和對環(huán)境保護的呼吁，各大品牌都用自己的方式演繹了「自然共生」的服裝設計系列。
還原自然界中的真實材質(zhì)成為了新的設計靈感，被應用到各種設計中。
Vivo OriginOs
山水 Mountains & Rivers by Particle (Gao Yang)
近年，國人的文化自信逐漸增強，國家擴大內(nèi)需、擴大消費的政策導向為國內(nèi)消費品品牌帶來了巨大的機會?！钢袊O計」的標簽已經(jīng)成為新一代的時尚潮流，帶有中國本土個性、體現(xiàn)中式美學的設計受到更多品牌的青睞。
越來越多中國品牌開始注重漢字 Logo 的使用和設計，更多現(xiàn)代設計力求為中式美學擺脫民俗、皇家的刻板印象，木、石、竹這些蘊含中式精神內(nèi)核的元素成為了工業(yè)設計、建筑設計中新的繆斯。
隨著中國的國際影響力進一步擴大，國際品牌也會提高對中國市場與文化的關注，在設計上融入更多本土元素。
各品類的國產(chǎn)品牌在包裝或產(chǎn)品設計上通過對中國元素的運用來塑造具有特色的國風產(chǎn)品。
可口可樂中國與漢字文化推廣機構(gòu)「好字在」和方正字庫聯(lián)合推出的這款字體，反映了可口可樂對中國文化的深入理解和對本地化運營的關注度。
可口可樂聯(lián)合推出的中文字體「在乎體」
同仁堂旗下「知嘛健康」在北京開設線下體驗店，店鋪設計提煉漢字、中藥、藥房等中式元素作為靈感，用現(xiàn)代化的方式呈現(xiàn)，是極具現(xiàn)代感的「中式」空間設計。
同仁堂旗下「知嘛健康」線下體驗店 by 無象空間建筑
Microsoft Haptic PIVOT 微軟腕帶觸覺設備
在增強現(xiàn)實中，人機交互將更多發(fā)生在物理空間里，虛擬的數(shù)字信息將借助形變和震動被模擬為觸感。得益于新型傳感器的拓展應用，硬件設備實現(xiàn)了對溫度、形態(tài)、力量的數(shù)據(jù)監(jiān)測，同時各大硬件廠商也逐步對震動馬達等硬件進行了完善升級，從而為進一步的觸覺模態(tài)設計提供了支持。
涉及領域除了現(xiàn)有的游戲、駕駛、健身等場景外，更有趨勢被應用于創(chuàng)新教育、操作培訓及有風險的試驗演練中。
任天堂在健身環(huán) Ring-Con 內(nèi)加入的力學傳感器實現(xiàn)了對力量（張力、拉力、壓力等）的監(jiān)測，并利用 Joy-con 震動來對用戶動作的標準性進行反饋提示。
《健身環(huán)大冒險》on Switch
微軟研發(fā)部開發(fā)出了一套 Haptic PIVOT 腕戴觸感反饋方案，通過活動的機械結(jié)構(gòu)，更逼真地模擬出物體的握持感。
Haptic PIVOT 使用演示
索尼推出配備了音圈馬達的 PS5 DualSense 無線手柄，扳機鍵內(nèi)增加了一個由電機驅(qū)動的齒輪，通過震動模擬出槍支的后坐力、彈簧的彈力、繩索的拉力等物理效果。
PS5 DualSense 無線手柄使用演示
Flight Booking AR application by Bala GN
現(xiàn)實生活中，人與人、人與物接觸產(chǎn)生的實體服務稱為線下服務，由網(wǎng)絡等技術支撐的人與硬件設備交互的服務稱為線上服務。在硬件設備、網(wǎng)絡技術成熟的當今社會，線下服務向線上服務遷移的過程中融入了更多 AR/VR 等虛擬服務，也帶來更多新的設計行為和交互方式。
原本需要親臨現(xiàn)場才能完成的體驗，現(xiàn)在可以通過線上的方式實現(xiàn)，這不僅體現(xiàn)在因疫情催化產(chǎn)生的線上辦公、線上畢業(yè)展等強需求場景，也在購物、試衣、健身等更貼近生活的領域應用。
用戶在 Gucci APP 上挑選自己喜歡的手表后，將手機攝像頭對準手腕，就會顯示「試戴」效果。
Gucci APP 虛擬試表
各大院校畢業(yè)展因疫情無法在線下舉行，一些學校通過線上展廳的方式，讓學生的畢業(yè)作品可以通過網(wǎng)絡瀏覽。
中央美術學院 云端美院
香港理工大學 polyudesignshow
Balenciaga 2020 年用一款電子游戲代替了線下時裝發(fā)布會。在視頻游戲中，玩家能夠在五個主題場景中欣賞到 2021 秋季系列的新款服飾。
Balenciaga：《后世：明日世界》
硬件設備的創(chuàng)新使線上健身指導有了更合理的使用場景和更人性化的體驗，用戶通過線上內(nèi)容和服務在家也可以獲得接近健身房的體驗。
Tempo Studio：家庭智能健身設備
POPMART 泡泡瑪特
「情感療愈」是一種有溫度，無攻擊性，注重細節(jié)的設計方向。這類設計旨在治愈修補心靈中的創(chuàng)傷，不只注重功能的完善，也更在意情感內(nèi)涵的打磨。它也可以幫助人們敞開心胸，接納自己內(nèi)在的所有面。
在產(chǎn)品設計中，一些撫慰人心的小功能、小彩蛋往往帶有著治愈人心的力量。在角色形象上，柔軟、可愛的造型在帶給人無攻擊感的同時強調(diào)著陪伴的意義。在娛樂領域，也出現(xiàn)不一味強迫用戶達成某個目的慢節(jié)奏「佛系」游戲。
網(wǎng)易云音樂來自「張開雙臂擁抱別人」動作靈感的抱一抱彩蛋，讓原本只有文字點贊的評論區(qū)更有溫度。
網(wǎng)易云音樂的「抱一抱」動效
Switch 游戲《動物森友會》在 2020 年異?；鸨瑲w功于其萌系治愈的風格和追求自然隨性的生活方式，也讓疫情期間的玩家們暫時逃離嚴峻緊張的現(xiàn)實生活。
Switch：《集合啦！動物森友會》
盲盒的精神內(nèi)核是「收集、陪伴、治愈」，泡泡瑪特簽約的 IP 形象，大多以可愛、萌系為主。
泡泡瑪特的盲盒萌系 IP 形象
Disney 與 Pixar 出品的動畫電影《心靈奇旅》用輕松的方式探討生活的意義和人生的價值，電影用它獨特的美術風格和感人的故事斬獲超高的口碑和評分。
Disney · Pixar《心靈奇旅》
OceanPlastic 廢棄塑料重造
2020 年世界各地重大自然災害頻發(fā)，環(huán)境污染嚴重，刺激著人類對生活環(huán)境的審視。更多品牌開始探索材料再利用的可能性，從自然衍生產(chǎn)物出發(fā)，從而降低對大自然的破壞。年輕一代對于再創(chuàng)造產(chǎn)品有更高的接受度，循環(huán)材料轉(zhuǎn)化為塑料顆粒，組合成獨一無二的花紋和肌理，給人專屬限量感，再生材料成為新的流行元素。
消費者將繼續(xù)青睞和衛(wèi)生健康、環(huán)境保護相關的價值品牌，越來越多的快消、包裝廠商開始研究材料回溯，組建相關部門，加入循環(huán)經(jīng)濟浪潮中。
運動品牌 Adidas 與 Nike 都推出了由回收廢料制作的充滿設計感的產(chǎn)品，在宣傳品牌環(huán)保意識的同時也引領了再生產(chǎn)品的潮流。
adidas 與 Parley Ocean 合作推出由海洋回收廢料制作的聯(lián)名產(chǎn)品
同樣使用了廢棄材料的 adidas 球衣
Nike 將生產(chǎn)車間加工過程中產(chǎn)生的邊角料轉(zhuǎn)化為產(chǎn)品設計的主要材料
由 99% 廢棄奶茶杯+ 1% 廢棄原茶渣再生而成的「真垃圾·手機殼」
TRASHAUS 真垃圾再生手機殼
Freitag 的 2020 新款 F601 MALCOLM 是一款個性化背包，用一塊再生的防水油布保護，并由用空PET瓶制成的防水織物制成。
F601 MALCOLM
除消費產(chǎn)品外，肯德基的可回重復利用餐盤、星巴克倡導的紙質(zhì)吸管、外賣行業(yè)各公司的環(huán)保舉措等也體現(xiàn)了餐飲外賣行業(yè)對循環(huán)經(jīng)濟的重視。
結(jié)語
無論是后疫情時代世界的變化、新技術的發(fā)明應用或是國際社會環(huán)境的走向，都會影響大眾的生活習慣、行為方式和審美取向，同時也決定了未來設計的發(fā)展方向。但這其中不變的，是軟硬件發(fā)展不斷突破視覺表現(xiàn)的上限、設計師追求「以人為本」的核心理念以及通過設計去提出和解決問題的目標。
我們期待著上述預測性的分析能在今年的設計中被驗證。但設計本身是一個迸發(fā)新奇創(chuàng)意的過程，也希望上述的設計趨勢能激發(fā)設計師們更豐富的靈感、為設計領域提供更多的可能性。
新的一年，在「變化」與「希望」的新主題下，我們一同加油！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在色彩方面，雖然UI是一個相對獨立的設計環(huán)境，但其實一直是在跟隨平面的趨勢。
年初潘通發(fā)布了2021年的色彩流行趨勢，灰黃色一時間成為了我們追逐的目標。
但是潘通流行色更多是表現(xiàn)了一種當下的社會情緒與遠景追求，并不是用來指導設計的。
(圖片來源：Dribbble)
在UI的色彩方面，我們都記得2020年還是流行的是高飽和色彩路線，而2021年UI色彩一下子就被沖淡了，各種低飽和度色彩的作品更加得到設計師的青睞，似乎也昭示著大家的情緒也從疫情中慢慢穩(wěn)定了下來，這個世界的確需要設計來對情緒進行即時表達，在5月份Google的全新Material You設計語言中，這種低飽和色彩也被發(fā)揮的淋漓盡致。相信低飽和度色彩將在2021下半年會延續(xù)發(fā)展！
有關Material You信息可以看一下我的另一篇文章《Material You 為你而來！》
(圖片來源：Google Material You)
(圖片來源：Dribbble)
圖形方面，亮點在3D！毫無疑問3D插畫在2021上半年繼續(xù)著他的強勁勢頭，2021上半年涌現(xiàn)出了大量優(yōu)秀的3D風格插畫，并且不止是3D卡通人物，在產(chǎn)品渲染和背景展現(xiàn)上也在醞釀新的力量。特別說明的是，設計工具的高速發(fā)展也讓3D門檻不斷降低，如果你只盯著C4D那就真的OUT了，像Blender Spline Stager 這樣的新興輕量級3D工具軟件是需要特別關注的，也許這些新工具是真的能讓你跑出與別人不一樣的賽道。
(值得關注的3款新興3D軟件)
在2D圖形方面，也有突破，除了傳統(tǒng)的矩形、圓角矩形、圓形之外，UI中將會引入到更多的形狀，像多邊形、三角形、不規(guī)則形都會大量的出現(xiàn)在UI設計中，UI設計越來越開放和放得開了！
(圖片來源：Google Material You)
隨著去年底蘋果BigSur操作系統(tǒng)的發(fā)布，3D圖標著實火了一段時間，出現(xiàn)了不少3D風格圖標。但是后來大家發(fā)現(xiàn)在圖標在2D層面其實還是很有創(chuàng)新點的，并且也更加實用，所以我們又看到了磨砂玻璃風格圖標走入了我們的視線。這種采用背板透光設計的風格圖標，看起來清新自然，一經(jīng)亮相就讓設計師們喜歡起來了！
(圖片來源：Dribbble)
但無論是3D風格還是磨砂玻璃風格圖標設計，從某種意義上說，這些都是擬物化設計的一種新的回歸方式，設計就是一個圈哪！
排版設計，塊狀與字體成為了關鍵詞。先看幾個作品，你發(fā)現(xiàn)了什么了嗎？
(圖片來源：Dribbble)
UI設計的排版不止是為了視覺好看，更多是要做信息的分割與歸類，讓信息閱讀快速準確且優(yōu)雅！從某種方面也就是我們說的用戶體驗。當下仍然是扁平化為主體UI設計語言的時代，陰影設計幾乎已經(jīng)退出了當下的主流設計，所以在信息的區(qū)分上靠的就是留白與文字，所以加粗大字體，卡片留白、形狀色彩塊就在UI排版設計中起到重要的作用。再輔助通過一些微交互動畫，一切都是那么自然絲滑，主次分明！
(UI排版的三個趨勢)
最后我們說說行業(yè)趨勢方面，在2021上半年的UI設計作品中，除了常規(guī)的移動端APP UI設計之外，我們更多看到了一些針對于其他設備的UI設計，比如說電腦B端應用、車載HMI、數(shù)據(jù)可視化、交互動畫等這樣的新端趨勢，并且這些作品的數(shù)量越來越多了，所以從行業(yè)趨勢來講，UI設計師們還是要打開更多的眼界和格局，設計的競爭不止是在水平能力上，更重要的是行業(yè)賽道的選擇！關注趨勢尤為重要！
(圖片來源：Dribbble)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.yvirxh.cn