首頁

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

ui設(shè)計分享達人

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

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

ui設(shè)計分享達人

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

AI實操:用WHEE輔助設(shè)計app啟動頁

前端達人

今天我們繼續(xù)用WHEE,帶你玩轉(zhuǎn)AI實操,設(shè)計春天出行啟動頁運營海報!
這次的主題是春天出行!
(文末已附上同款配方鏈接)
 
Part 01
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
第一,先找一下靈感參考圖
第二,從三個方向來分析
  1.  
    版式
  2.  
    元素
  3.  
    色調(diào)
 
收集靈感圖時,有4點要注意
  •  
    風(fēng)格:整體風(fēng)格是否符合我們的主題和目標(biāo)用戶群?
  •  
    版式:版式是否清晰、易讀?
  •  
    元素:運用的元素是否與主題相關(guān)?
  •  
    色彩:色彩搭配是否和諧、美觀?
 
我們先來看一下“春天”
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
-版式
從版式上面來看一下他們共同的特征, 基本上都是一個上下結(jié)構(gòu)的版式特征
這種結(jié)構(gòu)簡單明了,合適各種類型的內(nèi)容
上方主標(biāo)題,下方logo落款,這種排版方式我感覺是最穩(wěn)的一種結(jié)構(gòu)
即使是新人也能很容易出排版效果
標(biāo)題的排版方式呢,有橫向排版和豎向排版
它除了使用常規(guī)的黑體字
還有手寫體,我感覺手寫體更加符合主題
-元素
從元素結(jié)構(gòu)來看
天空,河流,山川,陽光、花草等等
這些元素能夠讓人聯(lián)想到春天的清新、活力和愉悅,增加了海報的吸引力和代表性
-色調(diào)
色調(diào)呢基本也是以藍色,白色,綠色為主旋律
也就是陽光、白云、綠色植物
 
接著來看看“出行”
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
-元素
元素呢也是在上面“春天”的基礎(chǔ)上面
多出車,人,露營等周邊關(guān)于戶外的元素
這些元素能夠更加生動地展現(xiàn)春季戶外活動的場景和氛圍
-色調(diào)
色調(diào)也基本藍、白、綠
這個主題我覺得還是要有生機感、有活力一點的色調(diào)才對
 
總結(jié)設(shè)計方向和關(guān)健詞提取
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
版式
整體的版式規(guī)劃采用上下的結(jié)構(gòu)
主標(biāo)題放在上方,橫排版,用手寫黑體
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
關(guān)鍵詞
核心詞:草地,拖車、車輛、山川
效果詞:可愛的卡通設(shè)計、夢幻的視覺效果、鮮艷的色彩
 
Part 02
接下我們看一下WHEE的參數(shù)
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
提示詞、模型這里維持默認(rèn)就好
當(dāng)然也還可以使用它的智能聯(lián)想功能
看看有什么新靈感,亦或者是反向詞等等
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
風(fēng)格模型
在模型商店里面,這里我用了citypop的風(fēng)格模型
當(dāng)然這里面還有很多的模型,比如新中式風(fēng)格,工筆畫盲盒等等
所以在關(guān)鍵詞里就不需要在寫風(fēng)格的關(guān)鍵詞了
直接選擇相對應(yīng)的風(fēng)格模型會更加高效率
出來的畫面結(jié)果也更加接近目標(biāo)視覺
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
參數(shù)這里保持默認(rèn)就好
我們第一次跑圖主要還是測試關(guān)鍵詞
后續(xù)看情況在進行調(diào)整
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
這是我一共刷了兩次圖
從呈現(xiàn)的結(jié)果上面來看
第一排比較符合想要的感覺
畫面上方也好做文字的排版
添加關(guān)鍵詞“露營、帳篷”
添加關(guān)鍵詞“露營、帳篷”
 
 
氛圍的感覺還是少了一點,因為少了露營和帳篷的元素
我們可以在右側(cè)這里,選“重新編輯”按鈕
這樣我們就可以延續(xù)之前的設(shè)置繼續(xù)編輯
然后我們把露營和帳篷關(guān)鍵詞加上,其它不變
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
從結(jié)果來看第一張有帳篷的氛圍更好
第三張和第四張有點脫離了
但是第三張?zhí)幚硪幌履脕碜鰪棿案杏X效果也會非常好
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
然后我們在右側(cè)這個放大一下像素
這樣就可以得到一個更高清的分辨率
 
Part 03
接著我們來做一下主標(biāo)題的字體設(shè)計
就用手寫黑體
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
我們先找一些毛筆字字形作為筆畫墊字
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
 
用鋼筆工具描出字形(這里先以春字為例)
我們挑選出重要的筆畫特征就好
其實是不需要跟原來的一樣
這樣會更有靈性
比如這里“春”字,上部首里的三橫
我這里只要第三橫連筆的特征
后面的幾個字也是以此類推
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
描繪完之后呢,我們加一粗一點描邊的大小
同時將端點和邊角都設(shè)為平頭
基本的字體結(jié)構(gòu)完成了
下一步就是細節(jié)的調(diào)整了
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
首先調(diào)整一下字間距
排版的話,我給它是上下錯落
這樣會給人比較輕松的感覺
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
整理細節(jié)的話,就需要注意
筆畫之間的關(guān)系和空間感
例如“春”字上部首的第三橫與“日”中間那一橫
“出”和“行”的連接,以及它們相互之間的關(guān)系
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
完成主標(biāo)題的設(shè)計之后,我們先來對畫面進行二次構(gòu)圖
天空部份我們不需要太多
第一是文案放在上方識別度較低
第二放大主體元素露營車和帳篷后,它也能夠更好的突出主題氛圍
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
按照原先的計劃做上下結(jié)構(gòu)的版式設(shè)計
上面我們放主標(biāo)題文案信息
但是單看著主標(biāo)題設(shè)計還不夠豐富
所以需要在添加一些細節(jié)
在“日”字上方和“出行”下方
我們在用文案做成曲線跟隨字形弧度
同時他們也是相互呼應(yīng)的
描述信息直接放在主標(biāo)題下方
居中對齊的樣式就好
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
 
下面就放輔助的信息
同時也是居中對齊的樣式
這樣上下就有元素關(guān)系的呼應(yīng)
統(tǒng)一的居中對齊的樣式
也會讓文字閱讀效率大大提高
AI實操:用WHEE輔助設(shè)計app啟動頁
 
 
最后在放入一些固定落款的元素就完成啦~
 
