文章來源:站酷 作者:功夫UX
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
看完這一波網頁 UI 類設計,再也不愁接下來該如何做設計創新了。
這是今年出鏡率比較多的一種設計風格,不管你是在 Dribbble 還是 Behance 上都能見到它的影子。這種風格設計最大特點:形式感、聚焦、簡約而不簡單。
當然還可以是將線圈與文字疊加圖片,有一種層疊縱深布局感受。
又或者說圖形只是作為裝飾作用。
純文字版式在今年版式中出鏡率也是相當之高,包括深圳設計周官網也幾乎都是幾個大字排版。其實我們仔細思考,將文字放大處理,有點圖形化的意思。
上圖是典型的文字圖形化,將文字轉化成線性設計。
圖文混合設計風格大膽、新穎,讓人眼前一亮。這種版式布局一般會出現在設計工作室網站居多一些,追求形式感與觀賞性。
圖文混合設計,不光只是圖片與文字混合排版,還可以是圖標與文字、粗字體與細字體之間的混合穿插。
圓形設計趨勢一直都存在,在網頁設計中出鏡率高也是毋庸置疑的事情。畢竟圓形本身自帶超強親和力、聚焦。設計用它可以解決很多枯燥的版式,讓畫面瞬間活了起來。
還可以將文字處理成圓形,與圓形圖相呼應。
文字輪廓化版式今年出鏡率尤其之高,將文字輪廓化設計處理,減輕了文字的視覺重量感,更像是將文字線條化設計處理。
文字輪廓化設計還可以用在背景,作為設計裝飾效果。
玻璃質感設計趨勢,也是今年最火的設計風格之一。那么它在網頁出鏡率也是在下半年開始逐漸多了起來,也許是設計師發現這種質感細膩與折射光透露出的細節之美。
線無疑是圖形里面運用較多的,今年發現很多網頁中都加了線條作為版式裝飾,或者就是純線條版式設計,讓人眼前一亮,原來還可以這樣玩。
線條在這里作用明顯,除了美學設計裝飾之外,它還用作信息層級區分。
圖與線疊加
純文字版式
圖文混合
圓形版式
文字輪廓化
玻璃質感
使用線條
動態設計有助于創建令人愉悅且直觀的用戶界面。好的動態設計,不僅能引導用戶對數字產品的體驗,還可傳達有關產品的品牌信息
動態設計(Motion Design)有助于創建令人愉悅且直觀的用戶界面。好的動態設計,不僅能引導用戶對數字產品的體驗,還可傳達有關產品的品牌信息。本文將介紹近來最流行的動態設計趨勢,這些令人驚艷的動效表現手法,在不久的將來勢必席卷所有人的目光。
讓界面元素在用戶流程中順暢地轉變與過渡,將用戶操作導向期望的任務結果。
在轉換場景的過程中扮演潤滑劑的角色,闡明場景之間的位置、層級與空間的關系。
聚焦用戶視線,將其注意力放在重要的事情上,從而起到信息傳達、提升識別度的作用。
運用引人注目的表現手法將信息傳遞給用戶,包括變形、動態文字和背景動畫。
在視覺平面中創建空間層次結構,遮罩與視差是常用的表現手法。
突破二維限制,將界面元素多維化營造空間感,例如3D動態圖形和攝像機運動。
2021年看到許多有趣、吸引人的插圖,而更多的設計師開始為靜態圖像添加動態,也讓GIF和動畫插圖越來越受歡迎。
動態的有機形狀,包括流體、煙霧和火焰等粒子效果,能夠極大地增強視覺效果。流體動態并非明確的過渡與場景轉換,而是顏色在流動的液體中擴散,進而創造出抽象或真實的視覺形狀。這種風格能實現無縫過渡,并為設計增添有機感,也是2021年最引人注目的動畫趨勢之一。
扁平化設計缺少現實質感的元素,搭配漸變色能有效緩解不足,為設計創造深度與層次。變化中的漸變色同時帶有動感與舒緩,充滿活力卻又平靜。使用動態漸變能讓設計師展示一系列不斷變化的情緒,許多內容創作者和品牌已經注意到這一點,開始在廣告活動、識別設計和數字內容使用動態漸變。
在用戶體驗設計中微交互變得日益重要,而動態設計正是微交互的靈魂所在,即使只是微小的視覺提示或反饋,都是人機交互易于使用的關鍵。從經典案例來看,微交互的動畫細節必須帶有明確的目的性,讓用戶獲得實時反饋,指導用戶進行下一步。從近幾年的設計趨勢來看,微交互已成為不可或缺的存在。
by Илья Бабушкин
過去幾年動畫商標是最流行的動畫趨勢之一,通過各種視覺效果,設計師能創造出不同類型的動畫商標,許多企業開始采用動畫商標作為吸引注意力的手段。多數情況下,商標是進入網站時最先看到的東西,因此商標應該令人難忘、引人入勝,并使用符號或排版來揭示品牌個性。結合動畫的優勢,設計師可以運用一些動態或效果來講述簡短的故事以強調品牌特征,并為靜態排版和商標注入一股活力。
by Yulia K.
動態文字是使用移動文本來吸引注意力的動畫技術,許多卓越的品牌在網頁設計中使用動態文字,為網站外觀增添動感和視覺沖擊力,是近年UI動畫的趨勢之一。
by HOLOGRAPHIK®
通過背景動畫來強化敘事,成為許多行業常用的品牌傳播手段。你可以創建動態的品牌故事,展示有趣的制造過程、產品的使用場景。背景動畫深獲大眾喜愛,它能讓用戶在進入登錄頁或網站首頁時,輕易地了解更多有關公司或產品的信息。調研顯示,從銀行、醫療保健公司、電商零售商、餐館到B2B供應商,這些跨越不同細分市場和行業的網站都開始使用背景動畫。
by Carlo Soleri
by Kirill Zhukovsky
遮罩過渡是將幾何或有機形狀作為銜接下個場景的遮擋物,等同于舞臺幕布設計,能在界面元素進場或退場時創造連續性效果。這種表現手法簡潔高效,是最常見的過渡動畫之一。
其中一種遮罩過渡,是將當前場景完全置換,如同揭開蒙在上層的布,逐漸展露疊在下方的景,并利用景物相似性和動作延續性,讓兩個場景能夠順暢地銜接,不致于差異過大,造成用戶心理負擔。
by intent
另一種遮罩的表現形式,較無明顯的場景過渡,而是利用遮罩來表現景物的狀態變化,界面元素和布局基本保持一致,以此塑造無縫過渡的視覺效果,這種手法被廣泛地使用,例如氣候變化、人物換裝、產品組合等。
by Daniel Tan
視差是利用不同的界面元素以不同的速率移動,創造前后景深的分離效果,借此在平面中塑造空間層次,已成為網站首頁最為普遍的表現形式。
by Studio V?R
近年來,結合3D動態圖形的界面設計呈現爆炸式增長,雖然創建3D動畫需要更多的時間、技巧與協作,但不可否認的,3D動畫比2D圖形更加逼真,從而提供更具吸引力和互
動畫的吸引力在于能夠創建各種角色,并為無生命物體注入生命力,表情符號就是一個很好的例子。作為獨特的網絡語言,表情符號生動地描摹日常面對面交流的非言語信息,隨著圖形界面的設計趨勢逐漸結合2D與3D,運用3D動態圖形來創造更加動感、擬人化的表情,能讓這些非言語信息更加豐富,有機會引領下一波風潮。
3D動態圖形為平面設計建構了空間敘事框架,在扁平化界面中展現立體感,從而表達空間中元素的位置與層級關系。多維化的發展趨勢,推動了視覺表達形式的演變,空間感讓界面設計更符合人類的認知邏輯,運用各種3D運動特效,包括旋轉、翻轉、折疊、透視、Z軸位移等,打造令人難忘的感官沖擊。
by UI8
擬人化能讓物體、植物、動物等非人類事物,表現出人類屬性的行為與狀態。動畫片運用擬人的手法是最普遍的,1927年迪士尼第一部系列動畫《幸運兔子奧斯華》的主角便是擬人的兔子形象。由于人們容易被以人類行事的事物所吸引,越來越多設計師在界面中添加擬人元素,利用這種效果讓畫面更加生動有趣,增強用戶體驗的愉悅感。
在動態設計中,攝像機運動是最自由、靈活的一種表現形式,能讓畫面過渡更有張力,突破2D平面在視角上的限制,創造一個無界線的立體空間。常見于影視、動畫和廣告的攝像機運動,包括推近、拉出、平移、跟拍等方式,備受動態設計師青睞,讓用戶以多變的視野探索數字產品。
推鏡頭是指被拍攝的對象不動,攝像機由遠而近,朝著對象不斷推進, 用來突出人或物的主體。鏡頭推近的運動方式,用來呈現從整體到局部、由分散到集中的變化,引領用戶進入故事情景,給人一種身臨其境的感受。
by Michael Crawford
水平向左或向右,垂直向上或向下移動攝像機,使畫面不斷變化,讓用戶跟隨鏡頭視角一起移動,產生一種置身其中的感覺。這種運鏡方式,通常用于具體的場景,利用角色或景物的延續性來消除場景過渡時的邊界,表現出一種流動感,無論是手勢滑動或鼠標滾動都能有順暢的操作體驗。
by Netguru
運用多種攝像機運動相當普遍,既能擴大視野,又有很強的空間感,可以更加自由與多樣地展示不同視角和情景。比方說結合橫搖(Pan)、直搖(Tilt)和跟隨(Tracking)鏡頭,連續而詳盡地展示一個產品,由于畫面始終跟隨一個主體,有利于突出產品特徵,并讓用戶從不同的角度和距離觀看產品,是一種增強臨場感和參與感的有效方法。
by Gregory Riaguzov
在電影中為了不將觀眾的情感和注意力割裂,使用一個鏡頭來完成全片的場景刻畫和敘事,這種拍攝手法被稱作一鏡到底或長鏡頭。連續鏡頭逐漸被運用到界面過渡,以此增強操作過程的流暢性,例如一氣呵成的購物體驗,或是貫穿全場的人物角色,其特點是給用戶最沉浸的感官體驗,無間斷地體驗整個流程。
by Orizon: UI/UX Design Agency
by Minh Pham ?
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計趨勢可以塑造一切,從設計師的創作方式到用戶界面設計,再從網站到包裝設計的未來迭代方向。因此關注現在的流行趨勢很重要,這樣您的設計就不會很快過時。
讓我們深入探討2022年的一些頂級網頁設計趨勢。我們將著眼于 2021 年末開始出現的趨勢,這些趨勢將為來年即將流行的設計趨勢奠定基礎。
閱讀更多以前的趨勢文章:2021 年網頁設計趨勢
目錄:
有趣、積極樂觀的設計
黑白配色方案
大膽和實驗性排版布局
超大鼠標指針
三維設計元素的應用
近乎野蠻
滾動文本元素
玻璃擬物風格
更多漸變
無圖片主頁
圖層效果
分屏美學
交互式字體
巨型頁腳
包容性設計
非凡的想象力
結論
時髦的形狀、顏色,甚至面孔可以帶來很多的樂趣。設計師們正在使用這一網頁設計趨勢,應用到公司機構、電商或個人展示類網站內容,提供趣味、樂觀的設計(如上面的示例),這些設計的共同點是它們為世界注入了一點額外的快樂。
沒有什么比笑臉更能表達樂觀了。恰當的配圖是描繪這種氛圍和利用這一趨勢最簡單方法。注意拍攝技巧和被拍對象的整體形象,尋找與內容契合角度,例如上面來自 LegalSuper 的示例。
在經歷了全球肺炎大流行的幾年之后,設計師們正在為設計的項目增添一些額外的樂趣和溫度。這就是我們現在都需要的感覺。
趣味和樂觀的情緒被注入以面孔為載體的配圖上、較細的字體、有趣的搭配,以及散發出積極情緒的顏色。為了充分利用這一趨勢,請考慮較細的元素并避免選擇使用較粗的字體或厚重的配色。
FOFSO用鮮艷的衣服、模特緊張但帶著快樂的面孔緊盯鏡頭來做到這一點。
黑白配色方案是今年最鮮明的設計趨勢。不使用彩色,你真的必須在限制范圍內思考和設計。雖然這聽起來有點嚇人,但它可以釋放并激發你的創造力。結果絕對是驚人的。
從另外一個角度來說,黑白配色的設計幾乎無處不在。這種對比鮮明審美表明有很多設計師會關注簡單和直接。
使黑白配色方案既清新又現代的關鍵在于應用恰當的效果和表現技巧。
在上面的例子中,懸停時有一個微妙的、流動的動畫以及超大的鼠標反色指針來增強交互性。
在2022年,沒有錯誤的字體排版方式。大、黑、粗——甚至是襯線字體——無處不在。他們看起來棒極了。在使用這種網站設計趨勢時,請考慮文字將如何動態響應(在手機屏幕上一切看起來都將不同)以及如何最大限度地對訪問者產生影響。許多實驗性字體不僅設計有天賦,還包括動畫或 flex(CSS響應字體布局) 選項等元素。
從輪廓到彩色字體,再到不斷變化的形狀和填充,大膽和實驗性字體應用在網站設計中占據主導地位。談到今天的網絡排版,真的沒有規則,設計師們在打破束縛重建一切可能。
Garcia Salmeron在主頁的設計上使用了多種字體效果來體現這一趨勢:混合和匹配主標題中的字符、帶有實驗性的字體選擇以及帶有圖像和背景的彩色填充層。
這是一種新的設計趨勢,點擊上圖鏈接,您會看到許多超大光標的應用示例,在參與設計過程中,在網站前端交互完成之前根本看不到超大指針或鼠標懸停的實際效果,這屬于頁面交互效果的一種。
這個用戶交互界面的應用無處不在。最常見的例子和用法是 Jade Sheng 的例子,它的圓形指針在屏幕上移動,甚至可以在穿過可點擊元素時改變顏色。
這種 UI 設計趨勢的偉大之處在于,它為網站訪問者提供了有價值的可用性信息,并幫助他們更好地參與改進設計,提升用戶體驗。
雖然在2020和2021年有很多設計師為網站進行全面的3D化設計,但新興趨勢是將扁平的元素通過3D控制與整體有美感結合起來。
具有3D風格的元素屬性包括用于創建深度和維度的陰影、動畫以及拉伸和變形等圖層效果。
Sennep 在上面的例子中使用一個手指插圖引導用戶發現來做到這一點,伸出手指扶正標題。插圖使用手部動作配合陰影來完成這種好玩的設計。
是時候思考在3D三維界面中完成所有事情了。從真實的網絡模型到具有深度的視頻或照片插圖,三維元素有助于為設計提供更好更直觀的理解,例如上面的建筑渲染,或者增強視覺刺激興趣點。
三維設計也延伸到視覺敘事??紤]如何以突出景深和陰影的方式講好您的故事或產品展示。例如上面的示例使用視頻,是有效傳達這種風格的最可靠和最真實的方式之一。
野蠻主義是最近比較矚目的網站設計趨勢,但它對于大多數項目來說過于苛刻和尖銳。于是進入這一趨勢的最新迭代——“近乎野蠻” 的出現也就不足為奇了。
這些設計沿用了許多相同的鮮明效果,但邊緣處理更柔軟。即使有一些明顯的邊界和線條,元素之間也有足夠的空間,而不是銳利的硬邊緣。
沒有太多的裝飾或其他視覺效果,留下顏色和文字來真正承載這些。其結果更引人注目,不至于太苛刻把用戶拒之門外,是野蠻主義和可用性的結合體。
雖然我們總是希望文本元素可讀,但它們也可以是動態的。滾動文本元素——通常使用超大字體,只有幾個字,在同一個位置循環出現——可以強調關鍵詞并激發用戶的興趣。
文本滾動通常往屏幕左側位置緩慢移動??招拿柽呑煮w是一種流行的選擇,保持可讀性的關鍵是使用簡短的常用詞或短語。
引導用戶關鍵行為召喚用語和其他消息應與滾動文本分開,以確保網站訪問者可以輕松閱讀它們。
滾動文本選項不僅僅是網站設計趨勢或技巧,它們實際上可以幫助鼓勵用戶互動增加參與度。在上面來自 Mama Joyce Peppa Sauce 的示例中,超大鼠標光標內包含滾動文本,該文本顯示的是更大的滾動文本。(您甚至可能想重復觀看這個互動內容。)
玻璃擬態風格(Glassmorphism)的最初始于2020年末和 2021 年初的新擬態風格(Neumorphism),并演變進化成現在流行的玻璃擬物效果。
Glassmorphism設計外觀讓人聯想到玻璃。有透明、折射或光澤等元素構成。
很多設計師在追波(Dirbbble) 上展示使用這種設計風格的作品,也可以在大量已發布的網站設計中找到這種設計方法的設計。
漸變的應用一直很廣泛。在2021年之前的設計中的大部分漸變都出現在背景中。
2022年,漸變將會增加兩種新的形式:
l 文本顏色漸變填充(如上面的例子)來增加影響和突出強調
l 填充矢量插圖或圖標以創建漸變紋理效果
沒照片?沒問題!無需圖像也可設計,讓我們在2022年緊跟潮流吧。
使用不同類型的UI或設計技巧,來充分美化沒有圖像的主頁。在此處的示例中,Kirifuda 使用了漂亮的黑白配色方案,在文本元素之間增加疊印效果。超大字體和手寫風格的字體有助于將它們整合在一起。(請注意將其他設計趨勢與這一趨勢相結合以獲得出色的效果。)
沒有圖片的設計也是嘗試其他技術的好機會,例如動畫、鼠標指針懸停狀態或其他交互元素。
主頁上沒有圖像的設計通常會導致美感缺失。但這完全沒問題。使用另一種設計方法來激發用戶興趣吧,例如使用有趣的大文本字體元素。
圖層堆疊、元素間距和圖形重疊可以在設計元素中產生景深錯位效果,彼此之間建立連接。分層效果展示明顯又直接,也可以簡單一點。這兩個選項可以一起使用或單獨使用以產生整體影響。
State Creative 使用多個圖層——背景、中景、前景——以視覺上有趣且有意義的方式將各種元素組合在一起。
分屏美學重新流行。幾年前的趨勢是出于可用性和響應性的原因,現在它更像是一種細分設計。
這些視覺效果可以包括水平或垂直分割的屏幕,每一側具有相同或不同的功能或點擊動作。
最好的分屏設計可以同時做兩件事:
l 提供了強烈的視覺沖劑體驗
l 他們使用多個入口點來深入挖掘內容
可變粗細的交互字體在大多數情況下,這種效果需要使用懸停狀態才有效,盡管您可以嘗試其他一些更復雜的效果。(帶有流體字體動畫也越來越受歡迎。)
在考慮交互式文本元素時,請優先考慮內容的可讀性和易于理解性。文本的效果僅在其中的文字可讀和可理解時才有效。(否則設計的意義就會丟失。)
當設計展示相對簡單時,這種設計才最有效。這個技巧在單獨使用時是最好的。
誰能想到網站頁腳——尤其是那些包含大量信息的頁腳——會成為流行的網站設計元素?
對于包含大量信息、大量頁面或多個節點入口的網站,超級頁腳是 2022 年必備的設計元素之一。
世界自然基金會有一個雙層頁腳:
l 在粗黑條中,有三列菜單選項,便于導航,按用戶可能想要在站點上執行的操作(發現、支持、聯系)分組
l 黑條中還有一個完整的注冊表單,用于了解訂閱有關該組織的更多信息
在底部較細的白色頁腳欄中是組織信息、社交媒體鏈接、非營利免責聲明、版權聲明和服務條款鏈接(隱私政策、披露信息和相關條款)
當存在明顯具有不同目的的元素分組時,超級頁腳效果很好。帶有標題的列格式以及水平底部錨點幫助, Wild Souls的這個頁腳看起來很棒。
巨型頁腳甚至可以呈現出“近乎野蠻”的風格。訣竅是使用元素來創建獨特的組織感,以便用戶知道如何輕松找到他們正在尋找的信息。
設計師正在努力打造一個更具包容性的網絡,它幾乎體現在所有已發布的內容中。從圖像到語言再到替代文本,沒有理由不嘗試讓您的項目更加包容所有人。
包容性延伸到種族、性別中立、文化、可及性和能力上。共同的主題是您的網站應該以這樣的方式組合在一起,以便任何想要訪問內容的人都可以訪問到內容,并且人們也可以在屏幕上看到他們可以與之相關的其他人。
這里的要點是,你不需要用大喊“我們具有包容性”的圖像和語言。這是展示比講述更重要,真實比蠻力更重要的設計。
真實和想象之間的界線從哪里開始?當您查看大量網站時,可能無法100%確定。沒關系。
享受這種想象力帶來的樂趣,融合真實和想象,創造出非凡的圖像。你的想象力是這里唯一的限制。
在 K Plus Film 的示例中,人物位于屏幕周圍飛舞的水果頂部。顏色和比例創造了一種引人入勝的視覺效果,這真是太棒了。
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
印象中,Windows 就一直伴隨著我們的成長,它有著 35 年的豐富歷史并不斷帶給我們新的體驗,它的存在充分展現了計算機如何豐富我們的生活習慣:用 Word 寫下第一篇文章,用 Paint 畫出第一幅畫,或者用電腦寫出第一行代碼。
設計下一代 Windows 需要我們理解過去,但更重要的是對當前和新興人類需求的深切共情,以及對技術如何更好落地的理解。當我們開始 Windows 11 的設計之旅時,我們研究了過去 18 個月世界是如何變化的,包括疫情大流行暴露出未被滿足的需求和新的行為方式。更重要的是,我們與人們談論他們的夢想和抱負,這樣我們就可以了解什么驅動著他們,以及他們需要從他們的技術中獲得什么來實現他們的目標。Windows 11 的設計專注于對人的關注,計算機如何賦予他們力量,以及用戶到底喜歡什么。
創造大量的愛需要大量與人的溝通,我們喜歡這種溝通,因為以人為本是我們設計理念的核心。在 85 個以上的專題研究和數萬輪測試中,我們與所有人進行了交談,從喜歡我們產品的忠實粉絲,到希望 Windows 更容易和更平易近人的新用戶。
Windows 10 之前使用 Metro 設計語言,Windows 11 使用 Fluent 設計語言
(彩云注,可能有的朋友分不清這 2 個設計語言,彩云專門研究了一些資料,也跟大家一起分享下:
Metro UI 是一種界面展示技術,和蘋果的 iOS、谷歌的 Android 界面語言最大的區別在于:后兩種都是以應用為主要呈現對象,而 Metro 界面強調的是信息本身,而不是冗余的界面元素。顯示下一個界面的部分元素在功能上的作用主要是提示用戶信息的存在。同時在視覺效果方面,這有助于形成沉浸感。
Fluent Design System(以下簡稱 FDS)主要包括五大核心元素:Light(光感)、Depth(深度)、Motion(動畫)、Material(材質)和 Scale(縮放)。
Fluent UI 設計語言的核心就是在美觀的前提下,應用的使用更加自然和流暢。在體驗上用戶會獲得全新的過渡動畫、視覺效果、半透明和模糊等等。毛玻璃效果重新成為趨勢就是微軟通過這套設計全新語言一手帶起來。
這是 Windows 有史以來最受人期待的發布之一,這得益于基于研究過程中得出的一個關鍵設計指導原則:平靜的技術讓我們的生活真正變得更好。在今天的世界中,平靜是非常需要的,它往往取決于我們掌控、放松和信任的能力。Windows 11 通過讓人感受到熟悉的基本體驗,軟化了以前冰冷的 UI,并增加了情感聯系,最終促進了這一點。這些改進讓你更接近你最愛的東西:家庭、朋友、激情、娛樂和創作。Windows 11 是將所有東西結合在一起的地方,對它的需求從未像現在這樣強烈。
就像它對所有東西造成的影響一樣,疫情也影響了 Windows 11。雖然移動設備的崛起讓 PC 從聚光燈下淡出,但去年它又重新回到了舞臺中心。在個人與專業相結合的新型虛擬模式中,PC 的強大功能和靈活性使我們能夠在家中的各個角落工作。它始終是一個值得信賴的工具和伙伴,跨越工作、家庭和學校,靜靜地等待我們的輝煌時刻。
過去的一年充分展示了人類的智慧。在一片混亂中,我們看到人們實時學習如何在混合環境中工作,幫助孩子學習,并找到新的連接和娛樂方式。我們在 Windows 11 的設計上不斷迭代,努力創造一種深受大家喜愛的體驗,讓我們更容易專注于對我們每個人來說最重要的東西。
情緒板捕捉各種新的圖標、主題、UI 和插圖。
微軟的 Windows 設計團隊是由創造性的實用主義驅動的。為超過 10 億人設計需要同理心。它依賴于將人類的需求內化,以建立一個包容所有人的解決方案,同時仍能傳遞獨立的個性。隨著 Windows 躍入下一個時代,它的演變故事再次被講述,通過以人為本的產品設計,以及打造最具包容性和個性化的操作系統的承諾愈加堅定。
以“開始”菜單為例:Windows 體驗的基礎被移到了核心位置。在聽到人們在使用“開始”時希望提高效率、減少噪音后,我們設計了一種更干凈、更簡單的體驗,通過優先排序人們喜歡的應用和他們需要的文件,將用戶置于中心位置。它還適配現代設備的尺寸因素,使所有屏幕尺寸的訪問更容易,從 Surface Go 到超寬顯示器都能獲得一致的體驗。
在微軟,這些設計決策不是輕易做出的。團隊癡迷于每個像素,我們更新了“開始”Logo,以配合我們新的視覺語言和動畫,為互動增加樂趣和信心。我們也有意地選擇了壁紙,開機畫面,并調整了新的中心對齊,使用戶的體驗更加平衡和集中。我們希望你進入 Windows 11 的旅程從一開始就真正處于中心。(彩云注:大廠的設計團隊做項目更看重整體品牌感知,各個元素間都要能形成一致的設計語言。這里連居中對齊都可以跟設計理念聯系上,值得學習的思路。)
我們對讓技術更人性化的關注也反映在“開箱即用”體驗上,這個體驗曾經的歡迎詞是你“進來”,但現在是歡迎你“回來”。我們知道不是每個人都是新用戶,我們渴望通過我們的設計來尊重我們與長期忠實客戶的關系。你也可以在安裝過程中給你的電腦起一個名字,這樣 Windows 就會給你一種獨特的感覺,比系統設置中使用的隨機名字更人性化。Windows 是你們的,我們設計它是為了慶祝你們的生活和工作方式。(彩云注:在文案上也是精雕細琢,也是為了緊貼他們的設計理念)
新的 Windows 11 主題提供了個性化和自我表達的不同主題選擇
一旦你開始正常使用,Windows 11 就會記住你是誰,以及你在日常生活中需要什么。一鍵交互將帶你從一個任務到另一個任務,而不會中斷你的工作流程。在過去的一年里,工作和生活的界限被重新定義了。在新版本的 Windows 中,組織活動的能力是我們密切關注的東西,確保無論環境如何變化,你都能保持專注和心流狀態。窗口和截圖功能已經被重新設計,以記住你的喜好,所以當你離開工作流去查看新聞的時候(新的窗口部件故意設計來尊重你的工作流程),系統會記住你是如何組織你的空間的。我們創造了一個數字版的辦公桌,它就像依偎在你家里的辦公桌,讓你能夠實現一些偉大的事情,同時又能感受到與生活的緊密相連。
這些變化通過一種優美的新設計語言來實現,使 Windows 在體驗上比以往任何時候都更加連貫。聽到人們對更加柔和、友好和優美 UI 的渴望,我們進化了視覺和聽覺表達。我們圓滑了尖銳的棱角,并創建了一個溫暖的調色板,以構建一個更人性化、更平易近人的語言,同時不會妨礙你的工作效率。
一些新的 Fluent 圖標,UI 和插圖內容的選擇,以及我們的 Segoe UI 變量字體的示意
如何為超過 10 億有著不同和獨特需求的人開發產品?傾聽、迭代、適配。通過用戶的洞察,我們通過軟化邊緣、減少雜亂和一致性設計,使 Windows 11 更加人性化和受歡迎。這些變化還通過新材質、字體、新調色板、新壁紙和主題包來提升自我表達,以兼顧廣泛的品味。
在 Windows 11 中,我們看到了一種從單純的功能性技術向情感、人性和個性化技術的轉變。Windows 不僅僅是一個操作系統,它是編織在我們生活中的一塊織物,讓我們更接近我們所愛的一切,幫助我們創造和連接。
如文章開頭所說,彩云為大家搜集到了 Windows 11 最新設計語言 Fluent UI 的設計組件,供大家參考學習,
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2021 年已經九月份了,毫不例外,今年也給大家準備了明年的八個視覺設計趨勢,這些將在 2022 年出鏡率繼續升高。設計趨勢一直都處于不斷變化與輪回之中,設計風格技法也跟隨時代潮流在不斷變化。
“趨勢不一定每年都全新,但是趨勢每年都很重要”,與大家共勉。下面,我們一起來看看明年視覺設計大方向,到底有多精彩。
style="font-size:16px;white1;margin-top:0px;margin-bottom:30px;padding:0px;width1;caret-color:#525252;color:#525252;font-family:"letter10000000149011612px;">
幻彩立體也是 3D 設計的演化,在 2022 年它會依然會瘋狂的出現。不過風格上有些微妙的變化,質感更輕盈純粹、色彩更少量、圖形上更幾何塊面化,保持更真實的空間立體感受,直觀自然。
我們可以從 Dribbble 上面看到像 UI8、craftwork、Is 等,他們的 3D 作品逐漸趨近走向更簡潔風格調性,減少復雜的光影,這也是在扁平化中找到的思路。
美國電視頻道 Turner Classic Movies
今年發現越來越多幾何形狀在平面作品或者 UI 中出現,新的幾何圖形更具表意,更趨于表達真實情感。少了一些圖形的抽象化裝飾,更多的是傳達設計理念,品牌符號穿透。當分形形狀與色彩完美結合,可以創建出極具吸引力的視覺效果。
Goodfood Market
HANBOK CULTURE WEEK
unipapa 推出的衛生紙,以簡潔純白的包裝令人眼前一亮。
Gucci 發布首款只能在數字環境中穿著的虛擬運動鞋
AR 和 VR 這個大家都知道,前幾年就火起來了。今天主要提一下今年備受關注的 NFT 藝術,什么 NFT?其中文名稱是非同質化代幣,一種應用區塊鏈技術驗證的數字資產。它最容易理解的外號,是數字藝術品。
Andrés Reisinger 在 2 月份售出支持 NFT 家具
將 NFT 與平面設計聯系起來,就是我們所說的數字平面藝術。它的到來對設計師影響有很大變化,橫向能力要求有所提高,比如了解虛擬數字化設計,以及對全新審美和新三維技術有更高的要求。
Beeple 一幅拼貼畫,經過區塊鏈驗證的藝術品在拍賣會上以超過 6900 萬美元的價格成交。
Beeple 的其中一幅作品
Moooi 與 3D 藝術家 Andrés Reisinger 合作完成了這把不能生產的虛擬椅子
來源:騰訊 ISUX 出品
圖標設計一直是社交領域的重頭戲,自從去年大量在設計作品中后,截止今年依然很強勁。因為很多設計師意識到單一的枯燥圖標無法滿足一些特殊場景的情感化設計表達,平面超萌趣圖標來了,帶來更強的視覺觀欣賞性與生動性。
來源:騰訊 ISUX 出品
襯線字體在今年 Behance 作品集首頁上,可謂出鏡率可比以往高,喚起一種懷舊的感覺。也許是因為看多了襯線字體版式,設計師更多想嘗試用襯線字體來打破僵局,設計出新穎的視覺效果。
Vocation
自然設計,主張可持續性發展與環境建立聯系,是一種新生活態度,是百轉千回,回歸本源的理想之態。設計師通過設計表達對環境的敬意,與產品建立強相關,既能表達產品自然純粹之意,又可以宣傳品牌貼近我們生活自然之意。
&SMITH 涼茶包裝“循環生活”理念
TR?VE
dia Design studio
今年很多平面海報設計、品牌符號的動態系統設計中,都可以看到字體被扭曲、變形,以一種新的形態出現在眼前,沒錯,這就是超變形字體。它打破常規,以不同尋常的路子出現在大眾視野中,帶來全新視覺體驗。
1. Pinterest Sans
說到動態包裝,這是在國內外這兩年火起來一個大趨勢,首先微軟早期各種產品宣傳視頻,在到 Google、IBM、Apple 的視覺語言更新宣傳視頻?,F在越來越多廠商喜歡廠商動態包裝產品,這樣比平面展示更多細節與生動。
2. Rise
格拉斯哥設計工作室 Need 為 Rise 全新重塑品牌,同時通過動態展示品牌延展設計。
今天的趨勢分析差不多到這結束了,設計趨勢沒有好壞之分,選擇合適的應用在設計中,將發揮不可估量的作用。希望今天的分享能給大家帶來一些啟發。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2020年因為疫情,讓協作、云端、即時通訊、遠程會議、AI智能等等,成為了遠程辦公的必需品。目前,疫情在國內已經獲得了控制,后疫情時代已經到來,許多最初沒有的習慣,在發現新的工作模式更加有效率后,也即繼續保留了下來,這些保留下來的習慣,也將在2021年會更進一步的發展。
在視覺設計層面,個大設計語言陸續推出了新的設計版本,更為突出個各自設計風格,以建立自己的視覺護城河,谷歌發布了 Android 11,Apple發布了 IOS 14,微軟持續宣傳他的 Fluent UI 設計理念,在國內的辦公領域,騰訊文檔推出了類似 Fluent UI 設計理念風格,石墨文檔依舊保持獨特的東方韻味,飛書發布了飛書文檔,繼承飛書本身簡潔的 UI ,以及活潑的插畫風格。
基于 Material Design 設計的 Android 11 ,裝飾上運用簡潔的幾何圖形,UI 細節上開始趨向圓角的運用,色彩方面選擇了更為協調的配色,對比之前版本純度有所降低,顯得更為高級。視頻鏈接:file:///Users/javascript/Desktop/0bf2miadcaaa7eamerkc6fqfaywdgfraamia.f10003.mp4
UI 設計延續原有的風格,清晰的字體,大圓角的運用,加上豐富的動態效果,并且新增了許多貼心的新功能,例如懸浮播放視頻、主屏幕的Widget。
這是微軟為跨平臺,而提出的設計解決方案。支撐設計概念的關鍵詞有深度、材質、動畫、光線等等,這聽起來感覺與 Material Densign 特別相似。不過在最終的視覺呈現上微軟會更接近于真實世界。例如,透明的毛玻璃效果,或更為立體的圖標等。
Behance 和 Dribbble 在2020年出現了許多以 3D 插畫為主視覺的設計方案,因為技術的發展,設計師借助 Figma 或 Dimensions 就可以輕松的創作所需的 3D 素材。關鍵的這不是設計方案中的“花瓶”,因為在Mac的最新系統 Big Sur 中,已經開始運用了 3D 的圖標,相信在以后的 3D 的運用場景將會不斷的被挖掘出來。
2020年初時在Dribbble流行起來的一個風格叫“新擬態”,這是將投影運用到極致后出現的效果,正如作者所說的:讓我們想象一下,如果在移動界面設計中,投影的形式發展的更好的話,那將來的界面將會是什么樣子的,這是我的愿景”。新擬態在視覺上表現確實很驚艷,為此Aandroid還制作了一個新擬態的12宣傳視頻,但是主觀感覺這應該很難廣泛運用到實際產品當中。
設計專注于表現內容,這是從包豪斯到現在一直遵循的規則,而這個理念也將會持續下去。設計目標終將是需要把關鍵信息傳達到用戶手中,讓用戶知道自己為什么在這,這里有什么,并且能到哪里去。
技術的發展,形式也一直在發生變化,提升信息傳達效率,這已經不單是平面設計專屬。學會運用動效,交互或智能推薦等綜合的方法,來達到設計目標,會是將來常用的設計手法。
在以前由于屏幕分辨率太低,窗口四角正常會運用直角,因為圓角會出現鋸齒或者模糊,影響界面美觀。而現如今移動屏幕質量早已超過紙媒的印刷技術,圓角也開始被廣泛的運用。另一方面圓角在之前的認知中,是兒童的專屬,是更為親和力的表現形式。而經過幾年的發展,這個偏見正在慢慢改變,因為圓角也可以做的很高大上,也能設計的很潮流。
蘋果總是第一個吃螃蟹的公司,Mac 的最新系統 Big Sur 整體變得更加圓潤,窗口四角從以前的 10px 增加到 20px ,并且全新的控制中心也沿用了 IOS 14 的設計風格和設計布局。值得在一提的是,微軟 Win 10 的概念稿中也開始嘗試運用起了圓角。所以這個趨勢是蠻值得關注的一點。
設計師常常會陷入形式主義,而忽略了本該表達的內容,特別是在插畫上。也許這個道理每位設計師都懂,但為何還是會前仆后繼的撲倒在自我滿足的陷阱中呢?也許原因中會有一點是,當內容過于直接表達,或者元素過于普通,就很容易讓作品變得毫無趣味,這就是矛盾所在了。
那如果設計師既不想脫離內容,又不想設計出乏味的設計,怎么辦?這就需要讓插畫具有含義,而不是淪為純粹的形式。優秀的插畫多承載的信息量,能夠遠比文字或界面UI來的豐富。
這里所說的自然,是能讓人感到熟悉和安心,是以人為本的設計。王敏老師說過:“科技求真,藝術為美,設計從善,設計可以作為結點,讓真善美實現統一?!辨溄尤伺c產品之間的紐帶是 UI 界面,它需要承載不僅是信息內容,還有用戶體驗,因此,以人為本的設計終會贏得用戶的喜愛。
自然運動效果,不是那種大開大合的炫酷效果,而是讓界面過渡更為自然合理。想要讓界面體驗更為自然,那必然要遵循真實世界的物理規則。例如,重力、摩擦力、向心力、浮力等動態效果。
科學技術的快速發展,讓我們感覺未來近在咫尺,但又十分迷茫不知何去何從。我相信承載UI的媒介,必然不僅僅是現在我們所使用的各種設備。VR、AR 或全息影像等技術發展,將使得UI設計會有更多的可能性。賽博朋克2077也許真的離我們不遠,那種滿世界無處不在屏讀的社會,怎樣的設計才能真正滿足需求呢?這是我們需要長期思考的問題。
在2020年各大廠都推出了暗色調模式,這已成了如今APP的標配。除了深色模式外,以后還會在可視性、場景和現實成本等因素方面,更近一步的打磨。
后疫情時代的遠程辦公,我們需更加考慮如何緩解合作的疏離感。如何拉近人與人之間的協作,打破遠程的空間桎梏,讓合作更具沉浸感。這時情感化的設計就能充分體現它的價值,例如,這幾年開始火的 emoji 頭像,或者各種表情包,它們讓溝通的雙方產生情感共鳴,而不是面對著冷冰冰的屏幕。
皮克斯運用技術的創新,提升了質量和效率,從而改變了整個動畫的歷史。對于我們來說,未來的插畫需求會越來越多,并且還要求獨特的創新性,這就需要有更優的解決方案。
凱文凱利在《必然》里討論了關于未來的生活方式,他認為我們的未來環境會充滿各種屏幕,它將會在各種事物的表面出現,屏讀會從我們起床開始到晚上睡覺,一直出現在我們視野中。如今的人們每人都有各種各樣設備,因此,多屏協同辦公是必然的趨勢,不管你是與人合作,還是獨立工作。
屏幕可拓展,將會是移動辦公的重要轉折點。不管是需要長篇編輯的文字,還是畫板無限大的表格,或者是需要強大美化功能的演示,這都需要足夠大的屏幕才能有更優的體驗。折疊屏的出現讓手機能代替平板,滿足更多使用場景。折疊屏目前由于成本的原因,在大眾眼中還屬于新事物。但我相信成本在未來不會是問題,更重要的問題是,屏幕形式的變化,對于交互來說將會有哪些影響,并且如何挖掘其中真正的潛力。
而如今 5G 開始普及,網速也再次提升,但外界對其的評價褒貶不一,其中最為常見的話題就是“5G 對我們的生活將會有什么改變呢?”,有人覺得它只會提高我們每個月的話費,也有人提出 VR/AR 全景直播、高清遠程會議、無人機作業、自動駕駛等技術將會更為成熟。
這篇文章是對當下的思考,也希望能對 2021 年的工作帶來些許幫助。在這過程中越是總結,越是對未來的趨勢感到迷茫,一篇文章并不能囊括所有內容,不足之處也希望理解。在未來或許會有數不盡的黑天鵝,也可能因為技術爆炸,使得新的潮流突然的興起,未來是無法預測的,所以,就讓我們一起擁抱變化吧~
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在色相環上采用鄰近色搭配,顏色多以明亮的高飽和度為主,使得頁面更具時尚活潑感。
鄰近/互補色在網頁的運用
鄰近色在APP中的運用
混合質感圖標中的運用
幾何圖形在海報中的運用
色彩疊加在APP上的運用
這樣的幾何圖形我們在設計網站上經常可以看到,通過重復幾何圖形的組合加上混合模式的疊加,在設計上別具一格。同時讓我們的設計多一種表現手法也增加我們的行業競爭力。
明亮的顏色搭配混合模式和不透明度,出現出另外一種效果。
1.選擇深色的顏色(#0A00BC),畫一個圓角,填充藍色漸變背景。
2.畫一個圓,填充紅色的漸變,模式選擇提亮的效果,剪貼蒙板在圓角背景上。
3.畫第二個大圓,填充紅色的漸變,模式選擇提亮,透明度調到70%,剪貼蒙板在圓角背景上。
4.畫第三個圓,填充紅色-黃色的漸變,模式選擇正常,透明度調到85%,剪貼蒙板在圓角背景上
7.最后一步,右下角的高亮,通過藍色徑向漸變,調整到我們滿意的效果即可,模式選擇變亮,透明度90%。
原文地址:我們的設計日記(公眾號)
作者:sky
轉載請注明:學UI網》蘋果Google都在用的設計趨勢,簡直太絢麗了!
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
先來看看技術發展和現階段人口結構的變化對線上社交有什么影響。
1. 技術上:
2G 時代的社交實現了跨地域聊天,用戶可以在 QQ 里和天南地北的人聊天,強調在線狀態。QQ 號是用戶社交虛擬身份的 id,是用戶自我創造的線上人設。2G 時代的社交尋求更為方便的溝通方式。
3G 進入了移動社交,著名風投公司合伙人約翰·杜爾提出 SoLoMo 概念(社交化、本地化、移動化)。用戶可以基于位置進行交友,比如附近的人;基于行為匹配,比如微信搖一搖。沒有在線狀態,可以隨時隨地的聯系,隨時在朋友圈獲取對方線下的生活狀態。
4G 時代,手機硬件、大數據和 AI 的發展,大大提升了匹配的效率,高效地建立潛在社交關系。不論是看臉社交還是靈魂匹配,都能在很短時間內找到合適的人聊天。信息傳輸越來越快,溝通互動的方式不斷革新,用戶從文字、圖片聊天進而習慣于實時語音和視頻。
隨著 5G 到來,高帶寬互聯網、云、AR/VR/MR 的高速發展,視頻作為主要的信息和溝通載體變得日益普及,疫情讓在線溝通和協作越來越方便,更多的線下社交場景轉移到線上,線上社交的頻次大大增加的同時,副作用也開始呈現,社交隔離讓人們感到更孤獨,對云社交的需求愈發強烈。
2. 人口結構變化:
獨生子女群體在 80 年代出現,但由于父母輩基本是有數量較多的親兄弟姐妹,因此第一代獨生子女的同輩中有較多的表兄弟姐妹或堂兄弟姐妹互為玩伴。而由第一代獨生子女繁衍出的第二代獨生子女,也就是現在的大部分 00 后,家庭規模越來越小,親屬同輩越來越少,加上人口流動頻繁,少有的親屬同輩也較為疏遠。
00 后這一階段的出生率跌至了最低點,平時家庭、學校二點一線的生活,繁重的課業負擔,原本在親屬同輩圈的社交就少,在學校的熟人同輩圈的社交也越來越少。
2018 年發布的《00 后來襲-騰訊 00 后研究報告》中說到,“75%的 00 后渴求有更多的時間跟同伴在一起”。00 后在現實生活中缺失的同輩圈社交,更有強烈的訴求去互聯網上尋找。他們有著更為復雜的社交需求,通過與同輩圈的互動,建立同輩伙伴關系,從中獲得陪伴感、歸屬感和自我認同,形成自我認知。
回顧這幾年社交的變化,技術讓社交體驗從“線上線下割裂”向“虛擬空間映射真實世界”發展,00 后的線上社交需求更加強烈,我們如何解讀用戶、解讀人群,尋找他們的需求痛點。接下來,本文從自我展示、匹配連接、溝通互動的社交體驗路徑來探討社交的設計趨勢和特點。
最初的互聯網社交身份是簡單的虛擬身份 ID:虛擬頭像、昵稱、個性簽名、QQ 秀,當時的社交體驗線上和線下完全割裂,用戶的自我展示強調純線上人設打造。隨著硬件設備和圖像技術發展,用戶慢慢豐富社交資產,用真實身份交友,高清美顏自拍、沙雕表情包和聲音名片,線上的自我展示與線下生活緊密聯系。而現在,更多人用虛擬形象代表自己,技術的進步讓虛擬形象的展示更完美、更逼真。
1. 真實身份展示從單一趨向于全面
用戶在展示自我的時候往往需要填寫大量文字信息和傳輸多張精修過的照片,導致編輯成本高、瀏覽效率低。視頻化的普及讓用戶隨時隨地記錄自己,在這種沉浸式的自我展示中,身份信息傳達更加有效和真實,也進一步放大用戶的自我炫耀感。
Feels 的個人資料由全屏照片、視頻、問答組成,用 story 的交互方式進行瀏覽。
2. 從聲音名片到聲音形象,更加賦予了情感和靈魂
語音的優點在于比文字傳輸效率高,一篇完整的文字自我介紹用語音三言兩語就說完了。而語音的缺點是無法在嘈雜的公共環境中使用,所以老年人最愛用語音,因為他們私人空間較多。疫情讓人們大大減少了旅游和外出娛樂,享受個人空間的時間變多了,從而縮小了語音使用環境受限的缺點,放大了傳輸效率的優點。在今年,出現大量語音房社交,語音從“蘿莉音”“正太音”的聲音社交名片變成展示個人形象的方式。
Clubhouse 帶來語音社交熱潮,Facebook、Twitter 也相繼上線語音房 hotline 和 Spaces,用戶可以找到一個感興趣的主題房進行聊天或圍觀,那些通過短短幾分鐘發言就吸粉的高質量用戶,通過聲音賦予了個人的情感和有趣的靈魂。
Reddit Talk
3. 從“我是誰”到“我們的關系”
展示自我除了從展示者的角度來設計“如何更好的展示社交資產”外,也要從看的人的角度考慮“如何更好地了解他”。
ios15 從 spotlight 輸入聯系人的名字,對方個人信息會智能拉取你們相關聯的信息,包括最近的聊天、共享的位置和照片。
Snapchat 能根據生日、出生時間、地點生成個人星座運勢和個性,還能和好友進行星座合盤。通過個人資料之間的交互,強化雙方身份的情誼特點。
4. 虛擬和真實之間,越來越強調“真實”
虛擬形象的概念不新鮮了,2003 年 QQ 秀是虛擬形象的雛形,Y 世代網民根據自己的喜好拼出屬于自己的 QQ 秀形象,用于 QQ 聊天時的自我形象炫耀和情感表達。Z 世代逐漸成為互聯網的主力軍時,他們的個性習慣和獨特的表達方式讓虛擬形象在社交中的使用需求愈發強烈?!禯 世代圈層消費大報告》提出 z 世代五大典型興趣圈層為:電競、國風、二次元、模玩手辦、硬核科技。Z 世代已經從他們的興趣中建立了對虛擬形象的情感,興趣成為他們建立自我人設的重要手段,他們跳出固定人設,在不同興趣圈層展示多樣個性,使用特定沖浪語,以此獲得歸屬感和認同感。
高新技術的發展讓虛擬形象變得越來越高質量。蘋果的 Memoji、Snapchat 的 Bitmoji 和 Facebook 的 avatars 讓虛擬形象成為自己的化身,用于個人資料展示以及聊天表情包、合照、視頻互動等場景。Snapchat 最新的資料設計中展示了 3DBitmoji。
依靠面部捕捉、表情捕捉、動作捕捉的技術,實現了真人與虛擬形象的動態同步,降低了真人化虛擬形象的設置成本。在 SXSW2021 音樂節上,展示了 Facebook 新 avatar 系統推出的 VR 社交應用 Horizon。人與人能通過虛擬形象進行實時互動,除了有自己逼真的形象外,還具備真實的眼神表情和肢體動作,還會根據肢體動作變化不同情緒。
大數據和人工智能時代,融合了 AI 技術的虛擬形象也在近幾年層出不窮。與真人虛擬形象不同的是,它不受對方在線的限制,能隨時進行實時互動,來滿足用戶對陪伴和娛樂的需求。麥當勞推出一位唱跳型愛豆的虛擬形象,她可以和小朋友進行溝通互動,一起跳舞,跟小朋友講故事,增加與消費者之間玩伴、陪伴關系。
麥當勞虛擬偶像“開心姐姐”
用戶在社交網站分享動態,維系自己的人設,獲得群體的存在感和認同感。在未來,這些記錄和創作的內容是否會形成自己的虛擬空間?每一個人不同的故事動態與空間產生聯系,形成自己獨有的虛擬空間社交資產。
5. 社交人格從「完美人設」到「透明人設」
隨著好友列表數量增多,很多人開始逃離朋友圈,人們在朋友圈的人設經營也越來越謹小慎微,開始疲于“完美”人設的表達,社交產品開始減壓。正如越來越多的年輕服裝品牌進行的「透明商品運動」,他們在品牌宣傳時,將商品從生產到制作的全過程透明化公開給消費者?!竿该魅嗽O」是反對當今社交信息流充斥著的完美人設,鼓勵自我展示更加真實和未經編輯。
Dispo 復古相機拍攝后需要 24 小時才出片,并且沒有任何美圖的編輯工具。傳達現實生活中不完美的時刻也是值得捕捉和分享的。
Poparazzi 能連續拍照變成 GIF 進行分享,同樣也傳達未經過編輯的更真實的自我展示。用戶用 emoji 進行互動,僅展示動態收到的 emoji 表態數量。
你是否會因為動態無人互動而焦慮?是否會因為很久不更新動態而失去展示的動力,慢慢社恐?instagram 和 Facebook 允許用戶隱藏帖子的贊數,來減輕用戶的壓力和焦慮。
1. 匹配趨向于多元化
調查發現,現實中兩位互不相識的陌生人要花 50 小時,才可以在路上叫出對方名字,再投入 40 小時,才能蛻變為真正的友情?;ヂ摼W幫助用戶高效匹配,縮短認識的時間,降低認識的成本。
近幾年,用戶的喜好正在極速分裂和細化?!?0 后來襲-騰訊 00 后研究報告》表明 73%的 00 后會主動地獲取資源來發展自己感興趣的領域。由于現實中同輩社交圈狹窄,他們需要在互聯網的社交陣地上尋找更垂類的興趣伙伴,比如云學習伙伴、游戲玩伴、coscp 等,線上社交在不斷垂直細分以便更快捷的連接同輩伙伴。
隨著傳輸速度的發展,匹配連接的體驗具有更實時的交互和面對面的互動體驗。Distance Disco 是一款云蹦迪平臺,疫情期間,大家在各自房間里通過在線視頻就能開啟一場線上舞會,結識一起蹦迪的朋友。界面上的視覺元素和色塊會隨著音樂節奏變化,增強迪斯科的互動氛圍。
視頻鏈接:https://v.qq.com/x/page/w32687gdpf8.html?start=46
Honk 匹配陌生人聊天的動畫,傳達了穿越了人山人海,遇見了你的感覺。頭像出現時,出現招手動畫,像是剛剛見面的人招手打招呼。
2. 匹配提升安全感和隱私保護
現實生活中我們都有意識地保護自己的隱私,而到了互聯網,卻容易放下戒心將自己的信息分享給他人,線上社交會放大陌生人有趣、友善的一面,卻也隱藏了人性的缺點。社交產品的在幫助用戶建立社交關系的同時,也要提升用戶隱私保護和社交安全的體驗。
Instagram 帳戶注冊時,未滿 16 歲的未成年人默認使用私人帳戶,僅粉絲才能查看其發布的信息,在平臺內容分發和互動上與成年人帳戶進行隔離。當用戶更改成公共帳戶時,會給到提示強調私人帳戶的好處。
Snapchat 推出“好友檢查”,用戶可以快捷私密地刪除不聯系的人,確保好友列表里仍是真正的朋友。
Tinder 的一項調查顯示,40%的人在 Tinder 中發現了前任,24%的人遇到了家人。為了保障用戶隱私,用戶可以上傳他們的聯系人名單以選擇不想在 app 中遇到哪些人,屏蔽所選的聯系人。
在社交產品中,聊天是關鍵的一環,匹配到合適的用戶后,如何加強雙方情感連接和信任的紐帶讓用戶為關系而留?從書信到電報到電話到視頻通話,都是通過技術的發展獲得了更高效真實的溝通體驗,線上溝通的用戶體驗一直不斷還原線下的真實體驗,疫情加速了多人在線視頻通話的發展,既讓人在溝通時保持社交距離,又讓人感覺對方近在遲尺。
1. 更臨場
相較于面對面溝通交流,線上的交流在聽覺、視覺、觸覺、情緒傳遞的體驗上,決定了用戶社交臨場感的強弱。
Honk 用文字交流時,能看到對方一個字一個字實時的輸出,模擬真實的說話方式。
2021 年 Google I/O 大會的 3D 視頻聊天設備 Project Starline,利用多個高分辨率攝像機和深度傳感器在不同角度捕捉用戶,以 3D 的效果進行人物呈現,營造對方真的就在對面的裸眼 3D 感。
2021 年 F8 大會上,Facebook 提出用于 AR 視頻通話的 MultipeerAPI,更方便創作者制作 AR 特效,用于多用戶、多屏幕的共享 AR 體驗。用戶在多人視頻通話時,視頻中會出現太空或篝火的 AR 特效,讓視頻者感受到大家都在同一個共享空間。還支持輕量級游戲,多位玩家屏幕由一根曲線貫穿,玩家用臉引導甜甜圈共同完成接力游戲。
2021 年 IOS15 的更新,Facetime 使用的空間音頻讓通話的聽感更加自然、逼真,仿佛在同一房間面對面聊天。
面對疫情人們在生活中的社交禮儀都以非身體接觸式動作替代,線上社交的頻次和密度大大增加,視頻通話在視、聽處理上越來越自然和逼真,在觸覺上也向著《頭號玩家》的男主角在虛擬空間中感受到的虛擬觸覺傳遞到現實中那樣在進化。美國西北大學的研究中,一位媽媽與孩子視頻通話時,通過撫摸屏幕,能把來自媽媽的撫摸傳遞到孩子身上的“AR 皮膚”上。未來在虛擬社交中也能獲得真實的觸碰,加強情感的連接。
2. 更個性
個人展示是單向的,溝通交流是雙向的,雙方在不斷交換彼此之間的狀態和感受,從中獲得被了解和認可。個性聊天氣泡、表情包、自定義聊天背景,幫用戶在溝通交流時展現自己獨一無二的個性。線上社交的用戶語言設計要打造個性化的社交氛圍,讓用戶的個性在溝通中被挖掘和展現。
MUZE 在聊天中可以自由擺放文字、貼圖、涂鴉,讓交流更個性化和自由。
Google I/O 大會推出的全新設計語言 Material You 中,系統會基于用戶選擇的壁紙進行自由取色,并應用到 UI 中。是否聊天的 UI 也能隨著聊天中的圖片,或是聊天發送的表情文字提取心情語義,進行 UI 的變化,加強情緒的傳達。
3. 場景化
人和人的社交通常依附于不同的場景,群聊或好友分組就是將特定的社交關系進行場景設定。比如“火鍋突擊隊”“老廢物樂園”“吃瓜小分隊”依附社交場景來進行互動,幫助用戶帶入社交氛圍。
咖啡館社交,通過構建咖啡館場景,傳達和陌生人進行一場閑聊的慢社交體驗。
森遇
Facebook 的視頻通話,用煙花和禮帽的 AR 特效來構建派對的社交場景。
2021 年 WWDC 大會上,現場用不同的 Memoji 營造了線上觀眾參與會議的場景。
4. 感官刺激
2021 年 Google 的一份統計數據表明,用戶平均注意力時長從 12s 下降到 9s,而 00 后的平均注意力僅 8s。面對這樣的用戶,需要讓他們在短時間內獲得極大的感官刺激來延長注意力,以及在溝通交流時有更極致的情緒表達。
Honk 可以同時發送大量的 emoji 表情。
QQ 團隊運用 Lottie 技術推出每秒 60 幀超高幀率、動效更細膩的小黃臉表情包。
微信的表情包不僅帶來視覺上逼真的 3D 動畫效果,屏幕上其他內容也會隨之震動,還有觸感上的沖擊。
網絡表情包
5. 輕娛樂、游戲社交
《社交媒體趨勢報告》提到“和朋友保持聯系”一直被列為是使用社交媒體首要原因,但在 16-24 歲的用戶中,主要驅動力變為“尋找搞笑和有趣的內容”。青少年通過線上社交彌補線下社交缺口,獲得同輩認同,排解孤獨和學習壓力。“組隊開黑”“一起微光”“找長期固聊固玩”,00 后們的社交需求更多放在娛樂、游戲化社交上。社交體驗也從物理空間的連接轉變到精神空間的連接。
用戶在 Housparty 進行視頻聊天時,如果感到無聊,可以玩一場輕松的游戲,游戲過程中可以通過視頻看到對方的狀態。
Snapchat 正推出一種叫 Connected Lenses 的新型增強現實鏡頭,它可以讓不在同一個物理空間的用戶一起進行 AR 游戲,比如共同組建樂高模型。
IOS15 中 Facetime 加入 Shareplay 功能,可以與朋友共享屏幕,一起線上追劇、聽音樂、玩游戲。
Tinder 在今年推出第二季 Swipe Night 活動,用戶通過觀看每周一集的互動故事,向左或向右滑為故事中的角色做決定,每一集結束后會匹配到在故事中做出類似選擇的用戶,并可以繼續相關話題的聊天。
科技重塑了我們的生活。線上社交讓我們日常溝通更為方便,也讓我們輕松維系現實中的社交關系,越來越多的人依靠它構建新的虛擬關系,互聯網帶來溝通便利的同時,也減少了人與人面對面交流的機會。
美國傳播學家艾伯特·梅拉比曾給出一個公式:信息溝通傳遞=55%視覺+38%聲音+7%語義。大意是人們在現實生活中進行面對面溝通交流時,7%是語言上的內容,剩下的是面部表情、肢體動作、目光接觸、語速語調等非語言內容的交流。隨著技術的進步,社交不斷在補充非語言內容交流的缺失。在自我展示中,無論是視頻化、聲音形象、富有表情和肢體動作的虛擬形象,還是溝通場景中越來越臨場的體驗和充滿感官刺激的表情符號,線上社交的趨勢都在不斷映射線下社交的體驗。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天和大家一起溫習下2021年占據主導的8個UI和UX趨勢,干貨建議提前收藏!
沒人能夠預測未來會發生什么,但是在數字世界中,趨勢確實存在于設計師的圈子中,并且在有規律的演化中。大家可以已經看膩了不少趨勢研判文章,但是,適當總結一下當年的趨勢,把這個時間線拉長,你會覺得非常好玩。從移動端設計剛開始流行的時代,到現在,設計趨勢都發生了哪些變化呢?它們是不是又會返祖,復古?周而復始?咱們不得而知。
雖然2021年已經過去一半,不過,今天咱們還是先Review一下2021年正在流行的幾個設計趨勢,加深一下印象吧!
當然,各位設計師,趨勢僅僅是一種現象,想要做的出圈,與眾不同,我們必須站在趨勢之上,做出自己的創新,這樣才能在千篇一律的設計中獨當一面。
3D 圖形越來越多地出現在 Web 和移動界面中。毫無疑問,將各種 3d 圖形應用到移動和 Web 界面是一項相當大的挑戰,需要良好的技能和藝術眼光才行。在我們的 UI/UX 設計中添加 3D 元素有很多好處:
ByMako Tsereteli
玻璃擬態是大多人更喜歡的最新UI設計趨勢,它引人注目且色彩繽紛,這種趨勢兼顧透明度和層次感。玻璃擬態設計給人以磨砂玻璃的感覺,近一段最受歡迎的趨勢。這種風格深受蘋果在 2013 年推出的 IOS 7 和 windows vista 中首次引入的類似概念的影響。在許多情況下,如果使用得當,Glassmorphism 可以使網站和應用程序對用戶更具吸引力。
ByMahmudul Hasan Manik
深色主題現在已經成為應用必備的界面了。手機的白色界面可能對我們的眼睛造成更多的刺激,這就是所有應用程序和網站都加入了暗黑模式設計的原因。暗模式有一些我們應該遵循的特定規則。深色主題的主要優點是在弱光環境中具有更好的可讀性。作為 UI 和 UX 設計師,我們應該明白它的主要作用,它主要是減少了用戶的眼睛疲勞并提高了夜間的可讀性。
ByJulius
色彩理論知識在每個 UI 和 UX 設計中都至關重要。正確使用顏色對于為您的客戶創造正面形象很重要,這就是顏色在 UI 和 UX 設計中扮演重要角色的原因。大多數 UI 設計師都使用鮮艷的色彩來將用戶的注意力集中在重要元素上,并使我們的設計令人難忘。下圖分別為單色調和雙色調界面。
By Resuscitation
包豪斯的風格通常被描述為藝術和手工藝運動與現代主義的結合。包豪斯設計幾乎沒有裝飾,注重平衡的形式和抽象的形狀。今天的 UI 和 UX 設計,也可以理解為包豪斯的復興。包豪斯設計在UI設計上的核心,就是將設計簡化為必要的功能,使其美觀和輕松,以及精心制作每一個小細節。
包豪斯設計幾乎沒有裝飾,注重平衡的形式和抽象的形狀。今天的 UI 和 UX 設計也是包豪斯風格的復興表現之一。
By Beto Garza “Helbetico”
在當今的設計中,白色背景越來越受到大家的歡迎。了解色彩心理學是創建配色的一個關鍵方面,這在數字設計中效果很好。吸引用戶的最佳方式是通過“色塊”平衡單色背景色與亮色,以突出數據中的重要內容或者異常提示部分。少即是多,當您在 UI設計中使用較少的顏色時,這將對用戶更具吸引力和亮點。
By Resuscitation
插圖是用戶界面中更直觀的視覺闡述,也一直是UI設計中長盛不衰的“趨勢”之一。動畫插圖,在與用戶交互過程中為UI注入了強大的生命力。它幫助用戶獲得更立體的反饋,為創建更生動的微交互創造了條件。
By Rachelizmarvel
極簡主義是 UI 設計中使用最多的“風格”之一,它有助于改善用戶體驗。在我們的 UI 設計開始極簡設計之前,有必要了解術語“極簡”的含義以及為什么極簡在 ui 中很重要。下面是極簡主義的特征:
By Shakib
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
文章來源:人人都是產品經理 作者:Tzw_n
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
往往偉大的事業都是從七月開始的、我用一個設計師的視角,來盤點一下UI/UX行業這半年的設計風格走勢。
以下我從色彩、圖形、圖標、排版、行業趨勢這五個層面進行一些2021年中期盤點總結。
在色彩方面,雖然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)
(需要關注的四個新端設計趨勢)
用我開頭的那句話,做個結尾吧! 往往偉大的事業都是從7月開始的,無論你上半年是碩果累累還是顆粒無收,現在開始!一切都還來得及,還來得及!
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn