<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產品的升級與創新?

          seo達人


          一、應用/軟件研發就是單純的敲代碼?

          在我們傳統認知里,應用/軟件研發似乎就是開發者在黑色屏幕前敲代碼。但隨著敏捷研發DevOps理念的發展,現在的應用研發,轉變為了圍繞devops的協作工作流,涉及多樣化的工具和不同人員的協作。研發體驗的核心要素,也從“架構邏輯“向”流程和協作“發展

          圖片

          阿里巴巴應用研發平臺EMAS正是在此背景下誕生的產品。面向全端場景(移動App、H5應用、小程序、Web應用、PC應用等),基于廣泛的云原生技術(Backend as a Service、Serverless、DevOps、低代碼等),為企業、開發者提供應用研發運營管理服務。

          綜上,EMAS做為幫助企業/開發者進行應用研發的技術類SaaS產品,也面臨了全新的機遇與挑戰。

           

          二、設計師如何在技術類產品中破局?

          面對復雜的技術類產品,由于技術的高門檻及業務的復雜性,很多時候設計師都是被動的接受需求。但我們也在思考,設計師如何在技術類產品中破局,如何發揮更大的價值。

          因此,我們嘗試站在更高的全局視角而不是設計的本位視角,主動發現問題提出設計策略,實現設計執行到設計驅動的突破。

          全局視角的主動洞察

          懷著讓設計發揮更大價值的初心,我們深入業務主動邀約產品關鍵角色深入溝通,了解產品歷史背景、技術邏輯及痛點,并發起產品的易用性測試、體驗走查及競品分析等動作,站在全局視角從產品側、用戶側和體驗側多個角度進行深入洞察,形成全面的“產品體檢報告”總結舊版EMAS所存在的問題:

          圖片

          1.產品側洞察——子產品無合力、相互割裂缺乏串聯

          EMAS圍繞應用全生命周期包含12款子產品,卻是各個子產品的拼接,功能獨立零散,未形成一站式研發體驗。各個子產品也是以獨立垂直工具視角建設,缺乏用戶及客戶業務視角。

          2.用戶側洞察——產品價值/能力感知弱、沒有攻占開發者心智

          多數用戶并沒有完全理解產品的價值和能力,EMAS沒有攻占開發者心智。

          3.體驗側洞察——產品易用性差、滿意度低

          通過用戶調研的量表評分,易用性及滿意度評分低,雖然用戶對產品功能能力認可,但對產品使用體驗滿意度差。

           

          三、設計驅動產品創新升級

          基于以上分析,我們與關鍵決策人積極溝通,匯報關鍵問題及設計策略,驅動產品的升級創新,進行EMAS3.0 一站式應用研發平臺的打造。通過咬合3個業務關鍵問題,制定出以下的設計策略:

          圖片

           

          〇 策略一:打造一站式研發體驗

          打造一站式、平臺化研發流程體驗,為客戶提供完整價值閉環。通過一站式獨立控制臺建設,進行構建-測試-發布-運維-運營全鏈路打通串聯。

          1.應用全生命周期協同流程梳理:

          舊版的EMAS是各個子產品的拼接,功能獨立零散,未形成一站式的研發體驗。經數據分析,產品的交叉使用率也非常的低。因此,設計首先從應用全生命周期角度,梳理了不同角色的協作流、任務流,并串聯之前子產品沒有打通的數據流,進行構建-測試-發布-運維-運營全鏈路打通串聯

          圖片

          2.用戶視角的產品架構重構

          并且在舊版的EMAS中,各個子產品是以垂直工具的視角進行建設,每個子產品的架構邏輯都不同,也沒有形成合理的聯動。進一步,設計驅動以用戶視角進行產品的架構重構,以”項目“作為統一頂層邏輯,并兼容技術架構,進行圍繞應用的的管理,形成一站式應用研發全周期流程。

          圖片

          3.一站式獨立控制臺建設

          在產品形態上,形成了以下結構的一站式獨立的Studio框架,讓用戶能夠清晰、流暢的產品體系中進行應用構建。

          圖片

          4.一站式全景產品架構

          最終,EMAS3.0一站式應用研發平臺實現編碼-構建-測試-發布-運維-運營全鏈路的打通串聯。應用阿里云的Real3D能力,打造一站式產品全景3D互動場景,圍繞DevOps協作流串聯各個子產品,形成一站式應用平臺。

          通過流程化研發指引幫助新手開發者快速開啟應用研發流程,也能幫助團隊不同角色成員進行項目全局管理和關鍵指標監控。

          圖片

           

          〇 策略二:品牌建設與產品價值傳遞

          通過品牌建設與開發者心智構建,強化產品價值/能力透傳

          1.增強產品價值/能力透傳設計

          舊版的EMAS試用體驗差,且在首頁、功能初始頁等場景也缺乏產品能力的有效展示與使用引導。因此,我們在多個場域進行產品信息的有效展示及引導,行產品價值/能力透傳的核心場域的典型場景建設,幫助用戶快速感知產品價值。

          圖片

          2.品牌建設,建立用戶心智

          研究競品會發現:大部分競品缺少獨特的品牌語言——用戶很難區分彼此,無法激發用戶對產品的興趣 EMAS希望提供什么樣的形象與感受,現有的視覺設計語言能否讓用戶產生所預設的共鳴?因此差異化的牌語言,能體現EMAS獨有的品牌價值,在用戶心智建立準確的品牌形象。

          首先,我們基于“卡普費雷品牌識別棱鏡”從品牌定位&品牌表現的維度來挖掘產品形象,在個性、文化、形象、關系、體現、外貌6個緯度對品牌進行定位。

          圖片

          明確了“Make smart app”這一產品Slogan,相應確定了產品“智能、高效、敏捷、靈動”的視覺語義,并從從個層面定義Smart,從各設計元素中挖掘smart的特性,來傳達品牌。

          圖片

          通過品牌logo的三角圖形元素貫穿運用到整個產品的 布局、插畫等元素,增加符號化元素的透出率,提升品牌的感知

          圖片
          圖片

          產品形象采用3D Pictogram配上動效,通過材質和光影的變化,更豐富傳達各子產品的特點,體感更強。

          圖片

           

          〇 策略三:易用性改進提升研發效能

          舊版EMAS經過用戶調研的量表評分,產品易用性為6.8分,未達到優秀標準,在整體研發易操作性及易學性等方面存在20+體驗問題。

          圖片

          因此,我們基進行了深入的易用性度量和測試,挖掘出20+體驗問題,除了問題的單點解決外,我們也形成了系統化的解決方案,形成了“一鍵接入”、”流水線編排““跨產品引導”、”場景化開發指引“等易用性策略和范式。最終形成了完善的一站式應用研發設計體系。

          圖片

           

          四、技術類SaaS產品設計方法

          通過以上項目的體系化設計的最佳實踐,我們逐漸總結出一套技術類SaaS產品創新設計方法:基于“產品/技術能力”、“產品價值傳遞”、“使用體驗”及“ARR”四個產品關鍵要素的抽取和分析,明確了“連貫度”、“價值感”、“易用性”、“轉化率”四大開發者體驗原則,進而形成一系列體驗設計要素,指導設計師有章可循的去進行技術類產品的思考和設計工作。

          圖片

          設計師是人與科技間的鏈接者,在數字化變革的浪潮中發揮著重要的作用,通過對用戶、產品、體驗的深度洞察,讓科技逐步普惠化、民主化。

           

          原文地址: 阿里云設計中心(公眾號)

          作者: 阿里云設計中心

          轉載請注明:學UI網》數字化浪潮下,設計師如何驅動技術類SaaS產品的升級與創新?

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

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          設計未來的情感界面

          ui設計分享達人

          推薦 | 科技的不斷發展將給未來的界面設計帶來更多的可能性。復雜的語音界面、先進的 AR 或是真正沉浸式的 VR 都會被實現。而科技的進步也對設計師們提出了新的要求。在更加重視體驗的未來,設計師們應該作出何種創新以應對變化呢?尼克·索薩尼斯曾在其著作《非平面》中寫道:“要走出平面與狹窄,我們需要萬花筒般千變萬化的視角,我們的維度性和不斷變化的能力才得以展現”。希望此文中提供的視角能給設計師們帶來啟發,跳出傳統屏幕的平面來思考未來的界面設計。




          快速摘要:

          當改變來臨,我們總傾向于自然而然地抵制它。我們所擁有的唯一真正的界限,就是我們的大腦告訴我們,事情最好保持原樣。在本文中,Gleb Kuznetsov 分享了他的一些想法和觀點,即在不久的將來,界面會是什么樣子,以及我們能夠期待何種非凡的體驗。關鍵詞:虛擬現實,用戶交互,用戶體驗,用戶界面

          在我們做決策的過程中,情感起著至關重要的作用。一秒鐘的情感便能改變用戶體驗產品的整個現實過程。

          人類是一種由情感驅動的物種。我們選擇一款產品并不是因為它有何意義,而是因為我們認為它能夠給我們帶來何種感受。未來的界面將會在產品設計的基礎上使用情感概念。人們的使用體驗將基于智商 ( IQ ) 和情商 ( EQ ) 。

          本文試圖展望未來,看看未來十年我們將設計什么樣的界面。我們將詳細研究三種交互媒介:

          1. 語音
          2. 增強現實 ( AR )
          3. 虛擬現實 ( VR )

          未來情感界面的實例

          未來的界面將是什么樣子?雖然我們現在還無法回答這個問題,但我們能夠探討未來的界面可能具有哪些特征。在我看來,我確信我們最終會擺脫那些充滿菜單、面板、按鈕的界面,并轉向更加“自然”的界面,即擴展至我們全身范圍的界面。未來的界面不會被限制在物理屏幕中,而是會借助五感的力量。正因如此,它們需要更少的學習曲線①——理想情況下,根本沒有學習曲線。

          ①學習曲線:在一定時間內獲得的技能或知識的速率,文中指面對未來的界面,用戶需要更高效的學習速度,甚至無需學習即可掌握界面的使用方法。

          情商在商業中的重要性

          除了使體驗更加自然并減少學習曲線之外,對產品創造者來說,情感設計還有另一個益處:它提高了用戶對產品的采用率。利用人類對情感的反應能力來創造更好的用戶參與度是可能的。

          具有真實感的語音界面

          使用語音功能作為主要界面交互方式的產品正變得越來越流行。我們之中有很多人使用 Amazon Echo 和 Apple Siri 來安排日?;顒?,例如設置鬧鐘或安排預約。但是,目前市場上可用的語音交互系統中,大多數仍具有一個天然的局限性:它們并沒有將用戶情感考慮在內。結果便是,當用戶與像 Google Now 這樣的產品進行交互時,他們有一種在與機器而不是真人交流的強烈感覺。系統的反應是可預測的,并且它們的響應是腳本化的。與這樣的系統進行有意義的對話是不可能的。

          但是目前市場上也有一些完全不同的系統。其中一個是 Xiaoice( 微軟小冰 ),一個社交聊天應用程序。這個應用程序的核心是情感計算框架;其理念是,首先要與用戶建立一個情感連接。Xiaoice 可以動態識別情緒,并通過給出相應回答的長對話來吸引用戶。結果,當用戶與 Xiaoice 交互時,他們感覺是在與真人進行對話。

          Xiaoice 的局限在于它是一個基于文本的聊天應用程序。很明顯,如果是基于語音的交互,你可以獲得更強烈的感受( 人類的聲音具有不同的特征,例如音調可以傳達出強大的情感 )。



          微軟小冰跨平臺人工智能機器人圖片來源:https://www.msxiaobing.com/

          很多人已經通過電影 《 Her 》( 2013 )看見了基于語音互動的力量。Theodore (由 Joaquin Phoenix 扮演的主角)愛上了 Samantha ( 一個復雜的操作系統 )。這也讓我們相信,未來語音系統的主要目的之一便是成為用戶的虛擬伴侶。這部電影中最有趣的事是 Theodore 從未見過 Samantha 的視覺形象——他只能聽到她的聲音。要建立這種親密關系,必須產生能夠反映出和虛擬伴侶性格一致的回應。這將使系統既可預測又值得信賴。



          電影《Her》海報

          圖片來源:https://movie.douban.com/photos/photo/2166850749/

          要實現像 Samantha 這樣的系統,科技還有很長的路要走。但是我相信,語音優先的多模式界面將是語音驅動界面發展的下一篇章。這樣的界面將使用語音作為主要的交互方式,并在上下文中提供附加信息,以創造和構建連接感。



          為 Brain.ai 設計的語音界面實例 (圖片來源:Gleb Kuznetsov )


          AR 體驗的演變

          增強現實( AR )被定義為在現實世界基礎之上進行的數字疊加,并將我們周圍的物體轉換為交互式數字體驗。我們的環境變得更加“智能”,用戶在指尖產生一種“有形”物體的錯覺,從而在用戶和產品(或內容)間建立更深層次的連接。

          利用AR重構現有概念

          AR 的獨特之處在于它給予我們一種與數字內容進行物理交互的非凡能力。它允許我們看到以前無法看到的東西,這有助于我們更加了解我們周圍的環境。這種AR屬性幫助設計師使用熟悉的概念創造新層次的體驗。

          例如,通過使用移動 AR,可以創造一個全新水平的飛行體驗,它允許乘客看到有關她的班次或當前飛行進程的詳細信息:



          AR 展示空客 A380 的飛行體驗。(圖片來源:Gleb Kuznetsov )

          AR 幫助我們找到穿越空間的方式,并一目了然地獲取所需要的信息。例如,AR 可以為你當前的位置創建豐富的提示。SLAM 技術②在這方面有著出色的表現。SLAM 允許環境的實時映射,并能將多媒體內容置入環境中。

          ②SLAM 技術:( Simultaneous Localization And Mapping ) 同時定位與地圖構建技術,指機器人在未知環境中從一個未知位置開始移動,在移動過程中根據位置估計和地圖進行自身定位,同時在自身定位的基礎上建造增量式地圖,實現機器人的自主定位和導航。

          AR 有很多機會為用戶創造價值。例如,用戶可以將他們的設備對準建筑物,并在屏幕上了解該建筑的更多信息。它能夠顯著減少工作量,并通過導航和訪問功能使用戶獲得輕松的情感體驗。



          在環境中提供附加信息( 圖片來源:Gleb Kuznetsov )

          我們周圍的環境(例如墻壁或地板)也能成為交互的場景,在過去這僅限于通過智能手機和電腦實現。

          下面的概念正是如此,它使用物理對象(白墻)作為畫布,來表現那些通常用數字設備來傳達的內容:



          互動墻的概念——現實世界之上的數字疊加(圖片來源:Gleb Kuznetsov )

          避免信息過載

          在一個名為 “HYPER-REALITY”( 超真實 )的一個網站中,作者 Keiichi Matsuda 制作了一段視頻。視頻中物理世界和數字世界已經合并,用戶被大量信息淹沒。

          視頻:

          https://www.youtube.com/watch?v=YJg02ivYzSs&feature=youtu.be

          科技允許我們同時顯示幾個不同的對象。但是當它被誤用時,很容易造成過載。

          信息過載是一個嚴重的問題,它會對用戶體驗產生負面的影響。避免信息過載將成為 AR 設計的目標之一。設計良好的應用程序會借助 AI 的力量將那些與用戶無關的元素過濾掉。

          高級個性化

          當系統根據用戶的需求和期望來實時管理內容和功能時,數字體驗的個性化便會發生。很多現代移動應用程序和網站使用個性化的概念來提供相關的內容。例如,當你瀏覽 Netflix 時,你看見的電影列表都是基于你的興趣進行個性化推薦的。

          AR 眼鏡能夠創建新的個性化水平,即“高級的”個性化水平。由于系統能“看見”用戶所看見的內容,因此可以利用這一信息來提出相關建議,或在環境中提供附加信息。想象一下,你很快就將戴上 AR 眼鏡,并且傳輸到你視網膜的信息是根據你的需求量身定制的。

          視頻:

          https://www.youtube.com/watch?v=eQ2OKB026Wc&feature=youtu.be

          從增強現實走向虛擬現實,創造沉浸式體驗

          AR 體驗具有天然局限性。作為用戶,我們與內容之間有一條明晰的界線,這條線將一個世界( AR )與另一個世界(現實世界)分離開。這條線讓人感覺 AR 世界顯然不是真實的。

          你可能知道如何去解決這一限制,即使用虛擬現實( VR )。當然,VR 確切來說不是一種新媒介,但直到最近幾年,科技才達到能讓設計師們創造沉浸體驗的高度。

          沉浸式 VR 體驗移除了真實世界與數字世界間的屏障。當你戴上 VR 耳機時,你的大腦很難分析出你接收到的信息是否真實。電影《 頭號玩家 》( Ready Player One )很好地解釋了在不久的將來,VR 體驗會是什么樣子:

          視頻:

          https://www.youtube.com/watch?v=cSp1dM2Vj48&feature=youtu.be

          以下是設計師們在創造沉浸式虛擬環境時需要記住的幾點:

          1.寫一個故事有意義的 VR 在其核心有一個強大的故事。這就是為什么在你開始設計 VR 環境之前,你需要為用戶旅程寫一個故事?!肮适掳濉边@一強大工具可以幫助你完成這一工作。使用故事板,可以創造一個故事,并檢查所有可能的結果。當你檢查你的故事時,你將看到何時以及如何利用視覺及聽覺線索來創造沉浸式體驗。

          2.與角色建立更深層次的連接為了使用戶相信 VR 世界中他們周圍的一切都是真實的,我們需要在用戶與其扮演的角色間建立聯系。最明顯的解決方案之一是,使用戶的手部表現成為虛擬場景中的一部分。這一表現應該是實際的手——而不僅僅是一個被操縱的復制品。考慮不同的因素(例如性別或膚色)是至關重要的,因為這讓交互更加真實。



          用戶可以看到他或她的手,并看到自己作為一個角色出現(來源:leapmotion )

          為了建立此連接,也可以將現實生活中的物品帶到 VR 環境中。例如,一面鏡子。當用戶看向鏡子并看到其反射出他們自己的角色時,用戶和虛擬角色間的交互會更加真實。



          VR 用戶看向虛擬的鏡子,并在 VR 環境中看到他自己的角色。致謝:businesswire

          3.使用手勢代替菜單

          當設計沉浸式 VR 體驗時,我們不能依賴傳統的菜單和按鈕。為什么呢?因為顯示菜單比較容易打破沉浸感。用戶將會知道他們周圍的一切都不真實。設計師們需要依靠手勢來替代傳統菜單。設計界依然在為手勢的使用制定通用語言,參與這項活動是有趣且令人興奮的。但棘手的部分是如何設計出用戶熟悉且可預測的手勢。



          Hovercast VR menu 是將現有的交互概念重新用在 VR 體驗的一次嘗試。不幸的是,這個概念會打破沉浸感。新的媒介需要一個新的交互模式。

          4.與 VR 環境中的元素交互

          為了創造一個真實的環境,我們需要使用戶能夠與現實中的物體進行交互。理想情況下,環境中的所有物體都可以被設計成允許用戶觸摸和觀察它們的模式。這樣的物體會起到刺激作用,并幫助你創造更具沉浸感的體驗。觸摸對于探索環境非常重要,嬰兒在剛出生的那些天接收到的最重要的信息便是通過觸摸獲得的。

          5.在 VR 中分享情感

          VR 真正有機會實現社交體驗的新高度。但為了實現它,我們需要解決一個重要問題,即將非語言的提示帶入交互中。

          當我們與他人進行交互時,我們獲得的信息中有很重要一部分來自肢體語言。驚喜、厭惡、憤怒——所有這些情緒都在我們的面部表情中。在面對面的交互過程中,我們通過眼睛的區域來推斷信息。當人們在 VR 環境中互動時,為了創造更加真實的交互,提供此信息是非常重要的。

          好消息是,頭戴式設備( HMD )很快就將涵蓋情感識別。在虛擬現實中,幾乎所有人與人之間的互動都受益于面部表情。



          在 VR 空間中分享情感(來源:MITReview 的 Rachel Metz )

          6.為 VR 環境設計合適的音效和音樂

          音頻是沉浸式體驗中的重要組成部分。如果不為環境設計音效,就不可能創造出真正的沉浸體驗。聲音既可以被當作背景元素(即環境中風的聲音),也可以是指向性的。在后一種情況中,聲音可以作為提示使用——通過播放具有方向性(聲音來自哪里)和距離(可以將用戶注意力集中在特定元素上)的聲音來提示用戶。

          在為 VR 設計音頻時,制作 3D 音效是基礎。2D 音效 VR 中表現不佳,因為它讓一切都顯得太平。3D 音效可以使你聽到來自四面八方的聲音——前、后、上、下——任何地方。你不需要使用專門的耳機來體驗3D音效,通過頭戴式設備的標準立體揚聲器便可以實現。

          頭部追蹤是良好聲音設計的另一個重要方面。讓聲音以逼真的方式表現是至關重要的。這就是為什么當用戶移動他的頭部時,聲音應該根據頭部移動而改變。

          7.預防暈動癥

          暈動癥是 VR 的主要痛點之一。在這種情況下,視覺感知的運動與前庭系統③的運動感知之間存在分歧。在體驗VR的過程中,使用戶保持舒適是至關重要的。

          ③前庭系統:前庭系統是人體平衡系統的重要組成部分,它具有特殊的感受器,能夠接受適宜的刺激,經過與其他感覺信息(如視覺信息、其它本體覺信息)的整合、加工等處理后,再經多條神經通路把這些信息傳送到腦內更高層次的中樞,進行高層次的加工處理。

          關于VR中導致暈動癥的原因,以下是兩種主流理論:

          • “感覺沖突”理論

          根據這一理論,暈動癥的發生是由于預期運動與實際經歷的運動在感官上不一致。

          • “眼動”理論

          在《 The VR Book: Human-Centered Design For Virtual Reality 》一書中,作者 Jason Jerald 提到,暈動癥的發生是由于眼球的非自然運動,而這是保持場景圖像在視網膜上穩定所必需的。

          以下是一些提示,有助于避免用戶使用嘔吐袋(避免暈動癥的發生):

          • 身體運動應該與視覺運動相匹配。有時即便是很小的視覺抖動也會對體驗造成巨大的負面影響。
          • 讓用戶在切換場景時休息(當 VR 體驗真正呈動態時,這一點尤為重要)。
          • 減少虛擬旋轉

          結論

          當我們考慮產品設計的當前狀態時,很明顯我們僅看見冰山一角,因為我們局限于平面屏幕。我們正目睹人機交互( HCI )的根本轉變——重新思考數字化體驗的整體概念。在接下來的十年中,設計師們將打破這層玻璃(我們今天所知的移動設備時代)并轉向未來的界面——復雜的語音界面、先進的 AR 和真正沉浸式的 VR。當創造新的體驗時必須要明白,我們唯一的界限是我們的大腦總告訴我們,應該保持原樣。


          原文標題:Designing Emotional Interfaces Of The Future

          原創作者:january

          原文鏈接:https://www.smashingmagazine.com/2019/01/designing-emotional-interfaces-future/

          翻譯作者:阿欽

          授權獲?。簭堩餐?/span>

          文章審核:王翎旭

          文章編輯:王鴻飛

          該譯文并非完整原文,內容已做部分調整。如在閱讀過程中發現錯誤與疏漏之處,歡迎不吝指出。如需轉載,請注明來自 三分設

          作者:三分設  來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系。 



          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



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

          色彩趨勢淺顯總結

          純純

          四個色彩趨勢:霓虹漸變、輕量漸變、高飽和度色系、夢幻色/幻彩色系。從現實圖庫入手,總結出該色彩趨勢對應的關鍵詞以及色彩特征。對部分案例進行了解析,更深入地了解其運用方向以及實現技巧。希望這些內容可以起到拋磚引玉的作用,歡迎大家探討。(圖片來源于網絡,原作者可提供原圖鏈接進行標注)



          一、霓虹漸變


          現實生活中,炫彩奪目的霓虹燈效果常被應用于廣告牌、燈箱的展示中,在暗夜的烘托下,霓虹燈展現出光影陸離的光影效果,吸引著人們的眼球,留下強烈的視覺沖擊。如圖所示,暗夜中的霓虹燈效果,為霓虹漸變的現實靈感來源。

          夜色下的霓虹燈


          關鍵詞

          undefined


          霓虹色特點總結

          1、以紫色、藍色、洋紅為主的冷暖色搭配;

          2、整體顏色對比度高;

          3、以冷色調為主,局部暖色調,搭配霓虹光感對比色點綴;

          4、背景用暗色調更能凸顯霓虹效果;

          5、根據霓虹燈的靈感,采用了霓虹燈發光的效果。



          近年來,強視覺沖擊的漸變色被廣泛應用在各個領域,包括宣傳海報、綜藝節目、游戲等等,其中最為矚目的是霓虹漸變,設計師通過將這種高飽和度的漸變色與暗色調背景結合,形成強烈的視覺沖擊,突出主體,渲染氛圍,使整個畫面的色調更加活力化、年輕化。


          01 娛樂案例

          最近較火的綜藝節目“這就是街舞”,其宣傳海報通過高飽和度的霓虹色漸變,與人物及背景形成強明暗對比,結合對人物本身的光影細節刻畫,突出人物主體,增強畫面視覺沖擊力。


          02 游戲案例

          2020年7月,由Veewo Games發布的一款游戲「霓虹深淵」,畫面以紫色、藍色、洋紅的冷暖色搭配為主基調,通過明暗色的對比,以及大面積的紫色光影渲染氛圍,營造出極強的未來科技感,而霓虹光感的使用以及涂鴉風格的融入,使得游戲更加時尚、自由。



          01 專題頁

          頁面整體以紫色,藍色,洋紅為主,冷暖色搭配,營造出層次感,活潑生動且年輕化;偏暗色調的霓虹漸變色背景烘托出專題頁的內容主體,使得頁面運營氛圍更好、更強;同時在一些重要的、需要用戶操作點擊的部分使用了暖色調的霓虹色漸變,使得內容主體在冷色調的環境下更為突出,提高了用戶體驗。


          02 App

          以暗色調背景作為烘托,搭配紫色、藍色、洋紅為主的冷暖色,是霓虹色漸變經典的應用方式。在暗色背景下運用霓虹色漸變,通過明暗的強對比突出頁面關鍵元素,對用戶進行視覺引導,同時豐富頁面層次,增強頁面的視覺沖擊力及藝術感染力。


          03 Web

          暗色的背景與撞色霓虹搭配的插畫手法使得界面看起來更加的酷炫和高科技,整體頁面在霓虹色漸變的使用下更富層次性。通過主體與環境色的呼應、冷暖明暗的對比,展現出主體光源對空間層級的變化效果。此組合用來作為web頭部頁面,沖擊感十足,科技感也非常的棒。


          04 Icon

          通過高飽和度的霓虹漸變色彩,結合外發光、疊加、模糊等多種技法,塑造出更加豐富的光影效果,不僅增強圖標視覺表現力及空間感,更凸顯了圖標的風格化與趣味性。暗色調背景的烘托,使霓虹色漸變圖標更加有質感,更加突顯。


          05 插畫

          通過大面積的霓虹色漸變結合迷彩漸變的繪制手法,構建不同色彩鮮明的矩形圖案,暗色調的背景烘托與顏色用冷色為主暖色為輔、點綴,畫面感極強,極具視覺沖擊力。



          霓虹色漸變在暗色調的背景烘托下,撞色的沖擊感使得畫面更加具有科技感、潮流感;對于霓虹色漸變使用比較頻繁的賽博朋克風、故障風,也是現下較為流行的風格,通過豐富鮮明的色彩與背景作強對比,營造出極具視覺沖擊力的畫面效果;同時霓虹漸變色也被廣泛的使用于app、web、插畫等領域,雖然它出現已久,但其大膽、強烈的配色風格給畫面帶來的沖擊感以及潮流、自由感,使得它仍然成為當下一種比較流行的色彩趨勢。



          二、輕量漸變


          通過對2021年色彩趨勢分析發現,漸變色的運用仍然非常流行。相較之前運用較多的強視覺沖擊類——對比色漸變,輕量漸變在色彩運用上變得更加理性與克制。主要特征為輕量、柔和、層次遞進,營造一種舒緩、治愈的沉浸感。



          色彩上的漸變是指某個物體的顏色從明到暗,或由深轉淺,或是從一個色彩緩慢過渡到另一個色彩,充滿變幻無窮的神秘浪漫氣息的顏色。根據強弱程度分類,漸變主要分為強漸變和弱漸變,輕量漸變屬于弱漸變范疇。在過渡的過程中,輕量漸變特點為漸變色彩鄰近,幅度輕柔,節奏緩慢,融合感和細膩感較強。


          關鍵詞


          輕量漸變特點總結

          輕量漸變是一種簡約且高度可用的元素,它可以創造出一些時尚的氛圍,但是又不會有信息過載的擔憂,這使得輕量漸變成為一種富有感染力又非常實用的設計解決方案。輕量漸變特點之一為明度高、飽和度低,色彩輕量而透氣。在輕量漸變的使用過程中,同色系、鄰近色系較多,其過渡自然柔和。



          01 毛玻璃案例

          透過今年各大設計網站上的作品不難發現,較多的視覺設計師將輕量漸變的色彩趨勢與毛玻璃的質感趨勢結合,運用在界面中。下圖畫面中,輕量漸變的柔和屬性搭配上毛玻璃的朦朧感,營造一種視覺感官的舒適感與呼吸感,已成為2021年UI界面設計趨勢之一。


          02 3D案例

          當輕量漸變與3D碰撞時,則會產生更加趣味的視覺化學反應。畫面中使用的3D效果可以最大限度還原現實世界的材質與光效,呈現極具腦洞的“超現實”效果,為用戶呈現不可思議的異度空間,吸引用戶眼球。畫面中的背景使用了輕量漸變來創建出多彩的模糊背景,為3D素材創造出另類維度的空間感,增加了畫面深度,使設計更具真實感。



          01 首頁Icon

          自如app最新的首頁風格采用輕量漸變+毛玻璃效果,金剛區應用最為明顯。圖標的色彩選用低飽和鄰近色,遵循3色系原則,使得整體色彩統一且不失豐富。從單個圖標看,色塊部分采用單色漸變,通過easing gradient插件工具調整漸變值,以達到最佳效果。毛玻璃特有的通透感,會將漸變色塊透映出來,故制作毛玻璃效果時,需添加環境色使其融合。


          02 啟動頁

          兩個啟動頁中均采用高明度、低飽和度外加一些毛玻璃微透質感的表現手法。第一個界面主要傳達安全、簡潔、可靠的情感,第二個界面則表現的是活動主題的夢幻感。這兩個頁面雖目的不同,但卻均體現了柔和、細膩、輕量感的視覺感。設計師發現,使用者在經歷過傳統大色塊、大面積、較強沖擊力漸變的視覺后往往更加想追尋視覺上的寧靜,所以視覺負擔相對較小、相對輕量的微漸變色彩和可以利用微透質感減弱色彩沖擊力的毛玻璃相結合的視覺效果越來越多地被運用。


          03 界面背景

          在界面背景中,使用少量的鄰近色漸變來做通欄背景,使整體氛圍更加柔和、富于層次感,同時起到強調頭部的作用??ㄆ幉捎猛该髅AЧ妹A赜械耐ㄍ父?,透映出底部漸變,使卡片兼具質感與美感。


          04 彩色化卡片

          卡片中采用同色系的輕量漸變效果,營造融合、舒適的視覺觀感??ㄆ念伾鶕是榫w進行選取,增加辨識度,進而增加點擊率。



          漸變之所以每隔幾年就會成為設計流行趨勢,很大程度上得益于它自然的特征和普遍的吸引力。今年盛行的輕量漸變,更多從用戶的角度出發:減輕界面給用戶帶來的視覺負擔,為其提供更輕盈的視覺體驗。在應用的過程中,輕量漸變與毛玻璃、3D等流行表現形式相結合,可創造出全新的、有趣的視覺體驗,不僅在外觀上起到美化的作用,在功能上也達到了強調、醒目的作用。



          三、高飽和度色系



          在過去的兩年中,高飽和度色系的應用已經是重要的趨勢之一。年輕人作為移動互聯網的主力軍,他們青春,活力,有朝氣,因此,代表年輕活力群體的鮮艷,高飽和度色彩成為視覺主流趨勢之一。偏高飽和度色彩更易吸引注意力,烘托主體,影響用戶情緒,提高品牌的識別性,增強品牌影響力。


          關鍵詞


          高飽和度色系特點總結

          1、顏色飽和度高,艷麗;

          2、色彩豐富多樣;

          3、視覺沖擊力強;

          雖然高飽和色彩視覺沖擊力強、更容易傳遞情緒,但在使用時仍需克制使用。原因在于:1.過高的飽和度,容易產生視覺疲勞;2.高飽和度的顏色并不適合所有的用戶群體。

          這里說的高飽和度的顏色,并不是一味追求高飽和刺激性顏色,我們在使用時候,仍需對顏色的明度,飽和度進行合理設置,這樣才能保證我們視覺上的舒適性。



          綜藝海報案例

          在綜藝海報中,高飽和度的半插畫+實物的表現形式,讓畫面極具趣味性和視覺吸引力,獲取了大批流量。



          01 產品品牌色

          偏高飽和度的色彩,在UI設計應用中,往往更容易脫穎而出。而一些品牌的品牌色往往就是偏高飽和度的顏色,比如UI設計中品牌色的運用,在一定程度上可以將品牌影響力擴大化,品牌影響力,也會讓用戶增加信任感。

          例如,微信的綠色,餓了么的藍色,美團的黃色,淘寶的橙色......等等這些品牌色,都深入人心。

          高飽和度品牌色


          02  運營色

          活動營銷類彈窗,以及運營類的H5,運營專題,促銷類的BANNER中經常運用高飽和色的視覺刺激以達到強調、引流的作用。



          高飽和度色系以其絢麗、強視覺沖擊力等特點,在UI設計中一直被廣泛的應用。它可以更好的營造氛圍、傳遞情緒、增強視覺層次結構、提高品牌的可識別性。撞色、插畫+半實物、手繪等各種新式流行的表現手法使得高飽和色的運用上更加豐富多樣。



          四、夢幻色/幻彩色


           

          廣義上,我們將富于想象力的色彩,或者說體現人生豐富多姿的色彩稱之為“夢幻色彩”,像泡沫、像天使、 像夢境、像糖果...


          關鍵詞


          夢幻色/幻彩色特點總結

          夢幻色在顏色面板中處于中間偏上部分,即特點為中純度、高明度。

          配色方面和諧,視覺效果相對溫暖柔和。常以簡單、干凈的背景為襯托,烘托主體物以及主色調。色彩場景偏向幻想、天馬行空的自由世界,給人以浪漫的色彩感受,容易令人沉浸在畫面的溫暖氛圍中。



          現今,色彩作為重要的視覺語言而被越來越多的設計師所關注,而在實際設計作品輸出當中,顏色也扮演著將產品理念傳遞給用戶的媒介?色??梢?,完整的設計作品是離不開色彩的表現的,那么了解色彩趨勢就會顯得尤為重要。而在眾多顏色中的夢幻色,更是極具前沿性和突出感的色彩。


          糖果色插畫案例

          色彩傾向明快輕量,采用顏色烘托主題的表達方式,較能抓住用戶眼球。塑造了色彩多變的視覺風格,適用于多種品牌調性,給用戶溫暖、輕松且煥然一新的感覺。


          絢麗配色案例

          在下圖插畫案例2-絢麗配色中,能發現絢麗配色類插畫通過光的運用,讓畫面呈現出細節更豐富的視覺效果。 一些光暈的重疊使用,使得畫面變得朦朧,更顯夢幻特點。另外,夢幻色還可以營造神秘的氛圍,在網站首頁使用的夢幻色彩,搭配引人入勝的畫面,神秘感的體現更加突出。吸引用戶的點擊,從?提升?站的瀏覽量,實現流量變現。


          材質案例

          在材質-塑料質感中,大面積的夢幻色彩漸變,形成很強的視覺沖擊。塑料的質感配合燈光與彩色漸變,顯得非常夢幻;透明的氣泡材質,整體質感給?輕盈、透亮。這種流動的色彩呈現出了源源不斷、生命不息的美好愿景,帶給觀者美好的想象。



          01 3D物體

          夢幻色應用于3D物體中,整個畫面更加豐富多彩,溫暖、輕松氛圍下的物體仿佛將從屏幕的束縛中掙脫出來,拉近了畫面與觀者之間的距離。


          02 手繪插畫

          這是一組描繪田野間的手繪插畫,為觀者提供感觀上的愉悅。一切事物在自然中的蓬勃生長以及夢幻色下烘托出的神秘感,使得整體畫面有種超脫現實、游離人生的美感。形成了以自然景觀為主導的唯美風格。


          03 App




          雖然夢幻色沒有特別靚麗奪目的色彩特點,但在夢幻色的使用中所烘托出的特定氛圍,不但突出了不同產品的特點,也更加滿足了用戶的情感需求。色彩趨勢必然與時代潮流以及用戶喜好緊密結合,作為設計師的我們需要了解,并能與我們的設計產出進行結合。



          結語


          日新月異的生活是色彩趨勢的靈感來源,這使得色彩的流行趨勢不斷更新變化著。作為設計師的我們,要保持一顆敏銳的心,不斷從現實生活中捕捉靈感,將自然賦予我們的寶貴靈感運用于作品中,從而增強設計的原創性,給設計行業注入新鮮血液。其次,趨勢是方向,不能盲目追隨,需要不斷思考總結沉淀升華,并將其合理運用至自己的作品或項目中。設計就是在實踐中不斷探索與總結!這是我們寫這篇文章的初衷,最后也歡迎大家積極探討。


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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 
          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          設計思維中的共通性和差異性

          純純

          “ 設計思維是一種以人為本的創新方法,它借鑒了設計師的工具包,整合了人們的需求,技術的可能性以及商業成功的要求。” 


          設計思維

          關于設計思維的文章我們也看過不少,也聽過大佬們講什么是設計思維,可都停滯于帶我們了解初識階段,并沒有教到我們怎么去踐行設計思維。設計思維 (Design Thinking) 是一種設計方法,提供基于解決方案的方法來解決問題。解決方案是什么?究竟要解決什么問題?如何去解決?在參考了大量的文獻后,更多的是在闡述設計思維是什么,具體的分類和步驟,更偏向于介紹和展示相關的知識。比如 Google 的 Design Sprint 方法論,比如 IDEO 首席執行官 Tim Brown 提出的可行性三原則,比如斯坦福大學哈斯普拉特納設計學院(d.school)提出的五階段設計思維模型,而根據 d.school 提出的五階段設計思維模型,大部分公司都基于這個模型進行變量修改后作為自己的設計思維模式,這五階段設計思維模型為:同理心 (Empathise) - 定義 (Define) - 假設 (Ideate) - 原型(Prototype) -測試 (Test) ,幾乎大部分的設計思維都基于這五階段模型做的改變。



          用同理心代入 (Derivation) 定義,用同理心建立 (Build) 原型,通過原型反推 (Reverse) 原型的成立,最后用測試結果證實 (Validate) 定義的正確性。

          現在對設計思維有了大致的認識,這里也不花太多篇幅去描述,但是全部看下來感覺自己腦袋暈乎乎的,那究竟我們在具體的工作學習中,要如何嘗試性代入且應用設計思維來做設計呢?通過一些項目的經驗我總結出關于如何運用設計思維做設計的方法,就是通過尋找產品之間的共通性和異樣性,深挖出關鍵性的問題所在,最后去解決這個關鍵性問題。



          共通性與共同性

          共通性和共同性在意義上有根本的區別,共通性是指相通或者適用于各方面的東西,比如共通的道理,共通的方法;共同性則是指彼此都具有相同的性質,比如大家共同的目標,共同的性格;產品與產品之間也是有共通性和共同性的,只有找準產品的共通性,才能深度挖掘到核心問題的所在,從而通過設計手段解決核心問題。

          與同類競品分析不同的是,競品分析需要通過大量且快速的對比找到各類產品之間的共同處和差異處,而尋找產品的共通性,則需要對逐個產品進行深度剖析,挖掘共通的點 (Point),然后把這個點透過三原則:可行性(Feasibility),可取性 (Preferability) 和創新性 (Innovativeness)分析來設計產品解決問題。一款產品或者某個功能模塊,只有在可行性和可取性中產生交集時,才可以在此之上進行創新設計,可行性可以理解為開發可實現,或者和業務需求沒有沖突的模塊,可取性是指性質上可以取用。



          舉一個簡單的例子,某個模塊希望通過彈窗的形式提升某二級頁面的跳轉率,那么提煉出業務訴求關鍵點:

          1. 1.提升二級頁面的跳轉率;

          2. 2.通過彈窗的形式展現;

          那么可取性就是【彈窗】這個 Piont,而可行性同樣為彈窗形式,那么他們共同的交集之處就是彈窗頂部的氛圍層和行動點,設計師就可以在這兩個交集處做自己的創意發散,比如在彈窗頭部氛圍做的很強烈吸引用戶,或者把行動點設計成帶有動效的按鈕以此來吸引用戶點擊等等。產品設計中通過共通性挖掘問題,而承諾和顧客的體驗達成共同相通,這是為了贏得用戶信任和尊重的需要。


          產品的共通性

          做產品第一步就是找出同類競品之間共同之處,把他們共同的地方記錄下來并做出統計。比如我需要做一個關于 UGC(用戶原創內容)的內容社區,那么我前期得搜集同類競品,比如 MONO、新草、Lofter等等,找出他們共同的地方。首先來解釋為什么要尋找共同的地方,根據模塊出現的頻率排列出模塊的優先級,這是一款產品從零到一必須要經歷的階段,但往往很多產品到這一步就停止了,然后像堆磚砌瓦一樣,它有的我 Duang 地加上去,另一個它有的我也要 Duang 地加上去,我全都要!最后導致產品做出來架構不清晰,目標不明確。這就是為什么老有設計師疑惑:為啥總是左改一版右改一版業務方/老板就是不滿意,這在戰略層就出現了的問題,跳到執行層上改來改去,肯定怎么改都不會有一個滿意的結果。這時候就需要將搜集到共同的地方做分析,找出它們各自存在的性質,然后挖掘產品的共通性。



          通過各類競品搜集下來可以看出關于社區模塊的內容大致分列為:話題標題占比18%,統計信息占比18%,話題說明占比16%,心智氛圍占比8%,內容分級占比4%以及其他內容填充占比36%,具體歸類成A.標題&統計、B.話題說明、C.心智氛圍、D.分級信息和 E.其他信息,然后排列優先級順序為:A>B>C>D>E,最后一步就是分析各自獨有的性質:


          A.標題&統計信息:話題標題和統計信息屬于必要模塊,標題顯示話題主題,統計信息展示話題關注度等信息,增強話題氛圍;


          B.話題說明:是對話題進行的補充說明,也可增設相關活動等文案;


          C.心智氛圍:心智氛圍的增設用于對話題主題的傳達以及突出用戶的參與感;


          D.分級信息:分級信息對用戶的篩選起到至關重要的作用;


          E.其他信息:其他信息皆為用戶提供UGC或者平臺提供PGC。


          而這類性質可以統稱為社區類模塊產品的共通性,提煉出產品的共通性有什么用呢?如果一個社區類產品上線后發現用戶參與感熱度不是很強,那么就可以從心智氛圍模塊去分析是否問題出在這里,是否應該加強話題的心智氛圍,或者是否可以通過投資邀請專業的人士通過生產 PGC 來帶動社區的熱度等等,只有先去了解產品之間的共通性,然后找出關鍵點提煉出關鍵問題,在戰略上提出解決方案,才能從根本上解決產品問題。



          就好比一個人捂著肚子沖進診所,醫生首先了解捂著肚子的性質,是闌尾炎?是胃痛?還是其他的疾病,只有先熟悉各類疾病的性質原因后,通過排查篩選找出根本的原因,才能提出是做手術還是藥物治療的解決方案;同理,回到之前的那個問題:為啥總是左改一版右改一版業務方/老板就是不滿意,都沒查出究竟是什么原因導致肚子痛,就開始開刀手術或者胡亂吃藥,運氣好了胡亂吃藥吃對了解決了,運氣不好被折騰涼了,最后的結果就是產品模塊下架撤離,所以無論是從零到一的產品還是業務改版,都需要找到產品之間的共通性,才能找出具體的解決方案。


          設計細節的共通性

          我們不難發現市場上很多出自于同一業務下的產品都有著自己的設計細節,而在這些母艦上都有著各個模塊的附屬模塊,比如在QQ產品里的興趣部落、NOW直播、微視等模塊,比如在淘寶產品里的天貓、聚劃算、飛豬等模塊,那么在這些母艦下的附屬模塊,在設計細節上自然而然要和母艦保持一致性。舉個很明顯的例子:手淘設計語言中卡片的圓角為24px,手貓設計語言中卡片的圓角為10px(基于750px尺寸下),那么手貓其中的模塊自然是要遵循手貓的設計語言——圓角的尺寸為10px,但是如果這個模塊獲取到手淘透出的資源,那么在設計上,就要遵守手淘的設計語言——圓角尺寸為24px。



          那么你會問了,這樣最多只是相同啊,有什么性質意義呢?這和共通性又有什么關系?不同的產品所面向的用戶群體是不一樣的,所以主打心智也不一樣,設計上的細節傳達給用戶的心智一樣的不同。眾所周知,淘寶主要面向的用戶群體是大眾的,天貓主要面向的用戶群體是追求更高質量或者品牌的,那么在細節上,24px的圓角卡片帶給用戶的心智是友好親切的,10px的圓角卡片帶給用戶的心智是偏向更精致更高質感的;其次,如果用戶通過手淘的場景進入天貓的模塊,一會兒24px的圓角一會兒10px的圓角,長時間下去用戶自然會分不清當前場景是天貓還是淘寶,這是在產品一致性上做的共通性協調工作。所以如果是同類系的產品或者是模塊,在設計細節上一定要注意,保持模塊與模塊之間的共通性。(有的人可能不會注意到這些設計細節,設計細節既然是細節,個體本身影響力不是很大,很容易造成忽視,但是如果個體增多形成量級的話,造成的視覺影響是很直觀的



          差異性

          差異化策略是從改變產品的“絕對差異化”到改變認知的“相對差異化”,越來越著眼于“人”的視角。在如今發展迅猛的網絡營銷時代,“人”的因素更是被置于產品運營和品牌營銷的核心位置,不過,這并非表明“定位”理論變得越來越重要了。這點做品牌的朋友相信有更多的感觸,但是無論你是做產品的,還是做品牌的,要想脫穎而出,首要的策略就是“差異化”。大家都知道平臺產品的最終目的是實現商業價值,可是如何實現商業價值,就是要通過產品之間的差異化來尋求突破點。



          產品的差異性

          依舊拿上面那個社區產品當例子,同類對比我們發現,大多數的社區產品更多的是流量引進來營造平臺氛圍,無論是通過 PGC 的形式還是對內容的打造,但是在商業價值化層面上則很少有渠道介入。那要如何通過設計表達出差異化并且實現商業價值,就需要對實現商業價值有一定的了解。當社區把流量引進時,實現商業價值常見的幾種方式有:

          1. 1.廣告宣傳的推廣;

          2. 2.電商平臺的轉化;

          3. 3.流量引導產品模塊的介入等等。

          以電商產品舉例,我這個社區模塊將流量引進后,需要致使用戶通過 UGC 或者 PGC 種草的內容去購買所對應的種草商品,知名的社區電商產品的確也是這樣做的,比如小紅書、Lips等等,但是不難發現此類產品都有一個共同的弊端:用戶需要先記住種草商品的內容后,自行去購買采購商品,這樣可能就去了淘寶、京東等等更加知名的電商平臺,最后為他人做了嫁衣,那么這一塊就是關鍵突破點。



          通過尋找差異性找出關鍵突破點問題所在,并推導出相關的設計策略:平臺可以通過招商的形式發布社區話題,并且可以通過“參與話題送 xx 額度的優惠券”、“參與話題并分享給好友獲取 xx 限量商品”等形式刺激用戶參與話題,并且也給用戶很方便的渠道入口直接進行商品購買,防止流量丟失為他人做嫁衣;商家通過入駐平臺提供話題,平臺流量導入參與話題,商家通過參與話題給予優惠等活動引導用戶購物,用戶通過平臺參與話題了解品牌獲取參與感;類似線下商場搞一些活動,品牌店給一些優惠券之類的當作參與活動的獎勵,然后客人可以去到品牌店消費,最終實現三方獲利的商業閉環!

          不難發現,通過尋找產品之間的差異性來挖掘出關鍵點問題,然后在此基礎上解決問題做出創新。追求差異化,是產品基于競爭角度永恒的主題。這種差異化甚至貫穿了產品生命不斷迭代的全程,也貫穿在與品牌相關的一切要素中——產品、包裝、廣告、價格、渠道、視覺、代言人等等,每種要讀的動態演變,都是一種創新,具體需要那種要素在哪些時刻做出何種改變,既要考慮到競爭,也要敏銳覺察用戶的需求、態度和行為的變化趨向。


          設計細節的差異性

          設計細節用共通性同樣也有差異性,而細節的差異性有時候往往能起到產品的關鍵性作用。這里使用之前做的一個實際項目做例子:淘搶購模塊 v4.0.1的改版。(保密性原則不透露任何數據)因為淘搶購 v3.9樣式太過老舊,根據手淘語言更新的淘搶購 v4.0在投放過程中發現,成交量和成交率比 v3.9降低了很多,所以在 v4.0.1的改版中最主要的是解決這個問題。



          根據用戶采樣調研數據分析我們篩查和對比發現,成交量和成交率下降的根本原因是用戶在頁面丟失,而用戶丟失的原因則是因為淘搶購 v3.9首屏的 Sublist 商品坑位的透出比 v4.0首屏的 Sublist 商品坑位多出一個,對的你沒看錯,就是因為這么一個商品坑位的細節原因,導致 v4.0的成交量和成交率比 v3.9降低了很多,以至于引起重視從而需要解決問題。



          找出關鍵問題后就要去解決問題,那么如何解決問題是關鍵。此處需要保證在不改變新版設計語言的基礎上對首屏 Sublist 的坑位透出做調整,那么只需要坑位透出3.5~4個坑位就能到達預期的效果,如何在有限的空間里解決這個問題,做了很多版本的嘗試。



          通過各類嘗試得出ABCDEF六種方案后,這時候需要從設計細節的差異性逐一分析然后進行取舍:


          A.此方案為目前 v4.0實行方案,可以明顯看出單屏的效率只能展示3個商品坑位,因此是造成用戶在瀏覽的過程中會流失的根本原因;


          B.此方案計與 v3.9通欄無太大差異,所以問題就是:1.版式陳舊老化;2.信息過多整體會導致頁面看起來雜亂無章;


          C.此方案除了版式陳舊信息過多問題外,圖片變小導致用戶對信息細節辨識度不高,直接pass,所以通欄的方案在當前場景中完全不可行。



          D.此方案基于 v4.0上,縮進了卡片內信息的距離,更加突出“搶購”的緊湊感氛圍,同時單屏能顯示3.5個商品坑位,解決了屏效的主要問題,同時數據顯示比通欄式設計曝光點擊率有所提升,也符合淘寶的設計風格規范,但是單卡片樣式商品與商品之間分割感太強烈;


          E.此方案將所有商品坑位包含在一個大卡片內,解決了商品與商品之間的分割感,商品信息細節也比小卡片展示得更完全,但存在問題就是:每個商品之間的間隔存在的分割線導致間距過大,屏效又回到舊版只能展示3個的問題,不能解決主要問題,所以pass;


          F.此方案在大卡片設計上進行了優化,取消了分割線的設計,縮進了商品與商品之間的間距,解決了小卡片式商品與商品之間分割感強烈的問題,圖片的大小信息細節也能給用戶良好的體驗,最主要單屏顯示3.5個商品坑位,解決了最主要的問題,也符合最新的淘寶設計規范和風格,此方案為最佳方案。



          最后采用了F方案,也就是目前我們線上看到的效果,在灰度上線和 A/B test 后數據反饋,淘搶購 v4.0.1的成交量&成交率相比 v4.0有很明顯的上升甚至超出了 v3.9的數據,這是通過尋找設計細節上的差異性來解決問題最好的案例。再次證明:設計思維不應被視為一種具體而不靈活的設計方法,細節的差異性有時候往往能起到產品的關鍵性作用,所以設計師從設計層面上去解決問題的時候,要不斷通過尋找產品之間的差異性,培養自己設計思維中的差異性。


          動效差異性的運用

          產品設計中,動效作為一種輔助手段,幫助設計師傳達具象的意愿,幫助開發理解交互手段,是一種錦上添花的表達;前面的內容更偏向于戰略層,而動效則偏向于表現層,同一種想表達的心智不同的樣式表達的效果完全不同。如何做好動效在產品中的表現,我們就需要了解不同的動效所帶來的性質傳達。



          舉個例子,某個彈窗需要對行動點通過動效的展示進行強化,但是同樣是強化行動點,如果產品是需要體現出質感、高端等心智時,那么在動效上的處理上就應該體現出高品質高質感的動效,如果產品主要用戶為女性或者年齡偏小的用戶,則需要體現出可愛、親切感的心智。那么在動效的選擇上,就需要通過平時對動效的收集積累,然后熟悉不同的動效所表達的性質,才能從中選擇最優的方案。比如 Q彈縮放的動效看起來親切感更強,閃光的按鈕看起來質感更加強烈一些。

          動效向來是產品的輔助,動效應該是克制的,只有了解動效的性質,通過動效的差異性,完美地契合產品,才能發揮出動效的最大作用。



          總結

          在如今網絡時代和社會化媒體的大潮下,產品設計差異化的力量不僅僅基于競爭,更要基于消費者需求的敏銳察覺和捕捉;設計思維的共通性和差異性,在今天也比以往任何時代都顯得重要。識別和競爭的需要決定了產品一定要差異化,而誠信和責任要求產品必須做到共通,差異性是產品價值的基礎,而共通性則是產品價值的保障。設計思維不應被視為一種具體而不靈活的設計方法,而是需要設計師們通過自己的經驗積累,刻意地培養設計與產品之間差異性和共通性的意識,總結歸納出一套適用自己的設計思維。




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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 
          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          2022追波設計流行趨勢

          純純


          隨著C端市場飽和與數字化的浪潮下,實體經濟、ToB 、ToG的產業再次迎來了它的曙光。視頻動效的作品占比也已超過C端界面設計,相信今年視頻動效作品占比還會再次提升。



          追波年度最佳作品

          追波年度最佳作品來自大家最熟悉的UI8團隊中的Tran Mau Tri Tam ?,作者來自越南西貢,最佳作品截止目前355K瀏覽量,2933個贊。


          為什么看似平平無奇的作品卻能獲得追波年度最佳作品呢?既不是C端也不是純B端的作品,更像一個網頁與平面的結合體。如果去掉搜索圖標、分類圖標和按鈕,你可以理解它就是一個平面作品,一個字體加幾何形體構建的作品,為了豐富畫面的層次,讓畫面更加的活潑采用了多彩加幾何色塊,讓標題閱讀有停頓感和呼吸感。faster底部的橫線讓它從標題文字中脫穎而出,這種使用線條突出重要信息的設計也是今年追波設計流行趨勢之一。


          MetroUI是Windows8的界面設計語言,在2010年至2013年間曾經風靡一時,那也是移動互聯網的發展元年,現在國家推行實體經濟、數字化帶動To B 、To G 的發展元年,通過幾何色塊(MetroUI)實現B端產品與C端設計風格的傳承與銜接,你會發現歷史總是驚人的相似。最后背景結合今年最流行的微軟風,毛玻璃的多彩高斯模糊漸變風,年度作品當之無愧。


          最后來看下按鈕的設計,正常的按鈕要么文字加色塊,要么左圖標加右文字,它設計成左文本加右圖標,更加注重信息的可讀性和易讀性,也體現B端設計重功能和交互體驗,視覺點到為止的設計理念。


          下面我們來欣賞年度最佳作品里面的流行趨勢吧。


          易讀性(停頓感)

          字體三原則:可讀性、易識性、易讀性。當你同時讀一篇文言文和一篇設計文章,肯定設計文章的內容可讀性更好。易識性是用在字體設計上,不能過于浮夸的改變字體骨架、形體而不易識別。易讀性和每個位設計師都息息相關,因為我們都需要編排文本。當我們小時候寫作文時,不會寫的文字可以用拼音代替。這時候讀者讀到拼音時會有停頓感,更加適合用戶閱讀。


          通過給用戶制作停頓感來增加用戶的易讀性。可以在相關聯文本后面添加圖片、表情、圖標來更好的理解文本內容,豐富文本內涵。比如情侶間表達愛意時會輸入文本,“我愛你”、“我Love你”、“我ai你”、“我??你”,哪個更加會有情感共鳴呢?不言而喻,相信你心中已經有答案了。



          曲線

          在標題文字上添加曲線來突出重要文案是2021追波最流行的趨勢之一,第一個設計目的就是突顯文字,其次就是想表現鉛筆真實書寫的感覺。之前很多帶有簽名的設計中,簽字的文本都是手寫體的感覺,手寫體對比電腦的機械字體會帶有一種人文氣息,也會讓兩者之間產生一種對比、矛盾。


          除了突顯文本外,曲線還有視覺引導的作用。通過視覺引導讓用戶按照設計師編排的順序進行瀏覽界面。當然還有比這更科學的工具就是眼動儀測試,通過真實用戶眼睛瀏覽界面顯示對應的熱點圖。



          多彩高斯漸變風

          多彩高斯漸變風是從色彩的角度來傳達和豐富畫面的,多彩高斯漸變風其實是從制造矛盾到平衡矛盾的過程,多彩漸變多為冷暖對比來制造畫面的沖突,需要控制冷暖畫面的大小來實現平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。


          多彩高斯漸變還可以結合輕擬物、幾何圖形、三維等新的組合方式去創新,給用戶呈現一種更加新穎的視覺表現形式。最后我們還是要回歸到內容上,為了更好的傳達信息需要去設計與內容相匹配的視覺風格。




          B端界面設計


          側邊欄Sidebar

          B端設計的火爆帶動了B端相關模塊設計,更多的人也愿意嘗試B端相關模塊設計,側邊欄作為產品架構中重要的導航系統,好的側邊欄設計能為用戶帶來更好的效率。主流側邊欄都做了展開、收起、拖拽等交互效果,也是受限于PC屏幕為展示更多數據而騰空間。側邊欄主要承擔的功能有導航、分類、自定義篩選、共享、新增等。追波的B端產品設計已經不再是假大空概念設計,而是一套實用美觀可落地的設計。



          儀表盤設計

          儀表盤設計是一個很好的隱喻,想象一下開摩托車或汽車主駕駛前面的屏幕,汽車儀表有燃油表、車速表、里程表、水溫表、轉速表、故障指示燈等。B端類產品后臺界面的儀表盤設計也需要展示一些重要的數據和各種狀態,大體分為側標欄、導航欄、待辦任務、個人信息、報表數據、消息中心、快捷入口等。當然最重要的就是報表數據,團隊收益、任務進度、轉化比例、新增、存量、團隊工作時長等都是老板或領導關心的內容。每個公司業務不同、每個人員權限不同,自定義的儀表盤也各有差異。重要的是突顯數據和業務狀態,需要分層級系統性去思考和設計。



          流程設計

          復雜的事情簡單化,簡單的事情標準化,標準的事情流程化,流程的事情自動化。流程設計是每一個企業核心功能和業務,可自定義的管理流程系統搭建也是B端產品設計的難點,需要對業務高度抽象,讓每一個業務人員可自定義的流程才是好的流程設計。



          B端C化

          B端C化是B端產品設計的視覺表現力慢慢往C端產品設計的視覺靠齊,國內B端產品界面設計視覺水平還有很大的提高空間。除了視覺上的提升外,由于業務的發展,B端產品也開始移動化、智能化,國內主流還是通過小程序、H5來現實B端產品C端化。



          輕代碼化

          輕代碼化是一種低代碼賦能無代碼的方式,彌補無代碼拓展性差、覆蓋場景少的問題。在保有無代碼靈活、易用、快捷的同時,又能覆蓋低代碼使用場景。簡單理解就是無需代碼開發即可如搭積木般快速、靈活地創造屬于你的個性化管理系統,輕松實現多元業務場景的數字化管理。


          輕代碼化將功能進行打包,升級成全局可以用的配置,技術人員配置好后,業務人員在應用編輯時直接選擇使用模版,綁定對應的變量即可使用。




          界面設計技巧


          人文氣息

          為什么人加色塊的組合方式能流行起來?還是B端行業流行帶動的。B端講的更多的是企業對企業。企業對企業除了講行業解決方案外,還需要傳達公司的價值觀、使命、愿景。人加色塊的組合方式非常適合體現公司的企業文化。對于一家全球化的公司不同膚色的人物組合在一起,這種人文氣息和價值觀已經就不言而喻了。


          當然企業也需要進行營銷,抓人眼球。幾千年來的遺傳證明了,人的大腦對食物、性、動的東西、人臉和眼睛、危險的動物很敏感。人加色塊的組合方式也具有抓人眼球營銷的功能。真可謂一舉兩得。


          這種風格更適合大公司,國內的一些手機廠商OPPO、VIVO等也會通過手機+背景+人物來體現科技與人文的結合,而對于中小型公司產品差異化和行業解決方案展現應該還是重中之重。



          毛玻璃效果

          毛玻璃效果加大了模糊程度,透明效果更加扁平,很好的順應當下UI扁平化的設計趨勢。蘋果Mac OS Big Sur系統的圖標、界面中運用了大量毛玻璃和半透明元素,界面更扁平。至于C4D三維彩色玻璃的視頻教程可以在B站搜索“透光藝術-C4D創建彩色玻璃的4個技法”,完全能滿足UI設計師。當然還有一個好消息就是Mac用戶可以享有OC一年免費的使用權,具體安裝購買方法可以上“某寶”就可以輕松搞定,真香。




          輕擬物

          輕擬物這幾年一直流行,在UI設計中趨于穩定的位置。從寫實到扁平再到輕擬物,其實是設計師們一路不斷探索的結果。本質就是光影對形體產生的視覺感受。在色彩中對高光、亮面、明暗交界線、暗面、反光(環境光)五個部分的處理。寫實三維的圖標等設計更適用于簡潔的畫面中,扁平等設計更適用于復雜一點的界面中,比如B端產品界面中的功能圖標。輕擬物可使用的范圍更廣,效果更佳。Sketch、Figma軟件對于漸變、高光、投影、高斯模糊處理已經非常簡單且出彩。




          簡潔設計

          簡潔設計遵從了密斯·凡德羅的“少即是多”的設計原則,在B端產品界面中更加需要簡潔設計,我們最熟悉的Sketch軟件界面已經是相當的簡潔了?;氐浆F實當需求功能不斷增加,產品界面的編排如何取舍,如何保證界面的簡潔是設計師需要深度思考的問題?如何與上級溝通?該功能是否可做可不做?是否需要埋點用數據說話?如果只是一味競品有我們就需要有,功能不斷累加只會讓界面越來越重。



          幾何圖形

          幾何圖形和幾何插畫有異曲同工之妙,幾何圖形多為產品界面和宣傳內容的抽象,產品界面的幾何圖形多為占位符形式,加上色彩和幾何色塊讓其成為一個整體。B端產品視覺設計C端化的進程中,幾何圖形、幾何色彩不失為最好的突破口,相信今年追波B端產品的視覺設計一定會更上一個臺階。



          幾何圖形另一個場景化的地方就是品牌,作為一名UI設計師一定會經歷從圖標到幾何圖形到品牌設計的過程,品牌設計的技巧基本還是以幾何圖形為主,至于品牌的內涵需要更深層次的解讀。掌握主流品牌設計的技巧對產品定位、品牌宣傳打下扎實的基礎。



          暗黑設計

          暗黑模式的設計是解決在微弱環境下內容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設備時長增大,如何在夜晚這個特定場景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞,提高在夜間使用的可讀性


          在設計暗黑主題時,不能為了突顯視覺上的逼格,而去使用高飽和度鮮艷的色彩來突顯界面的品質感。而應該把舒適度、可讀性作為設計的衡量指標。Material Design給出了暗黑主題的設計準則,即正文和背景之間的對比度應至少為15.8:1。按照此標準設計,可讀性都還不錯。這里介紹一個插件“Stark”(Figma、Sketch、XD、Chrome插件)用來測試界面的對比度。



          模塊化(組件化)

          為什么叫模塊化,而不叫組件化,組件化更多的利用原子系統從原子、分子、組織、模版、頁面來快速的搭建界面,但在B端產品設計中基礎組件和業務組件的搭建是以提高工作效率為前提,是否有從0到1搭建B端產品組件的經歷是設計師一生中最寶貴的經驗之一,它能提高設計師的系統化思維、邏輯思維和抽象思維能力。


          產品模塊化設計就是將產品分成幾個部分,也就是幾個模塊,每一部分都是具有獨立功能,具有一致的連接接口和一致的輸入、輸出接口的單元,相同種類的模塊在產品族中可以重用和互換,相關模塊的排列組合就可以形成最終的產品。通過模塊的組合配置,就可以創建不同需求的產品,滿足客戶的定制需求 。




          插畫

          插畫作為設計的一大品類,不同的插畫師都有自己擅長的風格,本質是都有自己的個性,但是在產品設計中更多是需要共情、共性來講故事,表達產品理念和價值觀。這就需要插畫師去嘗試并探尋出適合互聯網產品設計類的插畫風格。設計的本質是舊元素的重新組合,插畫不會過時,而是需要結合當下和產品找到最匹配的設計風格。



          幾何插畫

          幾何插畫算是插畫簡化的一種表現形式,人和物的形態不再寫實,而是抽象成幾何圖形拼湊的感覺,同時保留人物形態的神韻。加上幾何色塊與人物交互形態的表現,傳達出簡潔、科技的現代感。難點還是在人物形態的表現上,平時多練習練習速寫還是很有必要的。



          線面插畫

          線面插畫最近一兩年非常流行,準確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成,用塊面表現人物形態時某些結構會表現不出來,這時候用線條簡單勾勒后,結構就會清晰明了。其次當線面插畫運用在界面上時,可以打破界面純文字或組件化的機械和沉悶感。線面插畫的風格提升畫面熱鬧感的同時,還能保持界面的干凈整潔。




          動效


          微交互

          界面微交互動效會讓用戶的體驗更加精致到位。想要打造優秀的產品設計,微交互和動效設計是繞不開的,UI界面設計通過微交互反饋告知用戶當前正在發生的事情,所處的狀態。細微的動效更能調動用戶情緒,取悅用戶。C端產品微交互和動效已經很成熟了,一部分功勞來自iOS系統原生自帶的效果。B端產品的微交互和動效更多還是在學習海外產品,還需要給前端工程師灌輸微交互和動效的設計價值,共同打造產品體驗細節。



          Mg動畫

          Mg動畫需要很好的節奏感、韻律,每一個場景動畫都需要其中的元素進行連接變化,讓轉場動畫更加自然,MG人物動畫通過點線面的動效變化讓畫面更加有趣、自然,通過粒子效果讓特定場景無限循環會讓人更加印象深刻。




          三維


          三維圖標

          MacOS Big Sur系統圖標的更新帶動了三維圖標的流行,三維圖標的應該場景還是需要有較大留白空間的界面,因為三維圖標太小后就看不到更多細節。三維圖標感覺又回到了擬物化和扁平化哪個更好的問題上?設計師應該保持開放多元的視角。設計本身也在不斷的演化融合,存在即合理。合適最重要,它們都會有適合自己的場景和設計價值。



          輕三維

          為什么輕三維在界面設計中占有一席之位?一個是設計師不斷追求差異化的產物。另一個是更好的表現內容,并與用戶產生共鳴。輕三維的基礎模型都是來自手機界面中的各種元素,比如組件、開關、按鈕、占位符、圖表、幾何圖形、圖標、進度條等,這些都是用戶日常使用系統軟件常見的元素,通過簡單的幾何形體建模—打燈光—加材質—渲染—PS調色。難度系數不大但效果很出彩。第一個出彩點是模型帶有厚度的倒角,結合燈光渲染的光澤是二維軟件不能比擬的。第二個出彩點就是材質自由添加,特別是當下流行的毛玻璃效果,玻璃材質渲染效果更佳。第三個出彩點就是可以加局部燈光,局部的漸變色或環境光更佳出彩。



          P4D(PS+C4D)

          P4D是PS加C4D的設計表現技法,也是視覺設計的最后一個環節,通過PS對C4D的渲染圖片進行調色,利用PS的調色技巧可以很好的解決C4D打燈光的瑕疵,還可以利用PS強大的合成功能,將渲染圖片與圖片素材進行合成,來表現畫面的視覺度,當然三維軟件比較難實現的水、粒子、煙花等效果,也可以通過PS的后期合成來實現,這也是P4D的強大之處。



          卡通IP

          卡通IP設計最近三四年技術的迭代已經慢慢的走上成熟,卡通IP也從傳統的純PS手繪技法,轉到C4D建?!巧壎ā狹D衣服制作—OC渲染—PS(靜態)/AE(動態)調色。


          卡通IP火的本質更適合做營銷,相比于品牌或Slogan,卡通IP具有親和力和畫面感。隨著各種手辦行業大熱,受互聯網大廠影響下,卡通IP已經是互聯網B輪以上公司的標配了。如果團隊中沒有這樣能力的人,也可以通過繪制好二維,一套三維可以選擇外包完成。


          對于UI設計師來說學習是有成本的,暫時并不是必備技能,如果喜歡完全可以學習,從設計差異化的角度來看三維視覺確實有一定的競爭力。



          三維動畫

          C4D三維場景動畫通過構建實物和場景模擬生活中的現實場景,會讓用戶體驗真實感,三維軟件制作動效的最大優勢是通過動力學和表達式來模擬真實感,未來在AR/VR領域會有更好的發展。相對于界面動效學習成本難度也相對較大。在三維動畫中C4D軟件對于域、動力學還是有一定的優勢




          存在即合理,趨勢流行稍縱即逝,注定是不長久的,只有大浪淘沙歷史遺留下來的風格才能更長久。但我們也不能不去關注,因為哪有什么所謂的創新,只不過是舊元素的重新組合,并符合當下這個時代人的審美需求。香奈兒的“時尚易逝,風格永存”大概就是這個意思吧。

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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 
          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          2022 年 UXUI 設計趨勢

          ui設計分享達人

          2022 年即將過半,疫情在家的我們重新花一些時間,回顧今年最引為人注目的一些設計趨勢,有些已經變成現實,有些可能即將會發生。在過去的這十幾年里,全國的互聯網和移動互聯網行業蓬勃發展,引發了 UX / UI 行業的火爆,無論是在設計技術方面還是在設計實踐方面維持著快速發展狀態。設計探索受到了前所未有的關注。創新也永不停止,正在向各個方向延伸——有的是曇花一現,有的是重塑想象,有的卻循環往復。


          下面我們將更詳細地向你探討一些 2022 年的設計趨勢。

          超級大的字體排版



          The Badass Project 搗蛋派計劃

          過去幾年里,大字排版的趨勢越來越明顯,字體尺寸也在增加!接下來,字體更大且幾乎沒有圖像的時尚 英雄形象 網頁設計,將成為主流風格。

          (英雄形象在網頁設計中是一個特定的網頁橫幅,通常是一個包含與內容相關的大圖像頁眉)

          設計師和用戶都越來越習慣在登陸頁面前面和中心位置使用超大文字。無論是怪誕的無襯線字體還是現代奢華的襯線字體——這一趨勢就是在于越大越好。通過精心選擇的字體,網站可以做出比以往更大膽的宣傳,以吸引受眾的注意力并有效地信息傳達。



          這些字體選擇通過 引人注目的動畫進一步生動起來。設計師正在實現通過鼠標移動或向下滾動頁面使排版移動并與用戶產生互動的創造性效果。以粗體、動畫和交互式排版為核心,許多網站也就不使用任何背景圖像,讓外觀變得干凈且精致。



          MAFF

          所以一定要試試這種趨勢:把文本尺寸放大,可以將其放置在一些圖像上,制作大尺寸的動態標題,讓用戶從中獲得樂趣。最重要的是,要勇于呈現大膽強烈視覺效果,從而可以立即吸引用戶的注意力。

          案例:Medium 官網——https://medium.com/


          復古風格回歸



          Shakib - Sneakerbumb

          在經歷了充滿不確定性和陰郁的兩年,我們學會了尋找和珍惜任何享受幸福的機會。我們大量獨處時光的花在了數字空間上,這一現象也不例外。



          La puce à l’oreille

          為了回應這一需求,設計師從 80 年代和 90 年代獲得了巨大的靈感;將色彩豐富、質感豐富、復古風格的主題與現代氣息結合起來,打造真實的外觀。鮮艷的色彩搭配柔和蠟筆肌理、古怪的排版、紋理豐富的背景、跨頁面網格的布局、非傳統的圖像和古怪的插圖,都可能會在接下來的一年吸引你的注意力。



          Kristen Ryan for MakeReign

          隨著這一切的發生,我們甚至可以說,在過去幾年里,每個人都學會了賦予自己一些自由的生活態度。這為我們提供了更多的實驗空間,當然也為設計和其他領域帶來了讓人愉快的成果。這就是說,設計師們覺得有必要從簡單和實用的用戶體驗轉向有趣、搞笑甚至愚蠢的交互。出人意料的是,讓別人微笑可能會是你的網站或 app 令人印象深刻的一種方式。

          新野獸派設計



          Blumenkopf

          野獸派設計從 1950 年代的野獸派建筑運動中汲取靈感,延用其不修邊幅、毛糙粗狂的外觀形式,和故意做出的丑陋效果。就像在建筑中一樣,野蠻主義在網站中揭露和解構(甚至慶祝)這種媒介的底層結構和重要原則。原始、大膽和反動的本性使野獸派設計一直處于數字空間的邊緣,因為原始是互聯網的全部。然而,近年來,野獸派一直在緩慢而穩定地復蘇,現在被一些人稱為新野獸派。



          Caroselling


          隨著互聯網上干凈、傳統的網站越來越多,個人網站變得難以脫穎而出。轉向野獸派,提供真誠、原始但獨特的視覺體驗,可能正是提升你下一個網站的方式。


          無網格布局,強烈的調色板,重疊的元素,擁擠和幾乎混亂的設計只是你的野獸主義工具包的一部分。將它們與等寬和奇怪大小的排版結合起來,缺乏或極少的導航,這相當于沒有額外的“空間”或子頁面的“開放式版面”,你會得到一個引人注目的粗野派外觀。



          Work with us


          案例:阿里云設計官網——Alibaba Cloud Design - Not Design Just Future


          當然,還有更多,但野獸派網頁設計的定義規則是沒有規則;它反對既定的規則和慣例。更重要的是,你需要用更強烈的意義價值和意圖來將你的野獸派杰作與另一個設計糟糕的網站區分開來。


          本機桌面客戶端



          Messenger


          Figma、Todoist、Slack和 Messenger 等網站和移動應用程序都把時間和精力集中在桌面客戶端版本。



          Todoist


          越來越多的應用程序似乎也在效仿,因為研究表明,這樣用戶會感到 更舒適、更安全。用戶希望自己的應用程序遠離互聯網瀏覽器,遠離所有打開的標簽,回到指定的應用程序窗口,讓人感覺更寬敞、更專注。在使用這些應用程序時,不需要處理數分散注意力的標簽,這無疑是一種進步!此外,將通知直接發送到桌面,我們的通知管理也必然得到改善。



          Figma

          本地化用戶體驗



          為阿拉伯語國家的谷歌搜索頁面布局


          用戶研究團隊利用 人類心理學 領域的洞察,以及 可用性測試,已經能夠塑造界面,為用戶提供最大的滿意度和愉快的體驗感受。幾十年來,這一直是用戶體驗設計的核心。

          隨著技術的快速進步,我們看到數字產品體驗的保真度有了空前的提高。這一發展也為不同用戶群體之間的細微差異提供了新的理解。年齡、文化、地理位置、日常習慣、社會結構(以及其他因素)的差異可能會導致人們對什么構成令人滿意用戶體驗的期望存在顯著的差異。因此,這些體驗可能需要類似的設計,但肯定不是相同的設計方法。


          隨著技術和研究方法的到位,我們開始看到一款產品的多種變體同時推出,以滿足不同用戶的需求。隨著許多大品牌都在努力擴大他們的用戶群體,創造本地化的產品體驗可能會成為一種大趨勢——如果不是標準的話。


          榮譽提名:包容性



          NhuSW- Everyfit — Fitness for Everyone

          包容性不僅是一種趨勢,也是一種運作模式;人類生存和共存是一個不可否認的重要方面。在日益全球化的復雜世界中,我們不斷意識到自己與其他個人或社群之間的差異。以同理心駕馭這些差異是我們的責任,并努力將所有文化、性別、性別、種族、能力和殘疾都有意義地適當地納入全球社會。



          Spotify


          隨著數字空間引領著世界的全球化,它也毫無疑問地成為我們包容性努力的前沿。人們總是希望品牌和公司采用更具 包容性的敘述 和語言,并向包容性的平臺、產品和服務 邁進。他們被鼓勵在圖像、語言和視覺語言中推動多樣化的表現,這樣做不僅僅是為了營銷收益,而是為了更大的意義和價值。


          這些是我們在 2022 年會看到的趨勢和現象。記住,它們是為了提醒我們當前的總體設計趨勢??梢允褂盟鼈儊碇С趾褪跈嗄脑O計決策,但不要害怕挑戰它們,或用它們為人們創造更多積極有效的體驗。


          原文標題:UI/UX Design Trends of 2022

          文章來源:Codeart

          原創作者:Taras Bakusevych & Maja Mitrovikj

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

          魏華的微信.png

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

          網站設計之九:高手出品!2020~2021年UI界面設計趨勢

          博博

          2020年已經過去一大半,這些時間以來,我一直在關注數字設計領域未來的設計趨勢。從年初就開始收集,到今8月份了,我想是時候將發現的一些趨勢風格分享出來,這些風格很有可能繼續延續到2021的產品設計上。

          對于UI界面視覺趨勢,同樣需要我們高度重視。畢竟每年改版方向,視覺風格研究是必不可少的一個環節,下面正式開始。


          少量的漸變


          今年在各網站上看到大面積的漸變色設計,相對前兩年來說越來越少,設計上有所克制。大面積的漸變色雖然視覺沖擊力強,但大部分停留在概念中。

          從今年設計中我們可以看到設計更加理性與克制,將漸變色彩運用到關鍵功能上,突出強調重要信息。

          高手出品!2020~2021年UI界面設計趨勢

          機票選購界面,將漸變色運用到頭部位置去強調功能。

          高手出品!2020~2021年UI界面設計趨勢

          運用在功能卡片上,突出重點信息。

          高手出品!2020~2021年UI界面設計趨勢

          如上圖,設計上同樣只將漸變色運用在背景上,其他卡片上基本沒有漸變色。


          包豪斯風格圖形


          幾何圖形設計是目前運用最多一個設計手法,今年發現一些比較抽象藝術化包豪斯風格幾何圖形,在UI設計中大量運用,且效果還不錯。

          這種圖形帶來好處就是記憶性強,應用廣,它不僅可以拓展在品牌包裝,品牌圖形延展,還可以運用在UI設計中。

          高手出品!2020~2021年UI界面設計趨勢

          卡片設計采用一些具有意向符號的圖形,來表達功能的設計,形成記憶點。

          高手出品!2020~2021年UI界面設計趨勢

          品牌設計上,也是重復這種極簡包豪斯風格幾何圖形。將logo元素提取,進行包豪斯風格化,重復運用在設計中。

          有深度的界面


          今年這樣的設計屢見不鮮,大量3D運用在界面設計中,二維的界面已經不再滿足當前設計需要。設計師去探索更多維度學科與UI界面融合,形成一種全新的視覺感官。

          uber的概念官網就通過3D來呈現,表達功能亮點。

          高手出品!2020~2021年UI界面設計趨勢

          將二維世界三維化,將是2021年重要的趨勢。目前國內外線上有一些產品,開始在部分功能模塊使用這樣設計手法,如Naver,支付寶等。


          毛玻璃效果


          可以說是趨勢輪回,毛玻璃的效果又回來了。這也是今年在各網站設計上出現頻次多一些的設計。

          新的毛玻璃效果更加去注重功能說明,用在視覺強調的地方。

          高手出品!2020~2021年UI界面設計趨勢

          如上圖設計,毛玻璃運用在頂部關鍵信息上。這樣設計即可減少其他色彩運用,還可以對功能信息進行強調。

          高手出品!2020~2021年UI界面設計趨勢

          毛玻璃效果運用在個人中心,人物頭像位置,進行設計強調。

          高手出品!2020~2021年UI界面設計趨勢

          運用毛玻璃去包裝UI界面,可以提升品質感與神秘感。


          沉浸式界面


          將功能與場景融合設計,用戶在使用產品過程中,能產生更多情景體驗感觸。這也是最近今年喊的比較火的一種設計思路。在各網站上,這樣設計出現次數越來越多,設計效果沖擊力強,得到很多設計師的認可。

          高手出品!2020~2021年UI界面設計趨勢

          場景中關鍵人物元素與設計進行巧妙集合。

          高手出品!2020~2021年UI界面設計趨勢

          運用超現實設計手法,將人物與酒店場景進行排版布局。

          高手出品!2020~2021年UI界面設計趨勢

          將制作材料與產品集合。

          高手出品!2020~2021年UI界面設計趨勢

          擬真植物元素與土地進行巧妙集合,在視覺上傳達逼真效果。


          界面排版雜志化


          雜志化設計風格鮮明,可以有助產品去打造強化記憶點。雜志化設計的優勢可以不受到網格約束,排版使用大字體,同時設計排版上更加個性。我們在做產品概念探索前期,可以多去嘗試這樣的風格。

          高手出品!2020~2021年UI界面設計趨勢


          擬物化圖標


          擬物圖標又回來了,Apple新版本的Big Sur系統,就采用擬態圖標,這也是一個新的嘗試,當然也是一個開始。我們很有必要時刻關注這個趨勢,未來將會在更多設計中看到擬物化圖標的出現。

          不過這種風格也不能大面積運用在界面中,我們可以運用在一些關鍵功能入口設計上。

          高手出品!2020~2021年UI界面設計趨勢

          在天氣上的運用,相對之前扁平化設計,目前具有空間的擬物化設計,增加了真實感。

          高手出品!2020~2021年UI界面設計趨勢

          圓形的運用


          圓形趨勢,我想大家也許會忽略的點,最近幾年設計中,圓形的設計無處不在。它的好處不言而喻,親和力強、場景覆蓋廣,幾乎任何設計都能去用圓形。因此我們有必要去注意圓形運用技巧。

          高手出品!2020~2021年UI界面設計趨勢

          星巴克的web UI概念設計,采用圓形與產品進行集合設計排版。


          2021新擬態界面


          新擬態趨勢是2020年受到廣泛關注的趨勢之一,這種趨勢大量使用了柔和的陰影和微弱漸變,使設計既具有未來感又具有現實感,并且為熟悉的界面帶來了新的感覺。相對之前大面積濃厚陰影而言,目前新的簡化擬態界面,會克制使用這些元素。

          高手出品!2020~2021年UI界面設計趨勢

          2021年擬態界面,更注重功能與體驗。擬態效果會使用在關鍵功能上,如儀表、按鈕,又或者需要重點強調的地方,避免了大面積使用這種設計手法。

          寫在最后


          2021年的趨勢相對來說,有繼續延續2020年一些設計風格,這些風格將會在繼續加強,同時我們也有發現,目前越來越多3D元素與二維界面進行集合設計,能更生動傳達功能與將故事,2021年大家務必要注意這種趨勢的延續。

          作為設計師,我們對設計的思考不能只停留在表象層面,而更多的需要圍繞信息傳達這一設計的本質功能,以充滿自省的精神深化和反思自己的設計意識,同時要時刻保持對趨勢的敏感度。將新趨勢合理的運用在產品設計中,以產生最大化收益。

          作者:功夫UX

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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



          更多精彩文章:

          網站設計之一:怒馬!超實用的單頁網站設計指南(附大量資源)

          網站設計之二:旅游網站設計分析!教你10個小技巧

          網站設計之三:實例教學!如何將極簡風格的原則運用到網站設計中?

          網站設計之四:另辟蹊徑談創新!提升網站設計形式的幾種方法

          網站設計之五:經驗分享:移動網站設計應該避免的“七宗罪”

          網站設計之六:4000 字快速回顧20多年的網頁設計發展史!

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

          網站設計之八:為什么千萬別隨便學國外的極簡設計?

          網站設計之九:高手出品!2020~2021年UI界面設計趨勢

          網站設計之十:如何做好網頁頭部內容設計?來看 58 設計師的總結!










          網站設計之七:2021-2022設計趨勢報告:動態篇

          博博


          前言


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

          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

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

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

          水平/垂直移動 Truck/Pedestal

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

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


          結合多種運鏡 Multiple Camera Movements

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


          一鏡到底 One Shot

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


          結語


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

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

          作者:騰訊ISUX


          轉載請注明:優設網

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

          魏華的微信.png

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

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

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



          更多精彩文章:

          網站設計之一:怒馬!超實用的單頁網站設計指南(附大量資源)

          網站設計之二:旅游網站設計分析!教你10個小技巧

          網站設計之三:實例教學!如何將極簡風格的原則運用到網站設計中?

          網站設計之四:另辟蹊徑談創新!提升網站設計形式的幾種方法

          網站設計之五:經驗分享:移動網站設計應該避免的“七宗罪”

          網站設計之六:4000 字快速回顧20多年的網頁設計發展史!

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

          網站設計之八:為什么千萬別隨便學國外的極簡設計?

          網站設計之九:高手出品!2020~2021年UI界面設計趨勢

          網站設計之十:如何做好網頁頭部內容設計?來看 58 設計師的總結!










          2022年你最需要抓住的UI/UX設計趨勢

          純純

          在本文中,我們將發現:

          • 3D視覺設計師的內卷將會越來越嚴重

          • 數據可視化的工作將變得越來越重要

          • 服務的移動化還需要做出更多努力

          • scrollytelling 技術會越來越流行



          1、滾動已死,滾動敘事興起 


          舊的滾動是無聊的。如果你想吸引注意力,你就需要實現滾動敘事(scrollytelling)。(彩云注:這個技術的核心在于邊滾動頁面邊講故事) 

          undefined

          《紐約時報》是第一批在他們的文章《雪花飄落》中使用滾動敘事手法的機構之一。


          它是一種敘事形式,可以在網頁和APP上呈現。想象一下,在一個網站中每個插圖、文本和其他元素都開始變得生動起來。自然地,你會想看到這個故事的結局。它就像一個游戲,帶你穿越迷宮。雖然你不能影響它的進程,但卻讓你感覺自己能參與其中。


          2022年,Scrollytelling將會出現在你看到的每一個流行網站上。


          另一方面,scrolllytelling讓用戶真正去閱讀內容。你可以用動態文本讓他們產生興趣,比如谷歌的網站 (https://www.google.com/search/howsearchworks/)。他們的團隊知道如何讓信息看起來更好:

          undefined

          Scrollytelling在用戶向下滾動時被激活,因此得名。沒有點擊,沒有選擇的麻煩,沒有彈出窗口。你似乎停留在一個地方,但通過滾動,把屏幕上的故事慢慢展開。這不僅要求設計師創造出酷炫的視覺效果,還需要認真思考一個你想要講述的故事情節。


          所以,最好的網站不可能在2天內建成,需要更多的時間去打磨。

          undefined

          IAmBinadam令人驚艷的敘述設計


          滾動敘事的項目通常需要大量的時間和精力。不過,這樣做的結果是值得的。頁面變成“活的”,每一秒都有新的事情發生,所以在閱讀時很難感到無聊。


          那么移動端APP呢? Pure是一款約會應用(彩云注,這個應用在app store可以搜到,推薦大家安裝一個體驗一下,非廣告),它創造了一種我稱之為“tappytelling”的故事(當你第一次點擊并打開應用時,它就會被激活):


          undefined


          Scrollytelling是為用戶而創建的,用戶很喜歡它,不需要到其他頁面去閱讀整個故事。相反,網頁設計的整個故事都是事先考慮好的,并盡可能以最有趣的方式設計出來。 


          2、用戶喜歡看數據,數據可視化越來越被重視 


          如何在2022年做出一個還不錯的企業網站?你不會想告訴用戶你是“XX領域公認的領導者,該領域最好的之一”。這種標準的廣告表達并不傳達任何有價值的信息。


          最好不要用形容詞,而是用事實來說明:你有多少分支機構,在哪些城市,誰是你的客戶,以及你是如何幫助他們的。抽象信息是不可靠的。但如果你有很多想要分享的數據,你需要讓它不僅簡單,而且有趣。 

          undefined

          數據可視化有助于以一種吸引人的方式傳達正確的信息。它也可以與滾動敘事(Scrollytelling)緊密結合。以下是IAmBinadam展示數據的方式:


          undefined

           通過去除數據集的復雜性,使信息更容易讓讀者感知。

          undefined

          不同級別的數據具有不同的大小,這樣用戶知道應該先從哪里查看


          讀者可以很快注意到作者試圖通過圖片引出的結論??紤]到如今人們消費的數據量巨大,那些干凈整潔的數字帶來的正面影響更大。 


          undefined

          有些圖表乍一看甚至不像圖表,這使得它們更加能被注意到


          還有一種現象叫做“新冠后遺癥”。這是Covid對公司及其員工的長期影響。根據英國國家統計局的數據,2018年,壓力和焦慮的平均得分約為2.7/10。自新冠疫情發生以來,得分已升至4.0/10,很少低于這一水平。同樣因為大流行,在過去兩年里工作量增加了4個小時。


          人們壓力太大,卷的太辛苦,以至于不愿去看復雜的數據。


          設計師做好數據可視化,以保持人們的注意力。記住,復雜的信息通常被忽略,因為讀者試圖節省他們的時間,更有可能使用滾動按鈕。
          undefined

          Illustration by Mona Chalabi


          以下是我們推薦的一些表示數據的方式

          • 1)圖表和曲線圖

          • 2)插圖

          • 3)靜態信息圖

          • 4)互動信息圖


          undefined

          Illustration by Ink Factory


          如何讓信息圖表看起來更好?

          一個好的圖表,或者任何其他形式的數據可視化,都應該具有在Edward Tufte的“定量信息的可視化顯示”中描述的特征。在他的書中,Tufte通過圖表解釋了好圖表的3個原則:


          1)展示數據的圖形元素與數值總數的比值應趨向于1。簡單地說,應該刪除一切不必要的元素,保持整潔。 


          undefined


          2)充分利用好畫面空間。也就是說,需要將數據編排的更緊密


          undefined

          Graph by Hootsuite


          3)客觀地描述數據。不要使用夸張的圖表,可視化數據可以看起來很酷,但真實永遠是更重要的。


          3、2022年還有必要做APP嗎?


          根據We Are Social的數據,2021年有52.2億人使用手機,約占世界人口的66%。自2020年1月以來,手機用戶數量增長了1.8%(9300萬),而手機聯網總數量增長了7200萬(0.9%),到2021年初達到80.2億。


          過去一年,社交媒體用戶的數量增長了13%以上。到2021年初,社交網絡上已有近5億新用戶注冊。根據App Annie的數據,Android用戶每天花在手機上的時間超過4小時。2020年,安卓用戶上網時長超過3.5萬億小時。


          令人印象深刻的數字,是嗎?似乎到2022年,為產品做一個APP將成為必須擁有的東西。如何知道你的公司是否真的需要一款應用?有以下幾點可供評估:

           

          1)用戶主要通過移動設備訪問你的網站這是你應該了解的重要數據。

          客戶和你在一起的時間越長,你就有越多的機會去吸引他們,了解他們的習慣,并給他們想要的東西。(彩云注:這就是為什么各大廠之間都在拼命搶占用戶的在線時長。)

          2)幫助內部業務流程更加有效。

          如果你想要提高員工的工作效率、改進工作流程或增加利潤,那么就制作一個可以幫助管理業務流程的移動應用。

          如今,像這樣的手機應用使企業能夠執行越來越復雜和多樣化的任務,加快日常重復操作和文檔管理。


          3)實現一些網站上沒有的新功能。

          如果你認為APP能為用戶打開新的觸點,并讓用戶體驗更加友好,那么它就值得考慮開發。問問自己的APP能提供什么新的商業機會?例如,隨著疫情的蔓延,許多人開始用上健身APP在家里鍛煉。


          4)競爭對手做的情況。

          要了解競爭對手在做什么,他們是否有APP,能做什么,以及他們是否真的對用戶有用。


          查看App Store和谷歌Play的統計數據。下載和評論的數量可以告訴你用戶是如何使用競爭對手的應用的。如果他們的服務真的很方便而且很有必要,那么你就容易被甩在后面。


          5)復購率。

          一個應用可以幫助你留住那些習慣從你那里購買的人。如果想為老客戶開展促銷活動了,給他們發送一個通知就能完成,成本更低。


          在正確的時間提供的報價越有吸引力,人們購買的可能性就越大。

          undefined

          6)促銷工具。


          有了應用,你就不需要花錢設計和制作實體卡,客戶也不需要隨身帶卡。將促銷計劃整合到APP,并分享有用的促銷信息。


          做原生APP還是移動端網站?

          開發手機網站比開發手機應用需要更少的工作量,這反過來可以降低整體推廣成本。


          這部分是由于響應式設計的出現,它允許你根據打開網站的設備屏幕來調整網站。至于APP,它們必須為許多移動平臺單獨編寫:Android、IOS、Windows等。


          一些設計師認為“前端驅動的網絡體驗”會是2022年的一個好機會,我非常同意!(彩云注:在國內,現在開發小程序的肯定越來越多了。) 


          4、3D設計具備更強競爭力 


          我們一開始并沒有將其放在首位,因為這并不是一個新的趨勢,在很久以前設計師們就已經設計了很多3D圖像和動畫了。 

          undefined

          Cardi B rhymes with 3D

          3D技術已經在過去流行了很多年,但它不會很快消失。此外,我們預測3D圖形將變得更加多樣化和包容。


          在過去的幾年里,3D藝術和動畫已經出現在各種UI設計趨勢評論中。這意味著越來越多的設計師將它們整合到頁面中。


          3D當然應該成為2022年最熱門的趨勢和預測之一,因為與經典動畫相比,逼真的3D形狀結合動畫總是引人注目的。


          undefined


          從技術上講,通過3D更容易傳達更多內容,因為它比平面圖片更接近我們的感知。3D插圖更有深度,信息量更大,也更具互動性。"


          許多設計師將3D對象無縫地“安置”在2D空間中。它允許創建更有趣的組合,也作為一個優秀的工作方法蘊藏著巨大的潛力。


          undefined

          烏克蘭政府網站用3D手模擬了黑客帝國


          注意一點:在整合3D圖形等重量級內容之前,確保你的應用性能是OK的,能夠快速加載所有元素。 


          5、元宇宙風潮  


          Meta的logo既不是2D也不是3D?;蛘邇烧呒娑兄?這就是即將到來的2022年的莫比烏斯帶和薛定諤的貓。 

           undefined

          undefined

          Meta logo的變化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)


          (彩云注:這個概念在去年簡直不要太火,未來幾年肯定還會是一個大的趨勢,設計師也需要保持關注。跟著趨勢走,易于放大自身價值。)


          6、混合動畫  


          越來越多的公司在網站和移動應用中使用動畫,以提高用戶的沉浸感和體驗,使內容更有趣。 

          undefined


          動畫是2022年重要的網頁設計趨勢。2022年,如果沒有它,你的產品很可能會看起來就像個半成品?;旌巷L格的動畫越來越受歡迎:定格動畫和3D動畫的結合,2D動畫和3D動畫的結合。設計師這樣做是為了獲得不同尋常的風格解決方案,以及提高最終產品的質量。


          2022年,動畫設計將是品牌市場定位的重要組成部分,想想一個公司新的視覺形象——動畫形象。隨著這個領域的專業設計師數量的增長,實現新想法的機會也在增加。


          2022年如何使用網頁動畫?

          1)講故事動畫。

          可以通過在界面和用戶之間建立情感聯系來傳達信息。 

          undefined

          加載動畫Yoichi Kobayashi


          2)更有趣的加載。


          用戶不愿意等待,除非載入畫面很有趣。帶有百分比的動畫不僅可以分散用戶的注意力,還可以告知他們加載頁面需要多少時間。使用進度條或者任何你能想到的可以顯示時間流逝的東西。

          undefined


          3)光標效果。

          用戶可以精確地觀察光標所在的位置。通過添加智能互動動畫,對這個光標作出反應來探索網站。這種效果在21世紀初非常流行。如你所知,流行趨勢往往每20年就會重演一次。


          undefined 


          4)動態排版

          你有沒有想過讓字母跳舞? 

          undefined



          添加角色的動畫插圖

          據Statista統計,2020年全球動畫市場達到了2700億美元。趨勢是視頻,而不是靜態信息。全球品牌在社交網絡上使用動畫制作廣告。毫無疑問,動畫插圖的優勢是它們非常靈活和多樣化。 

          undefined

          寶馬歷史動畫


          這樣的作品通常用于兩種情況:

          1)用于解釋視頻

          2)電商廣告

          undefined

          動畫解說的趨勢出現在幾年前,解說視頻清楚地顯示點擊的位置或公司的項目是關于什么的。


          在招聘或商業視頻中,用戶更喜歡看畫出來的人物,而不是抽象的形狀或物品。畫出來的人物可以喚起情感共鳴,就像活著的人一樣。


          7、微交互,大影響  


          微交互是幫助用戶瀏覽網站或應用的小界面變化。通常這些是作為提示用戶的視覺或聲音效果:它們顯示發生了什么,將導致什么操作,下一步需要做什么。 

          undefined

          圖片來源awwards


          動畫交互將為你的設計注入活力,并有助于保持用戶粘性。關注每一個細節是設計師工作的關鍵,因為設計中的所有元素都可以帶來積極的用戶體驗。


          重要的是要達到元素的和諧,而不是把注意力分散到界面的各個方面。微交互作用的一個重要部分是顏色,它們為界面元素增強價值。


          undefined


          微交互有助于頁面導航,解釋它們的功能。最重要的方面之一是加快和簡化以前冗長的功能,以實現特定的行為。 


          8、動態logo,加深品牌印記  


          2022年,在線品牌面臨著新的挑戰,需尋求新的解決方案,其中之一就是動畫logo設計。 

          undefined

          圖片來源Toridori


          動畫logo主要有以下幾點營銷優勢:

          1)吸引注意力。這意味著它們有助于提高品牌知名度。

          2)有助于提高SEO。谷歌更傾向于動態內容,帶有動態圖形的頁面更容易吸引用戶。

          3)在移動端看起來更好。絲滑的動畫看起來比靜態的logo更有趣。

          4)最重要的是展示了歷史。靜態logo背后的想法正在動畫中發展。由于這一點,在幾秒鐘內,你可以展示品牌的使命,甚至它的價值!


          undefined

          一家洗衣機[公司]的標志(https://www.schulthess.ch/)

          現在有很多設計模板,可以很容易地用字體制作一個動畫logo:


          undefined



          undefined

          圖片來源Shabello, Bobby Voeten

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


          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 
          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          扁平化設計的時代是否快要接近尾聲了?

          純純

          Logo 勝過千言萬語。一個偉大的 Logo 不用一個字就能講述一個故事。


          最近,許多公司的商標都經歷了一次轉變。從通用汽車(GM)這樣的汽車公司,到漢堡王(Burger King)這樣的餐廳,再到品客(Pringles)這樣的食品公司,很明顯,許多公司都在嘗試重新設計商標。


          然而,在重新設計的同時,也有反對聲音。反對改變的聲音是向來常見,然而不喜歡某一個特定的設計語言卻比較鮮見的,那么到底發生了什么?


          Logo 因何改變?

          通用汽車(General Motors)改變了自 1964 年以來一直使用的標志是廣為周知的,它用以保證電動汽車的發展。Dezeen /通用汽車

           

          為什么要修復一些沒有損壞的東西,為什么要改變一個已經受到喜愛的標志?這是每個人都會問的問題,每當一個新的標志出現,我們就必須考慮到一個標志的重新設計是不便宜的,往往會花費數百萬美元和多年的研究。乍一看,一家公司這么做毫無意義,然而每隔幾年就會有很多公司這么做。


          雖然我不是平面設計師,但我個人認為 Logo 和品牌的重新設計有兩個主要驅動因素:技術和市場


          技術對設計影響很大,它既支持又限制了它。計算機硬件和軟件的采用和改進等技術進步為設計師們提供了嘗試新事物的機會。技術對設計也會有限制,比如有限的屏幕尺寸或能量消耗,但同時也會驅使設計師發揮創造性。雖然技術可以影響設計決策,但市場(在某種程度上可以等同于消費者)才是主要的決策者。


          市場,無論是企業客戶還是目標消費者,在設計決策方面自然是最高的權威。如果一個公司覺得自己不能從中獲益(畢竟 Logo 的設計并不便宜),重新設計 Logo 就很少發生,即使這可能會引起現有消費者的強烈反對和抵制。重新設計 Logo 可以是一個新的開始:向消費者傳達他們對未來的期望。


          簡約的魅力

          動物星球的標志變化過程,它隨著每一次迭代變得越來越簡單。


          所以讓我們來談談這個非常顯而易見,而又容易被忽略的問題。從 iOS 7 到純果樂——極簡、極簡或扁平化的平面設計風格已經興起近十年了。我們已經討論了技術和市場是如何決定趨勢的,但是對于我們今天所面臨的當前趨勢:以最小的、扁平的、最簡單的標志重新設計,它又說明了什么呢?


          技術的訴求——對在線展示的日益增長的需求是公司簡化其標識的主要原因??焖僭鲩L的移動設備使用率導致高度詳細、高度程式化的徽標設計的舊設計方案越來越難以實現。在可伸縮性和文件大小等方面,矢量的圖像變得更加流行,與柵格圖像相比,它們更容易創建、操作和編輯。像 Airbnb、Animal Planet 和谷歌就采用無襯線和塊狀字體的商標,之所以這樣做,是因為這樣在手機等設備上更容易閱讀。


          市場需求——企業和消費者似乎都支持(當然并不是沒有阻力),應該走更簡單的道路。更簡單的平面設計意味著它更容易被廣大用戶理解和識別。許多扁平化設計的支持者認為有效、友好、干凈和中性的特征是扁平化風格的優點。誰還記得在 2000 年代,Windows Aero 的頂級設計是多么的混亂不堪?時代當然變了。


          當平面設計成功時,就可以創造出華麗而有意義的標志,它們經得起時間的考驗;IBM 和 Shell 的標志就是我最喜歡的幾個。但是,盡量簡單更容易創造出一些最好的標志一樣,也很容易失去目標。


          是不是過于簡單了?

          最近十年間,平面和極簡主義設計的標志重新設計正在興起。


          在最近的十年里,很多公司一直在用扁平化風格來重新設計 Logo,Logo 隨著時間的推移變得越來越簡單,盡管在線社區的用戶們的感受各不相同。


          任何重新設計都會遇到各種各樣的反對。沃爾什(Walsh)、凱倫?溫特奇(Karen Winterich)和維卡斯?米塔爾(Vikas Mittal)的一項研究顯示,消費者對品牌(品牌態度)的認知,在消費者對重新設計的看法中扮演著重要角色。


          2003年,像蘋果這樣擁有高品牌忠誠度的公司決定更換 Logo,在宣布后數小時內就收到了網上請愿書,這一點就很明顯。沃爾什、溫特奇和米塔爾認為,商標的重新設計擾亂了已經形成的相對穩定的關系,消費者顯然對此感到不安。


          一位推特用戶對 firefox 徽標的改變非常憤怒,盡管它并沒有被實現?!猆nfunnyLuigi


          有一些被重新設計的 Logo,比如漢堡王卻受到了熱烈歡迎,而其他的,例如火狐和動物星球則受到了嚴厲的批評。漢堡王不僅采用了更簡單的設計,還抓住了人們的懷舊情緒,因此比動物星球(Animal Planet)這樣的 Logo 更容易被接受。


          需要指出的是,扁平化的 Logo 設計本身并沒有什么錯,許多 Logo,如可口可樂、IBM 和殼牌,都由于其簡單易記的特性成為永恒的杰作。導致人們強烈反對扁平化 Logo 設計的原因可能是人們對企業和企業文化越來越反感和憤世嫉俗。像企業藝術風格、企業孟菲斯和全球同質化等概念通常會被指責為“過度簡化”標識設計浪潮的罪魁禍首,因為很多設計決策都是冷血的,缺乏人文特征的,讓人感覺不自然或虛假。


          不喜歡過于簡化的商標已經成為網絡熱點,尤其是在YouTube上。——Revified


          由于許多內容創造者和互聯網熱點已經導致了文化抵制現象出現,人們不再只是隨意在社交媒體上發泄不滿;人們把這些過度簡化的商標描繪成冷酷無情的科學實驗的結果,有些人甚至證明了如果這種趨勢繼續下去,過度簡化的商標會導致什么,它們會創造出一個乏味的世界,每個商標都是一樣的,沒有個性。


          Youtube 用戶 Solar Sands 在他的視頻文章《為什么企業的藝術風格讓人覺得非常虛假》( Why do corporate art styles feel fake )中指出,許多公司,尤其是大型科技公司,這些公司曾經多次產生消費者的信任問題,而它們恰好使用了許多扁平化設計風格。我們就把負面問題與這種設計風格的聯系了起來,對這種風格留下了糟糕的印象,因此我們憎恨它;我們覺得這些冷血的公司正在奪走我們所愛的東西。在這波憤世嫉俗的浪潮之后,Solar Sands 以一段出人意料的評論結束了他的視頻:任何潮流都有保質期。


          接下來將是什么?

          百事可樂不斷演變的標志讓我們很好地洞察了各自時代的設計趨勢。——Logaster


          設計趨勢總是周期性的,每個趨勢都有保質期。百事可樂的商標就是一個很好的例子,它說明了設計世界是多么地充滿活力:從簡單的設計到復雜的設計,再到簡單的設計。沒有一種設計風格是絕對好的,但它必須與時代相適應。


          微軟的 Fluent Design 吸收了一個新的風格,強調光,深度、材料和尺度?!④?


          隨著大眾對當前設計趨勢的不滿不斷發酵,扁平化設計風格可能要終結,但人們永遠不知道什么時候或者什么會取代這個簡約至上的時代。許多蘋果和微軟等公司都將新擬物風格和玻璃擬態的元素融入自己的設計語言,試圖為其添加性格和細節。雖然我們肯定不會在一夜之間回到過去那些充滿華麗而又過分精細的 Logo 的日子,但扁平化設計的流行趨勢可能會開始消退。

          作者:知群

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

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          日歷

          鏈接

          個人資料

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

          存檔

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