2025年，UI/UX設(shè)計(jì)領(lǐng)域正迎來(lái)一系列令人興奮的創(chuàng)新趨勢(shì)。從更具沉浸感的3D元素到人性化的分區(qū)設(shè)計(jì)，從動(dòng)態(tài)排版到模糊與顆粒效果的巧妙運(yùn)用，再到生物識(shí)別技術(shù)的普及和可穿戴設(shè)備的深度適配，這些趨勢(shì)不僅讓界面更加美觀，更提升了用戶體驗(yàn)和情感共鳴。本文將深入探討這些前沿設(shè)計(jì)趨勢(shì)，為設(shè)計(jì)師和產(chǎn)品團(tuán)隊(duì)提供靈感和方向，幫助他們打造出更具吸引力和實(shí)用性的數(shù)字產(chǎn)品。

2025 年，數(shù)字設(shè)計(jì)領(lǐng)域會(huì)有很多新機(jī)會(huì)，這都得靠創(chuàng)新來(lái)推動(dòng)。設(shè)計(jì)師們現(xiàn)在越來(lái)越大膽，敢打破傳統(tǒng)套路，設(shè)計(jì)出的東西不僅要實(shí)用，還得有吸引力，能真正打動(dòng)人。

比如，會(huì)有更多 3D 元素加入設(shè)計(jì)里，讓用戶感覺(jué)更真實(shí)、更沉浸；還有很多設(shè)計(jì)會(huì)把 “方便用戶” 和 “拉近人際距離” 放在首位，不再只追求技術(shù)炫酷，而是更關(guān)注用戶的實(shí)際需求和情感感受。

那么我們來(lái)看一下有哪些趨勢(shì)~

1、分區(qū)設(shè)計(jì)（便當(dāng)格）：像整理抽屜一樣規(guī)劃界面

你有沒(méi)有過(guò)這樣的體驗(yàn)？打開(kāi)一個(gè) APP，信息像 “亂燉” 一樣堆在一起，找半天找不到重點(diǎn)。

2025 年的設(shè)計(jì)師學(xué)會(huì)了 “斷舍離”

就像日式便當(dāng)盒把飯菜分成不同格子，現(xiàn)在設(shè)計(jì)師也把網(wǎng)頁(yè)或 APP 界面分成多個(gè) “小格子”，每個(gè)格子放不同功能或內(nèi)容（比如數(shù)據(jù)、圖片、文字）。

好處：信息更清晰，用戶一眼就能看出重點(diǎn)，而且設(shè)計(jì)師可以靈活排列，讓頁(yè)面既整齊又好看。

做到這三點(diǎn)挑戰(zhàn)，產(chǎn)品經(jīng)理只會(huì)不斷升值

好的產(chǎn)品經(jīng)理是很稀缺的，懂用戶、懂商業(yè)、懂?dāng)?shù)據(jù)的產(chǎn)品經(jīng)理走出互聯(lián)網(wǎng)，依然是搶手貨。相反，如果只做簡(jiǎn)單傳話、低效執(zhí)行、淺層思考的產(chǎn)品經(jīng)理，恐怕走不過(guò)未來(lái)3-5年的洪流。

查看詳情 >

比如有的網(wǎng)站用這種格子展示不同模塊，重要內(nèi)容更突出，干擾少。

分區(qū)設(shè)計(jì)技巧：格子的大小、間距、邊框都有講究！重要內(nèi)容的格子更大、邊框更粗，次要信息的格子更 “低調(diào)”，就像媽媽給你裝便當(dāng)，愛(ài)吃的菜永遠(yuǎn)擺在最顯眼的位置。

圖片網(wǎng)站鏈接：https://selestial.co/

2、3D 元素：讓界面從 “照片” 變成 “小世界”

以前網(wǎng)頁(yè)里的 3D 圖像是 “擺件”，現(xiàn)在它們會(huì) “互動(dòng)” 了！

3D 效果不是新鮮事，但現(xiàn)在更厲害：能互動(dòng)、能沉浸！

比如網(wǎng)頁(yè)里的物體可以 360 度旋轉(zhuǎn)，虛擬試穿衣服、查看產(chǎn)品細(xì)節(jié)，甚至結(jié)合 AR/VR 讓你感覺(jué)身臨其境。

現(xiàn)在手機(jī)和瀏覽器性能更強(qiáng)了，3D 元素加載更快，甚至能在低配設(shè)備上流暢運(yùn)行，設(shè)計(jì)師可以大膽用毛茸茸的 3D 圖標(biāo)、會(huì) “呼吸” 的動(dòng)態(tài)按鈕（比如按鈕按下時(shí)像真的被按下去一樣凹陷）。

好處：畫(huà)面更立體、有趣，用戶體驗(yàn)像在真實(shí)世界互動(dòng)，不再是死板的圖片和文字。

圖片網(wǎng)站鏈接：https://kevinhilgendorf.com/

圖片網(wǎng)站鏈接：https://labs.chaingpt.org/

3、動(dòng)態(tài)排版：文字會(huì) “講故事” 了

字體不再老老實(shí)實(shí)不動(dòng)，而是會(huì) “跳舞”：大小變化、顏色漸變、跟著用戶操作移動(dòng)，甚至根據(jù)內(nèi)容情緒調(diào)整動(dòng)畫(huà)（比如錯(cuò)誤提示字體變紅閃爍，成功提示變綠飄動(dòng)）。

好處：吸引注意力，傳遞品牌個(gè)性，比如讓標(biāo)題動(dòng)起來(lái)，用戶一眼就被抓住。

文字不再是 “死板的符號(hào)”，而是會(huì) “表演” 的演員，我們可以做一些交互創(chuàng)意方面的案例假設(shè)

案例1：一個(gè)新聞網(wǎng)站的標(biāo)題 “今日熱點(diǎn)”，當(dāng)你滾動(dòng)頁(yè)面時(shí)，“熱點(diǎn)” 兩個(gè)字會(huì)像火苗一樣跳動(dòng)，吸引你點(diǎn)擊；電商網(wǎng)站的 “限時(shí)折扣” 按鈕，文字會(huì)從左到右 “跑馬燈” 式滾動(dòng)，仿佛在喊 “快看我！”。

案例2：社交媒體 APP 的評(píng)論區(qū)，當(dāng)有人給你發(fā) “生日快樂(lè)”，“生日快樂(lè)” 這幾個(gè)字會(huì)飄出彩色 confetti（紙屑），還會(huì)放大縮小；如果收到一條提醒 “網(wǎng)絡(luò)連接失敗”，文字會(huì)變成紅色，輕微抖動(dòng)，像在著急地告訴你 “出問(wèn)題啦”。

案例3：未來(lái)的動(dòng)態(tài)字體甚至能根據(jù)你的輸入語(yǔ)氣自動(dòng)調(diào)整！比如你在聊天框里輸入 “氣死我了！”，發(fā)送后文字會(huì)變成紅色，扭曲變形，模擬 “憤怒” 的情緒；輸入 “哈哈哈哈哈”，文字會(huì)笑著上下彈跳，自帶喜感。

圖片網(wǎng)站鏈接：https://wodniack.dev/

圖片網(wǎng)站鏈接：https://romaingranai.xyz/

4、模糊 & 顆粒效果：給界面加一層 “溫柔濾鏡”

背景不再是純色或簡(jiǎn)單漸變，而是加了 “濾鏡”：有的模糊像柔光，有的帶顆粒感像老照片，讓界面更有層次和溫度。

好處：不搶主內(nèi)容的風(fēng)頭，卻能增加細(xì)膩的質(zhì)感，讓用戶覺(jué)得界面更精致、有 “呼吸感”。

想象一下：你的屏幕不再是冰冷的玻璃，而是像磨砂質(zhì)感的燈罩，透著柔和的光 ——

例如：一個(gè)閱讀 APP 的背景，不是純灰色，而是帶點(diǎn)模糊的淺灰，像隔著一層薄霧，文字浮在上面更突出，眼睛看久了也不累；

短視頻 APP 的點(diǎn)贊按鈕背后，有淡淡的顆粒感，像老電影膠片，點(diǎn)擊時(shí)還會(huì)有輕微的 “沙沙” 聲，復(fù)古又治愈。

例如：有些網(wǎng)站的光標(biāo)變成了半透明的小圓圈，移動(dòng)時(shí)會(huì)在背景留下淡淡的拖影，像在雪地上踩出腳印；

購(gòu)物車(chē)圖標(biāo)點(diǎn)擊時(shí)，周?chē)鷷?huì)升起細(xì)小的顆粒，像撒了一把金粉，讓操作更有 “儀式感”。

現(xiàn)代人看膩了 “完美到反光” 的數(shù)字界面，這種帶點(diǎn) “不完美” 的質(zhì)感，反而讓人感覺(jué)親切，像摸到了真實(shí)的紙張或布料。

圖片網(wǎng)站鏈接：https://breadzine.com/

