首頁(yè)

012024-4

UI交互動(dòng)畫／UI交互動(dòng)效／UI設(shè)計(jì)／UI界面設(shè)計(jì)

動(dòng)效有多重要? 動(dòng)效可以幫我們提升UX(用戶體驗(yàn)),使UI界面顯得更加一致和真實(shí),并給整個(gè)產(chǎn)品帶來(lái)創(chuàng)新的感覺(jué)。

評(píng)論(0) 瀏覽(439)

272024-3

詳解國(guó)內(nèi)外十大設(shè)計(jì)系統(tǒng)

設(shè)計(jì)系統(tǒng)（Design System）是一套綜合性的指導(dǎo)原則、組件和規(guī)則，它協(xié)助團(tuán)隊(duì)以一致、高效的方式設(shè)計(jì)和開(kāi)發(fā)數(shù)字產(chǎn)品。設(shè)計(jì)系統(tǒng)通常包括以下幾個(gè)關(guān)鍵要素：

評(píng)論(0) 瀏覽(484)

272024-3

帶你了解全案策劃設(shè)計(jì)流程

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

全案策劃設(shè)計(jì)是指在市場(chǎng)營(yíng)銷領(lǐng)域中，為一個(gè)項(xiàng)目或品牌提供全方位的策劃和執(zhí)行服務(wù)。它涵蓋了從市場(chǎng)調(diào)研、品牌定位、目標(biāo)受眾分析、營(yíng)銷策略制定、創(chuàng)意設(shè)計(jì)、媒體選擇到推廣活動(dòng)執(zhí)行等一系列環(huán)節(jié)。全案策劃設(shè)計(jì)的核心理念在于不僅解決企業(yè)短期的業(yè)績(jī)問(wèn)題同時(shí)也解決企業(yè)的長(zhǎng)期經(jīng)營(yíng)管理問(wèn)題。

評(píng)論(0) 瀏覽(459)

262024-3

AI實(shí)操：用WHEE輔助設(shè)計(jì)app啟動(dòng)頁(yè)

前端達(dá)人

今天我們繼續(xù)用WHEE，帶你玩轉(zhuǎn)AI實(shí)操，設(shè)計(jì)春天出行啟動(dòng)頁(yè)運(yùn)營(yíng)海報(bào)！

這次的主題是春天出行！

（文末已附上同款配方鏈接）

Part 01

AI實(shí)操：用WHEE輔助設(shè)計(jì)app啟動(dòng)頁(yè)

第一，先找一下靈感參考圖

第二，從三個(gè)方向來(lái)分析

版式
元素
色調(diào)

收集靈感圖時(shí)，有4點(diǎn)要注意

風(fēng)格：整體風(fēng)格是否符合我們的主題和目標(biāo)用戶群？
版式：版式是否清晰、易讀？
元素：運(yùn)用的元素是否與主題相關(guān)？
色彩：色彩搭配是否和諧、美觀？

我們先來(lái)看一下“春天”

-版式

從版式上面來(lái)看一下他們共同的特征，基本上都是一個(gè)上下結(jié)構(gòu)的版式特征

這種結(jié)構(gòu)簡(jiǎn)單明了，合適各種類型的內(nèi)容

上方主標(biāo)題，下方logo落款，這種排版方式我感覺(jué)是最穩(wěn)的一種結(jié)構(gòu)

即使是新人也能很容易出排版效果

標(biāo)題的排版方式呢,有橫向排版和豎向排版

它除了使用常規(guī)的黑體字

還有手寫體，我感覺(jué)手寫體更加符合主題

-元素

從元素結(jié)構(gòu)來(lái)看

天空，河流，山川，陽(yáng)光、花草等等

這些元素能夠讓人聯(lián)想到春天的清新、活力和愉悅，增加了海報(bào)的吸引力和代表性

-色調(diào)

色調(diào)呢基本也是以藍(lán)色，白色，綠色為主旋律

也就是陽(yáng)光、白云、綠色植物

接著來(lái)看看“出行”

-元素

元素呢也是在上面“春天”的基礎(chǔ)上面

多出車，人，露營(yíng)等周邊關(guān)于戶外的元素

這些元素能夠更加生動(dòng)地展現(xiàn)春季戶外活動(dòng)的場(chǎng)景和氛圍

-色調(diào)

色調(diào)也基本藍(lán)、白、綠

這個(gè)主題我覺(jué)得還是要有生機(jī)感、有活力一點(diǎn)的色調(diào)才對(duì)

總結(jié)設(shè)計(jì)方向和關(guān)健詞提取

版式

整體的版式規(guī)劃采用上下的結(jié)構(gòu)

主標(biāo)題放在上方，橫排版，用手寫黑體

關(guān)鍵詞

核心詞：草地，拖車、車輛、山川

效果詞：可愛(ài)的卡通設(shè)計(jì)、夢(mèng)幻的視覺(jué)效果、鮮艷的色彩

Part 02

接下我們看一下WHEE的參數(shù)

提示詞、模型這里維持默認(rèn)就好

當(dāng)然也還可以使用它的智能聯(lián)想功能

看看有什么新靈感，亦或者是反向詞等等

風(fēng)格模型

在模型商店里面，這里我用了citypop的風(fēng)格模型

當(dāng)然這里面還有很多的模型，比如新中式風(fēng)格，工筆畫盲盒等等

所以在關(guān)鍵詞里就不需要在寫風(fēng)格的關(guān)鍵詞了

直接選擇相對(duì)應(yīng)的風(fēng)格模型會(huì)更加高效率

出來(lái)的畫面結(jié)果也更加接近目標(biāo)視覺(jué)

參數(shù)這里保持默認(rèn)就好

我們第一次跑圖主要還是測(cè)試關(guān)鍵詞

后續(xù)看情況在進(jìn)行調(diào)整

這是我一共刷了兩次圖

從呈現(xiàn)的結(jié)果上面來(lái)看

第一排比較符合想要的感覺(jué)

畫面上方也好做文字的排版

添加關(guān)鍵詞“露營(yíng)、帳篷”

氛圍的感覺(jué)還是少了一點(diǎn)，因?yàn)樯倭寺稜I(yíng)和帳篷的元素

我們可以在右側(cè)這里，選“重新編輯”按鈕

這樣我們就可以延續(xù)之前的設(shè)置繼續(xù)編輯

然后我們把露營(yíng)和帳篷關(guān)鍵詞加上，其它不變

從結(jié)果來(lái)看第一張有帳篷的氛圍更好

第三張和第四張有點(diǎn)脫離了

但是第三張?zhí)幚硪幌履脕?lái)做彈窗感覺(jué)效果也會(huì)非常好

然后我們?cè)谟覀?cè)這個(gè)放大一下像素

這樣就可以得到一個(gè)更高清的分辨率

Part 03

接著我們來(lái)做一下主標(biāo)題的字體設(shè)計(jì)

就用手寫黑體

我們先找一些毛筆字字形作為筆畫墊字

用鋼筆工具描出字形（這里先以春字為例）

我們挑選出重要的筆畫特征就好

其實(shí)是不需要跟原來(lái)的一樣

這樣會(huì)更有靈性

比如這里“春”字，上部首里的三橫

我這里只要第三橫連筆的特征

后面的幾個(gè)字也是以此類推

描繪完之后呢，我們加一粗一點(diǎn)描邊的大小

同時(shí)將端點(diǎn)和邊角都設(shè)為平頭

基本的字體結(jié)構(gòu)完成了

下一步就是細(xì)節(jié)的調(diào)整了

首先調(diào)整一下字間距

排版的話，我給它是上下錯(cuò)落

這樣會(huì)給人比較輕松的感覺(jué)

整理細(xì)節(jié)的話，就需要注意

筆畫之間的關(guān)系和空間感

例如“春”字上部首的第三橫與“日”中間那一橫

“出”和“行”的連接，以及它們相互之間的關(guān)系

完成主標(biāo)題的設(shè)計(jì)之后，我們先來(lái)對(duì)畫面進(jìn)行二次構(gòu)圖

天空部份我們不需要太多

第一是文案放在上方識(shí)別度較低

第二放大主體元素露營(yíng)車和帳篷后，它也能夠更好的突出主題氛圍

按照原先的計(jì)劃做上下結(jié)構(gòu)的版式設(shè)計(jì)

上面我們放主標(biāo)題文案信息

但是單看著主標(biāo)題設(shè)計(jì)還不夠豐富

所以需要在添加一些細(xì)節(jié)

在“日”字上方和“出行”下方

我們?cè)谟梦陌缸龀汕€跟隨字形弧度

同時(shí)他們也是相互呼應(yīng)的

描述信息直接放在主標(biāo)題下方

居中對(duì)齊的樣式就好

下面就放輔助的信息

同時(shí)也是居中對(duì)齊的樣式

這樣上下就有元素關(guān)系的呼應(yīng)

統(tǒng)一的居中對(duì)齊的樣式

也會(huì)讓文字閱讀效率大大提高

最后在放入一些固定落款的元素就完成啦～

Part 04

總結(jié)

1. 設(shè)計(jì)方向和關(guān)鍵詞提取

通過(guò)收集和分析同類題材，得出設(shè)計(jì)方向和關(guān)鍵詞

前期的方向確定是很重要的，有效的方向可以減少后期改稿

2. 視覺(jué)風(fēng)格

選擇對(duì)應(yīng)的風(fēng)格模型，得到想要的視覺(jué)風(fēng)格

WHEE模型庫(kù)中有很多風(fēng)格模型，這大大的提升了工作的效率

3. 主標(biāo)題字體設(shè)計(jì)

以毛筆字字形作為基礎(chǔ)字形，設(shè)計(jì)出主標(biāo)題

毛筆字結(jié)合黑體的感覺(jué)非常合適這輕松、放松類型畫面

4. 畫面排版

根據(jù)前期版式分析確定的方向，對(duì)畫面進(jìn)行文字排版

文案與文案之間，標(biāo)題字體設(shè)計(jì)

都需要注意它們之間的關(guān)系，以及統(tǒng)一性

今天的分享到這兒就結(jié)束啦

我們下篇見(jiàn)咯

以下同款配方鏈接

https://www.whee.com/ai/text-to-image?id=198427&styleModelId=3044&editorMode=advanced

https://www.whee.com/ai/text-to-image?id=198428&styleModelId=3044&editorMode=advanced

藍(lán)藍(lán)設(shè)計(jì)(m.wnxcall.com )是一家專注而深入的界面設(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ā)

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

評(píng)論(0) 瀏覽(472)

262024-3

2024年動(dòng)效設(shè)計(jì)前瞻

前端達(dá)人

在數(shù)字化時(shí)代，動(dòng)效設(shè)計(jì)已經(jīng)成為吸引用戶眼球、提升用戶體驗(yàn)不可或缺的一部分，動(dòng)態(tài)元素的呈現(xiàn)效果，相比純圖片也新增了很多樂(lè)趣與驚喜，融入進(jìn)我們生活中的方方面面。

2023年，我們看到了許多令人眼前一亮的動(dòng)效設(shè)計(jì)形式，例如尼桑Ariya車機(jī)交互中，當(dāng)駕駛員啟動(dòng)車輛時(shí)，信息娛樂(lè)系統(tǒng)的啟動(dòng)界面會(huì)展示一個(gè)動(dòng)態(tài)的汽車品牌標(biāo)志，伴隨著流暢的過(guò)渡效果和音效，營(yíng)造出一種高科技感和品牌認(rèn)知度。

Current Time 0:00

Duration Time 0:08

Loaded: 0%

Progress: 0.00%

從微交互到增強(qiáng)現(xiàn)實(shí)，從三維動(dòng)畫到自然運(yùn)動(dòng)，隨著技術(shù)的不斷發(fā)展與用戶的不斷變化，動(dòng)效設(shè)計(jì)也在不斷演進(jìn)和創(chuàng)新。那未來(lái)的動(dòng)效設(shè)計(jì)會(huì)是怎樣的形式呢？在本文中我們一起來(lái)探討一下吧！

溫馨提示：以下圖片均來(lái)源網(wǎng)絡(luò)，GIF格式文件需要加載，感謝耐心閱讀～

一、2023年動(dòng)效設(shè)計(jì)表現(xiàn)形式

動(dòng)效設(shè)計(jì)在用戶界面、廣告營(yíng)銷、游戲開(kāi)發(fā)等領(lǐng)域都發(fā)揮著重要作用，常見(jiàn)的表現(xiàn)形式有微交互動(dòng)效、3D動(dòng)效、數(shù)據(jù)可視化動(dòng)效以及場(chǎng)景化動(dòng)效。

1、微交互動(dòng)效

在2023年，微交互動(dòng)效成為了設(shè)計(jì)師們關(guān)注的焦點(diǎn)。通過(guò)細(xì)膩的動(dòng)畫效果，提升用戶體驗(yàn)，增強(qiáng)用戶對(duì)界面的感知，使用戶操作更加直觀和愉悅。

在移動(dòng)應(yīng)用界面中，按鈕、導(dǎo)航欄、滑動(dòng)卡片等交互元素中常見(jiàn)微交互動(dòng)效，例如美團(tuán)小象超市，當(dāng)用戶點(diǎn)擊底部標(biāo)簽欄按鈕時(shí)，文字的顏色發(fā)生變化，圖標(biāo)右下角增加主題綠色填充，頁(yè)面同步切換，給予用戶直觀的反饋，告知其操作已被識(shí)別；

美團(tuán)-小象超市-手機(jī)錄屏

車機(jī)界面中，導(dǎo)航欄通常用于切換不同的功能頁(yè)面或查看系統(tǒng)狀態(tài)。例如問(wèn)界駕駛模式調(diào)節(jié)，用戶通過(guò)手勢(shì)操作導(dǎo)航欄顯示，按鈕高亮效果，駕駛模式以微交互動(dòng)效呈現(xiàn)預(yù)覽，以使界面切換更加流暢、直觀，同時(shí)幫助駕駛員更輕松地操作界面，提升駕駛安全性和用戶體驗(yàn)。

問(wèn)界駕駛模式，來(lái)源網(wǎng)絡(luò)

2、3D動(dòng)效

三維技術(shù)制作的動(dòng)畫效果，通常具有立體感和逼真感，能夠在屏幕上呈現(xiàn)出立體空間中的物體運(yùn)動(dòng)和變化。這種動(dòng)效在視覺(jué)上更加生動(dòng)、震撼，常用于影視特效、游戲開(kāi)發(fā)、虛擬現(xiàn)實(shí)等領(lǐng)域。

視頻來(lái)源網(wǎng)絡(luò)

在電影、電視劇等影視作品中，3D動(dòng)效常被用于創(chuàng)造出各種特效場(chǎng)景、人物動(dòng)作或者虛擬世界，增強(qiáng)視覺(jué)沖擊力和真實(shí)感。例如好萊塢大片《復(fù)仇者聯(lián)盟》中，各種特效場(chǎng)景和超級(jí)英雄的動(dòng)作都采用了大量的3D動(dòng)效制作，如鋼鐵俠的攻擊動(dòng)作、蜘蛛俠的飛行、蜘蛛網(wǎng)特效等，讓觀眾身臨其境地感受到了超級(jí)英雄的力量與魅力。

游戲開(kāi)發(fā)中，3D動(dòng)效被廣泛應(yīng)用于游戲角色的動(dòng)作表現(xiàn)、場(chǎng)景建模、特效設(shè)計(jì)等方面，提升游戲的沉浸感和視覺(jué)體驗(yàn)。

王者榮耀破曉版