Part 04
總結(jié)
1. 設(shè)計方向和關(guān)鍵詞提取
通過收集和分析同類題材,得出設(shè)計方向和關(guān)鍵詞
前期的方向確定是很重要的,有效的方向可以減少后期改稿
2. 視覺風(fēng)格
選擇對應(yīng)的風(fēng)格模型,得到想要的視覺風(fēng)格
WHEE模型庫中有很多風(fēng)格模型,這大大的提升了工作的效率
3. 主標(biāo)題字體設(shè)計
以毛筆字字形作為基礎(chǔ)字形,設(shè)計出主標(biāo)題
毛筆字結(jié)合黑體的感覺非常合適這輕松、放松類型畫面
4. 畫面排版
根據(jù)前期版式分析確定的方向,對畫面進行文字排版
文案與文案之間,標(biāo)題字體設(shè)計
都需要注意它們之間的關(guān)系,以及統(tǒng)一性
 
今天的分享到這兒就結(jié)束啦
我們下篇見咯
 
以下同款配方鏈接
01
 
02
 

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

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

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



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

2024年動效設(shè)計前瞻

前端達人

在數(shù)字化時代,動效設(shè)計已經(jīng)成為吸引用戶眼球、提升用戶體驗不可或缺的一部分,動態(tài)元素的呈現(xiàn)效果,相比純圖片也新增了很多樂趣與驚喜,融入進我們生活中的方方面面。
2023年,我們看到了許多令人眼前一亮的動效設(shè)計形式,例如尼桑Ariya車機交互中,當(dāng)駕駛員啟動車輛時,信息娛樂系統(tǒng)的啟動界面會展示一個動態(tài)的汽車品牌標(biāo)志,伴隨著流暢的過渡效果和音效,營造出一種高科技感和品牌認(rèn)知度。
 
Current Time 0:00
/
Duration Time 0:08
 
Loaded: 0%
 
Progress: 0.00%
Playback Rate
1.00x
從微交互到增強現(xiàn)實,從三維動畫到自然運動,隨著技術(shù)的不斷發(fā)展與用戶的不斷變化,動效設(shè)計也在不斷演進和創(chuàng)新。那未來的動效設(shè)計會是怎樣的形式呢?在本文中我們一起來探討一下吧!
溫馨提示:以下圖片均來源網(wǎng)絡(luò),GIF格式文件需要加載,感謝耐心閱讀~
一、2023年動效設(shè)計表現(xiàn)形式
動效設(shè)計在用戶界面、廣告營銷、游戲開發(fā)等領(lǐng)域都發(fā)揮著重要作用,常見的表現(xiàn)形式有微交互動效、3D動效、數(shù)據(jù)可視化動效以及場景化動效。
1、微交互動效
在2023年,微交互動效成為了設(shè)計師們關(guān)注的焦點。通過細膩的動畫效果,提升用戶體驗,增強用戶對界面的感知,使用戶操作更加直觀和愉悅。
2024年動效設(shè)計前瞻
 
 
在移動應(yīng)用界面中,按鈕、導(dǎo)航欄、滑動卡片等交互元素中常見微交互動效,例如美團小象超市,當(dāng)用戶點擊底部標(biāo)簽欄按鈕時,文字的顏色發(fā)生變化,圖標(biāo)右下角增加主題綠色填充,頁面同步切換,給予用戶直觀的反饋,告知其操作已被識別;
美團-小象超市-手機錄屏
美團-小象超市-手機錄屏
 
車機界面中,導(dǎo)航欄通常用于切換不同的功能頁面或查看系統(tǒng)狀態(tài)。例如問界駕駛模式調(diào)節(jié),用戶通過手勢操作導(dǎo)航欄顯示,按鈕高亮效果,駕駛模式以微交互動效呈現(xiàn)預(yù)覽,以使界面切換更加流暢、直觀,同時幫助駕駛員更輕松地操作界面,提升駕駛安全性和用戶體驗。
問界駕駛模式,來源網(wǎng)絡(luò)
問界駕駛模式,來源網(wǎng)絡(luò)
 
2、3D動效
三維技術(shù)制作的動畫效果,通常具有立體感和逼真感,能夠在屏幕上呈現(xiàn)出立體空間中的物體運動和變化。這種動效在視覺上更加生動、震撼,常用于影視特效、游戲開發(fā)、虛擬現(xiàn)實等領(lǐng)域。
視頻來源網(wǎng)絡(luò)
視頻來源網(wǎng)絡(luò)
 
在電影、電視劇等影視作品中,3D動效常被用于創(chuàng)造出各種特效場景、人物動作或者虛擬世界,增強視覺沖擊力和真實感。例如好萊塢大片《復(fù)仇者聯(lián)盟》中,各種特效場景和超級英雄的動作都采用了大量的3D動效制作,如鋼鐵俠的攻擊動作、蜘蛛俠的飛行、蜘蛛網(wǎng)特效等,讓觀眾身臨其境地感受到了超級英雄的力量與魅力。
2024年動效設(shè)計前瞻
 
 
 
游戲開發(fā)中,3D動效被廣泛應(yīng)用于游戲角色的動作表現(xiàn)、場景建模、特效設(shè)計等方面,提升游戲的沉浸感和視覺體驗。
王者榮耀破曉版
王者榮耀破曉版
 
車機界面中,可以通過3D動效制作出全景效果,使駕駛員在車內(nèi)就能感受到真實的車外景象,增強駕駛體驗和安全感。例如導(dǎo)航系統(tǒng)中,使用3D地圖和路況動效,讓駕駛員更清晰地了解路況和行駛路徑。
Apollo anp3.0-障礙物繞行
Apollo anp3.0-障礙物繞行
 
3、數(shù)據(jù)可視化動效
數(shù)據(jù)可視化動效通過直觀的動畫展示數(shù)據(jù)變化,增強數(shù)據(jù)的可讀性和理解性,使數(shù)據(jù)更生動、直觀地呈現(xiàn)在用戶面前,幫助用戶更好地理解數(shù)據(jù)的含義和趨勢。這種動效在金融、統(tǒng)計等領(lǐng)域尤為常見。
2024年動效設(shè)計前瞻
 
 
在商業(yè)領(lǐng)域中,數(shù)據(jù)可視化動效常被用于制作各種分析報告、銷售演示等,通過動態(tài)圖表、實時數(shù)據(jù)更新等動態(tài)效果,可以讓數(shù)據(jù)報告更具吸引力和說服力。例如企業(yè)的數(shù)據(jù)監(jiān)控面板中,可以使用數(shù)據(jù)可視化動效來實時展示銷售額、用戶訪問量、庫存情況等數(shù)據(jù)指標(biāo)的變化情況。
來自DataV-設(shè)計中心
來自DataV-設(shè)計中心
 
