首頁(yè)

解鎖UI設(shè)計(jì)新趨勢(shì):打造未來(lái)感界面的5大技巧

ui設(shè)計(jì)分享達(dá)人

引言
  隨著科技的迅猛發(fā)展,用戶界面(UI)設(shè)計(jì)作為連接用戶與數(shù)字世界的橋梁,其重要性和影響力日益凸顯。一個(gè)優(yōu)秀的UI設(shè)計(jì)不僅能夠提升用戶體驗(yàn),保持用戶的持續(xù)參與度,還能助力品牌在激烈的市場(chǎng)競(jìng)爭(zhēng)中脫穎而出。如今,設(shè)計(jì)師們面臨的挑戰(zhàn)是如何
捕捉并應(yīng)用新興趨勢(shì),打造出具有未來(lái)感的界面設(shè)計(jì),以滿足用戶對(duì)新鮮感和創(chuàng)新體驗(yàn)的渴望
。
  在未來(lái)感的設(shè)計(jì)中,每一個(gè)小小的細(xì)節(jié)都可能成為引領(lǐng)潮流的風(fēng)向標(biāo)。從
視覺(jué)元素的創(chuàng)新運(yùn)用
智能動(dòng)效與微交互
的精妙結(jié)合,再到
材料設(shè)計(jì)與空間概念
的深度探索,以及
色彩與字體的新潮流
,都是構(gòu)建引人入勝的用戶界面不可或缺的部分。更進(jìn)一步,隨著
增強(qiáng)現(xiàn)實(shí)(AR)和虛擬現(xiàn)實(shí)(VR)技術(shù)
的融入,UI設(shè)計(jì)的邊界被進(jìn)一步拓展,為用戶帶來(lái)前所未有的沉浸式體驗(yàn)。
  本文將深入探討打造未來(lái)感界面的5大技巧,并通過(guò)實(shí)際案例的分析,揭示這些技巧如何在實(shí)際設(shè)計(jì)過(guò)程中得以應(yīng)用,并最終形成具有影響力的產(chǎn)品。無(wú)論是剛踏入U(xiǎn)I設(shè)計(jì)領(lǐng)域的新手,還是經(jīng)驗(yàn)豐富的資深設(shè)計(jì)師,本文都將提供有價(jià)值的見(jiàn)解和靈感,幫助大家解鎖新趨勢(shì),打造具備未來(lái)感的用戶界面,共同邁向更加美好的數(shù)字生活。
(如果文中存在任何不準(zhǔn)確或遺漏之處,期待各位專家的指正和建議)
本文目錄
本文目錄
 
解鎖UI設(shè)計(jì)新趨勢(shì):打造未來(lái)感界面的5大技巧
 
 
一、新趨勢(shì)概覽
1.當(dāng)前UI設(shè)計(jì)的流行趨勢(shì)
  在數(shù)字設(shè)計(jì)的世界中,UI設(shè)計(jì)的趨勢(shì)如同時(shí)尚圈的變遷一樣迅速。每一個(gè)新趨勢(shì)都在告訴我們,技術(shù)正以前所未有的速度影響著我們的日常生活。作為設(shè)計(jì)師,理解并把握這些趨勢(shì)不僅意味著能夠創(chuàng)造出引人入勝的作品,更代表著能夠預(yù)見(jiàn)并塑造未來(lái)用戶與界面交互的方式。
  當(dāng)前流行的UI設(shè)計(jì)趨勢(shì)包括了
極簡(jiǎn)主義、扁平化、暗色模式、玻璃模糊效果(Glassmorphism)、以及動(dòng)態(tài)的視覺(jué)效果
等。這些趨勢(shì)往往反映了用戶對(duì)清晰性、可讀性、以及視覺(jué)舒適度的需求。例如,暗色模式不僅減少了屏幕發(fā)出的光線,減輕了用戶眼睛的疲勞,同時(shí)也賦予了界面一種時(shí)尚和專業(yè)的氣息。(可閱讀我之前的文章《「大廠設(shè)計(jì)師」教你一文讀懂暗色模式》,非常詳細(xì))
當(dāng)前流行的UI設(shè)計(jì)趨勢(shì)
當(dāng)前流行的UI設(shè)計(jì)趨勢(shì)
 
2.科技發(fā)展如何影響UI設(shè)計(jì)
  同時(shí),隨著人工智能和物聯(lián)網(wǎng)的普及,UI設(shè)計(jì)也正在變得更加
智能化和互聯(lián)
。設(shè)備間的無(wú)縫連接帶來(lái)了
統(tǒng)一的用戶體驗(yàn)
,而人工智能的引入則讓界面能夠根據(jù)用戶的行為和習(xí)慣提供個(gè)性化的反饋和建議,極大地
提升了用戶的粘性
小米已經(jīng)建立起了涉及12大領(lǐng)域、98項(xiàng)細(xì)分領(lǐng)域的技術(shù)圖譜,涵蓋了智能手機(jī)、智能汽車、機(jī)器人、軟件和算法、電商、智能制造、金融等各類小米研發(fā)和應(yīng)用的技術(shù)
小米已經(jīng)建立起了涉及12大領(lǐng)域、98項(xiàng)細(xì)分領(lǐng)域的技術(shù)圖譜,涵蓋了智能手機(jī)、智能汽車、機(jī)器人、軟件和算法、電商、智能制造、金融等各類小米研發(fā)和應(yīng)用的技術(shù)
 
3.優(yōu)秀案例解讀
  為了具體展示這些趨勢(shì)在實(shí)際中的應(yīng)用,我們不妨來(lái)看一看
蘋果公司的UI設(shè)計(jì)
。蘋果一直以來(lái)都是工業(yè)設(shè)計(jì)的先驅(qū)者,它的UI設(shè)計(jì)同樣引領(lǐng)著潮流。在最新的iOS系統(tǒng)中,我們可以看到
玻璃模糊效果被運(yùn)用到了極致
,它不僅使界面看起來(lái)更加現(xiàn)代和清新,也為用戶體驗(yàn)增加了層次感和深度。此外,蘋果的
Animoji和Memoji功能
將個(gè)性化的動(dòng)態(tài)表情帶入了消息交流中,這種結(jié)合了
個(gè)性化和技術(shù)趨勢(shì)
的設(shè)計(jì)細(xì)節(jié),
增強(qiáng)了用戶的互動(dòng)樂(lè)趣,并提高了平臺(tái)的參與度
。
蘋果公司的玻璃模糊效果及emoji應(yīng)用
蘋果公司的玻璃模糊效果及emoji應(yīng)用
 
  接下來(lái),我們還可以看到
特斯拉
在其車載用戶界面中采用了
極簡(jiǎn)主義
的設(shè)計(jì)理念。通過(guò)簡(jiǎn)化界面元素,去除多余的裝飾,特斯拉成功地提供了一個(gè)
既美觀又功能性極強(qiáng)
的控制面板,完美地展示了如何
將復(fù)雜信息簡(jiǎn)潔呈現(xiàn)給用戶
特斯拉的極簡(jiǎn)化HMI設(shè)計(jì)
特斯拉的極簡(jiǎn)化HMI設(shè)計(jì)
 
  總之,
了解并應(yīng)用這些UI設(shè)計(jì)的新趨勢(shì)
對(duì)于設(shè)計(jì)師來(lái)說(shuō)是至關(guān)重要的。它們不僅能夠幫助設(shè)計(jì)師創(chuàng)作出符合當(dāng)下審美的作品,更能讓他們預(yù)見(jiàn)未來(lái),
打造出具有前瞻性和創(chuàng)新精神的用戶界面
。在接下來(lái)的章節(jié)中,我們將深入探討如何將這些趨勢(shì)轉(zhuǎn)化為實(shí)際的設(shè)計(jì)技巧,并通過(guò)案例分析來(lái)揭示這些技巧的應(yīng)用方法。
解鎖UI設(shè)計(jì)新趨勢(shì):打造未來(lái)感界面的5大技巧
 
 
二、5大設(shè)計(jì)技巧及應(yīng)用
1.創(chuàng)新的視覺(jué)元素運(yùn)用
  在UI設(shè)計(jì)中,視覺(jué)元素的運(yùn)用是
建立品牌形象和提升用戶體驗(yàn)
的關(guān)鍵。近年來(lái),隨著技術(shù)的不斷進(jìn)步和設(shè)計(jì)理念的更新迭代,設(shè)計(jì)師們已經(jīng)開(kāi)始嘗試更為創(chuàng)新的視覺(jué)元素,以打造具有未來(lái)感的用戶界面。這些創(chuàng)新元素不僅能夠
吸引用戶的目光
,還能
提供新穎的交互體驗(yàn)
,從而
增強(qiáng)用戶的參與度
。
(1).抽象圖形和動(dòng)態(tài)背景
  首先,
抽象圖形和動(dòng)態(tài)背景
成為了流行趨勢(shì)之一。這些元素通常結(jié)合了
復(fù)雜的幾何形狀、微妙的色彩漸變以及動(dòng)態(tài)效果
,用以營(yíng)造出一種科技感或夢(mèng)幻般的氛圍。例如,一個(gè)登錄頁(yè)面可能采用動(dòng)態(tài)的背景,其中包含緩慢旋轉(zhuǎn)的三維幾何形體,這不僅給用戶帶來(lái)了
視覺(jué)上的享受
,也傳達(dá)了
品牌對(duì)未來(lái)科技的追求
圖源:https://dribbble.com
圖源:https://dribbble.com
 
(2).3D元素
  其次,
3D元素的融合
也是創(chuàng)新視覺(jué)元素運(yùn)用的一個(gè)方向。隨著3D建模技術(shù)的發(fā)展,將三維元素集成到二維界面中變得越來(lái)越流行。這樣的設(shè)計(jì)不僅
增添了界面的深度和立體感
,還為用戶
提供了更為豐富的互動(dòng)方式
。例如,懂車帝使用了
3D產(chǎn)品預(yù)覽
,讓用戶能夠從不同角度觀察車輛,增加了購(gòu)物的體驗(yàn)感。
懂車帝的3D看車
懂車帝的3D看車
 
(3).優(yōu)秀案例解讀
  接下來(lái),我們將通過(guò)一個(gè)具體的案例來(lái)進(jìn)一步理解這一技巧的應(yīng)用。
AirPano Travel Book
是一款旅游類應(yīng)用,運(yùn)用了
視差滾動(dòng)效果
來(lái)模擬用戶在旅途中的景深變化,當(dāng)用戶在應(yīng)用中上下滾動(dòng)時(shí),不同層次的圖像將以不同的速度移動(dòng),
營(yíng)造出一種真實(shí)的旅行體驗(yàn)
。同時(shí),在UI中加入
定制化的動(dòng)態(tài)抽象圖形
,比如根據(jù)用戶的目的地展示出具有當(dāng)?shù)靥厣膱D樣,這樣既美化了界面,也
提供了個(gè)性化的信息
。
視差滾動(dòng)效果
視差滾動(dòng)效果
 
定制化抽象圖形
定制化抽象圖形
 
  此外,為了更好地展示創(chuàng)新視覺(jué)元素的運(yùn)用,設(shè)計(jì)師可以利用現(xiàn)代設(shè)計(jì)工具,如
Adobe XD或Sketch
等,這些工具支持導(dǎo)入和創(chuàng)建復(fù)雜的矢量圖形,并能夠模擬各種動(dòng)態(tài)效果。通過(guò)在這些工具中進(jìn)行快速原型設(shè)計(jì)和迭代,設(shè)計(jì)師可以方便地測(cè)試和調(diào)整視覺(jué)元素,直到找到最適合用戶和品牌的設(shè)計(jì)解決方案。
  總之,通過(guò)引入創(chuàng)新的視覺(jué)元素,設(shè)計(jì)師不僅可以
打破傳統(tǒng)的界面設(shè)計(jì)局限
,還可以
推動(dòng)用戶體驗(yàn)向更加動(dòng)態(tài)和互動(dòng)的方向發(fā)展
。這種設(shè)計(jì)技巧要求設(shè)計(jì)師具備前瞻性的洞察力和扎實(shí)的設(shè)計(jì)技能,以便創(chuàng)造出既美觀又實(shí)用的用戶界面。在接下來(lái)的章節(jié)中,我們將探討如何將這些創(chuàng)新的視覺(jué)元素與智能動(dòng)效和微交互結(jié)合起來(lái),進(jìn)一步提升UI設(shè)計(jì)的吸引力。
2.智能動(dòng)效與微交互
  在當(dāng)今的UI設(shè)計(jì)中,智能動(dòng)效(Smart Animations)和微交互(Microinteractions)已經(jīng)成為提升用戶體驗(yàn)不可或缺的元素。這些細(xì)微但至關(guān)重要的設(shè)計(jì)細(xì)節(jié),不僅
使界面更加生動(dòng)活潑,而且有效引導(dǎo)用戶行為,增強(qiáng)應(yīng)用程序的直觀性和易用性
。
(1).智能動(dòng)效
  智能動(dòng)效
是指
根據(jù)用戶的互動(dòng)而觸發(fā)的動(dòng)畫效果
,它能夠提供視覺(jué)反饋,幫助用戶理解他們的行為和應(yīng)用程序的響應(yīng)。例如,當(dāng)用戶點(diǎn)擊一個(gè)按鈕時(shí),按鈕可能會(huì)有顏色漸變或者擴(kuò)大縮小的動(dòng)畫,這種動(dòng)效
向用戶確認(rèn)了他們的操作已被系統(tǒng)識(shí)別和處理
。此外,智能動(dòng)效也可以用來(lái)
引導(dǎo)用戶的注意力
,如通過(guò)動(dòng)畫展示來(lái)突出重要的信息或者引導(dǎo)用戶完成特定的任務(wù)流程。
blibili的三連動(dòng)效
blibili的三連動(dòng)效
 
(2).微交互
 
  微交互
則是一種細(xì)節(jié)層面的設(shè)計(jì),它關(guān)注的是
用戶在使用產(chǎn)品過(guò)程中的微小時(shí)刻
,例如TabBar底部導(dǎo)航欄的選中效果、滑動(dòng)刪除應(yīng)用通知時(shí)的"嗖"的一聲提示,或是設(shè)置定時(shí)器時(shí)旋轉(zhuǎn)的撥輪聲。這些看似不經(jīng)心的設(shè)計(jì)實(shí)際上極大地
豐富了用戶的體驗(yàn)
,讓用戶在使用過(guò)程中的每一個(gè)小步驟都
獲得滿足感和愉悅感
tabbar動(dòng)效設(shè)計(jì),可通過(guò)AE制作
tabbar動(dòng)效設(shè)計(jì),可通過(guò)AE制作
 
 (3).優(yōu)秀案例解讀
  為了更好地演示智能動(dòng)效和微交互的實(shí)際應(yīng)用,我們來(lái)看一個(gè)具體的案例分析。網(wǎng)易云音樂(lè)是一款音樂(lè)流媒體應(yīng)用,我們可以在用戶播放一首歌曲時(shí)加入一個(gè)
從封面圖片過(guò)渡到播放器界面
的流暢動(dòng)效,這不僅美觀現(xiàn)代,還強(qiáng)化了用戶的操作反饋。當(dāng)用戶進(jìn)行歌曲切換時(shí),唱片機(jī)上的
唱針通過(guò)拿起放下的動(dòng)效表示切換唱片
,同時(shí)伴隨著節(jié)奏的跳動(dòng),增強(qiáng)了聽(tīng)覺(jué)與視覺(jué)的聯(lián)動(dòng)。
網(wǎng)易云音樂(lè)的播放歌曲
網(wǎng)易云音樂(lè)的播放歌曲
 
  在微交互方面,如果用戶將歌曲添加到收藏列表,有許多類似
心跳般的跳動(dòng)動(dòng)畫
作為反饋,讓用戶感受到自己的選擇得到了
系統(tǒng)的即時(shí)回應(yīng)
,同時(shí)這個(gè)動(dòng)效也可以根據(jù)用戶的個(gè)人喜好進(jìn)行選擇,滿足了用戶的個(gè)性化需求。
網(wǎng)易云音樂(lè)的個(gè)性化收藏
網(wǎng)易云音樂(lè)的個(gè)性化收藏
 
  為了實(shí)現(xiàn)這些智能動(dòng)效和微交互,設(shè)計(jì)師們通常需要掌握一定的動(dòng)畫制作技能,并熟悉如
After Effects、Principle
等動(dòng)畫制作工具。通過(guò)這些工具,設(shè)計(jì)師不僅可以創(chuàng)造復(fù)雜的動(dòng)效,還能將這些動(dòng)效導(dǎo)入到原型設(shè)計(jì)中,確保它們?cè)趯?shí)際應(yīng)用場(chǎng)景中的可行性和效果。
  總結(jié)來(lái)說(shuō),
智能動(dòng)效和微交互是提升UI設(shè)計(jì)吸引力的重要技巧
。它們不僅美化了界面,增加了樂(lè)趣,更重要的是提升了用戶的實(shí)際使用體驗(yàn)。在接下來(lái)的章節(jié)中,我們將探討如何利用材料設(shè)計(jì)和空間概念來(lái)進(jìn)一步增強(qiáng)界面的層次感和深度感。
3.材料設(shè)計(jì)與空間概念
  在UI設(shè)計(jì)的世界中,材料設(shè)計(jì)(Material Design)是由
谷歌
推出的一套設(shè)計(jì)語(yǔ)言,
旨在通過(guò)使用陰影、動(dòng)畫和深度效果來(lái)模擬真實(shí)世界的材料和質(zhì)感
。這種設(shè)計(jì)理念不僅使界面看起來(lái)更加直觀和一致,而且通過(guò)引入空間概念,增強(qiáng)了用戶的沉浸感和操作直覺(jué)性。
(1).材料設(shè)計(jì)
  首先,
材料設(shè)計(jì)
的核心在于其能夠
創(chuàng)建一個(gè)具有層次感的界面
。設(shè)計(jì)師利用紙張隱喻來(lái)構(gòu)建出一個(gè)可以觸摸的虛擬世界,在這個(gè)世界中,
每一個(gè)元素都像是一張放置在桌面上的紙片
。通過(guò)使用
陰影和厚度
,這些紙張般的元素之間建立了明顯的
層級(jí)關(guān)系
,讓用戶能夠清晰地感知到哪些是可以互動(dòng)的按鈕或卡片,哪些是背景信息或次要元素。
將手機(jī)屏幕看作紙張,而UI設(shè)計(jì)師就是在二維平面上創(chuàng)造三維畫作
將手機(jī)屏幕看作紙張,而UI設(shè)計(jì)師就是在二維平面上創(chuàng)造三維畫作
 
(2).空間概念
  其次,
空間概念
在材料設(shè)計(jì)中同樣至關(guān)重要。通過(guò)對(duì)
Z軸
的利用,設(shè)計(jì)師可以創(chuàng)造出
元素之間的前后關(guān)系
,使得一些元素看起來(lái)像是浮動(dòng)在其他元素的上方或下方。例如,彈出菜單或抽屜式導(dǎo)航會(huì)出現(xiàn)在主界面之上,而幻燈片則可能在下方滑動(dòng)進(jìn)入視野。這樣的設(shè)計(jì)不僅
增添了視覺(jué)上的趣味性
,也
使得用戶更容易理解多維的導(dǎo)航結(jié)構(gòu)
。
不同的界面元素對(duì)應(yīng)不同的視覺(jué)層級(jí)
不同的界面元素對(duì)應(yīng)不同的視覺(jué)層級(jí)
 
(3).優(yōu)秀案例解讀
  為了更好地演示材料設(shè)計(jì)和空間概念的應(yīng)用,讓我們來(lái)看一個(gè)案例。在
Airbnb愛(ài)彼迎
的搜索結(jié)果頁(yè)面中,房源都
以卡片形式展現(xiàn)
,并且有
懸浮效果
,用戶可以感受到元素之間的堆疊效果。而房東名片以書(shū)本形式展示在界面最上層,點(diǎn)擊之后給用戶帶來(lái)
拿起展開(kāi)信息的體驗(yàn)
。此外,房源圖片的高質(zhì)量和大尺寸也使得用戶仿佛能觸摸到實(shí)際空間,增強(qiáng)了
沉浸感
愛(ài)彼迎的搜索界面
愛(ài)彼迎的搜索界面
 
  實(shí)現(xiàn)這些效果,設(shè)計(jì)師通常需要掌握如
Sketch、Figma、Adobe XD
等現(xiàn)代UI設(shè)計(jì)工具,這些工具提供了必要的
組件和動(dòng)效
支持來(lái)實(shí)現(xiàn)材料設(shè)計(jì)的規(guī)范。此外,它們也支持跨平臺(tái)協(xié)作,確保設(shè)計(jì)在不同設(shè)備和操作系統(tǒng)中保持一致性和功能性。
  總的來(lái)說(shuō),材料設(shè)計(jì)和空間概念賦予了UI設(shè)計(jì)更多的
立體感和現(xiàn)實(shí)感
。通過(guò)恰當(dāng)?shù)剡\(yùn)用這些技巧,設(shè)計(jì)師可以創(chuàng)造出既
美觀又富有邏輯性
的用戶界面,從而提升用戶體驗(yàn)和滿意度。在接下來(lái)的章節(jié)中,我們將深入探討色彩與字體的新潮流以及它們?nèi)绾斡绊懹脩舻那楦泻托袨椤?/div>
3.色彩與字體的新潮流
  UI設(shè)計(jì)中,色彩和字體是
塑造品牌形象和傳遞信息
的關(guān)鍵要素。隨著設(shè)計(jì)風(fēng)格的不斷演變,新的色彩配搭和字體設(shè)計(jì)趨勢(shì)也在持續(xù)涌現(xiàn),為設(shè)計(jì)師提供了更多的選擇和創(chuàng)意空間。掌握這些新潮流不僅能夠
使設(shè)計(jì)作品更具時(shí)代感
,而且可以深刻
影響用戶的情感反應(yīng)和行為模式
。
(1).色彩趨勢(shì)
  新興的
色彩趨勢(shì)通
常反映在
年度流行的顏色
上,如
Pantone每年發(fā)布的年度色
等。這些流行色往往與文化趨勢(shì)、社會(huì)情緒以及科技發(fā)展緊密相連。例如,一種溫暖而包容的色彩可能反映了人們對(duì)和諧社區(qū)的向往,而一種鮮亮且活潑的色彩則可能是對(duì)日益增長(zhǎng)的數(shù)字化生活的回應(yīng)。在UI設(shè)計(jì)中運(yùn)用這些流行色,可以
增強(qiáng)產(chǎn)品的時(shí)尚感和相關(guān)性
。
Pantone近四年的流行色
Pantone近四年的流行色
 
(2).字體設(shè)計(jì)
 
字體設(shè)計(jì)
同樣重要,因?yàn)椴煌?/div>
字體風(fēng)格和排版
可以直接影響
信息的傳達(dá)效果和用戶的閱讀體驗(yàn)
。最新的字體趨勢(shì)可能包括
無(wú)襯線字體
的進(jìn)一步簡(jiǎn)化、
手寫字體
的個(gè)性化使用,或者是
動(dòng)態(tài)字體
的出現(xiàn),后者在不同的屏幕和設(shè)備上能夠提供最佳可讀性。此外,
響應(yīng)式排版
也越來(lái)越受到重視,它允許字體大小和行距隨屏幕尺寸的改變而調(diào)整,從而優(yōu)化移動(dòng)端和桌面端的閱讀體驗(yàn)。
近年流行的字體風(fēng)格和排版
近年流行的字體風(fēng)格和排版
 
(3).優(yōu)秀案例解讀
  為了具體展示這些趨勢(shì)的應(yīng)用,我們來(lái)看一個(gè)案例。
QQ
是一款國(guó)內(nèi)的主流社交媒體應(yīng)用,它的消息界面選擇了一種
明亮且具有活力的藍(lán)色作為主題色
,這種顏色既能吸引
年輕用戶
群體,又能與應(yīng)用的
清新現(xiàn)代感
相契合。對(duì)于
字體
,用戶可以
根據(jù)自己的喜好選擇
一種簡(jiǎn)潔的無(wú)襯線字體來(lái)增強(qiáng)消息的清晰度,同時(shí)在用戶發(fā)送的
個(gè)性化簽名
中用戶也可以選擇一款有趣的手寫風(fēng)格字體,以
鼓勵(lì)用戶自我表達(dá)和個(gè)性化分享
QQ中字體、顏色、主題的應(yīng)用
QQ中字體、顏色、主題的應(yīng)用
 
  在實(shí)現(xiàn)這些設(shè)計(jì)時(shí),設(shè)計(jì)師可以利用多種工具和技術(shù),如
CSS變量和HTML5的@font-face
規(guī)則,以確保
色彩和字體的準(zhǔn)確展現(xiàn)
和良好性能。此外,設(shè)計(jì)師還應(yīng)該考慮到
多語(yǔ)言環(huán)境下字體的兼容性
,確保所有用戶都能獲得一致的體驗(yàn)。
  綜上所述,色彩和字體在UI設(shè)計(jì)中的新潮流不僅
反映了文化的變遷和技術(shù)的發(fā)展
,而且對(duì)于提
升用戶體驗(yàn)和滿足審美需求
起到了關(guān)鍵作用。通過(guò)在設(shè)計(jì)中融入這些新趨勢(shì),設(shè)計(jì)師能夠創(chuàng)造出既
富有表現(xiàn)力又易于使用的界面
。在接下來(lái)的章節(jié)中,我們將深入探討如何將增強(qiáng)現(xiàn)實(shí)(AR)和虛擬現(xiàn)實(shí)(VR)技術(shù)融入U(xiǎn)I設(shè)計(jì)中,為用戶帶來(lái)前所未有的交互體驗(yàn)。
5.增強(qiáng)現(xiàn)實(shí)(AR)與虛擬現(xiàn)實(shí)(VR)的融合
  隨著技術(shù)的不斷進(jìn)步,
增強(qiáng)現(xiàn)實(shí)(AR)和虛擬現(xiàn)實(shí)(VR)
已經(jīng)成為UI設(shè)計(jì)領(lǐng)域的新趨勢(shì),它們?yōu)橛脩籼峁┝?/div>
沉浸式和互動(dòng)式的體驗(yàn)
。這些技術(shù)
將現(xiàn)實(shí)世界和虛擬世界融合在一起
,創(chuàng)造出
全新的用戶界面和交互方式
。在這篇文章的最后部分,我們將探討如何將AR和VR技術(shù)融入U(xiǎn)I設(shè)計(jì)中,以提供獨(dú)特而前沿的用戶體驗(yàn)。
AR與VR的區(qū)別
AR與VR的區(qū)別
 
(1).增強(qiáng)現(xiàn)實(shí)(AR)
  增強(qiáng)現(xiàn)實(shí)技術(shù)允許用戶
在現(xiàn)實(shí)世界的環(huán)境中看到由計(jì)算機(jī)生成的圖像
。在UI設(shè)計(jì)中,這意味著設(shè)計(jì)師可以
創(chuàng)建能夠與現(xiàn)實(shí)世界相互作用的界面元素
。例如,得物利用了AR技術(shù)讓用戶在自己的家中就能試
穿衣服或鞋子
,從而
消除了線上購(gòu)物與實(shí)體店購(gòu)物之間的界限
。設(shè)計(jì)師需要確保這些虛擬對(duì)象與現(xiàn)實(shí)世界的環(huán)境相協(xié)調(diào),同時(shí)提供直觀的用戶操作指南和提示。
得物的AR試穿功能
得物的AR試穿功能
 
(2).虛擬現(xiàn)實(shí)(VR)
  虛擬現(xiàn)實(shí)則創(chuàng)造了一個(gè)
完全由計(jì)算機(jī)生成的環(huán)境
,用戶可以在其中進(jìn)行沉浸式的體驗(yàn)。在UI設(shè)計(jì)中,這通常涉及到
創(chuàng)造一個(gè)360度的界面
,用戶可以在其中環(huán)顧四周,并與之互動(dòng)。例如,
網(wǎng)易瑤臺(tái)
可以允許用戶在家中就能
探索遙遠(yuǎn)的目的地
,或是通過(guò)虛擬現(xiàn)實(shí)體驗(yàn)提前
參觀即將舉辦的活動(dòng)場(chǎng)地
。其業(yè)務(wù)范圍包括
私域元宇宙、數(shù)字文旅、營(yíng)銷活動(dòng)、展覽展廳、企業(yè)空間
等多種場(chǎng)景。設(shè)計(jì)師在這個(gè)領(lǐng)域面臨的挑戰(zhàn)是如何在不引起暈動(dòng)癥的前提下,提供流暢而引人入勝的體驗(yàn)。
網(wǎng)易瑤臺(tái)的VR服務(wù)場(chǎng)景
網(wǎng)易瑤臺(tái)的VR服務(wù)場(chǎng)景
 
(3).優(yōu)秀案例解讀
  為了具體展示AR和VR在UI設(shè)計(jì)中的應(yīng)用,我們來(lái)看一個(gè)案例分析。
如視
是國(guó)內(nèi)一家提供
AR/VR看房
技術(shù)的服務(wù)公司,其合作對(duì)象包括自如、貝殼、華住會(huì)、萬(wàn)科等。房地產(chǎn)應(yīng)用的
目標(biāo)用戶是潛在的房屋買家
,加入AR技術(shù)來(lái)讓用戶
在自己的手機(jī)上查看房屋的內(nèi)部布局和外觀設(shè)計(jì)
。當(dāng)用戶指向特定的房屋模型時(shí),屏幕上會(huì)顯示房屋的實(shí)際外觀,并允許用戶通過(guò)手機(jī)攝像頭在現(xiàn)實(shí)世界的背景下查看它。此外,用戶還可以通過(guò)VR技術(shù)進(jìn)行一次
虛擬參觀
,就像親自走在房屋內(nèi)一樣,從每個(gè)角度觀察房間的布局和設(shè)計(jì)。
如視的AR看房功能
如視的AR看房功能
 
  實(shí)現(xiàn)這樣的設(shè)計(jì)不僅需要對(duì)UI設(shè)計(jì)有深刻的理解,還需要掌握如
Unity3D、Unreal Engine
等高級(jí)開(kāi)發(fā)工具,以及對(duì)于AR和VR硬件如
Oculus Rift
Microsoft HoloLens
的熟悉。設(shè)計(jì)師必須考慮到用戶的物理運(yùn)動(dòng)和視線變化,以確保界面元素在不同的視角和情境下都能正確顯示并提供反饋。
  總結(jié)來(lái)說(shuō),將AR和VR技術(shù)融入U(xiǎn)I設(shè)計(jì)是一個(gè)
充滿挑戰(zhàn)但同樣充滿機(jī)遇的領(lǐng)域
。它要求設(shè)計(jì)師不僅要關(guān)注傳統(tǒng)的設(shè)計(jì)原則,還要
對(duì)新技術(shù)有深入的了解和實(shí)驗(yàn)精神
。通過(guò)結(jié)合這些技術(shù),設(shè)計(jì)師可以創(chuàng)造出前所未有的體驗(yàn),將用戶帶入一個(gè)全新的互動(dòng)維度。
寫在最后
  在探索未來(lái)感UI設(shè)計(jì)的旅程中,我們共同穿越了五個(gè)關(guān)鍵技巧的門檻,它們分別是
創(chuàng)新的視覺(jué)元素運(yùn)用、智能動(dòng)效與微交互的精妙結(jié)合、材料設(shè)計(jì)與空間概念的深度利用、色彩與字體的新潮流引領(lǐng),以及對(duì)增強(qiáng)現(xiàn)實(shí)(AR)與虛擬現(xiàn)實(shí)(VR)技術(shù)
的前沿融合。通過(guò)這些技巧,設(shè)計(jì)師們能夠打造出不僅具有功能性,而且具有強(qiáng)烈吸引力和未來(lái)感的用戶界面。
  隨著技術(shù)的不斷進(jìn)步和用戶需求的持續(xù)演變,UI設(shè)計(jì)的未來(lái)將繼續(xù)展開(kāi)新的可能性。設(shè)計(jì)師們需要
不斷地學(xué)習(xí)、適應(yīng)并實(shí)驗(yàn)最新的設(shè)計(jì)技巧和技術(shù)
,以確保他們的作品不僅與時(shí)俱進(jìn),更能引領(lǐng)潮流。在此過(guò)程中,設(shè)計(jì)師們將拓寬自己的創(chuàng)意視野,提高解決問(wèn)題的能力,并最終為用戶帶來(lái)更加豐富、直觀且愉悅的體驗(yàn)。
  這篇文章不僅是對(duì)現(xiàn)代UI設(shè)計(jì)技巧的全面概述,也是一個(gè)對(duì)未來(lái)設(shè)計(jì)趨勢(shì)的期待和準(zhǔn)備。讓我們一起攜手進(jìn)入這個(gè)充滿創(chuàng)造力和無(wú)限可能的設(shè)計(jì)新時(shí)代。
 


作者:阿琳01
鏈接:https://www.zcool.com.cn/article/ZMTYyNDYyMA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

藍(lán)藍(lán)設(shè)計(jì)(www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

WechatIMG27.jpg

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)軟件vue開(kāi)發(fā)

 

2024 年 十大UX/UI設(shè)計(jì) 趨勢(shì)

ui設(shè)計(jì)分享達(dá)人

在外網(wǎng)看到的一篇關(guān)于2024設(shè)計(jì)趨勢(shì)的文章,翻譯歸納分享給大家。
一.3D圖像
3D插畫的優(yōu)勢(shì):
1.開(kāi)發(fā)成本低
2.受設(shè)計(jì)師的個(gè)人風(fēng)格影響小
3.質(zhì)感、材質(zhì)更顯風(fēng)格化抽象化,易吸引用戶的注意力
3D插畫
3D插畫
 
動(dòng)態(tài)3D插畫
動(dòng)態(tài)3D插畫
 
3D插畫在金融類網(wǎng)站的應(yīng)用
3D插畫在金融類網(wǎng)站的應(yīng)用
 
3D插畫在設(shè)計(jì)師個(gè)人網(wǎng)站的應(yīng)用
3D插畫在設(shè)計(jì)師個(gè)人網(wǎng)站的應(yīng)用
 
3D插畫在設(shè)計(jì)工作室網(wǎng)站的應(yīng)用
3D插畫在設(shè)計(jì)工作室網(wǎng)站的應(yīng)用
 
二.復(fù)雜漸變
復(fù)雜漸變的優(yōu)勢(shì):
體現(xiàn)未來(lái)感,與高科技產(chǎn)品建立認(rèn)知聯(lián)系
品牌代理機(jī)構(gòu)
品牌代理機(jī)構(gòu)
 
創(chuàng)意機(jī)構(gòu)
創(chuàng)意機(jī)構(gòu)
 
創(chuàng)意工作室
創(chuàng)意工作室
 
三.玻璃態(tài)和新晶態(tài)
玻璃態(tài)和新晶態(tài)的優(yōu)勢(shì):
真實(shí)感,用戶感覺(jué)自己在近距離觀察物體
 
玻璃形態(tài)主義
是指在界面中模仿玻璃的質(zhì)感
新形態(tài)主義
是從從擬物主義衍生而來(lái)的一種適應(yīng)性趨勢(shì),適合現(xiàn)代審美。它強(qiáng)調(diào)在物體、體積和漸變上進(jìn)行高質(zhì)量的陰影渲染
 
2024 年 十大UX/UI設(shè)計(jì) 趨勢(shì)
 
 
2024 年 十大UX/UI設(shè)計(jì) 趨勢(shì)
 
 
四.低多邊形插圖
低多邊形插圖優(yōu)勢(shì)
1.簡(jiǎn)潔明了,有效傳達(dá)信
2.游戲質(zhì)感、懷舊感,喚起愉快的回憶和童年的輕松感
2024 年 十大UX/UI設(shè)計(jì) 趨勢(shì)
 
 
五.2D插畫
2D插圖優(yōu)勢(shì):
風(fēng)格化強(qiáng)烈,更能突出品牌風(fēng)格。Google、Yandex、Dropbox、Mailchimp 和 Wetransfer都傾向于這種2D風(fēng)格插畫。
2024 年 十大UX/UI設(shè)計(jì) 趨勢(shì)
 
 
2024 年 十大UX/UI設(shè)計(jì) 趨勢(shì)
 
 
六.極簡(jiǎn)主義
廣泛應(yīng)用于提供室內(nèi)設(shè)計(jì)服務(wù)、法律服務(wù)和電子商務(wù)的項(xiàng)目,人們傾向于不沉迷于明亮的細(xì)節(jié),因?yàn)橛脩粜枰獙W⒂诨疽?,而不是被過(guò)多的裝飾元素分散注意力。
2024 年 十大UX/UI設(shè)計(jì) 趨勢(shì)
 
 
2024 年 十大UX/UI設(shè)計(jì) 趨勢(shì)
 
 
2024 年 十大UX/UI設(shè)計(jì) 趨勢(shì)
 
 
2024 年 十大UX/UI設(shè)計(jì) 趨勢(shì)
 
 
2024 年 十大UX/UI設(shè)計(jì) 趨勢(shì)
 
 
七.暗黑主義
這樣的風(fēng)格營(yíng)造出一種特殊的宇宙氛圍,增添了一絲奢華感。因此,高級(jí)銀行產(chǎn)品、信息行業(yè)的封閉社區(qū)、VIP 服務(wù)和商品中經(jīng)常出現(xiàn)暗黑主題。它有效地強(qiáng)調(diào)了高地位和所用技術(shù)的進(jìn)步性。
基于區(qū)塊鏈的數(shù)字生態(tài)系統(tǒng) Glec 項(xiàng)目
基于區(qū)塊鏈的數(shù)字生態(tài)系統(tǒng) Glec 項(xiàng)目
 
區(qū)塊鏈項(xiàng)目
區(qū)塊鏈項(xiàng)目
 
2024 年 十大UX/UI設(shè)計(jì) 趨勢(shì)
 
 
八.動(dòng)效
2024 年 十大UX/UI設(shè)計(jì) 趨勢(shì)
 
 
2024 年 十大UX/UI設(shè)計(jì) 趨勢(shì)
 
 
動(dòng)效示例網(wǎng)站鏈接:
https://youtu.be/suC3o141tB0
 
九.人物
為了進(jìn)一步吸引用戶,可以考慮使用獨(dú)特的吉祥物角色。它們會(huì)在用戶使用數(shù)字產(chǎn)品時(shí)陪伴用戶并讓他們參與互動(dòng)。這種方法有助于在競(jìng)爭(zhēng)對(duì)手中脫穎而出,確保溝通的一致性(如果用戶在品牌或公司的每個(gè)平臺(tái)上都遇到熟悉的角色,他們會(huì)更容易適應(yīng))
營(yíng)銷平臺(tái)
營(yíng)銷平臺(tái)
 
推廣 Web3 項(xiàng)目
推廣 Web3 項(xiàng)目
 
界面中的字符有多種用途:
  •  
    角色充當(dāng)向?qū)В瑸橛脩籼峁椭?、提示和鼓?lì)。它們幫助用戶瀏覽界面并了解產(chǎn)品的功能。
  •  
    角色有助于與觀眾建立情感聯(lián)系。它們傳達(dá)產(chǎn)品的價(jià)值,并通過(guò)添加個(gè)人風(fēng)格使互動(dòng)更具吸引力。
  •  
    用戶可以通過(guò)角色獲得獎(jiǎng)金、折扣或其他獎(jiǎng)勵(lì)。這與游戲化的大趨勢(shì)相吻合,用戶可以通過(guò)完成任務(wù)獲得成就。
 
十.美好回憶
復(fù)古和懷舊設(shè)計(jì)元素是激發(fā)用戶懷舊情緒的絕佳觸發(fā)器。它們讓用戶與產(chǎn)品進(jìn)行情感互動(dòng),提供身臨其境的體驗(yàn)。在潛意識(shí)中,它們?cè)鰪?qiáng)了訪客的信任,傳達(dá)出這樣的信息:“我們有著共同的過(guò)去,共同的回憶。我們一起長(zhǎng)大。”
防曬霜產(chǎn)品網(wǎng)站
防曬霜產(chǎn)品網(wǎng)站
 
Spotify 促銷
Spotify 促銷
 
幫助音樂(lè)家創(chuàng)作歌曲的服務(wù)
幫助音樂(lè)家創(chuàng)作歌曲的服務(wù)
 
開(kāi)發(fā)設(shè)計(jì)工作室
開(kāi)發(fā)設(shè)計(jì)工作室
 
十一.大膽的實(shí)驗(yàn)設(shè)計(jì)
飽和的字體、酸性色彩、GIF 動(dòng)畫、滾動(dòng)文本以及明亮但平面的拼貼畫、來(lái)自 Mac OS 9、Windows 2000 和 Windows ME 的元素——當(dāng)您想要?jiǎng)?chuàng)建真正“狂野”且令人難忘的視覺(jué)效果時(shí),可以使用所有這些元素。
秘密社團(tuán)與全球陰謀
秘密社團(tuán)與全球陰謀
 
興趣工作室
興趣工作室
 
設(shè)計(jì)師個(gè)人界面
設(shè)計(jì)師個(gè)人界面
 
樂(lè)高的歷史
樂(lè)高的歷史
 
 


作者:油燜小蝦米
鏈接:https://www.zcool.com.cn/article/ZMTYyMjAxMg==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 

藍(lán)藍(lán)設(shè)計(jì)(www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

 

 

2024 年的 UX/UI 設(shè)計(jì)趨勢(shì),關(guān)于未來(lái)科技體驗(yàn)的可能性

博博

一、從便當(dāng)盒而來(lái)的 Bento UI

便當(dāng)盒是日本午餐和午餐盒文化的重要組成部分。他們以井然有序的方式儲(chǔ)存食物,并保持著食物清潔。

圖片來(lái)源 — Freepik

從便當(dāng)盒演變而來(lái)的 Bento UI 設(shè)計(jì)風(fēng)格,是便當(dāng)盒在屏幕上的數(shù)字化效果,基于卡片的設(shè)計(jì)或網(wǎng)格布局,其中信息以不同的部分或容器呈現(xiàn),以提高清晰度和易用性。它慢慢開(kāi)始在 Dribbble 和 Behance 等平臺(tái)上掀起波瀾,吸引數(shù)百萬(wàn)設(shè)計(jì)師關(guān)注。

后續(xù)這種“模塊化”設(shè)計(jì)概念開(kāi)始出現(xiàn)在網(wǎng)站的儀表板,包括 PayPal 的銷售和財(cái)務(wù)儀表板、Google Ads 的分析工具等。Windows Phone 和 Lumia 使用的 UI 本質(zhì)上是 Bento 設(shè)計(jì)風(fēng)格的早期迭代。后來(lái),微軟也將這一概念應(yīng)用到了 Windows 8 的 Windows 桌面開(kāi)始菜單中。

Windows 8 開(kāi)始菜單當(dāng)蘋果公司在 iPhone 登陸頁(yè)面上開(kāi)始使用 Bento 網(wǎng)格時(shí),Bento 設(shè)計(jì)被徹底引爆,很快擴(kuò)展到蘋果的發(fā)布會(huì)演示中。

另一張?zhí)O果海報(bào)

眾所周知,蘋果公司總能引領(lǐng)市場(chǎng)設(shè)計(jì)趨勢(shì),而 Bento 設(shè)計(jì)風(fēng)格只是其中之一。從那以后,每個(gè)設(shè)計(jì)師都使用 Bento 進(jìn)行產(chǎn)品設(shè)計(jì)、產(chǎn)品發(fā)布等。

日式便當(dāng)?shù)脑O(shè)計(jì)與 Bento 設(shè)計(jì)趨勢(shì)之間的最大區(qū)別在于, Bento 網(wǎng)格的每個(gè)部分都代表一個(gè)獨(dú)特的空間,而不是一個(gè)組的一部分。它現(xiàn)在已經(jīng)發(fā)展到包括產(chǎn)品演示,與其他一些獨(dú)特的布局混合,甚至采用新的視覺(jué)設(shè)計(jì)概念進(jìn)行風(fēng)格化。比如下面這個(gè):

Bento 設(shè)計(jì)互動(dòng)現(xiàn)場(chǎng)演示

上面的例子來(lái)自 diagram.com,它使用便當(dāng)網(wǎng)格來(lái)展示其工具通過(guò)交互式體驗(yàn)可以做什么的現(xiàn)實(shí)生活示例,讓這個(gè)工具更具吸引力,并告訴用戶他們應(yīng)該期待什么。

同時(shí),為了幫助全球設(shè)計(jì)師開(kāi)拓思路,出現(xiàn)了一些 Bento 設(shè)計(jì)靈感的收集網(wǎng)站,如 Bentogrids.com ,其中有大量用于 UI 和圖形設(shè)計(jì)的 Bento 網(wǎng)格。感興趣的設(shè)計(jì)師朋友可以前往體驗(yàn)。

Bentogrids官網(wǎng)

Bento UI 設(shè)計(jì)風(fēng)格擴(kuò)展性較強(qiáng),可以快速的創(chuàng)建響應(yīng)式動(dòng)態(tài)分布,同時(shí)可以輕松地創(chuàng)建明確的視覺(jué)層次結(jié)構(gòu)和布局,提高信息可讀性和可理解性。這些優(yōu)勢(shì)讓 Bento UI 在移動(dòng)設(shè)備上的發(fā)揮非常出色,但如果是層級(jí)結(jié)構(gòu)較為復(fù)雜的頁(yè)面,Bento UI可能并不適合。

二、AR / VR設(shè)計(jì)與更交互式的空間體驗(yàn)

想象一下,你剛剛醒來(lái),拿起手機(jī)查看“重要電子郵件”。畫面切換,你帶著蘋果的 Vision Pro,整個(gè)信息流都來(lái)源于這里。這是 2023 年 6 月 5 日全世界每一位科技和設(shè)計(jì)愛(ài)好者的早晨。

圖片來(lái)源 — Apple.com

在接下來(lái)的幾周里,這是科技界談?wù)摰闹饕掝},每個(gè)設(shè)計(jì)師都在努力學(xué)習(xí)空間設(shè)計(jì)技能。除了設(shè)計(jì)趨勢(shì)之外,各種 AR / VR 初創(chuàng)公司也走到了最前沿,他們的技術(shù)終于被人們談?wù)?。Vision Pro 真正推動(dòng)了 AR 和 VR 的發(fā)展。

偉大的技術(shù)帶來(lái)巨大的設(shè)計(jì)潛力。從智能手表到折疊手機(jī),設(shè)計(jì)師們總是挺身而出,展示他們的適應(yīng)性。空間設(shè)計(jì)也不例外。

一睹即將發(fā)生的事情

一款名為“Bezi”的流行設(shè)計(jì)師工具隨之推出,它非常接近 Figma 和 Spline 等設(shè)計(jì)工具,但增加了第三維空間。設(shè)計(jì)師可以進(jìn)行空間設(shè)計(jì),連接可用的 AR / VR 耳機(jī),并創(chuàng)建交互式空間體驗(yàn)。

更好的 UX 是更好的 AR / VR 體驗(yàn)的一個(gè)重要貢獻(xiàn)者。深入了解前沿設(shè)計(jì)背后的技術(shù)、使用實(shí)際的 VR 耳機(jī)、在空間環(huán)境中進(jìn)行測(cè)試,這些都是工作的一部分。隨著我們的發(fā)展,我們目前對(duì)用戶體驗(yàn)的理解肯定會(huì)有很多新的變化。這是需要持續(xù)積累并會(huì)在將來(lái)使用的技能之一。

除了蘋果公司豐富的想象力和雄厚的財(cái)力之外,還有一些不太懂技術(shù)的公司也為佩戴眼鏡帶來(lái)了全新的體驗(yàn)。比如太陽(yáng)鏡公司 RayBan ,已經(jīng)憑借其新款 Meta Wayfarer 進(jìn)入了智能可穿戴設(shè)備競(jìng)賽。它的內(nèi)置攝像頭和智能功能允許用戶存儲(chǔ)視頻/圖像并直播到社交媒體,這為用戶體驗(yàn)和客戶體驗(yàn)帶來(lái)了新的維度。

圖片來(lái)源 — RayBan

三、動(dòng)畫與 3D 設(shè)計(jì)成為新趨勢(shì)

當(dāng)更多人掌握一項(xiàng)新技能時(shí),新趨勢(shì)往往就會(huì)誕生。LottieFiles 可以便捷的將 UI 生成簡(jiǎn)單的動(dòng)畫,他們甚至推出了 Figma 插件,允許用戶將 Figma 動(dòng)畫轉(zhuǎn)換為可導(dǎo)出的 Lottie JSON 文件。這解決了 After Effects 和類似軟件的漫長(zhǎng)學(xué)習(xí)曲線問(wèn)題,讓更多的設(shè)計(jì)師可以自己快速制作動(dòng)畫。

同時(shí)我們注意到,如今每個(gè)公司的登陸頁(yè)面上都有誘人的互動(dòng)。這源于網(wǎng)站訪問(wèn)者對(duì)差異化體驗(yàn)的需求不斷增長(zhǎng),以及在銷售產(chǎn)品/服務(wù)的過(guò)程中講好故事的更大需求。

以 Apple Watch Series 9 的登陸頁(yè)面交互為例:

有了滾動(dòng)動(dòng)畫,訪問(wèn)者就會(huì)全神貫注于你要向他們展示的內(nèi)容。Webflow 和 Framer 等無(wú)代碼工具不斷創(chuàng)新,為設(shè)計(jì)人員帶來(lái)此類動(dòng)畫功能,而無(wú)需編寫長(zhǎng)行代碼。

人們可能會(huì)認(rèn)為,動(dòng)畫至此已經(jīng)達(dá)到頂峰,沒(méi)有什么值得期待的了。但幸運(yùn)的是,科技界的人總是在尋找下一件大事,并且提供無(wú)窮無(wú)盡的強(qiáng)大工具,讓想象的一切都變得可能。其中一種可能性就是新的“動(dòng)畫按鈕趨勢(shì)”。一種新的 UI 風(fēng)格,引入了動(dòng)畫技術(shù),使簡(jiǎn)單的按鈕變得生動(dòng)起來(lái)。這些變化的范圍從按鈕周圍的簡(jiǎn)單筆劃動(dòng)畫,到鼠標(biāo)懸停時(shí)在按鈕內(nèi)移動(dòng)的文字星星。

來(lái)源于 X的“@learnframer”的 GIF

除了動(dòng)畫的趨勢(shì)之外,最近,許多設(shè)計(jì)師都在談?wù)撛O(shè)計(jì)世界如何從扁平化設(shè)計(jì)轉(zhuǎn)向更偽現(xiàn)實(shí)的視覺(jué)風(fēng)格。其中包括 3D 圖形、深度效果、擬物化、擬物化等。我們也看到很多公司都將 3D 作為核心風(fēng)格。盡管它現(xiàn)在可能不會(huì)出現(xiàn)在網(wǎng)頁(yè)和應(yīng)用程序設(shè)計(jì)中,但徽標(biāo)正在隨著這一新趨勢(shì)而更新。

新 3D 浪潮的幾個(gè)很好的例子(來(lái)源于 Chan Karunaratne)

與動(dòng)畫設(shè)計(jì)趨勢(shì)非常相似,人們實(shí)現(xiàn)這些樣式的一個(gè)重要原因是出現(xiàn)了易于使用的基于 Web 的 3D 工具,例如 Spline 和 Vectary ,這些工具使得在 Web 和應(yīng)用程序上包含 3D 資源變得非常容易。他們還使用動(dòng)畫將 3D 資產(chǎn)帶入生活,這是很多設(shè)計(jì)師所經(jīng)歷過(guò)的最短的學(xué)習(xí)曲線。設(shè)計(jì)師很快就能使用基本的線性漸變和一些陰影為企業(yè)的品牌資產(chǎn)添加第三維度。另一家始終推動(dòng)設(shè)計(jì)和趨勢(shì)的公司是 Airbnb。他們因其簡(jiǎn)單而有效的應(yīng)用程序設(shè)計(jì)和交互而廣為人知。2023 年,他們宣布了一次應(yīng)用程序更新,融入了十多個(gè) 3D 視覺(jué)元素,甚至公告視頻幾乎都是關(guān)于3D的。