車機(jī)界面中，可以通過(guò)3D動(dòng)效制作出全景效果，使駕駛員在車內(nèi)就能感受到真實(shí)的車外景象，增強(qiáng)駕駛體驗(yàn)和安全感。例如導(dǎo)航系統(tǒng)中，使用3D地圖和路況動(dòng)效，讓駕駛員更清晰地了解路況和行駛路徑。

Apollo anp3.0-障礙物繞行

3、數(shù)據(jù)可視化動(dòng)效

數(shù)據(jù)可視化動(dòng)效通過(guò)直觀的動(dòng)畫展示數(shù)據(jù)變化，增強(qiáng)數(shù)據(jù)的可讀性和理解性，使數(shù)據(jù)更生動(dòng)、直觀地呈現(xiàn)在用戶面前，幫助用戶更好地理解數(shù)據(jù)的含義和趨勢(shì)。這種動(dòng)效在金融、統(tǒng)計(jì)等領(lǐng)域尤為常見(jiàn)。

在商業(yè)領(lǐng)域中，數(shù)據(jù)可視化動(dòng)效常被用于制作各種分析報(bào)告、銷售演示等，通過(guò)動(dòng)態(tài)圖表、實(shí)時(shí)數(shù)據(jù)更新等動(dòng)態(tài)效果，可以讓數(shù)據(jù)報(bào)告更具吸引力和說(shuō)服力。例如企業(yè)的數(shù)據(jù)監(jiān)控面板中，可以使用數(shù)據(jù)可視化動(dòng)效來(lái)實(shí)時(shí)展示銷售額、用戶訪問(wèn)量、庫(kù)存情況等數(shù)據(jù)指標(biāo)的變化情況。

來(lái)自DataV-設(shè)計(jì)中心

并且通過(guò)動(dòng)態(tài)變化的圖表、實(shí)時(shí)更新的數(shù)據(jù)指標(biāo)等動(dòng)效效果，可以讓管理者更及時(shí)地了解業(yè)務(wù)狀況，做出相應(yīng)的決策。

來(lái)自DataV-設(shè)計(jì)中心

在科學(xué)研究和教育領(lǐng)域，數(shù)據(jù)可視化動(dòng)效可以幫助科學(xué)家和教育工作者更好地展示研究成果和教學(xué)內(nèi)容。例如，通過(guò)動(dòng)畫效果展示監(jiān)測(cè)數(shù)據(jù)的動(dòng)態(tài)變化、預(yù)警統(tǒng)計(jì)等，可以使抽象的概念更具體化、更易于理解。

來(lái)自DataV-設(shè)計(jì)中心

車機(jī)界面中，可以通過(guò)數(shù)據(jù)可視化動(dòng)效來(lái)展示車輛的駕駛數(shù)據(jù)，如車速、油耗、行駛里程等。例如，通過(guò)動(dòng)態(tài)圖表、實(shí)時(shí)更新的數(shù)據(jù)指標(biāo)等動(dòng)效效果，可以讓駕駛員更清晰地了解車輛的行駛情況，幫助其做出更安全、更經(jīng)濟(jì)的駕駛決策。

@ Musemind UI/UX Agency，dribbble

4、場(chǎng)景化動(dòng)效

場(chǎng)景化動(dòng)效通過(guò)模擬真實(shí)世界的場(chǎng)景，讓用戶在虛擬空間中獲得更自然的交互體驗(yàn)。產(chǎn)品展示或推廣中，場(chǎng)景化動(dòng)效可以幫助展示產(chǎn)品的特點(diǎn)、功能和優(yōu)勢(shì)。例如，在歐萊雅巴黎振興霜互動(dòng) AR邀請(qǐng)卡，可以使用場(chǎng)景化動(dòng)效展示產(chǎn)品的成分含量，以吸引消費(fèi)者的注意力和興趣。

歐萊雅巴黎振興霜互動(dòng) AR 邀請(qǐng)卡，@KIVISENSE

車機(jī)界面中，我們也能看到場(chǎng)景化動(dòng)效展示駕駛模擬場(chǎng)景，幫助駕駛員更直觀地了解車輛的行駛狀態(tài)和安全提示。例如導(dǎo)航系統(tǒng)中，展示車輛在雨天、雪天或夜間等不同路況下的行駛情況，以提醒駕駛員注意安全駕駛。

HUDWAY Drive，來(lái)源網(wǎng)絡(luò)

二、2024年動(dòng)效設(shè)計(jì)發(fā)展方向

2023年動(dòng)效設(shè)計(jì)不僅追求美觀，更注重與用戶的深度溝通。每一個(gè)動(dòng)效都在講述品牌故事，引導(dǎo)操作，提升易用性和趣味性。站在這個(gè)時(shí)間節(jié)點(diǎn)上，我們不禁要思考：接下來(lái)的一年，動(dòng)效設(shè)計(jì)又將如何進(jìn)化？它將如何繼續(xù)深化與用戶的互動(dòng)，提升整體的用戶體驗(yàn)?zāi)兀?/div>

1、智能化動(dòng)效

隨著人工智能技術(shù)的不斷發(fā)展，利用人工智能（AI）技術(shù)或者智能算法來(lái)設(shè)計(jì)和生成動(dòng)畫效果，以實(shí)現(xiàn)動(dòng)效的智能化、個(gè)性化或自適應(yīng)。這類動(dòng)效可以根據(jù)用戶的行為、喜好或者環(huán)境變化實(shí)時(shí)調(diào)整，以提供更符合用戶需求和情境的動(dòng)畫體驗(yàn)。

音樂(lè)專屬推送

在移動(dòng)應(yīng)用、網(wǎng)頁(yè)設(shè)計(jì)等界面中，可以利用智能化動(dòng)效來(lái)實(shí)現(xiàn)智能交互界面，根據(jù)用戶的操作習(xí)慣和需求動(dòng)態(tài)調(diào)整動(dòng)畫效果。例如，蘋果音樂(lè)專屬推送，根據(jù)我的瀏覽、檢索等行為和歌曲收藏、喜好等，智能調(diào)整動(dòng)態(tài)加載的內(nèi)容，建立我的專注音樂(lè)空間，提升我整體的使用體驗(yàn)和滿意度。

2024款小鵬G9 超智駕豪華純電SUV，小鵬汽車官網(wǎng)

在車機(jī)界面中，可以利用智能化動(dòng)效設(shè)計(jì)車載智能助理系統(tǒng)，根據(jù)車輛狀態(tài)、道路情況和駕駛員行為實(shí)時(shí)調(diào)整動(dòng)畫效果，提供更智能、更安全的駕駛輔助功能。例如，根據(jù)車輛的自動(dòng)駕駛狀態(tài)實(shí)時(shí)調(diào)整駕駛模擬場(chǎng)景的動(dòng)畫效果，幫助駕駛員更好地理解車輛的行駛情況和駕駛狀態(tài)。

2024款小鵬G9 超智駕豪華純電SUV，小鵬汽車官網(wǎng)

根據(jù)車內(nèi)溫度和濕度調(diào)整空調(diào)和座椅加熱系統(tǒng)，實(shí)現(xiàn)智能化的溫度控制和舒適度提升。

2、增強(qiáng)現(xiàn)實(shí)（AR）和虛擬現(xiàn)實(shí)（VR）的融合

2016年至今，AR和VR技術(shù)的發(fā)展持續(xù)加速，增強(qiáng)現(xiàn)實(shí)和虛擬現(xiàn)實(shí)融合動(dòng)效成為熱門話題。越來(lái)越多的行業(yè)開(kāi)始關(guān)注和應(yīng)用AR/VR技術(shù)，如教育、醫(yī)療、零售、汽車等領(lǐng)域，這種動(dòng)效在現(xiàn)實(shí)環(huán)境中疊加虛擬物體和效果，使用戶能夠與虛擬內(nèi)容進(jìn)行互動(dòng)，創(chuàng)造出更加豐富和沉浸式的體驗(yàn)。

虛擬試衣間

@Amol Arora