并且通過動態(tài)變化的圖表、實時更新的數(shù)據(jù)指標(biāo)等動效效果,可以讓管理者更及時地了解業(yè)務(wù)狀況,做出相應(yīng)的決策。
來自DataV-設(shè)計中心
來自DataV-設(shè)計中心
 
在科學(xué)研究和教育領(lǐng)域,數(shù)據(jù)可視化動效可以幫助科學(xué)家和教育工作者更好地展示研究成果和教學(xué)內(nèi)容。例如,通過動畫效果展示監(jiān)測數(shù)據(jù)的動態(tài)變化、預(yù)警統(tǒng)計等,可以使抽象的概念更具體化、更易于理解。
來自DataV-設(shè)計中心
來自DataV-設(shè)計中心
 
車機界面中,可以通過數(shù)據(jù)可視化動效來展示車輛的駕駛數(shù)據(jù),如車速、油耗、行駛里程等。例如,通過動態(tài)圖表、實時更新的數(shù)據(jù)指標(biāo)等動效效果,可以讓駕駛員更清晰地了解車輛的行駛情況,幫助其做出更安全、更經(jīng)濟的駕駛決策。
@ Musemind UI/UX Agency,dribbble
@ Musemind UI/UX Agency,dribbble
 
4、場景化動效
場景化動效通過模擬真實世界的場景,讓用戶在虛擬空間中獲得更自然的交互體驗。產(chǎn)品展示或推廣中,場景化動效可以幫助展示產(chǎn)品的特點、功能和優(yōu)勢。例如,在歐萊雅巴黎振興霜互動 AR邀請卡,可以使用場景化動效展示產(chǎn)品的成分含量,以吸引消費者的注意力和興趣。
歐萊雅巴黎振興霜互動 AR 邀請卡,@KIVISENSE
歐萊雅巴黎振興霜互動 AR 邀請卡,@KIVISENSE
 
車機界面中,我們也能看到場景化動效展示駕駛模擬場景,幫助駕駛員更直觀地了解車輛的行駛狀態(tài)和安全提示。例如導(dǎo)航系統(tǒng)中,展示車輛在雨天、雪天或夜間等不同路況下的行駛情況,以提醒駕駛員注意安全駕駛。
HUDWAY Drive,來源網(wǎng)絡(luò)
HUDWAY Drive,來源網(wǎng)絡(luò)
 
二、2024年動效設(shè)計發(fā)展方向
2023年動效設(shè)計不僅追求美觀,更注重與用戶的深度溝通。每一個動效都在講述品牌故事,引導(dǎo)操作,提升易用性和趣味性。站在這個時間節(jié)點上,我們不禁要思考:接下來的一年,動效設(shè)計又將如何進化?它將如何繼續(xù)深化與用戶的互動,提升整體的用戶體驗?zāi)兀?/div>
1、智能化動效
隨著人工智能技術(shù)的不斷發(fā)展,利用人工智能(AI)技術(shù)或者智能算法來設(shè)計和生成動畫效果,以實現(xiàn)動效的智能化、個性化或自適應(yīng)。這類動效可以根據(jù)用戶的行為、喜好或者環(huán)境變化實時調(diào)整,以提供更符合用戶需求和情境的動畫體驗。
音樂專屬推送
音樂專屬推送
 
在移動應(yīng)用、網(wǎng)頁設(shè)計等界面中,可以利用智能化動效來實現(xiàn)智能交互界面,根據(jù)用戶的操作習(xí)慣和需求動態(tài)調(diào)整動畫效果。例如,蘋果音樂專屬推送,根據(jù)我的瀏覽、檢索等行為和歌曲收藏、喜好等,智能調(diào)整動態(tài)加載的內(nèi)容,建立我的專注音樂空間,提升我整體的使用體驗和滿意度。
2024款小鵬G9 超智駕豪華純電SUV,小鵬汽車官網(wǎng)
2024款小鵬G9 超智駕豪華純電SUV,小鵬汽車官網(wǎng)
 
在車機界面中,可以利用智能化動效設(shè)計車載智能助理系統(tǒng),根據(jù)車輛狀態(tài)、道路情況和駕駛員行為實時調(diào)整動畫效果,提供更智能、更安全的駕駛輔助功能。例如,根據(jù)車輛的自動駕駛狀態(tài)實時調(diào)整駕駛模擬場景的動畫效果,幫助駕駛員更好地理解車輛的行駛情況和駕駛狀態(tài)。
2024款小鵬G9 超智駕豪華純電SUV,小鵬汽車官網(wǎng)
2024款小鵬G9 超智駕豪華純電SUV,小鵬汽車官網(wǎng)
 
根據(jù)車內(nèi)溫度和濕度調(diào)整空調(diào)和座椅加熱系統(tǒng),實現(xiàn)智能化的溫度控制和舒適度提升。
2、增強現(xiàn)實(AR)和虛擬現(xiàn)實(VR)的融合
2016年至今,AR和VR技術(shù)的發(fā)展持續(xù)加速,增強現(xiàn)實和虛擬現(xiàn)實融合動效成為熱門話題。越來越多的行業(yè)開始關(guān)注和應(yīng)用AR/VR技術(shù),如教育、醫(yī)療、零售、汽車等領(lǐng)域,這種動效在現(xiàn)實環(huán)境中疊加虛擬物體和效果,使用戶能夠與虛擬內(nèi)容進行互動,創(chuàng)造出更加豐富和沉浸式的體驗。
2024年動效設(shè)計前瞻
 
 
虛擬試衣間
@Amol Arora
@Amol Arora
 
用戶可以利用增強現(xiàn)實和虛擬現(xiàn)實融合技術(shù),在現(xiàn)實環(huán)境中體驗虛擬試衣間。通過智能設(shè)備查看虛擬衣服和配飾,以便在不實際試穿的情況下預(yù)覽其外觀和適合度。
虛擬家居設(shè)計
@ Bell'Arte Living - Estofados
@ Bell'Arte Living - Estofados
 
利用AR/VR融合技術(shù),用戶可以在現(xiàn)實空間中體驗虛擬家居設(shè)計,例如在現(xiàn)實環(huán)境中預(yù)覽家具、裝飾品等虛擬物體的擺放效果,并根據(jù)實際需要進行調(diào)整。
車機領(lǐng)域
@ Shutterstock
@ Shutterstock
 
在車機場景中,汽車制造商可為客戶提供汽車內(nèi)容定制體驗,客戶通過AR應(yīng)用或VR頭盔在虛擬環(huán)境中預(yù)覽汽車內(nèi)部的不同配置和顏色方案,并根據(jù)個人喜好進行定制選擇。
Acura Parts & Service
Acura Parts & Service
 
