關注趨勢本質上就是關注未來可能存在的形態(tài)。很多營銷需求和優(yōu)秀設計趨勢是相互關聯的,兩者之間的關聯更像是一種動態(tài)的同步。
很多時候趨勢并不一定是全新的東西,它們往往是服務于當下和未來的需求,有很多趨勢存在了一些年頭,它們在現在發(fā)揮著作用,但是在未來可能會發(fā)揮更大的效用。所以,當我們在查看這些設計趨勢的時候,需要注意,它們必須是服務于用戶,服務于品牌和企業(yè)。
更多設計趨勢:
的確,極簡主義一直在某種程度上流行,但是 2022 年出現的新極簡主義的浪潮,比起傳統(tǒng)的極簡主義設計更加在意用戶注意力的吸引。這種新極簡主義的設計會采用更加大膽、 生動、明亮的色彩來填補留白,這種設計使得設計保持簡約的同時,更加富有調性,在簡約的框架下制造一種別樣的華麗,營造令人亢奮的氛圍。
干凈清晰、生動的新極簡主義風格在品牌推廣的過程中也更加受歡迎,大量的留白和跳脫的視覺焦點讓整個視覺更加抓人眼球,也使得品牌給人的感知更加新鮮獨特。
新極簡主義風格,對比度在深色主題下得到了進一步的提升。
這種設計并不意味著傳統(tǒng)的極簡主義已經被用戶拋棄,很多企業(yè)依然會青睞更加傳統(tǒng)的單色極簡主義設計,不過其中多少會增加一些明亮的色彩作為點綴。
從 1950 年開始,粗野主義就是年輕化、反叛、反主流、標新立異的設計風格。在過去的幾十年當中,這種設計風格一直隨著時代的發(fā)展而自我迭代,新粗野主義更加強調創(chuàng)造力、 大膽前衛(wèi)的新奇元素,而這也正好符合很多品牌對于新奇性的追求,它可以瞬間抓住用戶的注意力。不過,這種風格的使用需要控制好程度,否則很容易失控。
粗野主義經久不衰的秘訣是什么?是未經打磨、粗糲而原始的素材,它讓觀看者忍不住想要改進它,這種未完成的原始感會在情感上吸引觀眾,這在營銷上是無價的優(yōu)勢。
粗野主義在設計上并非看起來那么粗糙,相反它更加需要高度的專業(yè)性來控制它粗野的程度。設計師需要敏銳地感知到觀看者改進地欲望,讓設計粗野而不低級,原始而不拙劣。
新粗野主義柔糅合了極簡主義和大膽地排版,它依賴看似粗野地視覺沖擊:高對比度、粗糲地陰影,撞色、 簡約的背景、不對稱的布局、 未經修飾的照片,新粗野主義偏好基礎款的加粗字體,跟注重可讀性而不是舒適所制造的視覺吸引力。
這個網站就是一個典型的例子:
這一趨勢在絕大多數的趨勢排行榜當中,都占據首位。隨著技術的進步,用戶和數字媒體之間的交互正在增加,引人入勝的交互已經不僅僅停留在響應式設計當中,如今它已經開始關注心理和生理的邏輯,開始全方位地調動視覺、聽覺、 嗅覺、觸覺、味覺乃至于運動體感。
這種趨勢旨在幫助用戶體驗真實地感覺,在完成交互地基礎上,觸發(fā)用戶地情緒反應和生理反應,熱氣騰騰地餡餅視頻讓人垂涎,游戲中虛擬地對手讓人腎上腺素激增。
交互所制造地參與感,在某種程度上是實際地物理產品地替代物,用戶可以從不同角度來縮放查看產品,了解細節(jié),選擇尺寸,挑選顏色。
交互過程中,手指和屏幕之間地觸摸交互開始變得豐富,開始變得有意味,它成為了用戶和虛擬世界之間溝通地橋梁,開始有游戲地樂趣,有更具設計感地交互環(huán)節(jié)。用戶也可以根據自己地喜好,對界面進行更多樣的個性化處理。
具有參與感的交互是我們的未來。
2022 年是疫情開始后的第三年,隔離使得人們對于照片所呈現出的故事和情感,有著更為強烈的情緒反應。在極簡主義設計當中,富有表現力的人物照片是最為流行的元素之一,這類照片搭配上簡短的文字,簡練的口號,一些帶有宏大敘事特質的文字引用,時常能夠更好地營造出故事感。
不用擔心主屏頁面太長沒人看,只要隨著用戶滾動,故事會隨之逐步展開,用戶可以在照片、 標題、視頻、動畫和文本地指引下,看到整個故事有步驟地呈現。
在這當中,富有表現力的人物照片是吸引用戶注意力的關鍵要素。
另外就是頁面的 Banner 的部分,強調主題和內容的標題文本,是用戶從屏幕上獲取的重要信息之一。
如今的用戶越來越偏好在詳細閱讀內容之前,快速瀏覽一下全局的做法,這也使得 Scrollytelling(滾動敘事:通過滾動觸發(fā)音頻、視頻、 動畫效果的一種技術)這種漸進式敘事方式,可以像電影一樣將故事呈現在用戶眼前。
Scrollytelling 適合大量的內容呈現,比如對于公司和產品的描述,對于數據呈現或者認知要求較高的內容,它適合學習和記憶性內容的呈現。
3D 圖形設計正在越來越流行,因為它確實是吸引用戶注意力的最主要的工具之一。3D 圖像無論有多么奇異,它本身都會被認為是有真實感的,明確的體積,精致的建模,所有的一切都令人著迷。很多時候,用戶停留在有3D元素的頁面上,是為了更細致的欣賞。
3D 圖形設計的趨勢從來都沒有減退,它正在進入更多的領域,甚至進入了品牌推廣的領域。3D 動畫圖標比過去更能吸引用戶的注意力。
我們通常說的抽象插畫,指的是帶有明確幾何特征的插畫,它們被廣泛地應用于網站和 APP,在社交媒體和包裝設計中也越來越多的存在。
抽象插畫之所以會如此成功,是因為它們大多有著吸引人的生動色彩和良好對比度,視覺上的美感和極簡主義的風格特質,它們成為視覺的焦點,為整個設計提升視覺。
抽象插畫在品牌營銷場景下的應用也很多,它們在這個時候是貼合品牌推廣的訴求的:通過色彩和形式來吸引用戶來關注品牌的形象和名稱。
這種趨勢的特別之處是其中的文本字體元素是完全獨立的。這些文本不僅僅是用來傳遞信息的,它們還充當著拉升頁面視覺效果的重要作用,它們結合動畫和交互,成為頁面中醒目的亮點。
超大字體的優(yōu)點在于,它和很多設計風格是相得益彰的,加粗的大字體在極簡主義風格的頁面上不會顯得突兀,在元素豐富的頁面上,同樣可以起到優(yōu)秀的點綴作用。這些文本內容可以和纖細和小尺寸的元素協(xié)同,而后者則襯托出它本身的醒目。
超大文本字體的另一個好處是有效地減少網頁上的圖像的使用,縮短加載時間,提升移動端的可用性。
這種設計元素最重要的,是選擇易讀且符合品牌調性的字體。
這么多年來,我們看到來這么多的趨勢,很多趨勢是一以貫之持續(xù)出現,有的趨勢則如同流星一樣一閃而逝。好的趨勢不斷迭代升級,并且持續(xù)存在,但是最重要的,始終是那些選擇合理的方案,并且堅持改進設計,讓趨勢服務于終端的產品和用戶的設計師。
讓趨勢服務于你,不要盲目地追趨勢!
作者:陳子木
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
隨著移動互聯網的發(fā)展,原本PC互聯網連接商業(yè)支付、購買商品、瀏覽信息流等的能力已經轉移到移動端,而PC互聯網更加專注于其他領域的優(yōu)勢:
下面是我觀察到的目前比較主流的交互設計點,與大家分享。分別是:
典型的案例就是蘋果的Mac系統(tǒng)與Ios系統(tǒng)越發(fā)趨同,都采用了卡片化、模塊化,整個交互規(guī)范、視覺感受都一致以達到多端統(tǒng)一。同時信息可以自由流轉:比如在同一Apple賬號下,Mac與IOS中復制的信息可以進行同步粘貼。備忘錄、日歷、提醒事項、錄音中的信息進行流轉,在任何一臺Mac上登錄Apple賬號后都可以進行同步。
在國內,B站的網頁端與App端的體驗也逐步趨同,框架設計上更加卡片化與扁平化。信息流轉上,手機上暫停的視頻到網頁端繼續(xù)播放,實現了無縫切換。
淘寶首頁:從過去復雜的信息流導航變?yōu)楝F在更加簡潔的個性推薦卡片。整體體驗與淘寶手機端一致。
總結:精簡無關信息,關注最重要的核心任務,減少用戶跳出,沉浸式心流設計。
許多網頁接入騰訊、阿里的生態(tài),支持掃碼關注公眾號/手機驗證碼即可完成注冊。省去了用戶編輯個人信息、輸入郵箱、輸入密碼等復雜的交互流程。
心流式體驗設計是這幾年很熱門的詞,指的是通過優(yōu)化用戶體驗讓用戶能夠沉浸式地高效完成目標任務。這需要做到產品的交互習慣滿足用戶使用習慣,并且交互流程滿足用戶預期。過于頻繁的彈窗打擾和頁面跳轉的等待時間都會影響用戶進入心流。
比如,例如飛書審批,審批詳情不需要跳轉,點擊卡片即左側彈出詳情頁彈窗;讓用戶可以在同一個頁面即可瀏覽信息,不需要進行跳轉到新的頁面進行查看,方便用戶完成批量的審批任務。
再比如:阿里云,開通服務的時候不需要跳轉,而是在側邊彈出訂單彈窗,方便用戶操作。
上面說到,頻繁的彈窗提醒也會影響用戶進入心流,用戶在對表單、畫布中的內容進行刪除的時候,如果使用全屏二次提醒彈窗,會感到創(chuàng)作過程被打斷。
釘釘宜搭:卡片畫布類產品,刪除操作時,不局限于大彈窗,而是用靠近按鈕的小彈窗,使鼠標的滑動路徑更短,操作更加簡便;并且在不過多打擾用戶的前提下,完成了目標操作。
復雜性守恒定律由Larry Tesler于1986年提出,也稱泰斯勒定律。指的是“任何系統(tǒng)都存在其固有的復雜性,且無法被減少,只能設法調整、平衡。我們要考慮的是,怎么樣更好地處理它,讓用戶簡單、高效地使用它”。
很多的中后臺系統(tǒng)中很多表單會存在大量的配置項,這些配置項是否可以簡化,讓平臺變得更簡單智能?大部分時候答案都是否定的,過度追求簡化往往容易弄巧成拙。功能邏輯易于解釋與理解才是更好的方案,當你試圖簡化降低復雜度,可能在其他地方埋了雷。
其中一個解決方案是將復雜度轉交給系統(tǒng),蘋果公司的黑盒理論與此互通;就是用戶不需要了解系統(tǒng)或功能背后的實現邏輯,只需要關注呈現在用戶眼前的交互界面即可。如今數據智能化處理正不斷發(fā)展,我們也看到了智能化在PC端領域的應用。
剪映相比于老牌視頻編輯軟件更加簡單,提供各種在線特效模板,來降低任務復雜度。相比傳統(tǒng)的PR、AE軟件需要本地存儲預設文件,或者手動編輯簡單了很多。用戶不需要知道背后的實現的技術原理,也不需要掌握過多的特效制作、調色技巧即可完成視頻的剪輯、調色工作。
推薦組件功能:用戶在進行流程搭建時,不需要從左側組件區(qū)拖拽組件,而是點擊連接線中間來添加組件。如果可以其實還可以更進一步,就是根據后臺數據分析創(chuàng)建目標流程需要的組件,向用戶主動推薦相關組件,以此來降低用戶的創(chuàng)建門檻。
隨著傳統(tǒng)業(yè)務向互聯網轉型越發(fā)普遍,線下業(yè)務流程轉到線上的需求場景越來越多,一個單一的系統(tǒng)不能完全滿足所有的業(yè)務場景需求,由此需要一個更加靈活模塊化的系統(tǒng)來針對不同的應用場景來應用不同的產品架構。而該系統(tǒng)中的功能框架、交互組件又可以重復利用,于是更加靈活、模塊化、可自定義配置的系統(tǒng)后臺越發(fā)受到歡迎。
飛書、釘釘易搭內的審批流程、會議系統(tǒng)、工單系統(tǒng)都可以通過模塊化的組件進行高效搭建,不需要代碼即可像搭積木一樣實現用戶的自定義需求。
阿里的天貓優(yōu)品電器店線下門店設計平臺,整理了線下門店所需的16個模塊(前臺、小家電中島、洗衣機、櫥窗、空調、吧臺等),通過線上三維化場景直接進行可視化設計,所見即所得,并且能夠模擬現場燈光效果,根據門店現場規(guī)格,直接在三維空間里修改,快速導出效果圖;非常高效地完成了其他門店的需求化定制。
抖音網頁端的用戶體驗沿襲了手機App端的風格,用戶進入網頁的核心目的就是看短視頻打發(fā)時間,于是進入首頁即可看短視頻,不需要用戶手動選擇分類,并且手機端的用戶偏好通過用戶的賬號同步至網頁端,有了很順暢的用戶體驗。
相比快手網頁版,快手延續(xù)了常規(guī)視頻網站的交互方式,將視頻內容分為短視頻、直播、同城、長視頻、小劇場等多個類別,由用戶自主去選擇觀看的內容,內容雖然更加多元,但確實路徑過長,不夠直接。
再舉個例子,新版的淘寶網頁端不再像個門戶網站導航,而是通過數據分析用戶喜好來主動推薦代替用戶自己選擇。用戶來淘寶網頁端,其實并不是買東西,大眾用戶已經習慣了在手機上進行支付,到了網頁端反而會不適應。用戶來到淘寶網頁端的更多目的就是逛,看有沒有自己想要的東西,遇到喜歡的,就點進去看了。于是新版淘寶通過個性化推薦把過去復雜的活動運營頁板塊、特價板塊、品類板塊替換掉了,讓用戶在網頁端獲得更好的“逛街”體驗。
而京東,在首頁做了復雜的流量分發(fā)設計,通過不同的頻道、不同的板塊將用戶引流至相關的專題頁面,再進行商品瀏覽。本質上來說,用戶來到淘寶、來到京東的目的都是因為閑,而淘寶的通過數據智能,大數據精準推薦用戶喜歡的商品,簡化了用戶的使用路徑,并且使整體頁面更加簡潔。
網頁的官網、首頁承擔著產品介紹、流量分發(fā)、增強品牌印象等的職責。我觀察到越來越多產品官網都開始采用3D元素、視頻背景、大圖元素、微動效來讓頁面呈現更加具有質感和動感。
它是由Web3D技術的發(fā)展而興起,能夠給網頁Banner帶來更強的視覺吸引力,同時也強化了公司融合了AI技術的品牌印象。如法大大官網、騰訊云、阿里云的首頁Banner展示。法大大首頁Banner,鼠標滾輪向下滾動3D元素會相應產生變動,文案與元素一靜一動,對比明顯,也更易于用戶注意到文案信息。
大疆官網首屏采用了全畫幅大圖的形式展示熱門產品,下方的產品推薦頁自動播放宣傳視頻,提升了頁面的視覺沖擊力,展示了其科技屬性。
疫情時期,線上辦公的需求和頻率激增,線上協(xié)作興起,許多辦公軟件都有了多人場景編輯功能。特別是對于復雜的項目,需要團隊成員共同完成,協(xié)同合作的功能越來越受歡迎。
比如我們熟悉的figma,逐漸取代了傳統(tǒng)UI設計軟件ps、sketch等的頭部地位,其中的項目協(xié)同功能更是廣受歡迎。只需要發(fā)送項目鏈接邀請成員即可進行項目協(xié)作,還支持多人標注、語音溝通,大大提升了工作效率。
許多辦公軟件也都上線了類似的功能,比如幕布可以通過設置權限、發(fā)送鏈接或二維碼來邀請協(xié)作者共同編輯文檔,為產品的使用場景提供了更多可能。
曾鳴在《未來商業(yè)20講》里說:“未來的互聯網世界的兩大趨勢是數據智能、網絡效應”。
這在PC端也得到了印證。淘寶網首頁、抖音首頁、嗶哩嗶哩網頁端將PC端與APP端的數據進行互通,并對用戶行為偏好數據進行分析,為用戶提供更加精準的信息流的同時,還使得頁面的交互更加簡單,視覺效果更加簡潔,過去依賴用戶自主選擇進行流量分發(fā)的形式將會越來越弱勢。
在工具類產品中,利用數據智能化可以將用戶操作上的復雜度轉移給系統(tǒng),從而降低用戶使用門檻,提升用戶體驗。與此同時,工具類平臺也越發(fā)靈活化化,通過模塊化設計來自定義搭建不同用戶的使用需求的產品,還能節(jié)省資源建設成本。
網絡效應的部分應用體現在用戶在使用工具類產品中,不再是孤單的個體,而是能通過線上協(xié)同,讓用戶與用戶之間能夠產生共同協(xié)作,共同交流,更加方便地完成任務。
作者:為美好而設計
轉載請注明:站酷
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
2022 年即將過半,疫情在家的我們重新花一些時間,回顧今年最引為人注目的一些設計趨勢,有些已經變成現實,有些可能即將會發(fā)生。在過去的這十幾年里,全國的互聯網和移動互聯網行業(yè)蓬勃發(fā)展,引發(fā)了 UX / UI 行業(yè)的火爆,無論是在設計技術方面還是在設計實踐方面維持著快速發(fā)展狀態(tài)。設計探索受到了前所未有的關注。創(chuàng)新也永不停止,正在向各個方向延伸——有的是曇花一現,有的是重塑想象,有的卻循環(huán)往復。
下面我們將更詳細地向你探討一些 2022 年的設計趨勢。
The Badass Project 搗蛋派計劃
過去幾年里,大字排版的趨勢越來越明顯,字體尺寸也在增加!接下來,字體更大且?guī)缀鯖]有圖像的時尚 英雄形象 網頁設計,將成為主流風格。
(英雄形象在網頁設計中是一個特定的網頁橫幅,通常是一個包含與內容相關的大圖像頁眉)
設計師和用戶都越來越習慣在登陸頁面前面和中心位置使用超大文字。無論是怪誕的無襯線字體還是現代奢華的襯線字體——這一趨勢就是在于越大越好。通過精心選擇的字體,網站可以做出比以往更大膽的宣傳,以吸引受眾的注意力并有效地信息傳達。
這些字體選擇通過 引人注目的動畫進一步生動起來。設計師正在實現通過鼠標移動或向下滾動頁面使排版移動并與用戶產生互動的創(chuàng)造性效果。以粗體、動畫和交互式排版為核心,許多網站也就不使用任何背景圖像,讓外觀變得干凈且精致。
MAFF
所以一定要試試這種趨勢:把文本尺寸放大,可以將其放置在一些圖像上,制作大尺寸的動態(tài)標題,讓用戶從中獲得樂趣。最重要的是,要勇于呈現大膽強烈視覺效果,從而可以立即吸引用戶的注意力。
案例:Medium 官網——https://medium.com/
Shakib - Sneakerbumb
在經歷了充滿不確定性和陰郁的兩年,我們學會了尋找和珍惜任何享受幸福的機會。我們大量獨處時光的花在了數字空間上,這一現象也不例外。
La puce à l’oreille
為了回應這一需求,設計師從 80 年代和 90 年代獲得了巨大的靈感;將色彩豐富、質感豐富、復古風格的主題與現代氣息結合起來,打造真實的外觀。鮮艷的色彩搭配柔和蠟筆肌理、古怪的排版、紋理豐富的背景、跨頁面網格的布局、非傳統(tǒng)的圖像和古怪的插圖,都可能會在接下來的一年吸引你的注意力。
Kristen Ryan for MakeReign
隨著這一切的發(fā)生,我們甚至可以說,在過去幾年里,每個人都學會了賦予自己一些自由的生活態(tài)度。這為我們提供了更多的實驗空間,當然也為設計和其他領域帶來了讓人愉快的成果。這就是說,設計師們覺得有必要從簡單和實用的用戶體驗轉向有趣、搞笑甚至愚蠢的交互。出人意料的是,讓別人微笑可能會是你的網站或 app 令人印象深刻的一種方式。
Blumenkopf
野獸派設計從 1950 年代的野獸派建筑運動中汲取靈感,延用其不修邊幅、毛糙粗狂的外觀形式,和故意做出的丑陋效果。就像在建筑中一樣,野蠻主義在網站中揭露和解構(甚至慶祝)這種媒介的底層結構和重要原則。原始、大膽和反動的本性使野獸派設計一直處于數字空間的邊緣,因為原始是互聯網的全部。然而,近年來,野獸派一直在緩慢而穩(wěn)定地復蘇,現在被一些人稱為新野獸派。
Caroselling
隨著互聯網上干凈、傳統(tǒng)的網站越來越多,個人網站變得難以脫穎而出。轉向野獸派,提供真誠、原始但獨特的視覺體驗,可能正是提升你下一個網站的方式。
無網格布局,強烈的調色板,重疊的元素,擁擠和幾乎混亂的設計只是你的野獸主義工具包的一部分。將它們與等寬和奇怪大小的排版結合起來,缺乏或極少的導航,這相當于沒有額外的“空間”或子頁面的“開放式版面”,你會得到一個引人注目的粗野派外觀。
Work with us
案例:阿里云設計官網——Alibaba Cloud Design - Not Design Just Future
當然,還有更多,但野獸派網頁設計的定義規(guī)則是沒有規(guī)則;它反對既定的規(guī)則和慣例。更重要的是,你需要用更強烈的意義價值和意圖來將你的野獸派杰作與另一個設計糟糕的網站區(qū)分開來。
Messenger
Figma、Todoist、Slack和 Messenger 等網站和移動應用程序都把時間和精力集中在桌面客戶端版本。
Todoist
越來越多的應用程序似乎也在效仿,因為研究表明,這樣用戶會感到 更舒適、更安全。用戶希望自己的應用程序遠離互聯網瀏覽器,遠離所有打開的標簽,回到指定的應用程序窗口,讓人感覺更寬敞、更專注。在使用這些應用程序時,不需要處理數分散注意力的標簽,這無疑是一種進步!此外,將通知直接發(fā)送到桌面,我們的通知管理也必然得到改善。
Figma
為阿拉伯語國家的谷歌搜索頁面布局
用戶研究團隊利用 人類心理學 領域的洞察,以及 可用性測試,已經能夠塑造界面,為用戶提供最大的滿意度和愉快的體驗感受。幾十年來,這一直是用戶體驗設計的核心。
隨著技術的快速進步,我們看到數字產品體驗的保真度有了空前的提高。這一發(fā)展也為不同用戶群體之間的細微差異提供了新的理解。年齡、文化、地理位置、日常習慣、社會結構(以及其他因素)的差異可能會導致人們對什么構成令人滿意用戶體驗的期望存在顯著的差異。因此,這些體驗可能需要類似的設計,但肯定不是相同的設計方法。
隨著技術和研究方法的到位,我們開始看到一款產品的多種變體同時推出,以滿足不同用戶的需求。隨著許多大品牌都在努力擴大他們的用戶群體,創(chuàng)造本地化的產品體驗可能會成為一種大趨勢——如果不是標準的話。
NhuSW- Everyfit — Fitness for Everyone
包容性不僅是一種趨勢,也是一種運作模式;人類生存和共存是一個不可否認的重要方面。在日益全球化的復雜世界中,我們不斷意識到自己與其他個人或社群之間的差異。以同理心駕馭這些差異是我們的責任,并努力將所有文化、性別、性別、種族、能力和殘疾都有意義地適當地納入全球社會。
Spotify
隨著數字空間引領著世界的全球化,它也毫無疑問地成為我們包容性努力的前沿。人們總是希望品牌和公司采用更具 包容性的敘述 和語言,并向包容性的平臺、產品和服務 邁進。他們被鼓勵在圖像、語言和視覺語言中推動多樣化的表現,這樣做不僅僅是為了營銷收益,而是為了更大的意義和價值。
這些是我們在 2022 年會看到的趨勢和現象。記住,它們是為了提醒我們當前的總體設計趨勢??梢允褂盟鼈儊碇С趾褪跈嗄脑O計決策,但不要害怕挑戰(zhàn)它們,或用它們?yōu)槿藗儎?chuàng)造更多積極有效的體驗。
原文標題:UI/UX Design Trends of 2022
文章來源:Codeart
原創(chuàng)作者:Taras Bakusevych & Maja Mitrovikj
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
Dribbble 平臺對于互聯網 UI 界面設計有著舉足輕重的定位,對 Dribbble 設計的研究會讓我們看清設計的方向。
為了保證這篇文章的質量,Dribbble 年度的每個作品都超過 550 贊。在此原則下挑選了 828 件作品,作品總的大小為 2.2G。
從挑選出的 828 件作品中,排名前十的作品中 9 件為 B 端設計,另一件作品也是 B 端產品 C 端化的產物。其中:
明眼人都能看出其中的比重關系,B 端設計再次大火,為什么是再次?因為 B 端設計之前火過,只不過沒有趕上一個好的時代,在 C 端設計風光的十年里而忽略了其存在。隨著 C 端市場飽和與數字化的浪潮下,實體經濟、ToB、ToG 的產業(yè)再次迎來了它的曙光。視頻動效的作品占比也已超過 C 端界面設計,相信今年視頻動效作品占比還會再次提升。
Dribbble 年度最佳作品來自大家最熟悉的 UI8 團隊中的 Tran Mau Tri Tam ?,作者來自越南西貢,最佳作品截止目前355K瀏覽量,2933個贊。
為什么看似平平無奇的作品卻能獲得 Dribbble 年度最佳作品呢?既不是 C 端也不是純 B 端的作品,更像一個網頁與平面的結合體。如果去掉搜索圖標、分類圖標和按鈕,你可以理解它就是一個平面作品,一個字體加幾何形體構建的作品,為了豐富畫面的層次,讓畫面更加的活潑采用了多彩加幾何色塊,讓標題閱讀有停頓感和呼吸感。faster 底部的橫線讓它從標題文字中脫穎而出,這種使用線條突出重要信息的設計也是今年Dribbble 設計流行趨勢之一。
MetroUI 是 Windows8 的界面設計語言,在 2010 年至 2013 年間曾經風靡一時,那也是移動互聯網的發(fā)展元年,現在國家推行實體經濟、數字化帶動 To B、To G 的發(fā)展元年,通過幾何色塊(MetroUI)實現 B 端產品與 C 端設計風格的傳承與銜接,你會發(fā)現歷史總是驚人的相似。最后背景結合今年最流行的微軟風,毛玻璃的多彩高斯模糊漸變風,年度作品當之無愧。
最后來看下按鈕的設計,正常的按鈕要么文字加色塊,要么左圖標加右文字,它設計成左文本加右圖標,更加注重信息的可讀性和易讀性,也體現 B 端設計重功能和交互體驗,視覺點到為止的設計理念。
下面我們來欣賞年度最佳作品里面的流行趨勢吧。
1. 易讀性(停頓感)
字體三原則:可讀性、易識性、易讀性。當你同時讀一篇文言文和一篇設計文章,肯定設計文章的內容可讀性更好。易識性是用在字體設計上,不能過于浮夸的改變字體骨架、形體而不易識別。易讀性和每個位設計師都息息相關,因為我們都需要編排文本。當我們小時候寫作文時,不會寫的文字可以用拼音代替。這時候讀者讀到拼音時會有停頓感,更加適合用戶閱讀。
通過給用戶制作停頓感來增加用戶的易讀性??梢栽谙嚓P聯文本后面添加圖片、表情、圖標來更好的理解文本內容,豐富文本內涵。比如情侶間表達愛意時會輸入文本,“我愛你”、“我 Love 你”、“我 ai 你”、“我??你”,哪個更加會有情感共鳴呢?不言而喻,相信你心中已經有答案了。
2. 曲線
在標題文字上添加曲線來突出重要文案是 2021 Dribbble 最流行的趨勢之一,第一個設計目的就是突顯文字,其次就是想表現鉛筆真實書寫的感覺。之前很多帶有簽名的設計中,簽字的文本都是手寫體的感覺,手寫體對比電腦的機械字體會帶有一種人文氣息,也會讓兩者之間產生一種對比、矛盾。
除了突顯文本外,曲線還有視覺引導的作用。通過視覺引導讓用戶按照設計師編排的順序進行瀏覽界面。當然還有比這更科學的工具就是眼動儀測試,通過真實用戶眼睛瀏覽界面顯示對應的熱點圖。
3. 多彩高斯?jié)u變風
多彩高斯?jié)u變風是從色彩的角度來傳達和豐富畫面的,多彩高斯?jié)u變風其實是從制造矛盾到平衡矛盾的過程,多彩漸變多為冷暖對比來制造畫面的沖突,需要控制冷暖畫面的大小來實現平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。
多彩高斯?jié)u變還可以結合輕擬物、幾何圖形、三維等新的組合方式去創(chuàng)新,給用戶呈現一種更加新穎的視覺表現形式。最后我們還是要回歸到內容上,為了更好的傳達信息需要去設計與內容相匹配的視覺風格。
1. 側邊欄 Sidebar
B 端設計的火爆帶動了 B 端相關模塊設計,更多的人也愿意嘗試 B 端相關模塊設計,側邊欄作為產品架構中重要的導航系統(tǒng),好的側邊欄設計能為用戶帶來更好的效率。主流側邊欄都做了展開、收起、拖拽等交互效果,也是受限于 PC 屏幕為展示更多數據而騰空間。側邊欄主要承擔的功能有導航、分類、自定義篩選、共享、新增等。Dribbble 的 B 端產品設計已經不再是假大空概念設計,而是一套實用美觀可落地的設計。
2. 儀表盤設計
儀表盤設計是一個很好的隱喻,想象一下開摩托車或汽車主駕駛前面的屏幕,汽車儀表有燃油表、車速表、里程表、水溫表、轉速表、故障指示燈等。B 端類產品后臺界面的儀表盤設計也需要展示一些重要的數據和各種狀態(tài),大體分為側標欄、導航欄、待辦任務、個人信息、報表數據、消息中心、快捷入口等。當然最重要的就是報表數據,團隊收益、任務進度、轉化比例、新增、存量、團隊工作時長等都是老板或領導關心的內容。每個公司業(yè)務不同、每個人員權限不同,自定義的儀表盤也各有差異。重要的是突顯數據和業(yè)務狀態(tài),需要分層級系統(tǒng)性去思考和設計。
3. 流程設計
復雜的事情簡單化,簡單的事情標準化,標準的事情流程化,流程的事情自動化。流程設計是每一個企業(yè)核心功能和業(yè)務,可自定義的管理流程系統(tǒng)搭建也是 B 端產品設計的難點,需要對業(yè)務高度抽象,讓每一個業(yè)務人員可自定義的流程才是好的流程設計。
4. B 端 C 化
B 端 C 化是 B 端產品設計的視覺表現力慢慢往 C 端產品設計的視覺靠齊,國內 B 端產品界面設計視覺水平還有很大的提高空間。除了視覺上的提升外,由于業(yè)務的發(fā)展,B 端產品也開始移動化、智能化,國內主流還是通過小程序、H5 來現實 B 端產品 C 端化。
5. 輕代碼化
輕代碼化是一種低代碼賦能無代碼的方式,彌補無代碼拓展性差、覆蓋場景少的問題。在保有無代碼靈活、易用、快捷的同時,又能覆蓋低代碼使用場景。簡單理解就是無需代碼開發(fā)即可如搭積木般快速、靈活地創(chuàng)造屬于你的個性化管理系統(tǒng),輕松實現多元業(yè)務場景的數字化管理。
輕代碼化將功能進行打包,升級成全局可以用的配置,技術人員配置好后,業(yè)務人員在應用編輯時直接選擇使用模版,綁定對應的變量即可使用。
1. 人文氣息
為什么人加色塊的組合方式能流行起來?還是 B 端行業(yè)流行帶動的。B 端講的更多的是企業(yè)對企業(yè)。企業(yè)對企業(yè)除了講行業(yè)解決方案外,還需要傳達公司的價值觀、使命、愿景。人加色塊的組合方式非常適合體現公司的企業(yè)文化。對于一家全球化的公司不同膚色的人物組合在一起,這種人文氣息和價值觀已經就不言而喻了。
當然企業(yè)也需要進行營銷,抓人眼球。幾千年來的遺傳證明了,人的大腦對食物、性、動的東西、人臉和眼睛、危險的動物很敏感。人加色塊的組合方式也具有抓人眼球營銷的功能。真可謂一舉兩得。
這種風格更適合大公司,國內的一些手機廠商 OPPO、VIVO 等也會通過手機+背景+人物來體現科技與人文的結合,而對于中小型公司產品差異化和行業(yè)解決方案展現應該還是重中之重。
2. 毛玻璃效果
毛玻璃效果加大了模糊程度,透明效果更加扁平,很好的順應當下 UI 扁平化的設計趨勢。蘋果 Mac OS Big Sur 系統(tǒng)的圖標、界面中運用了大量毛玻璃和半透明元素,界面更扁平。至于 C4D 三維彩色玻璃的視頻教程可以在 B 站搜索“透光藝術-C4D 創(chuàng)建彩色玻璃的 4 個技法”,完全能滿足 UI 設計師。當然還有一個好消息就是 Mac 用戶可以享有 OC 一年免費的使用權,具體安裝購買方法上某寶就可以輕松搞定,真香。
3. 輕擬物
輕擬物這幾年一直流行,在 UI 設計中趨于穩(wěn)定的位置。從寫實到扁平再到輕擬物,其實是設計師們一路不斷探索的結果。本質就是光影對形體產生的視覺感受。在色彩中對高光、亮面、明暗交界線、暗面、反光(環(huán)境光)五個部分的處理。寫實三維的圖標等設計更適用于簡潔的畫面中,扁平等設計更適用于復雜一點的界面中,比如 B 端產品界面中的功能圖標。輕擬物可使用的范圍更廣,效果更佳。Sketch、Figma 軟件對于漸變、高光、投影、高斯模糊處理已經非常簡單且出彩。
4. 簡潔設計
簡潔設計遵從了密斯·凡德羅的“少即是多”的設計原則,在 B 端產品界面中更加需要簡潔設計,我們最熟悉的 Sketch 軟件界面已經是相當的簡潔了?;氐浆F實當需求功能不斷增加,產品界面的編排如何取舍,如何保證界面的簡潔是設計師需要深度思考的問題?如何與上級溝通?該功能是否可做可不做?是否需要埋點用數據說話?如果只是一味競品有我們就需要有,功能不斷累加只會讓界面越來越重。
5. 幾何圖形
幾何圖形和幾何插畫有異曲同工之妙,幾何圖形多為產品界面和宣傳內容的抽象,產品界面的幾何圖形多為占位符形式,加上色彩和幾何色塊讓其成為一個整體。B 端產品視覺設計 C 端化的進程中,幾何圖形、幾何色彩不失為最好的突破口,相信今年Dribbble B 端產品的視覺設計一定會更上一個臺階。
幾何圖形另一個場景化的地方就是品牌,作為一名 UI 設計師一定會經歷從圖標到幾何圖形到品牌設計的過程,品牌設計的技巧基本還是以幾何圖形為主,至于品牌的內涵需要更深層次的解讀。掌握主流品牌設計的技巧對產品定位、品牌宣傳打下扎實的基礎。
6. 暗黑設計
暗黑模式的設計是解決在微弱環(huán)境下內容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設備時長增大,如何在夜晚這個特定場景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞,提高在夜間使用的可讀性。
在設計暗黑主題時,不能為了突顯視覺上的逼格,而去使用高飽和度鮮艷的色彩來突顯界面的品質感。而應該把舒適度、可讀性作為設計的衡量指標。Material Design 給出了暗黑主題的設計準則,即正文和背景之間的對比度應至少為 15.8:1。按照此標準設計,可讀性都還不錯。這里介紹一個插件“Stark”(Figma、Sketch、XD、Chrome 插件)用來測試界面的對比度。
7. 模塊化(組件化)
為什么叫模塊化,而不叫組件化,組件化更多的利用原子系統(tǒng)從原子、分子、組織、模版、頁面來快速的搭建界面,但在 B 端產品設計中基礎組件和業(yè)務組件的搭建是以提高工作效率為前提,是否有從 0 到 1 搭建 B 端產品組件的經歷是設計師一生中最寶貴的經驗之一,它能提高設計師的系統(tǒng)化思維、邏輯思維和抽象思維能力。
產品模塊化設計就是將產品分成幾個部分,也就是幾個模塊,每一部分都是具有獨立功能,具有一致的連接接口和一致的輸入、輸出接口的單元,相同種類的模塊在產品族中可以重用和互換,相關模塊的排列組合就可以形成最終的產品。通過模塊的組合配置,就可以創(chuàng)建不同需求的產品,滿足客戶的定制需求 。
8. 插畫
插畫作為設計的一大品類,不同的插畫師都有自己擅長的風格,本質是都有自己的個性,但是在產品設計中更多是需要共情、共性來講故事,表達產品理念和價值觀。這就需要插畫師去嘗試并探尋出適合互聯網產品設計類的插畫風格。設計的本質是舊元素的重新組合,插畫不會過時,而是需要結合當下和產品找到最匹配的設計風格。
9. 幾何插畫
幾何插畫算是插畫簡化的一種表現形式,人和物的形態(tài)不再寫實,而是抽象成幾何圖形拼湊的感覺,同時保留人物形態(tài)的神韻。加上幾何色塊與人物交互形態(tài)的表現,傳達出簡潔、科技的現代感。難點還是在人物形態(tài)的表現上,平時多練習練習速寫還是很有必要的。
10. 線面插畫
線面插畫最近一兩年非常流行,準確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成,用塊面表現人物形態(tài)時某些結構會表現不出來,這時候用線條簡單勾勒后,結構就會清晰明了。其次當線面插畫運用在界面上時,可以打破界面純文字或組件化的機械和沉悶感。線面插畫的風格提升畫面熱鬧感的同時,還能保持界面的干凈整潔。
1. 微交互
界面微交互動效會讓用戶的體驗更加精致到位。想要打造優(yōu)秀的產品設計,微交互和動效設計是繞不開的,UI 界面設計通過微交互反饋告知用戶當前正在發(fā)生的事情,所處的狀態(tài)。細微的動效更能調動用戶情緒,取悅用戶。C 端產品微交互和動效已經很成熟了,一部分功勞來自 iOS 系統(tǒng)原生自帶的效果。B 端產品的微交互和動效更多還是在學習海外產品,還需要給前端工程師灌輸微交互和動效的設計價值,共同打造產品體驗細節(jié)。
2. Mg 動畫
Mg 動畫需要很好的節(jié)奏感、韻律,每一個場景動畫都需要其中的元素進行連接變化,讓轉場動畫更加自然,MG 人物動畫通過點線面的動效變化讓畫面更加有趣、自然,通過粒子效果讓特定場景無限循環(huán)會讓人更加印象深刻。
1. 三維圖標
MacOS Big Sur 系統(tǒng)圖標的更新帶動了三維圖標的流行,三維圖標的應該場景還是需要有較大留白空間的界面,因為三維圖標太小后就看不到更多細節(jié)。三維圖標感覺又回到了擬物化和扁平化哪個更好的問題上?設計師應該保持開放多元的視角。設計本身也在不斷的演化融合,存在即合理。合適最重要,它們都會有適合自己的場景和設計價值。
2. 輕三維
為什么輕三維在界面設計中占有一席之位?一個是設計師不斷追求差異化的產物。另一個是更好的表現內容,并與用戶產生共鳴。輕三維的基礎模型都是來自手機界面中的各種元素,比如組件、開關、按鈕、占位符、圖表、幾何圖形、圖標、進度條等,這些都是用戶日常使用系統(tǒng)軟件常見的元素,通過簡單的幾何形體建?!驘艄狻硬馁|—渲染—PS調色。難度系數不大但效果很出彩。第一個出彩點是模型帶有厚度的倒角,結合燈光渲染的光澤是二維軟件不能比擬的。第二個出彩點就是材質自由添加,特別是當下流行的毛玻璃效果,玻璃材質渲染效果更佳。第三個出彩點就是可以加局部燈光,局部的漸變色或環(huán)境光更加出彩。
3. P4D(PS+C4D)
P4D 是 PS 加 C4D 的設計表現技法,也是視覺設計的最后一個環(huán)節(jié),通過 PS 對 C4D 的渲染圖片進行調色,利用 PS 的調色技巧可以很好的解決 C4D 打燈光的瑕疵,還可以利用 PS 強大的合成功能,將渲染圖片與圖片素材進行合成,來表現畫面的視覺度,當然三維軟件比較難實現的水、粒子、煙花等效果,也可以通過 PS 的后期合成來實現,這也是 P4D 的強大之處。
4. 卡通 IP
卡通 IP 設計最近三四年技術的迭代已經慢慢的走上成熟,卡通 IP 也從傳統(tǒng)的純 PS 手繪技法,轉到 C4D 建?!巧壎ā狹D衣服制作—OC渲染—PS(靜態(tài))/AE(動態(tài))調色。
卡通 IP 火的本質更適合做營銷,相比于品牌或 Slogan,卡通 IP 具有親和力和畫面感。隨著各種手辦行業(yè)大熱,受互聯網大廠影響下,卡通 IP 已經是互聯網 B 輪以上公司的標配了。如果團隊中沒有這樣能力的人,也可以通過繪制好二維,一套三維可以選擇外包完成。
對于 UI 設計師來說學習是有成本的,暫時并不是必備技能,如果喜歡完全可以學習,從設計差異化的角度來看三維視覺確實有一定的競爭力。
5. 三維動畫
C4D 三維場景動畫通過構建實物和場景模擬生活中的現實場景,會讓用戶體驗真實感,三維軟件制作動效的最大優(yōu)勢是通過動力學和表達式來模擬真實感,未來在 AR/VR 領域會有更好的發(fā)展。相對于界面動效學習成本難度也相對較大。在三維動畫中 C4D 軟件對于域、動力學還是有一定的優(yōu)勢。
上一次寫 Dribbble 流行趨勢還是兩年前了,通過兩年的沉淀對趨勢流行有了更深的認知。十年的互聯網行業(yè)風風火火,隨著最近的互聯網裁員潮大家也慢慢的進入到反思層,客觀的看待和理解這個真實的世界,曾經的流行趨勢也需要慢慢的沉淀下來。
存在即合理,趨勢流行稍縱即逝,注定是不長久的,只有大浪淘沙歷史遺留下來的風格才能更長久。但我們也不能不去關注,因為哪有什么所謂的創(chuàng)新,只不過是舊元素的重新組合,并符合當下這個時代人的審美需求。香奈兒的“時尚易逝,風格永存”大概就是這個意思吧。
6000 多字的設計流行趨勢,希望能幫助設計師度過互聯網裁員的寒春。最后希望以后每年堅持輸出設計流行趨勢。為設計行業(yè)奉獻微薄之力。
轉載請注明:優(yōu)設網
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司