Airbnb 發(fā)布視頻

等距視覺(jué)效果、3D 角色和動(dòng)畫以及大量應(yīng)用程序交互足夠吸引眼球,讓用戶想要重復(fù)觀看。從平面到動(dòng)畫或 3D 的轉(zhuǎn)變?cè)诰徛€(wěn)定的發(fā)生著。這種趨勢(shì)通常是由多米諾骨牌效應(yīng)造成的。只要一位設(shè)計(jì)師的社交帖子受到歡迎,其他著名設(shè)計(jì)師也會(huì)效仿。

四、人工智能對(duì)于 UX / UI的影響

1. AI 設(shè)計(jì)工具是否可以成為設(shè)計(jì)師的好助手

雖然一些設(shè)計(jì)師認(rèn)為 AI 未來(lái)會(huì)對(duì)他們的職業(yè)構(gòu)成威脅,但我們大多數(shù)人都在使用這項(xiàng)技術(shù)更快地創(chuàng)造出最好的設(shè)計(jì)。

Adobe Firefly 用于視頻處理

不過(guò)大多數(shù)聲稱自己為“人工智能驅(qū)動(dòng)”的設(shè)計(jì)工具,雖然開(kāi)放了生成式 AI 的 API,也在開(kāi)發(fā)自己的人工智能模型,但大多數(shù) AI 功能都還只是噱頭,只能完成隨機(jī)設(shè)計(jì) UI、重組資產(chǎn)等不穩(wěn)定功能。

但市場(chǎng)上也仍然存在一些設(shè)計(jì)領(lǐng)域的英雄產(chǎn)品,比如 Relume 。這家專注于 Webflow 的公司推出了名為 Relume AI 的產(chǎn)品,這是一款功能強(qiáng)大的線框和交互工具。在該網(wǎng)站中輸入你的網(wǎng)站描述,它會(huì)生成完整且詳細(xì)的交互稿和視覺(jué)圖,界面的布局和數(shù)據(jù)完整,可以快速?gòu)?fù)制到 Figma 和 Webflow。

前段時(shí)間我們也分享過(guò) Durable 這個(gè)建站產(chǎn)品AI + 建站|Durable,融資 1400 萬(wàn)美金,30秒創(chuàng)建一個(gè)網(wǎng)站并成為自己的老板,它提供了創(chuàng)建網(wǎng)站所需要的一打子工具,包括網(wǎng)站構(gòu)建器、CRM、發(fā)票軟件、人工智能助手等。用戶只需要提供品牌名稱、所屬行業(yè)、開(kāi)展業(yè)務(wù)的地點(diǎn)和網(wǎng)站語(yǔ)言,Durable 就會(huì)基于用戶提供的信息快速創(chuàng)建一個(gè)網(wǎng)站首頁(yè)。

用 Durable 創(chuàng)建網(wǎng)站

2. AI 時(shí)代的用戶體驗(yàn)設(shè)計(jì)

在 ChatGPT 還沒(méi)有風(fēng)靡的時(shí)候,數(shù)字產(chǎn)品的用戶體驗(yàn)風(fēng)格普遍為以 GUI (圖形用戶界面)為主,通過(guò)圖形、按鈕、菜單等標(biāo)準(zhǔn)化元素,使用戶可以通過(guò)鍵盤、觸摸等方式與終端設(shè)備交互。Windows 操作系統(tǒng)、MacOS 、Photoshop等軟件都已 GUI 的用戶界面為主。

GUI 的界面設(shè)計(jì)在近 20 多年的發(fā)展過(guò)程中,由于功能場(chǎng)景的不斷增加, GUI 界面需要兼容復(fù)雜的、多樣化的用戶需求。功能強(qiáng)大的同時(shí),設(shè)計(jì)成本變得很高,用戶的學(xué)習(xí)成本也隨之提升。尤其是在 TOB 領(lǐng)域的設(shè)計(jì)中,功能的龐大讓整個(gè)頁(yè)面擁有多重窗口、四五級(jí)以上的導(dǎo)航,即使設(shè)計(jì)師努力提供簡(jiǎn)單易用的頁(yè)面,也很難降低用戶的學(xué)習(xí)難度。

隨著 GPT4 的推出,CUI (對(duì)話式用戶界面)的界面體驗(yàn)正在逐漸應(yīng)用廣泛。CUI 采用了更加直觀和自然的語(yǔ)言交互的方式,通過(guò)自然語(yǔ)言、語(yǔ)音等方式進(jìn)行對(duì)話,可以有上下文記憶和智能化的回應(yīng),典型如 Siri 、Amazon Alexa 、 Google Assistant。

CUI 的出現(xiàn),用自然語(yǔ)言的對(duì)話方式,可以讓用戶更直觀的與數(shù)字產(chǎn)品進(jìn)行交互,避免用戶記憶繁瑣的操作路徑,讓 AI 為自己找到最快的解決方案。

但是否所有應(yīng)用都需要用 CUI 重構(gòu)一遍?我們認(rèn)為不會(huì),不同的應(yīng)用特性會(huì)導(dǎo)致不同的設(shè)計(jì)方向,這給了設(shè)計(jì)師進(jìn)一步延展的空間。

  • 對(duì)于 TOC 的產(chǎn)品:針對(duì)用戶目的明確、功能較為簡(jiǎn)單的產(chǎn)品, CUI 會(huì)對(duì)其的交互體驗(yàn)有著革命性的影響,比如攜程、美團(tuán)這種需求明確的產(chǎn)品,用戶的目標(biāo)是為了找到最合適的商品完成購(gòu)買,這個(gè)過(guò)程可以通過(guò) CUI × AIGC 的方式進(jìn)行進(jìn)一步重構(gòu);但針對(duì)用戶目的不明確,且產(chǎn)品體驗(yàn)過(guò)程較為舒適、不需思考的產(chǎn)品,如抖音、快手,CUI 不一定是最讓用戶喜愛(ài)的交互界面,或許需要探索二者結(jié)合的最佳方式
  • 對(duì)于 TOB 的產(chǎn)品:用戶目的明確,功能多樣且復(fù)雜,我們認(rèn)為 GUI 的設(shè)計(jì)界面很難被摒棄,導(dǎo)航式的地圖仍然需要提供給用戶完成有目的查找。同時(shí)對(duì)話式的命令也可以滿足用戶無(wú)目的的詢問(wèn),或許 CUI 可以基于現(xiàn)有層級(jí)分明的界面,進(jìn)行關(guān)鍵流程的解答和提效。

五、不忘初心,回歸用戶

用戶體驗(yàn)的研究已經(jīng)不斷發(fā)展和完善,使設(shè)計(jì)變得易于理解和包容。相比于視覺(jué)設(shè)計(jì)的精美程度,許多設(shè)計(jì)師更重視可用性,這帶來(lái)了更簡(jiǎn)單且可行的設(shè)計(jì)風(fēng)格。盡管過(guò)去幾年行業(yè)發(fā)生了變化,該設(shè)計(jì)原則仍然被踐行。

2019 年至 2023 年“用戶體驗(yàn)可訪問(wèn)性”的 Google 趨勢(shì)圖

上面的谷歌趨勢(shì)圖顯示了無(wú)障礙設(shè)計(jì)漸漸成為了真正的工業(yè)需求??稍L問(wèn)性技術(shù)的范圍從顏色對(duì)比、可讀字體、可識(shí)別的動(dòng)作元素,一直到追蹤不同用戶的反饋,應(yīng)用到產(chǎn)品功能中去。

1. 無(wú)障礙設(shè)計(jì)

由于當(dāng)前需要為所有年齡段的人甚至身體有障礙的用戶進(jìn)行設(shè)計(jì),因此無(wú)障礙性也受到了大力推動(dòng)。公司希望從所有不同的人群中獲利,并且也在各個(gè)方面推動(dòng)包容性。隨著越來(lái)越多的人走向數(shù)字化,設(shè)計(jì)師幾乎必須專注于無(wú)障礙設(shè)計(jì),更多針對(duì)無(wú)障礙設(shè)計(jì)的課程和訓(xùn)練營(yíng)也面向設(shè)計(jì)師開(kāi)放。

2. 個(gè)性化

除了可訪問(wèn)性之外,個(gè)性化才是真正讓人們鎖定應(yīng)用程序或網(wǎng)站的原因?;蛟S你以前在 YouTube 上看過(guò)這條小信息 :

YouTube 評(píng)估你喜歡哪種內(nèi)容以便提供更好的推薦

即使是一個(gè)已發(fā)布功能,如果用戶反饋不佳,也很容易面臨撤回的情況,這直接體現(xiàn)了用戶體驗(yàn)設(shè)計(jì)師在未來(lái)產(chǎn)品和服務(wù)方面的領(lǐng)先地位。

Perplexity AI CEO Aravind 曾分享過(guò)對(duì)于用戶體驗(yàn)的理解,基本原則是“用戶永遠(yuǎn)不會(huì)錯(cuò)”。Perplexity 發(fā)現(xiàn)只有極少數(shù)人知道將好奇心轉(zhuǎn)化為清晰、準(zhǔn)確的問(wèn)題,從而導(dǎo)致結(jié)果不準(zhǔn)確,甚至幻覺(jué)的出現(xiàn)。(歡迎閱讀我們研究 Perplexity 的深度文章:AI+搜索|關(guān)于搜索的想象,和目前估值最高的生成式搜索引擎 Perplexity。)

一種解決思路是總結(jié) prompt 的提問(wèn)方法,讓用戶能主動(dòng)學(xué)習(xí);另一種解決思路是所以在對(duì)話式交互界面上,幫助用戶提一個(gè)好的問(wèn)題。Perplexity 選擇了第二種,增加了提出問(wèn)題之后的更多問(wèn)題衍生。——平臺(tái)永遠(yuǎn)要為用戶多想一步、多做一步。

Perplexity 界面

總得來(lái)說(shuō),設(shè)計(jì)趨勢(shì)會(huì)隨著工業(yè)化進(jìn)程的推進(jìn),而演進(jìn)為更前沿的風(fēng)格,也會(huì)有更多工具幫助設(shè)計(jì)師開(kāi)放腦洞,快速得到心中所想。但無(wú)論社會(huì)如何進(jìn)步,以用戶體驗(yàn)為中心的話題永遠(yuǎn)不會(huì)終結(jié)。

 

 

 

藍(lán)藍(lán)設(shè)計(jì)(www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

 

超全面的設(shè)計(jì)底層理論,優(yōu)秀設(shè)計(jì)背后離不開(kāi)這些

ui設(shè)計(jì)分享達(dá)人

設(shè)計(jì)趨勢(shì)年年在變,設(shè)計(jì)技能也在不斷更新,但回到本源,底層的理論知識(shí)是不會(huì)變的。我自己幾乎每年還會(huì)翻看一些講設(shè)計(jì)基礎(chǔ)的書(shū),比如《寫給大家看的設(shè)計(jì)書(shū)》之類的,會(huì)發(fā)現(xiàn)這些原理每次看都會(huì)有新的收獲。

隨著工作年數(shù)增加,對(duì)底層知識(shí)的價(jià)值認(rèn)識(shí)也越來(lái)越深刻,不知道你會(huì)不會(huì)有這種感覺(jué)?

探索“B+C”,為B端體驗(yàn)加Buff

ui設(shè)計(jì)分享達(dá)人

在如今用戶為王的時(shí)代,用戶體驗(yàn)成為一種新的品牌競(jìng)爭(zhēng)力。隨著技術(shù)進(jìn)步和體驗(yàn)意識(shí)的普及,習(xí)慣了C端產(chǎn)品流暢愉悅的體驗(yàn),用戶對(duì)B端產(chǎn)品體驗(yàn)的期望也越來(lái)越高。

B端C化的概念也由此產(chǎn)生,但B、C端有著本質(zhì)區(qū)別,C端的設(shè)計(jì)思維無(wú)法完全復(fù)用到B端,那是否可以基于B端產(chǎn)品特征,融合C端體驗(yàn)設(shè)計(jì)思維,即“B+C”來(lái)幫助提升B端產(chǎn)品體驗(yàn)?zāi)??本文聚焦在探索如何通過(guò)“B+C”的設(shè)計(jì)思維,提升B端產(chǎn)品體驗(yàn)。

一、B、C端產(chǎn)品定義與差異

我們先簡(jiǎn)單了解下B、C端產(chǎn)品各自的定義。B、C端其實(shí)是以使用對(duì)象的類型,來(lái)代指的產(chǎn)品類型,C指?jìng)€(gè)人消費(fèi)者 (Customer) ,B指組織 (Business) ,這個(gè)組織可以是個(gè)人、公司、政府或機(jī)構(gòu),因此B端模式也是多樣的,除了B2B,還有B2C、B2G等。
C端產(chǎn)品幫助個(gè)人解決生活場(chǎng)景中的需求痛點(diǎn),提供人們消費(fèi)的物質(zhì)、信息和情感。常見(jiàn)產(chǎn)品類型有工具類、內(nèi)容類、社交類、游戲類等,如滴滴、知乎、微信、王者榮耀等。
B端產(chǎn)品幫助組織實(shí)現(xiàn)其商業(yè)目的,提供商業(yè)的工具、方法和服務(wù)。常見(jiàn)的產(chǎn)品類型有:CRM 客戶關(guān)系管理、ERP 企業(yè)資源計(jì)劃、OA辦公等,如企業(yè)微信、金蝶、釘釘?shù)取?/span>
下面我將從產(chǎn)品設(shè)計(jì)的角度,分析B、C端的差異化。

1、設(shè)計(jì)原則的差異

C端產(chǎn)品主要通過(guò)流量轉(zhuǎn)化獲得收益,因此人的注意力和使用頻率是關(guān)鍵,所以設(shè)計(jì)原則為“UCD”(User Center Design)以用戶為中心的設(shè)計(jì)。
B端產(chǎn)品主要是為了能高效解決行業(yè)業(yè)務(wù)問(wèn)題而存在的,所以其設(shè)計(jì)原則是以效率為中心。

2、功能流程的差異

C端產(chǎn)品主打一個(gè)滿足用戶核心痛點(diǎn)的功能,通過(guò)這個(gè)核心功能明確產(chǎn)品的特性和定位,附加N個(gè)增值功能,提高用戶粘性,加之創(chuàng)新和趣味性,保持與競(jìng)品之間的差異化。
B端產(chǎn)品功能重全面,為的是能滿足組織的各種業(yè)務(wù)需求,組織的業(yè)務(wù)邏輯通常就是產(chǎn)品邏輯,功能流程也由業(yè)務(wù)場(chǎng)景轉(zhuǎn)化而來(lái)。

3、交互邏輯的差異

C端產(chǎn)品是單線程操作,完成一項(xiàng)任務(wù)后才能進(jìn)行另一項(xiàng)。碎片化的使用場(chǎng)景和廣泛的用戶群體,使得C端產(chǎn)品必須信息簡(jiǎn)潔、容易上手、操作路徑短,否則將會(huì)導(dǎo)致用戶流失影響收益。

B端產(chǎn)品是多線程操作,支持多個(gè)任務(wù)并行。交互以優(yōu)化業(yè)務(wù)流程,提升用戶操作效率為主,關(guān)注信息架構(gòu),清晰的信息架構(gòu)能幫助用戶在呈網(wǎng)狀的功能和交織的流程中,定位到自己所在功能頁(yè)面,找到所需的有效信息。

4、視覺(jué)表現(xiàn)的差異

C端產(chǎn)品視覺(jué)設(shè)計(jì)風(fēng)格多樣,如賽博朋克、孟菲斯、3D、酸性設(shè)計(jì)等,注重情感化表達(dá)和氛圍的渲染,加上短視頻和直播,讓用戶沉浸其中。
B端產(chǎn)品視覺(jué)服務(wù)于功能和信息的傳遞,視覺(jué)元素較為簡(jiǎn)潔,常用色彩對(duì)比的形式,建立內(nèi)容邊界和視覺(jué)層次。

二、如何用“B+C”思維提升B端產(chǎn)品體驗(yàn)

無(wú)論是在設(shè)計(jì)原則、功能流程、交互和視覺(jué)方面,B端產(chǎn)品與C端產(chǎn)品都有比較明顯的差異?;谝陨喜町?,結(jié)合B端產(chǎn)品特征和C端體驗(yàn)設(shè)計(jì)思維,我們可以從以下三個(gè)方面提升B端體驗(yàn):

視覺(jué)—降低認(rèn)知負(fù)荷

B端產(chǎn)品講究屏效,看得多通常比看的美重要,信息密度高,則屏效高,卻也相應(yīng)的會(huì)增加用戶的認(rèn)知負(fù)荷,因此我們需要為用戶認(rèn)知減負(fù)。
交互—以用戶效率為中心

從用戶的行為和感知出發(fā),本著以用戶為中心的原則提升操作效率。

情感—關(guān)注情緒感受

關(guān)注體驗(yàn)過(guò)程的“峰”與“終”,提升用戶整體的體驗(yàn)感受。
下面我將結(jié)合實(shí)際工作案例,講述如何用“B+C”的設(shè)計(jì)思維,提升B端產(chǎn)品體驗(yàn)。

【案例分享】