用戶可以利用增強(qiáng)現(xiàn)實(shí)和虛擬現(xiàn)實(shí)融合技術(shù)，在現(xiàn)實(shí)環(huán)境中體驗(yàn)虛擬試衣間。通過(guò)智能設(shè)備查看虛擬衣服和配飾，以便在不實(shí)際試穿的情況下預(yù)覽其外觀和適合度。

虛擬家居設(shè)計(jì)

@ Bell'Arte Living - Estofados

利用AR/VR融合技術(shù)，用戶可以在現(xiàn)實(shí)空間中體驗(yàn)虛擬家居設(shè)計(jì)，例如在現(xiàn)實(shí)環(huán)境中預(yù)覽家具、裝飾品等虛擬物體的擺放效果，并根據(jù)實(shí)際需要進(jìn)行調(diào)整。

車機(jī)領(lǐng)域

@ Shutterstock

在車機(jī)場(chǎng)景中，汽車制造商可為客戶提供汽車內(nèi)容定制體驗(yàn)，客戶通過(guò)AR應(yīng)用或VR頭盔在虛擬環(huán)境中預(yù)覽汽車內(nèi)部的不同配置和顏色方案，并根據(jù)個(gè)人喜好進(jìn)行定制選擇。

Acura Parts & Service

關(guān)于車輛維修和保養(yǎng)方面，通過(guò)AR應(yīng)用，車主可以在現(xiàn)實(shí)車輛上查看虛擬的維修部件和保養(yǎng)步驟，以便更容易地進(jìn)行維護(hù)保養(yǎng)。

The future of AR in Cars，Behance

同時(shí)也可應(yīng)用于駕駛輔助和車載娛樂(lè)，例如智能導(dǎo)航、虛擬HUD、駕駛模擬和增強(qiáng)現(xiàn)實(shí)車載娛樂(lè)，進(jìn)一步提升車機(jī)系統(tǒng)的智能化水平和用戶體驗(yàn)，為駕駛員和乘客帶來(lái)更安全、便捷、有趣的車載生活體驗(yàn)。

3、交互式動(dòng)效

交互式動(dòng)效在2024年仍會(huì)繼續(xù)保持流行，并有望進(jìn)一步發(fā)展，使用戶能夠更直觀地參與到動(dòng)效的生成和表現(xiàn)中。例如在車機(jī)系統(tǒng)中，通過(guò)交互式動(dòng)效顯示車輛的駕駛狀態(tài)、周圍環(huán)境和導(dǎo)航路線等信息，駕駛員可以通過(guò)觸摸屏或語(yǔ)音指令與系統(tǒng)進(jìn)行交互，調(diào)整設(shè)置并獲取所需信息，提升駕駛安全和便捷性。

UI Motion Reel-百度Apollo，@ SeanCham

使用手勢(shì)控制技術(shù)，駕駛員和乘客可以通過(guò)手勢(shì)在車內(nèi)控制屏幕顯示和功能操作，例如多屏影音同步、開(kāi)關(guān)車窗等，提高駕駛員的操作便捷性和安全性。

Li L9, Flagship Intelligent Cockpit.

4、環(huán)保與可持續(xù)性動(dòng)效

International Competition for the Xinxiu District Masterplan Con，@ McGregor Coxall

隨著環(huán)保意識(shí)的日益增強(qiáng)，對(duì)于具有環(huán)保和可持續(xù)性理念的動(dòng)效設(shè)計(jì)也將受到更多關(guān)注和青睞。例如通過(guò)動(dòng)效設(shè)計(jì)呈現(xiàn)城市綠色化規(guī)劃的效果，城市綠道、綠色建筑等，向用戶展示城市環(huán)境的改善和生態(tài)環(huán)境的保護(hù)。

@ Ahmad Sulaiman

在車機(jī)界面中，設(shè)計(jì)能源監(jiān)測(cè)動(dòng)效，顯示車輛的能源利用情況，包括電池電量、油耗情況等，提醒駕駛員合理使用能源，節(jié)約能源資源。

5、跨界融合動(dòng)效

未來(lái)的動(dòng)效設(shè)計(jì)也將更加注重跨界融合，設(shè)計(jì)師可以借鑒其他藝術(shù)領(lǐng)域的元素和創(chuàng)意，將不同領(lǐng)域的美學(xué)觀念融入到動(dòng)效設(shè)計(jì)中，創(chuàng)造出新穎而富有創(chuàng)意的動(dòng)效形式。

BTS - NB Numeric - NM1010 Tiago Lemos Signature Model

例如在品牌推廣中，混合媒體新形式，模糊現(xiàn)實(shí)世界和虛擬世界的界限，Nike結(jié)合了實(shí)拍場(chǎng)景視頻、草圖、模型等形式的融合，創(chuàng)造跳出屏幕的動(dòng)態(tài)內(nèi)容。

來(lái)源網(wǎng)絡(luò)

車機(jī)系統(tǒng)中，應(yīng)用全息投影技術(shù)，將導(dǎo)航地圖以立體全息的形式顯示在車內(nèi)，提供更直觀、更生動(dòng)的導(dǎo)航體驗(yàn)；

Waymo cars，Google Design

Waymo汽車收集了大量關(guān)于周圍物體和交通模式的數(shù)據(jù)，反饋乘客看到的是整潔的視覺(jué)圖像和清晰標(biāo)記的行程更新，增強(qiáng)駕駛安全與便捷性。

總之，2024年的動(dòng)效設(shè)計(jì)將繼續(xù)成為各行業(yè)中不可或缺的重要組成部分，呈現(xiàn)出更加多元化、智能化和個(gè)性化的特點(diǎn)。作為設(shè)計(jì)師，我們需要不斷學(xué)習(xí)和探索新的設(shè)計(jì)理念和技術(shù)手段，以創(chuàng)作出更加出色的動(dòng)效作品，為用戶帶來(lái)更豐富、生動(dòng)和愉悅的體驗(yàn)。同時(shí)，我們也需要關(guān)注環(huán)保、可持續(xù)性等社會(huì)問(wèn)題，積極推動(dòng)動(dòng)效設(shè)計(jì)的綠色發(fā)展。

以上視頻、圖片均來(lái)源網(wǎng)絡(luò)，若侵可聯(lián)系修改刪除，歡迎交流探討，謝謝～

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

評(píng)論(0) 瀏覽(577)

252024-3

工作提效！設(shè)計(jì)師必備的項(xiàng)目文件整理指南

資深UI設(shè)計(jì)者

文件的整理和系統(tǒng)命名，不是為了規(guī)范而規(guī)范，而是需要結(jié)合我們的項(xiàng)目情況去指定。

評(píng)論(0) 瀏覽(449)

252024-3

設(shè)計(jì)師如何做到“小優(yōu)秀”

資深UI設(shè)計(jì)者

進(jìn)步、提高往往只在于要勇敢的邁出那一步，不用在乎平凡的眼光。

評(píng)論(0) 瀏覽(452)

252024-3

除了Sora，這8大AI工具值得每個(gè)設(shè)計(jì)師和產(chǎn)品經(jīng)理嘗試！

博博

近日，全球科技圈最火的熱點(diǎn)非Sora莫屬，它是OpenAI發(fā)布的首個(gè)文生視頻模型Sora，其視頻生成能力、效果呈現(xiàn)的成熟度震撼了全世界。有人說(shuō)，這是視頻生成領(lǐng)域的iPhone moment，AGI（通用人工智能）又向前劃了一個(gè)時(shí)代。

除了Sora，這8大AI工具值得每個(gè)設(shè)計(jì)師和產(chǎn)品經(jīng)理嘗試！

Sora的使用非常簡(jiǎn)單，與ChatGPT一樣，只需要輸入合適的prompt（提示詞），它就能跟根據(jù)文本指令創(chuàng)建視頻。