5、暗色模式：從 “暗黑冷酷” 到 “深夜暖燈”

以前的暗色模式是 “純黑配白字”，刺眼又冰冷，現(xiàn)在設(shè)計(jì)師給它加了 “柔光濾鏡”：

不是純黑背景配白字那種刺眼的暗模式，而是柔和的 “低對(duì)比度暗調(diào)”：比如深灰配淺灰，帶點(diǎn)淡淡光影，像傍晚的光線一樣舒服。

好處：保護(hù)眼睛，減少視覺(jué)疲勞，還營(yíng)造出高級(jí)、安靜的氛圍，比傳統(tǒng)暗模式更溫馨。

顏色更溫柔：比如微信的暗色模式，背景不是純黑，而是深海軍藍(lán)，文字是淺灰色，圖標(biāo)帶一點(diǎn)淡金色光澤，晚上刷手機(jī)像在暖黃色的臺(tái)燈下看書(shū)，不刺眼還很高級(jí)。

場(chǎng)景化設(shè)計(jì)：一個(gè)助眠 APP 的低光模式，界面會(huì)模擬 “月光效果”，背景有淡淡的云層陰影，按鈕像夜空中的星星一樣微微閃爍，配合白噪音，讓你還沒(méi)開(kāi)始冥想就先放松下來(lái)。

保護(hù)眼睛更貼心：低對(duì)比度設(shè)計(jì)減少視覺(jué)疲勞，尤其適合長(zhǎng)時(shí)間用手機(jī)的上班族、學(xué)生黨，再也不用擔(dān)心晚上刷手機(jī) “亮瞎眼”。

圖片網(wǎng)站鏈接：https://www.chromatique.studio/

圖片網(wǎng)站鏈接：https://dribbble.com/shots/24281290-Kenn-Food-Processor-Landing-Page

圖片網(wǎng)站鏈接：https://silverdrive.nl/

6、UX文案：界面里的 “貼心小助手”

你有沒(méi)有被 APP或網(wǎng)站 的 “謎之提示” 搞懵過(guò)？比如 “操作異常，請(qǐng)重試”—— 到底哪里異常？現(xiàn)在設(shè)計(jì)師開(kāi)始 “說(shuō)人話” 了

按鈕上的字、提示信息、錯(cuò)誤提醒…… 這些細(xì)節(jié)文字越來(lái)越重要。比如 “提交” 改成 “確認(rèn)發(fā)布”，錯(cuò)誤提示寫(xiě) “網(wǎng)絡(luò)好像斷了，點(diǎn)擊重試” 而不是冷冰冰的 “錯(cuò)誤 404”。

好處：讓用戶知道該做什么，減少操作困惑，就像有個(gè)小助手在旁邊輕聲指導(dǎo)。

按鈕文案更具體：以前 “提交” 按鈕，現(xiàn)在改成 “確認(rèn)并發(fā)布動(dòng)態(tài)”，你一下就知道點(diǎn)了之后會(huì)發(fā)生什么；購(gòu)物車(chē)的 “結(jié)算” 按鈕變成 “去支付（含 3 件商品）”，清楚告訴你當(dāng)前購(gòu)物車(chē)數(shù)量。

錯(cuò)誤提示會(huì) “安慰人”：當(dāng)你登錄密碼輸錯(cuò)，不再是 “密碼錯(cuò)誤”，而是 “密碼好像不對(duì)哦，是不是字母大小寫(xiě)搞錯(cuò)了？試試找回密碼吧～”，帶點(diǎn) emoji 和親切感，讓你不煩躁。

空狀態(tài)會(huì) “引導(dǎo)”：比如一個(gè)筆記 APP 的空白頁(yè)，不再是冷冰冰的 “暫無(wú)筆記”，而是畫(huà)著一個(gè)小臺(tái)燈，配文 “點(diǎn)擊新建筆記，開(kāi)始記錄今天的小確幸吧～”，鼓勵(lì)你行動(dòng)起來(lái)。

圖片網(wǎng)站鏈接：https://clickup.com/

圖片網(wǎng)站鏈接：https://www.headspace.com/

7、生物識(shí)別：靠 “臉” 吃飯，告別密碼焦慮

不用記復(fù)雜密碼了！指紋、人臉、語(yǔ)音識(shí)別越來(lái)越普及，甚至未來(lái)可能用眼動(dòng)或神經(jīng)信號(hào)驗(yàn)證。比如手機(jī)刷臉解鎖、支付時(shí)掃指紋，又快又安全。

好處：再也不怕忘記密碼，登錄像 “本能反應(yīng)” 一樣自然。 

你還記得自己設(shè)過(guò)多少個(gè)密碼嗎？郵箱、銀行、社交軟件……2025 年，你只需要 “露個(gè)臉”

“掃個(gè)指紋”：

生活場(chǎng)景：早上上班，刷臉打開(kāi)公司門(mén)禁；午休用指紋支付買(mǎi)咖啡；晚上回家，虹膜識(shí)別解鎖手機(jī)，全程不用輸密碼。甚至連銀行 APP 轉(zhuǎn)賬，看一眼攝像頭就能確認(rèn)身份，安全又快捷。

默默驗(yàn)證更省心：有些 APP 會(huì) “偷偷” 驗(yàn)證你 —— 比如你常用手機(jī)的手勢(shì)是右手拇指解鎖，系統(tǒng)會(huì)記錄你的握持姿勢(shì)，當(dāng)檢測(cè)到左手拿手機(jī)且指紋不符時(shí)，自動(dòng)觸發(fā)安全提醒，不用你手動(dòng)操作，安全藏在細(xì)節(jié)里。

特殊場(chǎng)景：比如戴著手套不方便指紋解鎖？未來(lái)的可穿戴設(shè)備可能支持 “靜脈識(shí)別”，通過(guò)血管紋路確認(rèn)身份，下雨天、運(yùn)動(dòng)時(shí)也能輕松解鎖。

圖片網(wǎng)站鏈接：https://dribbble.com/shots/23201694-Face-id

8、可穿戴設(shè)備設(shè)計(jì)：從 “戴在身上” 到 “長(zhǎng)在身上”

智能手表不再是 “縮小版手機(jī)”，而是更懂你的 “貼身伙伴”：

智能手表、VR 眼鏡、健康手環(huán)等設(shè)備的設(shè)計(jì)越來(lái)越難：屏幕小，怎么讓用戶操作方便？

比如用手勢(shì)滑動(dòng)、語(yǔ)音命令，甚至靠眨眼控制；還要考慮戴著舒服（輕、貼合手腕）、續(xù)航久、適應(yīng)各種場(chǎng)景（運(yùn)動(dòng)時(shí)防水，強(qiáng)光下看得清）。

小屏幕大講究：比如一個(gè)運(yùn)動(dòng)手表，跑步時(shí)屏幕自動(dòng)切換成 “極簡(jiǎn)模式”，只顯示配速、心率、里程，字體超大，你 glancing（掃一眼）就能看清；當(dāng)你停下來(lái)休息，屏幕會(huì)慢慢顯示更詳細(xì)的數(shù)據(jù)，像個(gè)貼心教練。

交互方式創(chuàng)新：VR 眼鏡不再靠手柄操作，你眨眨眼就能切換菜單，點(diǎn)點(diǎn)頭就能確認(rèn)；智能手環(huán)檢測(cè)到你睡眠不好，早上會(huì)震動(dòng)提醒 “昨晚睡眠質(zhì)量一般，今天記得多喝水哦”，還會(huì)同步調(diào)整手機(jī)的屏幕亮度，幫你緩解疲勞。

場(chǎng)景化適配：比如滑雪專(zhuān)用智能眼鏡，強(qiáng)光下自動(dòng)調(diào)暗鏡片，檢測(cè)到你加速滑行時(shí)，界面只顯示速度和路線，避免分心；潛水手表接觸到水時(shí)，自動(dòng)鎖定屏幕防止誤觸，浮出水面后又恢復(fù)正常。

圖片網(wǎng)站鏈接：https://inspect-ar.com/en/

圖片網(wǎng)站鏈接：https://dribbble.com/shots/18628321-Fitness-Smart-Watch-UI

2025 年的設(shè)計(jì)趨勢(shì)：“以人為本”

界面不再只追求好看，還要讓用戶用得爽、有情感共鳴：分區(qū)清晰、3D 互動(dòng)、動(dòng)態(tài)字體吸引眼球，模糊背景和低光模式讓眼睛舒服；UX 寫(xiě)作和生物識(shí)別減少操作麻煩，可穿戴設(shè)備更懂用戶的使用場(chǎng)景。

本文由人人都是產(chǎn)品經(jīng)理作者【南設(shè)】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于 CC0 協(xié)議。