Speedshop Omnichannel(下面簡(jiǎn)稱為Omnichannel)是款針對(duì)國(guó)內(nèi)及東南亞中小商家,統(tǒng)一管理多渠道商品、訂單、交易、會(huì)員的ERP系統(tǒng)。
目前共支持Lazada、Shopee、Tokopedia、抖音等7個(gè)渠道,最多可管理100個(gè)線上店,集訂單管理、產(chǎn)品管理、會(huì)員管理、聊天、導(dǎo)入導(dǎo)出等功能為一體,服務(wù)超40,000商家。

視覺(jué) — 降低認(rèn)知負(fù)荷

對(duì)信息的識(shí)別和處理是認(rèn)知負(fù)荷的主要來(lái)源,在視覺(jué)層,我們主要解決的是信息識(shí)別帶來(lái)的負(fù)荷,信息識(shí)別就是用戶看到內(nèi)容并選擇的過(guò)程,B端產(chǎn)品有信息量大,選擇多的特點(diǎn),降低認(rèn)知負(fù)荷也將圍繞這兩點(diǎn)進(jìn)行。

1、優(yōu)化信息展示

/ 符合用戶訴求

B端產(chǎn)品根據(jù)用戶規(guī)模的大小,可以分為大B (一定規(guī)模的中大型企業(yè)) 和小B (小微企業(yè)、個(gè)人創(chuàng)業(yè)),兩者對(duì)信息的關(guān)注點(diǎn)和訴求不同。

表格是B端產(chǎn)品最常用的信息展現(xiàn)形式,且能將信息有序、高效、直觀的傳達(dá)給用戶,避免信息堆砌帶來(lái)的認(rèn)知負(fù)荷。

比如同樣是訂單頁(yè),大B用戶的訂單數(shù)據(jù)量龐大,且訂單通常是自動(dòng)流轉(zhuǎn)的,無(wú)需手工操作,所以針對(duì)大B用戶,表格信息展示有兩個(gè)側(cè)重點(diǎn),一是增加信息密度,二是幫助用戶能夠快速精準(zhǔn)過(guò)濾信息。

小B用戶的訂單數(shù)據(jù)量相對(duì)較小,且以手工處理為主,所以在展示訂單時(shí),可以將關(guān)鍵信息整合,通過(guò)將信息進(jìn)行分層、分組的展示形式,降低單頁(yè)面信息的復(fù)雜度,還可以通過(guò)各模塊之間字體大小、顏色、圖標(biāo)、間距等手段將信息層次區(qū)分開(kāi)。

/ 豐富信息展示維度

還可以通過(guò)圖形化、可視化和視頻的形式,豐富信息的內(nèi)容維度,化抽象為具象,讓信息能更高效的傳達(dá)。

在Omnichannel中,用戶需要完成新手配置后才能使用產(chǎn)品,進(jìn)入首頁(yè)看到的是任務(wù)型的引導(dǎo),通過(guò)圖形輔助任務(wù)說(shuō)明,豐富畫面的同時(shí)還能增加產(chǎn)品的親和力。

B端產(chǎn)品由于業(yè)務(wù)的復(fù)雜性和技術(shù)的局限性,通常操作沒(méi)有那么靈活,需要遵守一定的使用規(guī)則,傳統(tǒng)的做法會(huì)通過(guò)文字說(shuō)明的方式傳達(dá)給用戶,面對(duì)一長(zhǎng)段的規(guī)則說(shuō)明,讀幾遍還不一定能理解。

比如在導(dǎo)入產(chǎn)品時(shí),規(guī)則內(nèi)容多且邏輯復(fù)雜,可以將內(nèi)容可視化,使其易于傳達(dá)和理解。

視頻比文字的畫面感更豐富,傳播的內(nèi)容也更加具體,在幫助中心,圖文的基礎(chǔ)上增加視頻,幫助用戶更高效的獲取幫助信息。

2、提供個(gè)性化配置

B端產(chǎn)品通常包含多種用戶角色,每個(gè)角色的需求關(guān)注點(diǎn)不同,為了滿足各角色的需求,單頁(yè)面信息往往會(huì)出現(xiàn)超負(fù)荷的情況。
我們可以借鑒C端的個(gè)性化,對(duì)于非業(yè)務(wù)性的功能,允許用戶根據(jù)自己的需求和工作習(xí)慣進(jìn)行自定義。
比如下圖,在列表頁(yè),我們?yōu)橛脩籼峁┝俗远x篩選條件和表格字段的設(shè)置。

3、提供有效決策信息

由于業(yè)務(wù)復(fù)雜,保障功能的全面,帶來(lái)的結(jié)果通常是操作和選項(xiàng)較多,如果沒(méi)有任何指引,B端產(chǎn)品的用戶通常無(wú)法做出合適的選擇。
比如下圖的添加商品,根據(jù)不同的使用場(chǎng)景,產(chǎn)品為用戶提供了三種添加商品的方式:

只有三個(gè)選擇,看似沒(méi)有任何操作難度,但用戶面對(duì)未知功能時(shí),通常會(huì)根據(jù)自己過(guò)往的工作經(jīng)驗(yàn),選擇熟悉的功能,這樣一來(lái),可能會(huì)誤增了工作量,因此在設(shè)計(jì)上,要提供輔助介紹說(shuō)明,幫助用戶決策。

我們?cè)诖嘶A(chǔ)上,為第一次使用該功能的用戶又做了優(yōu)化,除了消息提示框,還通過(guò)標(biāo)簽強(qiáng)化視覺(jué)重點(diǎn),推薦最適合新用戶的選擇,添加商品的文案也改的更通俗易懂。

交互 — 以用戶效率為中心

1、  提升用戶行為效率

無(wú)論B端還是C端產(chǎn)品,都有一個(gè)共同的體驗(yàn)?zāi)繕?biāo):提升操作效率,高效率意味著用戶通過(guò)更少的操作,更少的時(shí)間完成任務(wù),實(shí)現(xiàn)降低成本的目標(biāo)。在C端產(chǎn)品中,常見(jiàn)的提升效率的方式有:1、根據(jù)用戶行為的流程分析,推薦相應(yīng)功能;2、聚合用戶行為,縮短操作路徑;3、轉(zhuǎn)移用戶操作成本,讓產(chǎn)品承擔(dān)更多的用戶引導(dǎo)、行為判斷和行為記憶,我們可以從以上幾點(diǎn)切入優(yōu)化B端操作效率。

引導(dǎo)用戶操作

在C端產(chǎn)品中,經(jīng)常會(huì)有根據(jù)用戶的操作行為,產(chǎn)品給出相應(yīng)的推薦操作,如截屏后,在用微信發(fā)信息時(shí),系統(tǒng)會(huì)提示是否要發(fā)送截圖,這種在操作過(guò)程中增加相關(guān)功能的曝光或引導(dǎo),提高用戶操作效率的同時(shí)也不影響流程的順暢進(jìn)行。
下圖是商品管理頁(yè),用戶首次進(jìn)入時(shí),可以根據(jù)用戶觸發(fā)的操作推薦相關(guān)的幫助引導(dǎo)。

手動(dòng)創(chuàng)建商品時(shí),需要完善很多商品信息,可以為經(jīng)常出錯(cuò)的內(nèi)容預(yù)設(shè)提示,先發(fā)的避免用戶出現(xiàn)錯(cuò)誤。

在收起/展開(kāi)菜單欄時(shí),提示快捷鍵功能。

/ 優(yōu)化任務(wù)路徑

B端產(chǎn)品中通常會(huì)有一個(gè)任務(wù)關(guān)聯(lián)一些子任務(wù),如果用戶在子任務(wù)中遇到困難,往往會(huì)造成整個(gè)任務(wù)效率的降低甚至任務(wù)中斷。

比如在手動(dòng)創(chuàng)建商品的流程中,需要將商品信息推送到渠道線上店才算創(chuàng)建成功,所以在創(chuàng)建商品前,需要完成渠道線上店的創(chuàng)建。針對(duì)這種關(guān)鍵子任務(wù),我們可以嘗試并行任務(wù),在選擇線上店時(shí),增加創(chuàng)建線上店的入口,將任務(wù)連貫起來(lái)。還可以通過(guò)操作的合并,比如保存和添加同步進(jìn)行,提升整體的任務(wù)效率。

2、弱化低效感知

好的產(chǎn)品體驗(yàn),不止強(qiáng)調(diào)功能,還會(huì)在意體驗(yàn)中的感受,設(shè)計(jì)也可以左右用戶感知產(chǎn)品效率的快與慢。

/ 等待時(shí)間可感知

用戶對(duì)等待的耐受度是有限的,等待時(shí)間在2s內(nèi)是相對(duì)愉悅的,在時(shí)間不可控或時(shí)間較長(zhǎng)的情況下,我們應(yīng)盡可能縮短用戶的感知時(shí)間。

比如在下圖中,用戶完成新手配置后,產(chǎn)品有個(gè)加載的過(guò)程,通過(guò)加載動(dòng)畫和加載步驟的分解,告知用戶系統(tǒng)在運(yùn)行中,縮短感知時(shí)間的同時(shí)消除用戶的負(fù)面情緒。

/ 容錯(cuò)性設(shè)計(jì)

在產(chǎn)品使用過(guò)程中,經(jīng)常會(huì)出現(xiàn)因用戶“犯錯(cuò)”而導(dǎo)致的任務(wù)中斷或失敗,這里的“犯錯(cuò)”,通常是因?yàn)橛脩舨僮髌x產(chǎn)品的使用要求,但這并不是用戶的錯(cuò),人不是精密的儀器,好的體驗(yàn)應(yīng)該包含這部分“錯(cuò)誤”。

比如錄入數(shù)據(jù)時(shí),應(yīng)給予實(shí)時(shí)的提醒,讓用戶可以及時(shí)更正,而不是等到提交時(shí)才拋出錯(cuò)誤提示,還有比如在數(shù)字輸入框中誤輸入其他字符時(shí),自動(dòng)幫用戶清除等。

在涉及對(duì)用戶影響較大、重要且不可挽回的操作時(shí),給出提示。

情感 — 關(guān)注情緒感受

在整段體驗(yàn)感受中,情緒最強(qiáng)烈和結(jié)束時(shí)的感受影響著用戶對(duì)整個(gè)體驗(yàn)好與壞的判斷,這個(gè)現(xiàn)象就是峰終定律,因此我們可以通過(guò)關(guān)注這些關(guān)鍵時(shí)刻,來(lái)確保用戶對(duì)整段體驗(yàn)是感到愉悅的。


1、減少負(fù)峰

消極的情緒,不僅影響用戶對(duì)產(chǎn)品的體驗(yàn)感受,最終還會(huì)落到降低效率上,因此在設(shè)計(jì)時(shí),我們要考慮減少用戶的消極情緒。

/ 提供明確反饋

用戶使用產(chǎn)品的過(guò)程就像是與產(chǎn)品進(jìn)行“對(duì)話”,良好明確的反饋能幫助用戶理解和使用產(chǎn)品,在工作完成時(shí),應(yīng)告知用戶已完成,出錯(cuò)時(shí),告知用戶哪個(gè)環(huán)節(jié)錯(cuò)了,如何改進(jìn)或提供幫助,不要讓用戶去猜,而是主動(dòng)為用戶提供解決方案,提供確定感。

比如在創(chuàng)建商品的流程中,商品創(chuàng)建完成后要推送到渠道線上店,中間有一段較長(zhǎng)時(shí)間的等待,在設(shè)計(jì)時(shí),根據(jù)推送中、推送完成、推送失敗,分別提供了3種對(duì)應(yīng)場(chǎng)景的提示,讓用戶知道當(dāng)前任務(wù)進(jìn)展,以及展示相關(guān)對(duì)應(yīng)的操作,即使任務(wù)失敗,用戶也知該如何處理,增加用戶的控制感。

/ 任務(wù)中斷可回溯

在B端產(chǎn)品中,經(jīng)常會(huì)出現(xiàn)決策信息多,處理鏈路長(zhǎng),需反復(fù)多次進(jìn)入任務(wù)流程的情況,當(dāng)任務(wù)被迫中斷時(shí),用戶情緒會(huì)受到影響,且用戶對(duì)未完成或中斷的任務(wù)往往比已完成的記憶更深刻,針對(duì)這類情況,我們需提供可回溯的設(shè)計(jì),幫助用戶順利完成任務(wù)。

比如在將商品推送到渠道線上店時(shí),同步過(guò)程中,用戶可以離開(kāi)當(dāng)前頁(yè)面進(jìn)行其他操作,系統(tǒng)會(huì)將推送結(jié)果展示在列表頁(yè),用戶可以通過(guò)列表頁(yè),重新推送或者編輯修改后再推送,直至完成任務(wù)。

2、結(jié)束于正峰

在完成任務(wù)后,可以觸發(fā)氛圍動(dòng)效反饋成就,給用戶積極的結(jié)尾。

寫在最后

以上就是我基于B端產(chǎn)品特征,和C端產(chǎn)品的體驗(yàn)思維,用“B+C”的設(shè)計(jì)思維嘗試探索優(yōu)化B端產(chǎn)品體驗(yàn)的一些方案嘗試。“B+C”的設(shè)計(jì)思維,其本質(zhì)是想找到業(yè)務(wù)與體驗(yàn)的平衡,作為B端設(shè)計(jì)師,好的用戶體驗(yàn)一定是與業(yè)務(wù)緊密結(jié)合的,與業(yè)務(wù)匹配的體驗(yàn)優(yōu)化才有其意義和價(jià)值。


作者:Cila
鏈接:https://www.zcool.com.cn/article/ZMTUyNDc0MA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。

淺析:設(shè)計(jì)趨勢(shì)之開(kāi)源設(shè)計(jì)

ui設(shè)計(jì)分享達(dá)人

什么是開(kāi)源設(shè)計(jì)(Open Source Design)

在講開(kāi)源設(shè)計(jì)前,我們或許可以先講講開(kāi)源一詞是指什么。

開(kāi)源全稱開(kāi)放源代碼,開(kāi)源軟件最大的特點(diǎn)是開(kāi)放,也就是任何人都可以得到軟件的源代碼,加以修改學(xué)習(xí),甚至重新發(fā)放,當(dāng)然是在版權(quán)限制范圍之內(nèi)。雖然開(kāi)源一詞最初是為軟件開(kāi)發(fā)而創(chuàng)造的,但現(xiàn)如今開(kāi)源所涉及的領(lǐng)域也極其廣闊,并不只是包括軟件領(lǐng)域,如醫(yī)藥領(lǐng)域的藥物開(kāi)發(fā)開(kāi)源、文化領(lǐng)域的書(shū)籍到期開(kāi)源等等所以開(kāi)源設(shè)計(jì)已包含了更廣泛的含義,它包括了由任何人或者團(tuán)隊(duì)自由共享、協(xié)作的設(shè)計(jì)方案、項(xiàng)目、產(chǎn)品。

我們來(lái)看幾個(gè)大型開(kāi)源的設(shè)計(jì)了解一下~

開(kāi)源設(shè)計(jì)資源舉例

Ant Design

阿里的開(kāi)源系統(tǒng)后臺(tái)組件庫(kù)

https://ant.design

ECharts

百度推出的開(kāi)源圖表

https://echarts.apache.org/

Unsplash 

全球知名圖片開(kāi)源平臺(tái) 

https://unsplash.com

所以我們不難發(fā)現(xiàn)開(kāi)源設(shè)計(jì)都有以下特點(diǎn): 

免費(fèi)(大部分是):開(kāi)源設(shè)計(jì)的一個(gè)關(guān)鍵要素是它們通常(但不總是?。┟赓M(fèi)。這是一個(gè)重要因素,因?yàn)殚]源設(shè)計(jì)通常需要花費(fèi)不菲的價(jià)格或者冒著侵犯版權(quán)的風(fēng)險(xiǎn)去使用。 

思想碰撞:更多的設(shè)計(jì)師或者創(chuàng)意愛(ài)好者共同為一個(gè)創(chuàng)意提出自己的見(jiàn)解和再設(shè)計(jì)。


設(shè)計(jì)開(kāi)源領(lǐng)域廣闊:設(shè)計(jì)開(kāi)源領(lǐng)域也幾乎涵蓋了所有的設(shè)計(jì)和創(chuàng)意領(lǐng)域如平面設(shè)計(jì)、三維設(shè)計(jì)、用戶體驗(yàn)設(shè)計(jì)、環(huán)境設(shè)計(jì)、建筑設(shè)計(jì)、服裝設(shè)計(jì)、插畫、動(dòng)畫設(shè)計(jì)等等 

但是許多人可能會(huì)有一個(gè)疑問(wèn),開(kāi)源設(shè)計(jì)和以往的素材網(wǎng)站或者源文件售賣網(wǎng)站有什么區(qū)別呢? 

在我看來(lái),開(kāi)源網(wǎng)站與傳統(tǒng)售賣設(shè)計(jì)資源的網(wǎng)站最大的區(qū)別是開(kāi)放與共建,以figma的社區(qū)為例,作者發(fā)布作品后,任何人都可以對(duì)其作品進(jìn)行redesign甚至remix,這極大的提高了設(shè)計(jì)師的興趣,每個(gè)人都希望自己的作品能被他人看到,也希望自己的創(chuàng)意能與他人的創(chuàng)意進(jìn)行更好的結(jié)合,這是一個(gè)多么美好的場(chǎng)景。而傳統(tǒng)網(wǎng)站只是冷冰冰的展示文件售賣資源,缺少了設(shè)計(jì)中的靈魂。 

那說(shuō)了這么多,開(kāi)源設(shè)計(jì)到底有哪些優(yōu)勢(shì)呢?