關(guān)于車輛維修和保養(yǎng)方面,通過AR應(yīng)用,車主可以在現(xiàn)實車輛上查看虛擬的維修部件和保養(yǎng)步驟,以便更容易地進行維護保養(yǎng)。
The future of AR in Cars,Behance
The future of AR in Cars,Behance
 
同時也可應(yīng)用于駕駛輔助和車載娛樂,例如智能導(dǎo)航、虛擬HUD、駕駛模擬和增強現(xiàn)實車載娛樂,進一步提升車機系統(tǒng)的智能化水平和用戶體驗,為駕駛員和乘客帶來更安全、便捷、有趣的車載生活體驗。
3、交互式動效
2024年動效設(shè)計前瞻
 
 
交互式動效在2024年仍會繼續(xù)保持流行,并有望進一步發(fā)展,使用戶能夠更直觀地參與到動效的生成和表現(xiàn)中。例如在車機系統(tǒng)中,通過交互式動效顯示車輛的駕駛狀態(tài)、周圍環(huán)境和導(dǎo)航路線等信息,駕駛員可以通過觸摸屏或語音指令與系統(tǒng)進行交互,調(diào)整設(shè)置并獲取所需信息,提升駕駛安全和便捷性。
UI Motion Reel-百度Apollo,@ SeanCham
UI Motion Reel-百度Apollo,@ SeanCham
 
使用手勢控制技術(shù),駕駛員和乘客可以通過手勢在車內(nèi)控制屏幕顯示和功能操作,例如多屏影音同步、開關(guān)車窗等,提高駕駛員的操作便捷性和安全性。
Li L9, Flagship Intelligent Cockpit.
Li L9, Flagship Intelligent Cockpit.
 
4、環(huán)保與可持續(xù)性動效
International Competition for the Xinxiu District Masterplan Con,@ McGregor Coxall
International Competition for the Xinxiu District Masterplan Con,@ McGregor Coxall
 
 隨著環(huán)保意識的日益增強,對于具有環(huán)保和可持續(xù)性理念的動效設(shè)計也將受到更多關(guān)注和青睞。例如通過動效設(shè)計呈現(xiàn)城市綠色化規(guī)劃的效果,城市綠道、綠色建筑等,向用戶展示城市環(huán)境的改善和生態(tài)環(huán)境的保護。
@ Ahmad Sulaiman
@ Ahmad Sulaiman
 
在車機界面中,設(shè)計能源監(jiān)測動效,顯示車輛的能源利用情況,包括電池電量、油耗情況等,提醒駕駛員合理使用能源,節(jié)約能源資源。
5、跨界融合動效
未來的動效設(shè)計也將更加注重跨界融合,設(shè)計師可以借鑒其他藝術(shù)領(lǐng)域的元素和創(chuàng)意,將不同領(lǐng)域的美學(xué)觀念融入到動效設(shè)計中,創(chuàng)造出新穎而富有創(chuàng)意的動效形式。
BTS - NB Numeric - NM1010 Tiago Lemos Signature Model
BTS - NB Numeric - NM1010 Tiago Lemos Signature Model
 
例如在品牌推廣中,混合媒體新形式,模糊現(xiàn)實世界和虛擬世界的界限,Nike結(jié)合了實拍場景視頻、草圖、模型等形式的融合,創(chuàng)造跳出屏幕的動態(tài)內(nèi)容。
來源網(wǎng)絡(luò)
來源網(wǎng)絡(luò)
 
車機系統(tǒng)中,應(yīng)用全息投影技術(shù),將導(dǎo)航地圖以立體全息的形式顯示在車內(nèi),提供更直觀、更生動的導(dǎo)航體驗;
Waymo cars,Google Design
Waymo cars,Google Design
 
Waymo汽車收集了大量關(guān)于周圍物體和交通模式的數(shù)據(jù),反饋乘客看到的是整潔的視覺圖像和清晰標(biāo)記的行程更新,增強駕駛安全與便捷性。
 
總之,2024年的動效設(shè)計將繼續(xù)成為各行業(yè)中不可或缺的重要組成部分,呈現(xiàn)出更加多元化、智能化和個性化的特點。作為設(shè)計師,我們需要不斷學(xué)習(xí)和探索新的設(shè)計理念和技術(shù)手段,以創(chuàng)作出更加出色的動效作品,為用戶帶來更豐富、生動和愉悅的體驗。同時,我們也需要關(guān)注環(huán)保、可持續(xù)性等社會問題,積極推動動效設(shè)計的綠色發(fā)展。
以上視頻、圖片均來源網(wǎng)絡(luò),若侵可聯(lián)系修改刪除,歡迎交流探討,謝謝~
 

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

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

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



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

工作提效!設(shè)計師必備的項目文件整理指南

資深UI設(shè)計者

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

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

資深UI設(shè)計者

進步、提高往往只在于要勇敢的邁出那一步,不用在乎平凡的眼光。

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

博博

 

 

近日,全球科技圈最火的熱點非Sora莫屬,它是OpenAI發(fā)布的首個文生視頻模型Sora,其視頻生成能力、效果呈現(xiàn)的成熟度震撼了全世界。有人說,這是視頻生成領(lǐng)域的iPhone moment,AGI(通用人工智能)又向前劃了一個時代。
除了Sora,這8大AI工具值得每個設(shè)計師和產(chǎn)品經(jīng)理嘗試!
Sora的使用非常簡單,與ChatGPT一樣,只需要輸入合適的prompt(提示詞),它就能跟根據(jù)文本指令創(chuàng)建視頻。
此前也有一些AI生成視頻工具,但大都只能生成10秒以內(nèi),還“卡成 PPT”,但 Sora 彎道超車,直接將時長拉到 60 秒。這個突破相當(dāng)厲害,畢竟時間越長,內(nèi)容越復(fù)雜,想表達準(zhǔn)確把控好節(jié)奏難上加難。
Sora生成的視頻畫面截圖 | 東京街頭的時尚女性
Sora生成的視頻畫面截圖 | 東京街頭的時尚女性
Sora生成的視頻畫面截圖 | 白雪皚皚草地上的猛犸象
Sora生成的視頻畫面截圖 | 白雪皚皚草地上的猛犸象
更厲害的是,根據(jù)Sora技術(shù)報告的介紹,Sora不僅可以理解用戶在提示中所要求的內(nèi)容,還能理解這些內(nèi)容在物理世界中的存在方式。因此,它生成的視頻不僅逼真,還包含精細復(fù)雜的場景、生動的角色表情以及復(fù)雜的鏡頭運動。
Sora生成的視頻截取 | 穿過郊區(qū)的火車車窗上的倒影
Sora生成的視頻截取 | 穿過郊區(qū)的火車車窗上的倒影
不少人高呼影視行業(yè)變天了,明星即將失業(yè),有網(wǎng)友甚至把美國電影工業(yè)的象征Hollywood(好萊塢)改成了這樣:
除了Sora,這8大AI工具值得每個設(shè)計師和產(chǎn)品經(jīng)理嘗試!
其實,不止影視行業(yè),包括教育、營銷、互聯(lián)網(wǎng)甚至所有行業(yè)都會或多或少受到影響。
作為在互聯(lián)網(wǎng)浸潤多年的“老油條”來說,筆者最近一直在思考,Sora等AI工具對我們究竟是機會還是挑戰(zhàn)?個人認(rèn)為,機會大于挑戰(zhàn)。
比如,對產(chǎn)品經(jīng)理和UX設(shè)計師來說,可以考慮怎么把Sora的能力用到自己的產(chǎn)品上去: 一款社區(qū)產(chǎn)品,可以通過Sora快速輸出大量視頻內(nèi)容;
一款教育類產(chǎn)品,可以通過Sora生成定制化的教學(xué)視頻;
一款新聞APP或者視頻網(wǎng)站,可以利用Sora進行個性化推薦;
……
 