此前也有一些AI生成視頻工具，但大都只能生成10秒以內(nèi)，還“卡成 PPT”，但 Sora 彎道超車，直接將時(shí)長(zhǎng)拉到 60 秒。這個(gè)突破相當(dāng)厲害，畢竟時(shí)間越長(zhǎng)，內(nèi)容越復(fù)雜，想表達(dá)準(zhǔn)確把控好節(jié)奏難上加難。

Sora生成的視頻畫面截圖 | 東京街頭的時(shí)尚女性

Sora生成的視頻畫面截圖 | 白雪皚皚草地上的猛犸象

更厲害的是，根據(jù)Sora技術(shù)報(bào)告的介紹，Sora不僅可以理解用戶在提示中所要求的內(nèi)容，還能理解這些內(nèi)容在物理世界中的存在方式。因此，它生成的視頻不僅逼真，還包含精細(xì)復(fù)雜的場(chǎng)景、生動(dòng)的角色表情以及復(fù)雜的鏡頭運(yùn)動(dòng)。

Sora生成的視頻截取 | 穿過(guò)郊區(qū)的火車車窗上的倒影

不少人高呼影視行業(yè)變天了，明星即將失業(yè)，有網(wǎng)友甚至把美國(guó)電影工業(yè)的象征Hollywood（好萊塢）改成了這樣：

其實(shí)，不止影視行業(yè)，包括教育、營(yíng)銷、互聯(lián)網(wǎng)甚至所有行業(yè)都會(huì)或多或少受到影響。

作為在互聯(lián)網(wǎng)浸潤(rùn)多年的“老油條”來(lái)說(shuō)，筆者最近一直在思考，Sora等AI工具對(duì)我們究竟是機(jī)會(huì)還是挑戰(zhàn)？個(gè)人認(rèn)為，機(jī)會(huì)大于挑戰(zhàn)。

比如，對(duì)產(chǎn)品經(jīng)理和UX設(shè)計(jì)師來(lái)說(shuō)，可以考慮怎么把Sora的能力用到自己的產(chǎn)品上去：一款社區(qū)產(chǎn)品，可以通過(guò)Sora快速輸出大量視頻內(nèi)容；

一款教育類產(chǎn)品，可以通過(guò)Sora生成定制化的教學(xué)視頻；

一款新聞APP或者視頻網(wǎng)站，可以利用Sora進(jìn)行個(gè)性化推薦；

……

不過(guò)這一切的前提是，你必須掌握AI。

除了上述提到的AI生成視頻工具Sora，筆者還總結(jié)了很多優(yōu)秀的AI工具，這些工具能大大幫助我們提升工作效率，生成創(chuàng)意靈感，一起來(lái)看看吧~

1、小摹AI

小摹AI是一款集成了人工智能技術(shù)的產(chǎn)品設(shè)計(jì)工具，能夠根據(jù)文本指令輕松生成可編輯的原型圖，對(duì)產(chǎn)品經(jīng)理來(lái)說(shuō)可謂解放了生產(chǎn)力！

官網(wǎng)：

https://www.mockplus.cn/ai

主要功能及亮點(diǎn)：

目前有智能原型、智能文本、智能圖片、智能翻譯和智能表格五大功能，能有效地提升設(shè)計(jì)效率，沒(méi)有設(shè)計(jì)經(jīng)驗(yàn)也能輕松上手哦。

1）智能原型：根據(jù)用戶的描述，智能生成一張?jiān)驮O(shè)計(jì)頁(yè)面。

2）智能文本：根據(jù)用戶的描述，智能生成一段文本內(nèi)容，對(duì)寫產(chǎn)品需求文檔很有幫助。

3）智能翻譯：有“畫板翻譯”和“輸入內(nèi)容”兩項(xiàng)子功能，可以輕松地實(shí)現(xiàn)整頁(yè)內(nèi)容的翻譯，也可以輸入內(nèi)容進(jìn)行翻譯。

價(jià)格：

現(xiàn)階段可免費(fèi)使用

推薦理由：

小摹AI界面簡(jiǎn)潔，上手非常容易，它最大的亮點(diǎn)是利用AI優(yōu)化設(shè)計(jì)流程，快速實(shí)現(xiàn)從概念到原型的轉(zhuǎn)變，大幅度提升了產(chǎn)品經(jīng)理和設(shè)計(jì)師的工作效率！

推薦評(píng)級(jí)：

?????

2、Galileo AI

Galileo AI也是一個(gè)AI設(shè)計(jì)工具，它能根據(jù)用戶的輸入智能創(chuàng)建UI設(shè)計(jì)，生成的界面清晰，間距、字體大小、圖片使用等方面都不錯(cuò)。另外，它還有個(gè)非常實(shí)用的功能，你可以將生成的設(shè)計(jì)導(dǎo)出到你的 Figma 中繼續(xù)編輯~

官網(wǎng)：https://www.usegalileo.ai/explore

主要功能及亮點(diǎn)：

1）即時(shí)設(shè)計(jì)生成：根據(jù)自然語(yǔ)言提示迅速生成復(fù)雜的UI設(shè)計(jì)。

2）AI生成的插圖和圖像：為設(shè)計(jì)添加AI生成的藝術(shù)元素，增強(qiáng)視覺(jué)吸引力。

3）完整的產(chǎn)品文案自動(dòng)化：利用大型語(yǔ)言模型自動(dòng)生成產(chǎn)品文案，節(jié)省設(shè)計(jì)師的時(shí)間和精力。

價(jià)格：

現(xiàn)階段免費(fèi)

推薦理由：

如果你想獲得一些靈感，想看到一些新鮮的設(shè)計(jì)，真的可以試試這個(gè)工具。

推薦評(píng)級(jí)：

????

3、Uizard

Uizard是一個(gè)基于Web的設(shè)計(jì)工具，用戶可通過(guò)它的AI技術(shù)快速創(chuàng)建網(wǎng)站界面，還能快速將手繪草圖轉(zhuǎn)換為交互式原型，提高設(shè)計(jì)效率和創(chuàng)新能力。

官網(wǎng)：https://uizard.io/

主要功能及亮點(diǎn)：

1）手繪轉(zhuǎn)數(shù)字原型：將紙上的草圖轉(zhuǎn)換為數(shù)字界面原型。

2）用戶界面自動(dòng)化設(shè)計(jì)：基于用戶輸入自動(dòng)生成設(shè)計(jì)元素和布局。

3）交互式原型創(chuàng)建：快速構(gòu)建可交互的原型，用于用戶測(cè)試和演示。

價(jià)格：

提供免費(fèi)試用版本，付費(fèi)版12美元/月起。

推薦理由：

Uizard是一款設(shè)計(jì)神器，它的AI功能，豐富的可復(fù)用模板和設(shè)計(jì)元素，能幫你節(jié)省大量時(shí)間。

推薦評(píng)級(jí)：

?????

4、Whimsical

Whimsical是一款多功能的在線設(shè)計(jì)工具，它可以幫助用戶完成思維導(dǎo)圖、流程圖、線框圖的制作，成品邏輯清晰，層次分明，還能幫助設(shè)計(jì)師及時(shí)標(biāo)記靈感，是一款萬(wàn)能的專業(yè)輔助設(shè)計(jì)工具。

官網(wǎng)：https://whimsical.com/home

主要功能及亮點(diǎn)：

1）上下文工具欄、可直接用于展示的輸出、無(wú)限畫布以及實(shí)時(shí)更新；

2）龐大的符號(hào)庫(kù)工具幫助用戶更好的完成設(shè)計(jì)操作；

3）Whimsical的AI功能可以快速生成圖表，用以直觀展示概念、思維導(dǎo)圖和網(wǎng)頁(yè)等內(nèi)容。

價(jià)格：

提供免費(fèi)版本，付費(fèi)版10美元/月起。

推薦理由：

Whimsical是一款全能繪制工具，其中還有非常龐大的符號(hào)庫(kù)工具，能幫助你更好更快地的完成設(shè)計(jì)。

推薦評(píng)級(jí)：

????

5、Khroma AI