開(kāi)源設(shè)計(jì)的優(yōu)勢(shì) 

提升設(shè)計(jì)效率:設(shè)計(jì)師不應(yīng)花費(fèi)時(shí)間去解決別人已經(jīng)解決的問(wèn)題,比如當(dāng)我設(shè)計(jì)一個(gè)新項(xiàng)目時(shí),無(wú)需從零開(kāi)始設(shè)計(jì)系統(tǒng)組件,可以直接使用Ant Design、Ant Mobile Design等現(xiàn)有組件庫(kù)。


增加學(xué)習(xí)機(jī)會(huì):通過(guò)開(kāi)源社區(qū),設(shè)計(jì)人員可以從其他人所做的項(xiàng)目中學(xué)習(xí),并與專業(yè)人員交流經(jīng)驗(yàn)。 

提高設(shè)計(jì)質(zhì)量:設(shè)計(jì)師自己看本人作品時(shí),往往是身在其中不知如何下手,而將作品發(fā)布到更廣泛的社區(qū)有助于設(shè)計(jì)師獲得有價(jià)值的反饋以改進(jìn)他們的作品。 

提升品牌價(jià)值:對(duì)設(shè)計(jì)開(kāi)源后,公司品牌能在某些領(lǐng)域內(nèi)獲得傳播,提升品牌價(jià)值。并且在招募人才時(shí)也能成為有吸引力的一項(xiàng)條件。 

提升個(gè)人價(jià)值:一個(gè)設(shè)計(jì)師想要提升個(gè)人價(jià)值和影響力,可以用開(kāi)源作品來(lái)在行業(yè)內(nèi)獲得一定口碑,甚至直接將用戶流量轉(zhuǎn)化為訂單,或許是更簡(jiǎn)單且容易的事情。 

從這些優(yōu)勢(shì)中不難發(fā)現(xiàn),在開(kāi)源生態(tài)中,我們的作品不再是一座孤島,通過(guò)互聯(lián)網(wǎng),我們的作品可以和任何人進(jìn)行鏈接并且產(chǎn)生共鳴,提升品牌和個(gè)人的價(jià)值,所以每個(gè)人都值得感受開(kāi)源的美好。 

但開(kāi)源的同時(shí)不可避免的會(huì)帶來(lái)許多新的問(wèn)題和挑戰(zhàn),讓我們一起來(lái)看一下。

開(kāi)源設(shè)計(jì)帶來(lái)了哪些挑戰(zhàn) 

知識(shí)產(chǎn)權(quán)問(wèn)題:在開(kāi)源社區(qū)中,設(shè)計(jì)師可能不清楚其創(chuàng)作的知識(shí)產(chǎn)權(quán)。因此,他們可能會(huì)不自知地侵犯其他設(shè)計(jì)師的知識(shí)產(chǎn)權(quán)。 

設(shè)計(jì)門檻問(wèn)題:設(shè)計(jì)開(kāi)源意味著設(shè)計(jì)師的門檻變低,任何人都可以隨意使用開(kāi)源的設(shè)計(jì)項(xiàng)目,導(dǎo)致設(shè)計(jì)師不再愿意花心血?jiǎng)?chuàng)作。 

設(shè)計(jì)師競(jìng)爭(zhēng)力下降:開(kāi)源設(shè)計(jì)意味著普通的設(shè)計(jì)內(nèi)容已不需要單獨(dú)的設(shè)計(jì)師來(lái)完成,頂尖設(shè)計(jì)師的機(jī)會(huì)會(huì)更多,而普通設(shè)計(jì)師的競(jìng)爭(zhēng)力會(huì)明顯下降。 

隨著這些挑戰(zhàn)的來(lái)臨,如何更好的面對(duì)設(shè)計(jì)領(lǐng)域的開(kāi)源是值得深思的問(wèn)題,既要保護(hù)設(shè)計(jì)師的自身利益,也要讓設(shè)計(jì)行業(yè)在開(kāi)放、共享的環(huán)境下?lián)肀ё兏?,所以在未?lái)的道路上,我們每個(gè)人都可以嘗試用自身的方法去探索未來(lái),讓每個(gè)人都能成為時(shí)代浪潮中的一朵浪花。


作者:芝麻侃設(shè)計(jì)
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

作者:芝麻侃設(shè)計(jì)     來(lái)源:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

2023最新設(shè)計(jì)趨勢(shì)預(yù)測(cè)!酸性設(shè)計(jì)、NFT持續(xù)爆火!

ui設(shè)計(jì)分享達(dá)人

設(shè)計(jì)趨勢(shì)每年都在不斷地變化及輪回,多年前的風(fēng)格技法在結(jié)合了當(dāng)下的設(shè)計(jì)元素后,又會(huì)給我們展現(xiàn)出不同以往的主流時(shí)尚。

“趨勢(shì)不一定每年都會(huì)更新,但趨勢(shì)是我們?cè)O(shè)計(jì)的風(fēng)向標(biāo)?!?

基于對(duì)網(wǎng)絡(luò)數(shù)據(jù)的搜集及分析,我們對(duì)2023年設(shè)計(jì)趨勢(shì)做出了預(yù)測(cè)。

無(wú)論是否順應(yīng)趨勢(shì),我們都應(yīng)該了解趨勢(shì),擁抱變化,這才是我們?cè)O(shè)計(jì)師的準(zhǔn)則。

NO.1 3D立體元素

借助當(dāng)今的軟件和技術(shù),3D創(chuàng)作已經(jīng)不再被神話,越來(lái)越多的設(shè)計(jì)師開(kāi)始在自己的作品中運(yùn)用3D元素。





下圖是Droga5為格林威治(Greenwich)創(chuàng)作的一系列視覺(jué)設(shè)計(jì),這組設(shè)計(jì)利用3D圖形,創(chuàng)造了更醒目的視覺(jué)效果,將格林威治宣傳為倫敦的新創(chuàng)意社區(qū)。



在手機(jī)品牌宣傳物料中,設(shè)計(jì)師將3D元素與手機(jī)進(jìn)行了緊密結(jié)合,這樣的視覺(jué)樣式在市場(chǎng)中很快便能脫穎而出。



NO.2 酸性設(shè)計(jì)

提起“酸”,大家下意識(shí)會(huì)想到酸的味道,而所謂的酸性設(shè)計(jì)更多表現(xiàn)的是一種設(shè)計(jì)理念。

酸性設(shè)計(jì)大多畫面元素豐富,各種金屬、玻璃、流體漸變、鐳射等科技感的元素都會(huì)運(yùn)用其中,這也導(dǎo)致這類作品十分強(qiáng)調(diào)藝術(shù)的視覺(jué)沖擊性。



乍一看酸性設(shè)計(jì)會(huì)給人一種混亂失調(diào)的感覺(jué),而實(shí)際上酸性設(shè)計(jì)并不止是某一種單一的設(shè)計(jì)風(fēng)格,而是一種視覺(jué)情緒的表達(dá)。當(dāng)下的暗黑金屬風(fēng)、二次元的可愛(ài)風(fēng)、明顯的幻彩漸變風(fēng)格……往往都含有酸性設(shè)計(jì)的影子。



NO.3 復(fù)古懷舊風(fēng)

回看設(shè)計(jì)領(lǐng)域每一年的發(fā)展,“復(fù)古懷舊”一直是必不可少的關(guān)鍵詞。

無(wú)論是品牌形象,亦或是包裝設(shè)計(jì),設(shè)計(jì)師們頻頻用現(xiàn)代手法詮釋復(fù)古之風(fēng)。



還有傳媒集團(tuán)CNET的品牌重塑,在現(xiàn)代時(shí)尚元素的基礎(chǔ)上,還融合了復(fù)古插畫,整體設(shè)計(jì)從1950-1970年代的美國(guó)新聞行業(yè)中汲取的靈感。



NO.4 藝術(shù)襯線字體

最近,襯線字體在品牌設(shè)計(jì)中的出鏡率極高。

不少網(wǎng)站的設(shè)計(jì)都是圍繞著襯線字體作為構(gòu)圖中唯一或主要的設(shè)計(jì)元素而存在。





Stradivarius是誕生于1994年的西班牙女裝品牌,與ZARA隸屬同一公司。

2022年2月初,Stradivarius推出了全新的Logo視覺(jué),襯線字體更容易彰顯女性簡(jiǎn)潔現(xiàn)代的氣質(zhì)外,同時(shí)兼具女性力量。



NO.5 NFT藝術(shù)

近兩年,NFT可以說(shuō)是對(duì)設(shè)計(jì)、藝術(shù)、技術(shù)行業(yè)產(chǎn)生沖擊最大的新事物之一了。



NFT與平面設(shè)計(jì)聯(lián)系起來(lái),就是我們所說(shuō)的數(shù)字平面藝術(shù)。它的到來(lái)對(duì)設(shè)計(jì)師影響有很大變化,橫向能力要求有所提高,比如了解虛擬數(shù)字化設(shè)計(jì),以及對(duì)全新審美和新三維技術(shù)有更高的要求。

以下這幅《Metafisica》便是非常熱門的NFT作品。



NO.6 超萌趣emoji

表情符號(hào)在如今是一個(gè)超越文本并能得到廣泛認(rèn)知、跨越文化和多領(lǐng)域的視覺(jué)語(yǔ)言。



單一的枯燥圖標(biāo)很難滿足多元化場(chǎng)景下情感的表達(dá),于是,動(dòng)態(tài)emoji圖標(biāo)來(lái)了,它能帶來(lái)更強(qiáng)的視覺(jué)欣賞體驗(yàn)。



NO.7 高飽和度撞色

高飽和度色彩是年輕的色彩,它是先天的樂(lè)天派,同時(shí)也是情感的直接表達(dá)。

可盡管“吸睛”對(duì)品牌而言十分重要,但在設(shè)計(jì)之余要注意色彩平衡,以免混用色彩,很容易引起視覺(jué)疲憊。





NO.8 極簡(jiǎn)化設(shè)計(jì)

極簡(jiǎn)主義杜絕一切多余的裝飾,形成獨(dú)特而簡(jiǎn)單的視覺(jué)語(yǔ)言,用最簡(jiǎn)潔的表現(xiàn)形式勾勒出產(chǎn)品最基本的形態(tài)。



簡(jiǎn)潔的圖形設(shè)計(jì)摒棄了多余的圖案、文理等裝飾樣式,為真正重要的信息創(chuàng)造了呼吸的空間。

留白,是最高級(jí)的美。



NO.9 氛圍手寫字體

將富有表現(xiàn)力的手寫字體寫在設(shè)計(jì)中,能為作品帶來(lái)不一樣的氛圍感。

隨手一寫,便是一幅“畫”!





NO.10 玻璃擬物化

2022年,我們?cè)贒ribbble或Behance中會(huì)發(fā)現(xiàn)很多設(shè)計(jì)師都開(kāi)始有意識(shí)地采用“玻璃擬物化”美學(xué)的設(shè)計(jì)。相信在2023年,我們會(huì)看見(jiàn)更豐富的表達(dá)~

毛玻璃效果廣泛應(yīng)用于UI設(shè)計(jì)之中,在摹客DT中也能快速完成。



使用玻璃擬物化設(shè)計(jì)的界面,由于毛玻璃的通透性,會(huì)呈現(xiàn)出一種虛實(shí)結(jié)合的美感。



除此以外,我們還可以看到的,這一趨勢(shì)已經(jīng)明顯轉(zhuǎn)移到了玻璃和水晶質(zhì)感上,而且以令人難以置信的用立體擬真度將圖形設(shè)計(jì)提升到了一個(gè)全新的高度。所以,2023我們也將看到更多與全息和3D趨勢(shì)相輔相成的透明質(zhì)感和逼真的玻璃背景等元素的設(shè)計(jì)。



結(jié)語(yǔ)

2023年的設(shè)計(jì)趨勢(shì)給我們展示了設(shè)計(jì)的無(wú)盡可能,設(shè)計(jì)師們可以創(chuàng)作出更多超乎尋常的非凡設(shè)計(jì),為用戶營(yíng)造出獨(dú)樹(shù)一幟的全新體驗(yàn)。

身為設(shè)計(jì)師,我們要持續(xù)積累優(yōu)質(zhì)的設(shè)計(jì)素材,要知道設(shè)計(jì)趨勢(shì)因人而異,我們能做的就是選擇合適的風(fēng)格應(yīng)用在設(shè)計(jì)中,才能發(fā)揮它不可估量的價(jià)值!

作者:摹客設(shè)計(jì)云

轉(zhuǎn)載請(qǐng)注明:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


7個(gè)優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)!

博博

關(guān)注趨勢(shì)本質(zhì)上就是關(guān)注未來(lái)可能存在的形態(tài)。很多營(yíng)銷需求和優(yōu)秀設(shè)計(jì)趨勢(shì)是相互關(guān)聯(lián)的,兩者之間的關(guān)聯(lián)更像是一種動(dòng)態(tài)的同步。

2022設(shè)計(jì)趨勢(shì) 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)

很多時(shí)候趨勢(shì)并不一定是全新的東西,它們往往是服務(wù)于當(dāng)下和未來(lái)的需求,有很多趨勢(shì)存在了一些年頭,它們?cè)诂F(xiàn)在發(fā)揮著作用,但是在未來(lái)可能會(huì)發(fā)揮更大的效用。所以,當(dāng)我們?cè)诓榭催@些設(shè)計(jì)趨勢(shì)的時(shí)候,需要注意,它們必須是服務(wù)于用戶,服務(wù)于品牌和企業(yè)。

2022設(shè)計(jì)趨勢(shì) 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)

更多設(shè)計(jì)趨勢(shì):


1、新極簡(jiǎn)主義


的確,極簡(jiǎn)主義一直在某種程度上流行,但是 2022 年出現(xiàn)的新極簡(jiǎn)主義的浪潮,比起傳統(tǒng)的極簡(jiǎn)主義設(shè)計(jì)更加在意用戶注意力的吸引。這種新極簡(jiǎn)主義的設(shè)計(jì)會(huì)采用更加大膽、 生動(dòng)、明亮的色彩來(lái)填補(bǔ)留白,這種設(shè)計(jì)使得設(shè)計(jì)保持簡(jiǎn)約的同時(shí),更加富有調(diào)性,在簡(jiǎn)約的框架下制造一種別樣的華麗,營(yíng)造令人亢奮的氛圍。

2022設(shè)計(jì)趨勢(shì) 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)

干凈清晰、生動(dòng)的新極簡(jiǎn)主義風(fēng)格在品牌推廣的過(guò)程中也更加受歡迎,大量的留白和跳脫的視覺(jué)焦點(diǎn)讓整個(gè)視覺(jué)更加抓人眼球,也使得品牌給人的感知更加新鮮獨(dú)特。

2022設(shè)計(jì)趨勢(shì) 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)

新極簡(jiǎn)主義風(fēng)格,對(duì)比度在深色主題下得到了進(jìn)一步的提升。

2022設(shè)計(jì)趨勢(shì) 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)

這種設(shè)計(jì)并不意味著傳統(tǒng)的極簡(jiǎn)主義已經(jīng)被用戶拋棄,很多企業(yè)依然會(huì)青睞更加傳統(tǒng)的單色極簡(jiǎn)主義設(shè)計(jì),不過(guò)其中多少會(huì)增加一些明亮的色彩作為點(diǎn)綴。

2、新粗野主義


從 1950 年開(kāi)始,粗野主義就是年輕化、反叛、反主流、標(biāo)新立異的設(shè)計(jì)風(fēng)格。在過(guò)去的幾十年當(dāng)中,這種設(shè)計(jì)風(fēng)格一直隨著時(shí)代的發(fā)展而自我迭代,新粗野主義更加強(qiáng)調(diào)創(chuàng)造力、 大膽前衛(wèi)的新奇元素,而這也正好符合很多品牌對(duì)于新奇性的追求,它可以瞬間抓住用戶的注意力。不過(guò),這種風(fēng)格的使用需要控制好程度,否則很容易失控。

粗野主義經(jīng)久不衰的秘訣是什么?是未經(jīng)打磨、粗糲而原始的素材,它讓觀看者忍不住想要改進(jìn)它,這種未完成的原始感會(huì)在情感上吸引觀眾,這在營(yíng)銷上是無(wú)價(jià)的優(yōu)勢(shì)。

2022設(shè)計(jì)趨勢(shì) 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)

粗野主義在設(shè)計(jì)上并非看起來(lái)那么粗糙,相反它更加需要高度的專業(yè)性來(lái)控制它粗野的程度。設(shè)計(jì)師需要敏銳地感知到觀看者改進(jìn)地欲望,讓設(shè)計(jì)粗野而不低級(jí),原始而不拙劣。

2022設(shè)計(jì)趨勢(shì) 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)

新粗野主義柔糅合了極簡(jiǎn)主義和大膽地排版,它依賴看似粗野地視覺(jué)沖擊:高對(duì)比度、粗糲地陰影,撞色、 簡(jiǎn)約的背景、不對(duì)稱的布局、 未經(jīng)修飾的照片,新粗野主義偏好基礎(chǔ)款的加粗字體,跟注重可讀性而不是舒適所制造的視覺(jué)吸引力。

這個(gè)網(wǎng)站就是一個(gè)典型的例子:

3、強(qiáng)調(diào)參與感的交互


