<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>

          首頁

          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 以一段出人意料的評論結束了他的視頻:任何潮流都有保質期。


          接下來將是什么?

          百事可樂不斷演變的標志讓我們很好地洞察了各自時代的設計趨勢?!狶ogaster


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


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


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

          作者:知群

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

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

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

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

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



          國外專業機構發布,2022年你最需要抓住的UI/UX設計趨勢

          ui設計分享達人

          當設計師被迫待在家里時,終于能有時間去反思現有的設計并重新創造。無聊是藝術家最大的敵人,他們會盡可能地打破困局。


          對我們來說,2021年相當困難。世界上最長壽的貓慶祝了它的34歲生日,這可能是發生的唯一一件好事,順便說一下,你會在文末看到這只可愛的小貓照片。


          那么,2022年的UI/UX設計趨勢是什么呢?看看現在的情況,我們已經可以預測未來的設計趨勢,就像我們對2021年所做的預測一樣(回頭看非常準確)。


          在本文中,我們將發現:

          • 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


          最后的話  


          記住,設計趨勢總是在變化的,但是設計的意義不會變。如果你不能深刻理解這一點,那么任何設計趨勢的文章不能幫你做好設計。


          這是前面提到過的世界上最老的貓。她今年34歲(相當于人的160歲) 

          undefined


          原文地址:站酷
          作者:彩云Sky

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

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

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

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

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


          解析新擬態風格最全指南

          純純

          一、什么是新擬態

          簡單講,新擬態是一種圖形樣式,其原理是為界面的UI元素賦予真實感。

          其實他也是算擬物風格的一種,只不過表現形式不一樣,最早出現在追波上,從2020年慢慢被大家熟知,討論,重視起來。暫且不論是不是未來的必然趨勢之一,一個事物的興起多少是有些道理,我們持辯證的眼光去看到,去學習、去了解便好。

          名稱由來

          原生名詞有幾個叫法,Neumorphism / soft ui,翻譯過來叫新擬態或者是軟ui。其實按照我們國內的翻譯應該叫,新擬物風格。Neumorphism,是New +Skeuomorphism的組合詞。

              0115fc5e44eb99a80120a895d86a16.png


          二、設計風格的發展歷程

          地球是圓的,很多事情總是輪回的,原理是不變的,只不過是換了一種表達方式出現在我們的面前,在了解新擬物之前,先簡單說下UI整個風格的發展歷史,



          01.擬物風

          說起ui設計風格不得不說起我們喬老爺子了,在2007時候年最早的iphone手機的手機界面就是擬物風格的,那時候覺得怎么會有那么好看的界面,設置圖標的齒輪,閱讀器的書架,以前的youtube圖標還是一個小小的電視,從而掀起一波擬物圖標風格流行趨勢。

                          

          說起擬物風格,不得不提一下當年的擬物大神——MIke,當時在追波掀起一波轟動,在國內也迎來一陣臨摹潮,我還記得那時候我還臨摹過下面那只鋼筆,還有那個馬卡龍蛋糕,都是滿滿的回憶。對于當時MIke大神作品,用現在話說,奈何沒文化,一句臥槽走天下... ...

          02.扁平風格

          到了2014年,蘋果對界面進行了“扁平化”處理,以使外觀更簡單,同時又使其用戶易于理解。一直到今天扁平化設計風格仍然是UI設計的標準。

               0164425e44ef76a80120a895f174f6.png            



          其實最早最早將扁平化風格設計運用在產品中的公司是微軟。他在Windows 8系統使用扁平化設計語言,但是Windows 8一直飽受爭議,但是反響并沒有很好。

                     01170c5e44ef8ca80120a89519ff59.png             Window 8平面設計示例



          三、那么新擬態這種風格是怎么流行起來的呢?

          還是從追波說起,這一切的開始是源于在2019年11月05日的在Dribbble-Alexander Plyuto發布的作品,獲得了26W+的瀏覽,4400個贊,以及1800個收藏。以后在Dribbble上便成為流行,在探索更多的可能性。

                     01dcdf5e44f151a8012165185c99da.png            


               


          四、新擬態它有什么特點

          再說新擬態有什么特點之前,我們先看幾個比較典型代表的視覺作品,以便于更好的了解這一風格

                     01d50d5e44eff2a80120a895ed11cc.png           


          我們看下上面的一些視覺作品,第一眼看到比較明顯的是,在一些可點擊區域做了一些“浮雕”效果,點擊狀態和非點擊狀態,在視覺處理上是未選中狀態是凸出來的,已經選中狀態是凹進去的,但顯然凹凸之間是有很多質感細節處理的,等下再實操組件部分會講解到。



          1.通過觀察,總結新擬態設計風格的處理方式大概有一下幾點


          1. 左上角亮色投影,右下角深色投影(有且只有一個光源照射)

          2. 元素與背景對比度比較弱

          3. 常常用于按鈕組件和卡片

          4. 按鈕狀態,視覺上凸出代表未選中,凹進去表示已選中狀態



          2.特點詳解

          1.有且只有一個光源照射

                     010f035e44f13da80120a895db440e.png            

          那作者在追波上按鈕也好還是卡片處理也好,仔細觀察不難發現,它定了一個光源,是從左上向右下照射的,所以,越靠近光源的部分,越亮,遠離光源的越暗(素描的繪畫時常常用到)。因為新擬態的光源是唯一的,是從左上角照射的,所以就不難解釋,或者分析得到,左上角亮色投影,右下角深色投影。這一基礎規律,不單單適用于新擬態風格的按鈕,它還適用于所有新擬態風格表現手法的視覺組件。


          可以看到下圖,卡片、轉盤、按鈕,他們的受光面都是在左上角。

                     01d50d5e44eff2a80120a895ed11cc.png            



          2.組件與背景對比度比較弱

          這里就要講一下,另一個叫法了soft ui,即軟ui。軟,有柔和的意思。為什么這么命名呢?其實就是由于新擬態的組件與背景的對比度很弱,我把收集到的幾千張素材中,挑選一部分進行進行色值對比,可以發現無論是亮色模式下和暗色模式下對比度都是很低的。

          按鈕、投影、背景之間的關系都處理的非常柔和,這是新擬態的特征之一

                     01b2725e44f1fba80120a8950ddfcc.png        01558e5e44f220a801216518bb6709.png    素材庫


          3.常常用于卡片和按鈕

          基于這一點,其實我們只要建立好卡片的和按鈕的樣式組件,新擬態在設計層的表現就可以高效率的實現,可能稍微麻煩的就是,在一些質感細節上做一些優化,前面也說到,新擬態是一種無紋理的擬物風。所以想要表現卡片/按鈕的質感,在光影、厚度細節上,需要做更多的細節處理。


          比如卡片的厚度感細節的處理,為了體現銀行卡的厚度感,在卡片增加了一個對角漸變描邊,從漸變色塊可以看到,漸變的規律,也是遵循“有且有個光源”定義的,靠近光源的是純白,近暗色投影端是比投影更重的一點的描邊色。

          這樣做的好處不單單是為了體現卡片的厚度,因為我們前面講到,新擬態是軟ui,是對比很弱的。風格柔和帶來的另個一個不太好的就是,界面清晰度不夠,很容易把視覺處理“糊掉”。所以,增加對角漸變描邊在一定程度上也起到了,讓界面的視覺層級更加清新的作用。在實操部分,將會一一拆解各種情況的一些處理方式。

            


          4.按鈕狀態,視覺上凸出代表未選中,凹進去表示已選中狀態

          在新擬態中,視覺上凸出代表未選中,凹進去表示已選中狀態。是大部分人的處理方式,在這一小節里,先討論大部分的,在實操部分在列舉其他的處理手法。


          這里可以明顯感受到,按鈕狀態的區別,凸出/懸浮的是沒有選中狀態,凹陷下去的是選中狀態。

          細節觀察,新擬態風格,在按鈕上面的元素是做了內陰影處理的,看起來有一點點雕刻的感覺,

          在選中狀態按鈕的處理,首先是在光源的處理上是統一的,加上光影的處理,就很容易做出來凹進去的感覺,想要是凹槽的厚度感、質感看起來更加舒服,這里的處理方式和卡片的處理方式原理一樣,添加漸變描邊就可以解決。



          五、新擬態存在的局限


          1.可見性

          這里影響新擬態界面的可見性,主要有兩個因素,一個是可見性,另一個就是視覺層級關系。


          識別度

          前面我們說到,新擬態的的一個設計風格特點,就是低對比,弱對比。帶來界面柔和一面的同時,在視覺層上,也會很容易出現界面”糊掉“的一些情況,這樣就非常不利于信息的傳遞。試想,一個頁面從色調、按鈕、布局、交互上都很好,但是,就是看不清哪跟哪兒(識別度),那設計出來的東西是沒辦法落地的,頂多是個好看的花瓶。


          所以,在設計新擬態風格的時候,需要格外的注意界面的識別度。但同時也要注意,界面的投影不能太重,如果太重,界面就很容易顯得“臟”。

          那么,前面講到的,卡片厚度的塑造方法(增加漸變外描邊)可以在一定程度上提高界面的識別度,提高信息的傳遞。


          02.視覺層級關系

          因為新擬態風格的基礎原理是依托光影關系來塑造的,那在很多樣式組件界面中,就會產生很多懸浮或者下凹的投影,那么在很多時候是很難區分視覺層級關系的,用戶在看到這樣的界面的時候,第一時間會覺得頁面很“滿”,用戶就無從下手。

          所以在做新擬態設計風格時候,一定要學會“視覺降噪”,需要避免整個頁面都很滿,最重要的是克制。



          02 易用性

          那前面說到可見性和視覺層級,這兩點是易用性原則里面的基礎組成部分,如果基礎組成部分都沒有得到很好的解決的話,那產品的易用性就無從談起。能用、好用的產品是前提,美感是對產品易用性的補充,能用、好用才是核心。

          所以在設計新擬態風格的時候,對頁面的信息層級細分要求更高,對這個頁面的節奏處理需要更細膩,對用戶體驗的理解需要更加徹底,在商業與交互層面的持衡中,需要考慮的層面有多一個比較關鍵維度的考量——可見性

          那么當我們可以處理好頁面元素之間的關系,也滿足易用性基本原則的時候,新擬態帶來的局限性將會變得不那么重要。



          六、目前適用的一些產品

          針對前面我們說到新擬態的一些特點,一些局限,目前比較適合以下兩個大類產品。



          01.工具類。

          工具類的APP內容相對固定,不需要時時更新,這樣設計師在視覺風格方面的表達空間更大一些。在追波上,發現大部分的作品都是偏工具類的

                                 

          01056c5e44f4c3a801216518c45b10.png                     

             


          02.簡單的功能性頁面。

          和工具類APP一樣,這些類頁面上運營性質的東西相對較少,內容的形式相對可控。

                  01574f5e44f4c4a801216518cbc414.png 



          結語

          那么,大家最關心的問題來了,新擬態到底是不是2020年即將要流行的設計風格?相信 大家最近這段時間多多少少也看過很多關于新擬態一些介紹,在趨勢文章里面或者在其他文章里面看到。


          首先必須得中肯的說,像大多數設計趨勢一樣,新擬態是設計用戶界面的一種看起來視覺比較新穎的表現手法,讓產品界面看起來既柔軟又方便,但是它也存在一些局限,前面我們也提到一些,比如它實現起來還是有一點難度,也不夠靈活等等


          但是我說一點不同的是,這也是我一直認為的一點,就是UI設計運營化,運營設計游戲化,這是未來的趨勢。

          反觀我們APP的主要生力軍,90、00這一批人,其實他們就是互聯網的原住民,他們就是在這注重交互,注重游戲化體驗的大環境出生的,成長起來的,所以他們對這些東西是非常了解的,他們也能接受這種游戲ui,這種寫實的東西,包括現在的這種體驗。


          所以,未來的方向,是會往這個方向走的


          當然,趨勢不是我們預測的,因為只要蘋果出一個新的設計風格,那個風格就會是成為新的設計趨勢,目前來看,這是必然的。


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

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

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

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




          關于設計趨勢那些事

          純純

          團隊按領域分組收集素材



          我們認為影響設計趨勢的因素主要有以下三個:


          后疫情時代的影響

          新冠疫情的持續除了改變了大眾的生活習慣外,也意外地推動了各行業加速線上化轉型、提供「無接觸」服務,出行上的限制催生了游戲等線上娛樂市場的蓬勃勢態,甚至一定程度上疫情也影響了社會和經濟格局,導致了一些新政策的出臺。


          00 后成長為新主力軍

          新生代的崛起導致了流行風格的一系列變化:二次元等亞文化成功破圈進入主流消費市場、復古設計的重心從 90 年代向千禧年偏移。他們以更開放多元的思維方式和新視角,影響著下一個 10 年設計題材的選擇。


          軟硬件技術的發展

          近年來智能設備的性能上限不斷被刷新,誕生了許多創新的設備形態,使更生動的交互體驗成為可能,另一方面,AR/VR 技術經過上一個十年的雕琢,性能和效果逐步得到驗證,具備了量產的技術沉淀,將迎來一波商用普及的浪潮。



          概念闡述

          「 酸性平面」風格融合「Y2K」美學的未來感,形成了獨特的「未來酸性金屬風」,典型特征有:


          • 酸性漸變:一種會引起不適但足夠刺激的迷幻漸變色。這類配色打破了傳統美感的標準,追求感官刺激,給人異次元下致幻而不安的感受。


          • 金屬感:以熔融形態在環境光下呈現出詭秘的反射,這種反常規的液態質感所帶來的違和,在傳統科技感上增添了幾分神秘。


          • 透明膠質:液體或是 PVC 半透明膠質,配合流體動感的形態,折射出光的幻彩,給人強烈的亦真亦幻感受。 



          應用場景

          未來酸性金屬風反差感兼具未來感的特征,決定了它在時尚、音樂、潮流以及藝術圈有很好的延展性。服裝鞋包、藝術家創作,以及傳達個性自我的品牌平面廣告,都可以看到其身影。


          相關案例

          The Future Vision of Microsoft 365 宣傳視頻



          概念闡述

          隨著產品硬件性能的不斷升級,設計語言也開始追求真實感。相比過去,「類玻璃柔光材質」除了更注重「輕」的概念,在質感上也呈現出更加輕盈、細膩以及自然的趨勢。


          類玻璃材質的表面呈現微磨砂感的半透明質感,透光而不透視,通過清晰的邊緣來強化物理質感,兩者對比呈現出一種「虛實結合」的美感。該材質多以輕薄的片狀形態懸浮于場景中,減輕重量感以帶來輕盈的視覺感受。



          應用場景

          「類玻璃柔光材質」輕盈與通透的視覺感受,能營造出未來感十足的場景,很適合闡述科技智能的概念。因此該風格成為了一大波科技背景公司的設計首選,其中主要以硬件系統以及B端、工具類的產品為主,應用場景包括界面設計、推廣視頻等。



          相關案例

          Louis Vuitton × League of Legends Collection



          概念闡述

          近年來,品牌跨界合作的對象不再局限于品牌之間或明星名流,眾多服裝、奢侈品、數碼產品等消費市場的強勢品牌紛紛向游戲和二次元等虛擬 IP 拋出跨次元合作的橄欖枝。這種合作方式成就了「三次元」品牌與「二次元」IP 的雙贏局勢,將在 2021 年繼續發展并造成更廣泛的影響。



          應用場景

          游戲和二次元元素大熱,手機、化妝品、服裝等產品通過結合該類元素,以新的形式吸引年輕用戶:為像素風格的游戲設計服裝、為全息的虛擬偶像捏臉塑形、為動漫人物拍攝雜志封面、在一款電子游戲里搭建新品發布會等,相應地,跨界應用對設計師的涉獵領域和技術跨度也有了更高的要求。



          相關案例

          一線頂尖奢侈品品牌相比以往與動漫游戲類二次元 IP 合作更頻繁,除了經典動漫,也不乏新鮮的熱度 IP。



          在《Evangelion 新世紀福音戰士》25 周年,OPPO聯名這部影響一代人的動畫神作,推出了一款從快遞包裝、外盒甚至是卡針,里里外外都深度融合 EVA 元素的聯名機型。


          OPPO × EVA 定制版手機 OPPO Ace2



          美國說唱歌手 Travis Scott 2020 年在《堡壘之夜》(一款線上競技游戲)中辦了一場虛擬演唱會。這場演唱會共吸引了 1230 萬玩家同時在線觀看。


          Travis Scott 在網絡游戲《堡壘之夜》內舉辦虛擬演唱會




          Photographed by Sean Thomas, Vogue, January 2020



          概念闡述

          「親生命性設計」原為建筑和空間設計中的概念,意為「運用天然材料、自然光和植物創造令人愉悅舒適的建筑環境」。受城市化進程加劇及全球疫情的影響,人們渴望親近自然的欲望和需求變得越來越強。產品和自然元素彼此交融,從主客體關系轉為互相依賴的存在,以更為和諧與自然的交互方式與用戶進行溝通與連接。



          應用場景

          自然元素將在不同感知維度以更貼近真實自然的方式融入各個領域的設計,比如在工業產品設計中使用更加貼近自然物體的表面肌理,在建筑設計中將人造空間作為自然空間的延伸,在數字產品設計中使用更擬真的自然音效和光照等等。



          相關案例:

          2021 時尚界不約而同地強調了自然元素的使用和對環境保護的呼吁,各大品牌都用自己的方式演繹了「自然共生」的服裝設計系列。




          還原自然界中的真實材質成為了新的設計靈感,被應用到各種設計中。



          Vivo OriginOs 系統通過行為壁紙系統將常用的系統功能和展現真實自然場景的動態壁紙進行聯動。 


          Vivo OriginOs



          山水 Mountains & Rivers by Particle (Gao Yang)



          概念闡述

          近年,國人的文化自信逐漸增強,國家擴大內需、擴大消費的政策導向為國內消費品品牌帶來了巨大的機會。「中國設計」的標簽已經成為新一代的時尚潮流,帶有中國本土個性、體現中式美學的設計受到更多品牌的青睞。



          應用場景

          越來越多中國品牌開始注重漢字 Logo 的使用和設計,更多現代設計力求為中式美學擺脫民俗、皇家的刻板印象,木、石、竹這些蘊含中式精神內核的元素成為了工業設計、建筑設計中新的繆斯。


          隨著中國的國際影響力進一步擴大,國際品牌也會提高對中國市場與文化的關注,在設計上融入更多本土元素。



          相關案例

          各品類的國產品牌在包裝或產品設計上通過對中國元素的運用來塑造具有特色的國風產品。



          可口可樂中國與漢字文化推廣機構「好字在」和方正字庫聯合推出的這款字體,反映了可口可樂對中國文化的深入理解和對本地化運營的關注度。


          可口可樂聯合推出的中文字體「在乎體」


          同仁堂旗下「知嘛健康」在北京開設線下體驗店,店鋪設計提煉漢字、中藥、藥房等中式元素作為靈感,用現代化的方式呈現,是極具現代感的「中式」空間設計。


          同仁堂旗下「知嘛健康」線下體驗店 by 無象空間建筑


          Microsoft Haptic PIVOT 微軟腕帶觸覺設備



          概念闡述

          在增強現實中,人機交互將更多發生在物理空間里,虛擬的數字信息將借助形變和震動被模擬為觸感。得益于新型傳感器的拓展應用,硬件設備實現了對溫度、形態、力量的數據監測,同時各大硬件廠商也逐步對震動馬達等硬件進行了完善升級,從而為進一步的觸覺模態設計提供了支持。



          應用場景

          涉及領域除了現有的游戲、駕駛、健身等場景外,更有趨勢被應用于創新教育、操作培訓及有風險的試驗演練中。



          相關案例

          任天堂在健身環 Ring-Con 內加入的力學傳感器實現了對力量(張力、拉力、壓力等)的監測,并利用 Joy-con 震動來對用戶動作的標準性進行反饋提示。


          《健身環大冒險》on Switch



          微軟研發部開發出了一套 Haptic PIVOT 腕戴觸感反饋方案,通過活動的機械結構,更逼真地模擬出物體的握持感。


          Haptic PIVOT 使用演示



          索尼推出配備了音圈馬達的 PS5 DualSense 無線手柄,扳機鍵內增加了一個由電機驅動的齒輪,通過震動模擬出槍支的后坐力、彈簧的彈力、繩索的拉力等物理效果。


          PS5 DualSense 無線手柄使用演示

          Flight Booking AR application by Bala GN



          概念闡述

          現實生活中,人與人、人與物接觸產生的實體服務稱為線下服務,由網絡等技術支撐的人與硬件設備交互的服務稱為線上服務。在硬件設備、網絡技術成熟的當今社會,線下服務向線上服務遷移的過程中融入了更多 AR/VR 等虛擬服務,也帶來更多新的設計行為和交互方式。



          應用場景

          原本需要親臨現場才能完成的體驗,現在可以通過線上的方式實現,這不僅體現在因疫情催化產生的線上辦公、線上畢業展等強需求場景,也在購物、試衣、健身等更貼近生活的領域應用。



          相關案例

          用戶在 Gucci APP 上挑選自己喜歡的手表后,將手機攝像頭對準手腕,就會顯示「試戴」效果。


          Gucci APP 虛擬試表



          各大院校畢業展因疫情無法在線下舉行,一些學校通過線上展廳的方式,讓學生的畢業作品可以通過網絡瀏覽。


          中央美術學院 云端美院



          香港理工大學 polyudesignshow



          Balenciaga 2020 年用一款電子游戲代替了線下時裝發布會。在視頻游戲中,玩家能夠在五個主題場景中欣賞到 2021 秋季系列的新款服飾。



          Balenciaga:《后世:明日世界》



          硬件設備的創新使線上健身指導有了更合理的使用場景和更人性化的體驗,用戶通過線上內容和服務在家也可以獲得接近健身房的體驗。


          Tempo Studio:家庭智能健身設備



          POPMART 泡泡瑪特



          概念闡述

          「情感療愈」是一種有溫度,無攻擊性,注重細節的設計方向。這類設計旨在治愈修補心靈中的創傷,不只注重功能的完善,也更在意情感內涵的打磨。它也可以幫助人們敞開心胸,接納自己內在的所有面。



          應用場景

          在產品設計中,一些撫慰人心的小功能、小彩蛋往往帶有著治愈人心的力量。在角色形象上,柔軟、可愛的造型在帶給人無攻擊感的同時強調著陪伴的意義。在娛樂領域,也出現不一味強迫用戶達成某個目的慢節奏「佛系」游戲。



          相關案例

          網易云音樂來自「張開雙臂擁抱別人」動作靈感的抱一抱彩蛋,讓原本只有文字點贊的評論區更有溫度。


          網易云音樂的「抱一抱」動效



          Switch 游戲《動物森友會》在 2020 年異?;鸨?,歸功于其萌系治愈的風格和追求自然隨性的生活方式,也讓疫情期間的玩家們暫時逃離嚴峻緊張的現實生活。


          Switch:《集合啦!動物森友會》



          盲盒的精神內核是「收集、陪伴、治愈」,泡泡瑪特簽約的 IP 形象,大多以可愛、萌系為主。


          泡泡瑪特的盲盒萌系 IP 形象



          Disney 與 Pixar 出品的動畫電影《心靈奇旅》用輕松的方式探討生活的意義和人生的價值,電影用它獨特的美術風格和感人的故事斬獲超高的口碑和評分。


          Disney · Pixar《心靈奇旅》


          OceanPlastic 廢棄塑料重造



          概念闡述

          2020 年世界各地重大自然災害頻發,環境污染嚴重,刺激著人類對生活環境的審視。更多品牌開始探索材料再利用的可能性,從自然衍生產物出發,從而降低對大自然的破壞。年輕一代對于再創造產品有更高的接受度,循環材料轉化為塑料顆粒,組合成獨一無二的花紋和肌理,給人專屬限量感,再生材料成為新的流行元素。



          應用場景

          消費者將繼續青睞和衛生健康、環境保護相關的價值品牌,越來越多的快消、包裝廠商開始研究材料回溯,組建相關部門,加入循環經濟浪潮中。



          相關案例

          運動品牌 Adidas 與 Nike 都推出了由回收廢料制作的充滿設計感的產品,在宣傳品牌環保意識的同時也引領了再生產品的潮流。


          adidas 與 Parley Ocean 合作推出由海洋回收廢料制作的聯名產品


          同樣使用了廢棄材料的 adidas 球衣


          Nike 將生產車間加工過程中產生的邊角料轉化為產品設計的主要材料



          由 99% 廢棄奶茶杯+ 1% 廢棄原茶渣再生而成的「真垃圾·手機殼」


          TRASHAUS 真垃圾再生手機殼


          Freitag 的 2020 新款 F601 MALCOLM 是一款個性化背包,用一塊再生的防水油布保護,并由用空PET瓶制成的防水織物制成。


          F601 MALCOLM


          除消費產品外,肯德基的可回重復利用餐盤、星巴克倡導的紙質吸管、外賣行業各公司的環保舉措等也體現了餐飲外賣行業對循環經濟的重視。


          結語

          無論是后疫情時代世界的變化、新技術的發明應用或是國際社會環境的走向,都會影響大眾的生活習慣、行為方式和審美取向,同時也決定了未來設計的發展方向。但這其中不變的,是軟硬件發展不斷突破視覺表現的上限、設計師追求「以人為本」的核心理念以及通過設計去提出和解決問題的目標。


          我們期待著上述預測性的分析能在今年的設計中被驗證。但設計本身是一個迸發新奇創意的過程,也希望上述的設計趨勢能激發設計師們更豐富的靈感、為設計領域提供更多的可能性。


          新的一年,在「變化」與「希望」的新主題下,我們一同加油!




          原文地址:站酷
          作者:今日頭條UED

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

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

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

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

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



          UI/UX的趨勢分析

          純純


          在色彩方面,雖然UI是一個相對獨立的設計環境,但其實一直是在跟隨平面的趨勢。

           


          年初潘通發布了2021年的色彩流行趨勢,灰黃色一時間成為了我們追逐的目標。

          但是潘通流行色更多是表現了一種當下的社會情緒與遠景追求,并不是用來指導設計的。

          (圖片來源:Dribbble)


          在UI的色彩方面,我們都記得2020年還是流行的是高飽和色彩路線,而2021年UI色彩一下子就被沖淡了,各種低飽和度色彩的作品更加得到設計師的青睞,似乎也昭示著大家的情緒也從疫情中慢慢穩定了下來,這個世界的確需要設計來對情緒進行即時表達,在5月份Google的全新Material You設計語言中,這種低飽和色彩也被發揮的淋漓盡致。相信低飽和度色彩將在2021下半年會延續發展!


          有關Material You信息可以看一下我的另一篇文章《Material You 為你而來!》


          (圖片來源:Google Material You)


          (圖片來源:Dribbble)


          圖形方面,亮點在3D!毫無疑問3D插畫在2021上半年繼續著他的強勁勢頭,2021上半年涌現出了大量優秀的3D風格插畫,并且不止是3D卡通人物,在產品渲染和背景展現上也在醞釀新的力量。特別說明的是,設計工具的高速發展也讓3D門檻不斷降低,如果你只盯著C4D那就真的OUT了,像Blender Spline Stager 這樣的新興輕量級3D工具軟件是需要特別關注的,也許這些新工具是真的能讓你跑出與別人不一樣的賽道。


          (值得關注的3款新興3D軟件)



          在2D圖形方面,也有突破,除了傳統的矩形、圓角矩形、圓形之外,UI中將會引入到更多的形狀,像多邊形、三角形、不規則形都會大量的出現在UI設計中,UI設計越來越開放和放得開了!



          (圖片來源:Google Material You)


          隨著去年底蘋果BigSur操作系統的發布,3D圖標著實火了一段時間,出現了不少3D風格圖標。但是后來大家發現在圖標在2D層面其實還是很有創新點的,并且也更加實用,所以我們又看到了磨砂玻璃風格圖標走入了我們的視線。這種采用背板透光設計的風格圖標,看起來清新自然,一經亮相就讓設計師們喜歡起來了!

          (圖片來源:Dribbble)


          但無論是3D風格還是磨砂玻璃風格圖標設計,從某種意義上說,這些都是擬物化設計的一種新的回歸方式,設計就是一個圈哪!


          排版設計,塊狀與字體成為了關鍵詞。先看幾個作品,你發現了什么了嗎?


          (圖片來源:Dribbble)


          UI設計的排版不止是為了視覺好看,更多是要做信息的分割與歸類,讓信息閱讀快速準確且優雅!從某種方面也就是我們說的用戶體驗。當下仍然是扁平化為主體UI設計語言的時代,陰影設計幾乎已經退出了當下的主流設計,所以在信息的區分上靠的就是留白與文字,所以加粗大字體,卡片留白、形狀色彩塊就在UI排版設計中起到重要的作用。再輔助通過一些微交互動畫,一切都是那么自然絲滑,主次分明!


          (UI排版的三個趨勢)


          最后我們說說行業趨勢方面,在2021上半年的UI設計作品中,除了常規的移動端APP UI設計之外,我們更多看到了一些針對于其他設備的UI設計,比如說電腦B端應用、車載HMI、數據可視化、交互動畫等這樣的新端趨勢,并且這些作品的數量越來越多了,所以從行業趨勢來講,UI設計師們還是要打開更多的眼界和格局,設計的競爭不止是在水平能力上,更重要的是行業賽道的選擇!關注趨勢尤為重要!


          (圖片來源:Dribbble)

          原文地址:站酷
          作者:騰訊ISUX

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

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

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

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

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



          從視覺產品兩方面,分析2022年B端設計的發展趨勢

          ui設計分享達人

          前言:

          在 2020 年,疫情最為嚴峻的時候,B 端這一領域得到了前所未有的關注,而那時,身為 B 端用戶體驗設計師的我,也曾總結過,當時 B 端設計的諸多趨勢,比如:

          多端需求:即桌面端、平板端、移動端的設計形式

          設計中臺:擁有更為統一的設計平臺,與這兩年討論較多的設計資產相同,都是起到快速協作的作用

          隨著 2022 年的到來,B 端行業又會迎來哪些新的機會?今天我們就從整個的 B 端入手,回顧一下 2021 年的設計形式,展望一下 2022 年的設計趨勢。當然趨勢完全是我自己個人主觀理解,僅供參考,如有異議,以你為準~

          完整的趨勢,我們會分為視覺趨勢與產品趨勢

          1. 視覺趨勢:主要圍繞設計當中的細節展開,比如圖標、色彩、字體、插畫等
          2. 產品趨勢:主要是了解不同的 B 端產品當中究竟有哪些發展形式,對于設計師又會產生何種影響?

          視覺趨勢

          1. 3D 設計風格

          雖然 3D 化的視覺風格早已到來,但是在 B 端市場上,3D 風格在此之前依舊表現的十分克制。隨著 C4D、Blender 這些 3D 建模軟件的不斷普及,再加上互聯網上關于 3D 建模教程的增多,你會發現 3D 風格的視覺表現,是一個 B 端視覺設計師的基本要求。

          而 3D 風格用在 B 端軟件當中,會有兩個使用場景:

          圖標

          因為在 B 端產品當中,圖標本身就是非常難以去表現,比如“物聯網,大數據”,許多抽象詞匯很難通過一個具象的事物進行表達,而在企業官網當中,在視覺表現上的要求又十分的高。因此你會發現,在視覺風格上的選擇,往往只有 3D 圖標 + 插畫這一條路。

          從視覺產品兩方面,分析2022年B端設計的發展趨勢

          并且 3D 圖標的使用場景不會太過于局限,也可以用于產品的工作臺、運營營銷工具箱等頁面,因此 3D 圖標的出現,它的應用場景也會相比之前要更加的廣闊。

          從視覺產品兩方面,分析2022年B端設計的發展趨勢

          可視化大屏

          大屏設計也在不斷的“內卷”,因為傳統的 2D 可視化大屏所搭建出來的大屏已經滿足不了企業的野心, 像 DataV 騰訊云圖 ,大家都在朝著 3D 風格,炫酷的方向進行延展,因此也就會導致 3D 的視覺風格需求激增,而 3D 建模仿佛就是大勢所趨。

          從視覺產品兩方面,分析2022年B端設計的發展趨勢

          2. 新擬態

          雖然新擬態是在前兩年的產物。這個設計風格背后,遭到了很多設計師的質疑與排擠。但是隨著這個風格的不斷成熟,感覺它在 B 端視覺領域(特指的是官網 ),是非常受歡迎的,因為整體的風格,與官網的設計形式趨同。

          同時作為 B 端產品的官網,其實是更需要新擬態這種風格。因為電腦場景下鼠標光標對頁面進行 Hover 操作給出的真實反饋,而使用了新擬態的官網按鈕,給你的反饋非常真實。

          這里安利一下騰訊云的首頁官網,大家就會發現在設計風格上大量的采取了新擬態元素,并且配合 3D 風格的圖標,以及毛玻璃材質的設計,讓它的設計瞬間加分不少。

          從視覺產品兩方面,分析2022年B端設計的發展趨勢

          3. 開源的設計系統

          在去年,設計系統迎來了一波發展的高峰期,隨著字節、騰訊,三大設計系統(Arco Design、TDesign、Semi Design)的開源,其實是給我們很多 B 端設計初學者,有了更加完整仔細的 B 端入門教程。

          從視覺產品兩方面,分析2022年B端設計的發展趨勢

          清晰的講解了每一個組件的使用方式,以及注意事項,仔細閱讀這里面的內容,其實就是 B 端設計的入門學習。而未來,國內的環境,開源的系統也會越來越多,大家可以針對這幾大類不同的設計系統進行對比,或許會有一番收獲。

          產品趨勢

          4. 超級 app

          這里的超級 app 可能和大家潛意識里的支付寶、微信這些軟件不太一樣

          在 B 端行業,隨著疫情的不斷擴散、再加上兩年時間的發展,很多 B 端產品的功能架構都出現了一個現象,產品的功能開始變得非常擁擠。因為 B 端軟件的核心價值其實就是靠著一個又一個功能去累積,也就意味著隨著 B 端產品的發展,功能模塊在不斷的累積,導致在設計層面,這樣的現象變得更加嚴峻。

          你會發現左側的導航菜單已經完全沒有辦法裝下這些導航內容,而這一現象也反映在很多產品當中,比如我了解的飛書管理后臺、薪人薪事 等等諸多 B 端產品,它們在整個導航內容上,已經增加到一級導航 15+ 、二級導航 40+ ,這無疑會開始對設計師的能力造成巨大考驗。

          從視覺產品兩方面,分析2022年B端設計的發展趨勢

          面對這一情況,許多導航菜單都將會迎來前所未有的挑戰,最近也在深入研究導航菜單過多時的解決辦法,發現了一些新的導航菜單設計方法,有機會咱們重新梳理一下導航菜單的內容,將 B 端設計指南文章進行更新。

          從視覺產品兩方面,分析2022年B端設計的發展趨勢

          低代碼定制化

          低代碼一直是我關注的一個領域,先給不明白低代碼的同學簡單科普一下。

          低代碼,一種快速開發應用的軟件,將通用、可重復利用的代碼形成組件化的模塊,通過圖形化的界面來拖拽組件并形成應用。低代碼能夠實現只寫少量代碼或不寫代碼,類似用“樂高積木”的方式來開發。

          在國外有很多著名的低代碼成功案例。Outsystems(國外非常出名的低代碼平臺)幫助施耐德電氣在 20 個月內推出了 60 款應用程序,開發過程加速了兩倍;在 2012 年即將推出 Model S 之際,特斯拉放棄了 SAP 的 ERP 產品(可以思考一下為什么),改用低代碼開發平臺 Mendix,用 25 個人四個月時間自建 ERP 系統。

          去年,低代碼平臺,也有很多新產品面世,其中就包含:

          從視覺產品兩方面,分析2022年B端設計的發展趨勢

          因此你會發現,其實低代碼就是在解決一件事,圍繞著某一個業務場景,通過平臺的持續完善優化。讓所有的功能都能圍繞這個業務展開,其中包括:權限、時間軸、流程、表單、公式等等,能夠解決很多特殊的業務場景。而低代碼會涉及到設計思路上的轉變,以及低代碼編輯器的出現,如何去設計如此復雜的配置流程,如何讓用戶能夠快速上手,如果你能夠有比較完整的思路,這些都會成為我們設計的新機會。

          行業細分

          隨著互聯網市場的不斷發展,用戶會越來越關注產品在自己行業的應用,比如 CRM,其實只是一個籠統的稱呼,現在 CRM 市場又會分為 SCRM、運營 CRM,等諸多產品。

          SaaS 類的平臺也出現了負責從虛擬主機和數據庫層面入手的 iPaaS 以及從應用和數據層面入手的 aPaaS。

          即使是大家經常使用的 釘釘、企微、飛書,它們也在各自的領域有所擅長。

          從視覺產品兩方面,分析2022年B端設計的發展趨勢

          因為 B 端產品,在底層邏輯上是不能允許趨同的產品出現,如果你和別人的產品一樣,其實是沒有辦法在目前的市場上立足。因此你會發現,雖然產品形式都會比較相同,但是 B 端市場十分廣闊,大家都在去尋找自己產品的差異化。

          當然市場是瞬息萬變的,這里也只是簡單聊聊我自己的看法,希望對你有所幫助。

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

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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