<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          訂閱,決定一家SaaS公司的未來

          資深UI設計者

          訂閱不但是一種商業模式,更是一種思維方式。本文將圍繞訂閱展開,講述一個好SaaS的標準是什么?什么是訂閱模式下的增長秘密?推薦對此感興趣的朋友閱讀。

          一、SaaS好不好?看訂閱

          最近看到網上有關于真假SaaS的爭論,還有人列了一堆的真SaaS標準。其實,好SaaS有一條標準就夠了:看訂閱收入的占比。一般認為,訂閱收入占比超過70%,才能被視為一家SaaS企業。為什么是70%?

          這并不是一個數字劃分的標準,而是對應了一個穩定的收入增長要求。也就是說,如果訂閱收入低于這個比例,收入增長的目標、速度和穩定性就沒有保證。

          我們都能觀察到這樣一個現象,即國內的SaaS公司,大部分都會遭遇收入的限高桿。也就是說,當收入達到某一水平時,就到了天花板了,很難再增長了。這當然有很多原因,但最主要的,是訂閱收入的占比太低了

          所以,訂閱不只是一個付費的方式,它更是一種強大的盈利模式。訂閱業務的背后,還有更深刻的商業邏輯和經營邏輯,所以SaaS才具有深度的變現能力。要說訂閱最大的魔力,在于它是一種前瞻性的收入方式,俗稱“躺賺”。

          舉個簡單的例子。假如一家營收1個億的SaaS公司,假定其訂閱收入占比為90%(國外絕大多數SaaS公司都能達到的水平)。那么,每年伊始,就有數千萬的收入,已經趴在銀行賬戶上。還沒開始干活,年收入目標已完成大半。爽吧?

          反之,假定這家公司的訂閱收入只占10%。那么,新年伊始,賬上收入基本是一片空白。絞盡腦汁想辦法,怎么才能掙到一個億?這種“SaaS”公司,即使上了市,業績也像是過山車,日子仍然不好過。

          二、產品轉服務,交易變訂閱

          訂閱近年越來越火了,甚至有人提出“訂閱經濟”的概念。其實訂閱并不是一個新事物,像訂報紙、手機套餐、用水、用電等,都是訂閱。就訂閱本身來說,并不至于搞成一種經濟模式。訂閱之所以會火,還是因為服務。

          毫不夸張地說,當今世界的大部分商業,都運轉在“即服務”(XaaS)的商業模式上。比如:運輸、教育、媒體、健康、互聯網、零售。當然,還有軟件。在產品時代,賣方與買方之間的關系建立在不連續的、匿名的交易基礎之上。也就是說,交易完成后,雙方再無聯系。

          比如賣軟件,交付之后趕緊找下一單生意,唯恐被客戶拖住。因為無法與客戶建立并保持持久的關系,所以這種生意模式的營收效率低,而獲客成本高。從產品時代進入服務時代,軟件這種交易模式,越來越沒有市場。在服務時代,對客戶來說,所有權已經不再重要,使用權才是他們所關注的,即他們更傾向于“使用而非擁有”

          比如,想聽一首歌,沒必要買來整張CD。想喝一杯牛奶,沒必要把一頭奶牛牽回家。想使用一個信息服務,沒必要建立整個IT系統。服務需要一種新的客戶模式,訂閱模式由此盛行

          然而,并非所有的服務都適合訂閱,只有那些可以數字化的服務,它們才能與訂閱模式珠聯璧合。比如SaaS。從數字化角度,訂閱業務又分為全數字化和部分數字化。數字化含義包括:服務內容數字化、訂閱方式數字化和服務結果數字化。由于互聯網的出現,訂閱數字化和服務結果數字化,已不是問題。

          但如果內容可以數字化,那就是一個完美的訂閱生意。它意味著全盤生意可自動化完成,即低成本、高效率、高精度地服務。因為SaaS符合這三個要求,所以它才受到追捧。訂閱業務不但要求保持交易的連續性,還必須保持收入的穩定性增長。國外SaaS快速增長,就是因為把訂閱的優勢發揮到極致。

          訂閱模式的成功,需要有一塊基石,這就是所謂的年度經常性收入(AnnualRecurring Revenue,ARR)。什么是年度經常性收入呢?簡而言之,就是你的訂閱用戶每年預期為你帶來的確定性收入。我們用軟件和SaaS做個比較。

          假定一筆軟件交易,能一次性收入30萬;而按照SaaS服務合約,未來的5年或10年間,每年都有10萬的年度經常性收入。你認為哪種生意的變現能力更好?對于SaaS公司來說,現在的問題成了:如何保證客戶能在未來10年間,持續訂閱?即預期收入的確定性問題。這就涉及到訂閱的底層邏輯,即訂閱的本質。

          訂閱的本質不是收入模式,而是與客戶建立并保持持續的關系。而要做到這一點,必須有一個訂閱型的服務組織。如果一家SaaS公司遇到了限高桿,正確的做法不是去抬高橫桿(沖銷售額);而是通過組織和運營的SaaS轉型,走一條沒有限高桿的路。SaaS收入的訂閱疊加模型,收入增長在理論上沒有上限

          三、訂閱模式下的增長秘密

          雖然面臨限高桿,但不影響SaaS公司對增長的渴望。如果不增長,SaaS企業就進入僵尸模式。但是,如果增長的策略不對,也還是勞而無功。眾所周知,軟件公司的增長思路,是銷售更多套軟件,提高客單價,盡量產品化不定制(雖然不大可能)。做到了這三點,就可能實現增長。

          不過,從過去的十年來看,企業軟件的年均復合增長率,已經降低到個位數了。SaaS要是也這樣干(事實上真有),結果不會比軟件更好。換一個角度看,因為SaaS是服務,所以其增長策略不同于軟件。不過也是三點,即獲得更多的客戶,提升這些客戶的價值,更長久地擁有這些客戶。這與訂閱的本質高度吻合。

          對于增長來說,SaaS訂閱模式還有另一個優勢,是其收入的抗衰減能力。即收入增長受外部因素的影響較小,主要是因為訂閱模式下的ARR相對恒定。比如在疫情期間,新客戶的拓展幾乎停滯。這對于像軟件一類的產品公司,收入增長也隨之停滯。

          但對于SaaS來說,即使沒有獲得新客,訂閱收入也不會受到太大的影響。服務(Service)與訂閱(Subscription)這兩個S,就像SaaS的兩個增長引擎。只有經營好它們,SaaS企業才有未來。

          四、寫在最后

          目前,國內SaaS公司對盈利模式的認識,還只是停留在續費的水平上;而對于訂閱的本質認知還不夠深入。雖然訂閱和續費看起來意思差不多,但訂閱需要ARR等一套全新的指標衡量體系。而支持這一收入模型,需要與以往不同的經營邏輯。

          訂閱收入的占比差異,是國內外SaaS公司業務內容的最大不同。如果訂閱收入占比太低,SaaS公司很快就會到達營收的天花板。訂閱不但是一種商業模式,更是一種思維方式。從SaaS訂閱的好模式,變成“躺賺”的好生意,需要深刻理解訂閱背后的邏輯。

          文章來源:人人都是產品經理   作者:ToBeSaaS
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          金融科技的下一站

          資深UI設計者

          相比于傳統金融而言,科技為金融提供了巨大的動能。探討科技主導下的金融科技的發展之道,對于當下的行業發展具有至關重要的作用。本篇文章對此進行了詳細的闡述,推薦對金融科技感興趣的朋友們閱讀。


          如果一定要為現在的金融科技玩家尋找一個注腳的話,或許「科技」在恰當不過了。

          沒錯,幾乎所有的金融科技玩家都在用「科技」標榜自己,逐漸變成了當初他們宣揚自己的樣子。

          事實上,當初的金融科技玩家并不想要成為科技玩家,他們口中所謂的「科技」僅僅只是一個名頭而已,他們真正從事的依然是金融的買賣。

          事實證明,僅僅只是將「科技」當成幌子,并不能夠帶來長久發展,而只有真正投身「科技」的懷抱,告別對于「金融」的幻想,金融科技的發展才能行穩致遠。

          正是因為如此,當以螞蟻金服、京東數科為代表的一眾金融科技公司的發展被監管,越來越多的金融科技玩家才徹底打消了對金融的幻想,真正投身到了科技的賽道上。

          很顯然,「科技」并沒有「金融」那樣立竿見影的效果,對于玩家們來講,投身到「科技」的賽道上預示著他們需要付出比以往更多的努力,才能獲得發展。

          另外,投身到「科技」的賽道上,是沒有樣板可以借鑒的,他們需要自己摸著石頭過河,才能找到一條真正符合自己的發展道路。

          因此,探討「科技」主導下的金融科技的發展之道,對于當下的行業發展具有至關重要的作用。它直接關系著金融科技的未來,甚至直接關系著金融科技玩家們的前途命運。

          一、回歸金融主體,科技化整為零

          無論是在互聯網金融時代,還是在金融科技時代,我們之所以會遭遇如此多的困境與難題,其中一個很重要的原因在于,科技取代金融成為了主體,最終讓金融行業的發展和進化出現了失焦。

          因此,當「科技」成為金融科技的避風港,我們首先要做的就是要讓其回歸金融主體,科技化整為零。

          所謂的金融回歸主體,其實就是要用金融的邏輯和規律來行事,而不能脫離金融本身,放任科技的發展。

          我們看到的金融科技和互聯網金融之所以會出現如此多的亂象,其中一個很重要的原因就在于,他們從本質上是做科技的,而不是做金融的。

          一旦脫離了金融的規律,所謂的金融變種,必然走入到死循環。

          所謂的科技化整為零,其實就是要讓科技成為金融行業的一份子,成為金融行業的「基礎設施」,而「科技」的外在表現是金融的,而不是科技的。

          只有這樣,科技與金融才能真正實現深度而又全面的融合,否則的話,金融與科技僅僅只是簡單相加,并不能夠帶來本質性的改變。

          當「科技」成為主流,我們需要做的就是要尋找到回歸金融主體的正確方式和方法,不能脫離「金融」而講「科技」,一旦脫離了「金融」而講「科技」,那么,縱然是躲過了監管,「科技」同樣將會因為沒有實體行業的滋養而枯萎。

          只有真正做到了回歸金融主體,實現了科技的化整為零,金融科技的發展才能有營養,有動能,最后,才能有發展。

          二、流量并非目標,行業才是關鍵

          無論是在互聯網金融時代,還是在金融科技時代,我們借助科技來改造金融的目的其實是很明確的,基本上都是為了流量而來。

          在流量充沛的大背景下,這種發展模式尚且存在一定的發展空間,一旦流量紅利不再,盲目地以流量為終極目標,不僅無法帶來流量的增長,甚至還會有害于金融行業的良性發展。

          當「科技」成為玩家們新的避風港,我們需要做的就是要拋棄流量觀,真正將關注的焦點更多地聚焦在行業上。

          通過科技對于金融行業的深度改造,為金融行業的發展找到新客戶,找到新方向,開辟新機會。

          總結起來,一句話,就是要將改造行業,而不是獲取用不看成是下一個階段的金融進化的關鍵。

          在這個過程當中,我們可以:

          • 優化金融的運行邏輯
          • 創新金融的產品
          • 提升金融的運行效率

          只要金融本身有了本質的改變,不僅可以繼續挖掘存量時代的新機會,而且可以讓金融行業的發展獲得更多新的發展機會。

          因此,當「科技」成為金融科技新階段的主導,我們需要拋棄對于流量的迷戀,通過將更多時間和精力放置于金融行業本身,從而找到存量時代的金融行業新機會。

          三、割裂無出路,融合正當時

          無論是在互聯網金融時代,還是在金融科技時代,「科技」與「金融」兩種元素之間的關系都僅僅只是一種簡單相加的關系。

          換句話說,在互聯網金融時代和金融科技時代,「科技」和「金融」之間依然是獨立的,割裂的關系,并未真正實現真正意義上的融合。

          盡管這種簡單相加帶來了一定的發展,但是,這樣的發展基本上是在收割紅利,等到紅利不再,「金融」與「科技」的這樣一種割裂的關系,必然會面臨困境。

          當「科技」成為金融科技未來發展的主導,特別是當越來越多的科技玩家開始投身到「科技」的洪流里的時候,我們更加需要對「金融」與「科技」的本質有一個正確的認識。

          什么是科技?什么是金融?

          說到底,無論是金融,還是科技,其實都是相當基礎的,相當底層的存在,它們存在的巨大的意義就是要建構起新型的實體經濟的大廈。

          說白了,無論是金融,還是科技,只有與實體經濟實現了深度融合,才能讓兩者的功能和作用發揮到最大。

          那么,在互聯網金融時代和金融科技時代,「金融」與「科技」兩種元素是不是真正發揮了它們應有的功能和作用呢?

          很顯然,沒有。

          它們僅僅只是發揮了最末端的功能和作用——收割流量的功能和作用,而沒有真正找到與實體經濟結合的方式和方法。這是我們看到互聯網金融和金融科技之所以會陷入到死胡同的根本原因。

          當「科技」成為金融科技的主導,給了我們一個非常明顯的信號,即我們不能再像以往那樣收割流量了,不能再像以往那樣只做末端的買賣了。我們需要回歸本質,找到「融合之道」。

          需要明確的是,這里的「融合」,其實有兩個層面的意思:

          1. 我們需要找到「金融」與「科技」兩種元素的融合之道,讓這樣兩個原本并不想干的存在,有統一的表達方式,實現真正意義上的融通;
          2. 我們需要找到「金融」、「科技」和實體經濟之間融合的正確方式。

          試想一下,當「金融」與「科技」實現了深度而又全面的融合;當「金融」、「科技」與實體經濟實現了深度而又全面的融合,那么,它們的發展無疑可以跳出以往僅僅只是基于流量為主導的發展模式,真正進入到一個全新的發展周期。

          當以「金融」為主導的金融科技的發展模式被叫停,我們看到的是越來越多的玩家開始將關注的焦點聚焦在了「科技」上。

          于是,「科技」成為了下一個發展階段的主導。

          很顯然,這種全新的發展模式,不僅可以帶來金融的新進化,同樣可以帶來科技的新進化。


          文章來源:人人都是產品經理   作者:孟永輝

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務



          2021-2022設計趨勢報告:動態篇

          資深UI設計者

          1. 動態在 UI/UX 扮演的角色

          動態能激發用戶的情緒,為靜態的視覺設計注入活力與生命力。有趣、奇妙、吸引人的動態,能讓你的產品展現與眾不同的魅力。另一方面,動態有助于支持可用性,通過自然流暢的物理運動,突顯元素在過渡時的關聯性與狀態變化,增強用戶對產品功能的感知。

          因此,動態設計必須是有意義的,同時兼具可用性與美感,UX 行業也將動態設計視為多學科的交集,細分成一個專業的設計門類。作為 UI 和 UX 設計中重要的組成部分,動態設計從三個層面發揮影響力:

          提高連貫性(Increase Continuity)

          讓界面元素在用戶流程中順暢地轉變與過渡,將用戶操作導向期望的任務結果。

          連接場景(Connect Scenes)

          在轉換場景的過程中扮演潤滑劑的角色,闡明場景之間的位置、層級與空間的關系。

          視覺吸引(Visually Appealing)

          聚焦用戶視線,將其注意力放在重要的事情上,從而起到信息傳達、提升識別度的作用。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          2. 動態設計趨勢

          植基于 UI 和 UX 設計而發展的第三維度,動態設計的趨勢自然與兩者密不可分。綜觀近年,多數作品巧妙地運用絢麗的動態圖像(Motion Graphics)與動效設計,讓新的視覺手法得以表現更為出彩。再者,隨著移動端芯片性能提升,跳脫二維平面的表現形式不再難以實現,讓設計師能夠解開束縛,發揮無限的想像空間。2021 年的動態設計可歸納為三個趨勢:

          增強表達(Enhance Expression)

          運用引人注目的表現手法將信息傳遞給用戶,包括變形、動態文字和背景動畫。

          創造層次(Create Hierarchy)

          在視覺平面中創建空間層次結構,遮罩與視差是常用的表現手法。

          擴展維度(Expand Dimensions)

          突破二維限制,將界面元素多維化營造空間感,例如 3D 動態圖形和攝像機運動。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          增強表達

          1. 變形 Morphing

          變形創造了一種連續的敘事狀態,告知用戶元素的狀態或作用發生變化,是一種最引人注目的表現手法,能將形狀、圖像、色彩無縫地融合與過渡。

          動畫插圖 Animated Illustrations

          2021 年看到許多有趣、吸引人的插圖,而更多的設計師開始為靜態圖像添加動態,也讓 GIF 和動畫插圖越來越受歡迎。

          動畫插圖看起來更生動,并帶有敘事性質。在示例中,運用動畫插圖來呈現這杯果汁是由哪些水果打成,比起文字描述更能吸引觀眾的注意力。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Lobster

          通過動畫插圖來呈現同一系列的轉變,有利于延續外形上的特征,讓不同的物體具有連結性。比如從桌子、衣柜到燈具的連續變化,同樣風格的系列家具利用動畫來體現一致性。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Graceful illustrations ?

          流體動態 Liquid Motion

          動態的有機形狀,包括流體、煙霧和火焰等粒子效果,能夠極大地增強視覺效果。流體動態并非明確的過渡與場景轉換,而是顏色在流動的液體中擴散,進而創造出抽象或真實的視覺形狀。這種風格能實現無縫過渡,并為設計增添有機感,也是 2021 年最引人注目的動畫趨勢之一。

          運用流體動態來展現抽象的有機體,除了輕易地攫取受眾目光,還讓人不自覺地佇足在畫面上,感受流體變化的韻律與美感。這類動態設計可作為烘托主題的背景動畫,或是吸引目光焦點的主角。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by ?anton mishin?

          流體動態運用到網站設計所營造的視覺沖擊力更為驚艷,能為用戶帶來獨特、新鮮的視覺感受, 使得流體動態深受風格前衛的設計師喜愛。網站還能利用鼠標懸停與流體進行互動,因此會在許多特效網站見到流體動態的蹤跡。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Gilles Tossoukpé

          動態漸變 Dynamic Gradients

          扁平化設計缺少現實質感的元素,搭配漸變色能有效緩解不足,為設計創造深度與層次。變化中的漸變色同時帶有動感與舒緩,充滿活力卻又平靜。使用動態漸變能讓設計師展示一系列不斷變化的情緒,許多內容創作者和品牌已經注意到這一點,開始在廣告活動、識別設計和數字內容使用動態漸變。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Pixelz Studio

          微交互 Micro Interactions

          用戶體驗設計中微交互變得日益重要,而動態設計正是微交互的靈魂所在,即使只是微小的視覺提示或反饋,都是人機交互易于使用的關鍵。從經典案例來看,微交互的動畫細節必須帶有明確的目的性,讓用戶獲得實時反饋,指導用戶進行下一步。從近幾年的設計趨勢來看,微交互已成為不可或缺的存在。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Илья Бабушкин

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Google

          動畫商標 Animated Logos

          過去幾年動畫商標是最流行的動畫趨勢之一,通過各種視覺效果,設計師能創造出不同類型的動畫商標,許多企業開始采用動畫商標作為吸引注意力的手段。多數情況下,商標是進入網站時最先看到的東西,因此商標應該令人難忘、引人入勝,并使用符號或排版來揭示品牌個性。結合動畫的優勢,設計師可以運用一些動態或效果來講述簡短的故事以強調品牌特征,并為靜態排版和商標注入一股活力。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Yulia K.

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Meta

          2. 動態文字 Kinetic Typography

          動態文字是使用移動文本來吸引注意力的動畫技術,許多卓越的品牌在網頁設計中使用動態文字,為網站外觀增添動感和視覺沖擊力,是近年 UI 動畫的趨勢之一。

          設計師使用動態文字為單詞或句子添加生動的元素,借此定下情緒氛圍與設計基調,吸引用戶的注意力。幾種常見的表現手法,擠壓和拉伸一個詞能會喚起一種俏皮感,而連續重復這個詞則具有催眠感和前衛感。另外,使用大號和粗體字體來增強份量以強調某些信息,也是動態文字的特征之一。

          無論在電商網站、電視廣告或音樂視頻,動態文字都占有舉足輕重的地位,有利于加深用戶對品牌的關注與印象。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by HOLOGRAPHIK®

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Hrvoje Grubisic

          3. 背景動畫 Background Animation

          通過背景動畫來強化敘事,成為許多行業常用的品牌傳播手段。你可以創建動態的品牌故事,展示有趣的制造過程、產品的使用場景。背景動畫深獲大眾喜愛,它能讓用戶在進入登錄頁或網站首頁時,輕易地了解更多有關公司或產品的信息。調研顯示,從銀行、醫療保健公司、電商零售商、餐館到 B2B 供應商,這些跨越不同細分市場和行業的網站都開始使用背景動畫。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Carlo Soleri

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Kirill Zhukovsky

          創造層次

          1. 遮罩 Masking

          遮罩過渡是將幾何或有機形狀作為銜接下個場景的遮擋物,等同于舞臺幕布設計,能在界面元素進場或退場時創造連續性效果。這種表現手法簡潔高效,是最常見的過渡動畫之一。

          切換場景 Scene-Switching

          其中一種遮罩過渡,是將當前場景完全置換,如同揭開蒙在上層的布,逐漸展露疊在下方的景,并利用景物相似性和動作延續性,讓兩個場景能夠順暢地銜接,不致于差異過大,造成用戶心理負擔。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by intent

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Minh Pham ?

          狀態變換 State Transformation

          另一種遮罩的表現形式,較無明顯的場景過渡,而是利用遮罩來表現景物的狀態變化,界面元素和布局基本保持一致,以此塑造無縫過渡的視覺效果,這種手法被廣泛地使用,例如氣候變化、人物換裝、產品組合等。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Daniel Tan

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Outcrowd

          2. 視差 Parallax

          視差是利用不同的界面元素以不同的速率移動,創造前后景深的分離效果,借此在平面中塑造空間層次,已成為網站首頁最為普遍的表現形式。

          視差之所以能形成一股風潮,廣為各個行業所接受,一方面是信息層級更加清晰,明確定義各種元素的關系,讓用戶專注于主要操作和內容,將背景或非交互元素往后退,同時保持設計的完整性。另一方面是豐富的層次變化,當用戶滾動或滑動時,能在扁平化界面拉開空間關系,利用不同的速率和縱深,塑造多層次的感官體驗。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Studio V?R

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Studio V?R

          擴展維度

          1. 3D 動態圖形 3D Motion Graphics

          近年來,結合 3D 動態圖形的界面設計呈現爆炸式增長,雖然創建 3D 動畫需要更多的時間、技巧與協作,但不可否認的,3D 動畫比 2D 圖形更加逼真,從而提供更具吸引力和互動性的用戶體驗,并有效地展示品牌的活力。

          更生動的表情 Lively Emoji

          動畫的吸引力在于能夠創建各種角色,并為無生命物體注入生命力,表情符號就是一個很好的例子。作為獨特的網絡語言,表情符號生動地描摹日常面對面交流的非言語信息,隨著圖形界面的設計趨勢逐漸結合 2D 與 3D,運用 3D 動態圖形來創造更加動感、擬人化的表情,能讓這些非言語信息更加豐富,有機會引領下一波風潮。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Outcrowd

          營造空間感 Spatial Awareness

          3D 動態圖形為平面設計建構了空間敘事框架,在扁平化界面中展現立體感,從而表達空間中元素的位置與層級關系。多維化的發展趨勢,推動了視覺表達形式的演變,空間感讓界面設計更符合人類的認知邏輯,運用各種 3D 運動特效,包括旋轉、翻轉、折疊、透視、Z 軸位移等,打造令人難忘的感官沖擊。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by UI8

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Bruno Ortolland

          擬人動畫 Anthropomorphic Animations

          擬人化能讓物體、植物、動物等非人類事物,表現出人類屬性的行為與狀態。動畫片運用擬人的手法是最普遍的,1927 年迪士尼第一部系列動畫《幸運兔子奧斯華》的主角便是擬人的兔子形象。由于人們容易被以人類行事的事物所吸引,越來越多設計師在界面中添加擬人元素,利用這種效果讓畫面更加生動有趣,增強用戶體驗的愉悅感。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Gregory Riaguzov

          2. 攝像機運動 Camera Movements

          在動態設計中,攝像機運動是最自由、靈活的一種表現形式,能讓畫面過渡更有張力,突破 2D 平面在視角上的限制,創造一個無界線的立體空間。常見于影視、動畫和廣告的攝像機運動,包括推近、拉出、平移、跟拍等方式,備受動態設計師青睞,讓用戶以多變的視野探索數字產品。

          推近/拉出 Dolly In/Dolly Out

          推鏡頭是指被拍攝的對象不動,攝像機由遠而近,朝著對象不斷推進, 用來突出人或物的主體。鏡頭推近的運動方式,用來呈現從整體到局部、由分散到集中的變化,引領用戶進入故事情景,給人一種身臨其境的感受。

          相反地,拉鏡頭則是將攝像機后退,使畫面逐漸遠離被攝主體,側重的是從局部到整體、由點到面的轉變,強調主體所處的空間環境。隨鏡拉出的景象,能激起人們無限的想像。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Michael Crawford

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Ali Zafar Iqbal

          水平/垂直移動 Truck/Pedestal

          水平向左或向右,垂直向上或向下移動攝像機,使畫面不斷變化,讓用戶跟隨鏡頭視角一起移動,產生一種置身其中的感覺。這種運鏡方式,通常用于具體的場景,利用角色或景物的延續性來消除場景過渡時的邊界,表現出一種流動感,無論是手勢滑動或鼠標滾動都能有順暢的操作體驗。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Netguru

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Minh Pham

          結合多種運鏡 Multiple Camera Movements

          運用多種攝像機運動相當普遍,既能擴大視野,又有很強的空間感,可以更加自由與多樣地展示不同視角和情景。比方說結合橫搖(Pan)、直搖(Tilt)和跟隨(Tracking)鏡頭,連續而詳盡地展示一個產品,由于畫面始終跟隨一個主體,有利于突出產品特征,并讓用戶從不同的角度和距離觀看產品,是一種增強臨場感和參與感的有效方法。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Sang Nguyen

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Paul Ilnitski

          一鏡到底 One Shot

          在電影中為了不將觀眾的情感和注意力割裂,使用一個鏡頭來完成全片的場景刻畫和敘事,這種拍攝手法被稱作一鏡到底或長鏡頭。連續鏡頭逐漸被運用到界面過渡,以此增強操作過程的流暢性,例如一氣呵成的購物體驗,或是貫穿全場的人物角色,其特點是給用戶最沉浸的感官體驗,無間斷地體驗整個流程。

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Orizon: UI/UX Design Agency

          騰訊出品!2021-2022設計趨勢報告:動態篇

          by Minh Pham ?

          結語

          動態設計作為近年熱門的創作形式,廣泛應用到各個領域,逐漸成為設計的主流趨勢。受益于技術演進與發展,從創意生產到落地實現,動態設計的門檻不再遙不可及。設計師得以將想法轉化為生動、有趣的作品,并有機會創造新的表現手法,玩出許多新花樣,成為 2021 年動態設計的特色。

          本文歸納的設計趨勢,有助于啟發設計師對動態設計的想像,激發更多創作靈感,為靜態界面賦予靈魂,打造令人難忘的視覺體驗和品牌形象。



          文章來源:優設 作者:騰訊ISUX
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務




          2021 出鏡率最高的 7 種網頁 UI 風格

          資深UI設計者

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          看完這一波網頁 UI 類設計,再也不愁接下來該如何做設計創新了。

          圖與線疊加

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          這是今年出鏡率比較多的一種設計風格,不管你是在 Dribbble 還是 Behance 上都能見到它的影子。這種風格設計最大特點:形式感、聚焦、簡約而不簡單。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          當然還可以是將線圈與文字疊加圖片,有一種層疊縱深布局感受。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          又或者說圖形只是作為裝飾作用。

          純文字版式

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          純文字版式在今年版式中出鏡率也是相當之高,包括深圳設計周官網也幾乎都是幾個大字排版。其實我們仔細思考,將文字放大處理,有點圖形化的意思。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          上圖是典型的文字圖形化,將文字轉化成線性設計。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          圖文混合

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          圖文混合設計風格大膽、新穎,讓人眼前一亮。這種版式布局一般會出現在設計工作室網站居多一些,追求形式感與觀賞性。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          圖文混合設計,不光只是圖片與文字混合排版,還可以是圖標與文字、粗字體與細字體之間的混合穿插。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          圓形版式

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          圓形設計趨勢一直都存在,在網頁設計中出鏡率高也是毋庸置疑的事情。畢竟圓形本身自帶超強親和力、聚焦。設計用它可以解決很多枯燥的版式,讓畫面瞬間活了起來。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          還可以將文字處理成圓形,與圓形圖相呼應。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          文字輪廓化

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          文字輪廓化版式今年出鏡率尤其之高,將文字輪廓化設計處理,減輕了文字的視覺重量感,更像是將文字線條化設計處理。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          文字輪廓化設計還可以用在背景,作為設計裝飾效果。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          玻璃質感

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          玻璃質感設計趨勢,也是今年最火的設計風格之一。那么它在網頁出鏡率也是在下半年開始逐漸多了起來,也許是設計師發現這種質感細膩與折射光透露出的細節之美。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          使用線條

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          線無疑是圖形里面運用較多的,今年發現很多網頁中都加了線條作為版式裝飾,或者就是純線條版式設計,讓人眼前一亮,原來還可以這樣玩。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          線條在這里作用明顯,除了美學設計裝飾之外,它還用作信息層級區分。

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格























































































































































































































































          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格


          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格

          靈感不愁了!2021 出鏡率最高的 7 種網頁 UI 風格








          文章來源:站酷 作者:功夫UX
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務




          最新 UI 設計趨勢及應用

          資深UI設計者


          字體圖標,完善字體系統


          圖標在 UI 中扮演著重要的角色,并且已被證明是過去幾十年 UI 設計趨勢的象征。在圖形用戶界面的發展早期,圖標在計算機的顯示技術限制內盡可能仔細地模仿現實世界的物體;它們旨在將用戶體驗從現實世界鏈接到計算機世界。這可以從蘇珊·卡爾 (Susan Kare)為第一臺麥金塔 (Macintosh) 設計的圖標和微軟 (Microsoft) 在 Windows Vista 和 7 中的擬物圖標設計中看到。

          當用戶界面從這種擬物風格轉變為 Windows 8 和 iOS 7 的“扁平”風格時,圖標設計也轉變為單色、線性風格。隨著 Android 12 的發布和谷歌新版設計系統—— Material You (或 Material Design 3) , 所有主要操作系統現在都使用這種風格。



          但是為什么各大設計系統都使用這種風格的圖標呢?設計師意識到圖標不僅僅是風格統一、為功能補充說明的輔助圖形——設計師制作的圖標等同于印刷師制作的字體。 這讓設計師意識到圖標對于用戶體驗來說和字體一樣重要。


          圖標的設計考慮與字體類似,并且經常出現在文本旁邊。
          — Material Design 3 指南

          Iconography [旨在] 與 San Francisco 系統字體無縫集成。
          — Apple 人機界面指南


          Apple 的 SF Symbols 就是最好的例子:它的圖標與系統字體具有相同的九種權重,并與文本的大寫高度對齊。這也意味著圖標可以遵從用戶對更粗的 UI 文本的可訪問性設置。


          Apple 的 SF Symbols 圖標集設計為與系統字體相同的九種權重。資料來源:蘋果



          它們還與系統字體的大寫高度對齊,以更好地補充文本。資料來源:蘋果



          Uber 的設計團隊也繪制了字體圖標來完善他們的 UI 字體 Uber Move,設置了三種不同的強調程度。


          資料來源:優步



          字體圖標旨在模仿書寫系統

          因此,為什么字體圖標是單色的并用輪廓繪制的原因就很清楚了:它們不是模仿物理對象,而是模仿我們的書寫系統?,F代字母,尤其是拉丁字母,基本上是由線條而不是填充形狀組成的。他們從類似物理對象(如埃及象形文字)的象形文字到更抽象的物理對象表示進行了類似的轉變。例如,你不需要畫一只鳥來談論一只鳥;您只需寫一組表示“鳥”的字母或符號即可。

          通過設計類似于字體的圖標,設計師認識到圖標是向用戶傳達信息的重要媒介。圖標可以打破語言障礙,而文本對于那些不熟悉圖標的人來說仍然是必不可少的。將兩者設計為看起來相似可以減少在閱讀文本旁邊的圖標時的認知負擔。

          默認為字體圖標的另一個好處是填充的圖標現在可用于表示狀態或強調,如粗體文本。例如,Material Design 3 中的“活動狀態用填充圖標表示” ,Apple 在他們的人機界面指南中建議“使用填充變體來表示選擇”或“賦予符號更多視覺強調” 。Twitter 2021 年的重新設計更進一步,活動頁面僅通過填充圖標和粗體文本進行區分,沒有任何顏色變化。


          Twitter 僅使用填充圖標和粗體文本來區分當前頁面。陪審團仍然不確定這是否足夠容易訪問。



          未來不一定能夠被準確預測,但是看看字體系統的歷史,已經有了明確的關于什么圖形代表什么意思的規范:符號“a”總是表示“a”,字母“ant”表示螞蟻。這些符號的繪制方式仍然存在差異(大寫字母 A 可以有襯線或沒有襯線),但它們在不同字體中的外觀基本相同。

          圖標似乎也朝著這個方向發展——上面的“添加文件夾”圖標在蘋果、谷歌和微軟的圖標集上具基本相同的設計:一個帶有“+”符號的文件夾。隨著圖標在 GUI 中變得越來越普遍,用戶對于什么符號代表什么意思的認知越來越趨同,就像字體一樣。



          如何才能使用字體圖標?在您的應用程序中使用圖標時,您應該使用使用您正在使用的字體設計的圖標集:如果您使用的是系統字體,這很簡單,現在系統字體都具有系統圖標字體。但是,如果您使用另一種 UI 字體,則可能沒有專門為該字體設計的圖標集。使用普通的線性圖標集就足夠了,例如開源Feather 圖標Iconic.app「1」。如果你像我們一樣使用 Material 圖標,你可以輕松切換到字體圖標。(似乎 Google 現在已將此樣式作為 Material Design 3 的默認樣式。)


          基于壁紙的個性化

          個性化正在成為 UI 設計中越來越重要的元素。雖然自 20 世紀 90 年代以來就存在自定義壁紙和主題,但設計人員現在正在尋找更多方法來個性化整個系統的 UI,主要是用戶選擇的壁紙。谷歌的 Material Design 博客說得最好:“用戶在物理和數字世界中使用個性化的圖像定制他們的桌面,并提供舒適和快樂。” 壁紙是用戶首先看到的東西,并作為 UI 的背景。因此,讓 UI 的其余部分適應此元素是輕而易舉的事。



          將壁紙融入 UI 的技術已經存在一段時間了,從 Mac OS X 的 Aqua 界面中的半透明 Dock 和菜單到 Windows Vista 中的半透明窗口標題欄和 7 的 Aero Glass 主題。眾所周知,iOS 7 為其 UI 的許多部分帶來了模糊的背景,整個屏幕(如通知中心和控制中心)都使用了可以透出用戶壁紙的毛玻璃效果。

          最近,墻紙開始影響幾乎整個 UI。當 Apple 在 macOS Mojave 中引入暗模式時,他們在基于壁紙的窗口背景中加入了一種色調,稱為桌面色調。根據人機界面指南,它“幫助窗口與其周圍的內容更和諧地融合在一起?!?



          后來他們在 Big Sur 的主要重新設計中擴展了這一點,將桌面著色也應用于光照模式:



          Windows 11 在其 Mica material 設計系統中引入了類似的元素,他們的設計指南將其描述為“一種不透明的材料,它結合了用戶的主題和桌面壁紙,以創建其高度個性化的外觀?!?nbsp;它還使用此色調作為當前活動窗口的標志。

          將它提升到一個新的水平是 Android 12 中的 Material You,它為應用程序的背景、按鈕和其他控件的明亮強調色以及更中性的文本顏色著色。整個調色板由每個用戶的獨特壁紙生成。

          這是他們新設計理念的一個關鍵元素,“如果形式跟隨感覺而不是形式跟隨功能呢?” 這是對 UI 設計現狀的徹底拒絕,它尋求一種“通用”設計,具有技術上最先進的界面來滿足用戶需求??纯雌渌耸欠裥Х逻@種哲學會很有趣。



          Material Design 構建了一個顏色系統

          Material Design 團隊在他們的公告中遺漏的是他們如何做到了這一點,尤其是因為他們說他們“必須找到一種方法,讓任何顏色組合都具有可訪問的對比度 [...],而無需對每一種顏色進行測試。”深入了解 GitHub 上最近發布的Material color 實用程序存儲庫,揭開所有謎團:

          1. Material 團隊基于CAM16CIELAB(或 LAB)顏色外觀模型構建了自己的顏色系統:“色調、色度、色調”或“HCT” 。CAM16 是 LAB 的繼任者,旨在匹配人類對顏色的感知方式

          2. 這些模型的關鍵是“色調”或 L* 值,它描述了顏色的感知亮度或亮度,L* 值 0 表示黑色,100 表示白色。這在創建可訪問的調色板時非常有用,可確保顏色根據感知亮度具有足夠的對比度。

          3. 在網絡上,WCAG 2 指南規定正文的最小對比度為 4.5:1。直接使用感知亮度作為描述顏色的值使這變得更加直接,正如材料團隊解釋的那樣:“與對比度不同,測量 L* 中的對比度是線性的,并且計算簡單 [...] 50 的差異保證了對比度比率 >= 4.5?!?

          4. 有了這些知識,剩下的就是生成具有不同色調或 L* 值的顏色調色板,并對其應用任何色調。然后為 UI 元素使用足夠對比的對。例如,一個按鈕可以有一個 L* = 40 的背景色和白色文本 (L* = 100),它很容易通過最低對比度要求(L* 差異 > 50)。




          我們其他人的 LCH

          這是一種輕松生成可訪問顏色的強大技術,但它不需要材質顏色實用程序。LAB 可以表示為 LCH(亮度、色度、色調),類似于 Material 的 HCT,其中 L 值可以用來計算對比度。(這比現有的 HSL 等表示更好,即使亮度相同,HSL 的感知亮度也會有所不同。)您可以在本文中了解有關 LCH 的更多信息。

          (此外,LCH 正在作為 CSS Color Level 4 的 一部分進入 Web 標準!因此您可以 lch (40% 44 49) 在 CSS 中編寫而無需將其轉換為 HSL 或 RGB,但目前僅在 Safari 中支持。Lea Verou,他編寫了上面鏈接的文章是 W3C CSS 工作組的一部分,正在開發這個非常標準。)

          因此,您只需要一個起始顏色,將其轉換為 LCH,然后修改 L 值以制作調色板。然后使用一對亮度差為 50 或更多的顏色,以確保可獲得的對比度。

          我們可以在下面的材質顏色系統中看到這種技術是如何使用的:調色板中的色調與 LCH 亮度值相匹配。(他們還修改色度(類似于飽和度)和色調略微跨色調。)我制作了一個小型網絡應用程序,顯示由材料顏色實用程序生成的調色板,以獲得下面的 LCH 值。



          在 Material 的 HCT 之前,LyftStripe的設計團隊探索了同樣的問題,Stripe 也最終使用了 LCH。我已經將他們的兩個探索聯系起來,這是極好的閱讀。


          我怎樣才能做到這一點?

          有一些工具可以在 LCH 之間進行轉換:



          我使用這種技術為Rowy添加主題,允許用戶選擇自己的強調色,同時保持可訪問性并為關鍵 UI 元素著色。源代碼具有我使用的確切 LCH 值。



          圓角很和諧

          當你想要設計一個帶圓角的“卡片套卡片” UI 時,內部的卡片應該具有較小的半徑,區別在于間距的大小。如果使兩者的角半徑相等,則內部卡片看起來不合適。這種技術在數字設計中已經有一段時間了,甚至是 CSS3 規范的一部分。



          這也存在于硬件設計中:屏幕的圓角與iPad Pro和 iPhone X 設計上的設備框架相匹配。在帶有圓形屏幕的 iPhone 上,底座與屏幕的曲率相匹配——Apple 甚至在軟件中提供了精確的點大小。您還可以在視頻播放器中看到與屏幕曲率匹配的其他元素。



          奇怪的是,這個原則不適用于使用單個圓角半徑的 UI 元素。在 Material Design 2 中,對話框和內部按鈕的圓角半徑都是 4dp,盡管它們之間有 8dp間隙。macOS 在優勝美地時代的設計中類似,Windows 10 幾乎所有 UI 元素都使用方角。

          但是,對于 Big Sur 和 Windows 11,通過增加較大 UI 元素的角半徑來近似這種效果。在 macOS 中,按鈕的圓角半徑現在為 5pt,對話框窗口的圓角半徑為 10pt,而且它們都使用“平滑角”來匹配 Apple 硬件的角。與此同時,Windows 11 以圓角以前的尖角而聞名,按鈕為 4 像素,窗口為 8 像素。



          總體而言,用戶界面似乎也變得更加圓潤:


          • Big Sur 增加了圓角半徑,使用了平滑的圓角,看起來更圓潤;

          • iOS 15 引入了帶有全圓角的按鈕樣式;

          • Windows 11 移除了大多數 UI 元素上的尖角;和

          • 與之前所有版本的 Material Design 形成鮮明對比的是,Android 12 增加了對話框導航抽屜和完全圓角按鈕的半徑。


          我怎樣才能做到這一點?


          將最小的 UI 元素設置為某個基本圓角半徑,然后將較大的包含元素(如對話框)設置為更大的圓角半徑。嘗試使它們與較小元素之間的距離成比例,或將較小的角半徑加倍以進行簡化。這是它在我們的應用程序中的外觀,角半徑加倍:



          OpenType可變字體

          最初開發字體時,它們是用金屬蝕刻的物理設計,具有固定的字體大小。當排版師為不同的尺寸設計相同的字體時,他們通過改變間距和比例等方面來將設計修改為最佳:這被稱為光學尺寸。您可以在本文中了解有關光學尺寸的更多信息。

          可變字體是一種基于 OpenType 的新字體格式,允許設計人員自定義字體設計的特定“變化軸”(或變量),例如非固定粗細、傾斜和光學尺寸。您可以在這個優秀的可變字體入門 中了解有關可變字體的更多信息,它使用Roboto Flex,這是谷歌 Roboto 字體的可變字體擴展。



          2021 年,所有主要操作系統現在都使用這種可變字體技術來實現 UI 排版中的光學大小:


          • Apple 的系統字體 San Francisco于 2015年發布,具有兩種光學尺寸:“顯示”適用于 20 磅及更大的尺寸,“文本”適用于所有更小的尺寸。2020 年,Apple 將這些字體發布為單一可變字體 SF Pro,以光學尺寸作為變化軸。Apple 的系統圖標 SF Symbols也使用可變字體技術。

          • 對于 Windows 11,微軟將其系統字體 Segoe UI 重新設計為Segoe UI Variable,具有自己的光學大小軸。

          • 作為 Material Design 3 的一部分,Google 引入了GS Text 和 GS Variable,這是其企業字體 Google Sans 的演變。


          另外值得注意的是:這些字體都是不同風格的無襯線字體。舊金山是新怪誕的,Segoe是人文主義者,而Google Sans是幾何的。

          我怎樣才能做到這一點?

          可變字體是一項相對較新的技術,生產它們的成本很高,所以資源沒有那么多,尤其是在免費和開源領域。到目前為止,我發現的唯一具有光學尺寸的開源可變字體是Roboto Flex,但它似乎還沒有完成。Rasmus Andersson 被廣泛使用的 Inter 字體正在進行 OpenType 的 Bata測試。同時,為突出的標題使用更具表現力的字體可以提升您的設計。對于Rowy,我在小文本中使用 Inter 作為字體,在品牌表達的標題中使用 Space Grotesk。



          專注于內容

          扁平化設計已經存在了十多年,它的主要目標是通過剝離 UI 元素的雜亂和裝飾來專注于內容。在iOS的15設計指南狀態,“明快,漂亮的界面幫助用戶了解內容以及互動。”

          最新的操作系統版本通過更少的層級來迭代這個概念。導航欄在iOS 15Android 12 中是透明的,并在您滾動之前融入背景。



          在桌面上,macOS Big Sur 混合了標題欄和工具欄,直到您滾動或懸停在欄上幾秒鐘。Windows 11 中的一些應用程序根本不區分標題欄,而是將內容放在一個獨特的卡片式層中。




          這些元素都實現了相同的目標:減少周圍的視覺混亂并提升內容的視覺突出度。


          我怎樣才能做到這一點?


          如果您有一個停靠在邊緣的導航欄,請在不需要區分時將其混合到背景中,例如當用戶尚未滾動時。如果您有主要內容,請將其放置在與背景不同的微妙層中。我們使用了一個 React UI 庫 MUI,它使我們可以輕松實現導航欄僅在滾動時區分的效果



          插入一切

          同樣,更多的 UI 元素被插入,不再占據其容器的整個寬度。當 iPhone X 引入屏幕上的主頁指示器代替主頁按鈕時,Apple 更改了他們的指導方針,規定帶有圓角的嵌入式按鈕,避開iOS 7 中引入的全角按鈕。許多其他固定到的元素的最佳實踐已更改屏幕底部適應新的 iPhone 設計。



          在 iOS 15 中,Apple 正在更多應用程序(如“設置”和“郵件”)中插入“表格視圖”。這似乎是為了應對 iPhone 屏幕尺寸不斷增長的情況,指南指出,“在緊湊的環境中,插入的分組表格可能會導致文本換行,尤其是在內容本地化時?!?

          在 macOS Big Sur 中,他們將此設計擴展到郵件中的列表,與iPadOS 設計一致。它也出現在整個系統的菜單中,包括菜單欄。請注意,點擊目標延伸到菜單的邊緣,就像之前的全角設計一樣。Windows 11 在其菜單和導航項中共享相同的樣式。Android 12 的系統 UI 和應用程序通常也遵循這種風格。

          這種風格可以提高可訪問性,因為元素和它們的容器之間的分離現在擴展到所有四個方面,但我還沒有發現任何支持這一點的研究。當搭配和諧的圓角時,它可以使菜單看起來更現代。



          超越顏色的狀態變化

          設計師們正在添加更多的方式來顯示狀態,而不依賴于顏色,這對于色盲的人來說是無法實現的。以下是我注意到的一些例子:

          • Spotify 在 shuffle 和 repeat 按鈕下方添加了點,而不是在 2017 年僅僅依靠改變它們的顏色。

          • Material Design 3 顯示一個藥丸狀指示器,并在導航欄中為活動頁面使用填充圖標。

          • Windows 11 向列表和導航窗格中的選定項目添加了一致、獨特的行。



          這決定了重新設計Rowy 的切換按鈕:



          以及標準的開關設計


          在 Android 12 中,開關現在在主要操作系統中具有相同的基本設計。這使用戶可以更輕松地在這些平臺之間切換并減少認知負擔。

          UI設計走向何方?

          我在所有這些設計決策中注意到的首要主題是設計師將用戶界面設計置于透視之中。他們敏銳地意識到數字界面在哪些方面適合人類體驗并與物理世界互動。


          • 輪廓圖標模仿文本的融合認識到圖標在通信中的重要性。

          • 越來越個性化的界面元素——尤其是你所采用的材料方向——承認人們喜歡用自己的方式制作東西,包括他們每天使用的技術。

          • 和諧的圓角和插入元素的靈感來自實物和工業設計,因此我們的軟件與硬件更緊密地匹配。

          • 使用具有光學尺寸的可變字體可以追溯到排版的起源,并且與顏色以外的差異化元素一起,它們提高了所有人的可用性,尤其是殘障人士。

          • 更小的事情也有幫助:減少視覺混亂以提升內容使用戶能夠專注于他們想做的事情。并且使用標準的開關設計消除了確定 UI 元素功能所需的任何認知負擔。


          這種思維背后的UI設計使我們很好地起來為下一代對AR / VR計算為中心的虛擬實境,在虛擬實境一經驗將不得不回答他們是如何改善人類的經驗和交互與物理世界。設計人員已經在研究如何使設計系統適應這種變化??纯瓷厦娴臎Q定,應用色彩科學(Material 的 HCT 考慮到觀看條件)和提升內容的插入元素有助于這些 UI 元素從 2D 世界過渡到 3D 元世界。

          文章來源:優設 作者:Bearv5 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          iOS 15 發布后,看看這3個值得關注的設計細節!

          資深UI設計者

          相比于去年 iOS 14 帶來的小組件和 APP 資源庫的功能,今年 iOS 15 的升級幅度似乎確實沒有那么大。

          接下來就從設計師的角度來看看 iOS 15 帶來的視覺和體驗的變化。

          iOS 15 發布后,看看這3個值得關注的設計細節!

          通知中心的重新設計

          iOS 15 對通知中心進行了視覺排版上的優化,放大了 APP 圖標并置于卡片的左側,讓用戶可以通過圖標更輕松的區分和查看消息。

          消息小卡片的圓角也更加圓滑,圓角接近于與控制中心按鈕的大小,這種圓角更大的設計也更容易將用戶的視線過渡到內容中心,同時也使得 iOS 系統設計風格能夠更加一致。

          在通訊類 APP 的推送中,采用了聯系人照片 + APP 小圖標的組合形態,增加信息來源的辨識度,以這種形式更清晰地告知用戶,所收到的信息的來源和屬性。(目前國內的 APP 例如微信、飛書的消息通知等都還沒有完全適配)

          iOS 15 發布后,看看這3個值得關注的設計細節!

          值得注意的是,iOS 15 還可以根據用戶設置的時間來定時推送,這些定時推送會構成一個較大的通知摘要卡片,而摘要的內容會進行智能排序,這種機制將會對設計和運營有較大的影響(所以 APP 通知推送會因為這種機制形成新一輪的內卷么?)

          隨著營銷推送的內容越來越密集,用戶承受的信息壓力也越來越大,蘋果也在嘗試構建更多細分場景下的推送管理,在 iOS 15 中用戶可以選擇讓 APP「靜音一小時」或者「今天不再推送」來避免干擾。

          iOS 15 發布后,看看這3個值得關注的設計細節!

          更好用的 Safari 瀏覽器

          新版 Safari 有較大的改進,iOS 15 將頂部的地址欄和底部的工具融合到了屏幕底部,成為了一個懸浮的交互控件,并在視覺上進行了簡化,右滑動地址欄可以在不同的頁面中快速切換,向上輕掃地址欄,則可查看所有打開的標簽頁,這種在底部操作的交互方式也更符合大屏化的趨勢。

          這種左右滑動和向上輕滑也明顯能感覺到是從 iOS 整個系統的手勢操作中遷移而來,而這種手勢可以極大的降低用戶的學習成本。

          iOS 15 發布后,看看這3個值得關注的設計細節!

          在頁面向下滾動時,懸浮的地址欄和工具欄會自動隱藏到底部,界面看起來沉浸感也更強。

          iOS 15 發布后,看看這3個值得關注的設計細節!

          這種交互方式的變化邏輯也符合交互設計中的費茨定律

          費茨定律

          任意一點移動到目標中心位置所需要的時間,與目標距離正相關,與目標大小負相關

          iOS 15 發布后,看看這3個值得關注的設計細節!

          這里舉個例子來簡單理解一下,手指當前的位置與按鈕的距離 D 越長,所需時間越長;按鈕的寬度 W 越大,所需時間越短。應用到產品設計中就是將按鈕放置在離手指較近的地方,比如屏幕底部易操作區域,完成任務的時間也就會越短。

          iOS 15 發布后,看看這3個值得關注的設計細節!

          夸克瀏覽器同樣是將輸入框以及一些常用操作置于底部,這是因為我們正常握持手機時,大拇指離底部更近,所以需要進行點擊操作的時底部的輸入框操作起來更方便,也更快。

          iOS 15 發布后,看看這3個值得關注的設計細節!

          Safari 的這種交互方式在移動操作系統已經有了一些案例,三星的 one UI 以及安卓陣營中的眾多產品也都逐漸往這種大屏化的交互邏輯發展。

          iOS 15 發布后,看看這3個值得關注的設計細節!

          此外,Safari 采用了新的標簽欄設計,同時可以對繁雜的標簽頁進行整理和保存,標簽組支持多設備間的無縫同步,在任一設備上的改動,都能及時同步到所有設備上。

          iOS 15 發布后,看看這3個值得關注的設計細節!

          卡片化的設計

          在使用 iOS 15 的過程中能清晰的感知到,iOS 整很多界面卡片設計更加和諧了,我們最常用的設置頁就整體卡片設計上做了區塊化和圓角化的處理。要比之前系統直線分割的界面柔和許多。

          這種通過使用大留白、兩側縮進的卡片設計使得界面所呈現的功能更加清晰,也更能夠突顯內容,同時和蘋果自家產品 App Store、Apple Music 等產品的設計風格更加靠近。

          iOS 15 發布后,看看這3個值得關注的設計細節!

          同樣天氣 APP 主界面也做了布局的改動,增加了卡片化的設計,信息組織也更加直觀清晰。天氣 APP 頭部的天氣背景也進行了重新設計,動畫背景更加真實,能夠準確地反映出太陽的位置和降雨情況,相比之前會美觀很多。天氣 APP 也增加空氣質量、溫度、降水強度,空氣質量地圖等諸多功能。

          iOS 15 發布后,看看這3個值得關注的設計細節!

          更多新功能

          除了通知、Safari 瀏覽器、天氣、錢包、地圖等常用功能的更新外,iOS 15 新版本在其他方面也做了更多功能性的升級,這里就來簡單看下有哪些重要的更新。

          1. Live Text

          首先就是 iOS 15 中為照片帶來了「實況文本」功能,在這個功能的幫助下,在相冊里長按圖片,就會彈出復制、查詢、翻譯和學習等選項,這個新功能估計也是 iOS 15 更新最實用的功能之一了~(這個功能在錘子手機的“大爆炸”中也有)

          Live Text 還可以識別照片的各種元素,比如地標、動植物和花卉種類等等。配合 iPhone 自帶的系統搜索——聚焦搜索(Spotlight),根據文字元素來搜索圖片。

          iOS 15 發布后,看看這3個值得關注的設計細節!

          2. 專注模式

          iOS 15 加入了「專注模式」,能助你更好地專注重要信息,由之前的「勿擾模式」升級而來,包括勿擾模式、工作模式、個人模式以及睡眠模式。每個狀態可以設置不同的顯示通知,并可與其他設備同步。

          iOS 15 發布后,看看這3個值得關注的設計細節!

          3. 大鬧鐘回來了

          在此前的 iOS 14 中,設定鬧鐘的控件改為了數字輸入,在隨后的迭代中又改為了很小的滾輪輸入,這種過小的交互空間受到了很多用戶的吐槽。

          iOS 15 中蘋果又將鬧鐘設置改為 iOS 13 的大滾輪,隨手上下拖動撥盤就輕松的設定好鬧鐘了。

          iOS 15 發布后,看看這3個值得關注的設計細節!

          4. 桌面小組件

          不知道小伙伴有沒有發現,在 iOS 14 中桌面重疊的小組件沒法拖動出來,只能手動刪除再重新添加。在 iOS 15 蘋果就解決了這個問題,小組件現在可以從堆疊狀態移出,同時可以選擇智能輪換和小組件建議是否打開。

          桌面還有一項大的變化就是可以整頁移動了,相比 iOS 14 只能一個一個拖動 APP,整頁的切換和隱藏大幅縮短了 APP 布局困難者的“編輯”時間。

          iOS 15 發布后,看看這3個值得關注的設計細節!

          此外,iOS 15 相機和天氣的圖標也進行了一些細微調整?!敖】怠?APP 中新加入了健康趨勢,其中包括靜息心率、睡眠和有氧適能,持續觀測健康狀況的變化。FaceTime 中也增加了空間音頻、人像模式、語音隔離、同播共享等功能。相冊增加了 EXIF 參數顯示等。

          除了系統及界面以外,iOS 在 Human Interface Guidelines(界面設計指南)的內容上也有了一些更新,比如新增了包容性的設計原則,SF Symbols 3.0 圖標的新增,以及新的空間交互的設計。更多關于 iOS 人機界面設計指南可參考 :https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

          iOS 15 發布后,看看這3個值得關注的設計細節!

          總的來說,雖然修修補補又一年,但 iOS15 系統在細節設計以及新功能上確實提升了用戶體驗。

          文章來源:優設 作者:姜佳欣


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          2021-2022設計趨勢報告·動態篇

          資深UI設計者

          動態設計有助于創建令人愉悅且直觀的用戶界面。好的動態設計,不僅能引導用戶對數字產品的體驗,還可傳達有關產品的品牌信息

          動態設計(Motion Design)有助于創建令人愉悅且直觀的用戶界面。好的動態設計,不僅能引導用戶對數字產品的體驗,還可傳達有關產品的品牌信息。本文將介紹近來最流行的動態設計趨勢,這些令人驚艷的動效表現手法,在不久的將來勢必席卷所有人的目光。


          1.1 動態在UI/UX扮演的角色


          動態能激發用戶的情緒,為靜態的視覺設計注入活力與生命力。有趣、奇妙、吸引人的動態,能讓你的產品展現與眾不同的魅力。另一方面,動態有助于支持可用性,通過自然流暢的物理運動,突顯元素在過渡時的關聯性與狀態變化,增強用戶對產品功能的感知。

          因此,動態設計必須是有意義的,同時兼具可用性與美感,UX行業也將動態設計視為多學科的交集,細分成一個專業的設計門類。作為UI和UX設計中重要的組成部分,動態設計從三個層面發揮影響力:

          1. 提高連貫性(Increase Continuity)


          讓界面元素在用戶流程中順暢地轉變與過渡,將用戶操作導向期望的任務結果。



          2. 連接場景(Connect Scenes)


          在轉換場景的過程中扮演潤滑劑的角色,闡明場景之間的位置、層級與空間的關系。



          3. 視覺吸引(Visually Appealing)


          聚焦用戶視線,將其注意力放在重要的事情上,從而起到信息傳達、提升識別度的作用。


          1.2 動態設計趨勢


          植基于UI和UX設計而發展的第三維度,動態設計的趨勢自然與兩者密不可分。綜觀近年,多數作品巧妙地運用絢麗的動態圖像(Motion Graphics)與動效設計,讓新的視覺手法得以表現更為出彩。再者,隨著移動端芯片性能提升,跳脫二維平面的表現形式不再難以實現,讓設計師能夠解開束縛,發揮無限的想像空間。2021年的動態設計可歸納為三個趨勢:

          1. 增強表達(Enhance Expression)


          運用引人注目的表現手法將信息傳遞給用戶,包括變形、動態文字和背景動畫。



          2. 創造層次(Create Hierarchy)


          在視覺平面中創建空間層次結構,遮罩與視差是常用的表現手法。



          3. 擴展維度(Expand Dimensions)


          突破二維限制,將界面元素多維化營造空間感,例如3D動態圖形和攝像機運動。


          2.1 變形 Morphing


          變形創造了一種連續的敘事狀態,告知用戶元素的狀態或作用發生變化,是一種最引人注目的表現手法,能將形狀、圖像、色彩無縫地融合與過渡。

          | 動畫插圖 Animated Illustrations


          2021年看到許多有趣、吸引人的插圖,而更多的設計師開始為靜態圖像添加動態,也讓GIF和動畫插圖越來越受歡迎。



          動畫插圖看起來更生動,并帶有敘事性質。在示例中,運用動畫插圖來呈現這杯果汁是由哪些水果打成,比起文字描述更能吸引觀眾的注意力。


          by Lobster



          通過動畫插圖來呈現同一系列的轉變,有利于延續外形上的特徵,讓不同的物體具有連結性。比如從桌子、衣柜到燈具的連續變化,同樣風格的系列家具利用動畫來體現一致性。


          by Graceful illustrations ?



          | 流體動態 Liquid Motion


          動態的有機形狀,包括流體、煙霧和火焰等粒子效果,能夠極大地增強視覺效果。流體動態并非明確的過渡與場景轉換,而是顏色在流動的液體中擴散,進而創造出抽象或真實的視覺形狀。這種風格能實現無縫過渡,并為設計增添有機感,也是2021年最引人注目的動畫趨勢之一。



          運用流體動態來展現抽象的有機體,除了輕易地攫取受眾目光,還讓人不自覺地佇足在畫面上,感受流體變化的韻律與美感。這類動態設計可作為烘托主題的背景動畫,或是吸引目光焦點的主角。


          by ?anton mishin?



          流體動態運用到網站設計所營造的視覺沖擊力更為驚艷,能為用戶帶來獨特、新鮮的視覺感受, 使得流體動態深受風格前衛的設計師喜愛。網站還能利用鼠標懸停與流體進行互動,因此會在許多特效網站見到流體動態的蹤跡。


          by Gilles Tossoukpé



          | 動態漸變 Dynamic Gradients


          扁平化設計缺少現實質感的元素,搭配漸變色能有效緩解不足,為設計創造深度與層次。變化中的漸變色同時帶有動感與舒緩,充滿活力卻又平靜。使用動態漸變能讓設計師展示一系列不斷變化的情緒,許多內容創作者和品牌已經注意到這一點,開始在廣告活動、識別設計和數字內容使用動態漸變。

          by Pixelz Studio



          | 微交互 Micro Interactions


          在用戶體驗設計中微交互變得日益重要,而動態設計正是微交互的靈魂所在,即使只是微小的視覺提示或反饋,都是人機交互易于使用的關鍵。從經典案例來看,微交互的動畫細節必須帶有明確的目的性,讓用戶獲得實時反饋,指導用戶進行下一步。從近幾年的設計趨勢來看,微交互已成為不可或缺的存在。

          by Илья Бабушкин


          by Google



          | 動畫商標 Animated Logos


          過去幾年動畫商標是最流行的動畫趨勢之一,通過各種視覺效果,設計師能創造出不同類型的動畫商標,許多企業開始采用動畫商標作為吸引注意力的手段。多數情況下,商標是進入網站時最先看到的東西,因此商標應該令人難忘、引人入勝,并使用符號或排版來揭示品牌個性。結合動畫的優勢,設計師可以運用一些動態或效果來講述簡短的故事以強調品牌特征,并為靜態排版和商標注入一股活力。

          by Yulia K.


          by Meta



          2.2 動態文字 Kinetic Typography


          動態文字是使用移動文本來吸引注意力的動畫技術,許多卓越的品牌在網頁設計中使用動態文字,為網站外觀增添動感和視覺沖擊力,是近年UI動畫的趨勢之一。



          設計師使用動態文字為單詞或句子添加生動的元素,借此定下情緒氛圍與設計基調,吸引用戶的注意力。幾種常見的表現手法,擠壓和拉伸一個詞能會喚起一種俏皮感,而連續重復這個詞則具有催眠感和前衛感。另外,使用大號和粗體字體來增強份量以強調某些信息,也是動態文字的特徵之一。

          無論在電商網站、電視廣告或音樂視頻,動態文字都占有舉足輕重的地位,有利于加深用戶對品牌的關注與印象。


          by HOLOGRAPHIK®


          by Hrvoje Grubisic



          2.3 背景動畫 Background Animation


          通過背景動畫來強化敘事,成為許多行業常用的品牌傳播手段。你可以創建動態的品牌故事,展示有趣的制造過程、產品的使用場景。背景動畫深獲大眾喜愛,它能讓用戶在進入登錄頁或網站首頁時,輕易地了解更多有關公司或產品的信息。調研顯示,從銀行、醫療保健公司、電商零售商、餐館到B2B供應商,這些跨越不同細分市場和行業的網站都開始使用背景動畫。

          by Carlo Soleri


          by Kirill Zhukovsky



          3.1 遮罩 Masking

          遮罩過渡是將幾何或有機形狀作為銜接下個場景的遮擋物,等同于舞臺幕布設計,能在界面元素進場或退場時創造連續性效果。這種表現手法簡潔高效,是最常見的過渡動畫之一。



          | 切換場景 Scene-Switching


          其中一種遮罩過渡,是將當前場景完全置換,如同揭開蒙在上層的布,逐漸展露疊在下方的景,并利用景物相似性和動作延續性,讓兩個場景能夠順暢地銜接,不致于差異過大,造成用戶心理負擔。

          by intent


          by Minh Pham ?



          | 狀態變換 State Transformation


          另一種遮罩的表現形式,較無明顯的場景過渡,而是利用遮罩來表現景物的狀態變化,界面元素和布局基本保持一致,以此塑造無縫過渡的視覺效果,這種手法被廣泛地使用,例如氣候變化、人物換裝、產品組合等。

          by Daniel Tan


          by Outcrowd



          3.2 視差 Parallax


          視差是利用不同的界面元素以不同的速率移動,創造前后景深的分離效果,借此在平面中塑造空間層次,已成為網站首頁最為普遍的表現形式。



          視差之所以能形成一股風潮,廣為各個行業所接受,一方面是信息層級更加清晰,明確定義各種元素的關系,讓用戶專注于主要操作和內容,將背景或非交互元素往后退,同時保持設計的完整性。另一方面是豐富的層次變化,當用戶滾動或滑動時,能在扁平化界面拉開空間關系,利用不同的速率和縱深,塑造多層次的感官體驗。


          by Studio V?R



          4.1 3D動態圖形 3D Motion Graphics

          近年來,結合3D動態圖形的界面設計呈現爆炸式增長,雖然創建3D動畫需要更多的時間、技巧與協作,但不可否認的,3D動畫比2D圖形更加逼真,從而提供更具吸引力和互



          動性的用戶體驗,并有效地展示品牌的活力。

          | 更生動的表情 Lively Emoji


          動畫的吸引力在于能夠創建各種角色,并為無生命物體注入生命力,表情符號就是一個很好的例子。作為獨特的網絡語言,表情符號生動地描摹日常面對面交流的非言語信息,隨著圖形界面的設計趨勢逐漸結合2D與3D,運用3D動態圖形來創造更加動感、擬人化的表情,能讓這些非言語信息更加豐富,有機會引領下一波風潮。

          by Outcrowd



          | 營造空間感 Spatial Awareness


          3D動態圖形為平面設計建構了空間敘事框架,在扁平化界面中展現立體感,從而表達空間中元素的位置與層級關系。多維化的發展趨勢,推動了視覺表達形式的演變,空間感讓界面設計更符合人類的認知邏輯,運用各種3D運動特效,包括旋轉、翻轉、折疊、透視、Z軸位移等,打造令人難忘的感官沖擊。

          by UI8


          by Bruno Ortolland



          | 擬人動畫 Anthropomorphic Animations


          擬人化能讓物體、植物、動物等非人類事物,表現出人類屬性的行為與狀態。動畫片運用擬人的手法是最普遍的,1927年迪士尼第一部系列動畫《幸運兔子奧斯華》的主角便是擬人的兔子形象。由于人們容易被以人類行事的事物所吸引,越來越多設計師在界面中添加擬人元素,利用這種效果讓畫面更加生動有趣,增強用戶體驗的愉悅感。

          by Gregory Riaguzov



          4.2 攝像機運動 Camera Movements


          在動態設計中,攝像機運動是最自由、靈活的一種表現形式,能讓畫面過渡更有張力,突破2D平面在視角上的限制,創造一個無界線的立體空間。常見于影視、動畫和廣告的攝像機運動,包括推近、拉出、平移、跟拍等方式,備受動態設計師青睞,讓用戶以多變的視野探索數字產品。



          | 推近/拉出 Dolly In/Dolly Out


          推鏡頭是指被拍攝的對象不動,攝像機由遠而近,朝著對象不斷推進, 用來突出人或物的主體。鏡頭推近的運動方式,用來呈現從整體到局部、由分散到集中的變化,引領用戶進入故事情景,給人一種身臨其境的感受。



          相反地,拉鏡頭則是將攝像機后退,使畫面逐漸遠離被攝主體,側重的是從局部到整體、由點到面的轉變,強調主體所處的空間環境。隨鏡拉出的景象,能激起人們無限的想像。


          by Michael Crawford


          by Ali Zafar Iqbal



          | 水平/垂直移動 Truck/Pedestal


          水平向左或向右,垂直向上或向下移動攝像機,使畫面不斷變化,讓用戶跟隨鏡頭視角一起移動,產生一種置身其中的感覺。這種運鏡方式,通常用于具體的場景,利用角色或景物的延續性來消除場景過渡時的邊界,表現出一種流動感,無論是手勢滑動或鼠標滾動都能有順暢的操作體驗。

          by Netguru


          by Minh Pham



          | 結合多種運鏡 Multiple Camera Movements


          運用多種攝像機運動相當普遍,既能擴大視野,又有很強的空間感,可以更加自由與多樣地展示不同視角和情景。比方說結合橫搖(Pan)、直搖(Tilt)和跟隨(Tracking)鏡頭,連續而詳盡地展示一個產品,由于畫面始終跟隨一個主體,有利于突出產品特徵,并讓用戶從不同的角度和距離觀看產品,是一種增強臨場感和參與感的有效方法。

          by Gregory Riaguzov


          by Paul Ilnitski



          | 一鏡到底 One Shot


          在電影中為了不將觀眾的情感和注意力割裂,使用一個鏡頭來完成全片的場景刻畫和敘事,這種拍攝手法被稱作一鏡到底或長鏡頭。連續鏡頭逐漸被運用到界面過渡,以此增強操作過程的流暢性,例如一氣呵成的購物體驗,或是貫穿全場的人物角色,其特點是給用戶最沉浸的感官體驗,無間斷地體驗整個流程。

          by Orizon: UI/UX Design Agency


          by Minh Pham ?


          動態設計作為近年熱門的創作形式,廣泛應用到各個領域,逐漸成為設計的主流趨勢。受益于技術演進與發展,從創意生產到落地實現,動態設計的門檻不再遙不可及。設計師得以將想法轉化為生動、有趣的作品,并有機會創造新的表現手法,玩出許多新花樣,成為2021年動態設計的特色。



          文章來源:站酷 作者:大魔V

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          2022年網頁和UI設計趨勢

          資深UI設計者


          設計趨勢可以塑造一切,從設計師的創作方式到用戶界面設計,再從網站到包裝設計的未來迭代方向。因此關注現在的流行趨勢很重要,這樣您的設計就不會很快過時。


          讓我們深入探討2022年的一些頂級網頁設計趨勢。我們將著眼于 2021 年末開始出現的趨勢,這些趨勢將為來年即將流行的設計趨勢奠定基礎。


          閱讀更多以前的趨勢文章:2021 年網頁設計趨勢


          目錄:

          有趣、積極樂觀的設計

          黑白配色方案

          大膽和實驗性排版布局

          超大鼠標指針

          三維設計元素的應用

          近乎野蠻

          滾動文本元素

          玻璃擬物風格

          更多漸變

          無圖片主頁

          圖層效果

          分屏美學

          交互式字體

          巨型頁腳

          包容性設計

          非凡的想象力

          結論

          有趣、積極樂觀的設計

          時髦的形狀、顏色,甚至面孔可以帶來很多的樂趣。設計師們正在使用這一網頁設計趨勢,應用到公司機構、電商或個人展示類網站內容,提供趣味、樂觀的設計(如上面的示例),這些設計的共同點是它們為世界注入了一點額外的快樂。


          沒有什么比笑臉更能表達樂觀了。恰當的配圖是描繪這種氛圍和利用這一趨勢最簡單方法。注意拍攝技巧和被拍對象的整體形象,尋找與內容契合角度,例如上面來自 LegalSuper 的示例。


          在經歷了全球肺炎大流行的幾年之后,設計師們正在為設計的項目增添一些額外的樂趣和溫度。這就是我們現在都需要的感覺。


          趣味和樂觀的情緒被注入以面孔為載體的配圖上、較細的字體、有趣的搭配,以及散發出積極情緒的顏色。為了充分利用這一趨勢,請考慮較細的元素并避免選擇使用較粗的字體或厚重的配色。

          FOFSO用鮮艷的衣服、模特緊張但帶著快樂的面孔緊盯鏡頭來做到這一點。


          黑白配色方案

          黑白配色方案是今年最鮮明的設計趨勢。不使用彩色,你真的必須在限制范圍內思考和設計。雖然這聽起來有點嚇人,但它可以釋放并激發你的創造力。結果絕對是驚人的。


          從另外一個角度來說,黑白配色的設計幾乎無處不在。這種對比鮮明審美表明有很多設計師會關注簡單和直接。

          使黑白配色方案既清新又現代的關鍵在于應用恰當的效果和表現技巧。


          在上面的例子中,懸停時有一個微妙的、流動的動畫以及超大的鼠標反色指針來增強交互性。


          大膽和實驗性排版布局

          在2022年,沒有錯誤的字體排版方式。大、黑、粗——甚至是襯線字體——無處不在。他們看起來棒極了。在使用這種網站設計趨勢時,請考慮文字將如何動態響應(在手機屏幕上一切看起來都將不同)以及如何最大限度地對訪問者產生影響。許多實驗性字體不僅設計有天賦,還包括動畫或 flex(CSS響應字體布局) 選項等元素。


          從輪廓到彩色字體,再到不斷變化的形狀和填充,大膽和實驗性字體應用在網站設計中占據主導地位。談到今天的網絡排版,真的沒有規則,設計師們在打破束縛重建一切可能。


          Garcia Salmeron在主頁的設計上使用了多種字體效果來體現這一趨勢:混合和匹配主標題中的字符、帶有實驗性的字體選擇以及帶有圖像和背景的彩色填充層。


          超大鼠標指針

          這是一種新的設計趨勢,點擊上圖鏈接,您會看到許多超大光標的應用示例,在參與設計過程中,在網站前端交互完成之前根本看不到超大指針或鼠標懸停的實際效果,這屬于頁面交互效果的一種。


          這個用戶交互界面的應用無處不在。最常見的例子和用法是 Jade Sheng 的例子,它的圓形指針在屏幕上移動,甚至可以在穿過可點擊元素時改變顏色。


          這種 UI 設計趨勢的偉大之處在于,它為網站訪問者提供了有價值的可用性信息,并幫助他們更好地參與改進設計,提升用戶體驗。


          三維設計元素的應用

          雖然在2020和2021年有很多設計師為網站進行全面的3D化設計,但新興趨勢是將扁平的元素通過3D控制與整體有美感結合起來。


          具有3D風格的元素屬性包括用于創建深度和維度的陰影、動畫以及拉伸和變形等圖層效果。

          Sennep 在上面的例子中使用一個手指插圖引導用戶發現來做到這一點,伸出手指扶正標題。插圖使用手部動作配合陰影來完成這種好玩的設計。


          Skolkovo Park


          是時候思考在3D三維界面中完成所有事情了。從真實的網絡模型到具有深度的視頻或照片插圖,三維元素有助于為設計提供更好更直觀的理解,例如上面的建筑渲染,或者增強視覺刺激興趣點。


          Zoox


          三維設計也延伸到視覺敘事??紤]如何以突出景深和陰影的方式講好您的故事或產品展示。例如上面的示例使用視頻,是有效傳達這種風格的最可靠和最真實的方式之一。


          近乎野蠻

          野蠻主義是最近比較矚目的網站設計趨勢,但它對于大多數項目來說過于苛刻和尖銳。于是進入這一趨勢的最新迭代——“近乎野蠻” 的出現也就不足為奇了。


          這些設計沿用了許多相同的鮮明效果,但邊緣處理更柔軟。即使有一些明顯的邊界和線條,元素之間也有足夠的空間,而不是銳利的硬邊緣。


          沒有太多的裝飾或其他視覺效果,留下顏色和文字來真正承載這些。其結果更引人注目,不至于太苛刻把用戶拒之門外,是野蠻主義和可用性的結合體。


          滾動文本元素

          雖然我們總是希望文本元素可讀,但它們也可以是動態的。滾動文本元素——通常使用超大字體,只有幾個字,在同一個位置循環出現——可以強調關鍵詞并激發用戶的興趣。


          文本滾動通常往屏幕左側位置緩慢移動??招拿柽呑煮w是一種流行的選擇,保持可讀性的關鍵是使用簡短的常用詞或短語。


          引導用戶關鍵行為召喚用語和其他消息應與滾動文本分開,以確保網站訪問者可以輕松閱讀它們。


          Peppa Sauce


          滾動文本選項不僅僅是網站設計趨勢或技巧,它們實際上可以幫助鼓勵用戶互動增加參與度。在上面來自 Mama Joyce Peppa Sauce 的示例中,超大鼠標光標內包含滾動文本,該文本顯示的是更大的滾動文本。(您甚至可能想重復觀看這個互動內容。)


          玻璃擬物風格

          玻璃擬態風格(Glassmorphism)的最初始于2020年末和 2021 年初的新擬態風格(Neumorphism),并演變進化成現在流行的玻璃擬物效果。


          Glassmorphism設計外觀讓人聯想到玻璃。有透明、折射或光澤等元素構成。

          很多設計師在追波(Dirbbble) 上展示使用這種設計風格的作品,也可以在大量已發布的網站設計中找到這種設計方法的設計。


          更多漸變

          漸變的應用一直很廣泛。在2021年之前的設計中的大部分漸變都出現在背景中。

          2022年,漸變將會增加兩種新的形式:

          l  文本顏色漸變填充(如上面的例子)來增加影響和突出強調

          l  填充矢量插圖或圖標以創建漸變紋理效果


          無圖片主頁

          沒照片?沒問題!無需圖像也可設計,讓我們在2022年緊跟潮流吧。


          使用不同類型的UI或設計技巧,來充分美化沒有圖像的主頁。在此處的示例中,Kirifuda 使用了漂亮的黑白配色方案,在文本元素之間增加疊印效果。超大字體和手寫風格的字體有助于將它們整合在一起。(請注意將其他設計趨勢與這一趨勢相結合以獲得出色的效果。)


          沒有圖片的設計也是嘗試其他技術的好機會,例如動畫、鼠標指針懸停狀態或其他交互元素。



          主頁上沒有圖像的設計通常會導致美感缺失。但這完全沒問題。使用另一種設計方法來激發用戶興趣吧,例如使用有趣的大文本字體元素。


          圖層疊加效果

          圖層堆疊、元素間距和圖形重疊可以在設計元素中產生景深錯位效果,彼此之間建立連接。分層效果展示明顯又直接,也可以簡單一點。這兩個選項可以一起使用或單獨使用以產生整體影響。


          State Creative 使用多個圖層——背景、中景、前景——以視覺上有趣且有意義的方式將各種元素組合在一起。


          分屏美學

          分屏美學重新流行。幾年前的趨勢是出于可用性和響應性的原因,現在它更像是一種細分設計。

          這些視覺效果可以包括水平或垂直分割的屏幕,每一側具有相同或不同的功能或點擊動作。

          最好的分屏設計可以同時做兩件事:

          l  提供了強烈的視覺沖劑體驗

          l  他們使用多個入口點來深入挖掘內容


          交互式字體

          可變粗細的交互字體在大多數情況下,這種效果需要使用懸停狀態才有效,盡管您可以嘗試其他一些更復雜的效果。(帶有流體字體動畫也越來越受歡迎。)


          在考慮交互式文本元素時,請優先考慮內容的可讀性和易于理解性。文本的效果僅在其中的文字可讀和可理解時才有效。(否則設計的意義就會丟失。)


          當設計展示相對簡單時,這種設計才最有效。這個技巧在單獨使用時是最好的。


          巨型頁腳

          誰能想到網站頁腳——尤其是那些包含大量信息的頁腳——會成為流行的網站設計元素?


          對于包含大量信息、大量頁面或多個節點入口的網站,超級頁腳是 2022 年必備的設計元素之一。

          世界自然基金會有一個雙層頁腳:

          l  在粗黑條中,有三列菜單選項,便于導航,按用戶可能想要在站點上執行的操作(發現、支持、聯系)分組

          l  黑條中還有一個完整的注冊表單,用于了解訂閱有關該組織的更多信息

          在底部較細的白色頁腳欄中是組織信息、社交媒體鏈接、非營利免責聲明、版權聲明和服務條款鏈接(隱私政策、披露信息和相關條款)


          當存在明顯具有不同目的的元素分組時,超級頁腳效果很好。帶有標題的列格式以及水平底部錨點幫助, Wild Souls的這個頁腳看起來很棒。

          巨型頁腳甚至可以呈現出“近乎野蠻”的風格。訣竅是使用元素來創建獨特的組織感,以便用戶知道如何輕松找到他們正在尋找的信息。

          包容性設計

          設計師正在努力打造一個更具包容性的網絡,它幾乎體現在所有已發布的內容中。從圖像到語言再到替代文本,沒有理由不嘗試讓您的項目更加包容所有人。


          包容性延伸到種族、性別中立、文化、可及性和能力上。共同的主題是您的網站應該以這樣的方式組合在一起,以便任何想要訪問內容的人都可以訪問到內容,并且人們也可以在屏幕上看到他們可以與之相關的其他人。


          這里的要點是,你不需要用大喊“我們具有包容性”的圖像和語言。這是展示比講述更重要,真實比蠻力更重要的設計。


          非凡的想象力

          真實和想象之間的界線從哪里開始?當您查看大量網站時,可能無法100%確定。沒關系。


          享受這種想象力帶來的樂趣,融合真實和想象,創造出非凡的圖像。你的想象力是這里唯一的限制。


          在 K Plus Film 的示例中,人物位于屏幕周圍飛舞的水果頂部。顏色和比例創造了一種引人入勝的視覺效果,這真是太棒了。

          文章來源:站酷 作者:mrdoing 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務



          萬字解析元宇宙及對設計的影響

          資深UI設計者

          hi,朋友,你聽說過“元宇宙”嗎?你或許在網上聽過或者在視頻聽過講解,也許它只是曇花一現的概念,但是隨著越來越多的大廠開始下場執行和站臺,所以很多人開始重視和關注。

          2021年,一個新奇的概念名詞在網絡上迅速躥紅,引發科技界和投資界的廣泛關注。這個概念名詞,就是“元宇宙”。


          1.10  元宇宙的起源


          1981年,一本名叫《真名實姓》的科幻小說,描繪了一個未來世界的樣子。在這里,人類可以通過腦機接口登錄虛擬數字世界,不僅可以有真實的生存體驗,而且可以按照自己的喜好幻化成不同的形象。


          時間來到 1991年,美國著名科幻作家尼爾·斯蒂芬森(Neal Stephenson)推出了自己的小說《雪崩(Snow Crash)》。


          在書中,尼爾·斯蒂芬森描述了一個平行于現實世界的網絡世界,并將其命名為“元界”。所有現實世界中的人,在元界中都有一個“網絡分身”。


          這個“元界”,英文原著中叫“Metaverse”。它由Meta和Verse兩個詞根組成,Meta表示“超越”、“元”, verse表示“宇宙universe”。


          沒錯,Meta Verse就是我們今天文章的主角——元宇宙。



          值得一提的是,書中所說的“網絡分身”,英文單詞叫做Avatar。大家有沒有很眼熟?


          是的,Avatar就是“阿凡達”。2009年,美國著名導演詹姆斯·卡梅隆的那部經典電影,就是以它命名。


          在現在眾多的討論聲中,元宇宙并不是一個真實存在的世界,而是一個虛擬的世界,是一個人們對未來定義的虛擬世界。


          說到虛擬世界,相信大家馬上又想2018年美國大導演史蒂文·斯皮爾伯格執導的——《頭號玩家》。在頭號玩家里描敘的的元宇宙:它是下一代互聯網,是虛擬時空,是全真互聯網。



          但是不管怎么說,現在大家默認尼爾·斯蒂芬森仍被公認為是元宇宙的正式提出者。



          1.20  元宇宙是什么?


          元宇宙到底是什么呢?我看過很多解釋,基本都是將“Meta(超越)”與“universe(宇宙)”相互結合,這個理解過于片面,那么直譯過來不就是“超越宇宙”,這肯定是不符合情理的,要搞清楚這個問題,我們需要弄清楚“Meta”是什么意思,Facebook將公司名字改名為Meta,在側面可以說明,在扎克伯克看來,元宇宙中的元才是核心,在我們中文中,想要找到一個完全與“Meta”對應的詞是比較困難的,所以我們只能意會,“Meta”來自于古希臘語,比起元或者超越,我覺得翻譯成”關于XX的XX“是更為合理的,例如“Meta Date”就是關于數據的數據,這個概念用于文藝作品中就是,“元戲劇”和“元小說”,比較有代表的就是卡爾維諾的“寒冬夜行人”,在心理學上,還有一個概念,叫元認知,這樣去理解,就可以理解“Meta”為什么被翻譯成“元”了,“宇宙”,我們可以理解它與物理的宇宙是不一樣的意思,比如,我們都知道“漫威宇宙”,指的是漫威及一系列作品和角色組成的世界,還有國內比較火的IP“唐探宇宙”,都是指的是一個公司旗下多個IP所組成的世界觀,所以“宇宙”的理解應該是“一個領域多個IP的合集”。


          按照“元宇宙第一公司”Roblox公司的說法,一個真正的元宇宙產品應該具備八大要素,分別是:身份、朋友、沉浸感、低延遲、多元化、隨地、經濟系統、文明。



          身份:需要一個能代表的你身份,無論是打工人還是老板或者是總統都行,它與現實世界的身份是完全不一樣的。


          朋友:在可以在擁有自由的社交和談戀愛,無論他和你在現實世界里是否有交集(也就是社交)。


          沉浸感:可以讓你有在現實世界一樣的真實體驗,讓你可以忘記這是虛擬的世界。


          低延遲:一個合格的元宇宙需要在整個空間范圍上進行時間統一,不能讓人感受到延遲。


          多元化:元宇宙可以提供多種世界場景,供玩家有多種身份而已選擇。


          隨地:元宇宙的入口需要可以隨時隨地的方便登錄,不受任何限制。


          經濟系統:像現實世界一樣,無論是用BTC和ETH還是什么別的貨幣,元宇宙需要都自己的交易系統和規則


          文明:元宇宙里所有人們在一起,一起努力,創造虛擬且先進的文明。


          我們按照現在的技術水平對比一樣,發現很多東西都是無法去完成的,就例如文明來說吧,我們無論是哪一個虛擬的社區還是游戲里,基本這么多年的發展都無法形成自己的文明,最多是有自己的游戲文化或者社區文化。


          當然,按照現在的研究和技術可以實現的,我們對于元宇宙的規劃可以總結成一句話:人以自由獨立的數字身份自由的參與可能存在的數字世界。


          1.21  元宇宙的數字身份


          我們將它拆分出來理解:元宇宙是一個數字世界,這個是沒錯的,它不是現實的世界,也不是物理的世界,而是一個虛擬的數字世界。

          然后我們再來看看另外一個詞:“數字身份”,我們現在在上網的時候大多數都是實名的,但是在平臺上,我們會有自己虛擬的ID和昵稱,這些虛擬的ID和昵稱會遍布整個互聯網,可能是在淘寶京東買買買的你,也有可能是在騰訊視頻或者愛奇藝為某個明星瘋狂打call的你。


          所以,這些虛擬的ID不擁有權力,也不會承擔義務,他們不是一個獨立的身份,他們都需要依附在線下那個擁有獨立身份的你。


          那么,我們現在在想理解那句話:元宇宙是人以數字化身份參與一個虛擬的數字世界。并不是單單用數字賬號參與,是一個獨立、不受干預的數字賬號。

          不同的是,在現實世界你只有一個身份一個你,而在元宇宙里,你可以擁有多個不一樣的數字身份。


          1.22  元宇宙的參與性


          上面那句話還有另外一個關鍵詞,數字化身份參與,如果想要更準確一點,我覺得應該是“自由參與”。我們在這個互聯網上,現在是可以自由的去訪問,去發表自己的看法,但是很多互聯網產品的規則制定和產品的細節定制和我們卻沒有任何關系。

          比如,微信每次新出一個功能,都可以引起全民的熱度,甚至可以上熱搜,是因為用戶期待那個功能太久了,所以才會有這樣的討論熱度,但是微信也有很多用戶想要的功能沒有去實現,所以我們才說,互聯網產品的規則制定和產品細節的開發,我們并沒有“自由的參與”。

          但是在元宇宙的設定里,你可以自由的參與規則的制定,每一個該元宇宙世界的玩家都可以參與到游戲規則的制定,讓每一個都有會有參與感。

          這個就像,幾個朋友一起參與劇本殺劇情的編寫,玩法的設計,我們每個人都會討論角度與角色的關系,

          討論這個細節怎么演比較好,需要一個什么樣的場景,如果有人覺得這個方案或者設定不滿意,他可以提出否定細節,然后大家在針對討論,如果大家都統一了,這句劇本殺就可以開始玩了。



          1.30  元宇宙的分類


          如果我們按照現在有的資料,我們想要將元宇宙去歸類,我們可以把元宇宙分為兩類,一類是傳統型元宇宙,另外一類是開放型元宇宙。



          1.31 傳統型元宇宙


          傳統型元宇宙,一般指的是將線下的生活直接映射到元宇宙中,最后線下線上融為一體,其實這個事情在我們的生活中也是一種在重演。

          我們現在通過不同設備(手機、PC、物聯網),我們在線下搬到線上,最后回歸到線下生活,傳統型元宇宙是一個比現在網絡環境更完善、體驗更沉浸,具備生活、社交、工作、娛樂的虛擬數字的世界,也有可能有一天,我們在虛擬世界體驗比較好的方案會成為推動我們現實世界的助力器,會落地在現實的生活中。



          1.32 開放型元宇宙


          與傳統型元宇宙對立的,便是開放型元宇宙,它與現實的物理世界的是沒有什么關系的,他是一個獨立是虛擬的數字世界,比如,我們現實的生活是一個地球OL,那么我們在開放型元宇宙所建立的世界可能是土球OL或者是綠洲OL,是與現在世界平行存在的一個世界。

          開放型的元宇宙在理論上是可以有無數個的,只要是符合建立條件的人都是可以建立的廣義元宇宙,可能有的開放型元宇宙是因為是某些KOL建立的,人氣會比較高,有的可能會無人問津,只有創建者一個人,每天“采菊東臨下,悠然見南山”。



          傳統型元宇宙是需要有現實社會的映射才能存在的,現實世界才是主要的,虛擬世界只是現實世界是依附品。而開放型元宇宙則和現實世界是分開的,甚至有些開放型元宇宙的擁護者覺得開放型元宇宙研發出來之后,物理世界里的身體都不需要存在了,人的意識作為了一個代碼字符或者程序活在廣義元宇宙中,個人的榮譽感、社交、幸福感全部來自于開放型元宇宙,當然,這是一些非常極端的擁護者。



          現在能看到元宇宙與元宇宙相關的新聞,基本都是和游戲相關的。例如,目前第一個將元宇宙寫進招股書的Roblox,它現在已經在紐交所上市了,而且投資名單里還有我們國內做游戲比較出名的騰訊,這家公司主要是提供一個讓玩家可以自由建立內容的游戲平臺。



          所以很多人會認為游戲就是元宇宙,或者元宇宙就是進階版的元宇宙。


          我們前面說“開放型元宇宙”的時候說過,開放型元宇宙是可以自由切換的,上一秒我可能是在為大家出謀劃策的軍事智囊,下一秒我便可以切換到一個充滿斗氣和斗皇滿天飛的世界,來履行我的“三年之約”。

          正因為有這樣的特性,所以很多人認為游戲它和元宇宙是一樣的,比如,我在“王者榮耀”里連著跪了幾把之后,非常的沮喪,我便打開了“哈利波特”在里面騎著掃把自由自在的飛。我們可以在“王者榮耀”里和自己室友或者陌生的人一起組團玩游戲,一起推搭,是不是有點元宇宙的意思了。


          其實我們體驗到了游戲和VR設備所營造的氛圍來說,它們都只是元宇宙構成組成。硬件設備和技術都是只是構成了元宇宙的一部分。而還有另外兩個組成元宇宙的基礎部分,是游戲所不具備的,一個是身份系統,另外一個經濟系統。



          2.01  身份系統


          我們前面說過,我們現在以賬號的形式參與互聯網上的任何活動,都是需要與現實世界中的個體是密不可分的,我們是需要現實中的個人有需求才會去選擇登錄賬號,比如,我們需要中午想吃飯,才會打開外賣軟件點外賣,都是有目的的才會去建立這個身份。


          而元宇宙真正的價值就是要隔離和現實世界的身份,讓數字身份作為一個長期獨立的個體存在,不同身份之間產生各種關系和聯系,這才會讓整個元宇宙運轉起來,就如同我們現實的物理世界一樣,這便是元宇宙的身份系統。



          2.02  經濟系統


          經濟系統,它是維系整個元宇宙經濟正常運轉的規則。就像我們們在元宇宙里創造什么價值,都可以和別人進行交易,且整個經濟系統不會突然崩潰,例如貨幣會突然的歸零或者突然的飆漲,我們可以自由的拿著貨幣去任何地方放心的交易,都是受到保護的。



          2.10  元宇宙和游戲的根本區別

          說到這里,大家肯定會有疑問,我們平時所玩的游戲也有身份系統和經濟系統,那他們和元宇宙有什么區別嗎?雖然游戲里也具備這兩個基礎的條件,但是,他們和元宇宙的這兩個系統是完全無關的事情,他們最大的區別就是游戲里的身份系統和經濟系統是“中心化”的。

          就拿最經濟系統來說吧,一些道具的價值和商店上架什么新品道具,完全都是在游戲廠家的掌握中,而且他們只許在游戲中用指定的交易方式交易,玩家只是按照游戲廠家制定的規則去完成任務而已。

          另外,“中心化”就會存在一個問題,我們在游戲里有所的產品最終都是歸游戲廠家所有,游戲廠家會擁有“超級權限”,如果我們不按照游戲廠家的規則進行交易,有極大可能會被封號,那么我們在那個賬號里的經濟價值并會瞬間湮滅,所有,在本質上來說,游戲里的財產屬不屬于自己,是由游戲廠家說了算。


          身份系統也是同樣的道理,每款游戲有什么角色,有什么裝備可以選擇,都是由游戲廠家制定好了,另外在換一個角度來說,擁有“超級權限”的廠家隨時可以決定你這個號存不存在,所以游戲里的身份不是你的。


          所以中心化的游戲根本不會是元宇宙的進階版。而去中心化的元宇宙,是不會有編輯好的劇本,也沒有現成的角色供你選擇。從早起元宇宙建立的一片荒蕪,到后期的人氣如潮,這些由元宇宙所有人來參與制定和修改,該元宇宙所有的玩家都會享受極大的自由度。


          我們在前面說到的Roblox能在元宇宙這個概念中這么火是有原因的。雖然它僅僅是一款普通的開放性世界的游戲,但是他采用了去中心的運營和發展形式,所以大家會公認Roblox是一款基于元宇宙原理的游戲,也有可能是元宇宙的初級形態。而我們現在無論玩的什么種類的游戲,基本都是中心化的,游戲規則和進度都是在游戲廠家規定好了的。


          在去中心化的元宇宙里,我們都會以新的身份和新的權力去過一種全新的生活,在這里,我們會有新的朋友,新的家園,全新的社交關系。



          我們前面說過,元宇宙要存在需要有兩個基礎條件,一個是身份系統。另外一個是經濟系統,它們構成了元宇宙存在的基礎保障。

          元宇宙的經濟系統,主要是引導元宇宙的用戶或玩家一起進行經濟創造、市場交易的系統,那經濟系統是怎么運行的?它的基本運行原理和現實物理世界也是一樣的,靠的是稀缺性。

          比如,石油,產量少且只有部分國家掌握石油資源,那它的價值就高,因為它具有稀缺性和不可替代性,只有稀缺性的物品才能產生交易價值和交換價值,但是我們需要明白的是,數字世界是不利用經濟系統的建立的,原因是數字世界的物品都是由代碼構成的,它可以限制的復制和無限制的擁有,如果不考慮版權問題,它是可以有無數個的。

          那我們元宇宙是怎么去解決這個問題的呢?要想知道怎么解決這個問題,我們需要知道底層的技術邏輯。說到這里,我們需要也要引入最近比較火的方案,這個方案也是最近比較公認的,Non-Fungible Tokens(簡稱NFT),

          簡單地說,NFT是元宇宙里的數字版權、數字物權的一個合約。因為NFT不可替代的特性,這意味著它可以用來代表獨一無二的東西,比如博物館里的蒙娜麗莎原畫,或者一塊土地的所有權。


          3.10  NFT助力設計版權增值


          我們平時在網上沖浪的時候基本都知道一個道理,在數字世界的所有東西都可以低成本的復制,并可以在短時間內無限制的拷貝,是沒法聲明版權和唯一性的。但是這個一切的顧慮NFT都可以解決,它給數字世界的所有物品包裹一層數字代碼的合約,有了NFT合約的包裹,數字世界的物品就有了不可分割、不可復制的特性,這樣便解決了數字世界物品容易被盜版的問題,也就具有交易和交換的價值。

          我們都知道早期騰訊賺的第一桶金就是靠的是QQ秀,經歷過QQ秀瘋狂的年代的人都知道,一個絕版的太陽神的QQ秀可以賣到1萬塊,然后到現在王者榮耀皮膚讓騰訊賺的盆滿缽滿,說明人們對好看形象的熱愛。


          那我們跳出元宇宙回到現實來看一個最近的一個現象,就是NFT的頭像。好多人都不明白,一個糊的不行的頭像,為啥可以賣的那么貴,我喜歡我知道截圖,我直接自己用不可以嗎?現在我們也許明白了,截圖或者拷貝出來的是贗品,是沒有任何價值的,是不具備交易價值的。


          當然。數字世界的物品能不能作為商用,還需要看作者在NFT商用合約里規定了了什么,可以做什么用途,NFT合約一般會分為兩個部分,一個是標準化的,另外一個是非標準化的。



          3.11  NFT標準化合約


          標準化合約就是我們前面說的那兩個特性,不可以分割和不可以復制性,這是我們用戶無法改變的,交割時只是交割了版權給你。



          3.12  NFT非標準化合約


          非標準化的合約部分就是由作者去制定的。例如,我們設計了一個LOGO,我們可以要求別人在公司盈利了10萬之后,在支付LOGO的設計費用,也可以要求別人的使用場景,比如,只能用于APP上,用在其他上面需要支付另外的版權費,然后在給他開通權限,不同的作者會根據環境時間和他自己的性格,來撰寫不同的NFT合約和調整合約內容。


          3.20  元宇宙有哪些就業機會

          以前,我讀凱文·凱利的《必然》這本書中曾經說過,“人們會在新的生產力水平上找到新工作”,在以前讀到這句話的時候,我不太理解,現在我在想起這句話,我可能讀出了新的領悟,那不就是現在說的元宇宙嗎?在元宇宙里我們會有新的雇傭模式和就業模式。人們也有可能在元宇宙里衍生出全新的職業,創造全新的價值。

          現在我們越來越多提到的是人工智能將要來到,大部分重復的工作將要被取代,尤其在《人類簡史》這本書中提到了“,“未來20到30年之間,超過50%的工作機會被人工智能取代?!边@件事已經在發生了,無人超市、無人貨架、無人駕駛,都正在成為現實。不只是重復性勞動,還有像醫生、律師、文字工作者,在人工智能發展越來越強大的未來,也有被替代的風險?!?


          所有,對我們來說,元宇宙因為創造和關系,為我們創造了更多在的強烈的存在感。更重要的是,它提供了我們去應對人工智能對人替代的策略。


          前面我們說過,當身份系統和經濟系統這兩個基礎條件滿足的時候,一個元宇宙就基本成立了,而且隨著元宇宙的熱度越來越高,全球的頭部企業都開始布局元宇宙,比如,國內外的社交巨頭Facebook和騰訊,都已經公開自己已經開始慢慢的轉型做元宇宙,而且都開始慢慢的開始研發元宇宙相關的應用和技術。

          老話說過,早起的鳥兒有蟲吃,彭博社預測說,到2030年,元宇宙的市場規??赡軙_到2.5萬億美元。但隨之而來的一個問題是,元宇宙所帶來的機會是不是還是像現在一樣,被幾家巨頭壟斷,還是我們普通人也可以參與元宇宙的建設中去。


          這個我們需要分析元宇宙的構成,除了身份系統和經濟系統外,元宇宙的最終的形態肯定還是需要很多其他的資源來支持,比如,最基礎的底層基礎設施,是不是需要足夠的電力資源、算力和高速網絡,其次,我們需要進入到元宇宙,是不是需要一個引導的設備?我們想在元宇宙里生活工作,那是不是需要各種場景的布局,是不是也需要提供各種各樣的工作崗位,這意味著元宇宙有需要非常多的第三方的技術支持,有些風口,也是很多其他企業和普通人能夠去參與的。


          元宇宙的建設,是一個龐大的工程,絕對不是一家兩家公司能搞定的,那么這個龐大的工程在建設的過程中,會遇到什么樣的機會和挑戰呢?在元宇宙的建設過程中,我們先來梳理下元宇宙需要的生命周期



          4.10  元宇宙的準備期


          準備期,這階段主要涉及元宇宙的基礎設施供應商的準備工作,我們知道,元宇宙的基礎設施主要包括通訊網絡、云計算和新的開放的網絡協議。理想中的元宇宙,能同時容納百萬級、千萬級甚至億級的人,所以它對網絡和算力的需求會有指數級的增長。

          舉個簡單的例子,我們國內現在比較火熱的大逃殺游戲“和平精英”,目前一個房間能容納100人同時一起在線,而元宇宙需要的算力支持可能是“和平精英”的千倍萬倍。另外就是不同元宇宙直接如果需要聯系的話,還有需要支持統一的協議接口,這些都是需要一個統一的協會來制定,就像W3C來制定hTML代碼規范一樣,這些比較基礎的問題都要解決了才能算是度過的準備期。當然實際上在實施過程中可能會遇到更加棘手的問題需要解決。



          4.20  元宇宙的啟動期


          啟動期,需要解決元宇宙運行期的一些規則性的問題,比如,經濟系統的正常運轉和NFT的交易系統。經濟系統,按照我們現在能想到的技術,就是通過區塊鏈形式的記賬系統去解決。

          比如我們在某個元宇宙空間的數字身份買了一包紙巾,那么元宇宙的賬本會記錄一筆,然后把這瓶的所有的權轉給我,然后并向整個區塊鏈去廣播這一筆交易。

          目前在為元宇宙做記賬系統的公司已經有很多都開始進入行動階段了,比如,阿里的螞蟻鏈、騰訊的至信鏈,國外為元宇宙做準備也就更多了,比較比較知名的就是以太坊。NFT交易系統就更多了,比如,OpenSea(開放海)、

          SuperRare(超級稀有),國內的NFT交易系統還屬于剛剛起步的階段,我相信明年會有很多實力雄厚的廠家崛起。



          4.30  元宇宙的爆發期


          爆發期,是元宇宙設備供應商百家爭鳴的時候,有兩類目的廠家應該會大有作為,元宇宙的設備供應商和場景應用的開發商。

          元宇宙相關的設備我們在電影上也看過不少,像眼睛、手表手環、腦機接口之類的,場景應用的開發商可能就更多了,比如娛樂設施、工作場景和模式、教育場景、購物場景,這些都可以構成元宇宙的豐富的場景,這都是場景應用開發商的機會。當然另外做出創新的廠家可能會成為某個單獨類目的龍頭,例如,讓腦機接口變的更小巧攜帶更方便,以方便隨時隨地的可以進入到元宇宙的空間里。



          我們前面說到,要想迎來元宇宙需要經歷三個階段,分別是準備期、啟動期和爆發期。我們現在處于元宇宙的什么階段呢?距離元宇宙的開始正式商用還需要多久呢?正式進入爆發期我們需要做好哪些準備呢?我一個個來解決這些問題吧!

          關于我們目前處于元宇宙什么階段,就目前技術的發展,我們應該處于元宇宙的啟動階段,為什么這么判斷呢?因為在經過過去幾年技術的沉淀,我們有成熟的區塊鏈的記賬系統,NFT系統已經得到了市場的認證,并已經開始大量啟動商用階段,在2020上半年,全球NFT的市場交易額只有1370萬美元,而到了2021年上半年,這個數字飆升25億美金。


          5.10 元宇宙來臨標志


          我們知道在元宇宙的產品生命周期有一個啟動期和爆發期,但是,在爆發期之前肯定有一個臨界點,當這個臨界點到來的時候,就代表我們即將迎來元宇宙的時代,那我們怎么判斷什么時間是元宇宙的臨界點呢?我們還是需要從兩個基礎條件開始判斷。

          首先是身份系統。要想達到這個臨界點,必須有一個全民級作為元宇宙的入口能接入元宇宙,就像現在FacebooK一樣 ,全球使用的人數超過了一半,這便是我們現實世界互聯網的全民級的應用。


          第二個標志,當然是經濟系統,衡量經濟系統的一個關鍵指標是NFT的交易規模。?,F在我們全球的GDP超過了80萬億美元,而NFT市場規模僅有約200億美元,如果要達到臨界點的標準,這個NFT市場的規模,也就是元宇宙的GDP,肯定要達到萬億美元的水平。這樣估算,距離元宇宙的臨界點,至少還有五年。



          5.10 元宇宙臨界點會遭遇哪些挑戰?


          在我們向元宇宙的慢慢過渡的時候,我們整個社會會遇到哪些挑戰和需要做好哪些準備呢?我認為比較重要的兩點比較關鍵,一是建立共識,二是文化和倫理的沖擊



          (1) 建立共識


          為什么說建立共識比較重要呢?我們都了解,創造是元宇宙最大的優勢,但是也是有風險的。比如,在元宇宙里,我們每個人都有編寫劇本和玩法的權力,這樣就會產生很多矛盾,每個編寫的元宇宙的劇本不一樣,這個是可以的,但是不同的劇本的矛盾是,元宇宙空間里可能是一個美好的元宇宙,也有可能是充滿殺戮和暴力的元宇宙,也有可能是勞動最光榮的元宇宙,也有可能是不勞而獲的元宇宙。

          所以我們需要在法律、文化、價值觀等等層面,讓社會各個階級都可以參與討論,提前達成一個符合大家正能量共識的價值共識。


          (2) 文化和倫理的沖擊


          第二個需要解決的問題可能是面的文化和倫理的沖擊,我們可以想想,如果某一個元宇宙充滿打打殺殺的事情,在里面的玩家回到現實也是不是會有暴力傾向。比較嚴重的是,在數字世界中,暴力和殺戮它的成本會比較低,所以在里面的犯罪成本也會更低。但是,在現實世界中,發生暴力沖突,無論在哪個國家都要付出比較重的代價,可能是需要接受法律的制裁,也可能是經濟上的損失。但是在元宇宙的數字世界中,可能一個屏幕上的一個角色消失而已。

          再往深一層的看,在元宇宙的世界中,我們說的自由是絕對的還是相對的呢?我覺得應該是相對的,在元宇宙世界里,還是需要法律和規則的,甚至要相對的比較嚴格,而這種規則和法律的制定恰恰是因為元宇宙不是一個開發商,不能通過監管一家公司、一個機構就可以解決的,而是要回到共識的層面,通過建立個人、社會和國家之間的公約,創建文明的元宇宙。

          5.20 元宇宙技術層的挑戰


          元宇宙的虛擬現實是什么呢?我覺得是欺騙大腦的感官,它光有視覺的呈現是不夠的,觸覺也需要跟的上,例如,我們在元宇宙里看到一個菠蘿,我們聞起來是菠蘿味,摸起來也是尖尖刺刺的,可能我們認為它只是元宇宙里的一串代碼,但是我們的大腦會通過感官來告訴我們,這就是菠蘿,所以除了戴在設備,可穿戴設備也是極為重要的,它會給我們一個真實的力作用的反饋,但其實,欺騙五感并不是最大的難題,最難解決的應該是移動和交互問題,我們可以想象下,我們戴好設備,來到了元宇宙,一切的聽覺視覺觸覺都非常逼真,這時候我們街道一個任務,要去野外去打BOSS,問題來了,我們該怎么過去,在真實的物理世界里,我們是需要移動的,但是,我們的房間只有20平方米,所以虛擬空間再大,我們物理空間是有限的,大部分的方案是通過傳送門直接過去,所以,元宇宙的開放世界就很難實現了。

          但是即使是傳送,也不能解決所有的問題,我們都聽過3D眩暈癥,這個原理是我們生理在視覺上感覺到了移動,但是身體沒有移動,如果大腦足夠敏感或者第一次接觸,那么就是產生眩暈感,這種情況在第一個玩穿越火線的時候會比較常見,通常這種情況是視覺上越真實,眩暈感就越嚴重,在頭號玩家里,主角之所以可以在小小的車廂里可以移動,是因為他在跑步機上,現在的虛擬現實游戲的移動也是靠這種方案解決的。


          交互方面就更加復雜了,這里包括了人與物、人與環境、人與人直接的問題,比如,扎克伯格演示的開會場景,我們實際上還行需要椅子和桌子,不然,我們的感官雖然可以給椅子的反饋,但是坐下來確實空氣,當開會玩了,需要互相給實體文件怎么辦,需要握手怎么辦,這都是一些交互邏輯上需要解決的問題,是不是每次開會我們都需要先把場景和東西搭建好,才可以使用,這樣的話,實用的成本也顯得太高了。每多一個步驟,用戶的體驗都是墜崖式的下跌。

          所以,在現在目前看來,我們需要解決體驗層方便的東西還是太多了。

          5.30 元宇宙能帶來哪些改變

          前面我們對元宇宙的概念及需要的條件進行了結構,那么我們來落到實處,談談元宇宙能給生活帶來哪些便利,首先,在扎克伯克發布的關于元宇宙的視頻中,我們可以發現,元宇宙最先落地的可能是現場感,例如現在疫情比較嚴重,我們可以通過虛擬會議室來開會,還有我們很多現有的商業模式都可以借助現場感來進行重構和升級,比如,我們現在去購物,一般是自己打開APP購物,或者分享自己的購物車給朋友,未來我們可以一起在虛擬世界中逛街,足不出戶,可以一起試衣服,幫對方挑漂亮的首飾,現在看任何直播賽事,都需要通過屏幕去看,最多有人氣和在線人數,未來我們可以身臨其境,感受到四面八方的歡呼,現在我們看網紅都是隔著手機刷視頻,未來我們可以更加直接,走到小姐姐身邊,更加近距離的接觸和交談。


          關于元宇宙是否有未來,是很多人一直爭論的話題,但是我們可以肯定的是,隨著全球科技水平和人民精神物質的逐步提高,人的精神層面和娛樂層面的閾值時被不斷提升的,肯定會有企業做去做能滿足人更高維度精神層次的工作,因為人對精神層面的追求的欲望時沒有頂峰的,而我們現實能滿足的條件時有限的,而虛擬現實則可以極大成本的去滿足這個條件,我們現在人平時周末的娛樂時什么,無非是玩游戲逛街和看電影,而這些在虛擬世界里也可以實現,甚至可以不用出門,但是,有人可能會說,虛擬世界的東西終究是虛擬的,怎么可以和現實的相比呢?我們所能感受到了娛樂帶來的精神滿足無非是眼、手感知到了,在傳輸給大腦,如果我們技術足夠發達,在虛擬世界中的東西反饋足夠真實,騙過大腦就不是問題。

          說到這里,我想起我以前讀書的時候,我特別愛一款名叫冒險島的網絡游戲,剛好在那天,我們那個工會要去打里面的一個BOSS“扎昆”,打完BOSS會掉落一個專屬的BOSS裝備,扎昆頭盔,但是那天,我剛開團,我表姐要去買鞋,她問我,游戲里的東西有那么重要嗎?我沒有回答,但是我心里已經有答案了,當打完BOSS掉落的扎昆頭盔,隊友的興奮是真實的,當這款游戲沒落時,大家在QT里面的告別的落寞是真的,現在想到大家一起組隊刷本互相幫助的溫暖是真的,我珍惜我在冒險島的每一件橙裝還有一起和我打副本的朋友,所以,世界上哪有那么多的真真假假,當有一天,你在元宇宙花的時候比你在現實里要多,你的元宇宙的身份比你現在的身份要重要的時候,你那時候覺得那邊是虛擬哪邊是現實的,當你有一天想去現實中買鞋和衣服的時候,會有人問你,現實中的鞋子和衣服不就是一堆垃圾嗎?為什么要那么認真呢?

          文章來源:站酷 作者:Endings 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          揭秘2021紅點設計大獎作品KNOWING——通過可視化提高對數據的理解

          資深UI設計者

          AIOps智能運維平臺KNOWING榮獲2021年度紅點大獎,從它的數據可視化之路可了解如何通過設計提高對數據的理解

          微眾銀行智能化運營團隊的軟件系統KNOWING榮獲2021年度紅點大獎,這是團隊在多方面獲得的獎項之一,也很好的體現了軟件系統和團隊的綜合能力。


          關于紅點獎

          紅點大獎是世界上最大的國際設計獎項,是世界知名設計競賽中最大最有影響的,至今已經舉辦了大約66年。該組織以“尋找好的設計和創造力”為指導原則,為設計師和公司提供了一個設計作品展示和評估的平臺。Red dot由“red dot product design ”產品設計獎,“red dot communication design ”傳達設計獎及“red dot design concept ”設計概念獎,三大獎組成red dot設計獎家族。近年紅點獲獎的數量隨著世界工業生產和設計能力的成熟而增加。盡管如此,紅點獎和IF獎是世界上僅有的,公認評判好設計的國際機構,而能得到至尊獎 Red Dot:Grand Prix的設計更是行業翹楚。今年,23名國際專家查看、討論和評估了來自世界49個國家的9178份傳達類參賽作品。

          有興趣的話,可以了解一下紅點是如何評審和頒獎的
          評審——  紅點是怎樣評選的 The best products in 2020 – The Red Dot Jury selects the award winners_嗶哩嗶哩_bilibili
          頒獎—— 2019紅點產品設計大獎 - 紅點盛會_嗶哩嗶哩_bilibili

          從設計獎的動態看趨勢

          德國紅點獎機構于2015年在中國設立“中國好設計”獎 (China Good Design)簡稱CGD,發起針對中國的全新國際化設計獎項。自加入世界貿易組織WTO,中國成為了世界工廠,為世界各國生產基礎工業產品。隨著中國工業生產能力逐步發展走向成熟,現代工業生產的中心由德國和美國轉向了中國。從德國紅點獎在中國成立分部的舉措,除了看到商業盈利的目的外,還可以看到一個風向標,這就是在信息時代下,更多適應時代的好設計會出現在中國,這也給全球相關專業人士帶來了機遇和挑戰。蔚來就請德國設計師設計汽車和Logo就是其中一個案例。


          得獎項目介紹

          項目名稱:KNOWING

          發布時間: 2019.04

          設計師:朱倩蓉

          程序員:張若君

          項目經理:莫林林

          團隊:微眾銀行智能化運營室

          地點:中國深圳

          獎項類別:2021紅點設計大獎-界面與用戶體驗設計

          什么是KNOWING

          KNOWING的意思是“having or reflecting knowledge, information, or intelligence”擁有知識、信息,甚至智能。不止于人的專家的知識,KNOWING期望通過挖掘數據和神經網絡等IT技術,給監控系統帶來更多機器智能,甚至能反哺給人類智能。


            


          KNOWING是一個為保證銀行IT系統正常運營的監控軟件系統。它給IT系統的運維人員提供如智能數據監控、檢測IT系統異常及定位和分析異常的服務。通過有效監控和管理,IT系統能實現超越電信系統的可用率。這意味著,IT系統的問題能夠被快速察覺和撲滅,不會影響銀行的業務,更不會從而導致商業損失,銀行用戶也因此可享受7*24流暢的線上服務。


          設計背景

          作為一個數據導向且面向專業人員的軟件系統,過往的IT監控系統會展示大量的數據表格,IT運維人員通過表格查詢找到所需要的數據,再通過個人經驗定位和分析IT系統異常的原因。但是紛繁的數據和龐雜的查找工作,以及對個人經驗的依賴需要耗費大量人力,而人的操作是會出現滯后、誤判、遺漏、效率低等問題的。KNOWING在原始系統的基礎上挖掘了更多的數據關聯關系,一方面想用有效的方式展示這些數據關系,另一方面想幫助IT運維人員更快速理解更精準判斷數據,從而提高工作效率。

          因此,KNOWING的設計就需要與其他的系統不同,盡管并不面向非IT人員,它還是需要用圖形化的界面展示密集的數據,通過可視化和交互來體現數據的關聯關系,促進對數據邏輯快速理解。


          總覽

          總覽頁面最上方的時間橫軸展示了在一定時間段內檢測出的重要IT異常,點擊某個異常紅點,下面的條狀顏色區塊是展示這異常分析的5個階段。接著是異常的影響、評級、分析結論、具體指標等模塊,模塊的順序按邏輯分布,從總到分,從粗到細。


          根因分析流程可視化

          異常分析的最后一個階段是根因分析(RCA),是異常一個從檢測到根因分析的雙向流程。通過數據可視化的設計,這個流程可以被非常形象表達和快速理解。左側是對數據流的3次分類處理,右側是通過AI,如指紋識別一般找到當次事件與歷史記錄的共同特征,從而推斷當次事件的類型,根據類型推導根因。雙向分析最終匯聚成中間的結論。


          交易樹

          KNOWING實時生成交易樹,它展示的是一單銀行交易所經過的所有IT節點。節點內外和枝干的設計細節表達了該節點的不同狀態。IT運維人員可以從交易樹中快速得到交易的概覽信息。

          交易樹的生成


          子系統知識圖譜

          IT系統內存在著大量的子系統,KNOWING描繪出了他們復雜的關聯關系,這就是子系統知識圖譜。圖中可以根據部門分簇查看子系統,也可查看全量或單個子系統。若搜索某個子系統,則以此子系統為中心查看所有關聯關系。這樣,運維人員可以從不同的角度了解子系統并形成全局概覽。

          3種視圖查看:按部門、全量、單個

          按部門分類查看

          查看全量

          查看單個


          從以上的例子可以看到,可視化不是單純的圖表方式展示數據,數據可視化是將密集的抽象數據壓縮并還原為形象方式展示。由于抽象的信息是人類演化的后期發展出來的,生物性決定了人腦天生擅長處理形象的物體。所以信息越形象,需要經過大腦處理的區域就越少,獲取的速度就越快。

          https://v.youku.com/v_show/id_XNTgyMDkwODIzMg==.html?firsttime=95


          對設計與科技的思考

          IT技術逐漸滲透各個領域,行業與行業、技術與技術間逐漸融合??萍?,尤其是IT技術和設計未來會如何相互影響?經過多年對后臺產品的設計以及經年的學習和深入思考,本人確實看到了一些趨勢也沉淀了一些見解。以下是我給紅點獎寫的一些思考。

          科技如何改變設計

          科技是人類能力的外化,科技是新工具即新形式。設計的本質就是做內容和形式的適配,所以,新科技的到來意味著形式的改變,而形式的改變會影響內容,這就需要重新做內容和形式的適配工作,也意味著新設計需求涌現。

          設計的未來挑戰

          從設計的角度來講,過去被設計物的傳達是單向靜態的,因為工業時代的事物相對簡單。我們慢慢在步入智能時代,物體會從靜態的變為智能動態的。所以,靜態的單向的傳達會逐漸變為動態的雙向的交互。比如原來的靜態的畫面通過顯示設備傳達設計師的意圖,如今還需要考慮到智能系統和交互設備所擁有的能力,根據使用者的不同反應給出反饋。因此,新設計需要考慮的元素會更多更復雜。


          未來已來。

          設計師想要在新的時代迎接挑戰,甚至是拔得頭籌,一方面,可以參考工業革命時期科技對設計的影響來預判未來的變化;另一方面,在新工具產生的時候,設計師與其掙扎糾結而故步自封,不如快速接受新時代的變化,學習新知識和運用好新工具。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷 作者:Z085740511 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合