不過這一切的前提是,你必須掌握AI。
除了上述提到的AI生成視頻工具Sora,筆者還總結(jié)了很多優(yōu)秀的AI工具,這些工具能大大幫助我們提升工作效率,生成創(chuàng)意靈感,一起來看看吧~
 
1、小摹AI
小摹AI是一款集成了人工智能技術(shù)的產(chǎn)品設(shè)計工具,能夠根據(jù)文本指令輕松生成可編輯的原型圖,對產(chǎn)品經(jīng)理來說可謂解放了生產(chǎn)力!
官網(wǎng):
https://www.mockplus.cn/ai
除了Sora,這8大AI工具值得每個設(shè)計師和產(chǎn)品經(jīng)理嘗試!
主要功能及亮點:
目前有智能原型、智能文本、智能圖片、智能翻譯和智能表格五大功能,能有效地提升設(shè)計效率,沒有設(shè)計經(jīng)驗也能輕松上手哦。
1)智能原型:根據(jù)用戶的描述,智能生成一張原型設(shè)計頁面。
2)智能文本:根據(jù)用戶的描述,智能生成一段文本內(nèi)容,對寫產(chǎn)品需求文檔很有幫助。
3)智能翻譯:有“畫板翻譯”和“輸入內(nèi)容”兩項子功能,可以輕松地實現(xiàn)整頁內(nèi)容的翻譯,也可以輸入內(nèi)容進行翻譯。
除了Sora,這8大AI工具值得每個設(shè)計師和產(chǎn)品經(jīng)理嘗試!
價格:
現(xiàn)階段可免費使用
推薦理由:
小摹AI界面簡潔,上手非常容易,它最大的亮點是利用AI優(yōu)化設(shè)計流程,快速實現(xiàn)從概念到原型的轉(zhuǎn)變,大幅度提升了產(chǎn)品經(jīng)理和設(shè)計師的工作效率!
推薦評級:
?????
 
2、Galileo AI
Galileo AI也是一個AI設(shè)計工具,它能根據(jù)用戶的輸入智能創(chuàng)建UI設(shè)計,生成的界面清晰,間距、字體大小、圖片使用等方面都不錯。另外,它還有個非常實用的功能,你可以將生成的設(shè)計導(dǎo)出到你的 Figma 中繼續(xù)編輯~
官網(wǎng):https://www.usegalileo.ai/explore
除了Sora,這8大AI工具值得每個設(shè)計師和產(chǎn)品經(jīng)理嘗試!
主要功能及亮點:
1)即時設(shè)計生成:根據(jù)自然語言提示迅速生成復(fù)雜的UI設(shè)計。
2)AI生成的插圖和圖像:為設(shè)計添加AI生成的藝術(shù)元素,增強視覺吸引力。
3)完整的產(chǎn)品文案自動化:利用大型語言模型自動生成產(chǎn)品文案,節(jié)省設(shè)計師的時間和精力。
價格:
現(xiàn)階段免費
推薦理由:
如果你想獲得一些靈感,想看到一些新鮮的設(shè)計,真的可以試試這個工具。
推薦評級:
????
 
3、Uizard
Uizard是一個基于Web的設(shè)計工具,用戶可通過它的AI技術(shù)快速創(chuàng)建網(wǎng)站界面,還能快速將手繪草圖轉(zhuǎn)換為交互式原型,提高設(shè)計效率和創(chuàng)新能力。
官網(wǎng):https://uizard.io/
除了Sora,這8大AI工具值得每個設(shè)計師和產(chǎn)品經(jīng)理嘗試!
主要功能及亮點:
1)手繪轉(zhuǎn)數(shù)字原型:將紙上的草圖轉(zhuǎn)換為數(shù)字界面原型。
2)用戶界面自動化設(shè)計:基于用戶輸入自動生成設(shè)計元素和布局。
3)交互式原型創(chuàng)建:快速構(gòu)建可交互的原型,用于用戶測試和演示。
價格:
提供免費試用版本,付費版12美元/月起。
推薦理由:
Uizard是一款設(shè)計神器,它的AI功能,豐富的可復(fù)用模板和設(shè)計元素,能幫你節(jié)省大量時間。
推薦評級:
?????
 
4、Whimsical
Whimsical是一款多功能的在線設(shè)計工具,它可以幫助用戶完成思維導(dǎo)圖、流程圖、線框圖的制作,成品邏輯清晰,層次分明,還能幫助設(shè)計師及時標(biāo)記靈感,是一款萬能的專業(yè)輔助設(shè)計工具。
官網(wǎng):https://whimsical.com/home
除了Sora,這8大AI工具值得每個設(shè)計師和產(chǎn)品經(jīng)理嘗試!
主要功能及亮點:
1)上下文工具欄、可直接用于展示的輸出、無限畫布以及實時更新;
2)龐大的符號庫工具幫助用戶更好的完成設(shè)計操作;
3)Whimsical的AI功能可以快速生成圖表,用以直觀展示概念、思維導(dǎo)圖和網(wǎng)頁等內(nèi)容。
價格:
提供免費版本,付費版10美元/月起。
推薦理由:
Whimsical是一款全能繪制工具,其中還有非常龐大的符號庫工具,能幫助你更好更快地的完成設(shè)計。
推薦評級:
????
 