蘭亭妙微(bouu.cn )是一家專(zhuān)注而深入的界面設(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

編輯導(dǎo)語(yǔ)：在做UI設(shè)計(jì)時(shí)，定義并統(tǒng)一顏色規(guī)范對(duì)產(chǎn)品設(shè)計(jì)和團(tuán)隊(duì)整體推進(jìn)具有重要作用，本篇文章通過(guò)一個(gè)國(guó)外大廠真實(shí)的顏色組件升級(jí)案例為我們分享了統(tǒng)一顏色規(guī)范的好方法，一起來(lái)看。

Hi，我是彩云。咱們平時(shí)在做UI組件庫(kù)的時(shí)候，會(huì)遇到一個(gè)問(wèn)題，定義了很多顏色但在團(tuán)隊(duì)合作的時(shí)候，卻依然還是會(huì)根據(jù)每個(gè)設(shè)計(jì)師自己的喜好來(lái)配色，很難將顏色規(guī)范很好的統(tǒng)一起來(lái)。這其中有一個(gè)很?chē)?yán)重的問(wèn)題就是對(duì)于顏色的命名和管理不夠清晰，那么今天這篇文章通過(guò)一個(gè)國(guó)外大廠真實(shí)的顏色組件升級(jí)案例，希望能幫你解決這個(gè)難題。

我們花了幾個(gè)月的時(shí)間改進(jìn)了設(shè)計(jì)系統(tǒng) Cobalt 中顏色的處理方式。顏色是 UI 的基本元素：它們構(gòu)成視覺(jué)語(yǔ)言，幫助定義品牌，并被開(kāi)發(fā)和設(shè)計(jì)師每天用在產(chǎn)品設(shè)計(jì)中。

但如果我們?cè)谑褂妙伾蠜](méi)有明確的指導(dǎo)原則，如顏色被團(tuán)隊(duì)中的設(shè)計(jì)師按喜好使用時(shí)，將會(huì)導(dǎo)致產(chǎn)品看起來(lái)非?；靵y。

我們APP中的不一致例子

接下來(lái)我會(huì)告訴你，我們是如何做好顏色規(guī)范以及在整個(gè)項(xiàng)目中面臨的挑戰(zhàn)，正如你將看到的，這個(gè)項(xiàng)目并不像看上去那么簡(jiǎn)單：

如何通過(guò) Getaround 在設(shè)計(jì)和技術(shù)方面管理顏色概述這個(gè)系統(tǒng)的局限性，并說(shuō)明我們?nèi)绾胃倪M(jìn)它什么是語(yǔ)義顏色我們是如何實(shí)現(xiàn)它的，以及它帶來(lái)的優(yōu)勢(shì)！

一、我們之前在Getaround中如何管理顏色？

1. 在設(shè)計(jì)方面

和許多設(shè)計(jì)團(tuán)隊(duì)一樣，我們使用 Figma 作為我們的主要設(shè)計(jì)工具。我們的顏色被放在“基礎(chǔ)”庫(kù)中，可以在其中找到我們?cè)诋a(chǎn)品中使用的所有常見(jiàn)樣式，例如字體樣式、顏色、圖標(biāo)等。這個(gè)庫(kù)提供了我們每天使用的專(zhuān)用系統(tǒng)庫(kù)（iOS、Android、Web、電子郵件）。顏色名稱過(guò)去是基于它們的外觀。例如：紫色顏色是我們的主要顏色，而石墨色是基本文本的常規(guī)顏色。

2. 在技術(shù)方面

在我們的APP中，曾經(jīng)會(huì)用相同的系統(tǒng)來(lái)管理顏色。此外，還有一些語(yǔ)義顏色，但僅限于 iOS，開(kāi)發(fā)用的也不多。

二、我們?cè)谂f系統(tǒng)中面臨的限制

在使用這個(gè)系統(tǒng)時(shí)，團(tuán)隊(duì)反復(fù)面臨同樣的問(wèn)題：如何確保從一位設(shè)計(jì)師到另一位設(shè)計(jì)師以相同的方式使用顏色？如果沒(méi)有適當(dāng)?shù)闹笇?dǎo)原則，我們?nèi)绾未_保開(kāi)發(fā)很好的還原？如果明天我們必須用全新的配色方案來(lái)改造我們的品牌，要怎么快速統(tǒng)一？讓我們?cè)囍页鑫覀兪侨绾蜗萑脒@種境地的？

1. 沒(méi)有明確的顏色使用規(guī)范

所有設(shè)計(jì)師都使用相同的色板，但自 2019 年 Getaround 品牌重塑以來(lái)，除了引入不一致之外，沒(méi)有明確關(guān)于如何使用它們的規(guī)范，所以設(shè)計(jì)師在選擇顏色時(shí)迷失了方向。然后他們將開(kāi)始建立自己的參考資料，每個(gè)設(shè)計(jì)師都有不同的配色想法。

例如：設(shè)計(jì)師應(yīng)該在所有這些灰色陰影中為次級(jí)文本選擇哪種灰色？顏色命名在這里不是很有幫助

2. 舊品牌的設(shè)計(jì)包袱

以前品牌的一些舊顏色仍在使用（按鈕上的藍(lán)色陰影，標(biāo)題……）。到現(xiàn)在也沒(méi)有真正的行動(dòng)計(jì)劃來(lái)迭代它們。

舊驅(qū)動(dòng)器品牌

三、我們對(duì)新系統(tǒng)的設(shè)想

在 2021 年初，我們有機(jī)會(huì)為我們的 iOS 和 Android APP來(lái)制定長(zhǎng)期的 UI 規(guī)劃。我們問(wèn)自己“5年后我們的APP會(huì)是什么樣的？”。我們會(huì)回顧， Getaround 品牌是如何成為我們視覺(jué)方法中心的。

以上是我們品牌和設(shè)計(jì)團(tuán)隊(duì)在 2020 年完成的全面工作的一小部分致力于設(shè)計(jì)系統(tǒng)的 Cobalt 團(tuán)隊(duì)借此機(jī)會(huì)重新考慮了顏色系統(tǒng)。然而，為了使這一目標(biāo)成為現(xiàn)實(shí)，我們面臨著一些挑戰(zhàn)：

1. 制定指導(dǎo)原則

我們?nèi)绾未_保每個(gè)設(shè)計(jì)師都可以依賴易于理解和使用色彩系統(tǒng)？擁有一個(gè)簡(jiǎn)單系統(tǒng)將加快使用速度。

2. 顏色能通過(guò)可用性標(biāo)準(zhǔn)

我們?nèi)绾未_保從一開(kāi)始就設(shè)計(jì)出易于使用的顏色？

3. 易于維護(hù)并符合未來(lái)趨勢(shì)

我們?nèi)绾尾拍苁瓜到y(tǒng)易于維護(hù)并符合現(xiàn)在和未來(lái)的行業(yè)標(biāo)準(zhǔn)（例如：暗模式）

四、我們新的顏色系統(tǒng)：語(yǔ)義顏色

在我們的探索階段，在 Figma 的共享環(huán)境中工作促使我們保存和記錄我們所做的設(shè)計(jì)決策。就像我們應(yīng)該如何命名我們的強(qiáng)調(diào)色：（主要？強(qiáng)調(diào)？）我們還測(cè)試了APP界面在黑暗模式下的外觀，以及如何正確支持這一點(diǎn)。我們應(yīng)該創(chuàng)建一個(gè)單獨(dú)的調(diào)色板還是為每個(gè)組件都創(chuàng)建一個(gè)深色版本？

我們開(kāi)始與開(kāi)發(fā)討論這個(gè)問(wèn)題，以了解他們有什么解決方案來(lái)處理這些問(wèn)題。語(yǔ)義顏色的概念很快就被開(kāi)發(fā)人員提出來(lái)，因?yàn)樗麄冎啦⑶液芎玫厥褂昧诉@個(gè)概念。但對(duì)于設(shè)計(jì)師來(lái)說(shuō)，又要如何準(zhǔn)確理解呢？

1. 什么是語(yǔ)義顏色？

語(yǔ)義指的是根據(jù)顏色的使用方式而不是色調(diào)來(lái)命名顏色的方法。

例如，你可以將顏色命名為“成功”或“積極”，因?yàn)樗傅氖呛x，而不是“綠色”或“翡翠綠”。甚至可以根據(jù)顏色在屏幕上的應(yīng)用方式來(lái)命名顏色，例如背景顏色、按鈕背景顏色、文本顏色、圖標(biāo)顏色等……

2. 從基于外觀的配色方案到基于語(yǔ)義的配色方案

語(yǔ)義顏色并不新鮮，越來(lái)越多的產(chǎn)品開(kāi)始采用這種方式來(lái)定義顏色。我們可以從下面一些大廠的顏色規(guī)范來(lái)學(xué)習(xí)google

• https://material.io/design/color/the-color-system.html#color-theme-creationApple
• https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/colorShopify
• https://polaris.shopify.com/design/colors#navigationAsana
• https://polaris.shopify.com/design/colors#navigation

顯然，這種顏色系統(tǒng)有很多優(yōu)點(diǎn)。因此，現(xiàn)在讓我解釋一下我們?nèi)绾卧趯?shí)踐中將這個(gè)概念應(yīng)用到我們的產(chǎn)品中。

3. 深入研究語(yǔ)義顏色

我們的新顏色系統(tǒng)由兩部分組成：

• 基礎(chǔ)色板
• 語(yǔ)義顏色

基礎(chǔ)調(diào)

我們與品牌團(tuán)隊(duì)密切合作，他們定義了一個(gè)全新的品牌，我們?cè)诠ぷ鲿r(shí)會(huì)圍繞這個(gè)品牌考慮。該品牌的每種顏色都采用多種色調(diào)進(jìn)行調(diào)整，以創(chuàng)造更大的靈活性，一次構(gòu)建成為基礎(chǔ)調(diào)色板。它代表可以在產(chǎn)品中顯示的所有可能顏色。團(tuán)隊(duì)可能不會(huì)全部使用它們，但他們會(huì)選擇在產(chǎn)品中效果最好的那些。

基礎(chǔ)調(diào)色板

4. 語(yǔ)義顏色

語(yǔ)義顏色建立在用作參考的基礎(chǔ)調(diào)色板之上。正如我之前解釋的，命名不再是指顏色的“外觀”（洋紅色、棕色、綠色……），而是指UI 元素它們被應(yīng)用于（文本、圖標(biāo)、按鈕、背景……）以及該元素的狀態(tài)（活動(dòng)、非活動(dòng)、成功……）。請(qǐng)參閱此處的命名法和一些示例：

語(yǔ)義顏色結(jié)構(gòu)和示例這意味著來(lái)自基礎(chǔ)調(diào)色板的顏色可以用于多種語(yǔ)義顏色：

這就是我們根據(jù)這個(gè)新原則重新調(diào)整顏色命名的方式：

我們通過(guò)設(shè)計(jì)師和開(kāi)發(fā)進(jìn)行了內(nèi)部用戶測(cè)試，以確定命名語(yǔ)義顏色的最佳方式。我們嘗試了很多不同的命名方法，發(fā)現(xiàn)過(guò)于詳細(xì)的命名系統(tǒng)對(duì)于我們的團(tuán)隊(duì)和產(chǎn)品的規(guī)模來(lái)說(shuō)維護(hù)和使用太復(fù)雜了。我們決定做一些簡(jiǎn)單的維護(hù)，同時(shí)在命名方面有足夠的延展性。

五、語(yǔ)義顏色的好處

1. 語(yǔ)義色彩嵌入設(shè)計(jì)原則

語(yǔ)義顏色側(cè)重于顏色的用途。它消除了設(shè)計(jì)師和開(kāi)發(fā)對(duì)使用什么顏色的盲目猜測(cè)，因?yàn)橐曈X(jué)語(yǔ)言直接傳達(dá)了設(shè)計(jì)決策。

例如：在這里，顏色命名使設(shè)計(jì)師更容易做出正確的選擇。在我們的原則中， *Accent* state 用于交互元素。

2. 解鎖黑暗模式

語(yǔ)義顏色可以適應(yīng)不同的主題。語(yǔ)義顏色的名稱始終相同，但它的外觀可能會(huì)根據(jù)所選模式而改變。例如，語(yǔ)義顏色“主背景”可以指淺模式下的“白色”和深色模式下的“黑色 500”。根據(jù)用戶選擇的模式，將自動(dòng)顯示正確的顏色。這對(duì)我們的設(shè)計(jì)系統(tǒng)來(lái)說(shuō)是一個(gè)真正的游戲規(guī)則改變者，因?yàn)樗鼘⑹顾用嫦蛭磥?lái)。

明暗模式下的語(yǔ)義顏色 Primary.Background

3. 語(yǔ)義顏色高效靈活

如果我們將來(lái)要更新顏色，使用語(yǔ)義顏色也會(huì)變得更容易。假設(shè)我們想要將我們的主色更改為藍(lán)色。我們只需要將基礎(chǔ)調(diào)色板中的“紫色”更新為“藍(lán)色”。與該顏色相關(guān)的所有語(yǔ)義顏色也將神奇地更新。另一種情況可能是更新特定 UI 元素的顏色，例如按鈕，而無(wú)需觸摸使用紫色顏色的其他元素。

在這種情況下，我們只需要更新 ButtonBackground.Primary 顏色，非常簡(jiǎn)單。如果沒(méi)有該系統(tǒng)，更新顏色將需要經(jīng)過(guò)大量 QA 以確保將更改應(yīng)用到任何地方。

4. 顏色組合指南

這個(gè)系統(tǒng)似乎很容易使用，但設(shè)計(jì)師仍然有一些問(wèn)題：

• 我什么時(shí)候可以使用正常文字顏色？
• 我什么時(shí)候可以使用次級(jí)文本顏色？
• 我什么時(shí)候可以使用可交互顏色？

為了幫助設(shè)計(jì)師選擇顏色，我們創(chuàng)建了一個(gè)交互式指南，列出了所有可能的顏色組合。我們?cè)?figma 原型中創(chuàng)建了這個(gè)指導(dǎo)原則，每次更改設(shè)計(jì)系統(tǒng)顏色時(shí)都會(huì)更新該規(guī)范。它突出了允許的語(yǔ)義顏色組合，以最大限度地保持一致性。

點(diǎn)擊可以查看大圖Figma 中內(nèi)置的語(yǔ)義色彩交互指南

5. 結(jié)果

采用這種新的顏色系統(tǒng)產(chǎn)生了一些變化：

1）我們從“Foundation”庫(kù)中提取顏色，并將它們分為深色和淺色模式。這一舉措使我們能夠使用 Figma 開(kāi)關(guān)功能輕松地將設(shè)計(jì)文件從? Light 切換到 ? Dark 模式。這也使庫(kù)更輕且更易于維護(hù)。

2）語(yǔ)義顏色已在我們的 iOS 和 Android 應(yīng)用程序上成功實(shí)現(xiàn)，我們現(xiàn)在正在努力在我們網(wǎng)絡(luò)平臺(tái)上使用相同的系統(tǒng)。我們很快就會(huì)有一個(gè)集中的配色方案來(lái)處理所有系統(tǒng)上的顏色。

總結(jié)

總結(jié)下今天學(xué)到的內(nèi)容：

1. 發(fā)現(xiàn)并準(zhǔn)確描述團(tuán)隊(duì)在使用顏色時(shí)遇到的問(wèn)題
2. 如何從提出設(shè)想，到以新的方式來(lái)定義顏色
3. 如何通過(guò)語(yǔ)義化顏色來(lái)使得大家更方便的使用顏色，我們也可以在自己的組件庫(kù)中多使用語(yǔ)義化的顏色來(lái)進(jìn)行命名管理，這樣團(tuán)隊(duì)協(xié)作才會(huì)更加高效。

（授權(quán)截圖）

作者：Fabien Gavinet，譯者：彩云Sky

原文鏈接：https://medium.com/getaround-eu/colors-that-make-sense-505d0f3509c1

本文由 @彩云Sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。

蘭亭妙微(bouu.cn )是一家專(zhuān)注而深入的界面設(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

2024年，行業(yè)經(jīng)歷了飛書(shū)裁員、Salesforce視覺(jué)更新、釘釘商業(yè)化等重大事件，這些變化不僅影響了設(shè)計(jì)師的職業(yè)發(fā)展，也重塑了B端設(shè)計(jì)的市場(chǎng)格局。站在2025年的起點(diǎn)，本文將深入探討B(tài)端設(shè)計(jì)的未來(lái)趨勢(shì)，供大家參考。

每一年，我都有一個(gè)“任務(wù)”，為過(guò)去一整年的 B 端設(shè)計(jì)師進(jìn)行匯報(bào)。

一方面是給大家匯報(bào)過(guò)去一整年瞬息變化的市場(chǎng)，同時(shí)呢也想聊聊站在我的視角當(dāng)中，未來(lái)一整年的行業(yè)發(fā)展趨勢(shì)，以及我自己的判斷。

那今年也不例外，在今年整體行業(yè)的大背景下，我們究竟應(yīng)該何去何從？想坐下來(lái)靜靜的和大家聊聊～

今天我們主要聊三個(gè)方面：2024 B 端行業(yè)大事件、當(dāng)前整體環(huán)境、2025 年 B 端設(shè)計(jì)趨勢(shì)判斷，文章有些長(zhǎng)，內(nèi)容稍干，大家耐心觀看～

一、2024 B 端行業(yè)大事件

在回憶過(guò)去一整年時(shí)，我會(huì)覺(jué)得有幾件事情是非常重要，因此在這里提出給大家進(jìn)行分享。

1. 飛書(shū)裁員設(shè)計(jì)師

在 2024 年年初，飛書(shū)裁員，據(jù)說(shuō)設(shè)計(jì)師裁員高達(dá) 60%，用研100%… 這一件事帶來(lái)了一系列的連鎖反應(yīng)。

首先是市場(chǎng)會(huì)覺(jué)得設(shè)計(jì)并沒(méi)有價(jià)值，B 端設(shè)計(jì)沒(méi)有價(jià)值，設(shè)計(jì)師只是一個(gè)作圖的工具。

B端產(chǎn)品經(jīng)理的能力模型與學(xué)習(xí)提升

B端產(chǎn)品經(jīng)理面臨的第一大挑戰(zhàn)，是如何正確的分析診斷業(yè)務(wù)問(wèn)題。 這也是最難的部分，產(chǎn)品設(shè)計(jì)知識(shí)對(duì)這部分工作基本沒(méi)有幫助，如果想做好業(yè)務(wù)分析診斷，必須具備扎實(shí) ...

查看詳情 >

因?yàn)轱w書(shū)在我看來(lái)之前是異常重視用戶體驗(yàn)，從我們梳理他們的設(shè)計(jì)改版開(kāi)始，你會(huì)發(fā)現(xiàn)整個(gè)管理后臺(tái)產(chǎn)品都在往著好的方向發(fā)展。

但即使這樣，設(shè)計(jì)師也被裁員，會(huì)讓我們感到困惑，問(wèn)題到底出在哪里？

同時(shí)，這樣大量且優(yōu)質(zhì)的設(shè)計(jì)師被裁過(guò)后，也會(huì)造成行業(yè)的踩踏效應(yīng)。對(duì)于普通的設(shè)計(jì)師而言，行業(yè)內(nèi)卷，求職會(huì)異常艱難，相信在那段時(shí)間求職的同學(xué)、特別是在北京的同學(xué)都會(huì)有感悟，真的是異常艱難。

2. Salesforce 產(chǎn)品更新

在五月份時(shí)，沉寂許久的 Salesforce 迎來(lái)了其新版本的視覺(jué)更新，這是 Salesforce 成立以來(lái)，做的最大維度的更新。

首先整體頁(yè)面樣式經(jīng)歷了調(diào)整，從之前帶有上世紀(jì) 90 年代風(fēng)格轉(zhuǎn)變?yōu)楦鼮槌墒?、商?wù)化的風(fēng)格，這使得整個(gè)界面的協(xié)調(diào)性得以增強(qiáng)，這也符合目前 B 端產(chǎn)品的視覺(jué)風(fēng)格發(fā)展趨勢(shì)。

其次頁(yè)面之中有效減少了信息干擾，讓頁(yè)面內(nèi)容能夠清晰地呈現(xiàn)于用戶眼前。

同時(shí)針對(duì)元素圓角，將其增大。不過(guò)就我個(gè)人而言，不太欣賞整體圓角加大的設(shè)計(jì)，因?yàn)楦杏X(jué)這與 Salesforce 的整體品牌形象不夠契合。

最后會(huì)發(fā)現(xiàn)，這次修改主要集中在界面樣式方面，對(duì)信息結(jié)構(gòu)以及界面布局并沒(méi)有作出大規(guī)模的變動(dòng)，我猜測(cè)他們是不敢做、也不能做。一個(gè)小的改動(dòng)對(duì)于 Salesforce 這個(gè)龐然巨獸來(lái)說(shuō)影響都會(huì)非常的大。

這里，想和大家一同聊聊 Salesforce 更新的原因竟是什么？

我認(rèn)為，一方面是產(chǎn)品自身迭代的內(nèi)在需求，確實(shí)需要進(jìn)行 Style 層面的更新維護(hù)；

另一方面則是為新推出的 AI 功能進(jìn)行鋪墊，想試圖借助嶄新的視覺(jué)形象，吸引更多用戶去使用 AI 功能。這也是很多產(chǎn)品更新常用的手段，比如早些年的微信也經(jīng)常這樣用游戲來(lái)吸引用戶進(jìn)行升級(jí)。

3. 釘釘商業(yè)化變現(xiàn)

在我們看來(lái)，一個(gè)良好的 B 端產(chǎn)品，一定是需要擁有更理想的商業(yè)模式，而釘釘?shù)纳虡I(yè)化就顯得更為順利。

釘釘自從在阿里被獨(dú)立出過(guò)后，幾次發(fā)布會(huì)都在強(qiáng)調(diào)自己的在商業(yè)模式上的進(jìn)展和變化。

• 在 PLG 方面，不斷提升基礎(chǔ)功能和復(fù)雜的流程管理，這讓更多的 ISV 企業(yè)入駐，打造完善的生態(tài)；
• 在 SLG 方面，會(huì)為企業(yè)提供更為完整的數(shù)字化解決方案，保證產(chǎn)品的高效運(yùn)轉(zhuǎn)。

從整體來(lái)看會(huì)發(fā)現(xiàn)釘釘對(duì)于用戶的態(tài)度也會(huì)有所轉(zhuǎn)變，從原來(lái) 以“老板為核心”變?yōu)楝F(xiàn)在以“要考慮員工感受”，也說(shuō)明整個(gè) B 端產(chǎn)品整體的發(fā)展路徑就應(yīng)該如此。

所以很多企業(yè)都是在產(chǎn)品初期，經(jīng)歷過(guò)混沌的時(shí)期過(guò)后才會(huì)需要 B 端設(shè)計(jì)師。

4. 設(shè)計(jì)行業(yè)整體氛圍較差

聊到公眾號(hào)文章，也順帶說(shuō)說(shuō)今年的設(shè)計(jì)氛圍和往年相比是更差的。

你會(huì)發(fā)現(xiàn)大家都不太愿意更新文章，無(wú)論是設(shè)計(jì)大會(huì)又或者是設(shè)計(jì)文章分享，最近能閱讀的東西真的很少，這會(huì)導(dǎo)致大家的交流異常的匱乏。

從我整理過(guò)去 B 端行業(yè)的資料來(lái)看，這兩年的資源更新是非常少的。

二、市場(chǎng)環(huán)境

我們簡(jiǎn)單聊聊市場(chǎng)環(huán)境，對(duì)于整個(gè)互聯(lián)網(wǎng)行業(yè)來(lái)說(shuō)，你會(huì)發(fā)現(xiàn)整體都是異常蕭條。

無(wú)論是 C 端產(chǎn)品的增長(zhǎng)乏力也好、又或者是 B 端產(chǎn)品的行業(yè)不景氣也罷，總之過(guò)去一年大家整體過(guò)得都比較艱難。對(duì)于設(shè)計(jì)行業(yè)的各位來(lái)說(shuō)，我們目前的狀態(tài)其實(shí)都是茍著～

因?yàn)樵O(shè)計(jì)師很難做到雪中送炭，也就是通過(guò)一個(gè)設(shè)計(jì)點(diǎn)，真正為企業(yè)、為產(chǎn)品創(chuàng)造更多的收入，所以這也就導(dǎo)致我們目前的處境十分尷尬。

你會(huì)發(fā)現(xiàn)大家在各個(gè)媒體上都在勸退 B 端設(shè)計(jì)師，說(shuō)這是一個(gè)夕陽(yáng)行業(yè)。

但這里想對(duì)剛?cè)胄械男氯硕嗾f(shuō)兩句。目前經(jīng)濟(jì)環(huán)境，任何行業(yè)都會(huì)有勸退的人，你要做的是去分析目前自己的選擇，也就是如果我不做 B 端設(shè)計(jì)師，我還有其他什么選擇？

比如你學(xué)習(xí)的是 環(huán)藝設(shè)計(jì)、城市規(guī)劃設(shè)計(jì) 等相關(guān)專(zhuān)業(yè)，又或者是你自己已經(jīng)在 B 端工作多年，那可能 B 端設(shè)計(jì)師或許還是一個(gè)相對(duì)求職容易的行業(yè)，尋找明確的方向，就能獲得行業(yè)當(dāng)中的一些回報(bào)。

本來(lái)想說(shuō)很多，但想想還是算了，今年的就業(yè)形勢(shì)確實(shí)有所回暖，我們可以期待一波～

三、2025 年 B 端產(chǎn)品的發(fā)展趨勢(shì)

對(duì)于 2025 年，我們會(huì)認(rèn)為有以下幾個(gè)發(fā)展趨勢(shì)：

1. B 端產(chǎn)品 AI 化

AI是目前行業(yè)當(dāng)中最迅猛的趨勢(shì)，B端產(chǎn)品也不例外。

對(duì)于很多B端產(chǎn)品而言，AI的出現(xiàn)優(yōu)化了用戶在日常工作當(dāng)中使用繁瑣的問(wèn)題，在許多B端產(chǎn)品當(dāng)中，都會(huì)把AI當(dāng)做是最為重要的產(chǎn)品功能。

比如我們之前總結(jié)過(guò)的：Salesforce、金碟、飛書(shū)，又或者是在阿里、騰訊內(nèi)部的很多系統(tǒng)，都會(huì)通過(guò)AI的方式加以介入，來(lái)確保產(chǎn)品的高效使用。