Khroma是一款利用人工智能技術(shù)來(lái)生成配色方案的工具，它能根據(jù)你的喜好和需求，提供高效、直觀的配色解決方案，并創(chuàng)建無(wú)限的調(diào)色板讓你盡情探索。

官網(wǎng)：https://www.khroma.co/

主要功能及亮點(diǎn)：

1）AI生成配色方案：根據(jù)用戶偏好和流行趨勢(shì)自動(dòng)生成配色方案。

2）自定義配色選項(xiàng)：允許用戶根據(jù)自己的需求調(diào)整和優(yōu)化配色。

3）保存和分享功能：用戶可以保存自己的配色方案，并與他人分享。

價(jià)格：

提供免費(fèi)版，進(jìn)階功能需付費(fèi)訂閱

推薦理由：

Khroma的深度學(xué)習(xí)算法很厲害，它能夠?qū)W習(xí)用戶的配色偏好，并根據(jù)流行趨勢(shì)提供創(chuàng)新的配色方案。

推薦評(píng)級(jí)：????

6、AI Colors

AI Colors是一個(gè)人工智能色彩調(diào)色板生成器，它可以根據(jù)你的描述生成貼心的配色方案，同時(shí)你也可以參考提供的配色案例，每一種配色方案都有對(duì)應(yīng)的效果展示，讓你能夠快速找到想要自己的配色方案。

官網(wǎng)：https://aicolors.co/

主要功能及亮點(diǎn)：

1）提供四種配圖案例，分別是移動(dòng)應(yīng)用、儀表盤、落地頁(yè)、作品集；

2）單擊復(fù)制顏色或者直接導(dǎo)出配色方案，不喜歡的顏色還可以手動(dòng)修改。

推薦理由：

通過(guò)AI Colors，你可以輕松生成調(diào)色板，并將其應(yīng)用于產(chǎn)品界面，查看它們的配色效果，非常適合希望輕松掌握調(diào)色板的新手。

推薦評(píng)級(jí)：

???

7、Fontjoy

Fontjoy是一個(gè)幫助設(shè)計(jì)師選擇最佳字體組合的工具，它可以讓用戶在一次點(diǎn)擊中生成字體組合，還可以混合和匹配不同的字體，達(dá)到完美組合效果。

官網(wǎng)：https://fontjoy.com/

主要功能及亮點(diǎn)：

1）幫助用戶調(diào)整字體外觀，還有字體的類型、大小、顏色等

2）豐富的字體資源：包括中文字體、英文字體、日文字體等；

推薦理由：

只需點(diǎn)擊生成，就能看到不同的字體，讓字體搭配毫不費(fèi)力。

推薦評(píng)級(jí)：

???

8、Huemint

Huemint是一個(gè)內(nèi)置AI色彩模型的在線配色網(wǎng)站，它通過(guò)AI技術(shù)幫助用戶快速生成吸引人的配色方案，你還可通過(guò)調(diào)節(jié)滑塊控制配色方案的對(duì)比度，適用于設(shè)計(jì)師和創(chuàng)意專業(yè)人士。

官網(wǎng)：https://huemint.com/brand-intersection/

主要功能及亮點(diǎn)：

1）AI配色方案生成：根據(jù)用戶輸入和偏好，AI算法生成配色方案。

2）控制配色對(duì)比度：用戶可以通過(guò)調(diào)節(jié)滑塊來(lái)控制配色方案的對(duì)比度。

3）多樣化的配色選項(xiàng)：支持生成等階色、漸變色和2到11色的配色方案。

價(jià)格：

在線免費(fèi)使用

推薦理由：

Huemint的AI色彩模型能夠根據(jù)最新的設(shè)計(jì)趨勢(shì)和用戶偏好提供創(chuàng)新的配色方案，幫助設(shè)計(jì)師快速找到靈感，輕松提高設(shè)計(jì)效率。

推薦評(píng)級(jí)：????

以上就是筆者的“掏心”分享了，希望讀到這里的小伙伴能真正嘗試用一下AI。畢竟，現(xiàn)在我們必將和AI一起成長(zhǎng)同行，只有了解AI掌握AI才能不落后于時(shí)代，也讓我們一起期待人工智能下一個(gè)“Sora”吧！

作者：摹客設(shè)計(jì)云
來(lái)源：站酷

評(píng)論(0) 瀏覽(465)

252024-3

標(biāo)簽設(shè)計(jì)的超全分析總結(jié)

博博

在日常生活中，我們經(jīng)常會(huì)給他人貼上標(biāo)簽。這些標(biāo)簽可能是基于個(gè)人特征、行為或經(jīng)歷而形成的，它們可以幫助我們更好地理解和分類他人。例如，當(dāng)我們初次見(jiàn)到一個(gè)人時(shí)，我們可能會(huì)根據(jù)他們的外貌、穿著和言談舉止來(lái)給他們貼上一個(gè)“自信”、“開(kāi)朗”或“膽小”、“內(nèi)向”的標(biāo)簽。我們不可避免地會(huì)貼標(biāo)簽或被貼標(biāo)簽，因?yàn)檫@是一種快速且低門檻的有效記憶方式。

設(shè)計(jì)干貨分享｜標(biāo)簽設(shè)計(jì)的超全分析總結(jié)

關(guān)注不同平臺(tái)的標(biāo)簽設(shè)計(jì)，發(fā)現(xiàn)平時(shí)不太注意的小標(biāo)簽承擔(dān)了許多重要的作用。在電商類設(shè)計(jì)中，標(biāo)簽可以強(qiáng)化商品折扣、優(yōu)惠信息、服務(wù)特色等吸引用戶。對(duì)于偏向?yàn)g覽和文章發(fā)布類產(chǎn)品，標(biāo)簽設(shè)計(jì)旨在方便讀者更好地理解文章內(nèi)容，平臺(tái)還可以根據(jù)標(biāo)簽聚合同類文章，建立目錄索引，引導(dǎo)讀者快速查看標(biāo)簽文章。

看似簡(jiǎn)單的標(biāo)簽卻有這么強(qiáng)的作用，以下將根據(jù)標(biāo)簽的定義、屬性特征及使用場(chǎng)景作出一些思考和探索，幫助大家對(duì)標(biāo)簽有一個(gè)更清晰的認(rèn)識(shí)。

一、標(biāo)簽的定義

二、標(biāo)簽的組成

三、標(biāo)簽設(shè)計(jì)的作用

四、標(biāo)簽設(shè)計(jì)要點(diǎn)

百度百科對(duì)網(wǎng)絡(luò)標(biāo)簽(Tag)定義是：

一種互聯(lián)網(wǎng)內(nèi)容組織方式，是相關(guān)性很強(qiáng)的關(guān)鍵字，它幫助人們輕松的描述和分類內(nèi)容，以便于檢索和分享，Tag已經(jīng)成為web 2.0的重要元素。

Ant Design 對(duì)標(biāo)簽給出的定義是：用來(lái)進(jìn)行標(biāo)記和分類。使用場(chǎng)景：1.用于標(biāo)記事物的屬性和維度；2.進(jìn)行分類。

TDesign對(duì)標(biāo)簽給出的定義是:用于表明主體的類目，屬性或狀態(tài)。

所以標(biāo)簽是什么?

標(biāo)簽是結(jié)合產(chǎn)品內(nèi)容及屬性特征經(jīng)提煉后產(chǎn)出的關(guān)鍵詞，是信息的一種集合方式，便于用戶查找、定位以及系統(tǒng)識(shí)別。

標(biāo)簽可以幫助傳達(dá)信息、建立可預(yù)知操作、產(chǎn)品分類和營(yíng)銷引流、優(yōu)化搜索等。通過(guò)使用標(biāo)簽，方便用戶快速識(shí)別，提升信息轉(zhuǎn)化的效率，在UI設(shè)計(jì)中，標(biāo)簽是最常用的設(shè)計(jì)組件之一。

標(biāo)簽由容器、文本、圖標(biāo)等元素組成。