5、Khroma AI
Khroma是一款利用人工智能技術(shù)來生成配色方案的工具,它能根據(jù)你的喜好和需求,提供高效、直觀的配色解決方案,并創(chuàng)建無限的調(diào)色板讓你盡情探索。
官網(wǎng):https://www.khroma.co/
除了Sora,這8大AI工具值得每個設(shè)計師和產(chǎn)品經(jīng)理嘗試!
主要功能及亮點:
1)AI生成配色方案:根據(jù)用戶偏好和流行趨勢自動生成配色方案。
2)自定義配色選項:允許用戶根據(jù)自己的需求調(diào)整和優(yōu)化配色。
3)保存和分享功能:用戶可以保存自己的配色方案,并與他人分享。
價格:
提供免費版,進階功能需付費訂閱
推薦理由:
Khroma的深度學(xué)習(xí)算法很厲害,它能夠?qū)W習(xí)用戶的配色偏好,并根據(jù)流行趨勢提供創(chuàng)新的配色方案。
推薦評級:????
 
6、AI Colors
AI Colors是一個人工智能色彩調(diào)色板生成器,它可以根據(jù)你的描述生成貼心的配色方案,同時你也可以參考提供的配色案例,每一種配色方案都有對應(yīng)的效果展示,讓你能夠快速找到想要自己的配色方案。
官網(wǎng):https://aicolors.co/
除了Sora,這8大AI工具值得每個設(shè)計師和產(chǎn)品經(jīng)理嘗試!
主要功能及亮點:
1)提供四種配圖案例,分別是移動應(yīng)用、儀表盤、落地頁、作品集;
2)單擊復(fù)制顏色或者直接導(dǎo)出配色方案,不喜歡的顏色還可以手動修改。
推薦理由:
通過AI Colors,你可以輕松生成調(diào)色板,并將其應(yīng)用于產(chǎn)品界面,查看它們的配色效果,非常適合希望輕松掌握調(diào)色板的新手。
推薦評級:
???
 
7、Fontjoy
Fontjoy是一個幫助設(shè)計師選擇最佳字體組合的工具,它可以讓用戶在一次點擊中生成字體組合,還可以混合和匹配不同的字體,達到完美組合效果。
官網(wǎng):https://fontjoy.com/
除了Sora,這8大AI工具值得每個設(shè)計師和產(chǎn)品經(jīng)理嘗試!
主要功能及亮點:
1)幫助用戶調(diào)整字體外觀,還有字體的類型、大小、顏色等
2)豐富的字體資源:包括中文字體、英文字體、日文字體等;
推薦理由:
只需點擊生成,就能看到不同的字體,讓字體搭配毫不費力。
推薦評級:
???
 
8、Huemint
Huemint是一個內(nèi)置AI色彩模型的在線配色網(wǎng)站,它通過AI技術(shù)幫助用戶快速生成吸引人的配色方案,你還可通過調(diào)節(jié)滑塊控制配色方案的對比度,適用于設(shè)計師和創(chuàng)意專業(yè)人士。
官網(wǎng):https://huemint.com/brand-intersection/
除了Sora,這8大AI工具值得每個設(shè)計師和產(chǎn)品經(jīng)理嘗試!
主要功能及亮點:
1)AI配色方案生成:根據(jù)用戶輸入和偏好,AI算法生成配色方案。
2)控制配色對比度:用戶可以通過調(diào)節(jié)滑塊來控制配色方案的對比度。
3)多樣化的配色選項:支持生成等階色、漸變色和2到11色的配色方案。
價格:
在線免費使用
推薦理由:
Huemint的AI色彩模型能夠根據(jù)最新的設(shè)計趨勢和用戶偏好提供創(chuàng)新的配色方案,幫助設(shè)計師快速找到靈感,輕松提高設(shè)計效率。
推薦評級:????
 
以上就是筆者的“掏心”分享了,希望讀到這里的小伙伴能真正嘗試用一下AI。畢竟,現(xiàn)在我們必將和AI一起成長同行,只有了解AI掌握AI才能不落后于時代,也讓我們一起期待人工智能下一個“Sora”吧!


作者:摹客設(shè)計云
來源:站酷

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

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

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

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

博博

在日常生活中,我們經(jīng)常會給他人貼上標(biāo)簽。這些標(biāo)簽可能是基于個人特征、行為或經(jīng)歷而形成的,它們可以幫助我們更好地理解和分類他人。例如,當(dāng)我們初次見到一個人時,我們可能會根據(jù)他們的外貌、穿著和言談舉止來給他們貼上一個“自信”、“開朗”或“膽小”、“內(nèi)向”的標(biāo)簽。我們不可避免地會貼標(biāo)簽或被貼標(biāo)簽,因為這是一種快速且低門檻的有效記憶方式。
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
關(guān)注不同平臺的標(biāo)簽設(shè)計,發(fā)現(xiàn)平時不太注意的小標(biāo)簽承擔(dān)了許多重要的作用。在電商類設(shè)計中,標(biāo)簽可以強化商品折扣、優(yōu)惠信息、服務(wù)特色等吸引用戶。對于偏向瀏覽和文章發(fā)布類產(chǎn)品,標(biāo)簽設(shè)計旨在方便讀者更好地理解文章內(nèi)容,平臺還可以根據(jù)標(biāo)簽聚合同類文章,建立目錄索引,引導(dǎo)讀者快速查看標(biāo)簽文章。
看似簡單的標(biāo)簽卻有這么強的作用,以下將根據(jù)標(biāo)簽的定義、屬性特征及使用場景作出一些思考和探索,幫助大家對標(biāo)簽有一個更清晰的認(rèn)識。
 
目錄:
一、標(biāo)簽的定義
二、標(biāo)簽的組成
三、標(biāo)簽設(shè)計的作用
四、標(biāo)簽設(shè)計要點
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
百度百科對網(wǎng)絡(luò)標(biāo)簽(Tag)定義是:
一種互聯(lián)網(wǎng)內(nèi)容組織方式,是相關(guān)性很強的關(guān)鍵字,它幫助人們輕松的描述和分類內(nèi)容,以便于檢索和分享,Tag已經(jīng)成為web 2.0的重要元素。
 