這一趨勢(shì)在絕大多數(shù)的趨勢(shì)排行榜當(dāng)中,都占據(jù)首位。隨著技術(shù)的進(jìn)步,用戶和數(shù)字媒體之間的交互正在增加,引人入勝的交互已經(jīng)不僅僅停留在響應(yīng)式設(shè)計(jì)當(dāng)中,如今它已經(jīng)開(kāi)始關(guān)注心理和生理的邏輯,開(kāi)始全方位地調(diào)動(dòng)視覺(jué)、聽(tīng)覺(jué)、 嗅覺(jué)、觸覺(jué)、味覺(jué)乃至于運(yùn)動(dòng)體感。

這種趨勢(shì)旨在幫助用戶體驗(yàn)真實(shí)地感覺(jué),在完成交互地基礎(chǔ)上,觸發(fā)用戶地情緒反應(yīng)和生理反應(yīng),熱氣騰騰地餡餅視頻讓人垂涎,游戲中虛擬地對(duì)手讓人腎上腺素激增。

交互所制造地參與感,在某種程度上是實(shí)際地物理產(chǎn)品地替代物,用戶可以從不同角度來(lái)縮放查看產(chǎn)品,了解細(xì)節(jié),選擇尺寸,挑選顏色。

交互過(guò)程中,手指和屏幕之間地觸摸交互開(kāi)始變得豐富,開(kāi)始變得有意味,它成為了用戶和虛擬世界之間溝通地橋梁,開(kāi)始有游戲地樂(lè)趣,有更具設(shè)計(jì)感地交互環(huán)節(jié)。用戶也可以根據(jù)自己地喜好,對(duì)界面進(jìn)行更多樣的個(gè)性化處理。

具有參與感的交互是我們的未來(lái)。

4、關(guān)注人和敘事


2022 年是疫情開(kāi)始后的第三年,隔離使得人們對(duì)于照片所呈現(xiàn)出的故事和情感,有著更為強(qiáng)烈的情緒反應(yīng)。在極簡(jiǎn)主義設(shè)計(jì)當(dāng)中,富有表現(xiàn)力的人物照片是最為流行的元素之一,這類照片搭配上簡(jiǎn)短的文字,簡(jiǎn)練的口號(hào),一些帶有宏大敘事特質(zhì)的文字引用,時(shí)常能夠更好地營(yíng)造出故事感。

2022設(shè)計(jì)趨勢(shì) 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)

不用擔(dān)心主屏頁(yè)面太長(zhǎng)沒(méi)人看,只要隨著用戶滾動(dòng),故事會(huì)隨之逐步展開(kāi),用戶可以在照片、 標(biāo)題、視頻、動(dòng)畫和文本地指引下,看到整個(gè)故事有步驟地呈現(xiàn)。

在這當(dāng)中,富有表現(xiàn)力的人物照片是吸引用戶注意力的關(guān)鍵要素。

另外就是頁(yè)面的 Banner 的部分,強(qiáng)調(diào)主題和內(nèi)容的標(biāo)題文本,是用戶從屏幕上獲取的重要信息之一。

如今的用戶越來(lái)越偏好在詳細(xì)閱讀內(nèi)容之前,快速瀏覽一下全局的做法,這也使得 Scrollytelling(滾動(dòng)敘事:通過(guò)滾動(dòng)觸發(fā)音頻、視頻、 動(dòng)畫效果的一種技術(shù))這種漸進(jìn)式敘事方式,可以像電影一樣將故事呈現(xiàn)在用戶眼前。

2022設(shè)計(jì)趨勢(shì) 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)

Scrollytelling 適合大量的內(nèi)容呈現(xiàn),比如對(duì)于公司和產(chǎn)品的描述,對(duì)于數(shù)據(jù)呈現(xiàn)或者認(rèn)知要求較高的內(nèi)容,它適合學(xué)習(xí)和記憶性內(nèi)容的呈現(xiàn)。


5、3D圖形的運(yùn)用


3D 圖形設(shè)計(jì)正在越來(lái)越流行,因?yàn)樗_實(shí)是吸引用戶注意力的最主要的工具之一。3D 圖像無(wú)論有多么奇異,它本身都會(huì)被認(rèn)為是有真實(shí)感的,明確的體積,精致的建模,所有的一切都令人著迷。很多時(shí)候,用戶停留在有3D元素的頁(yè)面上,是為了更細(xì)致的欣賞。

3D 圖形設(shè)計(jì)的趨勢(shì)從來(lái)都沒(méi)有減退,它正在進(jìn)入更多的領(lǐng)域,甚至進(jìn)入了品牌推廣的領(lǐng)域。3D 動(dòng)畫圖標(biāo)比過(guò)去更能吸引用戶的注意力。

2022設(shè)計(jì)趨勢(shì) 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)


6、抽象插畫


我們通常說(shuō)的抽象插畫,指的是帶有明確幾何特征的插畫,它們被廣泛地應(yīng)用于網(wǎng)站和 APP,在社交媒體和包裝設(shè)計(jì)中也越來(lái)越多的存在。

2022設(shè)計(jì)趨勢(shì) 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)

抽象插畫之所以會(huì)如此成功,是因?yàn)樗鼈兇蠖嘤兄说纳鷦?dòng)色彩和良好對(duì)比度,視覺(jué)上的美感和極簡(jiǎn)主義的風(fēng)格特質(zhì),它們成為視覺(jué)的焦點(diǎn),為整個(gè)設(shè)計(jì)提升視覺(jué)。

抽象插畫在品牌營(yíng)銷場(chǎng)景下的應(yīng)用也很多,它們?cè)谶@個(gè)時(shí)候是貼合品牌推廣的訴求的:通過(guò)色彩和形式來(lái)吸引用戶來(lái)關(guān)注品牌的形象和名稱。

7、超大文本版式


這種趨勢(shì)的特別之處是其中的文本字體元素是完全獨(dú)立的。這些文本不僅僅是用來(lái)傳遞信息的,它們還充當(dāng)著拉升頁(yè)面視覺(jué)效果的重要作用,它們結(jié)合動(dòng)畫和交互,成為頁(yè)面中醒目的亮點(diǎn)。

超大字體的優(yōu)點(diǎn)在于,它和很多設(shè)計(jì)風(fēng)格是相得益彰的,加粗的大字體在極簡(jiǎn)主義風(fēng)格的頁(yè)面上不會(huì)顯得突兀,在元素豐富的頁(yè)面上,同樣可以起到優(yōu)秀的點(diǎn)綴作用。這些文本內(nèi)容可以和纖細(xì)和小尺寸的元素協(xié)同,而后者則襯托出它本身的醒目。

超大文本字體的另一個(gè)好處是有效地減少網(wǎng)頁(yè)上的圖像的使用,縮短加載時(shí)間,提升移動(dòng)端的可用性。

這種設(shè)計(jì)元素最重要的,是選擇易讀且符合品牌調(diào)性的字體。


總結(jié)


這么多年來(lái),我們看到來(lái)這么多的趨勢(shì),很多趨勢(shì)是一以貫之持續(xù)出現(xiàn),有的趨勢(shì)則如同流星一樣一閃而逝。好的趨勢(shì)不斷迭代升級(jí),并且持續(xù)存在,但是最重要的,始終是那些選擇合理的方案,并且堅(jiān)持改進(jìn)設(shè)計(jì),讓趨勢(shì)服務(wù)于終端的產(chǎn)品和用戶的設(shè)計(jì)師。

讓趨勢(shì)服務(wù)于你,不要盲目地追趨勢(shì)!



作者:陳子木



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司 

2022交互設(shè)計(jì)趨勢(shì)觀察|PC端 上

ui設(shè)計(jì)分享達(dá)人

隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展,原本PC互聯(lián)網(wǎng)連接商業(yè)支付、購(gòu)買商品、瀏覽信息流等的能力已經(jīng)轉(zhuǎn)移到移動(dòng)端,而PC互聯(lián)網(wǎng)更加專注于其他領(lǐng)域的優(yōu)勢(shì):

  • 1、更大的屏幕能夠包含更多的信息,并獲得更深度的沉浸感受,如觀影、瀏覽網(wǎng)頁(yè)等。
  • 2、通過(guò)鼠標(biāo)、鍵盤、觸控板、手繪板的連接,提供了更多的交互方式,能夠執(zhí)行更加繁雜的工作任務(wù),如表格編輯、程序開(kāi)發(fā)、視頻制作、文檔書(shū)寫、圖像制圖、3D制圖等。
  • 3、得益于顯卡、CPU、存儲(chǔ)、USB插槽、顯示器等的擴(kuò)展性,在大型游戲、大型3D渲染、復(fù)雜制圖上相較于手機(jī)端依然有一定優(yōu)勢(shì)。
  • 4、從場(chǎng)景(辦公場(chǎng)景、娛樂(lè)場(chǎng)景)來(lái)看,PC端移動(dòng)性較差,但同時(shí)基于該特點(diǎn),PC端能夠更加專注當(dāng)前任務(wù)。模塊化、多人協(xié)同、多端協(xié)同的發(fā)展正不斷地提升用戶的使用體驗(yàn)。

下面是我觀察到的目前比較主流的交互設(shè)計(jì)點(diǎn),與大家分享。分別是:

  • 一、無(wú)縫體驗(yàn)
  • 二、交互更加高效
  • 三、更加智能化、降低門檻、降低門檻、降低門檻
  • 四、更加模塊化
  • 五、更加簡(jiǎn)潔、甄別關(guān)鍵任務(wù)
  • 六、3D動(dòng)效、大圖、帶來(lái)更深的沉浸感
  • 七、協(xié)同合作的興起

一、無(wú)縫體驗(yàn)

典型的案例就是蘋果的Mac系統(tǒng)與Ios系統(tǒng)越發(fā)趨同,都采用了卡片化、模塊化,整個(gè)交互規(guī)范、視覺(jué)感受都一致以達(dá)到多端統(tǒng)一。同時(shí)信息可以自由流轉(zhuǎn):比如在同一Apple賬號(hào)下,Mac與IOS中復(fù)制的信息可以進(jìn)行同步粘貼。備忘錄、日歷、提醒事項(xiàng)、錄音中的信息進(jìn)行流轉(zhuǎn),在任何一臺(tái)Mac上登錄Apple賬號(hào)后都可以進(jìn)行同步。

在國(guó)內(nèi),B站的網(wǎng)頁(yè)端與App端的體驗(yàn)也逐步趨同,框架設(shè)計(jì)上更加卡片化與扁平化。信息流轉(zhuǎn)上,手機(jī)上暫停的視頻到網(wǎng)頁(yè)端繼續(xù)播放,實(shí)現(xiàn)了無(wú)縫切換。

淘寶首頁(yè):從過(guò)去復(fù)雜的信息流導(dǎo)航變?yōu)楝F(xiàn)在更加簡(jiǎn)潔的個(gè)性推薦卡片。整體體驗(yàn)與淘寶手機(jī)端一致。


 二、交互更加高效

總結(jié):精簡(jiǎn)無(wú)關(guān)信息,關(guān)注最重要的核心任務(wù),減少用戶跳出,沉浸式心流設(shè)計(jì)。

1、登錄方式更加高效

許多網(wǎng)頁(yè)接入騰訊、阿里的生態(tài),支持掃碼關(guān)注公眾號(hào)/手機(jī)驗(yàn)證碼即可完成注冊(cè)。省去了用戶編輯個(gè)人信息、輸入郵箱、輸入密碼等復(fù)雜的交互流程。

2、減少頁(yè)面跳轉(zhuǎn)

心流式體驗(yàn)設(shè)計(jì)是這幾年很熱門的詞,指的是通過(guò)優(yōu)化用戶體驗(yàn)讓用戶能夠沉浸式地高效完成目標(biāo)任務(wù)。這需要做到產(chǎn)品的交互習(xí)慣滿足用戶使用習(xí)慣,并且交互流程滿足用戶預(yù)期。過(guò)于頻繁的彈窗打擾和頁(yè)面跳轉(zhuǎn)的等待時(shí)間都會(huì)影響用戶進(jìn)入心流。

比如,例如飛書(shū)審批,審批詳情不需要跳轉(zhuǎn),點(diǎn)擊卡片即左側(cè)彈出詳情頁(yè)彈窗;讓用戶可以在同一個(gè)頁(yè)面即可瀏覽信息,不需要進(jìn)行跳轉(zhuǎn)到新的頁(yè)面進(jìn)行查看,方便用戶完成批量的審批任務(wù)。

再比如:阿里云,開(kāi)通服務(wù)的時(shí)候不需要跳轉(zhuǎn),而是在側(cè)邊彈出訂單彈窗,方便用戶操作。

3、交互組件的易用性迭代,不再局限于大彈窗

上面說(shuō)到,頻繁的彈窗提醒也會(huì)影響用戶進(jìn)入心流,用戶在對(duì)表單、畫布中的內(nèi)容進(jìn)行刪除的時(shí)候,如果使用全屏二次提醒彈窗,會(huì)感到創(chuàng)作過(guò)程被打斷。

釘釘宜搭:卡片畫布類產(chǎn)品,刪除操作時(shí),不局限于大彈窗,而是用靠近按鈕的小彈窗,使鼠標(biāo)的滑動(dòng)路徑更短,操作更加簡(jiǎn)便;并且在不過(guò)多打擾用戶的前提下,完成了目標(biāo)操作。

三、更加智能化,降低門檻、降低門檻、降低門檻

復(fù)雜性守恒定律由Larry Tesler于1986年提出,也稱泰斯勒定律。指的是“任何系統(tǒng)都存在其固有的復(fù)雜性,且無(wú)法被減少,只能設(shè)法調(diào)整、平衡。我們要考慮的是,怎么樣更好地處理它,讓用戶簡(jiǎn)單、高效地使用它”。

很多的中后臺(tái)系統(tǒng)中很多表單會(huì)存在大量的配置項(xiàng),這些配置項(xiàng)是否可以簡(jiǎn)化,讓平臺(tái)變得更簡(jiǎn)單智能?大部分時(shí)候答案都是否定的,過(guò)度追求簡(jiǎn)化往往容易弄巧成拙。功能邏輯易于解釋與理解才是更好的方案,當(dāng)你試圖簡(jiǎn)化降低復(fù)雜度,可能在其他地方埋了雷。

其中一個(gè)解決方案是將復(fù)雜度轉(zhuǎn)交給系統(tǒng),蘋果公司的黑盒理論與此互通;就是用戶不需要了解系統(tǒng)或功能背后的實(shí)現(xiàn)邏輯,只需要關(guān)注呈現(xiàn)在用戶眼前的交互界面即可。如今數(shù)據(jù)智能化處理正不斷發(fā)展,我們也看到了智能化在PC端領(lǐng)域的應(yīng)用。

1、剪映

剪映相比于老牌視頻編輯軟件更加簡(jiǎn)單,提供各種在線特效模板,來(lái)降低任務(wù)復(fù)雜度。相比傳統(tǒng)的PR、AE軟件需要本地存儲(chǔ)預(yù)設(shè)文件,或者手動(dòng)編輯簡(jiǎn)單了很多。用戶不需要知道背后的實(shí)現(xiàn)的技術(shù)原理,也不需要掌握過(guò)多的特效制作、調(diào)色技巧即可完成視頻的剪輯、調(diào)色工作。

2、釘釘宜搭畫布

推薦組件功能:用戶在進(jìn)行流程搭建時(shí),不需要從左側(cè)組件區(qū)拖拽組件,而是點(diǎn)擊連接線中間來(lái)添加組件。如果可以其實(shí)還可以更進(jìn)一步,就是根據(jù)后臺(tái)數(shù)據(jù)分析創(chuàng)建目標(biāo)流程需要的組件,向用戶主動(dòng)推薦相關(guān)組件,以此來(lái)降低用戶的創(chuàng)建門檻。

四、更加模塊化

隨著傳統(tǒng)業(yè)務(wù)向互聯(lián)網(wǎng)轉(zhuǎn)型越發(fā)普遍,線下業(yè)務(wù)流程轉(zhuǎn)到線上的需求場(chǎng)景越來(lái)越多,一個(gè)單一的系統(tǒng)不能完全滿足所有的業(yè)務(wù)場(chǎng)景需求,由此需要一個(gè)更加靈活模塊化的系統(tǒng)來(lái)針對(duì)不同的應(yīng)用場(chǎng)景來(lái)應(yīng)用不同的產(chǎn)品架構(gòu)。而該系統(tǒng)中的功能框架、交互組件又可以重復(fù)利用,于是更加靈活、模塊化、可自定義配置的系統(tǒng)后臺(tái)越發(fā)受到歡迎。

1、飛書(shū)、釘釘易搭

飛書(shū)、釘釘易搭內(nèi)的審批流程、會(huì)議系統(tǒng)、工單系統(tǒng)都可以通過(guò)模塊化的組件進(jìn)行高效搭建,不需要代碼即可像搭積木一樣實(shí)現(xiàn)用戶的自定義需求。

2、天貓優(yōu)品

阿里的天貓優(yōu)品電器店線下門店設(shè)計(jì)平臺(tái),整理了線下門店所需的16個(gè)模塊(前臺(tái)、小家電中島、洗衣機(jī)、櫥窗、空調(diào)、吧臺(tái)等),通過(guò)線上三維化場(chǎng)景直接進(jìn)行可視化設(shè)計(jì),所見(jiàn)即所得,并且能夠模擬現(xiàn)場(chǎng)燈光效果,根據(jù)門店現(xiàn)場(chǎng)規(guī)格,直接在三維空間里修改,快速導(dǎo)出效果圖;非常高效地完成了其他門店的需求化定制。

五、更加簡(jiǎn)潔,甄別關(guān)鍵任務(wù),路徑縮得更短

1、抖音、快手網(wǎng)頁(yè)端

抖音網(wǎng)頁(yè)端的用戶體驗(yàn)沿襲了手機(jī)App端的風(fēng)格,用戶進(jìn)入網(wǎng)頁(yè)的核心目的就是看短視頻打發(fā)時(shí)間,于是進(jìn)入首頁(yè)即可看短視頻,不需要用戶手動(dòng)選擇分類,并且手機(jī)端的用戶偏好通過(guò)用戶的賬號(hào)同步至網(wǎng)頁(yè)端,有了很順暢的用戶體驗(yàn)。

相比快手網(wǎng)頁(yè)版,快手延續(xù)了常規(guī)視頻網(wǎng)站的交互方式,將視頻內(nèi)容分為短視頻、直播、同城、長(zhǎng)視頻、小劇場(chǎng)等多個(gè)類別,由用戶自主去選擇觀看的內(nèi)容,內(nèi)容雖然更加多元,但確實(shí)路徑過(guò)長(zhǎng),不夠直接。

2、淘寶、京東首頁(yè)

再舉個(gè)例子,新版的淘寶網(wǎng)頁(yè)端不再像個(gè)門戶網(wǎng)站導(dǎo)航,而是通過(guò)數(shù)據(jù)分析用戶喜好來(lái)主動(dòng)推薦代替用戶自己選擇。用戶來(lái)淘寶網(wǎng)頁(yè)端,其實(shí)并不是買東西,大眾用戶已經(jīng)習(xí)慣了在手機(jī)上進(jìn)行支付,到了網(wǎng)頁(yè)端反而會(huì)不適應(yīng)。用戶來(lái)到淘寶網(wǎng)頁(yè)端的更多目的就是逛,看有沒(méi)有自己想要的東西,遇到喜歡的,就點(diǎn)進(jìn)去看了。于是新版淘寶通過(guò)個(gè)性化推薦把過(guò)去復(fù)雜的活動(dòng)運(yùn)營(yíng)頁(yè)板塊、特價(jià)板塊、品類板塊替換掉了,讓用戶在網(wǎng)頁(yè)端獲得更好的“逛街”體驗(yàn)。

而京東,在首頁(yè)做了復(fù)雜的流量分發(fā)設(shè)計(jì),通過(guò)不同的頻道、不同的板塊將用戶引流至相關(guān)的專題頁(yè)面,再進(jìn)行商品瀏覽。本質(zhì)上來(lái)說(shuō),用戶來(lái)到淘寶、來(lái)到京東的目的都是因?yàn)殚e,而淘寶的通過(guò)數(shù)據(jù)智能,大數(shù)據(jù)精準(zhǔn)推薦用戶喜歡的商品,簡(jiǎn)化了用戶的使用路徑,并且使整體頁(yè)面更加簡(jiǎn)潔。

六、微動(dòng)效、大圖、3D元素帶來(lái)更加深的視覺(jué)刺激

網(wǎng)頁(yè)的官網(wǎng)、首頁(yè)承擔(dān)著產(chǎn)品介紹、流量分發(fā)、增強(qiáng)品牌印象等的職責(zé)。我觀察到越來(lái)越多產(chǎn)品官網(wǎng)都開(kāi)始采用3D元素、視頻背景、大圖元素、微動(dòng)效來(lái)讓頁(yè)面呈現(xiàn)更加具有質(zhì)感和動(dòng)感。

1、3D元素

它是由Web3D技術(shù)的發(fā)展而興起,能夠給網(wǎng)頁(yè)Banner帶來(lái)更強(qiáng)的視覺(jué)吸引力,同時(shí)也強(qiáng)化了公司融合了AI技術(shù)的品牌印象。如法大大官網(wǎng)、騰訊云、阿里云的首頁(yè)Banner展示。法大大首頁(yè)Banner,鼠標(biāo)滾輪向下滾動(dòng)3D元素會(huì)相應(yīng)產(chǎn)生變動(dòng),文案與元素一靜一動(dòng),對(duì)比明顯,也更易于用戶注意到文案信息。

2、大圖、視頻

大疆官網(wǎng)首屏采用了全畫幅大圖的形式展示熱門產(chǎn)品,下方的產(chǎn)品推薦頁(yè)自動(dòng)播放宣傳視頻,提升了頁(yè)面的視覺(jué)沖擊力,展示了其科技屬性。

七、協(xié)同合作興起

疫情時(shí)期,線上辦公的需求和頻率激增,線上協(xié)作興起,許多辦公軟件都有了多人場(chǎng)景編輯功能。特別是對(duì)于復(fù)雜的項(xiàng)目,需要團(tuán)隊(duì)成員共同完成,協(xié)同合作的功能越來(lái)越受歡迎。

比如我們熟悉的figma,逐漸取代了傳統(tǒng)UI設(shè)計(jì)軟件ps、sketch等的頭部地位,其中的項(xiàng)目協(xié)同功能更是廣受歡迎。只需要發(fā)送項(xiàng)目鏈接邀請(qǐng)成員即可進(jìn)行項(xiàng)目協(xié)作,還支持多人標(biāo)注、語(yǔ)音溝通,大大提升了工作效率。

許多辦公軟件也都上線了類似的功能,比如幕布可以通過(guò)設(shè)置權(quán)限、發(fā)送鏈接或二維碼來(lái)邀請(qǐng)協(xié)作者共同編輯文檔,為產(chǎn)品的使用場(chǎng)景提供了更多可能。

總結(jié)

曾鳴在《未來(lái)商業(yè)20講》里說(shuō):“未來(lái)的互聯(lián)網(wǎng)世界的兩大趨勢(shì)是數(shù)據(jù)智能、網(wǎng)絡(luò)效應(yīng)”。 

這在PC端也得到了印證。淘寶網(wǎng)首頁(yè)、抖音首頁(yè)、嗶哩嗶哩網(wǎng)頁(yè)端將PC端與APP端的數(shù)據(jù)進(jìn)行互通,并對(duì)用戶行為偏好數(shù)據(jù)進(jìn)行分析,為用戶提供更加精準(zhǔn)的信息流的同時(shí),還使得頁(yè)面的交互更加簡(jiǎn)單,視覺(jué)效果更加簡(jiǎn)潔,過(guò)去依賴用戶自主選擇進(jìn)行流量分發(fā)的形式將會(huì)越來(lái)越弱勢(shì)。

在工具類產(chǎn)品中,利用數(shù)據(jù)智能化可以將用戶操作上的復(fù)雜度轉(zhuǎn)移給系統(tǒng),從而降低用戶使用門檻,提升用戶體驗(yàn)。與此同時(shí),工具類平臺(tái)也越發(fā)靈活化化,通過(guò)模塊化設(shè)計(jì)來(lái)自定義搭建不同用戶的使用需求的產(chǎn)品,還能節(jié)省資源建設(shè)成本。

網(wǎng)絡(luò)效應(yīng)的部分應(yīng)用體現(xiàn)在用戶在使用工具類產(chǎn)品中,不再是孤單的個(gè)體,而是能通過(guò)線上協(xié)同,讓用戶與用戶之間能夠產(chǎn)生共同協(xié)作,共同交流,更加方便地完成任務(wù)。

作者:為美好而設(shè)計(jì)

轉(zhuǎn)載請(qǐng)注明:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

2022 年 UXUI 設(shè)計(jì)趨勢(shì)

ui設(shè)計(jì)分享達(dá)人

2022 年即將過(guò)半,疫情在家的我們重新花一些時(shí)間,回顧今年最引為人注目的一些設(shè)計(jì)趨勢(shì),有些已經(jīng)變成現(xiàn)實(shí),有些可能即將會(huì)發(fā)生。在過(guò)去的這十幾年里,全國(guó)的互聯(lián)網(wǎng)和移動(dòng)互聯(lián)網(wǎng)行業(yè)蓬勃發(fā)展,引發(fā)了 UX / UI 行業(yè)的火爆,無(wú)論是在設(shè)計(jì)技術(shù)方面還是在設(shè)計(jì)實(shí)踐方面維持著快速發(fā)展?fàn)顟B(tài)。設(shè)計(jì)探索受到了前所未有的關(guān)注。創(chuàng)新也永不停止,正在向各個(gè)方向延伸——有的是曇花一現(xiàn),有的是重塑想象,有的卻循環(huán)往復(fù)。


下面我們將更詳細(xì)地向你探討一些 2022 年的設(shè)計(jì)趨勢(shì)。

超級(jí)大的字體排版



The Badass Project 搗蛋派計(jì)劃

過(guò)去幾年里,大字排版的趨勢(shì)越來(lái)越明顯,字體尺寸也在增加!接下來(lái),字體更大且?guī)缀鯖](méi)有圖像的時(shí)尚 英雄形象 網(wǎng)頁(yè)設(shè)計(jì),將成為主流風(fēng)格。

(英雄形象在網(wǎng)頁(yè)設(shè)計(jì)中是一個(gè)特定的網(wǎng)頁(yè)橫幅,通常是一個(gè)包含與內(nèi)容相關(guān)的大圖像頁(yè)眉)

設(shè)計(jì)師和用戶都越來(lái)越習(xí)慣在登陸頁(yè)面前面和中心位置使用超大文字。無(wú)論是怪誕的無(wú)襯線字體還是現(xiàn)代奢華的襯線字體——這一趨勢(shì)就是在于越大越好。通過(guò)精心選擇的字體,網(wǎng)站可以做出比以往更大膽的宣傳,以吸引受眾的注意力并有效地信息傳達(dá)。



這些字體選擇通過(guò) 引人注目的動(dòng)畫進(jìn)一步生動(dòng)起來(lái)。設(shè)計(jì)師正在實(shí)現(xiàn)通過(guò)鼠標(biāo)移動(dòng)或向下滾動(dòng)頁(yè)面使排版移動(dòng)并與用戶產(chǎn)生互動(dòng)的創(chuàng)造性效果。以粗體、動(dòng)畫和交互式排版為核心,許多網(wǎng)站也就不使用任何背景圖像,讓外觀變得干凈且精致。



MAFF

所以一定要試試這種趨勢(shì):把文本尺寸放大,可以將其放置在一些圖像上,制作大尺寸的動(dòng)態(tài)標(biāo)題,讓用戶從中獲得樂(lè)趣。最重要的是,要勇于呈現(xiàn)大膽強(qiáng)烈視覺(jué)效果,從而可以立即吸引用戶的注意力。

案例:Medium 官網(wǎng)——https://medium.com/


復(fù)古風(fēng)格回歸



Shakib - Sneakerbumb

在經(jīng)歷了充滿不確定性和陰郁的兩年,我們學(xué)會(huì)了尋找和珍惜任何享受幸福的機(jī)會(huì)。我們大量獨(dú)處時(shí)光的花在了數(shù)字空間上,這一現(xiàn)象也不例外。



La puce à l’oreille

為了回應(yīng)這一需求,設(shè)計(jì)師從 80 年代和 90 年代獲得了巨大的靈感;將色彩豐富、質(zhì)感豐富、復(fù)古風(fēng)格的主題與現(xiàn)代氣息結(jié)合起來(lái),打造真實(shí)的外觀。鮮艷的色彩搭配柔和蠟筆肌理、古怪的排版、紋理豐富的背景、跨頁(yè)面網(wǎng)格的布局、非傳統(tǒng)的圖像和古怪的插圖,都可能會(huì)在接下來(lái)的一年吸引你的注意力。



Kristen Ryan for MakeReign

隨著這一切的發(fā)生,我們甚至可以說(shuō),在過(guò)去幾年里,每個(gè)人都學(xué)會(huì)了賦予自己一些自由的生活態(tài)度。這為我們提供了更多的實(shí)驗(yàn)空間,當(dāng)然也為設(shè)計(jì)和其他領(lǐng)域帶來(lái)了讓人愉快的成果。這就是說(shuō),設(shè)計(jì)師們覺(jué)得有必要從簡(jiǎn)單和實(shí)用的用戶體驗(yàn)轉(zhuǎn)向有趣、搞笑甚至愚蠢的交互。出人意料的是,讓別人微笑可能會(huì)是你的網(wǎng)站或 app 令人印象深刻的一種方式。

新野獸派設(shè)計(jì)



Blumenkopf

野獸派設(shè)計(jì)從 1950 年代的野獸派建筑運(yùn)動(dòng)中汲取靈感,延用其不修邊幅、毛糙粗狂的外觀形式,和故意做出的丑陋效果。就像在建筑中一樣,野蠻主義在網(wǎng)站中揭露和解構(gòu)(甚至慶祝)這種媒介的底層結(jié)構(gòu)和重要原則。原始、大膽和反動(dòng)的本性使野獸派設(shè)計(jì)一直處于數(shù)字空間的邊緣,因?yàn)樵际腔ヂ?lián)網(wǎng)的全部。然而,近年來(lái),野獸派一直在緩慢而穩(wěn)定地復(fù)蘇,現(xiàn)在被一些人稱為新野獸派。



Caroselling


隨著互聯(lián)網(wǎng)上干凈、傳統(tǒng)的網(wǎng)站越來(lái)越多,個(gè)人網(wǎng)站變得難以脫穎而出。轉(zhuǎn)向野獸派,提供真誠(chéng)、原始但獨(dú)特的視覺(jué)體驗(yàn),可能正是提升你下一個(gè)網(wǎng)站的方式。


無(wú)網(wǎng)格布局,強(qiáng)烈的調(diào)色板,重疊的元素,擁擠和幾乎混亂的設(shè)計(jì)只是你的野獸主義工具包的一部分。將它們與等寬和奇怪大小的排版結(jié)合起來(lái),缺乏或極少的導(dǎo)航,這相當(dāng)于沒(méi)有額外的“空間”或子頁(yè)面的“開(kāi)放式版面”,你會(huì)得到一個(gè)引人注目的粗野派外觀。



Work with us


案例:阿里云設(shè)計(jì)官網(wǎng)——Alibaba Cloud Design - Not Design Just Future


當(dāng)然,還有更多,但野獸派網(wǎng)頁(yè)設(shè)計(jì)的定義規(guī)則是沒(méi)有規(guī)則;它反對(duì)既定的規(guī)則和慣例。更重要的是,你需要用更強(qiáng)烈的意義價(jià)值和意圖來(lái)將你的野獸派杰作與另一個(gè)設(shè)計(jì)糟糕的網(wǎng)站區(qū)分開(kāi)來(lái)。


本機(jī)桌面客戶端



Messenger


Figma、Todoist、Slack和 Messenger 等網(wǎng)站和移動(dòng)應(yīng)用程序都把時(shí)間和精力集中在桌面客戶端版本。



Todoist


越來(lái)越多的應(yīng)用程序似乎也在效仿,因?yàn)檠芯勘砻?,這樣用戶會(huì)感到 更舒適、更安全。用戶希望自己的應(yīng)用程序遠(yuǎn)離互聯(lián)網(wǎng)瀏覽器,遠(yuǎn)離所有打開(kāi)的標(biāo)簽,回到指定的應(yīng)用程序窗口,讓人感覺(jué)更寬敞、更專注。在使用這些應(yīng)用程序時(shí),不需要處理數(shù)分散注意力的標(biāo)簽,這無(wú)疑是一種進(jìn)步!此外,將通知直接發(fā)送到桌面,我們的通知管理也必然得到改善。



Figma

本地化用戶體驗(yàn)



為阿拉伯語(yǔ)國(guó)家的谷歌搜索頁(yè)面布局


用戶研究團(tuán)隊(duì)利用 人類心理學(xué) 領(lǐng)域的洞察,以及 可用性測(cè)試,已經(jīng)能夠塑造界面,為用戶提供最大的滿意度和愉快的體驗(yàn)感受。幾十年來(lái),這一直是用戶體驗(yàn)設(shè)計(jì)的核心。

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


隨著技術(shù)和研究方法的到位,我們開(kāi)始看到一款產(chǎn)品的多種變體同時(shí)推出,以滿足不同用戶的需求。隨著許多大品牌都在努力擴(kuò)大他們的用戶群體,創(chuàng)造本地化的產(chǎn)品體驗(yàn)可能會(huì)成為一種大趨勢(shì)——如果不是標(biāo)準(zhǔn)的話。


榮譽(yù)提名:包容性



NhuSW- Everyfit — Fitness for Everyone

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



Spotify


隨著數(shù)字空間引領(lǐng)著世界的全球化,它也毫無(wú)疑問(wèn)地成為我們包容性努力的前沿。人們總是希望品牌和公司采用更具 包容性的敘述 和語(yǔ)言,并向包容性的平臺(tái)、產(chǎn)品和服務(wù) 邁進(jìn)。他們被鼓勵(lì)在圖像、語(yǔ)言和視覺(jué)語(yǔ)言中推動(dòng)多樣化的表現(xiàn),這樣做不僅僅是為了營(yíng)銷收益,而是為了更大的意義和價(jià)值。


這些是我們?cè)?2022 年會(huì)看到的趨勢(shì)和現(xiàn)象。記住,它們是為了提醒我們當(dāng)前的總體設(shè)計(jì)趨勢(shì)??梢允褂盟鼈儊?lái)支持和授權(quán)您的設(shè)計(jì)決策,但不要害怕挑戰(zhàn)它們,或用它們?yōu)槿藗儎?chuàng)造更多積極有效的體驗(yàn)。


原文標(biāo)題:UI/UX Design Trends of 2022

文章來(lái)源:Codeart

原創(chuàng)作者:Taras Bakusevych & Maja Mitrovikj

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

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

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

日歷

鏈接

個(gè)人資料

存檔