三者都是可選的，它們可以隨機(jī)組合，常見(jiàn)的是這5種組合：文本、圖標(biāo)、容器+文本、容器+圖標(biāo)、容器+文本+圖標(biāo)。

文本標(biāo)簽：

更直觀地表達(dá)含義，主要用于抽象的、或分類較多的標(biāo)簽，這種類型標(biāo)簽通常也以#+文字的形式呈現(xiàn)為超鏈接，主要出現(xiàn)在文字內(nèi)容較多的列表頁(yè)面、詳情頁(yè)的開(kāi)頭或結(jié)尾。它們也可以被理解為常說(shuō)的話題標(biāo)簽。通過(guò)這些標(biāo)簽，用戶可以快速了解到內(nèi)容的主題和核心，并能夠方便地鏈接到與該內(nèi)容相關(guān)聯(lián)的信息。

圖標(biāo)標(biāo)簽：

更富有設(shè)計(jì)感且吸引眼球，但這種圖標(biāo)必須是用戶熟識(shí)的、一看就明白含義的；

容器+文本標(biāo)簽：

主要為突出特色、賣點(diǎn)來(lái)進(jìn)行促銷，類型及樣式比較多元化，且單個(gè)產(chǎn)品可能多達(dá) 4~5 個(gè)標(biāo)簽，以此來(lái)吸引用戶購(gòu)買。

圖標(biāo)+文本標(biāo)簽：

面積會(huì)較大，視覺(jué)沖擊很強(qiáng)，有的出于交互功能的需要，有的則是用在節(jié)日和特別專題。

容器+文本+圖標(biāo)標(biāo)簽：

而圖標(biāo)則是為了進(jìn)一步強(qiáng)調(diào)或補(bǔ)充標(biāo)簽文本的信息，增強(qiáng)用戶的視覺(jué)感知。

01 標(biāo)簽的顏色

標(biāo)簽的顏色選擇和搭配對(duì)于信息傳遞和品牌塑造具有重要影響。不同的顏色和用色的面積/重量會(huì)給用戶帶來(lái)不同的感知，比如，綠色代表清新、免費(fèi)，黃色棕色代表尊貴VIP，紅色象征火爆熱門。同時(shí)也會(huì)對(duì)品牌形象產(chǎn)生影響。

在白色背景下，我們可以自由地選擇任何顏色作為標(biāo)簽的主體色、輔助色和點(diǎn)綴色。當(dāng)面對(duì)同一組信息多個(gè)標(biāo)簽時(shí)，我們可以通過(guò)混合不同顏色來(lái)更好地區(qū)分它們。例如，我們可以將主要標(biāo)簽設(shè)置為紅色，次要標(biāo)簽設(shè)置為藍(lán)色，然后將它們組合在一起以形成一個(gè)更豐富的視覺(jué)層次結(jié)構(gòu)。

在圖片背景下，我們的選擇受到了很大的限制。由于圖片本身已經(jīng)具有了豐富的顏色和紋理，因此我們需要謹(jǐn)慎選擇標(biāo)簽的顏色以避免與圖片產(chǎn)生沖突。通常情況下，我們會(huì)使用白色/黑色+不透明度或主體色作為標(biāo)簽容器，并將文字設(shè)置為黑色或反白處理以確保其可讀性。

總之，無(wú)論是白色背景還是圖片背景都有其獨(dú)特的優(yōu)勢(shì)和適用場(chǎng)景。在選擇背景時(shí)應(yīng)根據(jù)具體情況進(jìn)行權(quán)衡并做出最佳決策。

02 標(biāo)簽形狀

標(biāo)簽的形狀設(shè)計(jì)在信息視覺(jué)傳達(dá)中扮演著重要的角色，不同的形狀代表著不同的信息特性和情感色彩。常用的標(biāo)簽形狀有圓形、矩形（半圓角、全圓角）、氣泡或異形等。

形狀是標(biāo)簽信息傳遞中的視覺(jué)輪廓表現(xiàn)，它作為承載信息的容器，對(duì)文字元素的包容性極強(qiáng)，能夠使標(biāo)簽信息更加聚焦，讓用戶在獲取內(nèi)容和進(jìn)行信息歸類時(shí)更加專注。

在UI設(shè)計(jì)中，標(biāo)簽的特征跟生活中的標(biāo)簽也很相似，用以標(biāo)注內(nèi)容分類或內(nèi)容要點(diǎn)，方便用戶快速定位自己需要的內(nèi)容目標(biāo)。標(biāo)簽還有滿足用戶的隱形需求的作用，當(dāng)用戶在猶豫是否要進(jìn)行下一步操作的時(shí)候，標(biāo)簽在一定程度上加強(qiáng)了用戶的需求欲望，促進(jìn)下一步操作。那標(biāo)簽到底有什么作用？

傳達(dá)信息，突出產(chǎn)品特色

標(biāo)簽的基本功能是分類和突出內(nèi)容要點(diǎn)，以方便用戶快速定位他們需要的信息或功能。標(biāo)簽常用于傳達(dá)產(chǎn)品基本信息、折扣信息、優(yōu)惠信息、產(chǎn)品賣點(diǎn)等。對(duì)產(chǎn)品而言，它能優(yōu)化信息層級(jí)，又能簡(jiǎn)單明確地傳達(dá)產(chǎn)品特點(diǎn)；對(duì)用戶而言，可以第一時(shí)間獲取關(guān)鍵信息，降低用戶閱讀門檻，所以標(biāo)簽的首要任務(wù)就是為滿足用戶的隱性需求而傳達(dá)特色信息。

例如，美團(tuán)天天神劵、折扣信息等，淘寶里的直降低多少錢、同款低價(jià)，讓用戶潛意識(shí)地認(rèn)為能夠降低經(jīng)濟(jì)成本。

引導(dǎo)用戶操作，建立用戶操作的預(yù)期

標(biāo)簽還可以用于建立用戶操作的預(yù)期，讓用戶在使用產(chǎn)品之前就知道點(diǎn)擊后可能發(fā)生的效果，從而增加用戶點(diǎn)擊的興趣和滿意度。

例如：音頻標(biāo)簽、視頻標(biāo)簽“獨(dú)播”、“vip”等，讓用戶在點(diǎn)擊前預(yù)知點(diǎn)擊后的效果。標(biāo)簽還可以用作行為引導(dǎo)，告知某操作的結(jié)果，如淘寶里“常逛的店”，讓用戶提前知悉操作之后得到的結(jié)果，加強(qiáng)點(diǎn)擊的動(dòng)機(jī)。

03 傳遞品牌與可靠性

品牌性質(zhì)的標(biāo)簽，讓消費(fèi)者對(duì)產(chǎn)品產(chǎn)生信任感。同時(shí)，標(biāo)簽也是品牌與消費(fèi)者之間的溝通橋梁，通過(guò)簡(jiǎn)潔明了的文字和視覺(jué)元素，傳達(dá)產(chǎn)品的特點(diǎn)和優(yōu)勢(shì)。

例如如：“百億補(bǔ)貼”、“官方店”、“品牌”。許多用戶在瀏覽列表時(shí)，會(huì)通過(guò)標(biāo)簽快速判斷是否有必要點(diǎn)擊查看詳情。此外，標(biāo)簽內(nèi)展示強(qiáng)公信力的信息（榜單排名/評(píng)分等），可以加強(qiáng)內(nèi)容可靠性及優(yōu)質(zhì)性。

方便分類

標(biāo)簽廣泛用于用戶區(qū)分產(chǎn)品內(nèi)容，進(jìn)行分類，進(jìn)而確定關(guān)鍵詞，優(yōu)化搜索。避免用戶因浪費(fèi)大量時(shí)間瀏覽了非需求內(nèi)的信息而失去耐心。

例如：京東水果蔬菜“時(shí)令熱賣”標(biāo)簽和淘寶里的評(píng)價(jià)標(biāo)簽，用戶可選擇自己感興趣的標(biāo)簽去查找自己想要的信息，提高瀏覽效率，節(jié)約時(shí)間成本。