Ant Design 對標(biāo)簽給出的定義是:用來進行標(biāo)記和分類。使用場景:1.用于標(biāo)記事物的屬性和維度;2.進行分類。
TDesign對標(biāo)簽給出的定義是:用于表明主體的類目,屬性或狀態(tài)。
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
所以標(biāo)簽是什么?
標(biāo)簽是結(jié)合產(chǎn)品內(nèi)容及屬性特征經(jīng)提煉后產(chǎn)出的關(guān)鍵詞,是信息的一種集合方式,便于用戶查找、定位以及系統(tǒng)識別。
標(biāo)簽可以幫助傳達信息、建立可預(yù)知操作、產(chǎn)品分類和營銷引流、優(yōu)化搜索等。通過使用標(biāo)簽,方便用戶快速識別,提升信息轉(zhuǎn)化的效率,在UI設(shè)計中,標(biāo)簽是最常用的設(shè)計組件之一。
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
標(biāo)簽由容器、文本、圖標(biāo)等元素組成。
三者都是可選的,它們可以隨機組合,常見的是這5種組合:文本、圖標(biāo)、容器+文本、容器+圖標(biāo)、容器+文本+圖標(biāo)。
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
文本標(biāo)簽:
更直觀地表達含義,主要用于抽象的、或分類較多的標(biāo)簽,這種類型標(biāo)簽通常也以#+文字的形式呈現(xiàn)為超鏈接,主要出現(xiàn)在文字內(nèi)容較多的列表頁面、詳情頁的開頭或結(jié)尾。它們也可以被理解為常說的話題標(biāo)簽。通過這些標(biāo)簽,用戶可以快速了解到內(nèi)容的主題和核心,并能夠方便地鏈接到與該內(nèi)容相關(guān)聯(lián)的信息。
 
圖標(biāo)標(biāo)簽:
更富有設(shè)計感且吸引眼球,但這種圖標(biāo)必須是用戶熟識的、一看就明白含義的;
 
容器+文本標(biāo)簽:
主要為突出特色、賣點來進行促銷,類型及樣式比較多元化,且單個產(chǎn)品可能多達 4~5 個標(biāo)簽,以此來吸引用戶購買。
 
圖標(biāo)+文本標(biāo)簽:
面積會較大,視覺沖擊很強,有的出于交互功能的需要,有的則是用在節(jié)日和特別專題。
 
容器+文本+圖標(biāo)標(biāo)簽:
而圖標(biāo)則是為了進一步強調(diào)或補充標(biāo)簽文本的信息,增強用戶的視覺感知。
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
 
01 標(biāo)簽的顏色
標(biāo)簽的顏色選擇和搭配對于信息傳遞和品牌塑造具有重要影響。不同的顏色和用色的面積/重量會給用戶帶來不同的感知,比如,綠色代表清新、免費,黃色棕色代表尊貴VIP,紅色象征火爆熱門。同時也會對品牌形象產(chǎn)生影響。
  • 在白色背景下,我們可以自由地選擇任何顏色作為標(biāo)簽的主體色、輔助色和點綴色。當(dāng)面對同一組信息多個標(biāo)簽時,我們可以通過混合不同顏色來更好地區(qū)分它們。例如,我們可以將主要標(biāo)簽設(shè)置為紅色,次要標(biāo)簽設(shè)置為藍色,然后將它們組合在一起以形成一個更豐富的視覺層次結(jié)構(gòu)。
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
  • 在圖片背景下,我們的選擇受到了很大的限制。由于圖片本身已經(jīng)具有了豐富的顏色和紋理,因此我們需要謹(jǐn)慎選擇標(biāo)簽的顏色以避免與圖片產(chǎn)生沖突。通常情況下,我們會使用白色/黑色+不透明度或主體色作為標(biāo)簽容器,并將文字設(shè)置為黑色或反白處理以確保其可讀性。
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
總之,無論是白色背景還是圖片背景都有其獨特的優(yōu)勢和適用場景。在選擇背景時應(yīng)根據(jù)具體情況進行權(quán)衡并做出最佳決策。
 
02 標(biāo)簽形狀
標(biāo)簽的形狀設(shè)計在信息視覺傳達中扮演著重要的角色,不同的形狀代表著不同的信息特性和情感色彩。常用的標(biāo)簽形狀有圓形、矩形(半圓角、全圓角)、氣泡或異形等。
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
形狀是標(biāo)簽信息傳遞中的視覺輪廓表現(xiàn),它作為承載信息的容器,對文字元素的包容性極強,能夠使標(biāo)簽信息更加聚焦,讓用戶在獲取內(nèi)容和進行信息歸類時更加專注。
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
 
在UI設(shè)計中,標(biāo)簽的特征跟生活中的標(biāo)簽也很相似,用以標(biāo)注內(nèi)容分類或內(nèi)容要點,方便用戶快速定位自己需要的內(nèi)容目標(biāo)。 標(biāo)簽還有滿足用戶的隱形需求的作用,當(dāng)用戶在猶豫是否要進行下一步操作的時候,標(biāo)簽在一定程度上加強了用戶的需求欲望,促進下一步操作。那標(biāo)簽到底有什么作用?
01
傳達信息,突出產(chǎn)品特色
 
標(biāo)簽的基本功能是分類和突出內(nèi)容要點,以方便用戶快速定位他們需要的信息或功能。標(biāo)簽常用于傳達產(chǎn)品基本信息、折扣信息、優(yōu)惠信息、產(chǎn)品賣點等。對產(chǎn)品而言,它能優(yōu)化信息層級,又能簡單明確地傳達產(chǎn)品特點;對用戶而言,可以第一時間獲取關(guān)鍵信息,降低用戶閱讀門檻,所以標(biāo)簽的首要任務(wù)就是為滿足用戶的隱性需求而傳達特色信息。
例如,美團天天神劵、折扣信息等,淘寶里的直降低多少錢、同款低價,讓用戶潛意識地認(rèn)為能夠降低經(jīng)濟成本。
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
02
引導(dǎo)用戶操作,建立用戶操作的預(yù)期
 
標(biāo)簽還可以用于建立用戶操作的預(yù)期,讓用戶在使用產(chǎn)品之前就知道點擊后可能發(fā)生的效果,從而增加用戶點擊的興趣和滿意度。
 
例如:音頻標(biāo)簽、視頻標(biāo)簽“獨播”、“vip”等,讓用戶在點擊前預(yù)知點擊后的效果。標(biāo)簽還可以用作行為引導(dǎo),告知某操作的結(jié)果,如淘寶里“常逛的店”,讓用戶提前知悉操作之后得到的結(jié)果,加強點擊的動機。
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
03 傳遞品牌與可靠性
品牌性質(zhì)的標(biāo)簽,讓消費者對產(chǎn)品產(chǎn)生信任感。同時,標(biāo)簽也是品牌與消費者之間的溝通橋梁,通過簡潔明了的文字和視覺元素,傳達產(chǎn)品的特點和優(yōu)勢。
 