在未來(lái)一年，我們要多去考慮 AI與語(yǔ)音交互、低代碼產(chǎn)品、配置類(lèi)系統(tǒng)之間的碰撞，在未來(lái)肯定會(huì)有著更為不錯(cuò)的發(fā)展。

2. 無(wú)代碼/低代碼產(chǎn)品

行業(yè)當(dāng)中有著非常多的無(wú)代碼產(chǎn)品，原因在于國(guó)內(nèi)的大多數(shù)系統(tǒng)，我們會(huì)發(fā)現(xiàn)通常都需要通過(guò)定制化的方式來(lái)進(jìn)行處理。為此，行業(yè)當(dāng)中就出現(xiàn)了較多的無(wú)代碼產(chǎn)品，將產(chǎn)品的功能提供給用戶進(jìn)行配置和相應(yīng)使用。比如常見(jiàn)的有釘釘宜搭，又或者是騰訊的微搭等等。這類(lèi)產(chǎn)品的類(lèi)型非常多。

但在行業(yè)中，有人會(huì)覺(jué)得這類(lèi)型的產(chǎn)品不適用于小團(tuán)隊(duì)的管理。因?yàn)槿绻旧硎切F(tuán)隊(duì)，需求整體沒(méi)有那么大。因此在行業(yè)里還會(huì)存在像多維表格這樣的系統(tǒng)來(lái)進(jìn)行相應(yīng)的呈現(xiàn)。

所以我們會(huì)發(fā)現(xiàn)，這類(lèi)型的產(chǎn)品其實(shí)是市場(chǎng)大環(huán)境所需。在未來(lái)一年，個(gè)人認(rèn)為類(lèi)似多維表格、Airtable 這類(lèi)型的產(chǎn)品會(huì)更受大家歡迎。因?yàn)樗鼈兡軌蚝芰鲿车嘏c AI 進(jìn)行結(jié)合，同時(shí)整個(gè)產(chǎn)品的規(guī)模結(jié)構(gòu)也沒(méi)有那么大，更容易被用戶所接受。

3. 產(chǎn)品出海

產(chǎn)品出海是一個(gè)老生常談的話題，很早之前我們就有談到。由于國(guó)內(nèi)市場(chǎng)競(jìng)爭(zhēng)激烈，而且對(duì)于應(yīng)對(duì)市場(chǎng)需求已經(jīng)有了豐富的經(jīng)驗(yàn)，很多企業(yè)將自己方向轉(zhuǎn)向國(guó)外。比如最早飛書(shū)推出的國(guó)際版本Lark，ONES推出偏向研發(fā)管理相關(guān)的國(guó)際版本，以及小鵝通推出的付費(fèi)國(guó)際版（這還挺影響我們國(guó)外同學(xué)學(xué)習(xí)聽(tīng)課…）

由于國(guó)內(nèi)產(chǎn)品研發(fā)效率快，人力成本相對(duì)較低，所以能以更低的價(jià)格吸引到國(guó)外的用戶。與此同時(shí)，國(guó)外對(duì)于整個(gè)產(chǎn)品付費(fèi)的意愿比較高，產(chǎn)品出海有著廣闊的發(fā)展空間。

除了以上提到的互聯(lián)網(wǎng)產(chǎn)品出海外，我發(fā)現(xiàn)很多國(guó)內(nèi)的越來(lái)越多的企業(yè)也開(kāi)始跨國(guó)經(jīng)營(yíng)。面對(duì)出海發(fā)展的挑戰(zhàn)，數(shù)字化平臺(tái)的建設(shè)和應(yīng)用就成了這些企業(yè)的剛需，會(huì)去設(shè)計(jì)開(kāi)發(fā)相應(yīng)的海外系統(tǒng)和軟件。

所以在目前的整個(gè)求職階段中，如果你在沿海城市，在工作中一定要考慮到英文的環(huán)境。在你的作品集里也可以適當(dāng)?shù)卣故疽恍в杏⑽牡捻?xiàng)目，并展示自己的國(guó)際化和本土化的設(shè)計(jì)能力

4. 跨境電商

除了常規(guī)的產(chǎn)品出海，還會(huì)有很多跨境電商相關(guān)的業(yè)務(wù)，這些業(yè)務(wù)也需要對(duì)應(yīng)的管理系統(tǒng)。

比如行業(yè)當(dāng)中常見(jiàn)的貨代，需要有與之對(duì)應(yīng)的海外倉(cāng)儲(chǔ)物流相關(guān)系統(tǒng)來(lái)配套。而且國(guó)內(nèi)的很多相關(guān)產(chǎn)品其實(shí)都需要海外版本進(jìn)行對(duì)應(yīng)的維護(hù)。在這些系統(tǒng)當(dāng)中，我見(jiàn)過(guò)最為奇特的便是國(guó)外網(wǎng)紅的 MCN 系統(tǒng)。

因?yàn)楹芏嚯娚填?lèi)的產(chǎn)品都需要考慮廣告投放相關(guān)事宜，因此會(huì)使用對(duì)應(yīng)的 MCN 系統(tǒng)來(lái)管理不同的網(wǎng)紅。這類(lèi)系統(tǒng)其實(shí)在海外場(chǎng)景當(dāng)中是非常常見(jiàn)的。所以很多從事跨境電商相關(guān)業(yè)務(wù)的產(chǎn)品想要拓展海外市場(chǎng)，可以去考慮跨境電商相關(guān)業(yè)務(wù)拓展。

隨著電動(dòng)車(chē)的發(fā)展，駕艙也越來(lái)越智能，對(duì)設(shè)計(jì)的要求也越來(lái)越高。從一開(kāi)始的只是展示信息，到現(xiàn)在的情感陪伴、多感官交互，這篇文章，我們來(lái)看看都有哪些變化。

在科技飛速發(fā)展的今天，汽車(chē)已不再僅僅是一種交通工具，更是人們生活中的重要伙伴。隨著人機(jī)交互技術(shù)的不斷進(jìn)步，智能駕艙多感官交互正從滿足傳統(tǒng)的安全駕駛需求逐漸轉(zhuǎn)變?yōu)樘峁┯星楦械闹悄?AI 陪伴需求，為駕駛者帶來(lái)全新的出行體驗(yàn)。

一、傳統(tǒng)安全駕駛需求下的智能駕艙

在過(guò)去，智能駕艙的主要功能是確保駕駛的安全。通過(guò)先進(jìn)的傳感器、顯示屏和控制系統(tǒng)，為駕駛者提供車(chē)輛狀態(tài)信息、導(dǎo)航指引和安全警示等。例如，高清數(shù)字儀表盤(pán)能夠清晰地顯示車(chē)速、油耗等關(guān)鍵數(shù)據(jù)，幫助駕駛者隨時(shí)掌握車(chē)輛運(yùn)行情況；倒車(chē)影像和雷達(dá)系統(tǒng)可以在倒車(chē)時(shí)提供清晰的后方視野，降低碰撞風(fēng)險(xiǎn)。然而，這種以安全為核心的智能駕艙雖然滿足了基本的駕駛需求，但缺乏情感互動(dòng)和個(gè)性化體驗(yàn)。

二、向情感智能 AI 陪伴需求的轉(zhuǎn)變

1. 情感識(shí)別與回應(yīng)

如今的智能駕艙多感官交互技術(shù)能夠?qū)崿F(xiàn)對(duì)駕駛者情感狀態(tài)的識(shí)別。車(chē)內(nèi)的攝像頭和傳感器可以捕捉駕駛者的面部表情、語(yǔ)音語(yǔ)調(diào)、身體動(dòng)作等信息，分析其情緒變化。當(dāng)檢測(cè)到駕駛者疲勞時(shí)，智能 AI 會(huì)發(fā)出溫馨的提醒，建議休息或播放輕松的音樂(lè)來(lái)緩解疲勞；當(dāng)駕駛者感到焦慮或緊張時(shí)，智能 AI 可以通過(guò)調(diào)節(jié)燈光顏色、播放舒緩的音樂(lè)或者講述有趣的故事來(lái)幫助駕駛者放松心情。

智能 AI 還能根據(jù)駕駛者的情緒做出個(gè)性化的回應(yīng)。例如，如果駕駛者心情愉快，智能 AI 可能會(huì)播放歡快的音樂(lè)并與駕駛者進(jìn)行愉快的交流；如果駕駛者情緒低落，智能 AI 則會(huì)給予安慰和鼓勵(lì)，讓駕駛者感受到被理解和關(guān)心。

2. 個(gè)性化交互體驗(yàn)

基于對(duì)駕駛者的了解，智能駕艙可以提供高度個(gè)性化的交互體驗(yàn)。智能 AI 會(huì)記住駕駛者的喜好，如喜歡的音樂(lè)類(lèi)型、溫度設(shè)置、座椅調(diào)節(jié)角度等，并在駕駛者上車(chē)時(shí)自動(dòng)調(diào)整到相應(yīng)的狀態(tài)。這種個(gè)性化的服務(wù)讓駕駛者感受到車(chē)輛是為自己量身定制的，增強(qiáng)了駕駛者與車(chē)輛之間的情感連接。

B端產(chǎn)品經(jīng)理的能力模型與學(xué)習(xí)提升

B端產(chǎn)品經(jīng)理面臨的第一大挑戰(zhàn)，是如何正確的分析診斷業(yè)務(wù)問(wèn)題。 這也是最難的部分，產(chǎn)品設(shè)計(jì)知識(shí)對(duì)這部分工作基本沒(méi)有幫助，如果想做好業(yè)務(wù)分析診斷，必須具備扎實(shí) ...

查看詳情 >

智能 AI 還可以根據(jù)駕駛者的日常習(xí)慣和興趣愛(ài)好提供個(gè)性化的建議和服務(wù)。比如，如果駕駛者經(jīng)常在周末去郊外游玩，智能 AI 可能會(huì)在周末來(lái)臨前推薦適合的郊游地點(diǎn)和路線；如果駕駛者喜歡聽(tīng)某一類(lèi)型的廣播節(jié)目，智能 AI 會(huì)在合適的時(shí)間自動(dòng)播放該節(jié)目。

3. 增強(qiáng)社交互動(dòng)

智能駕艙不再是一個(gè)孤立的空間，而是可以與外界進(jìn)行社交互動(dòng)的平臺(tái)。通過(guò)車(chē)聯(lián)網(wǎng)技術(shù)，駕駛者可以與家人、朋友保持聯(lián)系，分享自己的行程和感受。例如，在行駛過(guò)程中，駕駛者可以通過(guò)語(yǔ)音指令發(fā)送消息給朋友，或者與家人進(jìn)行視頻通話。

智能 AI 還可以組織車(chē)內(nèi)的社交活動(dòng)，增強(qiáng)駕駛者與乘客之間的互動(dòng)。例如，在長(zhǎng)途旅行中，智能 AI 可以發(fā)起游戲或話題討論，讓大家在旅途中充滿樂(lè)趣。

4. 陪伴成長(zhǎng)與學(xué)習(xí)

對(duì)于長(zhǎng)期駕駛者來(lái)說(shuō)，智能駕艙可以成為一個(gè)陪伴成長(zhǎng)與學(xué)習(xí)的伙伴。智能 AI 可以記錄駕駛者的駕駛習(xí)慣和技能提升過(guò)程，提供針對(duì)性的駕駛建議和培訓(xùn)。例如，當(dāng)駕駛者在某個(gè)駕駛操作上存在不足時(shí)，智能 AI 會(huì)及時(shí)指出并提供改進(jìn)方法。

智能 AI 還可以提供各種知識(shí)和信息，滿足駕駛者的學(xué)習(xí)需求。比如，在等待紅綠燈的間隙，智能 AI 可以播放一段新聞、歷史故事或者科普知識(shí)，讓駕駛者在碎片化的時(shí)間里不斷學(xué)習(xí)和成長(zhǎng)。

三、多感官交互技術(shù)的支持

1. 視覺(jué)交互

高清顯示屏和數(shù)字儀表盤(pán)不僅可以提供車(chē)輛信息，還可以展示溫馨的畫(huà)面和個(gè)性化的主題，根據(jù)駕駛者的情緒和喜好進(jìn)行變化。例如，當(dāng)駕駛者心情愉悅時(shí)，顯示屏可以呈現(xiàn)出絢麗的色彩和歡快的動(dòng)畫(huà)；當(dāng)駕駛者需要放松時(shí)，顯示屏可以切換到寧?kù)o的自然風(fēng)景畫(huà)面。

氛圍燈的運(yùn)用也為情感交互增添了色彩。不同顏色的氛圍燈可以反映不同的情緒狀態(tài)，營(yíng)造出相應(yīng)的氛圍。比如，藍(lán)色的氛圍燈可以帶來(lái)寧?kù)o的感覺(jué)，紅色的氛圍燈可以增加活力和激情。

2. 聽(tīng)覺(jué)交互

高品質(zhì)的音響系統(tǒng)可以播放各種類(lèi)型的音樂(lè)和聲音，滿足駕駛者不同的情感需求。智能 AI 可以根據(jù)駕駛者的情緒選擇合適的音樂(lè)播放列表，或者根據(jù)場(chǎng)景自動(dòng)調(diào)整音樂(lè)的風(fēng)格和音量。

語(yǔ)音交互更加自然和親切。智能 AI 的語(yǔ)音不再是機(jī)械的合成音，而是具有情感色彩的聲音，能夠更好地與駕駛者進(jìn)行交流和互動(dòng)。

3. 觸覺(jué)交互

座椅的按摩功能和溫度調(diào)節(jié)可以根據(jù)駕駛者的身體狀況和情緒進(jìn)行調(diào)整，提供舒適的駕駛體驗(yàn)。例如，當(dāng)駕駛者感到疲勞時(shí)，座椅可以自動(dòng)啟動(dòng)按摩功能，幫助駕駛者放松身體。

方向盤(pán)和控制面板的觸摸反饋更加靈敏和個(gè)性化，讓駕駛者在操作過(guò)程中感受到與車(chē)輛的互動(dòng)。

4. 嗅覺(jué)交互

香氛系統(tǒng)可以釋放不同的氣味，調(diào)節(jié)車(chē)內(nèi)的氛圍。智能 AI 可以根據(jù)駕駛者的情緒和喜好選擇合適的香氛，如清新的花香可以帶來(lái)愉悅的感覺(jué)，舒緩的草本香可以幫助駕駛者放松心情。

四、未來(lái)展望

隨著技術(shù)的不斷進(jìn)步，智能駕艙多感官交互將在滿足情感智能 AI 陪伴需求方面發(fā)揮更大的作用。未來(lái)的智能駕艙將更加智能化、個(gè)性化和人性化，成為駕駛者真正的情感伙伴。汽車(chē)制造商和科技企業(yè)將不斷創(chuàng)新和完善多感官交互技術(shù)，為駕駛者帶來(lái)更加豐富、溫暖的出行體驗(yàn)。

五、結(jié)論

從滿足安全駕駛需求到提供有情感的智能AI陪伴需求，智能駕艙多感官交互的發(fā)展為汽車(chē)行業(yè)帶來(lái)了新的機(jī)遇和挑戰(zhàn)。通過(guò)情感識(shí)別、個(gè)性化交互、增強(qiáng)社交互動(dòng)和多感官技術(shù)的支持，智能駕艙將成為駕駛者生活中不可或缺的一部分，為人們的出行帶來(lái)更多的樂(lè)趣和溫暖。

Bento UI其實(shí)流行已經(jīng)有一段時(shí)間了，但是近一兩年來(lái)才展現(xiàn)出發(fā)展的勢(shì)頭，Bento UI的體驗(yàn)和用戶友好性在設(shè)計(jì)中的價(jià)值不斷被認(rèn)識(shí)與驗(yàn)證。本文就Bento UI設(shè)計(jì)風(fēng)格進(jìn)行分析總結(jié)，希望能給你一些啟發(fā)。

Bento UI的流行已經(jīng)有一段時(shí)間，但直到最近一兩年，它才真正展現(xiàn)出強(qiáng)勁的發(fā)展勢(shì)頭。這是因?yàn)樵O(shè)計(jì)師們逐漸認(rèn)識(shí)到，Bento UI的體驗(yàn)和用戶友好性在設(shè)計(jì)中的價(jià)值。

關(guān)于Bento UI的起源存在一些爭(zhēng)議，就像許多設(shè)計(jì)趨勢(shì)一樣。有人認(rèn)為Bento UI的成功應(yīng)歸功于蘋(píng)果公司，因?yàn)樘O(píng)果在其UI元素中采用了類(lèi)似的風(fēng)格。另一些人則指出，微軟的Metro UI實(shí)際上就是Bento UI的一種體現(xiàn)。不管它的來(lái)源如何，毋庸置疑，Bento UI正變得越來(lái)越受歡迎。隨著其使用量的增加，它作為一種UI風(fēng)格的可靠性也在不斷得到驗(yàn)證。

一、什么是Bento UI ？

Bento UI 的靈感來(lái)自便當(dāng)盒（一種精心布置且視覺(jué)上吸引人的日本料理）概念，提供了令人耳目一新的設(shè)計(jì)。它不僅僅是一個(gè)設(shè)計(jì)框架，而是一種兼顧用戶需求和視覺(jué)吸引力的整體理念。這篇文章讓我?guī)闵钊胙芯恳幌?Bento UI 如何實(shí)現(xiàn)實(shí)用性與美觀的相互融合。

二、Bento UI設(shè)計(jì)有什么優(yōu)點(diǎn) ？

Bento UI設(shè)計(jì)的優(yōu)點(diǎn)多種多樣，它將實(shí)用性和美學(xué)完美融合，為用戶帶來(lái)出色的體驗(yàn)。

B 端產(chǎn)品經(jīng)理如何快速成長(zhǎng)？