營(yíng)銷引流

為用戶打上不同的標(biāo)簽，用于區(qū)分不同用戶群體，分類精準(zhǔn)定向推送產(chǎn)品。標(biāo)簽既能突出產(chǎn)品特色信息、又不會(huì)占用太多空間，所以通過(guò)對(duì)用戶建立好感、吸引其注意力進(jìn)行引流也是一個(gè)很不錯(cuò)的方式。

如：小紅書文末的文字標(biāo)簽、淘寶搜索的“探索發(fā)現(xiàn)”

從眾心理引導(dǎo)轉(zhuǎn)化

在營(yíng)銷中，利用從眾心理可以引導(dǎo)用戶做出購(gòu)買決策，這類信息廣泛應(yīng)用在標(biāo)簽設(shè)計(jì)中，積極引導(dǎo)用戶點(diǎn)擊和轉(zhuǎn)化。

例如，可以展示其他用戶的購(gòu)買記錄或評(píng)價(jià)，讓用戶看到其他人對(duì)該產(chǎn)品的認(rèn)可和好評(píng)，從而增加他們的信任感和購(gòu)買欲望。像淘寶里的“多少人回購(gòu)”，銀行理財(cái)里的“多少人次購(gòu)買”等等，都會(huì)對(duì)當(dāng)前用戶的心理產(chǎn)生極大影響，很多時(shí)候，用戶的想法和行為受到周圍人的影響程度，往往超過(guò)理性的認(rèn)知。當(dāng)用戶無(wú)法決策時(shí)，從眾心理會(huì)成為影響用戶決策的重要因素。

06 告知狀態(tài)

當(dāng)內(nèi)容狀態(tài)變化且產(chǎn)品希望提示用戶知悉時(shí)，標(biāo)簽可以作為告知當(dāng)前狀態(tài)的提示，如上新的“New”、“直播中”等。

此外，告知當(dāng)前狀態(tài)還有營(yíng)造稀缺性的作用。如“限購(gòu)多少件”、“即將售罄”，促使用快速?zèng)Q策。

07 營(yíng)造氛圍

標(biāo)簽不僅僅是產(chǎn)品信息的載體，更是營(yíng)造氛圍的重要元素。通過(guò)選擇適合的色彩、字體和圖案，標(biāo)簽可以傳達(dá)出不同的情感和氛圍，吸引消費(fèi)者的注意力，激發(fā)購(gòu)買欲望。

例如：“38換新節(jié)”、“上新啦”，有的產(chǎn)品確實(shí)是基于熱度展示的標(biāo)簽，也有的產(chǎn)品只是為了吸引用戶注意力而展示。

在UI設(shè)計(jì)中，標(biāo)簽是一個(gè)不可或缺的元素，那如何設(shè)計(jì)才能達(dá)成業(yè)務(wù)目標(biāo)？

01 簡(jiǎn)潔明了

標(biāo)簽設(shè)計(jì)的文案（字段）長(zhǎng)短盡量簡(jiǎn)短清晰，具有一定的識(shí)別性、易通性，避免使用復(fù)雜的詞匯和句子。用戶在瀏覽界面時(shí)，應(yīng)該能夠快速理解標(biāo)簽的含義。這里所說(shuō)的精煉并非一味地求短，雖然“短”是標(biāo)簽必備的因素，但有時(shí)候過(guò)于簡(jiǎn)短的標(biāo)簽根本沒(méi)辦法給用戶傳達(dá)足夠的信息，甚至?xí)?dǎo)致用戶更加疑惑，這也失去了添加標(biāo)簽的初衷。

02 一致性與差異性

在不同的頁(yè)面和場(chǎng)景中，標(biāo)簽的設(shè)計(jì)應(yīng)該保持一致的風(fēng)格和格式。這包括顏色、字體、大小、布局和位置等方面的一致性。這樣做有助于用戶建立認(rèn)知模型，提高他們的使用效率。然而，盡管標(biāo)簽設(shè)計(jì)需要保持一致性，但也需要一定的差異性。這種差異性是針對(duì)不同類型和視覺(jué)權(quán)重的標(biāo)簽，通過(guò)不同的視覺(jué)樣式和色彩來(lái)體現(xiàn)信息的層級(jí)關(guān)系。因此，雖然表面上看起來(lái)存在沖突，但實(shí)際上并不矛盾。

03適當(dāng)?shù)念伾?/span>

標(biāo)簽的顏色應(yīng)該與背景顏色形成對(duì)比，以便用戶能夠清楚地看到。同時(shí)，顏色的選擇也應(yīng)該考慮到品牌的形象和用戶的視覺(jué)感受。

04 適當(dāng)?shù)奈恢?/span>

標(biāo)簽的位置應(yīng)該方便用戶操作。例如，重要的標(biāo)簽應(yīng)該放在顯眼的位置，而不太重要的標(biāo)簽信息可以放在次要的位置。

結(jié)語(yǔ)

UI 設(shè)計(jì)中的標(biāo)簽跟我們?nèi)粘Ｉ钪械臉?biāo)簽很相似，它不僅能對(duì)產(chǎn)品作分類、特色標(biāo)記，還能在用戶猶豫不決的時(shí)候起到一定的推動(dòng)作用，是平臺(tái)內(nèi)部信息導(dǎo)流和滿足用戶潛在需求過(guò)程中至關(guān)重要的一環(huán)。根據(jù)產(chǎn)品的目的和需求，在不同時(shí)間和場(chǎng)景下使用合適的標(biāo)簽是至關(guān)重要的。通過(guò)簡(jiǎn)單精煉的表達(dá)方式，標(biāo)簽?zāi)軌蛟谟邢薜目臻g內(nèi)提供更多的信息維度，吸引用戶的注意并激發(fā)他們的好奇心、提升信息轉(zhuǎn)化的效率。

作者：滿滿滴滴
來(lái)源：站酷

評(píng)論(0) 瀏覽(548)

252024-3

教你一文讀懂暗色模式

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

暗色模式（Dark Mode）的興起是一個(gè)逐漸發(fā)展的過(guò)程，它涉及到技術(shù)進(jìn)步、用戶體驗(yàn)優(yōu)化以及設(shè)計(jì)趨勢(shì)的變化。

隨著iOS 13在2019年的發(fā)布，暗色模式開(kāi)始成為用戶關(guān)注的焦點(diǎn)；在用戶體驗(yàn)方面，設(shè)計(jì)者們考慮到了環(huán)境光線與屏幕亮度的匹配問(wèn)題，暗色模式可以有效減少視覺(jué)疲勞；在實(shí)際使用中，用戶發(fā)現(xiàn)暗色模式在光線較暗的環(huán)境中更為舒適，這也促使了暗色模式的普及和發(fā)展。

評(píng)論(0) 瀏覽(999)

« 1 ... 70 71 72 73 74 75 76 ... 876 »

日歷

鏈接

個(gè)人資料

藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.wnxcall.com

六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

首頁(yè)

UI交互動(dòng)畫／UI交互動(dòng)效／UI設(shè)計(jì)／UI界面設(shè)計(jì)

詳解國(guó)內(nèi)外十大設(shè)計(jì)系統(tǒng)

帶你了解全案策劃設(shè)計(jì)流程

AI實(shí)操：用WHEE輔助設(shè)計(jì)app啟動(dòng)頁(yè)

2024年動(dòng)效設(shè)計(jì)前瞻

工作提效！設(shè)計(jì)師必備的項(xiàng)目文件整理指南

設(shè)計(jì)師如何做到“小優(yōu)秀”

除了Sora，這8大AI工具值得每個(gè)設(shè)計(jì)師和產(chǎn)品經(jīng)理嘗試！

標(biāo)簽設(shè)計(jì)的超全分析總結(jié)

教你一文讀懂暗色模式

分類

日歷

鏈接

個(gè)人資料

存檔