例如如:“百億補貼”、“官方店”、“品牌”。許多用戶在瀏覽列表時,會通過標(biāo)簽快速判斷是否有必要點擊查看詳情。此外,標(biāo)簽內(nèi)展示強公信力的信息(榜單排名/評分等),可以加強內(nèi)容可靠性及優(yōu)質(zhì)性。
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
04
方便分類
標(biāo)簽廣泛用于用戶區(qū)分產(chǎn)品內(nèi)容,進行分類,進而確定關(guān)鍵詞,優(yōu)化搜索。避免用戶因浪費大量時間瀏覽了非需求內(nèi)的信息而失去耐心。
例如:京東水果蔬菜“時令熱賣”標(biāo)簽和淘寶里的評價標(biāo)簽,用戶可選擇自己感興趣的標(biāo)簽去查找自己想要的信息,提高瀏覽效率,節(jié)約時間成本。
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
05
營銷引流
 
為用戶打上不同的標(biāo)簽,用于區(qū)分不同用戶群體,分類精準(zhǔn)定向推送產(chǎn)品。標(biāo)簽既能突出產(chǎn)品特色信息、又不會占用太多空間,所以通過對用戶建立好感、吸引其注意力進行引流也是一個很不錯的方式。
如:小紅書文末的文字標(biāo)簽、淘寶搜索的“探索發(fā)現(xiàn)”
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
05
從眾心理引導(dǎo)轉(zhuǎn)化
 
在營銷中,利用從眾心理可以引導(dǎo)用戶做出購買決策,這類信息廣泛應(yīng)用在標(biāo)簽設(shè)計中,積極引導(dǎo)用戶點擊和轉(zhuǎn)化。
例如,可以展示其他用戶的購買記錄或評價,讓用戶看到其他人對該產(chǎn)品的認(rèn)可和好評,從而增加他們的信任感和購買欲望。像淘寶里的“多少人回購”,銀行理財里的“多少人次購買”等等,都會對當(dāng)前用戶的心理產(chǎn)生極大影響,很多時候,用戶的想法和行為受到周圍人的影響程度,往往超過理性的認(rèn)知。 當(dāng)用戶無法決策時,從眾心理會成為影響用戶決策的重要因素。
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
06 告知狀態(tài)
當(dāng)內(nèi)容狀態(tài)變化且產(chǎn)品希望提示用戶知悉時,標(biāo)簽可以作為告知當(dāng)前狀態(tài)的提示,如上新的“New”、“直播中”等。
此外,告知當(dāng)前狀態(tài)還有營造稀缺性的作用。如“限購多少件”、“即將售罄”,促使用快速決策。
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
 
07 營造氛圍
標(biāo)簽不僅僅是產(chǎn)品信息的載體,更是營造氛圍的重要元素。通過選擇適合的色彩、字體和圖案,標(biāo)簽可以傳達出不同的情感和氛圍,吸引消費者的注意力,激發(fā)購買欲望。
 
例如:“38換新節(jié)”、“上新啦”,有的產(chǎn)品確實是基于熱度展示的標(biāo)簽,也有的產(chǎn)品只是為了吸引用戶注意力而展示。
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
 
 
設(shè)計干貨分享|標(biāo)簽設(shè)計的超全分析總結(jié)
在UI設(shè)計中,標(biāo)簽是一個不可或缺的元素,那如何設(shè)計才能達成業(yè)務(wù)目標(biāo)?
01 簡潔明了
標(biāo)簽設(shè)計的文案(字段)長短盡量簡短清晰,具有一定的識別性、易通性,避免使用復(fù)雜的詞匯和句子。用戶在瀏覽界面時,應(yīng)該能夠快速理解標(biāo)簽的含義。這里所說的精煉并非一味地求短,雖然“短”是標(biāo)簽必備的因素,但有時候過于簡短的標(biāo)簽根本沒辦法給用戶傳達足夠的信息,甚至?xí)?dǎo)致用戶更加疑惑,這也失去了添加標(biāo)簽的初衷。
 
02 一致性與差異性
在不同的頁面和場景中,標(biāo)簽的設(shè)計應(yīng)該保持一致的風(fēng)格和格式。這包括顏色、字體、大小、布局和位置等方面的一致性。這樣做有助于用戶建立認(rèn)知模型,提高他們的使用效率。然而,盡管標(biāo)簽設(shè)計需要保持一致性,但也需要一定的差異性。這種差異性是針對不同類型和視覺權(quán)重的標(biāo)簽,通過不同的視覺樣式和色彩來體現(xiàn)信息的層級關(guān)系。因此,雖然表面上看起來存在沖突,但實際上并不矛盾。
 
03適當(dāng)?shù)念伾?/span>
標(biāo)簽的顏色應(yīng)該與背景顏色形成對比,以便用戶能夠清楚地看到。同時,顏色的選擇也應(yīng)該考慮到品牌的形象和用戶的視覺感受。
 
04 適當(dāng)?shù)奈恢?/span>
標(biāo)簽的位置應(yīng)該方便用戶操作。例如,重要的標(biāo)簽應(yīng)該放在顯眼的位置,而不太重要的標(biāo)簽信息可以放在次要的位置。
 
結(jié)語
UI 設(shè)計中的標(biāo)簽跟我們?nèi)粘I钪械臉?biāo)簽很相似,它不僅能對產(chǎn)品作分類、特色標(biāo)記,還能在用戶猶豫不決的時候起到一定的推動作用,是平臺內(nèi)部信息導(dǎo)流和滿足用戶潛在需求過程中至關(guān)重要的一環(huán)。根據(jù)產(chǎn)品的目的和需求,在不同時間和場景下使用合適的標(biāo)簽是至關(guān)重要的。通過簡單精煉的表達方式,標(biāo)簽?zāi)軌蛟谟邢薜目臻g內(nèi)提供更多的信息維度,吸引用戶的注意并激發(fā)他們的好奇心、提升信息轉(zhuǎn)化的效率。
 
作者:滿滿滴滴
來源:站酷

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

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

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

 

教你一文讀懂暗色模式

ui設(shè)計分享達人

暗色模式(Dark Mode)的興起是一個逐漸發(fā)展的過程,它涉及到技術(shù)進步、用戶體驗優(yōu)化以及設(shè)計趨勢的變化。
  隨著iOS 13在2019年的發(fā)布,暗色模式開始成為用戶關(guān)注的焦點;在用戶體驗方面,設(shè)計者們考慮到了環(huán)境光線與屏幕亮度的匹配問題,暗色模式可以有效減少視覺疲勞;在實際使用中,用戶發(fā)現(xiàn)暗色模式在光線較暗的環(huán)境中更為舒適,這也促使了暗色模式的普及和發(fā)展。

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

ui設(shè)計分享達人

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

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.bouu.cn

存檔