產(chǎn)品與業(yè)務(wù)架構(gòu)主要是將整個(gè)業(yè)務(wù)工作流進(jìn)行分層，梳理，然后抽象出一個(gè)個(gè)需求，將業(yè)務(wù)需求與產(chǎn)品合情合理的映射起來(lái)，最終使業(yè)務(wù)數(shù)據(jù)在產(chǎn)品中流動(dòng)，執(zhí)行，記錄，使用。

查看詳情 >

1. 強(qiáng)調(diào)模塊化和可重用性： Bento UI將界面元素拆分為模塊化的組件，使得設(shè)計(jì)師可以輕松地組合、調(diào)整和重用這些組件，從而提高了設(shè)計(jì)效率和一致性。

2. 簡(jiǎn)潔而美觀的外觀： Bento UI注重簡(jiǎn)約、現(xiàn)代和美學(xué)的結(jié)合，帶來(lái)干凈、清晰且視覺(jué)吸引人的界面。這有助于提升用戶的第一印象，增加用戶停留時(shí)間和參與度。

3. 良好的用戶體驗(yàn)： Bento UI注重用戶導(dǎo)向，通過(guò)清晰的布局、直觀的導(dǎo)航和有趣的交互元素，為用戶創(chuàng)造出愉悅和流暢的瀏覽體驗(yàn)。

4. 強(qiáng)化品牌形象： Bento UI可以根據(jù)品牌的風(fēng)格和價(jià)值觀進(jìn)行定制，從而增強(qiáng)品牌在用戶心中的形象和認(rèn)知。一致的設(shè)計(jì)元素有助于塑造品牌的獨(dú)特性。

5. 強(qiáng)調(diào)交互和動(dòng)畫(huà)： Bento UI強(qiáng)調(diào)微交互和動(dòng)畫(huà)效果，為用戶創(chuàng)造出更加生動(dòng)和有趣的互動(dòng)體驗(yàn)。這不僅吸引用戶的注意，還增強(qiáng)了用戶的參與感。

6. 提升移動(dòng)設(shè)備體驗(yàn)： Bento UI通常是響應(yīng)式的，可以自適應(yīng)不同的屏幕尺寸和設(shè)備類(lèi)型。這為移動(dòng)用戶提供了更好的體驗(yàn)，無(wú)論是在手機(jī)、平板還是桌面電腦上。

三、我該如何在我的項(xiàng)目中使用Bento UI？

要設(shè)計(jì)出成功的Bento UI，首先需要理解其核心原則。簡(jiǎn)約、模塊化和活力交互是Bento UI的靈魂。簡(jiǎn)約的設(shè)計(jì)風(fēng)格能夠使界面更加清晰明了，而模塊化的組件則讓設(shè)計(jì)師能夠靈活構(gòu)建頁(yè)面，快速滿足不同需求?；盍换ィ▌?dòng)畫(huà)效果和微交互，能夠增強(qiáng)用戶與界面的互動(dòng)感，提升用戶體驗(yàn)。

1. 構(gòu)建清晰的布局

在Bento UI中，清晰的布局是至關(guān)重要的。界面元素應(yīng)該有明確的排列，避免過(guò)于擁擠和混亂。通過(guò)合理的分區(qū)和對(duì)齊，可以將信息有序地呈現(xiàn)給用戶，使其能夠快速獲取所需信息。此外，清晰的布局還能夠增強(qiáng)用戶的舒適感，使其更樂(lè)意與界面互動(dòng)。

2. 運(yùn)用鮮明的顏色和圖標(biāo)

Bento UI倡導(dǎo)使用鮮明的顏色和獨(dú)特的圖標(biāo)設(shè)計(jì)。色彩可以傳達(dá)情感和品牌特點(diǎn)，因此選擇適合項(xiàng)目風(fēng)格的顏色是至關(guān)重要的。同時(shí)，圖標(biāo)作為界面的視覺(jué)元素，能夠直觀地傳達(dá)信息，提高用戶的使用效率。確保顏色和圖標(biāo)的使用既美觀又有意義，能夠?yàn)橛脩魩?lái)更好的視覺(jué)體驗(yàn)。

3. 創(chuàng)造有趣的交互效果

Bento UI的動(dòng)畫(huà)效果和微交互是設(shè)計(jì)中的亮點(diǎn)之一。動(dòng)畫(huà)可以增強(qiáng)用戶與界面的互動(dòng)感，使用戶感受到界面的活力。微交互則能夠提供反饋，引導(dǎo)用戶完成操作。設(shè)計(jì)師可以巧妙地運(yùn)用過(guò)渡效果、淡入淡出和其他動(dòng)畫(huà)元素，使界面變得更加生動(dòng)有趣。

4. 保持一致性和用戶友好性

在整個(gè)設(shè)計(jì)過(guò)程中，保持一致性和用戶友好性至關(guān)重要。界面的風(fēng)格、字體和元素應(yīng)該保持統(tǒng)一，以確保用戶在瀏覽不同頁(yè)面時(shí)能夠感受到一致的視覺(jué)效果。另外，界面的導(dǎo)航和操作也應(yīng)該簡(jiǎn)單明了，讓用戶能夠輕松找到所需內(nèi)容。

一些案例：

iPhone 14 Pro介紹頁(yè)面中，您將看到以這種方式呈現(xiàn)的高級(jí)功能介紹，并通??過(guò)多種視覺(jué)處理來(lái)保持有趣。雖然有不同的視覺(jué)處理，但由于使用大小和漸變文本有效地引導(dǎo)用戶的眼睛，內(nèi)容不會(huì)相互沖突。

Bolt對(duì)每個(gè)圖塊使用了更加一致的視覺(jué)方法，以使內(nèi)容更易于瀏覽。這對(duì)于傳達(dá)功能并引導(dǎo)他們?cè)谧詈蟛榭锤鄡?nèi)容非常有用！

Linear的設(shè)計(jì)師也采用了Bento UI的設(shè)計(jì)風(fēng)格，我個(gè)人很喜歡他們這樣的設(shè)計(jì)。

Iconwerk使用Bento UI風(fēng)格來(lái)展示他們最好的圖標(biāo)設(shè)計(jì)。每個(gè)內(nèi)容框都保持得非常小，這樣當(dāng)它們?nèi)糠旁谝黄饡r(shí)，就不會(huì)感到擁擠。
Traf使用Bento UI以時(shí)尚的深色主題設(shè)計(jì)來(lái)布局他的作品集作品。

四、我應(yīng)該為我的項(xiàng)目使用Bento UI嗎？

是否選擇應(yīng)用Bento UI取決于您的項(xiàng)目需求和目標(biāo)。如果您追求引人入勝的界面、活力的交互和用戶友好性，Bento UI可能是一個(gè)理想的選擇。特別是對(duì)于品牌展示、產(chǎn)品推廣和互動(dòng)性強(qiáng)的網(wǎng)頁(yè)，Bento UI能夠?yàn)槟捻?xiàng)目增添獨(dú)特的魅力和吸引力。然而，設(shè)計(jì)師應(yīng)該根據(jù)項(xiàng)目特點(diǎn)，靈活運(yùn)用Bento UI的元素，以確保最終的設(shè)計(jì)能夠滿足用戶需求并達(dá)到預(yù)期效果。

但是Bento UI并非適用于所有項(xiàng)目。它最適合于擁有簡(jiǎn)潔層次結(jié)構(gòu)的項(xiàng)目，因此，如果您的項(xiàng)目層次結(jié)構(gòu)較為復(fù)雜，Bento UI可能并不適合。不過(guò)，如果您的項(xiàng)目存在復(fù)雜層次結(jié)構(gòu)，或許是時(shí)候改變這一現(xiàn)狀了。

Bento UI的設(shè)計(jì)和感覺(jué)極具現(xiàn)代氛圍，我預(yù)測(cè)它將在未來(lái)一段時(shí)間內(nèi)持續(xù)受歡迎。隨著蘋(píng)果等專(zhuān)業(yè)設(shè)計(jì)團(tuán)隊(duì)的使用還有諸如Vision Pro等新技術(shù)的出現(xiàn)，它甚至可能發(fā)展成我們目前尚未能夠預(yù)見(jiàn)的新形態(tài)。

結(jié)語(yǔ)

Bento UI是一種引人注目的設(shè)計(jì)風(fēng)格，簡(jiǎn)約美學(xué)、動(dòng)感交互和模塊化創(chuàng)造力為設(shè)計(jì)帶來(lái)了新的可能性。作為一種新興的設(shè)計(jì)趨勢(shì)，Bento UI正在成為越來(lái)越多設(shè)計(jì)師和品牌的選擇。

通過(guò)將Bento UI的理念融入設(shè)計(jì)中，我們能夠?yàn)橛脩魟?chuàng)造出令人難忘的體驗(yàn)，將品牌價(jià)值傳達(dá)得更加生動(dòng)而深刻，從而實(shí)現(xiàn)更好的用戶參與和品牌傳播效果。