B端究竟需要什么樣的產(chǎn)品經(jīng)理？
在B端產(chǎn)品設(shè)計(jì)的世界里，色彩不僅僅是視覺(jué)元素，它還承載著信息傳遞、用戶(hù)體驗(yàn)和品牌識(shí)別的重要角色。本文深入探討了色彩空間理論在B端設(shè)計(jì)中的應(yīng)用，從基礎(chǔ)的色彩空間概念到如何在實(shí)際工作中運(yùn)用這些理論，為設(shè)計(jì)師提供了一套科學(xué)的顏色搭配和管理方法。
對(duì)于 B 端產(chǎn)品而言，我們經(jīng)常會(huì)和顏色進(jìn)行斗爭(zhēng)。
比如在工作當(dāng)中，開(kāi)發(fā)沒(méi)有正確還原顏色、不知道如何進(jìn)行色彩配置、以及對(duì)于 B 端產(chǎn)品而言，究竟應(yīng)該如何協(xié)調(diào)科學(xué)的進(jìn)行顏色的搭配～
最近會(huì)講顏色的部分，整體會(huì)分為四篇文章：B 端設(shè)計(jì)如何理解色彩空間、B 端產(chǎn)品怎樣合理搭配顏色、B 端項(xiàng)目的視覺(jué)風(fēng)格、B 端項(xiàng)目顏色的實(shí)戰(zhàn)技巧。
本篇文章是第一篇，我們先來(lái)聊聊產(chǎn)品配色的基礎(chǔ) 色彩空間與顏色管理。
不知道各位同學(xué)是否遇到這種情況，當(dāng)你在調(diào)整顏色時(shí)，就是在漫無(wú)目的的在拾色器上來(lái)回游走，在被問(wèn)到為什么要選擇這個(gè)顏色時(shí)，也茫然無(wú)措，這時(shí)候的你作何感想？
所以顏色還原需要熟練的掌握色彩空間，并配合屏幕進(jìn)行顏色管理，才能夠讓設(shè)計(jì)順利落地。但顏色其實(shí)過(guò)于抽象，因此我們將整體內(nèi)容進(jìn)行簡(jiǎn)化，多和大家聊聊在理論背后究竟應(yīng)該如何與工作內(nèi)容進(jìn)行結(jié)合。
首先我們先說(shuō)說(shuō)色彩空間。
色彩空間又叫色彩模型，它是為了讓系統(tǒng)能夠準(zhǔn)確地描述顏色、使用顏色，進(jìn)而定義出來(lái)的一種顏色組織方式。
比如有一排隨機(jī)顏色，要按特定規(guī)則排列，你會(huì)怎么做？我相信，我們首先想到的便是按照不同的色相進(jìn)行歸類(lèi)。
如果顏色變?yōu)?0000個(gè)，又該怎么排列呢？因此，為了讓企業(yè)更好地使用顏色、設(shè)計(jì)師更便利地選擇一致的顏色，行業(yè)中便提出了色彩空間的概念。
色彩空間其實(shí)很簡(jiǎn)單。因?yàn)槲覀冃枰褂妙伾?，且不同人群?duì)顏色的需求不同，所以顏色的排列方式會(huì)存在差異。
比如，行業(yè)中較為出名的潘通色彩體系，其實(shí)是基于印刷行業(yè)制定的一種特殊色彩空間；CMYK是為印刷從業(yè)者提供的、便于他們更好地進(jìn)行物料印刷的色彩空間；Lab是一種更強(qiáng)調(diào)色彩亮度的色彩空間。
因此，行業(yè)會(huì)根據(jù)顏色的不同規(guī)律和自身使用需求，總結(jié)整理出不同的色彩空間。
我們目前在工作當(dāng)中，主要都是聚焦于屏幕當(dāng)中，因此影響顏色呈現(xiàn)的也就變?yōu)椋?/p>
在我們細(xì)致講解色彩空間的部分時(shí)，我們先來(lái)了解三個(gè)重要的概念。
RGB是顯示器當(dāng)中的顏色基礎(chǔ)。
比如在現(xiàn)實(shí)世界當(dāng)中，我們將手機(jī)屏幕進(jìn)行放大，你會(huì)發(fā)現(xiàn)屏幕都是由紅綠藍(lán)三個(gè)燈管所組成的。
而 RGB 的色彩模式就是模擬現(xiàn)實(shí)世界當(dāng)中的屏幕顯示原理，將燈光照射的邏輯在設(shè)計(jì)軟件當(dāng)中進(jìn)行復(fù)現(xiàn)，因此在 RGB 的調(diào)色盤(pán)中，就會(huì)分別包含三個(gè)輸入框，這便是 紅綠藍(lán)。
其中，數(shù)字 0 代表不發(fā)光、255 則是最亮的燈光。
那為什么最亮是 255，不是 250？或者是 280 呢？
原因在于RGB 所有的顏色，最后都需要通過(guò)計(jì)算機(jī)進(jìn)行運(yùn)算顯示，對(duì)于它說(shuō)并不認(rèn)識(shí) 紅色、藍(lán)色，在它的腦袋里（不對(duì)，CPU 里面）就只有 0 與 1，因此在計(jì)算機(jī)存儲(chǔ)的時(shí)候，一個(gè)字節(jié)也就是 8 個(gè)比特、也就是 2 的八次方、也就是 256，這樣 一個(gè)色彩信息等于一個(gè)字節(jié)，數(shù)據(jù)存儲(chǔ)就會(huì)更加高效。
所以我們所聊的顏色更多指的是代碼層面的顏色設(shè)定。
接著我們打開(kāi) Figma，看到另一種格式 Hex，那我們稱(chēng)之為是 RGB 模式的精簡(jiǎn)版。
因?yàn)樗訔壝總€(gè)輸入框都會(huì)出現(xiàn) 255（255,255,255 白色）實(shí)在太長(zhǎng)，不利于我們?cè)谌粘９ぷ鳟?dāng)中進(jìn)行記錄。
因此將每個(gè)顏色，三位數(shù)值縮減為兩位數(shù)值（十進(jìn)制變?yōu)槭M(jìn)制），就是增加英文字符的數(shù)據(jù)，就能較短的表達(dá)顏色，使得顏色表達(dá)更為高效。
因?yàn)?Hex 只是 RGB 的精簡(jiǎn)版本，所以 Hex 里面，每?jī)蓚€(gè)字符所對(duì)應(yīng)的就是 紅、綠、藍(lán)。
比如我們剛才提到的這個(gè)藍(lán)色，在 RGB 空間當(dāng)中為(0,86,255) ，Hex 則是#0056FF，也是一一對(duì)應(yīng)關(guān)系。
RGB 聽(tīng)上去似乎很美好，但問(wèn)題在于兩點(diǎn)：
1.顏色的調(diào)整不夠直觀：作為設(shè)計(jì)師，我們很難模擬燈光的照射思維對(duì)顏色進(jìn)行調(diào)整，具體應(yīng)該增加多少顏色，其實(shí)是不夠清楚的。我們更熟悉的其實(shí)是：亮度、色相、飽和度，因此在調(diào)色時(shí)會(huì)十分困難。
比如我目前是紅色，那我要調(diào)整到紫色，應(yīng)該輸入多少值呢？其實(shí)我們很難進(jìn)行一個(gè)準(zhǔn)確的判斷。
2.顏色信息與亮度信息的數(shù)據(jù)混合：導(dǎo)致我們很難對(duì)于有一個(gè)準(zhǔn)確的判斷，比如在 RGB 相同的數(shù)值當(dāng)中，明顯會(huì)感受到 黃綠色 與其他顏色的亮度存在較大差異，這樣在調(diào)色時(shí)，顏色一致性偏差較大。
為了解決這些問(wèn)題，就提出一種新的色彩模型：HSB
HSB （也叫 HSV）就是通過(guò)顏色的 色相、飽和度、亮度 來(lái)進(jìn)行表示。
在色相當(dāng)中，由于顏色的呈現(xiàn)是色環(huán)的方式，因此在數(shù)值上是以 0-360 度來(lái)進(jìn)行表示的，在設(shè)計(jì)軟件里面，我們也只能輸入所對(duì)應(yīng)的數(shù)值。
同時(shí)飽和度與亮度都是以百分比的形式進(jìn)行呈現(xiàn)，飽和度越低，相對(duì)應(yīng)就會(huì)給顏色增加白色，使其更灰；亮度越低，就會(huì)增加對(duì)應(yīng)的黑色，讓其更深。
由于 HSB 的色彩空間的分類(lèi)模式非常有利于我們進(jìn)行顏色的調(diào)整，因此我們?cè)谌粘Ｕ{(diào)色時(shí)其實(shí)會(huì)經(jīng)常用到。
比如日常工作當(dāng)中，假設(shè)我們需要設(shè)計(jì)一組圖標(biāo)，根據(jù) HSB 顏色的基本原理，我們其實(shí)只需要調(diào)整不同的色相，就能夠得到不同的圖標(biāo)顏色。
但… 顏色上依舊會(huì)存在問(wèn)題。
你會(huì)發(fā)現(xiàn)當(dāng)我們調(diào)整了色相過(guò)后，整體的顏色并沒(méi)有形成統(tǒng)一。原因在于我們?nèi)搜蹖?duì)于 黃綠色的感知 會(huì)和紅色、藍(lán)色有所不同，我們通常在看黃綠色時(shí)會(huì)更為刺眼，因此在設(shè)計(jì)層面上需要單獨(dú)調(diào)整。
所以在 HSB 當(dāng)中的顏色邏輯上，也并沒(méi)有解決顏色一致性的問(wèn)題。于是在 2021 年 Google 提出一種全新的色彩模式，HCT。
HCT 首先會(huì)將顏色當(dāng)中的 感知度、亮度 進(jìn)行結(jié)合，對(duì)之前的 HSB 重新調(diào)整。
在顏色層面上主要分為：Hue：色相、Chroma：色度、Tone：色調(diào)
色相與色度和之前基本類(lèi)似，但色調(diào)上優(yōu)化了黃綠色凸顯問(wèn)題，讓人眼的感知度也加入到了色彩空間當(dāng)中，使其顏色更為準(zhǔn)確。
同時(shí)色彩空間的呈現(xiàn)，優(yōu)化了顏色漸變的流暢性，我們會(huì)發(fā)現(xiàn)整體的漸變感覺(jué)會(huì)更為自然。
那為什么 Google 想要做 HCT？
其實(shí)因?yàn)?Material Design 當(dāng)中會(huì)強(qiáng)調(diào)設(shè)計(jì)的一致性和靈活性，在功能設(shè)計(jì)上，需要增加一個(gè)根據(jù)屏幕當(dāng)中的圖標(biāo)生成與其風(fēng)格一致的壁紙。
但在之前無(wú)論什么樣的色彩空間都不能準(zhǔn)確的還原顏色。現(xiàn)在就提供了一個(gè)可靠的色彩基礎(chǔ)，能夠讓我們?cè)诓煌脑O(shè)備、平臺(tái)和應(yīng)用場(chǎng)景下，都能夠生成具有一致性的色彩方案，同時(shí)也能更好地適應(yīng)各種主題和風(fēng)格的變化，如亮色模式和暗色模式的切換。
比如，還是以上面這個(gè)案例，我們使用 HSB 與 HCT 對(duì)顏色進(jìn)行的色相的調(diào)整，那得到的結(jié)果明顯會(huì)發(fā)現(xiàn) HCT 會(huì)更加準(zhǔn)確。
那 HCT 就真那么完美無(wú)瑕？
其實(shí)也不然，因?yàn)?HCT 色彩空間出現(xiàn)時(shí)間較晚，所以在使用上也會(huì)有很多問(wèn)題。
這么深?yuàn)W的色彩空間，到底要如何使用？
因?yàn)?HSB 是設(shè)計(jì)師最容易理解的色彩空間，因此我們?cè)谡{(diào)色時(shí)需要根據(jù)數(shù)值來(lái)進(jìn)行顏色的調(diào)教。
比如說(shuō)你的顏色很臟，不夠干凈。其實(shí)就是在強(qiáng)調(diào) HSB 當(dāng)中使用了更多的黑色，我們便可以調(diào)整到這個(gè)色彩空間當(dāng)中，去增加 B 的值（也就是第三個(gè)輸入框）
比如說(shuō)你的字體很灰，不夠明確。
其實(shí)就是在說(shuō) 你的亮度太高，需要減少亮度，也就是 H 的值（也就是第一個(gè)輸入框）
因?yàn)槊恳粋€(gè)屏幕所顯示的顏色其實(shí)都不太相同，因此色彩調(diào)整時(shí)要多看數(shù)據(jù)，觀察數(shù)據(jù)之間的對(duì)比變化。
比如以 B 端產(chǎn)品的中性色為例，現(xiàn)在系統(tǒng)當(dāng)中所使用的正文顏色為 #333333，看到過(guò)后就明確知道顏色深度不夠、顏色也不透氣。
我們就會(huì)按照，先確定顏色色相，為灰色偏藍(lán)色，因此在色相當(dāng)中需要拖動(dòng)色環(huán)找到合適的色相；
緊接著確定飽和度，因?yàn)橐{(lán)色，但不宜過(guò)多，因此整體的數(shù)值只會(huì)在 1-5 之前浮動(dòng)；
最后確定深度，之前顏色過(guò)于淺，需要加深，所以直接減少，變?yōu)?22 左右的數(shù)值。
其次在判斷顏色時(shí)，也會(huì)更具章法。
在多輔助色的情況下，我們可以使用 HCT 對(duì)顏色進(jìn)行判斷。
對(duì)于日常工作來(lái)說(shuō)，我們可以使用 Figma 當(dāng)中的 color Space 插件 進(jìn)行日常的色彩管理。在今后遇到類(lèi)似同類(lèi)型圖標(biāo)時(shí)，我們可以使用 HCT 的方式快速生成發(fā)散色板，幫助我們進(jìn)行色彩搭配。
最后在 B 端系統(tǒng)當(dāng)中，會(huì)存在較多顏色搭配的場(chǎng)景。
像是圖表設(shè)計(jì)、自定義系統(tǒng)主題，原來(lái)只能通過(guò)系統(tǒng)預(yù)設(shè)固定顏色的方式進(jìn)行解決，而現(xiàn)在 Google 也將這套計(jì)算公式開(kāi)源，也就是說(shuō)程序員可以直接引用 HCT 的色彩空間，將顏色配置的權(quán)限給到用戶(hù)，通過(guò)顏色的調(diào)整，呈現(xiàn)用戶(hù)想要的顏色內(nèi)容。
對(duì)于屏幕顯示的色彩空間而言，有部分內(nèi)容我們也是要重點(diǎn)關(guān)注。比如在 B 端設(shè)計(jì)當(dāng)中，色彩還原老是出問(wèn)題，那我們就可以通過(guò)屏幕的色彩空間進(jìn)行判斷。
sRGB（standard Red Green Blue）是由惠普公司和微軟公司共同開(kāi)發(fā)的一種標(biāo)準(zhǔn)色彩空間，目的是提供一種通用的色彩標(biāo)準(zhǔn)，使得在不同的設(shè)備（如顯示器、打印機(jī)等）之間能夠?qū)崿F(xiàn)相對(duì)一致的色彩顯示。
對(duì)于 sRGB 來(lái)說(shuō)，它是我們作為設(shè)計(jì)師最為重要的屏幕顯示色彩空間，因?yàn)樗ㄓ眯詮?qiáng)，所以大多數(shù)普通的電腦顯示器、網(wǎng)頁(yè)瀏覽器等都默認(rèn)采用 sRGB 色彩空間，這樣在瀏覽網(wǎng)頁(yè)、查看普通的數(shù)碼照片時(shí)，可以獲得比較穩(wěn)定的色彩效果。
所以我們?cè)谧鲈O(shè)計(jì)時(shí)，通常都會(huì)將屏幕與軟件，都調(diào)整的 sRGB 的空間當(dāng)中，這樣就能夠最大限度保證色彩的一致。
Display P3 是基于 DCI – P3 色彩空間衍生而來(lái)的，主要用于消費(fèi)級(jí)顯示器設(shè)備。它在 DCI – P3 的基礎(chǔ)上進(jìn)行了一些調(diào)整，以適應(yīng)顯示器的特性。
整體而言 P3 色彩空間顯示出來(lái)的顏色會(huì)更加 生動(dòng)、艷麗，但是這會(huì)和你的設(shè)備密切相關(guān)。目前行業(yè)中只在蘋(píng)果設(shè)備以及部分高端顯示器才會(huì)使用，所以我們?cè)谠O(shè)計(jì)時(shí)需要考慮自己產(chǎn)品的受眾，這一設(shè)備是否普遍使用。
最后，我們總結(jié)一下：
本文由人人都是產(chǎn)品經(jīng)理作者【CE青年】，微信公眾號(hào)：【CE青年Youthce】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于 CC0 協(xié)議。
蘭亭妙微(www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在視覺(jué)設(shè)計(jì)的世界里，色彩不僅僅是一種裝飾，它是傳達(dá)情感、影響情緒和吸引用戶(hù)的關(guān)鍵。本文深入探討了色彩在界面設(shè)計(jì)中的重要性，揭示了如何通過(guò)色彩的定義、屬性、模型以及在不同場(chǎng)景下的應(yīng)用來(lái)增強(qiáng)設(shè)計(jì)的吸引力。
色彩在我們?nèi)粘ＴO(shè)計(jì)中起著定生死的作用，它是設(shè)計(jì)的靈魂，舒適的色彩搭配可以讓設(shè)計(jì)師一遍定稿，感覺(jué)在自己的設(shè)計(jì)生涯中，大部分都是在與色彩的博弈中度過(guò)的，雖然客戶(hù)可能不懂色彩原理，可是客戶(hù)天生都是色彩的感受家，什么樣的色彩搭配美，通常他們瞄一眼就會(huì)有定論，不用你去辯解太多，不好的搭配，縱使有千萬(wàn)種理由，也說(shuō)服不了客戶(hù)，所以好好研究色彩以及每一種色彩傳遞的情感對(duì)我們做好設(shè)計(jì)至關(guān)重要。
目錄
一、 色彩的定義
二、 色彩的三屬性
三、 色彩的三種常見(jiàn)模型
四、 色彩的語(yǔ)意及它的應(yīng)用
五、 不同場(chǎng)景下的色彩應(yīng)用
六、 色彩在B端設(shè)計(jì)中的作用
七、 B端色彩設(shè)計(jì)使用的原則
1、物理學(xué)角度
色彩是光的屬性，當(dāng)光波通過(guò)物體時(shí)，物體會(huì)吸收某些波長(zhǎng)的光，而反射或透射其他波長(zhǎng)的光，這些被反射或透射的光波長(zhǎng)度決定了我們看到的顏色。
2、心理學(xué)角度
色彩是人腦對(duì)光波長(zhǎng)的視覺(jué)感知，不同的波長(zhǎng)刺激視網(wǎng)膜上不同類(lèi)型的感光細(xì)胞，進(jìn)而產(chǎn)生不同的色彩感覺(jué)。
3、 藝術(shù)學(xué)角度
色彩是藝術(shù)創(chuàng)作的重要元素，它不僅關(guān)乎視覺(jué)感受，還與情感、文化、象征意義相關(guān)聯(lián)。
4、 設(shè)計(jì)學(xué)角度
在設(shè)計(jì)領(lǐng)域，色彩是傳達(dá)信息、影響情緒和創(chuàng)造美感的關(guān)鍵工具。
5、 計(jì)算機(jī)科學(xué)角度
在數(shù)字圖像處理中，色彩通常通過(guò)顏色模型（如RGB、CMYK等）來(lái)定義，這些模型通過(guò)不同比例的原色或色料混合來(lái)表示各種顏色。
色相是指不同顏色之間的差別，即不同顏色的表象和名稱(chēng)，每個(gè)顏色都有自己的專(zhuān)屬I(mǎi)D,如紅、橙、黃、綠、青、藍(lán)、紫等。不同的色別都可用光譜中的波長(zhǎng)來(lái)表示，人的眼睛可分辨出的色別有180種左右。
明度是指色彩的明暗程度。一般在反光率相同的情況下，不同色別的明暗程度不同。如黃色光比紅色光更明亮，而紅色光則比青色光要明亮。
同時(shí)，同一色相在受光強(qiáng)弱或者物體對(duì)光的吸收、反射性能不同的情況下，會(huì)呈現(xiàn)不同的明暗變化和差異。
飽和度（純度）是指同一色別的純凈度和鮮明度的變化。從色光的角度而言，光的波長(zhǎng)單一程度越高，飽和度就會(huì)越高；不同色別所達(dá)到的飽和度不同，一般情況下，紅色的純度可達(dá)到最高，綠色的則相對(duì)較低；同一色相深淺不同的顏色有不同的飽和度；黑白色光的滲入會(huì)導(dǎo)致飽和度和明度發(fā)生變化；通常，照明光線的性質(zhì)、物體表面結(jié)構(gòu)對(duì)光線吸收與反射的性能等因素影響飽和度。
HSB模型也叫HSV模型，其中H代表色相，即顏色的種類(lèi)；S代表飽和度，即顏色的純度；B(V)代表亮度，即顏色的明亮程度。
這種色彩模型是我日常在的設(shè)計(jì)工作中用的最多的一種色彩模型，如果在同色系中如果只想讓他們有細(xì)微的變化，我通常會(huì)通過(guò)調(diào)節(jié)S和B的百分比數(shù)值來(lái)達(dá)到自己想要的目的。
以上就是我在設(shè)計(jì)項(xiàng)目中，運(yùn)用該色彩模型做的一個(gè)實(shí)戰(zhàn)，項(xiàng)目中用到了一個(gè)圖形，需要用同色系來(lái)表達(dá)，我保持了H色值的不變，讓S值和B值都發(fā)生著微妙的不同，于是就產(chǎn)生了四五種同色系的綠色，該色彩模型特別的好使，也鼓勵(lì)大家多在實(shí)戰(zhàn)中運(yùn)用這樣的色彩模型，簡(jiǎn)單實(shí)用。
RGB是從顏色發(fā)光的原理來(lái)設(shè)計(jì)定的，通俗點(diǎn)說(shuō)它的顏色混合方式就好像有紅、綠、藍(lán)三盞燈，當(dāng)它們的光相互疊合的時(shí)候，色彩相混，而亮度卻等于三者亮度之總和，越混合亮度越高，即加法混合。
紅、綠、藍(lán)三個(gè)顏色通道每種色各分為256階亮度，在0時(shí)“燈”最弱——是關(guān)掉的，而在255時(shí)“燈”最亮。當(dāng)三色灰度數(shù)值相同時(shí)，產(chǎn)生不同灰度值的灰色調(diào)，即三色灰度都為0時(shí)，是最暗的黑色調(diào)；三色灰度都為255時(shí)，是最亮的白色調(diào)。
雖然RGB模型色彩更加的豐富，但是很多顏色不能完全打印出來(lái)，于是CMYK模型就成了打印、印刷的不二選擇。C是青、M是品紅、Y是黃、K是黑，通過(guò)顏料反射和吸收光線來(lái)顯色。
記得之前自己從事平面工作的時(shí)候，就經(jīng)常要用到CMYK模式，因?yàn)橛〕鰜?lái)的效果偏差是最小的，是最靠近設(shè)計(jì)效果圖的。
通過(guò)對(duì)比，我們發(fā)現(xiàn)RGB色彩模型顏色顯示上確實(shí)更加的絢麗豐富些，而CMYK的色彩模型顏色顯示上就黯淡了不少，但是要印刷的話，就必須轉(zhuǎn)化為成CMYK的色彩模式。
紅色代表熱情、活力、強(qiáng)烈的情感和愛(ài)。它可以象征著激情、勇氣和行動(dòng)力，也常與興奮、熱烈的情緒相關(guān)。
著名的快餐品牌肯德基，在自己的網(wǎng)頁(yè)及店鋪裝修中都運(yùn)用了紅色，因?yàn)榧t色是所有顏色中最容易引起人們注意的顏色，也是很容易刺激人們食欲和購(gòu)買(mǎi)的顏色。
橙色傳達(dá)溫暖、歡快和積極向上的情感；它常與樂(lè)觀、友好、創(chuàng)造力聯(lián)系在一起，給人以活力充沛和充滿(mǎn)希望的感覺(jué)。
百度網(wǎng)盤(pán)的這個(gè)登錄界面就運(yùn)用了橙色，給人陽(yáng)光、向上、熱情的感覺(jué)，通過(guò)色彩的運(yùn)用一下讓界面有了溫度。
黃色象征快樂(lè)、開(kāi)朗和樂(lè)觀；它能帶來(lái)明亮、愉悅的情緒，代表著陽(yáng)光、溫暖和智慧。
叫叫閱讀是一款非常著名的兒童閱讀軟件，整個(gè)色調(diào)采用的是非常有活力的黃色，這與兒童處于好奇與活力的階段相符合，這種高亮的黃色，飽和度和明度都非常的高，特別容易抓住兒童的目光，同時(shí)它是一種快樂(lè)的顏色，也是一種能激發(fā)孩子創(chuàng)造力和想象力的顏色，特別符合兒童成長(zhǎng)的需求。
綠色代表平靜、和諧與生機(jī)。綠色常與大自然相關(guān)，給人帶來(lái)安寧、放松的感覺(jué)，也象征著成長(zhǎng)、希望和新生。
青椒云的目標(biāo)用戶(hù)是吸引年輕用戶(hù)和創(chuàng)意工作者，綠色這種富有活力和創(chuàng)意的顏色更容易吸引他們的關(guān)注，同時(shí)綠色也代表著健康、可持續(xù)發(fā)展的企業(yè)形象。
青色寓意清新、寧?kù)o和沉穩(wěn)，它給人一種冷靜、理智的印象，同時(shí)也帶有一絲清新的活力。
青色是一種帶有藍(lán)色和綠色的顏色，因此青色既有藍(lán)色的專(zhuān)業(yè)感、信任感，也有綠色的生機(jī)感、希望感。
以下是日本某牙醫(yī)品牌的官網(wǎng)首頁(yè)，病人希望在這里帶來(lái)健康與復(fù)蘇，也希望獲得專(zhuān)業(yè)、可靠的治療，而青色就成了很好傳遞這種情感的品牌色。
藍(lán)色代表冷靜、忠誠(chéng)和信任；它常與沉穩(wěn)、深邃的情感相關(guān)，能帶來(lái)寧?kù)o、平和的心境，也象征著智慧和理性。
123云盤(pán)使用了藍(lán)色，藍(lán)色符合社會(huì)的普遍審美認(rèn)知，接受度比較高；其次，藍(lán)色給人安全的感覺(jué)，也符合云盤(pán)的初衷，給用戶(hù)安全的存儲(chǔ)服務(wù)。
紫色象征神秘、高貴和浪漫；它常給人一種優(yōu)雅、奢華的感覺(jué)，同時(shí)也帶有神秘莫測(cè)的氛圍，與夢(mèng)幻、創(chuàng)造力等情感相關(guān)。
美柚的主要用戶(hù)是女性，紫色在色彩心理學(xué)中常被認(rèn)為具有優(yōu)雅、神秘、浪漫的特質(zhì)，這些特質(zhì)與女性的審美和情感需求相契合，能夠吸引女性的關(guān)注。
白色代表著純潔、神圣、信任、安靜、樸素和雅致，是一種充滿(mǎn)純潔的顏色，它可以跟任何顏色和諧的共生。
以下是熊掌ID的登錄界面，顏色用了大量的白與灰，簡(jiǎn)潔又不失大氣，傳遞出了一種質(zhì)樸、雅致的感覺(jué)。
? 吸引顧客注意力
在眾多商業(yè)場(chǎng)所中脫穎而出，色彩鮮艷的商場(chǎng)外觀和內(nèi)部裝飾更容易在人們的視線中凸顯出來(lái)，吸引過(guò)往行人的目光，激發(fā)他們的好奇心和探索欲。
確實(shí)多彩的顏色更加容易引起我的關(guān)注，這不看到商場(chǎng)的美圖，都忍不住拍照留念了，成功的吸引了我的目光。
? 增強(qiáng)可見(jiàn)性
即使在較遠(yuǎn)的距離或在繁忙的街道上，多彩熱烈的配色也能讓商場(chǎng)更容易被發(fā)現(xiàn)，提高商場(chǎng)的知名度和曝光度。
多彩的配色，讓我很遠(yuǎn)就被商場(chǎng)美輪美奐的插畫(huà)吸引，大大增加了商場(chǎng)的可見(jiàn)性。
? 營(yíng)造愉悅氛圍
色彩可以激發(fā)積極情緒，明亮、鮮艷的色彩往往與快樂(lè)、活力和興奮等積極情緒相關(guān)聯(lián)。當(dāng)顧客進(jìn)入一個(gè)色彩豐富的商場(chǎng)時(shí)，會(huì)感受到一種愉悅和輕松的氛圍，從而更愿意在商場(chǎng)中停留和購(gòu)物。
星沙永旺城的美陳設(shè)計(jì)很好，墻面采用極具誘惑力的顏色與美食，把小小實(shí)物十倍放大，增加了視覺(jué)看點(diǎn)，讓人忍不住過(guò)去拍照曬一下，大大增加了愉悅性。
? 緩解壓力
在現(xiàn)代生活中，人們常常面臨各種壓力。走進(jìn)一個(gè)多彩熱烈的商場(chǎng)，可以暫時(shí)擺脫日常的煩惱和壓力，享受購(gòu)物的樂(lè)趣。
特別可愛(ài)夸張的插圖設(shè)計(jì)，引發(fā)了絲絲童趣和歡樂(lè)，讓人短暫忘記壓力，遠(yuǎn)離煩惱。
? 引導(dǎo)消費(fèi)行為
商場(chǎng)通常會(huì)使用不同的顏色來(lái)區(qū)分不同的區(qū)域，如購(gòu)物區(qū)、餐飲區(qū)、娛樂(lè)區(qū)等。這樣可以幫助顧客更快速地找到自己感興趣的區(qū)域，提高購(gòu)物效率。
突出重點(diǎn)商品，對(duì)于一些重點(diǎn)推薦的商品或促銷(xiāo)活動(dòng)，商場(chǎng)可以使用鮮艷的色彩來(lái)突出展示，吸引顧客的注意力，引導(dǎo)他們進(jìn)行購(gòu)買(mǎi)。
? 塑造品牌形象
6.1 傳達(dá)個(gè)性和風(fēng)格
不同的商場(chǎng)可能有不同的品牌定位和目標(biāo)客戶(hù)群體。通過(guò)選擇特定的色彩組合，商場(chǎng)可以傳達(dá)出自己的個(gè)性和風(fēng)格，吸引與之相符的顧客。
6.2 增強(qiáng)品牌記憶度
獨(dú)特而鮮明的色彩搭配可以讓商場(chǎng)在顧客的心中留下深刻的印象，提高品牌的記憶度和辨識(shí)度。
芙蓉區(qū)的龍湖天街主要面向中等收入新興家庭，是一個(gè)區(qū)域型的購(gòu)物中心，集購(gòu)物、餐飲、休閑、娛樂(lè)等多業(yè)態(tài)于一體，為消費(fèi)者提供一站式商業(yè)綜合體，它在餐飲區(qū)采用了大量的吃喝玩樂(lè)的插畫(huà)來(lái)引導(dǎo)用戶(hù)消費(fèi)。
? 視覺(jué)特性方面
1.1 穩(wěn)定性
藍(lán)色給人一種沉穩(wěn)、可靠的感覺(jué)。在B端產(chǎn)品中，用戶(hù)往往需要處理重要的業(yè)務(wù)數(shù)據(jù)和進(jìn)行復(fù)雜的操作，藍(lán)色的穩(wěn)定性可以讓用戶(hù)感到安心，增強(qiáng)對(duì)產(chǎn)品的信任感。
1.2 專(zhuān)業(yè)性
藍(lán)色通常與科技、專(zhuān)業(yè)領(lǐng)域相關(guān)聯(lián)。B端產(chǎn)品通常面向企業(yè)用戶(hù)，需要傳達(dá)出專(zhuān)業(yè)、高效的形象，藍(lán)色正好符合這一需求。
? 心理影響方面
2.1 減少焦慮
相比鮮艷、刺激的顏色，藍(lán)色較為柔和，不容易引起用戶(hù)焦慮和緊張的情緒；在B端使用場(chǎng)景中，用戶(hù)可能需要長(zhǎng)時(shí)間使用產(chǎn)品，藍(lán)色的舒緩效果有助于提高用戶(hù)的使用體驗(yàn)。
2.2 提高專(zhuān)注度
藍(lán)色具有一定的沉靜作用，能夠幫助用戶(hù)集中注意力，專(zhuān)注于工作任務(wù)。對(duì)于B端用戶(hù)來(lái)說(shuō)，高效完成工作是首要目標(biāo)，藍(lán)色的這一特性有助于提高工作效率。
B端產(chǎn)品在心理上追求的是類(lèi)似如下圖的這種寧?kù)o式的體驗(yàn)，跟教育有著異曲同工之處，就像這個(gè)易貝樂(lè)少兒英語(yǔ)一樣，用大面積的藍(lán)色，希望孩子在這里能很快的安靜下來(lái)學(xué)習(xí)、專(zhuān)注自己的事情。
? 行業(yè)習(xí)慣方面
3.1 科技行業(yè)引領(lǐng)
許多知名的科技企業(yè)和軟件產(chǎn)品在 B 端市場(chǎng)中廣泛使用藍(lán)色，逐漸形成了一種行業(yè)習(xí)慣。其他企業(yè)在設(shè)計(jì)B端產(chǎn)品時(shí)，也會(huì)傾向于選擇藍(lán)色以符合用戶(hù)的認(rèn)知和期望。
3.2 傳統(tǒng)與延續(xù)
在過(guò)去的設(shè)計(jì)中，藍(lán)色在 B 端領(lǐng)域的成功應(yīng)用使得它成為了一種傳統(tǒng)選擇。設(shè)計(jì)師們?cè)谘永m(xù)這一傳統(tǒng)的同時(shí)，也不斷優(yōu)化和創(chuàng)新藍(lán)色的運(yùn)用方式，使其更符合現(xiàn)代設(shè)計(jì)趨勢(shì)和用戶(hù)需求。
嘉為科技是一個(gè)有著20多年技術(shù)沉淀的科技公司，它的官網(wǎng)和產(chǎn)品風(fēng)格一直是沿用著科技藍(lán)的風(fēng)格，應(yīng)該也是基于傳統(tǒng)的沉淀吧。
?藍(lán)色可以提高產(chǎn)品的復(fù)用率
很多用戶(hù)都能接受藍(lán)色的B端界面，當(dāng)面對(duì)有差不多需求客戶(hù)時(shí)，同一套UI，可以多次復(fù)用，可以減少開(kāi)發(fā)成本和設(shè)計(jì)成本，這也是自己通過(guò)長(zhǎng)期實(shí)戰(zhàn)觀察發(fā)現(xiàn)的。
一個(gè)UI風(fēng)格，用在了兩個(gè)項(xiàng)目中，不同的用戶(hù)，趨向同樣的風(fēng)格，說(shuō)明藍(lán)色在大家心目中的接受度是非常的高，用藍(lán)色可以促進(jìn)設(shè)計(jì)的多次復(fù)用。
在日常的項(xiàng)目中，我看到的B端UI界面是千篇一律的穩(wěn)重，不追求過(guò)于刺激的顏色搭配，通常都比較的干凈簡(jiǎn)潔，不像商場(chǎng)里面的美陳背景設(shè)計(jì)，色彩對(duì)比非常的強(qiáng)烈，比較的吸引人眼球。
有一次我厭煩了常規(guī)的穩(wěn)重風(fēng)，探索一種大膽的色彩風(fēng)格時(shí)，雖然風(fēng)格比較新穎，可是發(fā)出去客戶(hù)的接受度不高，覺(jué)得太不穩(wěn)重了，然后重新按照以往習(xí)慣進(jìn)行設(shè)計(jì)時(shí)，就很好，客戶(hù)一致認(rèn)同。
可見(jiàn)每個(gè)領(lǐng)域都有自己的色彩運(yùn)用習(xí)慣，商場(chǎng)需要吸引人眼球、刺激消費(fèi)，越大膽越好，可是B端設(shè)計(jì)需要提供一個(gè)讓人平靜去處理工作事項(xiàng)的環(huán)境，它需要安靜，不需要過(guò)于刺激的顏色搭配。
比方在日常設(shè)計(jì)當(dāng)中，紅色代表流程失敗，綠色代表流程成功，橙色代表信息有告警，藍(lán)色代表著鏈接，同時(shí)不同的按鈕顏色也可以很好的區(qū)分按鈕狀態(tài)，在反饋結(jié)果和狀況方面，色彩起著非常重要的作用。
下面這個(gè)IDC運(yùn)營(yíng)的監(jiān)測(cè)平臺(tái)，它就是通過(guò)顏色來(lái)區(qū)分不同的告警級(jí)別的，可見(jiàn)顏色在B端產(chǎn)品中的重要性。（備注：圖中數(shù)據(jù)都不是真實(shí)數(shù)據(jù)，僅做展示）
B端設(shè)計(jì)中大面積使用品牌色，可以強(qiáng)化品牌形象，使用與品牌標(biāo)志風(fēng)格相近的色彩，可以幫助用戶(hù)快速識(shí)別和記住品牌，在不同的B端產(chǎn)品界面中使用統(tǒng)一的色彩方案，有助于建立品牌的連貫性和一致性，增強(qiáng)用戶(hù)對(duì)品牌的信任。
例如我給湖南高速設(shè)計(jì)的一套B端界面設(shè)計(jì)，用戶(hù)強(qiáng)烈要求改變傳統(tǒng)的藍(lán)色風(fēng)格，要求整套界面設(shè)計(jì)要用湖南高速品牌色-綠色，說(shuō)明在追求大流和品牌色之間，客戶(hù)更加傾向品牌的傳達(dá)。（備注：圖中數(shù)據(jù)都不是真實(shí)數(shù)據(jù)，僅做展示）
在B端界面設(shè)計(jì)中，顏色在幫助信息區(qū)分起著非常重要的作用，通?？梢酝ㄟ^(guò)不同的色彩來(lái)區(qū)分功能區(qū)域，可以讓用戶(hù)更清晰地了解界面的結(jié)構(gòu)和布局，例如，導(dǎo)航欄使用一種特定的顏色，而內(nèi)容區(qū)域則使用另一種顏色。
我設(shè)計(jì)的天翼寫(xiě)作，就是這樣的設(shè)計(jì)思路，導(dǎo)航欄和內(nèi)容區(qū)的顏色完全不一樣，這里顏色起到了很好的區(qū)分作用。
選擇合適的色彩對(duì)比度可以增強(qiáng)文本的可讀性，減少用戶(hù)的視覺(jué)疲勞。例如，黑色文字在白色背景上通常比較容易閱讀。
選擇適當(dāng)?shù)纳士梢誀I(yíng)造出專(zhuān)業(yè)、高效、舒適的工作氛圍，從而影響用戶(hù)的情緒和感受，提高用戶(hù)的使用體驗(yàn)。
我參與的這個(gè)后臺(tái)界面，就是通過(guò)合理的色彩搭配來(lái)引導(dǎo)用戶(hù)使用的，當(dāng)用戶(hù)已經(jīng)完成的環(huán)節(jié)都是用綠色表示，沒(méi)有走完的流程就會(huì)是灰色的，寓意指示非常的鮮明，很好的解決了用戶(hù)不知道清晰進(jìn)程的卡點(diǎn)，提升了用戶(hù)體驗(yàn)。
人的性格有活潑的、文靜的、沉穩(wěn)的、深邃的，其實(shí)色彩也是有性格的，不同的色彩也有不同的性格，當(dāng)我們對(duì)色彩的性格有足夠多的了解，在面對(duì)不同的客戶(hù)時(shí)，我們對(duì)色彩的拿捏以及設(shè)計(jì)需求的把握時(shí)，會(huì)更加的游刃有余。
我們平常確實(shí)是在做設(shè)計(jì)，但是我們更多的是在與人打交道，我們更好的聆聽(tīng)，會(huì)幫助我們更快的抓取到客戶(hù)的喜好，快速做出滿(mǎn)足客戶(hù)需求的設(shè)計(jì)，少受加班之苦。
比方說(shuō)我之前給云門(mén)戶(hù)設(shè)計(jì)的一套UI，客戶(hù)的決策層是男性，且年齡偏大，他們就偏愛(ài)深沉的UI風(fēng)格；而我負(fù)責(zé)的天翼云電腦專(zhuān)家，客戶(hù)的決策層是女性，且年齡偏年輕，她每次就喜歡輕盈、明快的UI色調(diào),不同的決策層客戶(hù)，就會(huì)帶來(lái)不同的設(shè)計(jì)結(jié)果。
在這個(gè)登錄頁(yè)面中，我就是運(yùn)用的6：3：1原則，60%的主色，30%的次要色，10%的點(diǎn)綴色；使用了大面積的藍(lán)色和藍(lán)灰色，最后使用一點(diǎn)點(diǎn)的橙色，這樣的配色會(huì)顯得高級(jí)。
為了保證畫(huà)面風(fēng)格的統(tǒng)一、干凈整潔，文字顏色、邊框顏色、以及邊框背景色都需要用到無(wú)彩色，通常通過(guò)顏色的深淺來(lái)區(qū)分信息的層級(jí)關(guān)系。
比方說(shuō)我參與的星辰大模型AI文檔生成能力的應(yīng)用，里面無(wú)論文字顏色還是底色都是運(yùn)用的無(wú)彩色，只是通過(guò)了色彩深淺變化來(lái)做了層級(jí)區(qū)分，因?yàn)闊o(wú)彩色可以起到很好的降噪作用，既傳達(dá)了信息，又不會(huì)顯得界面凌亂復(fù)雜。
比方說(shuō)，日常我們?cè)O(shè)計(jì)的卡片都是用的白色，而底色我們用的是灰色，因?yàn)榭ㄆ锩娴膬?nèi)容都是比較重要的信息，需要用一個(gè)亮度比較高的顏色，讓內(nèi)容往前走，而灰色的背景通常就往后走的感覺(jué)，這樣能跟卡片形成一個(gè)一前一后的對(duì)比，更好的幫助內(nèi)容進(jìn)行傳播。
比方說(shuō)我設(shè)計(jì)的這個(gè)IT運(yùn)維監(jiān)控平臺(tái)的首頁(yè)，物理主機(jī)、網(wǎng)絡(luò)及安全設(shè)備、工單、在途工單這幾個(gè)指標(biāo)是非常關(guān)鍵的，所以他們的圖片底色用了純度比較高的有彩色來(lái)標(biāo)識(shí)。
作為設(shè)計(jì)師，我們的設(shè)計(jì)工作其實(shí)就是在設(shè)計(jì)一種感覺(jué)，一種情緒，設(shè)計(jì)前定調(diào)的意識(shí)真的太重要了，感覺(jué)對(duì)了，什么都就對(duì)了。
比方說(shuō)我前段時(shí)間接到了一個(gè)B端的大屏可視化需求設(shè)計(jì)，客戶(hù)說(shuō)之前的大屏設(shè)計(jì)不喜歡，希望重新出一個(gè)新的設(shè)計(jì)，然后公司的需求對(duì)接人員在給我下達(dá)需求時(shí)，真的就只是給我下達(dá)了這幾個(gè)字，讓我重新出一個(gè)設(shè)計(jì)試試。
以我的職業(yè)直覺(jué)，感覺(jué)這個(gè)需求是不夠細(xì)化的，于是我就多問(wèn)了幾句，我問(wèn)客戶(hù)是想要常規(guī)的藍(lán)色調(diào)的還是別的？果然一問(wèn)，客戶(hù)說(shuō)不希望再用常規(guī)的藍(lán)色的，希望新的設(shè)計(jì)要用他們的品牌色綠色，剛聽(tīng)到這幾個(gè)字的時(shí)候，我以為這次我把握住需求了，在收集參考圖的時(shí)候，我發(fā)現(xiàn)常見(jiàn)的綠色大屏有深色的和淺色的，根據(jù)自己以往的作圖習(xí)慣，我覺(jué)得深色會(huì)更加的受歡迎一些，我自以為是的朝著深色的方向去出圖，出到了一半的時(shí)候，我內(nèi)心有些許的忐忑，我于是找了一深一淺的參考圖，讓同事跟客戶(hù)確認(rèn)一下，客戶(hù)是想要深色的感覺(jué)，還是要淺色的感覺(jué)，這次溝通又給了我深深的一擊，客戶(hù)不按常理出牌，說(shuō)希望按淺色的風(fēng)格來(lái)出圖。
在出稿之前，通過(guò)自己反復(fù)的溝通確認(rèn)，發(fā)現(xiàn)設(shè)計(jì)前的定調(diào)意識(shí)真的太重要了，要不是有出圖前一波三折的反復(fù)確認(rèn)以及需求的細(xì)化，就不會(huì)有后來(lái)的一遍過(guò)稿。
不管我們?cè)O(shè)計(jì)什么色系的界面，都避不開(kāi)用到灰色，在設(shè)計(jì)中用跟主視覺(jué)相符的灰，會(huì)使得界面更加的高級(jí)、協(xié)調(diào)與美觀，注意好了這個(gè)小細(xì)節(jié)，會(huì)給我們的設(shè)計(jì)加分不少。
下面是我日常體驗(yàn)到的兩個(gè)界面，上面綜合管理平臺(tái)里面的灰色就沒(méi)有跟主色調(diào)藍(lán)色相呼應(yīng)，灰色沒(méi)有向藍(lán)色傾斜，界面看起來(lái)就沒(méi)那么美觀；下面通義千問(wèn)的灰色設(shè)計(jì)就非常的注重細(xì)節(jié)，灰色偏紫，整個(gè)界面看起來(lái)渾然天成，毫無(wú)違和，美感、檔次瞬間提升好幾個(gè)等級(jí)。
一個(gè)微小細(xì)節(jié)的在意，在無(wú)形中拉高了設(shè)計(jì)的高度，十個(gè)細(xì)節(jié)乃至更多細(xì)節(jié)的在意，就會(huì)帶來(lái)更多意想不到的結(jié)果。
總結(jié)：
以上就是我最近對(duì)色彩的一些頓悟、感受和學(xué)習(xí)收獲，在不斷的復(fù)盤(pán)總結(jié)中，我們總會(huì)收獲一些新的認(rèn)知，通過(guò)這次色彩的復(fù)盤(pán)之旅，發(fā)現(xiàn)色彩對(duì)設(shè)計(jì)師真的太重要了，希望我的分享對(duì)大家有啟發(fā)，不足之處也歡迎大家留言交流。
本文由 @姝斐suphie 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
“B 端頁(yè)面加載，關(guān)乎用戶(hù)體驗(yàn)。” 在 B 端產(chǎn)品設(shè)計(jì)中，頁(yè)面加載功能不容小覷。如何讓用戶(hù)在等待中減少焦慮？怎樣使頁(yè)面加載邏輯清晰、策略得當(dāng)？本文將詳細(xì)闡述，為 B 端產(chǎn)品設(shè)計(jì)提供指引。
每一個(gè)用戶(hù)都不喜歡進(jìn)入頁(yè)面時(shí)需要長(zhǎng)時(shí)間的等待，并且對(duì)著一個(gè)空白的頁(yè)面。
因此在 iOS當(dāng)中會(huì)使用大量的動(dòng)效、情感化設(shè)計(jì)來(lái)引導(dǎo)用戶(hù)多停留一些時(shí)間等待加載；在較多 app 當(dāng)中，也會(huì)通過(guò)動(dòng)效設(shè)計(jì)，優(yōu)化頁(yè)面信息的加載。
那既然頁(yè)面加載很重要，對(duì)于B端產(chǎn)品而言，我們也需要去考慮頁(yè)面的功能究竟要如何進(jìn)行設(shè)計(jì)。
今天我們會(huì)聊聊 頁(yè)面加載 功能的具體邏輯，以及B端產(chǎn)品的常見(jiàn)頁(yè)面加載策略，希望能夠?qū)Ω魑煌瑢W(xué)有所幫助～
在系統(tǒng)當(dāng)中，頁(yè)面加載其實(shí)是用戶(hù)對(duì)系統(tǒng)界面進(jìn)行交互后，系統(tǒng)會(huì)將對(duì)應(yīng)的數(shù)據(jù)傳給服務(wù)器，而服務(wù)器又會(huì)將內(nèi)容反饋給用戶(hù)的整個(gè)過(guò)程。
比如在按鈕組件中，我們就需要去設(shè)定「當(dāng)用戶(hù)點(diǎn)擊了按鈕過(guò)后它需要長(zhǎng)時(shí)間加載的 Loading 狀態(tài)」
通過(guò)這樣的做法，其實(shí)就是緩解用戶(hù)等待所花費(fèi)的時(shí)間，減少焦慮。
在很多C端產(chǎn)品中，頁(yè)面加載是非常常見(jiàn)的。比如會(huì)有懶加載、預(yù)加載、異步加載等。
同時(shí)會(huì)使用非常多的 插畫(huà)設(shè)計(jì)、動(dòng)效設(shè)計(jì) 去降低用戶(hù)所使用的焦慮。但是在桌面端中，它的思考方式會(huì)有些許不同，我們將其分為四種不同的方式。
骨架屏是較為常規(guī)的頁(yè)面模塊加載方式。
它主要適用于模塊當(dāng)中，加載內(nèi)容需要提供占位信息時(shí)進(jìn)行使用。通常會(huì)在 列表、卡片類(lèi) 圖文信息較多的頁(yè)面當(dāng)中進(jìn)行呈現(xiàn) 。
在用戶(hù)預(yù)期上，骨架圖能夠幫助我們展示當(dāng)中頁(yè)面的大體結(jié)構(gòu)，以避免在頁(yè)面加載信息的過(guò)程當(dāng)中出現(xiàn)隨意跳動(dòng)、亂展示的情況。
特別是在很多頁(yè)面第一次加載時(shí)，由于數(shù)據(jù)內(nèi)容較多，因此使用骨架圖填充會(huì)更為合理。比如在有贊當(dāng)中， 就會(huì)使用骨架圖的方式來(lái)進(jìn)行頁(yè)面信息的加載。而在B端后臺(tái)中也更多的適用于工作臺(tái)信息的加載，特別是在工作臺(tái)中有數(shù)據(jù)部分的內(nèi)容呈現(xiàn)的時(shí)候，需要格外去注意。
Spin 主要要于頁(yè)面和區(qū)塊當(dāng)中的信息加載，通過(guò)適當(dāng)?shù)膭?dòng)效，能夠保證頁(yè)面加載時(shí)緩解用戶(hù)的焦慮。
在 Spin 當(dāng)中，會(huì)有許多不同的類(lèi)型：基礎(chǔ)Loading、動(dòng)畫(huà)Loading、進(jìn)度Loading
基礎(chǔ)Loading 更適用于頁(yè)面當(dāng)中的組件類(lèi)級(jí)別的加載，像是在輸入框內(nèi)、按鈕中、下拉選擇… 的內(nèi)容加載。
動(dòng)畫(huà)Loading 則偏向于區(qū)塊、頁(yè)面級(jí)別的加載，比如在表格頁(yè)面中，就會(huì)經(jīng)常使用加載的方式展示目前正在相應(yīng)。
進(jìn)度Loading 則更像是進(jìn)度條的外露，想要更凸顯目前的真實(shí)進(jìn)度情況。目前在 Ant Design 5.18.0 版本當(dāng)中即可支持
當(dāng)然，在系統(tǒng)當(dāng)中還會(huì)出現(xiàn)一些特殊的加載狀態(tài)。比如在針對(duì)數(shù)據(jù)量較大的情況下時(shí)，我們會(huì)采取什么樣的加載策略？
比如在神策數(shù)據(jù)當(dāng)中，當(dāng)我們?cè)谌シ治龊笈_(tái)的行為數(shù)據(jù)時(shí)，需要進(jìn)行大量的計(jì)算，因此在分析完一次過(guò)后所等待的時(shí)間也會(huì)更為長(zhǎng)久。這時(shí)候神策會(huì)給出一套更為復(fù)雜的加載策略。
首先在加載層面上，它會(huì)優(yōu)先告知用戶(hù)目前整體的加載進(jìn)度，這對(duì)于用戶(hù)的等待是非常有益的。
其次，如果你對(duì)于整體加載的時(shí)間進(jìn)度不夠滿(mǎn)意，那我可以給你相應(yīng)的解決策略，像是分批加載等等。
最后如果你在加載過(guò)程當(dāng)中有其他的分析任務(wù)，也可以通過(guò)異步加載的方式，進(jìn)行后臺(tái)計(jì)算，等結(jié)果出來(lái)后會(huì)通過(guò)通知的方式進(jìn)行提示。當(dāng)然，在此過(guò)程中，你可以中斷、退出。
異步加載也是針對(duì)長(zhǎng)時(shí)間加載的一種策略，比如我需要去上傳較大信息的時(shí)候，我需要耗費(fèi)特別多的時(shí)間。那這時(shí)候就可以采用異步加載的方式，滿(mǎn)足用戶(hù)的正常使用。
在飛書(shū)當(dāng)中，我要上傳飛書(shū)妙記，我要導(dǎo)入飛書(shū)成員，那都可以通過(guò)異步加載的方式來(lái)進(jìn)行呈現(xiàn)。
那在設(shè)計(jì)的時(shí)候需要去考慮異步加載整體的入口以及功能之間是如何實(shí)現(xiàn)的。
像是在飛書(shū)妙記中，它會(huì)將其作為一個(gè)上傳入口，進(jìn)行快速的展現(xiàn)。而在導(dǎo)入飛書(shū)成員的時(shí)候，則會(huì)展現(xiàn)是將其放在后臺(tái)進(jìn)行加載，等完成過(guò)后通過(guò)通知的方式來(lái)告知用戶(hù)（與神策相同）
關(guān)于加載，其實(shí)在設(shè)計(jì)上還會(huì)有很多細(xì)節(jié)，我們也會(huì)在課程當(dāng)中，通過(guò) 功能設(shè)計(jì) 的方式給大家進(jìn)行梳理設(shè)計(jì)要點(diǎn)（肯定會(huì)比現(xiàn)在更為系統(tǒng)），后續(xù)有時(shí)間，再和大家分享～
本文由人人都是產(chǎn)品經(jīng)理作者【CE青年】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于 CC0 協(xié)議。
蘭亭妙微(www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
從擬物風(fēng)格到扁平化，再到如今的多變色彩與微妙質(zhì)感，設(shè)計(jì)風(fēng)格的演變不僅反映了技術(shù)的進(jìn)步，也折射出用戶(hù)需求的轉(zhuǎn)變。本文結(jié)合釘釘近10年的B端設(shè)計(jì)經(jīng)驗(yàn)，深入探討2025年B端設(shè)計(jì)的三大趨勢(shì)：多變豐富的色彩、微妙克制的質(zhì)感以及清晰明了的圖形。揭示了如何在滿(mǎn)足企業(yè)高效、專(zhuān)業(yè)需求的同時(shí)，為用戶(hù)帶來(lái)更具情感價(jià)值和科技感的視覺(jué)體驗(yàn)。
回溯互聯(lián)網(wǎng)的發(fā)展進(jìn)程，從桌面端的撥號(hào)上網(wǎng)，到5G移動(dòng)互聯(lián)網(wǎng)，再至人工智能的助力，科技領(lǐng)域正在經(jīng)歷著翻天覆地的變革。未來(lái)的數(shù)字世界，在沉浸感、參與度、個(gè)性化等維度對(duì)體驗(yàn)會(huì)提出更進(jìn)階的要求；與此同時(shí)，B端企業(yè)對(duì)于高效、簡(jiǎn)便、用戶(hù)友好的界面需求與日俱增。在2025年的當(dāng)下，B端設(shè)計(jì)師唯有持續(xù)學(xué)習(xí)，適應(yīng)新技術(shù)與新趨勢(shì)，緊密?chē)@客戶(hù)的業(yè)務(wù)價(jià)值展開(kāi)設(shè)計(jì)，進(jìn)一步注重實(shí)用性、包容性以及可定制化，方可為企業(yè)客戶(hù)塑造出卓越的產(chǎn)品與服務(wù)。
因此，我們結(jié)合釘釘近10年的B端產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)，鑒于未來(lái)B端設(shè)計(jì)趨勢(shì)將展現(xiàn)出多元化、智能化和人性化的特質(zhì)，從B端產(chǎn)品個(gè)性化、風(fēng)格與質(zhì)感、界面版式、圖標(biāo)、動(dòng)態(tài)交互等多維度設(shè)計(jì)展開(kāi)深度研究，與大家一道探討B(tài)端設(shè)計(jì)的本質(zhì)和趨勢(shì)，期望在真正駕馭B端產(chǎn)品設(shè)計(jì)的這條道路上，帶來(lái)些許有益的啟迪。
上篇文章我們講述了B端產(chǎn)品的個(gè)性化趨勢(shì)，如何利用個(gè)性化幫助個(gè)體提升用戶(hù)價(jià)值，打造個(gè)體形象、滿(mǎn)足個(gè)體情緒以及增強(qiáng)個(gè)體自信。
今天，我們要給大家分享的是B端產(chǎn)品風(fēng)格&質(zhì)感，為企業(yè)塑造品牌形象、為個(gè)人用戶(hù)提供情感價(jià)值。
設(shè)計(jì)作為科技和藝術(shù)的結(jié)合，UI設(shè)計(jì)風(fēng)格的演變不僅與技術(shù)的發(fā)展密不可分，而且與藝術(shù)創(chuàng)作風(fēng)格的發(fā)展有著異曲同工之妙，都經(jīng)歷了抽象—具象—抽象的過(guò)程。
20世紀(jì)70-80年代是計(jì)算機(jī)圖形界面的萌芽階段，就像繪畫(huà)藝術(shù)起源之時(shí)的那個(gè)茹毛飲血的年代，當(dāng)時(shí)的原始人所能利用的工具只有火堆熄滅后留下的木炭，圖像呈現(xiàn)的載體也只有山洞內(nèi)的墻壁和巖石。就像剛剛進(jìn)入計(jì)算機(jī)時(shí)代的設(shè)計(jì)師們，不僅缺少專(zhuān)業(yè)的繪圖軟件，而且當(dāng)時(shí)計(jì)算機(jī)本身的顯示能力也尚且不足。這個(gè)階段的UI設(shè)計(jì)，能夠在顯示器上清晰地顯示并傳達(dá)明確的含義，比畫(huà)出風(fēng)格更加重要。觀察當(dāng)時(shí)的操作界面，不難猜測(cè)當(dāng)時(shí)的設(shè)計(jì)師，努力以具象的表現(xiàn)風(fēng)格來(lái)減少人們對(duì)計(jì)算機(jī)界面的陌生感，但由于工具和載體的限制無(wú)法完美實(shí)現(xiàn)，雖然這種風(fēng)格無(wú)法被稱(chēng)為擬物風(fēng)格，但為后來(lái)真正的擬物風(fēng)格的出現(xiàn)和發(fā)展奠定了基礎(chǔ)。
1995年，家用計(jì)算機(jī)的顯示能力迎來(lái)了質(zhì)的飛躍，Windows95發(fā)布、對(duì)真色彩的支持、PhotoShop5.0的發(fā)布……技術(shù)進(jìn)步和專(zhuān)業(yè)軟件的加持讓設(shè)計(jì)師突破了過(guò)去創(chuàng)作工具和呈現(xiàn)載體的限制，就好像在山洞里用木炭繪畫(huà)的原始人，擁有了畫(huà)筆、顏料和畫(huà)布。設(shè)計(jì)師的創(chuàng)作空間和寫(xiě)實(shí)能力得到極大提升。
與此同時(shí)，個(gè)人計(jì)算機(jī)和手機(jī)開(kāi)始普及，圖形化的操作界面不再是科研人員和專(zhuān)業(yè)人士的專(zhuān)屬，而是普通人工作學(xué)習(xí)中的一部分。為了讓沒(méi)有接觸過(guò)圖形化操作界面的用戶(hù)快速識(shí)別圖標(biāo)代表的功能，最好的方式就是在界面中對(duì)現(xiàn)實(shí)世界中的物體進(jìn)行還原，這便推動(dòng)了擬物風(fēng)格的發(fā)展。
擬物風(fēng)格的設(shè)計(jì)作品，通過(guò)模擬現(xiàn)實(shí)物品的造型和質(zhì)感，通過(guò)疊加、高光、紋理、材質(zhì)、陰影等效果對(duì)實(shí)物進(jìn)行再現(xiàn)，讓用戶(hù)以極低的學(xué)習(xí)成本快速熟悉圖形化的操作界面和產(chǎn)品功能，并以符合日常習(xí)慣和直覺(jué)的方式引導(dǎo)用戶(hù)進(jìn)行交互。
例如在ios6中的相機(jī)icon，對(duì)鏡頭部分細(xì)節(jié)刻畫(huà)非常細(xì)致，用戶(hù)很容易聯(lián)想到使用真實(shí)相機(jī)時(shí)能夠做到的事情，這對(duì)用戶(hù)理解和熟悉某一個(gè)產(chǎn)品功能的幫助無(wú)疑是巨大的；再比如同樣在ios6中的書(shū)架icon設(shè)計(jì)也十分精彩，不僅對(duì)真實(shí)報(bào)刊架的結(jié)構(gòu)和質(zhì)感極度還原，而且對(duì)書(shū)架內(nèi)的雜志也進(jìn)行了展示，用戶(hù)甚至能像真的面對(duì)一個(gè)書(shū)架一樣看到書(shū)架中的內(nèi)容，小小的icon中信息含量極高。
到2013年左右，智能手機(jī)在全球主要國(guó)家和地區(qū)的普及率大幅提高。根據(jù)統(tǒng)計(jì)數(shù)據(jù)，許多發(fā)達(dá)國(guó)家的智能手機(jī)普及率超過(guò)了50%，發(fā)展中國(guó)家的智能手機(jī)普及率也在快速上升。大部分用戶(hù)已經(jīng)對(duì)圖形化的操作界面非常熟悉，無(wú)需那些極致寫(xiě)實(shí)的風(fēng)格也能快速理解圖形背后的含義和功能。同時(shí)，越來(lái)越多的信息和應(yīng)用涌入智能設(shè)備，擬物風(fēng)格所推崇的肌理、質(zhì)感、光影……帶來(lái)精致效果的同時(shí)，也讓細(xì)節(jié)變得冗余，如何處理爆炸的信息成為UI設(shè)計(jì)的首要問(wèn)題。就像19世紀(jì)攝影技術(shù)對(duì)傳統(tǒng)寫(xiě)實(shí)繪畫(huà)藝術(shù)的沖擊，讓藝術(shù)家們重新思考繪畫(huà)藝術(shù)的發(fā)展方向一樣，擬物風(fēng)格的極致具象化在達(dá)到巔峰之時(shí)也漸漸到達(dá)了轉(zhuǎn)折點(diǎn)。
2013年9月ios7發(fā)布，并且首次在UI設(shè)計(jì)中采用了扁平化的設(shè)計(jì)風(fēng)格。這種風(fēng)格摒棄了擬物設(shè)計(jì)風(fēng)格中的寫(xiě)實(shí)光影、肌理、冗余的細(xì)節(jié)、甚至放棄了體積的塑造以及一切可能會(huì)對(duì)識(shí)別產(chǎn)生干擾的元素，只保留對(duì)用戶(hù)最關(guān)鍵的信息，呈現(xiàn)出十分干凈整潔的視覺(jué)效果。
然而物極必反，扁平化設(shè)計(jì)的極致簡(jiǎn)潔，容易讓長(zhǎng)期使用的用戶(hù)感到冷淡和無(wú)趣，于是新擬物風(fēng)格應(yīng)運(yùn)而生。
新擬物融合了擬物和扁平兩種風(fēng)格的特點(diǎn)，在光影和立體效果方面較為寫(xiě)實(shí)，元素通常是凸起或凹陷于界面之上，視覺(jué)上錯(cuò)落有致，但是在色彩和造型方面則更偏向于扁平化風(fēng)格，圖形往往經(jīng)過(guò)一定的簡(jiǎn)化和抽象，并搭配少量簡(jiǎn)潔的主觀顏色。但是新擬物風(fēng)格過(guò)于依賴(lài)投影和立體效果對(duì)界面元素的區(qū)分，很難呈現(xiàn)復(fù)雜的信息層級(jí)，而且微妙的對(duì)比度也不利于無(wú)障礙識(shí)別，所以這種風(fēng)格并未真正大面積流行和使用。
2022年，ChatGPT發(fā)布，AI在自然語(yǔ)言處理方面達(dá)到了前所未有的高度，同年Midjourney和stablediffusion的出圈讓每個(gè)人看到了AI生圖的魅力。不僅各種AI應(yīng)用和網(wǎng)站如同雨后春筍般出現(xiàn)，而且各行各業(yè)的APP都在爭(zhēng)前恐后的升級(jí)自己的AI能力。這樣的時(shí)代背景，為UI設(shè)計(jì)提出了一個(gè)新的命題：如何用設(shè)計(jì)展現(xiàn)應(yīng)用的AI能力以及企業(yè)的智能化心智。
色彩在B端設(shè)計(jì)風(fēng)格中占據(jù)著至關(guān)重要的地位，能夠帶給用戶(hù)非常強(qiáng)烈的直觀感受，是用戶(hù)對(duì)產(chǎn)品和品牌的第一印象。例如藍(lán)色就是過(guò)去對(duì)To B或科技產(chǎn)品的色彩印象，諸如英特爾、微軟、聯(lián)想、戴爾、IBM…這些品牌通過(guò)藍(lán)色來(lái)傳達(dá)簡(jiǎn)潔、未來(lái)感和高科技等視覺(jué)感受。但是這個(gè)標(biāo)準(zhǔn)并非是一成不變的，越來(lái)越多的B端設(shè)計(jì)，選擇使用豐富的色彩來(lái)表達(dá)智能化千變?nèi)f化的特點(diǎn)，科技感的表達(dá)不再是千篇一律的冷色，而有了更多的變化。
彌散漸變
彌散漸變是一種借助模糊效果將多種顏色進(jìn)行混合的特殊漸變形式，多種顏色的混合以及不規(guī)律的漸變走勢(shì)，讓彌散漸變具有很強(qiáng)的氛圍烘托效果和表現(xiàn)力。暈開(kāi)的色彩仿佛在一片虛空之中慢慢彌散開(kāi)來(lái)，細(xì)膩、柔和又夢(mèng)幻，很適合用來(lái)提升界面的局部氛圍。
優(yōu)秀的場(chǎng)景適用性
在B端設(shè)計(jì)中，屏效和識(shí)別尤為重要，利用圖形或插畫(huà)的形式烘托氛圍，往往需要占用更多的空間，并且在網(wǎng)頁(yè)端的適配過(guò)程中，容易產(chǎn)生圖文重疊帶來(lái)的識(shí)別的問(wèn)題。而彌散漸變由于其模糊和明度均勻的特點(diǎn)，可以在為畫(huà)面貢獻(xiàn)豐富度的同時(shí)，不產(chǎn)生視覺(jué)上的焦點(diǎn)，所以在適配過(guò)程中也不會(huì)產(chǎn)生圖文重疊的問(wèn)題，具有很普遍的應(yīng)用場(chǎng)景。
高效的場(chǎng)景拓展
在調(diào)整漸變時(shí)，通過(guò)保留一些相對(duì)清晰的輪廓，彌散漸變還能呈現(xiàn)出虛實(shí)結(jié)合的視覺(jué)體驗(yàn)，讓畫(huà)面更具動(dòng)感和層次變化，就像一面磨砂玻璃后飄浮著一些真實(shí)的物體一樣，十分具有空間感。虛實(shí)的變化讓色彩有了具體的造型，可能是一段波浪、一個(gè)球體、或是一座山丘……這樣的背景配合一些簡(jiǎn)單的排版，便可以是一張海報(bào)、一張banner、一個(gè)推送封面……這無(wú)疑為高速迭代的B端設(shè)計(jì)提供了一個(gè)高效的解決方案。
動(dòng)態(tài)變化
根據(jù)資料顯示，手機(jī)軟件的AI生圖時(shí)長(zhǎng)一般在10秒至120秒之間，AI搜索平均時(shí)長(zhǎng)大致在2秒到15秒之間，專(zhuān)業(yè)的寫(xiě)作AI成文時(shí)間大致在3秒到30秒……
AI應(yīng)用伴隨著大量的等待時(shí)間。使用動(dòng)態(tài)變化的顏色能夠降低用戶(hù)在等待期間的焦慮感，并且不斷變化流動(dòng)的色彩也能暗示用戶(hù)，當(dāng)前仍處在“生成中”的狀態(tài)下。例如用戶(hù)在等待釘釘AI助理回答的過(guò)程中，聊天氣泡會(huì)呈現(xiàn)出多彩的流光效果；用戶(hù)在與AI助理進(jìn)行語(yǔ)音交互時(shí)，整個(gè)屏幕邊緣會(huì)呈現(xiàn)動(dòng)態(tài)的彩色光效，以表示當(dāng)前的AI激活狀態(tài)。
除此之外，全屏動(dòng)態(tài)的漸變背景還很適合用在信息不多的功能或應(yīng)用首頁(yè)，例如在釘釘?shù)牡卿涰?yè)面，屏幕近三分之二的空間中只有簡(jiǎn)單的文字動(dòng)畫(huà)，搭配全氛圍的動(dòng)態(tài)漸變背景，不僅清晰地傳達(dá)品牌的智能化心智，而且為“登錄”這一操作增添了滿(mǎn)滿(mǎn)的儀式感。類(lèi)似的還有釘釘AI搜索的功能首頁(yè)，大面積涌動(dòng)的動(dòng)態(tài)漸變，充分在視覺(jué)層面展現(xiàn)了智能化的心智，而且大面積的留白也讓釘釘AI企業(yè)搜索的功能價(jià)值描述顯得格外突出。
雖然新擬態(tài)風(fēng)格并未大規(guī)模的使用和流行，但其衍生和沉寂的背后反映了設(shè)計(jì)的本質(zhì)就是一場(chǎng)功能和審美之間的角逐。B端設(shè)計(jì)更是如此，用戶(hù)側(cè)需要美的設(shè)計(jì)來(lái)愉悅工作中的心情，但又不想被花哨的色彩和裝飾干擾工作效率，企業(yè)側(cè)需要擺脫沉悶古板的刻板印象，但同時(shí)也需要呈現(xiàn)專(zhuān)業(yè)、科技的高大形象保持可信度。微妙克制的質(zhì)感表達(dá)為這種“平衡”的實(shí)現(xiàn)提供了解決思路。
玻璃擬態(tài)
玻璃擬態(tài)是2020年末開(kāi)始流行的設(shè)計(jì)風(fēng)格，顧名思義就是對(duì)玻璃這種材質(zhì)的一種擬物化設(shè)計(jì)，玻璃擬態(tài)風(fēng)格相較于新擬物風(fēng)格最明顯的進(jìn)步在于，它巧妙地利用玻璃這種材質(zhì)解決了新擬物風(fēng)格中元素邊界不清晰、難以體現(xiàn)復(fù)雜層級(jí)等問(wèn)題。其風(fēng)格特點(diǎn)可以總結(jié)為以下特點(diǎn)：
通透：
由于磨砂玻璃的通透性，在界面中存在多個(gè)層級(jí)時(shí)，會(huì)呈現(xiàn)出一種虛實(shí)結(jié)合的美感。并且其透明的屬性，能夠很好的暗示用戶(hù)目前所處的位置，利用此特性，不僅能更沉浸的展現(xiàn)用戶(hù)當(dāng)前關(guān)注的信息，而且“疊加”而非“跳轉(zhuǎn)”的交互邏輯也極大減輕了用戶(hù)操作時(shí)的心理負(fù)擔(dān)。
懸?。?/p>
傳統(tǒng)的擬物風(fēng)格往往會(huì)塑造一個(gè)地面，再將圖標(biāo)“放置”在上面。而玻璃擬態(tài)風(fēng)格則更像是構(gòu)建了一個(gè)“無(wú)重力”的虛擬空間，界面中的元素有明顯的懸浮感，顯得十分輕盈，同時(shí)也非常適用于B端場(chǎng)景下對(duì)于科技感的體現(xiàn)。配合投影、虛實(shí)對(duì)比，用戶(hù)能夠清晰地感受到元素在空間上的高度差異，不僅保障了信息的可讀性，而且讓可交互元素更具點(diǎn)擊感。
微妙：
由于磨砂玻璃的物理特性，頁(yè)面背景在經(jīng)過(guò)“玻璃層”的模糊處理后會(huì)變得十分柔和，類(lèi)似上文所述的“彌散漸變”，呈現(xiàn)出一種明度均勻，沒(méi)有視覺(jué)焦點(diǎn)的狀態(tài)，無(wú)論是動(dòng)態(tài)還是靜態(tài)都能很好的保障前景文字、UI控件等元素的可識(shí)別性。并且在玻璃擬態(tài)風(fēng)格中，常常使用輕薄微妙的邊框來(lái)強(qiáng)化物理質(zhì)感，這種既作為描邊，又作為“玻璃”的厚度的處理方式，讓卡片能夠以一個(gè)恰到好處的對(duì)比度呈現(xiàn)在界面中。
綜上所述，玻璃擬態(tài)風(fēng)格在擬物程度上找到了一個(gè)很好的平衡點(diǎn)，既為枯燥的B端設(shè)計(jì)提供了真實(shí)感和趣味性，又保障了復(fù)雜信息情況下的識(shí)別度。并且由于玻璃光滑、透明等物理特性，也為“科技感”的視覺(jué)呈現(xiàn)提供了新的方向。
柔和光影+微質(zhì)感材質(zhì)
與C端設(shè)計(jì)中常用強(qiáng)烈的光影效果吸引用戶(hù)不同，b端設(shè)計(jì)相對(duì)更加沉穩(wěn)。對(duì)比阿里云、WPS、釘釘、騰訊云的官網(wǎng)首頁(yè)，都不約而同地使用了非常柔和的環(huán)境光，這種光影設(shè)計(jì)，在保障整體亮度的基礎(chǔ)上，不會(huì)產(chǎn)生明確的光照方向和陰影效果，并且在材質(zhì)選擇上，也都使用了高光、反光均不明顯的漫反射材質(zhì)或微質(zhì)感的毛玻璃材質(zhì)，整體視覺(jué)感受十分沉靜和整潔。
圖形在設(shè)計(jì)中扮演著兩部分角色，一方面圖形作為頁(yè)面的裝飾需要保證審美的愉悅性，另一方面圖形也作為文字信息的補(bǔ)充，需要傳達(dá)某些特定的含義。好的圖形設(shè)計(jì)不僅能為整個(gè)頁(yè)面的氛圍添光加彩，而且能幫助用戶(hù)更好的理解文字信息。
規(guī)律感的幾何圖形
在b端場(chǎng)景下，常常需要借助圖形表達(dá)一些抽象的概念，例如PaaS、服務(wù)器、AI、用量、科技、流量……這類(lèi)含義并不直接對(duì)應(yīng)一個(gè)特定的造型，使用有規(guī)律的幾何圖形，似乎是一個(gè)不錯(cuò)的選擇。這些技術(shù)概念的背后來(lái)自于二進(jìn)制中0和1的組合，而將幾何元素有機(jī)地排列，甚至衍生出不同的形態(tài)的過(guò)程，不是正如代碼的編寫(xiě)嗎？
簡(jiǎn)潔高效的手繪元素
在當(dāng)下的B端設(shè)計(jì)領(lǐng)域，越來(lái)越重視情感關(guān)懷和個(gè)人用戶(hù)的體驗(yàn)。在頁(yè)面中使用具有手繪感的元素或使用直接使用手繪圖案作為配圖，不僅能夠快速拉近品牌和用戶(hù)之間的距離，塑造年輕化、有親和力的品牌形象，也能提升用戶(hù)在使用產(chǎn)品工作時(shí)的愉悅感。這類(lèi)充滿(mǎn)輕松感的圖形比起傳統(tǒng)的插畫(huà)或3d建模更加簡(jiǎn)潔，色彩鮮明，具有很強(qiáng)的表現(xiàn)力，并且設(shè)計(jì)成本也更低，十分適合作為一些小而美的產(chǎn)品配圖。
例如Google推出的Material design的設(shè)計(jì)語(yǔ)言就大量使用了抽象且配色艷麗的手繪元素作為配圖，這類(lèi)圖案更加強(qiáng)調(diào)色彩并不過(guò)多細(xì)化造型，穿插在文字之間，讓深色背景的頁(yè)面一下活躍了起來(lái)。與此類(lèi)似的還有figma的官網(wǎng)，設(shè)計(jì)師將軟件內(nèi)的部分工具比如線條、線框、錨點(diǎn)、指針等元素抽象出來(lái)作為插圖，不僅簡(jiǎn)潔耐看，而且十分具有自身的品牌特色。
除此之外，利用手繪線條來(lái)表現(xiàn)hover的交互狀態(tài)，圈畫(huà)重要的文字信息，或是進(jìn)行操作引導(dǎo)，也具有極高的效率。簡(jiǎn)單的箭頭或者波浪線，能夠非常直接地將用戶(hù)的注意力指引到重要信息處，就像學(xué)生時(shí)期在書(shū)本上圈畫(huà)重點(diǎn)一樣，感受上十分自然而親切。仿佛應(yīng)用的設(shè)計(jì)者悄悄在用戶(hù)耳邊說(shuō)了一句小tips，而不是粗暴地把信息丟到用戶(hù)眼前。
無(wú)論是擬物風(fēng)格時(shí)期的極致寫(xiě)實(shí)，還是扁平化風(fēng)格時(shí)期的極簡(jiǎn)，又或是AI時(shí)代的多彩絢麗，設(shè)計(jì)風(fēng)格的發(fā)展始終圍繞著技術(shù)發(fā)展的主線，其發(fā)展的目標(biāo)，始終圍繞著如何讓當(dāng)前時(shí)代的用戶(hù)更好更便捷地享受到技術(shù)應(yīng)用帶來(lái)的便利。一個(gè)好的b端設(shè)計(jì)風(fēng)格，不僅能夠幫助企業(yè)展現(xiàn)品牌心智和技術(shù)上的先進(jìn)性；而且能夠讓個(gè)人用戶(hù)更高效且愉悅地完成工作任務(wù)。在未來(lái)的B端產(chǎn)品設(shè)計(jì)中，我們應(yīng)該始終堅(jiān)持形式服務(wù)于功能和以人為本的原則，探索更適合業(yè)務(wù)場(chǎng)景的設(shè)計(jì)風(fēng)格，為用戶(hù)帶來(lái)更加舒適自然的視覺(jué)體驗(yàn)。
以上是本期帶來(lái)的B端設(shè)計(jì)趨勢(shì)之個(gè)風(fēng)格篇。
本文由人人都是產(chǎn)品經(jīng)理作者【釘釘用戶(hù)體驗(yàn)】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于 CC0 協(xié)議。
蘭亭妙微(www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在B端產(chǎn)品設(shè)計(jì)中，退訂是用戶(hù)對(duì)產(chǎn)品不滿(mǎn)的直接表現(xiàn)，也是我們優(yōu)化產(chǎn)品的重要信號(hào)。作為UI設(shè)計(jì)師，如何通過(guò)交互設(shè)計(jì)降低退訂率，提升用戶(hù)留存，是一個(gè)值得深入探討的話題。本文將結(jié)合 DeepSeek（深度探索） 的設(shè)計(jì)理念，從用戶(hù)心理和交互設(shè)計(jì)的角度，分享B端產(chǎn)品退訂心理學(xué)的設(shè)計(jì)策略與實(shí)踐。
強(qiáng)調(diào)通過(guò)深度探索用戶(hù)行為和心理，找到問(wèn)題的本質(zhì)。在退訂場(chǎng)景中，用戶(hù)的行為背后往往隱藏著以下心理動(dòng)因：
1）設(shè)計(jì)目標(biāo)：通過(guò)數(shù)據(jù)分析，找到用戶(hù)退訂的高頻節(jié)點(diǎn)，優(yōu)化交互路徑。
2）設(shè)計(jì)策略：
1）設(shè)計(jì)目標(biāo)：通過(guò)設(shè)計(jì)手段，讓用戶(hù)直觀感受到產(chǎn)品的價(jià)值。
2）設(shè)計(jì)策略：
1）設(shè)計(jì)目標(biāo)：降低用戶(hù)的操作成本，減少因體驗(yàn)不佳導(dǎo)致的退訂。
2）設(shè)計(jì)策略：
1）設(shè)計(jì)目標(biāo)：通過(guò)設(shè)計(jì)讓用戶(hù)感受到被重視，增強(qiáng)對(duì)產(chǎn)品的情感依賴(lài)。
2）設(shè)計(jì)策略：
以某B端 SaaS 產(chǎn)品為例，通過(guò) DeepSeek+交互設(shè)計(jì)策略，退訂率降低了20%。
具體優(yōu)化包括：
退訂是用戶(hù)對(duì)產(chǎn)品的“最后反饋”，也是我們優(yōu)化產(chǎn)品的重要機(jī)會(huì)。通過(guò) DeepSeek+交互設(shè)計(jì)，我們可以深度探索用戶(hù)心理，優(yōu)化交互路徑，強(qiáng)化價(jià)值感知，簡(jiǎn)化操作流程，并建立情感連接，從而有效降低退訂率。希望本文的設(shè)計(jì)策略與實(shí)踐能為B端產(chǎn)品的優(yōu)化提供啟發(fā)，讓我們的產(chǎn)品更好地服務(wù)于用戶(hù)，提升用戶(hù)留存與滿(mǎn)意度。
本文由 @劉萍 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)
蘭亭妙微(www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在數(shù)字化轉(zhuǎn)型和AI技術(shù)的推動(dòng)下，B端設(shè)計(jì)正在經(jīng)歷一場(chǎng)深刻的變革。本文從釘釘近10年的B端產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)出發(fā)，深入探討了2025年B端品牌物料系統(tǒng)設(shè)計(jì)的趨勢(shì)。
回溯互聯(lián)網(wǎng)的發(fā)展進(jìn)程，從桌面端的撥號(hào)上網(wǎng)，到5G移動(dòng)互聯(lián)網(wǎng)，再至人工智能的助力，科技領(lǐng)域正在經(jīng)歷著翻天覆地的變革。未來(lái)的數(shù)字世界，在沉浸感、參與度、個(gè)性化等維度對(duì)體驗(yàn)會(huì)提出更進(jìn)階的要求；與此同時(shí)，B端企業(yè)對(duì)于高效、簡(jiǎn)便、用戶(hù)友好的界面需求與日俱增。在2025年的當(dāng)下，B端設(shè)計(jì)師唯有持續(xù)學(xué)習(xí)，適應(yīng)新技術(shù)與新趨勢(shì)，緊密?chē)@客戶(hù)的業(yè)務(wù)價(jià)值展開(kāi)設(shè)計(jì)，進(jìn)一步注重實(shí)用性、包容性以及可定制化，方可為企業(yè)客戶(hù)塑造出卓越的產(chǎn)品與服務(wù)。
因此，我們結(jié)合釘釘近10年的B端產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)，鑒于未來(lái)B端設(shè)計(jì)趨勢(shì)將展現(xiàn)出多元化、智能化和人性化的特質(zhì)，從B端產(chǎn)品個(gè)性化、風(fēng)格與質(zhì)感、界面版式、品牌物料、動(dòng)態(tài)、圖標(biāo)等多維度設(shè)計(jì)展開(kāi)深度研究，與大家一道探討B(tài)端設(shè)計(jì)的本質(zhì)和趨勢(shì)，期望在真正駕馭B端產(chǎn)品設(shè)計(jì)的這條道路上，帶來(lái)些許有益的啟迪。
今日，將為大家分享2025 B端品牌物料的設(shè)計(jì)趨勢(shì)，深入探討如何系統(tǒng)的構(gòu)建和管理品牌物料體系：從精心提煉品牌戰(zhàn)略，到積極探索客戶(hù)觸點(diǎn)創(chuàng)新，針對(duì)品牌物料的生產(chǎn)、加工和面客宣發(fā)等多元場(chǎng)景，聚焦于高效傳遞品牌一致性、強(qiáng)化專(zhuān)業(yè)信賴(lài)感、精確傳遞產(chǎn)品服務(wù)及價(jià)值，進(jìn)而吸引目標(biāo)客戶(hù)并推動(dòng)轉(zhuǎn)化。
“當(dāng)企業(yè)采購(gòu)決策者同時(shí)收到5份方案書(shū)，你的設(shè)計(jì)怎樣才能率先映入眼簾？”引用Forrester報(bào)告可知，76%的B端采購(gòu)決策會(huì)受視覺(jué)專(zhuān)業(yè)度影響。
B端場(chǎng)景下，由于客戶(hù)具有一些特殊性：比如決策流程漫長(zhǎng)、涉及角色眾多等，所需往往不只是產(chǎn)品，還涵蓋配套安裝、培訓(xùn)、維護(hù)等整體解決方案，并且更看重穩(wěn)定性、信任感與長(zhǎng)期合作價(jià)值。因而，B端產(chǎn)品在面向客戶(hù)展示品牌服務(wù)與物料時(shí)，設(shè)計(jì)上需從品牌策略、視覺(jué)體系、場(chǎng)景應(yīng)用、體驗(yàn)升級(jí)及工具支持等多個(gè)維度，傳遞出專(zhuān)業(yè)、高效、創(chuàng)新的形象。
隨著數(shù)字化轉(zhuǎn)型的影響力與日俱增，綜合行業(yè)變革、技術(shù)發(fā)展以及客戶(hù)需求的動(dòng)態(tài)演變，在實(shí)現(xiàn)品牌一致性傳達(dá)、提升專(zhuān)業(yè)信賴(lài)感以及達(dá)成目標(biāo)客戶(hù)轉(zhuǎn)化等方面，B端品牌物料設(shè)計(jì)歷經(jīng)了從基礎(chǔ)功能傳達(dá)邁向多維度體驗(yàn)升級(jí)的不斷進(jìn)化：
在傳統(tǒng)印刷時(shí)代，為我們所熟知的品牌物料核心載體包括信紙、手冊(cè)、單頁(yè)、展板等。
這些物料的設(shè)計(jì)呈現(xiàn)出高度標(biāo)準(zhǔn)化的特征：嚴(yán)格依照CI手冊(cè)執(zhí)行，該手冊(cè)詳盡規(guī)定了企業(yè)在各類(lèi)場(chǎng)景下正確運(yùn)用品牌元素的方式，諸如標(biāo)志（Logo）、標(biāo)準(zhǔn)字體、色彩系統(tǒng)、宣傳語(yǔ)等，以此確保所有對(duì)外傳播信息均契合企業(yè)的形象定位與價(jià)值觀。然而，這種模式也存在一些弊端，例如改版周期長(zhǎng)、難以滿(mǎn)足客戶(hù)的定制化需求。
步入互聯(lián)網(wǎng)時(shí)代，B端面客的品牌物料通常覆蓋從線上到線下的多元場(chǎng)景，諸如官網(wǎng)、H5產(chǎn)品價(jià)值頁(yè)、文檔介紹、PPT模板、活動(dòng)沙龍物料等等。不僅如此，線上產(chǎn)品一般還借助大量運(yùn)營(yíng)推廣、市場(chǎng)傳播等形式觸達(dá)客戶(hù)或用戶(hù)。
這種方式具備諸多優(yōu)勢(shì)：比如制作周期短，更新迭代快，能夠針對(duì)客戶(hù)的不同身份與需求，實(shí)現(xiàn)更為定制化、精準(zhǔn)化的服務(wù)。同時(shí)，還可通過(guò)復(fù)盤(pán)數(shù)據(jù)轉(zhuǎn)化情況，持續(xù)優(yōu)化和調(diào)整價(jià)值內(nèi)容的呈現(xiàn)方式。
近年來(lái)，技術(shù)迭代日新月異，諸如Web3、AR、生成式AI等新興技術(shù)重構(gòu)了物料形態(tài)。與此同時(shí)，B端決策者的代際更替顯著，越來(lái)越多年輕的企業(yè)管理者對(duì)數(shù)字?jǐn)⑹碌慕邮芏却蠓嵘?shù)據(jù)可視化的融入，不僅讓內(nèi)容更具說(shuō)服力，也契合了B端客戶(hù)對(duì)數(shù)據(jù)的需求。加之產(chǎn)品競(jìng)爭(zhēng)同質(zhì)化現(xiàn)象愈發(fā)凸顯，當(dāng)技術(shù)參數(shù)趨于相同時(shí)，視覺(jué)體驗(yàn)便成為影響客戶(hù)選擇的關(guān)鍵差異點(diǎn)。
當(dāng)前，B端品牌物料設(shè)計(jì)的前沿趨勢(shì)亮點(diǎn)紛呈：實(shí)時(shí)數(shù)據(jù)看板可與客戶(hù)系統(tǒng)API直接相連、動(dòng)態(tài)信息圖表借助AE動(dòng)畫(huà)演示技術(shù)架構(gòu)、動(dòng)態(tài)數(shù)據(jù)資產(chǎn)化表現(xiàn)多樣：比如阿里云以流體力學(xué)動(dòng)畫(huà)演繹云計(jì)算資源調(diào)度，利用粒子系統(tǒng)可視化AI算法運(yùn)行路徑；再比如AR說(shuō)明書(shū)掃描設(shè)備可觸發(fā)三維拆解動(dòng)畫(huà)，全息投影方案沙盤(pán)等，這些都為客戶(hù)帶來(lái)了從“單向傳播”到“交互式對(duì)話”的沉浸式體驗(yàn)。
“在B端領(lǐng)域，視覺(jué)設(shè)計(jì)不是美工，而是產(chǎn)品價(jià)值的翻譯官與商業(yè)信任的構(gòu)筑者。”
我們不難察覺(jué)，B端品牌物料設(shè)計(jì)在視覺(jué)敘事邏輯上已然經(jīng)歷了深刻的進(jìn)化：
過(guò)去
產(chǎn)品介紹大多局限于功能說(shuō)明書(shū)層面?；诰珳?zhǔn)傳遞技術(shù)參數(shù)這一核心目的，形成了以“產(chǎn)品圖 + 技術(shù)指標(biāo) + 對(duì)比表格”構(gòu)成的模塊化排版定式，同時(shí)采用齒輪寓意工業(yè)設(shè)備、電路板象征智能化等隱喻圖形。然而，這種方式弊病明顯，同質(zhì)化現(xiàn)象極為嚴(yán)重，且嚴(yán)重缺失品牌個(gè)性。
現(xiàn)在
產(chǎn)品介紹在兩方面實(shí)現(xiàn)了顯著突破。
其一: 在敘事方式上，實(shí)現(xiàn)了從“我們有什么”到“你能實(shí)現(xiàn)什么”的理念升級(jí)；
其二: 在創(chuàng)新策略上，通過(guò)插畫(huà)生動(dòng)呈現(xiàn)客戶(hù)現(xiàn)有工作流程的痛點(diǎn)，將枯燥的數(shù)據(jù)進(jìn)行戲劇化處理，例如把“節(jié)省30%成本”轉(zhuǎn)化為動(dòng)態(tài)損益曲線，直觀且富有沖擊力。
于B端品牌物料設(shè)計(jì)的發(fā)展進(jìn)程里，如何在秉持專(zhuān)業(yè)性的基礎(chǔ)上，傳遞出飽含情感的溫度，已然成為關(guān)鍵所在。
舉例而言，當(dāng)鼠標(biāo)懸停（hover）在數(shù)據(jù)圖表上，粒子綻放的效果瞬間呈現(xiàn)，為用戶(hù)帶來(lái)耳目一新的奇妙體驗(yàn)；借助材質(zhì)隱喻來(lái)傳達(dá)特定情感，磨砂金屬質(zhì)感猶如無(wú)聲的語(yǔ)言，訴說(shuō)著可靠與安心；還有別出心裁的反數(shù)字化實(shí)踐：比如制作觸感編碼手冊(cè)，讓不同紙張紋理與產(chǎn)品特性一一呼應(yīng)，磨砂紙?jiān)⒁獍踩雷o(hù)的堅(jiān)實(shí)壁壘，金屬箔象征尖端科技的無(wú)限探索。
與此同時(shí)，可持續(xù)物料創(chuàng)新層出不窮，諸多環(huán)保實(shí)踐讓人眼前一亮：比如采用大豆油墨印刷，讓廢棄手冊(cè)在短短6個(gè)月內(nèi)便可自然降解；電子說(shuō)明書(shū)中巧妙內(nèi)嵌碳足跡計(jì)算器，清晰展示環(huán)保貢獻(xiàn)數(shù)值。像某清潔設(shè)備廠商獨(dú)具匠心，其手冊(cè)采用種子紙制作，客戶(hù)將手冊(cè)種植后，便能收獲與企業(yè)LOGO形狀相關(guān)的植物，為環(huán)保行動(dòng)增添一抹別樣的詩(shī)意。此外，展望未來(lái)生態(tài)感知期，諸如腦機(jī)接口情緒反饋設(shè)計(jì)等前沿探索，正引領(lǐng)著B(niǎo)端品牌物料設(shè)計(jì)邁向更多維的天地。
B端品牌物料作為與客戶(hù)之間的溝通材料，需要兼顧品牌戰(zhàn)略穿透力與商業(yè)場(chǎng)景適配性，其本質(zhì)離不開(kāi)以人為中心的服務(wù)和體驗(yàn)，不管是網(wǎng)頁(yè)還是H5，印刷物還是空間，都大量借助“物理元素”進(jìn)行可視化呈現(xiàn)，“有形”的體驗(yàn)?zāi)軌蚣由羁蛻?hù)對(duì)服務(wù)的記憶，強(qiáng)化客戶(hù)感知。
接下來(lái)，我們從品牌戰(zhàn)略層到系統(tǒng)層再到執(zhí)行層，深入闡述如何更系統(tǒng)地構(gòu)建B端品牌物料設(shè)計(jì)。
B端品牌物料系統(tǒng)設(shè)計(jì)的首要步驟，便是提煉其獨(dú)特的價(jià)值觀、差異化競(jìng)爭(zhēng)優(yōu)勢(shì)，以及與客戶(hù)建立信任的關(guān)鍵標(biāo)識(shí)等要素。這些品牌基因的提取，應(yīng)重點(diǎn)著眼于行業(yè)特性、技術(shù)門(mén)檻以及品牌服務(wù)定位，而非側(cè)重于感性的情感表達(dá)。
以釘釘為例，AI時(shí)代下，我們的品牌主張聚焦于讓組織和個(gè)人更敏捷、更有創(chuàng)造力，致力于塑造智能、簡(jiǎn)約、普惠且開(kāi)放的企業(yè)形象?；谶@一品牌戰(zhàn)略，我們?cè)谠O(shè)計(jì)風(fēng)格（涵蓋色彩、質(zhì)感、版式以及傳播物料等方面）、面客產(chǎn)品介紹，以及文案描述等多個(gè)維度，都進(jìn)行了系統(tǒng)性的煥新升級(jí)。
B端品牌物料設(shè)計(jì)，絕非僅僅著眼于美觀，更需具備策略性，以便針對(duì)不同客戶(hù)場(chǎng)景，精準(zhǔn)傳遞相應(yīng)信息。
在釘釘，我們精心構(gòu)建了新紫品牌物料庫(kù)，無(wú)論是內(nèi)部的企服人員、銷(xiāo)售、設(shè)計(jì)師、業(yè)務(wù)PDSA等，還是外部生態(tài)服務(wù)商及其他人員，都能開(kāi)放使用，實(shí)現(xiàn)及時(shí)共享。
例如，當(dāng)線下的前線銷(xiāo)售團(tuán)隊(duì)舉辦面對(duì)面的會(huì)銷(xiāo)活動(dòng)或客戶(hù)沙龍時(shí)，為了更直觀、規(guī)范地展示產(chǎn)品或服務(wù)，我們提供一系列契合釘釘調(diào)性的基礎(chǔ)演示物料，包括PPT、產(chǎn)品介紹文檔、手冊(cè)、企業(yè)名片、一&五&十頁(yè)紙、邀請(qǐng)函以及展廳氛圍布置等標(biāo)準(zhǔn)模板。同時(shí)，針對(duì)各類(lèi)物料，配備詳細(xì)的使用說(shuō)明文檔和生產(chǎn)SOP，內(nèi)容涵蓋從文件下載到字體安裝，從素材使用到標(biāo)準(zhǔn)輸出，再?gòu)墓に囍谱鞯筋A(yù)算成本等各個(gè)環(huán)節(jié)。即便你是設(shè)計(jì)小白不懂設(shè)計(jì)，也能依據(jù)自身需求，迅速對(duì)接供應(yīng)商，制作出精美且符合品牌調(diào)性的物料。
同時(shí)，為擴(kuò)大新紫品牌物料在前線人員中的知曉度與認(rèn)知度，提高物料使用頻率，并確保物料使用的一致性，我們與前線團(tuán)隊(duì)緊密建聯(lián)，定期開(kāi)展線上直播培訓(xùn)與答疑活動(dòng)。通過(guò)收集真實(shí)客戶(hù)需求反饋，反哺品牌物料不斷完善。
又如，當(dāng)釘釘員工進(jìn)行客戶(hù)共創(chuàng)、拜訪時(shí)，為保障服務(wù)專(zhuān)業(yè)度，提升企業(yè)品牌形象，我們會(huì)準(zhǔn)備精美且適宜的伴手禮，并聯(lián)合市場(chǎng)團(tuán)隊(duì)，輸出一套完整的釘釘官方品牌介紹、釘釘集團(tuán)案例介紹等物料供其使用。
值得注意的是，釘釘?shù)纳鷳B(tài)服務(wù)商也是展現(xiàn)釘釘企業(yè)服務(wù)與形象的關(guān)鍵力量，因此，我們還為其提供統(tǒng)一裝修建議，包括門(mén)頭設(shè)計(jì)、裝修風(fēng)格、著裝要求、解決方案手冊(cè)等。
再如，在釘釘?shù)木€上場(chǎng)景中，釘釘官網(wǎng)、各業(yè)務(wù)產(chǎn)品H5價(jià)值頁(yè)等都是客戶(hù)快速了解產(chǎn)品的重要渠道。為提升內(nèi)部人員協(xié)同效率，我們?cè)O(shè)計(jì)開(kāi)發(fā)了釘釘內(nèi)容運(yùn)營(yíng)生產(chǎn)平臺(tái)——「叮當(dāng)貓」，其中沉淀并搭建了大量關(guān)于釘釘產(chǎn)品功能、價(jià)值介紹、企業(yè)案例和解決方案等模板，如同精心配置的“預(yù)制菜”，使用者可直接便捷取用。
此外，在B端具體業(yè)務(wù)中，品牌物料需更具靈活性。例如，在釘釘管理套件商業(yè)化場(chǎng)景中，針對(duì)面客材料繁多、演示組織操作門(mén)檻高、及時(shí)迭代性差等痛點(diǎn)，我們打造即開(kāi)即用的產(chǎn)品體驗(yàn)樣板間，讓客戶(hù)能夠快速、便捷、可視化地體驗(yàn)產(chǎn)品，加速客戶(hù)決策。
最后，B端場(chǎng)域下，客戶(hù)除了通過(guò)線下一對(duì)一或線上觸達(dá)服務(wù)了解產(chǎn)品介紹，各類(lèi)傳播渠道同樣是企業(yè)品牌與心智塑造的重要陣地。像大型企業(yè)發(fā)布會(huì)、產(chǎn)品公眾號(hào)、小紅書(shū)等平臺(tái)，都是不容忽視的關(guān)鍵場(chǎng)景。在釘釘，我們每年定期舉辦大型產(chǎn)品升級(jí)發(fā)布會(huì)，并借助各類(lèi)傳播渠道持續(xù)宣傳推廣，不斷擴(kuò)大品牌影響力。
品牌物料管理在B端業(yè)務(wù)中不僅是設(shè)計(jì)規(guī)范問(wèn)題，更是品牌資產(chǎn)運(yùn)營(yíng)、組織協(xié)同效能提升的系統(tǒng)工程。
在品牌物料投放與實(shí)際使用過(guò)程中，我們時(shí)常遭遇一些典型痛點(diǎn)場(chǎng)景，比如某會(huì)晤物料使用過(guò)期Logo、某線下展會(huì)采用過(guò)時(shí)的色彩規(guī)范、某產(chǎn)品價(jià)值頁(yè)與白皮書(shū)技術(shù)參數(shù)不一致等。追根溯源，這些問(wèn)題的核心成因在于上下游協(xié)同與一致性管理的缺失。在幾十人的小型企業(yè)中，此類(lèi)情況或許尚不嚴(yán)重，通過(guò)簡(jiǎn)單的相互“問(wèn)一嘴”，便能較快達(dá)成信息對(duì)焦。然而，一旦企業(yè)規(guī)模擴(kuò)張，人數(shù)達(dá)到幾百、上千甚至過(guò)萬(wàn)，品牌物料一致性的協(xié)同管理便會(huì)變得愈發(fā)困難。因此，為更高效地解決信息不對(duì)齊、不統(tǒng)一的難題，建立一套標(biāo)準(zhǔn)的品牌物料管理范式用以指導(dǎo)物料設(shè)計(jì)與使用的準(zhǔn)入及準(zhǔn)出，就顯得尤為必要。
在釘釘，隨著智能化的全面升級(jí)，為提升品牌物料的美觀度與專(zhuān)業(yè)度，同時(shí)提高物料調(diào)用效率、確保使用的一致性，我們與銷(xiāo)售團(tuán)隊(duì)特別成立專(zhuān)項(xiàng)項(xiàng)目組。在企服前線代表和各業(yè)務(wù)產(chǎn)品代表的關(guān)鍵支持下，形成了 「生產(chǎn)部」-「加工中心」-「面客部」 的品牌物料生產(chǎn)、加工與調(diào)用管理機(jī)制?！干a(chǎn)部」的人負(fù)責(zé)做什么，再到「面客部」的人負(fù)責(zé)賣(mài)什么，而處于中間環(huán)節(jié)負(fù)責(zé)加工的人員，則如同橋梁一般，確保上下游信息傳遞的準(zhǔn)確性以及品牌物料管理的一致性。比如：有人負(fù)責(zé)細(xì)化到行業(yè)或場(chǎng)景的demo設(shè)計(jì)，有人核心輸出標(biāo)桿客戶(hù)案例，還有人負(fù)責(zé)輸出一套完整的企業(yè)服務(wù)面客規(guī)范。做好品牌物料的一致性管理，能夠極大的提升B端客戶(hù)決策效率（降低認(rèn)知成本），同時(shí)強(qiáng)化企業(yè)專(zhuān)業(yè)可信度。
隨著行業(yè)變遷、客戶(hù)需求的不斷更迭以及技術(shù)的日新月異，B端品牌物料設(shè)計(jì)已悄然蛻變，從傳統(tǒng)認(rèn)知里單純的宣傳材料，逐步發(fā)展成為多維且個(gè)性化的服務(wù)與體驗(yàn)。當(dāng)下B端品牌物料的設(shè)計(jì)趨勢(shì)，聚焦于高效傳遞品牌一致性、強(qiáng)化專(zhuān)業(yè)信賴(lài)感，以及系統(tǒng)性管理好物料的生產(chǎn)、加工和面客宣發(fā)。從精心提煉品牌戰(zhàn)略，到積極探索客戶(hù)觸點(diǎn)創(chuàng)新，每一個(gè)環(huán)節(jié)都旨在降低客戶(hù)認(rèn)知成本，助力企業(yè)精準(zhǔn)傳遞產(chǎn)品服務(wù)及其價(jià)值，從而推動(dòng)客戶(hù)轉(zhuǎn)化。
以上就是本期為大家?guī)?lái)的B端設(shè)計(jì)趨勢(shì)之品牌物料系統(tǒng)設(shè)計(jì)的全部?jī)?nèi)容。后續(xù)，我們還將從動(dòng)效、圖標(biāo)等設(shè)計(jì)趨勢(shì)深入研究，期待在深耕B端產(chǎn)品設(shè)計(jì)的道路上，與各位攜手前行，共同進(jìn)步。
作者：冬然 @
本文由人人都是產(chǎn)品經(jīng)理作者【釘釘用戶(hù)體驗(yàn)】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于 CC0 協(xié)議。
常見(jiàn)的B端卡片組件，應(yīng)該怎么設(shè)計(jì)才可以達(dá)成更好的傳播效果、傳遞更清晰、更完善的視覺(jué)體驗(yàn)？在本篇文章里，作者就結(jié)合具體案例，對(duì)B端卡片組件設(shè)計(jì)進(jìn)行了技巧拆解，一起來(lái)看看吧，或許會(huì)對(duì)你有所啟發(fā)。
B端設(shè)計(jì)的過(guò)程中，并不是所有元素抄一抄別人的，從組件庫(kù)里引用下就完事了，而是要經(jīng)過(guò)具體組織并設(shè)計(jì)。尤其在一些特殊的組件中，是可以去表現(xiàn)設(shè)計(jì)水平，提升項(xiàng)目整體視覺(jué)質(zhì)量的，而不是讓它們看起來(lái)非常的枯燥乏味。
這次，我們的改版主要就圍繞在B端常見(jiàn)的卡片組件中，通過(guò)3個(gè)以前提交過(guò)的作業(yè)，來(lái)分享如何設(shè)計(jì)B端的卡片。
三個(gè)改版案例我們都遵循相同的設(shè)計(jì)方式和順序：
在該案例中，卡片作為頁(yè)面的核心對(duì)象，視覺(jué)重心不夠突出，且內(nèi)容的權(quán)重沒(méi)有得到有效的表現(xiàn)，訂單標(biāo)識(shí)只有一個(gè)的情況反復(fù)強(qiáng)調(diào)對(duì)識(shí)別卡片沒(méi)有任何幫助，且卡片占比過(guò)大，沒(méi)必要的浪費(fèi)頁(yè)面空間。
所以，重構(gòu)它的結(jié)構(gòu)時(shí)，重點(diǎn)突出標(biāo)題弱化標(biāo)簽，將卡片拆分成標(biāo)題、信息、操作三個(gè)欄，讓信息的呈現(xiàn)更簡(jiǎn)潔直觀。
然后再具體優(yōu)化內(nèi)容和細(xì)節(jié)，對(duì)重要信息突出，固定的標(biāo)題字段弱化。
最后，再根據(jù)主色的需要填充色彩進(jìn)去即可。
這個(gè)案例也是設(shè)計(jì)得比較有問(wèn)題的，但是忽略掉全局組件的粗糙，卡片部分的設(shè)計(jì)也是很多作品案例中的常見(jiàn)問(wèn)題，要素過(guò)多，沒(méi)有主次，在列表化的展示中，根本沒(méi)辦法很好的識(shí)別相關(guān)的內(nèi)容和關(guān)注到有效的信息，會(huì)被淹沒(méi)在繁復(fù)的字段內(nèi)容中。
所以，我們用相同的方法作下區(qū)分，將內(nèi)容分為上中下三個(gè)欄。
然后再對(duì)字段做權(quán)重的劃分，雖然字段信息很多，但值得被突出的要素不多，企業(yè)名和數(shù)據(jù)是卡片中最重要的信息，一個(gè)用于識(shí)別卡片，一個(gè)用于查看核心的指標(biāo)。
最后，再完成樣式的補(bǔ)全即可，只在星級(jí)和用戶(hù)職位上增加色彩。
問(wèn)題和前面還是一樣，內(nèi)容很零碎，所有要素都強(qiáng)調(diào)，于是就沒(méi)有重點(diǎn)。所以，下面對(duì)它們進(jìn)行改版，這次因?yàn)閿?shù)據(jù)項(xiàng)不再是重點(diǎn)，卡片的目標(biāo)不是用來(lái)查看數(shù)據(jù)而是用于檢索進(jìn)入到下級(jí)頁(yè)面的，所以只分了兩欄。
然后，再對(duì)權(quán)重進(jìn)行強(qiáng)調(diào)，查看詳情是這里面最重要的元素，圖片則沒(méi)有太大的意義僅僅是點(diǎn)綴所以縮小。
最后，再完成相應(yīng)色彩的添加和圖片的填充，完成最終的視覺(jué)效果。
這三個(gè)改版都用了很簡(jiǎn)單的修改方式，通過(guò)理解卡片的作用、字段信息，對(duì)它進(jìn)行信息分區(qū)，然后填入相關(guān)的字段并做出權(quán)重劃分，最后再用顏色為不同的要素加權(quán)。
只要掌握這樣的設(shè)計(jì)思路，做絕大多數(shù)卡片都不會(huì)有阻力，只會(huì)糾結(jié)于應(yīng)該用哪套樣式更合適。
因?yàn)闀r(shí)間關(guān)系只做了很簡(jiǎn)單的調(diào)整，沒(méi)去做多套大跨度的樣式變更，同時(shí)套進(jìn)原圖環(huán)境沒(méi)做整體的處理，所以還有很多升級(jí)優(yōu)化的空間，理解這個(gè)感覺(jué)即可。
作者：酸梅干超人；
本文由 @超人的電話亭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash ，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
資深UI設(shè)計(jì)者 B端ui設(shè)計(jì)文章及欣賞
這些是一些創(chuàng)新和不同尋常的B端系統(tǒng)界面設(shè)計(jì)思路，可以根據(jù)具體的業(yè)務(wù)需求和用戶(hù)群體的特點(diǎn)進(jìn)行定制和調(diào)整。希望這些思路能夠?yàn)槟鷰?lái)新的靈感和想法！
在B端產(chǎn)品設(shè)計(jì)中，中后臺(tái)UI設(shè)計(jì)規(guī)范的建立對(duì)于提升設(shè)計(jì)效率、保證用戶(hù)體驗(yàn)一致性以及優(yōu)化開(kāi)發(fā)流程至關(guān)重要。本文從設(shè)計(jì)規(guī)范的意義、原子設(shè)計(jì)理論、后臺(tái)設(shè)計(jì)系統(tǒng)搭建以及Design Token應(yīng)用實(shí)踐四個(gè)方面，詳細(xì)總結(jié)了B端中后臺(tái)設(shè)計(jì)的要點(diǎn)和方法，供大家參考學(xué)習(xí)。
今天從以下4個(gè)方面，結(jié)合7年B端設(shè)計(jì)工作經(jīng)驗(yàn)，為大家分享原子設(shè)計(jì)理論和中后臺(tái)設(shè)計(jì)系統(tǒng)搭建的應(yīng)用實(shí)踐。
分別站在整個(gè)產(chǎn)品設(shè)計(jì)研發(fā)流程中各個(gè)角色的不同角度，在工作中可能會(huì)有以下“抱怨時(shí)刻”：
由此，體現(xiàn)出搭建設(shè)計(jì)規(guī)范的作用和意義：
① 產(chǎn)品側(cè)
?個(gè)產(chǎn)品不同分?多個(gè)團(tuán)隊(duì)完成的時(shí)候，可以保證產(chǎn)品團(tuán)隊(duì)使?同?份設(shè)計(jì)規(guī)范快速完成產(chǎn)品原型設(shè)計(jì)。保證可復(fù)?模塊的交互體驗(yàn)的?致性。
② 設(shè)計(jì)側(cè)
通過(guò)設(shè)計(jì)規(guī)范去解決?部分需求，極?提?效率解放雙?，讓設(shè)計(jì)師能去做?些更發(fā)揮創(chuàng)意和想象?的設(shè)計(jì)。
③ 開(kāi)發(fā)側(cè)
形成開(kāi)發(fā)資產(chǎn)，可以提升研發(fā)效率，降低維護(hù)成本。開(kāi)發(fā)?程師?需再重復(fù)開(kāi)發(fā)同?個(gè)組件，只需要去組件庫(kù)?調(diào)?即可，配合業(yè)務(wù)邏輯，?效完成界?開(kāi)發(fā)，做到開(kāi)箱即?。
④ 測(cè)試側(cè)
標(biāo)準(zhǔn)化的設(shè)計(jì)規(guī)范，是測(cè)試?員最喜歡看到的。例如，設(shè)計(jì)規(guī)范規(guī)定彈窗 footer 區(qū)按鈕組居右，那么測(cè)試?員只要測(cè)到不居右，就可以給產(chǎn)品提優(yōu)化建議了。
設(shè)計(jì)規(guī)范中具像化的環(huán)節(jié)是設(shè)計(jì)組件化，最早可以追溯到?業(yè)?命時(shí)期，福特創(chuàng)造的流?線?產(chǎn)?式。福特將汽?分解成零部件，再把零部件模塊化組裝，這?創(chuàng)舉極?的提?了?產(chǎn)效率。
根據(jù)資料顯示，T型?是世界第?款?量使?通?零部件，并進(jìn)??規(guī)模流?線裝配的汽?。這種?式極?地提?了T型??產(chǎn)效率，降低了?產(chǎn)成本。
1914年，福特已經(jīng)可以做到93分鐘?產(chǎn)?輛汽?，?同期其他所有汽??商的?產(chǎn)能?總和也不及于此。
到了1920年代，T型?的價(jià)格甚?降到300美元?輛（問(wèn)世之初T型?的售價(jià)僅需850美元，?同期的競(jìng)爭(zhēng)對(duì)?則通常為2000-3000美元?輛）。
原子設(shè)計(jì)理論最初來(lái)源于化學(xué)領(lǐng)域，這一點(diǎn)從名字可以聽(tīng)出來(lái)。在化學(xué)中，所有的物體都是由原?構(gòu)成，原?組合構(gòu)成分?，分?組合構(gòu)成有機(jī)物，最終形成了宇宙萬(wàn)物。
2013年前端?程師 Brad Forst將此理論運(yùn)?在界?設(shè)計(jì)中，形成?套設(shè)計(jì)系統(tǒng)，包含 5 個(gè)層?：原?、分?、組織、模板、??。當(dāng)公司的業(yè)務(wù)產(chǎn)品逐漸擴(kuò)?時(shí)，我們就需要制定?套完整的設(shè)計(jì)系統(tǒng)，提升設(shè)計(jì)和開(kāi)發(fā)的協(xié)作效率，統(tǒng)?所有設(shè)計(jì)師的輸出物。
總之，將設(shè)計(jì)拆分成?些基本元素，例如?個(gè)按鈕、?個(gè)彈窗，再根據(jù)業(yè)務(wù)需求、產(chǎn)品邏輯重新組裝，形成最終的產(chǎn)品，這就是原?設(shè)計(jì)理論（組件化設(shè)計(jì)），區(qū)別于整體設(shè)計(jì)制造的?種新的?作流程。
原?是物質(zhì)的基礎(chǔ)組成部分，是構(gòu)成設(shè)計(jì)系統(tǒng)的最基礎(chǔ)元素。
在界?中以「元素」的形式存在，例如：顏?、?字、圖標(biāo)、分割線、間距、圓?、陰影等。
色彩體系
中后臺(tái)產(chǎn)品的?彩體系主要分為3類(lèi)：品牌?、功能?、中性?。
B端網(wǎng)站體現(xiàn)理性和效率特性，往往會(huì)使中性色占據(jù)九成以上，應(yīng)用在背景、邊框、文本和分割線。下圖為顏色定義示例（考慮暗色模式）。
文字體系
B端產(chǎn)品的?字系統(tǒng)設(shè)計(jì)?標(biāo)：增強(qiáng)閱讀體驗(yàn)、提升信息獲取效率，字體是體系化界?設(shè)計(jì)中最基本的構(gòu)成之?。
字體的??、字重、?彩區(qū)分體現(xiàn)界?信息的層級(jí)關(guān)系。
下圖為字階應(yīng)用規(guī)范示意：
陰影、圓角、線條
陰影：在B端界?中，有些特殊的元素會(huì)使?到陰影，從陰影中我們可以看出物體距離平?的?度，距離平?越?的物體陰影越?；
圓角：從直?到圓?給?帶來(lái)從嚴(yán)謹(jǐn)冰冷到柔和親切的?理感受，在B端界? 中，常?2-8px圓?；
線條：分割模塊及輔助定位。
在界?中，分?是按照規(guī)律組合起來(lái)的元素，如：按鈕、搜索框、選擇器等。
以按鈕為例，?字、?塊、圖標(biāo)和間距這些抽象的原?產(chǎn)?關(guān)聯(lián)組合成分?：圖標(biāo)、?字傳達(dá)含義；顏?、圓?傳遞特性；間距、尺?定義規(guī)范。
分?+原?組合成更復(fù)雜和可拓展的組織（區(qū)塊組件），如搜索區(qū)、卡?列表區(qū)、表單區(qū)、數(shù)據(jù)統(tǒng)計(jì)區(qū)等。
由原?+分?+組織構(gòu)成的更復(fù)雜更具拓展性的模塊，構(gòu)成了典型??模板，如列表?、詳情?、異常?、Dashboard等。模板在設(shè)計(jì)系統(tǒng)中承載的作?就是保證設(shè)計(jì)?案在原型各階段的?致性，專(zhuān)注??底層架構(gòu)，并?具體??。
帶業(yè)務(wù)邏輯的場(chǎng)景案例，如標(biāo)注場(chǎng)景、權(quán)限管理、詳情設(shè)置等，將??模板填充真實(shí)的?字、圖?后形成??，即帶交互邏輯的?保真原型圖，真實(shí)內(nèi)容使設(shè)計(jì)系統(tǒng)有了“?命” 。
雖然通過(guò)設(shè)計(jì)規(guī)范可以對(duì)產(chǎn)研流程提效，但在開(kāi)發(fā)還原中還是會(huì)經(jīng)常遇到?些棘?的問(wèn)題。
開(kāi)發(fā)還原準(zhǔn)確度難以保證，走查幾輪還有有細(xì)節(jié)問(wèn)題沒(méi)有修復(fù)；
領(lǐng)導(dǎo)要求開(kāi)發(fā)暗色模式，或者客戶(hù)要求換一套主題色，找到替換的工作量巨大；
設(shè)計(jì)一處變更，涉及多個(gè)頁(yè)面模塊，維護(hù)工作量大。
為了解決和優(yōu)化上述的問(wèn)題，Design Token 應(yīng)運(yùn)??。它可以解決產(chǎn)品設(shè)計(jì)和開(kāi)發(fā)過(guò)程中的細(xì)節(jié)、變更和?格?致性的問(wèn)題，有效提?產(chǎn)研團(tuán)隊(duì)設(shè)計(jì)質(zhì)量和協(xié)作效率。
“Token”原本的意思是“令牌，指令”，與 Design 連在?起指“設(shè)計(jì)變量”。在?程邏輯中?于?戶(hù)身份與服務(wù)器端進(jìn)?驗(yàn)證，?在設(shè)計(jì)體系中，Design Token 則可以簡(jiǎn)單理解為封裝的視覺(jué)樣式參數(shù)。它通過(guò)規(guī)定樣式參數(shù)，并通過(guò)?套符合設(shè)計(jì)師、?程師理解的統(tǒng)?的命名規(guī)則，為這些樣式參數(shù)的定義名稱(chēng)。
Design Token優(yōu)勢(shì)
設(shè)計(jì)語(yǔ)義更易理解：幫助設(shè)計(jì)師和開(kāi)發(fā)建?統(tǒng)?語(yǔ)?，設(shè)計(jì)?案更加?致。從下到上的Design Token命名思路。
主題?膚?鍵替換：主題?膚的替換可以?在兩個(gè)維度，?是淺?模式和暗?模式的替換，?是不同品牌?之間的替換。我們可以將不同主題的同?個(gè)場(chǎng)景下的顏?使?同?個(gè) Token 命名，達(dá)到?鍵換膚的效果適配不同客戶(hù)?案。
設(shè)計(jì)變更?效維護(hù)：替代傳統(tǒng)?作流?鍵替換效果。例如修改二級(jí)文本的顏色，傳統(tǒng)工作流需要先修改設(shè)計(jì)規(guī)范，修改設(shè)計(jì)稿，然后輸出給開(kāi)發(fā)，開(kāi)發(fā)逐一更新代碼，完成后提交給設(shè)計(jì)師進(jìn)行走查驗(yàn)收。而當(dāng)使用Token之后，只需要更新Token參數(shù)，就可以直接導(dǎo)出JSON給開(kāi)發(fā)，一鍵自動(dòng)更新。提高效率不止一點(diǎn)點(diǎn)。
設(shè)計(jì)效果精準(zhǔn)還原：代碼編輯器?動(dòng)化提示顏?選擇，如不正確則產(chǎn)?報(bào)錯(cuò)。
總結(jié)一下使用Token開(kāi)發(fā)的優(yōu)勢(shì)：
第一步：提煉token元素；
第二步：定義命名規(guī)則；
第三步：整理Design Token資產(chǎn)表；
第四步：開(kāi)發(fā)與應(yīng)用。
接下來(lái)具體說(shuō)說(shuō)如何為Design Token命名，命名方式目前并沒(méi)有絕對(duì)統(tǒng)一的要求，不過(guò)有一定的邏輯規(guī)則，可以由設(shè)計(jì)師找前端開(kāi)發(fā)一起商量出一個(gè)都能通俗易懂便于理解的命名規(guī)則，
舉個(gè)例子：
1.Token名稱(chēng)由大到小排序，中間用“-”分隔；
2.Token前綴可自定義添加公司簡(jiǎn)稱(chēng)，如“–el-xx” 、“–ant-xx”、“–td-xx”。
為了更好的統(tǒng)一規(guī)范，應(yīng)用Token，建議成熟的互聯(lián)網(wǎng)公司設(shè)計(jì)團(tuán)隊(duì)搭建自己的低代碼平臺(tái)。一鍵更換主題，盡在指尖。
以上就是從四個(gè)方面歸納的B端設(shè)計(jì)規(guī)范定義和總結(jié)，希望對(duì)你有所幫助！
本文由人人都是產(chǎn)品經(jīng)理作者【Clippp】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于 CC0 協(xié)議。
蘭亭妙微(www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在數(shù)字化時(shí)代，B端產(chǎn)品的用戶(hù)體驗(yàn)設(shè)計(jì)正變得愈發(fā)重要。動(dòng)效設(shè)計(jì)作為提升交互體驗(yàn)和效率的關(guān)鍵手段，正在成為B端設(shè)計(jì)中不可或缺的一部分。本文將深入探討2025年B端設(shè)計(jì)中動(dòng)效的趨勢(shì)，從動(dòng)效的歷史演變、物理世界中的靈感汲取，到釘釘設(shè)計(jì)系統(tǒng)中的實(shí)踐應(yīng)用，幫助我們理解動(dòng)效如何從簡(jiǎn)單的視覺(jué)裝飾轉(zhuǎn)變?yōu)樘嵘a(chǎn)品效率和用戶(hù)體驗(yàn)的核心工具。
回溯互聯(lián)網(wǎng)的發(fā)展進(jìn)程，從桌面端的撥號(hào)上網(wǎng)，到5G移動(dòng)互聯(lián)網(wǎng)，再至人工智能的助力，科技領(lǐng)域正在經(jīng)歷著翻天覆地的變革。
未來(lái)的數(shù)字世界，在沉浸感、參與度、個(gè)性化等維度對(duì)體驗(yàn)會(huì)提出更進(jìn)階的要求；與此同時(shí)，B端企業(yè)對(duì)于高效、簡(jiǎn)便、用戶(hù)友好的界面需求與日俱增。
在2025年的當(dāng)下，B端設(shè)計(jì)師唯有持續(xù)學(xué)習(xí)，適應(yīng)新技術(shù)與新趨勢(shì)，緊密?chē)@客戶(hù)的業(yè)務(wù)價(jià)值展開(kāi)設(shè)計(jì)，進(jìn)一步注重實(shí)用性、包容性以及可定制化，方可為企業(yè)客戶(hù)塑造出卓越的產(chǎn)品與服務(wù)。
因此，我們結(jié)合釘釘近10年的B端產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)，鑒于未來(lái)B端設(shè)計(jì)趨勢(shì)將展現(xiàn)出多元化、智能化和人性化的特質(zhì)，從B端產(chǎn)品個(gè)性化、風(fēng)格與質(zhì)感、界面版式、品牌物料、圖標(biāo)、動(dòng)態(tài)交互等多維度設(shè)計(jì)展開(kāi)深度研究，與大家一道探討B(tài)端設(shè)計(jì)的本質(zhì)和趨勢(shì)，期望在真正駕馭B端產(chǎn)品設(shè)計(jì)的這條道路上，帶來(lái)些許有益的啟迪。對(duì)交互等多維度設(shè)計(jì)展開(kāi)深度研究，與大家一道探討B(tài)端設(shè)計(jì)的本質(zhì)和趨勢(shì)，期望在真正駕馭B端產(chǎn)品設(shè)計(jì)的這條道路上，帶來(lái)些許有益的啟迪。
今天要和大家聊聊 B 端產(chǎn)品的動(dòng)效設(shè)計(jì)趨勢(shì)。我們將回顧動(dòng)效的發(fā)展軌跡，從歷史演變到設(shè)計(jì)哲學(xué)，探索如何從物理世界汲取靈感，并分享釘釘在動(dòng)效設(shè)計(jì)中的思考與實(shí)踐。
動(dòng)效設(shè)計(jì)在互聯(lián)網(wǎng)的發(fā)展歷程中經(jīng)歷了多次變革。從最初簡(jiǎn)單的過(guò)渡動(dòng)畫(huà)，到如今復(fù)雜而精細(xì)的交互體驗(yàn)，動(dòng)效的演進(jìn)不僅是技術(shù)發(fā)展的產(chǎn)物，也映射了用戶(hù)體驗(yàn)設(shè)計(jì)理念的不斷深化。
在互聯(lián)網(wǎng)的早期，受限于帶寬和硬件性能，動(dòng)效的應(yīng)用較為基礎(chǔ)，主要用于加載進(jìn)度條和頁(yè)面過(guò)渡，核心目的是向用戶(hù)提供反饋，減少操作過(guò)程中的不確定性。典型案例是 Windows 98 時(shí)代的加載進(jìn)度條和網(wǎng)頁(yè)上的緩沖動(dòng)畫(huà)。這些動(dòng)效雖然簡(jiǎn)單，卻在當(dāng)時(shí)發(fā)揮了重要作用——幫助用戶(hù)理解系統(tǒng)狀態(tài)，降低等待焦慮。
進(jìn)入 2000 年代中期，F(xiàn)lash 技術(shù)的普及讓網(wǎng)頁(yè)動(dòng)畫(huà)迎來(lái)了黃金時(shí)代。Flash 賦予了設(shè)計(jì)師更大的自由度，使得網(wǎng)頁(yè)可以呈現(xiàn)更豐富的動(dòng)態(tài)效果，動(dòng)效不再局限于狀態(tài)反饋，而開(kāi)始深度參與交互體驗(yàn)。這一時(shí)期，動(dòng)效的作用從提示系統(tǒng)狀態(tài)進(jìn)化為增強(qiáng)用戶(hù)沉浸感，例如按鈕懸停時(shí)的動(dòng)態(tài)反饋，炫酷的頁(yè)面切換過(guò)渡，以及交互式動(dòng)畫(huà)（如鼠標(biāo)跟隨效果、小游戲動(dòng)畫(huà)等）。
不過(guò)，F(xiàn)lash 的動(dòng)效過(guò)度依賴(lài)插件，影響性能，并且在移動(dòng)端難以兼容。2010 年代，隨著 HTML5 和 CSS3 的發(fā)展，F(xiàn)lash 逐漸被取代，動(dòng)效設(shè)計(jì)進(jìn)入新階段。
隨著移動(dòng)互聯(lián)網(wǎng)興起，尤其是 Material Design，iOS，以及 Fluent Design 等動(dòng)效規(guī)范的推出，動(dòng)效設(shè)計(jì)進(jìn)入了全新的階段。這個(gè)階段的核心理念是基于物理規(guī)律的自然動(dòng)效，強(qiáng)調(diào)動(dòng)效不僅僅是裝飾，而是信息層級(jí)傳遞、引導(dǎo)用戶(hù)操作的重要工具。
Material Design：強(qiáng)調(diào)物理隱喻與流暢性
Fluent Design：深度融合光影與層次感
由此可見(jiàn)，動(dòng)效不再只是視覺(jué)上的炫技，而是成為提升可用性、降低認(rèn)知負(fù)荷的重要工具。合理的動(dòng)效可以提升用戶(hù)的操作流暢度，讓界面變得更自然、更具生命力。
在自然界里，每一次風(fēng)吹樹(shù)葉的擺動(dòng)、每一滴水滴入湖面的擴(kuò)散，都遵循著物理規(guī)律，展現(xiàn)出流暢且和諧的運(yùn)動(dòng)軌跡。這些自然現(xiàn)象不僅帶來(lái)視覺(jué)上的愉悅，也蘊(yùn)含著深層次的運(yùn)動(dòng)邏輯，為數(shù)字動(dòng)效設(shè)計(jì)提供了源源不斷的靈感。動(dòng)效的流暢性、節(jié)奏感、反饋感，本質(zhì)上都是對(duì)物理世界美學(xué)的映射。
例如，波紋擴(kuò)散是我們常見(jiàn)的自然現(xiàn)象。當(dāng)一顆石子落入湖面，波紋自中心向外擴(kuò)散，起初迅速，隨后逐漸放緩，最終消失。這個(gè)過(guò)程中的漸進(jìn)減速特性為數(shù)字動(dòng)效設(shè)計(jì)提供了極佳的靈感。在數(shù)字界面中，我們可以通過(guò)緩慢擴(kuò)散的動(dòng)畫(huà)來(lái)模擬水面波紋的效果，形成一種溫和的反饋感。
再比如，現(xiàn)實(shí)世界中的物體在運(yùn)動(dòng)時(shí)通常會(huì)表現(xiàn)出加速與減速的特性。以地球上的自由落體為例，物體從高空下落時(shí)，初始速度較慢，但隨著重力作用，它不斷加速。這種非勻速運(yùn)動(dòng)，在動(dòng)效設(shè)計(jì)中被轉(zhuǎn)化為緩動(dòng)曲線（Easing Curves），使得用戶(hù)在界面交互時(shí)感受到更加自然的動(dòng)態(tài)變化。
而彈跳和反彈又是另一個(gè)物理世界中常見(jiàn)的運(yùn)動(dòng)方式。想象一顆籃球從地面反彈起來(lái)，起初速度快，隨后逐漸放緩，最終停止。這種逐漸衰減的回彈，正是彈性動(dòng)效的靈感來(lái)源。在界面交互中，彈性動(dòng)效可以模擬物體的重量和材質(zhì)，提升操作的真實(shí)感。
當(dāng)牛頓凝視落下的蘋(píng)果，他發(fā)現(xiàn)了萬(wàn)有引力的奧秘；而當(dāng)釘釘?shù)脑O(shè)計(jì)團(tuán)隊(duì)觀察一張任務(wù)卡片的拖拽軌跡時(shí)，我們探尋的是數(shù)字世界的運(yùn)動(dòng)法則。在物理規(guī)律與交互邏輯的交匯處，釘釘?shù)膭?dòng)效設(shè)計(jì)體系逐漸凝練出一套方法論——讓每個(gè)像素的運(yùn)動(dòng)既符合自然規(guī)律，又服務(wù)于生產(chǎn)效率。
在 B 端產(chǎn)品中，動(dòng)效遠(yuǎn)不止是視覺(jué)與交互的簡(jiǎn)單結(jié)合，更是提升可用性和降低認(rèn)知成本的關(guān)鍵手段。它不僅承擔(dān)著引導(dǎo)用戶(hù)操作、傳遞信息層級(jí)、降低認(rèn)知負(fù)荷的功能，還通過(guò)增強(qiáng)操作確定性，幫助用戶(hù)更高效地完成任務(wù)。換句話說(shuō)，我們正以理性與直覺(jué)，重塑效率美學(xué)。
釘釘?shù)脑O(shè)計(jì)框架始終圍繞視覺(jué)感官和用戶(hù)體驗(yàn)兩個(gè)核心維度展開(kāi)，追崇理性與感性的精密協(xié)作：
1. 視覺(jué)感官：流暢
2. 用戶(hù)體驗(yàn)：高效
企業(yè)級(jí)應(yīng)用中，物體的運(yùn)動(dòng)時(shí)間需要把控得恰到好處。研究表明，人類(lèi)對(duì) 100ms 以下的變化幾乎無(wú)感，而超過(guò) 1s 的等待則會(huì)讓用戶(hù)產(chǎn)生不耐煩的情緒。因此，釘釘?shù)膭?dòng)效體系嚴(yán)格遵循以下節(jié)奏，通過(guò)順應(yīng)人類(lèi)大腦的認(rèn)知規(guī)律，確保每一次動(dòng)效都恰到好處，帶來(lái)舒適的體驗(yàn)：
現(xiàn)實(shí)世界中的物體運(yùn)動(dòng)受到重力、摩擦力等因素影響，呈現(xiàn)加速與減速的動(dòng)態(tài)變化。釘釘?shù)膭?dòng)效體系也采用緩動(dòng)曲線（Easing），以模擬真實(shí)世界的運(yùn)動(dòng)節(jié)奏。當(dāng)數(shù)字界面掙脫線性勻速的機(jī)械感，便擁有了令人愉悅的「生命感」。
在二維屏幕上構(gòu)建三維認(rèn)知，需要更精密的「空間修辭學(xué)」。釘釘?shù)膭?dòng)效體系確保每一次位移都符合用戶(hù)的直覺(jué)，并運(yùn)用空間層次感，讓信息更易理解。
1. 同級(jí)物體
2. 從屬物體
3. 三維空間
在動(dòng)效設(shè)計(jì)中，無(wú)障礙性不僅關(guān)乎技術(shù)標(biāo)準(zhǔn)，更關(guān)乎用戶(hù)的體驗(yàn)公平性。一個(gè)包容的設(shè)計(jì)體系，應(yīng)該讓所有用戶(hù)——無(wú)論其身體或認(rèn)知能力如何——都能平等地理解和使用產(chǎn)品。無(wú)障礙動(dòng)效的核心，在于減少干擾、提供替代方案，并賦予用戶(hù)選擇權(quán)，確保每一次交互都是安全、友好的。
避免誘發(fā)健康問(wèn)題：高頻閃爍或快速變化的動(dòng)畫(huà)可能誘發(fā)光敏性癲癇等健康問(wèn)題。因此，在設(shè)計(jì)時(shí)，我們應(yīng)避免超過(guò)3次/秒的快速閃爍，并盡可能減少過(guò)度刺激性的動(dòng)效
提供替代方案：對(duì)于依賴(lài)屏幕閱讀器的用戶(hù)，純視覺(jué)動(dòng)效可能難以感知。我們可以為動(dòng)效添加文本描述或提供靜態(tài)替代方案，確保所有用戶(hù)都能理解動(dòng)效傳達(dá)的信息。例如，在釘釘 AI 助理中的加載場(chǎng)景，我們提供「正在為你生成…」的文本標(biāo)簽，方便屏幕閱讀器用戶(hù)理解當(dāng)前狀態(tài)
動(dòng)效設(shè)計(jì)已成為現(xiàn)代數(shù)字產(chǎn)品中不可或缺的組成部分。從簡(jiǎn)單的過(guò)渡動(dòng)畫(huà)到如今富有交互感和情感觸動(dòng)的設(shè)計(jì)，動(dòng)效已經(jīng)不再是單純的視覺(jué)裝飾，而是推動(dòng)產(chǎn)品發(fā)展、提升用戶(hù)體驗(yàn)的關(guān)鍵力量。
真正的好動(dòng)效，是那種用戶(hù)幾乎察覺(jué)不到的流暢交互，它能夠讓信息傳遞變得高效、讓操作更加順暢，同時(shí)也讓數(shù)字產(chǎn)品展現(xiàn)出溫暖的人文氣息。動(dòng)效，作為產(chǎn)品與用戶(hù)之間的一座橋梁，它不僅是界面的點(diǎn)綴，更是效率與體驗(yàn)的催化劑。
未來(lái)，釘釘將繼續(xù)探索動(dòng)效設(shè)計(jì)的創(chuàng)新與實(shí)踐，通過(guò)優(yōu)化交互體驗(yàn)、提升產(chǎn)品效率，不斷賦能用戶(hù)、創(chuàng)造更美好的數(shù)字世界。
蘭亭妙微(www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn
