午夜勾魂曲-午夜福利自怕-午夜福利在线观看6080-午夜福利院电影-国产精品毛片AV久久97-国产精品麻豆高潮刺激A片

在B端產品設計的世界里，色彩不僅僅是視覺元素，它還承載著信息傳遞、用戶體驗和品牌識別的重要角色。本文深入探討了色彩空間理論在B端設計中的應用，從基礎的色彩空間概念到如何在實際工作中運用這些理論，為設計師提供了一套科學的顏色搭配和管理方法。

對于 B 端產品而言，我們經常會和顏色進行斗爭。

比如在工作當中，開發沒有正確還原顏色、不知道如何進行色彩配置、以及對于 B 端產品而言，究竟應該如何協調科學的進行顏色的搭配～

最近會講顏色的部分，整體會分為四篇文章：B 端設計如何理解色彩空間、B 端產品怎樣合理搭配顏色、B 端項目的視覺風格、B 端項目顏色的實戰技巧。

本篇文章是第一篇，我們先來聊聊產品配色的基礎 色彩空間與顏色管理。

不知道各位同學是否遇到這種情況，當你在調整顏色時，就是在漫無目的的在拾色器上來回游走，在被問到為什么要選擇這個顏色時，也茫然無措，這時候的你作何感想？

所以顏色還原需要熟練的掌握色彩空間，并配合屏幕進行顏色管理，才能夠讓設計順利落地。但顏色其實過于抽象，因此我們將整體內容進行簡化，多和大家聊聊在理論背后究竟應該如何與工作內容進行結合。

B端究竟需要什么樣的產品經理？

B端產品經理都是以提升供應側的工作效率為目的，所以B端需求主要是以業務問題為導向。 這個是B端產品比較重要的一點，B端產品是服務于一個主體 ...

查看詳情 >

首先我們先說說色彩空間。

一、什么是色彩空間？

色彩空間又叫色彩模型，它是為了讓系統能夠準確地描述顏色、使用顏色，進而定義出來的一種顏色組織方式。

比如有一排隨機顏色，要按特定規則排列，你會怎么做？我相信，我們首先想到的便是按照不同的色相進行歸類。

如果顏色變為10000個，又該怎么排列呢？因此，為了讓企業更好地使用顏色、設計師更便利地選擇一致的顏色，行業中便提出了色彩空間的概念。

色彩空間其實很簡單。因為我們需要使用顏色，且不同人群對顏色的需求不同，所以顏色的排列方式會存在差異。

比如，行業中較為出名的潘通色彩體系，其實是基于印刷行業制定的一種特殊色彩空間；CMYK是為印刷從業者提供的、便于他們更好地進行物料印刷的色彩空間；Lab是一種更強調色彩亮度的色彩空間。

因此，行業會根據顏色的不同規律和自身使用需求，總結整理出不同的色彩空間。

我們目前在工作當中，主要都是聚焦于屏幕當中，因此影響顏色呈現的也就變為：

• 設計軟件當中的色彩空間：以 RGB、HSB、HCT 為主，主要是計算機識別顏色顏色，調整顏色的重要方式，在電腦軟件當中起到重要作用。
• 屏幕顯示當中的色彩空間：以 Adobe RGB、Display P3、sRGB 為主，主要是能準確展示屏幕當中的各種顏色。

在我們細致講解色彩空間的部分時，我們先來了解三個重要的概念。

1. 亮度：是光作用于人眼所引起的明亮程度的感覺，它與被觀察物體的發光強度有關，主要表現光的強與弱。
2. 色相：是當人眼看一種或多種波長的光時所產生的色彩感覺，它反映顏色的種類，是決定顏色的基本特征。
3. 飽和度：是指顏色的純度，即該摻入白光的程度，表示顏色深淺的程度。例如：藍色 + 白色 = 天藍色，也就是飽和度下降

二、色彩空間的類型

1. RGB  色彩空間

RGB是顯示器當中的顏色基礎。

比如在現實世界當中，我們將手機屏幕進行放大，你會發現屏幕都是由紅綠藍三個燈管所組成的。

而 RGB 的色彩模式就是模擬現實世界當中的屏幕顯示原理，將燈光照射的邏輯在設計軟件當中進行復現，因此在 RGB 的調色盤中，就會分別包含三個輸入框，這便是 紅綠藍。

其中，數字 0 代表不發光、255 則是最亮的燈光。

那為什么最亮是 255，不是 250？或者是 280 呢？

原因在于RGB 所有的顏色，最后都需要通過計算機進行運算顯示，對于它說并不認識 紅色、藍色，在它的腦袋里（不對，CPU 里面）就只有 0 與 1，因此在計算機存儲的時候，一個字節也就是 8 個比特、也就是 2 的八次方、也就是 256，這樣 一個色彩信息等于一個字節，數據存儲就會更加高效。

所以我們所聊的顏色更多指的是代碼層面的顏色設定。

接著我們打開 Figma，看到另一種格式 Hex，那我們稱之為是 RGB 模式的精簡版。

因為它嫌棄每個輸入框都會出現 255（255,255,255 白色）實在太長，不利于我們在日常工作當中進行記錄。

因此將每個顏色，三位數值縮減為兩位數值（十進制變為十六進制），就是增加英文字符的數據，就能較短的表達顏色，使得顏色表達更為高效。

因為 Hex 只是 RGB 的精簡版本，所以 Hex 里面，每兩個字符所對應的就是 紅、綠、藍。

比如我們剛才提到的這個藍色，在 RGB 空間當中為(0,86,255) ，Hex 則是#0056FF，也是一一對應關系。

RGB 聽上去似乎很美好，但問題在于兩點：

1.顏色的調整不夠直觀：作為設計師，我們很難模擬燈光的照射思維對顏色進行調整，具體應該增加多少顏色，其實是不夠清楚的。我們更熟悉的其實是：亮度、色相、飽和度，因此在調色時會十分困難。

比如我目前是紅色，那我要調整到紫色，應該輸入多少值呢？其實我們很難進行一個準確的判斷。

2.顏色信息與亮度信息的數據混合：導致我們很難對于有一個準確的判斷，比如在 RGB 相同的數值當中，明顯會感受到 黃綠色 與其他顏色的亮度存在較大差異，這樣在調色時，顏色一致性偏差較大。

為了解決這些問題，就提出一種新的色彩模型：HSB

2. HSB 色彩空間

HSB （也叫 HSV）就是通過顏色的  色相、飽和度、亮度 來進行表示。

在色相當中，由于顏色的呈現是色環的方式，因此在數值上是以 0-360 度來進行表示的，在設計軟件里面，我們也只能輸入所對應的數值。

同時飽和度與亮度都是以百分比的形式進行呈現，飽和度越低，相對應就會給顏色增加白色，使其更灰；亮度越低，就會增加對應的黑色，讓其更深。

由于 HSB 的色彩空間的分類模式非常有利于我們進行顏色的調整，因此我們在日常調色時其實會經常用到。

比如日常工作當中，假設我們需要設計一組圖標，根據 HSB 顏色的基本原理，我們其實只需要調整不同的色相，就能夠得到不同的圖標顏色。

但… 顏色上依舊會存在問題。

你會發現當我們調整了色相過后，整體的顏色并沒有形成統一。原因在于我們人眼對于 黃綠色的感知 會和紅色、藍色有所不同，我們通常在看黃綠色時會更為刺眼，因此在設計層面上需要單獨調整。

所以在 HSB 當中的顏色邏輯上，也并沒有解決顏色一致性的問題。于是在 2021 年 Google 提出一種全新的色彩模式，HCT。

3. HCT 色彩空間

HCT 首先會將顏色當中的 感知度、亮度 進行結合，對之前的 HSB 重新調整。

在顏色層面上主要分為：Hue：色相、Chroma：色度、Tone：色調

色相與色度和之前基本類似，但色調上優化了黃綠色凸顯問題，讓人眼的感知度也加入到了色彩空間當中，使其顏色更為準確。

同時色彩空間的呈現，優化了顏色漸變的流暢性，我們會發現整體的漸變感覺會更為自然。

那為什么 Google 想要做 HCT？

其實因為 Material Design 當中會強調設計的一致性和靈活性，在功能設計上，需要增加一個根據屏幕當中的圖標生成與其風格一致的壁紙。

但在之前無論什么樣的色彩空間都不能準確的還原顏色。現在就提供了一個可靠的色彩基礎，能夠讓我們在不同的設備、平臺和應用場景下，都能夠生成具有一致性的色彩方案，同時也能更好地適應各種主題和風格的變化，如亮色模式和暗色模式的切換。

比如，還是以上面這個案例，我們使用 HSB 與 HCT 對顏色進行的色相的調整，那得到的結果明顯會發現 HCT 會更加準確。

那 HCT 就真那么完美無瑕？

其實也不然，因為 HCT 色彩空間出現時間較晚，所以在使用上也會有很多問題。

• 設備兼容性差：很多設計軟件目前對 HCT 基礎沒有適配，所以即使使用，很多老舊設備也并不能支持。
• 計算復雜度高：HCT 的色彩空間涉及到更為復雜的計算算法，因此它對于系統的資源要求更高。
• 認知成本較大：對于新的事物，往往在行業中的普及會相對較慢，因此還需要長時間的普及才行。

三、色彩空間如何應用？

這么深奧的色彩空間，到底要如何使用？

1. 以 HSB 的為主

因為 HSB 是設計師最容易理解的色彩空間，因此我們在調色時需要根據數值來進行顏色的調教。

比如說你的顏色很臟，不夠干凈。其實就是在強調 HSB 當中使用了更多的黑色，我們便可以調整到這個色彩空間當中，去增加 B 的值（也就是第三個輸入框）

比如說你的字體很灰，不夠明確。

其實就是在說 你的亮度太高，需要減少亮度，也就是 H 的值（也就是第一個輸入框）

2. 色彩更具數據化

因為每一個屏幕所顯示的顏色其實都不太相同，因此色彩調整時要多看數據，觀察數據之間的對比變化。

比如以 B 端產品的中性色為例，現在系統當中所使用的正文顏色為 #333333，看到過后就明確知道顏色深度不夠、顏色也不透氣。

我們就會按照，先確定顏色色相，為灰色偏藍色，因此在色相當中需要拖動色環找到合適的色相；

緊接著確定飽和度，因為要偏藍色，但不宜過多，因此整體的數值只會在 1-5 之前浮動；

最后確定深度，之前顏色過于淺，需要加深，所以直接減少，變為 22 左右的數值。

3. HCT 輔助顏色判斷

其次在判斷顏色時，也會更具章法。

在多輔助色的情況下，我們可以使用 HCT 對顏色進行判斷。

對于日常工作來說，我們可以使用 Figma 當中的 color Space 插件 進行日常的色彩管理。在今后遇到類似同類型圖標時，我們可以使用 HCT 的方式快速生成發散色板，幫助我們進行色彩搭配。

4. 引入 HCT 完善工作流

最后在 B 端系統當中，會存在較多顏色搭配的場景。

像是圖表設計、自定義系統主題，原來只能通過系統預設固定顏色的方式進行解決，而現在 Google 也將這套計算公式開源，也就是說程序員可以直接引用 HCT 的色彩空間，將顏色配置的權限給到用戶，通過顏色的調整，呈現用戶想要的顏色內容。

四、屏幕顯示的色彩空間

對于屏幕顯示的色彩空間而言，有部分內容我們也是要重點關注。比如在 B 端設計當中，色彩還原老是出問題，那我們就可以通過屏幕的色彩空間進行判斷。

1. sRGB 色彩空間

sRGB（standard Red Green Blue）是由惠普公司和微軟公司共同開發的一種標準色彩空間，目的是提供一種通用的色彩標準，使得在不同的設備（如顯示器、打印機等）之間能夠實現相對一致的色彩顯示。

對于 sRGB 來說，它是我們作為設計師最為重要的屏幕顯示色彩空間，因為它通用性強，所以大多數普通的電腦顯示器、網頁瀏覽器等都默認采用 sRGB 色彩空間，這樣在瀏覽網頁、查看普通的數碼照片時，可以獲得比較穩定的色彩效果。

所以我們在做設計時，通常都會將屏幕與軟件，都調整的 sRGB 的空間當中，這樣就能夠最大限度保證色彩的一致。

2. Display P3 色彩空間

Display P3 是基于 DCI – P3 色彩空間衍生而來的，主要用于消費級顯示器設備。它在 DCI – P3 的基礎上進行了一些調整，以適應顯示器的特性。

整體而言 P3 色彩空間顯示出來的顏色會更加 生動、艷麗，但是這會和你的設備密切相關。目前行業中只在蘋果設備以及部分高端顯示器才會使用，所以我們在設計時需要考慮自己產品的受眾，這一設備是否普遍使用。

最后，我們總結一下：

1. 色彩空間就是我們使用顏色的一種方式
2. 在調色時，我們會優先使用 HSB 的色彩空間
3. HCT 是 Google 推出，主要目的是 色彩視覺的統一，在我們生成輔助色的時候有用
4. 屏幕當中我們的所有顯示配置盡量調整為 sRGB，這樣更符合大多數用戶的顯示情況

在視覺設計的世界里，色彩不僅僅是一種裝飾，它是傳達情感、影響情緒和吸引用戶的關鍵。本文深入探討了色彩在界面設計中的重要性，揭示了如何通過色彩的定義、屬性、模型以及在不同場景下的應用來增強設計的吸引力。

色彩在我們日常設計中起著定生死的作用，它是設計的靈魂，舒適的色彩搭配可以讓設計師一遍定稿，感覺在自己的設計生涯中，大部分都是在與色彩的博弈中度過的，雖然客戶可能不懂色彩原理，可是客戶天生都是色彩的感受家，什么樣的色彩搭配美，通常他們瞄一眼就會有定論，不用你去辯解太多，不好的搭配，縱使有千萬種理由，也說服不了客戶，所以好好研究色彩以及每一種色彩傳遞的情感對我們做好設計至關重要。

目錄

一、 色彩的定義

二、 色彩的三屬性

三、 色彩的三種常見模型

四、 色彩的語意及它的應用

五、 不同場景下的色彩應用

六、 色彩在B端設計中的作用

七、 B端色彩設計使用的原則

一、色彩的定義？

1、物理學角度

色彩是光的屬性，當光波通過物體時，物體會吸收某些波長的光，而反射或透射其他波長的光，這些被反射或透射的光波長度決定了我們看到的顏色。

2、心理學角度

色彩是人腦對光波長的視覺感知，不同的波長刺激視網膜上不同類型的感光細胞，進而產生不同的色彩感覺。

什么是B端產品經理？和C端產品經理有什么區別？

B端產品經理中的B是Business，商業的意思，B端產品經理首先就要理解這個職位的重要性，要設計出更適合這個項目需求的產品方案，B最終產品經理在日常工作中...

查看詳情 >

3、 藝術學角度

色彩是藝術創作的重要元素，它不僅關乎視覺感受，還與情感、文化、象征意義相關聯。

4、 設計學角度

在設計領域，色彩是傳達信息、影響情緒和創造美感的關鍵工具。

5、 計算機科學角度

在數字圖像處理中，色彩通常通過顏色模型（如RGB、CMYK等）來定義，這些模型通過不同比例的原色或色料混合來表示各種顏色。

二、色彩的三屬性

1、色相

色相是指不同顏色之間的差別，即不同顏色的表象和名稱，每個顏色都有自己的專屬ID,如紅、橙、黃、綠、青、藍、紫等。不同的色別都可用光譜中的波長來表示，人的眼睛可分辨出的色別有180種左右。

2、明度

明度是指色彩的明暗程度。一般在反光率相同的情況下，不同色別的明暗程度不同。如黃色光比紅色光更明亮，而紅色光則比青色光要明亮。

同時，同一色相在受光強弱或者物體對光的吸收、反射性能不同的情況下，會呈現不同的明暗變化和差異。

3、飽和度（純度）

飽和度（純度）是指同一色別的純凈度和鮮明度的變化。從色光的角度而言，光的波長單一程度越高，飽和度就會越高；不同色別所達到的飽和度不同，一般情況下，紅色的純度可達到最高，綠色的則相對較低；同一色相深淺不同的顏色有不同的飽和度；黑白色光的滲入會導致飽和度和明度發生變化；通常，照明光線的性質、物體表面結構對光線吸收與反射的性能等因素影響飽和度。

三、色彩三種常見模型

1、HSB模型

HSB模型也叫HSV模型，其中H代表色相，即顏色的種類；S代表飽和度，即顏色的純度；B(V)代表亮度，即顏色的明亮程度。

這種色彩模型是我日常在的設計工作中用的最多的一種色彩模型，如果在同色系中如果只想讓他們有細微的變化，我通常會通過調節S和B的百分比數值來達到自己想要的目的。

以上就是我在設計項目中，運用該色彩模型做的一個實戰，項目中用到了一個圖形，需要用同色系來表達，我保持了H色值的不變，讓S值和B值都發生著微妙的不同，于是就產生了四五種同色系的綠色，該色彩模型特別的好使，也鼓勵大家多在實戰中運用這樣的色彩模型，簡單實用。

• H色相: Hue，以角度(0°-360°)表示
• S飽和度: Saturation，以百分比值(0%-100%)表示
• B/V 亮度: Brightness 或 Value，以百分比值(0%-100%)表示

2、RGB模型

RGB是從顏色發光的原理來設計定的，通俗點說它的顏色混合方式就好像有紅、綠、藍三盞燈，當它們的光相互疊合的時候，色彩相混，而亮度卻等于三者亮度之總和，越混合亮度越高，即加法混合。

紅、綠、藍三個顏色通道每種色各分為256階亮度，在0時“燈”最弱——是關掉的，而在255時“燈”最亮。當三色灰度數值相同時，產生不同灰度值的灰色調，即三色灰度都為0時，是最暗的黑色調；三色灰度都為255時，是最亮的白色調。

• R紅：Red，以數值(0-255)表示
• G綠：Green，以數值(0-255)表示
• B藍：Blue，以數值(0-255)表示

3、CMYK模型

雖然RGB模型色彩更加的豐富，但是很多顏色不能完全打印出來，于是CMYK模型就成了打印、印刷的不二選擇。C是青、M是品紅、Y是黃、K是黑，通過顏料反射和吸收光線來顯色。

記得之前自己從事平面工作的時候，就經常要用到CMYK模式，因為印出來的效果偏差是最小的，是最靠近設計效果圖的。

通過對比，我們發現RGB色彩模型顏色顯示上確實更加的絢麗豐富些，而CMYK的色彩模型顏色顯示上就黯淡了不少，但是要印刷的話，就必須轉化為成CMYK的色彩模式。

• R青：Cyan，以百分比值(0%-100%)表示
• M品紅：Magenta，以百分比值(0%-100%)表示
• Y黃：Yellow，以百分比值(0%-100%)表示
• B黑：Black，以百分比值(0%-100%)表示

四、色彩的語意及應用

1、紅色的語意及應用

紅色代表熱情、活力、強烈的情感和愛。它可以象征著激情、勇氣和行動力，也常與興奮、熱烈的情緒相關。

著名的快餐品牌肯德基，在自己的網頁及店鋪裝修中都運用了紅色，因為紅色是所有顏色中最容易引起人們注意的顏色，也是很容易刺激人們食欲和購買的顏色。

2、橙色的語意及應用

橙色傳達溫暖、歡快和積極向上的情感；它常與樂觀、友好、創造力聯系在一起，給人以活力充沛和充滿希望的感覺。

百度網盤的這個登錄界面就運用了橙色，給人陽光、向上、熱情的感覺，通過色彩的運用一下讓界面有了溫度。

3、黃色的語意及應用

黃色象征快樂、開朗和樂觀；它能帶來明亮、愉悅的情緒，代表著陽光、溫暖和智慧。

叫叫閱讀是一款非常著名的兒童閱讀軟件，整個色調采用的是非常有活力的黃色，這與兒童處于好奇與活力的階段相符合，這種高亮的黃色，飽和度和明度都非常的高，特別容易抓住兒童的目光，同時它是一種快樂的顏色，也是一種能激發孩子創造力和想象力的顏色，特別符合兒童成長的需求。

4、綠色的語意及應用

綠色代表平靜、和諧與生機。綠色常與大自然相關，給人帶來安寧、放松的感覺，也象征著成長、希望和新生。

青椒云的目標用戶是吸引年輕用戶和創意工作者，綠色這種富有活力和創意的顏色更容易吸引他們的關注，同時綠色也代表著健康、可持續發展的企業形象。

5、青色的語意及應用

青色寓意清新、寧靜和沉穩，它給人一種冷靜、理智的印象，同時也帶有一絲清新的活力。

青色是一種帶有藍色和綠色的顏色，因此青色既有藍色的專業感、信任感，也有綠色的生機感、希望感。

以下是日本某牙醫品牌的官網首頁，病人希望在這里帶來健康與復蘇，也希望獲得專業、可靠的治療，而青色就成了很好傳遞這種情感的品牌色。

6、藍色的語意及應用

藍色代表冷靜、忠誠和信任；它常與沉穩、深邃的情感相關，能帶來寧靜、平和的心境，也象征著智慧和理性。

123云盤使用了藍色，藍色符合社會的普遍審美認知，接受度比較高；其次，藍色給人安全的感覺，也符合云盤的初衷，給用戶安全的存儲服務。

7、紫色的語意及應用

紫色象征神秘、高貴和浪漫；它常給人一種優雅、奢華的感覺，同時也帶有神秘莫測的氛圍，與夢幻、創造力等情感相關。

美柚的主要用戶是女性，紫色在色彩心理學中常被認為具有優雅、神秘、浪漫的特質，這些特質與女性的審美和情感需求相契合，能夠吸引女性的關注。

8、白色的語意及應用

白色代表著純潔、神圣、信任、安靜、樸素和雅致，是一種充滿純潔的顏色，它可以跟任何顏色和諧的共生。

以下是熊掌ID的登錄界面，顏色用了大量的白與灰，簡潔又不失大氣，傳遞出了一種質樸、雅致的感覺。

五、不同場景下的色彩應用

1、商場色彩多彩的原因？

? 吸引顧客注意力

在眾多商業場所中脫穎而出，色彩鮮艷的商場外觀和內部裝飾更容易在人們的視線中凸顯出來，吸引過往行人的目光，激發他們的好奇心和探索欲。

確實多彩的顏色更加容易引起我的關注，這不看到商場的美圖，都忍不住拍照留念了，成功的吸引了我的目光。

? 增強可見性

即使在較遠的距離或在繁忙的街道上，多彩熱烈的配色也能讓商場更容易被發現，提高商場的知名度和曝光度。

多彩的配色，讓我很遠就被商場美輪美奐的插畫吸引，大大增加了商場的可見性。

? 營造愉悅氛圍

色彩可以激發積極情緒，明亮、鮮艷的色彩往往與快樂、活力和興奮等積極情緒相關聯。當顧客進入一個色彩豐富的商場時，會感受到一種愉悅和輕松的氛圍，從而更愿意在商場中停留和購物。

星沙永旺城的美陳設計很好，墻面采用極具誘惑力的顏色與美食，把小小實物十倍放大，增加了視覺看點，讓人忍不住過去拍照曬一下，大大增加了愉悅性。

? 緩解壓力

在現代生活中，人們常常面臨各種壓力。走進一個多彩熱烈的商場，可以暫時擺脫日常的煩惱和壓力，享受購物的樂趣。

特別可愛夸張的插圖設計，引發了絲絲童趣和歡樂，讓人短暫忘記壓力，遠離煩惱。

? 引導消費行為

商場通常會使用不同的顏色來區分不同的區域，如購物區、餐飲區、娛樂區等。這樣可以幫助顧客更快速地找到自己感興趣的區域，提高購物效率。

突出重點商品，對于一些重點推薦的商品或促銷活動，商場可以使用鮮艷的色彩來突出展示，吸引顧客的注意力，引導他們進行購買。

? 塑造品牌形象

6.1 傳達個性和風格

不同的商場可能有不同的品牌定位和目標客戶群體。通過選擇特定的色彩組合，商場可以傳達出自己的個性和風格，吸引與之相符的顧客。

6.2 增強品牌記憶度

獨特而鮮明的色彩搭配可以讓商場在顧客的心中留下深刻的印象，提高品牌的記憶度和辨識度。

芙蓉區的龍湖天街主要面向中等收入新興家庭，是一個區域型的購物中心，集購物、餐飲、休閑、娛樂等多業態于一體，為消費者提供一站式商業綜合體，它在餐飲區采用了大量的吃喝玩樂的插畫來引導用戶消費。

2、為什么藍色在B端設計中廣泛應用？

? 視覺特性方面

1.1 穩定性

藍色給人一種沉穩、可靠的感覺。在B端產品中，用戶往往需要處理重要的業務數據和進行復雜的操作，藍色的穩定性可以讓用戶感到安心，增強對產品的信任感。

1.2 專業性

藍色通常與科技、專業領域相關聯。B端產品通常面向企業用戶，需要傳達出專業、高效的形象，藍色正好符合這一需求。

? 心理影響方面

2.1 減少焦慮

相比鮮艷、刺激的顏色，藍色較為柔和，不容易引起用戶焦慮和緊張的情緒；在B端使用場景中，用戶可能需要長時間使用產品，藍色的舒緩效果有助于提高用戶的使用體驗。

2.2 提高專注度

藍色具有一定的沉靜作用，能夠幫助用戶集中注意力，專注于工作任務。對于B端用戶來說，高效完成工作是首要目標，藍色的這一特性有助于提高工作效率。

B端產品在心理上追求的是類似如下圖的這種寧靜式的體驗，跟教育有著異曲同工之處，就像這個易貝樂少兒英語一樣，用大面積的藍色，希望孩子在這里能很快的安靜下來學習、專注自己的事情。

? 行業習慣方面

3.1 科技行業引領

許多知名的科技企業和軟件產品在 B 端市場中廣泛使用藍色，逐漸形成了一種行業習慣。其他企業在設計B端產品時，也會傾向于選擇藍色以符合用戶的認知和期望。

3.2 傳統與延續

在過去的設計中，藍色在 B 端領域的成功應用使得它成為了一種傳統選擇。設計師們在延續這一傳統的同時，也不斷優化和創新藍色的運用方式，使其更符合現代設計趨勢和用戶需求。

嘉為科技是一個有著20多年技術沉淀的科技公司，它的官網和產品風格一直是沿用著科技藍的風格，應該也是基于傳統的沉淀吧。

?藍色可以提高產品的復用率

很多用戶都能接受藍色的B端界面，當面對有差不多需求客戶時，同一套UI，可以多次復用，可以減少開發成本和設計成本，這也是自己通過長期實戰觀察發現的。

一個UI風格，用在了兩個項目中，不同的用戶，趨向同樣的風格，說明藍色在大家心目中的接受度是非常的高，用藍色可以促進設計的多次復用。

在日常的項目中，我看到的B端UI界面是千篇一律的穩重，不追求過于刺激的顏色搭配，通常都比較的干凈簡潔，不像商場里面的美陳背景設計，色彩對比非常的強烈，比較的吸引人眼球。

有一次我厭煩了常規的穩重風，探索一種大膽的色彩風格時，雖然風格比較新穎，可是發出去客戶的接受度不高，覺得太不穩重了，然后重新按照以往習慣進行設計時，就很好，客戶一致認同。

可見每個領域都有自己的色彩運用習慣，商場需要吸引人眼球、刺激消費，越大膽越好，可是B端設計需要提供一個讓人平靜去處理工作事項的環境，它需要安靜，不需要過于刺激的顏色搭配。

六、色彩在B端設計中的作用？

1、通過色彩向用戶反饋操作結果及當前狀況

比方在日常設計當中，紅色代表流程失敗，綠色代表流程成功，橙色代表信息有告警，藍色代表著鏈接，同時不同的按鈕顏色也可以很好的區分按鈕狀態，在反饋結果和狀況方面，色彩起著非常重要的作用。

下面這個IDC運營的監測平臺，它就是通過顏色來區分不同的告警級別的，可見顏色在B端產品中的重要性。（備注：圖中數據都不是真實數據，僅做展示）

2、可以助力品牌傳達

B端設計中大面積使用品牌色，可以強化品牌形象，使用與品牌標志風格相近的色彩，可以幫助用戶快速識別和記住品牌，在不同的B端產品界面中使用統一的色彩方案，有助于建立品牌的連貫性和一致性，增強用戶對品牌的信任。

例如我給湖南高速設計的一套B端界面設計，用戶強烈要求改變傳統的藍色風格，要求整套界面設計要用湖南高速品牌色-綠色，說明在追求大流和品牌色之間，客戶更加傾向品牌的傳達。（備注：圖中數據都不是真實數據，僅做展示）

3、顏色可以很好的進行信息區分

在B端界面設計中，顏色在幫助信息區分起著非常重要的作用，通?？梢酝ㄟ^不同的色彩來區分功能區域，可以讓用戶更清晰地了解界面的結構和布局，例如，導航欄使用一種特定的顏色，而內容區域則使用另一種顏色。

我設計的天翼寫作，就是這樣的設計思路，導航欄和內容區的顏色完全不一樣，這里顏色起到了很好的區分作用。

4、舒適的色彩搭配可以提升用戶體驗

選擇合適的色彩對比度可以增強文本的可讀性，減少用戶的視覺疲勞。例如，黑色文字在白色背景上通常比較容易閱讀。

選擇適當的色彩可以營造出專業、高效、舒適的工作氛圍，從而影響用戶的情緒和感受，提高用戶的使用體驗。

我參與的這個后臺界面，就是通過合理的色彩搭配來引導用戶使用的，當用戶已經完成的環節都是用綠色表示，沒有走完的流程就會是灰色的，寓意指示非常的鮮明，很好的解決了用戶不知道清晰進程的卡點，提升了用戶體驗。

5、色彩可以傳遞性格

人的性格有活潑的、文靜的、沉穩的、深邃的，其實色彩也是有性格的，不同的色彩也有不同的性格，當我們對色彩的性格有足夠多的了解，在面對不同的客戶時，我們對色彩的拿捏以及設計需求的把握時，會更加的游刃有余。

我們平常確實是在做設計，但是我們更多的是在與人打交道，我們更好的聆聽，會幫助我們更快的抓取到客戶的喜好，快速做出滿足客戶需求的設計，少受加班之苦。

比方說我之前給云門戶設計的一套UI，客戶的決策層是男性，且年齡偏大，他們就偏愛深沉的UI風格；而我負責的天翼云電腦專家，客戶的決策層是女性，且年齡偏年輕，她每次就喜歡輕盈、明快的UI色調,不同的決策層客戶，就會帶來不同的設計結果。

七、B端色彩設計使用的原則

1、B端設計中，色彩設計應遵循6：3：1原則

在這個登錄頁面中，我就是運用的6：3：1原則，60%的主色，30%的次要色，10%的點綴色；使用了大面積的藍色和藍灰色，最后使用一點點的橙色，這樣的配色會顯得高級。

2、文字、卡片背景色和邊框都使用無彩色

為了保證畫面風格的統一、干凈整潔，文字顏色、邊框顏色、以及邊框背景色都需要用到無彩色，通常通過顏色的深淺來區分信息的層級關系。

比方說我參與的星辰大模型AI文檔生成能力的應用，里面無論文字顏色還是底色都是運用的無彩色，只是通過了色彩深淺變化來做了層級區分，因為無彩色可以起到很好的降噪作用，既傳達了信息，又不會顯得界面凌亂復雜。

3、需要凸顯的內容，用明度和純度比較高的色彩

比方說，日常我們設計的卡片都是用的白色，而底色我們用的是灰色，因為卡片里面的內容都是比較重要的信息，需要用一個亮度比較高的顏色，讓內容往前走，而灰色的背景通常就往后走的感覺，這樣能跟卡片形成一個一前一后的對比，更好的幫助內容進行傳播。

比方說我設計的這個IT運維監控平臺的首頁，物理主機、網絡及安全設備、工單、在途工單這幾個指標是非常關鍵的，所以他們的圖片底色用了純度比較高的有彩色來標識。

4、設計前一定要有定色調的意識

作為設計師，我們的設計工作其實就是在設計一種感覺，一種情緒，設計前定調的意識真的太重要了，感覺對了，什么都就對了。

比方說我前段時間接到了一個B端的大屏可視化需求設計，客戶說之前的大屏設計不喜歡，希望重新出一個新的設計，然后公司的需求對接人員在給我下達需求時，真的就只是給我下達了這幾個字，讓我重新出一個設計試試。

以我的職業直覺，感覺這個需求是不夠細化的，于是我就多問了幾句，我問客戶是想要常規的藍色調的還是別的？果然一問，客戶說不希望再用常規的藍色的，希望新的設計要用他們的品牌色綠色，剛聽到這幾個字的時候，我以為這次我把握住需求了，在收集參考圖的時候，我發現常見的綠色大屏有深色的和淺色的，根據自己以往的作圖習慣，我覺得深色會更加的受歡迎一些，我自以為是的朝著深色的方向去出圖，出到了一半的時候，我內心有些許的忐忑，我于是找了一深一淺的參考圖，讓同事跟客戶確認一下，客戶是想要深色的感覺，還是要淺色的感覺，這次溝通又給了我深深的一擊，客戶不按常理出牌，說希望按淺色的風格來出圖。

在出稿之前，通過自己反復的溝通確認，發現設計前的定調意識真的太重要了，要不是有出圖前一波三折的反復確認以及需求的細化，就不會有后來的一遍過稿。

5.設計的灰色盡量使用帶有色彩偏向的灰

不管我們設計什么色系的界面，都避不開用到灰色，在設計中用跟主視覺相符的灰，會使得界面更加的高級、協調與美觀，注意好了這個小細節，會給我們的設計加分不少。

下面是我日常體驗到的兩個界面，上面綜合管理平臺里面的灰色就沒有跟主色調藍色相呼應，灰色沒有向藍色傾斜，界面看起來就沒那么美觀；下面通義千問的灰色設計就非常的注重細節，灰色偏紫，整個界面看起來渾然天成，毫無違和，美感、檔次瞬間提升好幾個等級。

一個微小細節的在意，在無形中拉高了設計的高度，十個細節乃至更多細節的在意，就會帶來更多意想不到的結果。

總結：

以上就是我最近對色彩的一些頓悟、感受和學習收獲，在不斷的復盤總結中，我們總會收獲一些新的認知，通過這次色彩的復盤之旅，發現色彩對設計師真的太重要了，希望我的分享對大家有啟發，不足之處也歡迎大家留言交流。

“B 端頁面加載，關乎用戶體驗。” 在 B 端產品設計中，頁面加載功能不容小覷。如何讓用戶在等待中減少焦慮？怎樣使頁面加載邏輯清晰、策略得當？本文將詳細闡述，為 B 端產品設計提供指引。

每一個用戶都不喜歡進入頁面時需要長時間的等待，并且對著一個空白的頁面。

因此在 iOS當中會使用大量的動效、情感化設計來引導用戶多停留一些時間等待加載；在較多 app 當中，也會通過動效設計，優化頁面信息的加載。

那既然頁面加載很重要，對于B端產品而言，我們也需要去考慮頁面的功能究竟要如何進行設計。

今天我們會聊聊 頁面加載 功能的具體邏輯，以及B端產品的常見頁面加載策略，希望能夠對各位同學有所幫助～

一、頁面加載的邏輯

在系統當中，頁面加載其實是用戶對系統界面進行交互后，系統會將對應的數據傳給服務器，而服務器又會將內容反饋給用戶的整個過程。

比如在按鈕組件中，我們就需要去設定「當用戶點擊了按鈕過后它需要長時間加載的 Loading 狀態」

通過這樣的做法，其實就是緩解用戶等待所花費的時間，減少焦慮。

在很多C端產品中，頁面加載是非常常見的。比如會有懶加載、預加載、異步加載等。

什么是B端產品經理？和C端產品經理有什么區別？

B端產品經理中的B是Business，商業的意思，B端產品經理首先就要理解這個職位的重要性，要設計出更適合這個項目需求的產品方案，B最終產品經理在日常工作中...

查看詳情 >

同時會使用非常多的 插畫設計、動效設計 去降低用戶所使用的焦慮。但是在桌面端中，它的思考方式會有些許不同，我們將其分為四種不同的方式。

二、骨架圖/skeleton

骨架屏是較為常規的頁面模塊加載方式。

它主要適用于模塊當中，加載內容需要提供占位信息時進行使用。通常會在 列表、卡片類 圖文信息較多的頁面當中進行呈現 。

在用戶預期上，骨架圖能夠幫助我們展示當中頁面的大體結構，以避免在頁面加載信息的過程當中出現隨意跳動、亂展示的情況。

特別是在很多頁面第一次加載時，由于數據內容較多，因此使用骨架圖填充會更為合理。比如在有贊當中， 就會使用骨架圖的方式來進行頁面信息的加載。而在B端后臺中也更多的適用于工作臺信息的加載，特別是在工作臺中有數據部分的內容呈現的時候，需要格外去注意。

三、加載中/Spin

Spin 主要要于頁面和區塊當中的信息加載，通過適當的動效，能夠保證頁面加載時緩解用戶的焦慮。

在 Spin 當中，會有許多不同的類型：基礎Loading、動畫Loading、進度Loading

基礎Loading 更適用于頁面當中的組件類級別的加載，像是在輸入框內、按鈕中、下拉選擇… 的內容加載。

動畫Loading 則偏向于區塊、頁面級別的加載，比如在表格頁面中，就會經常使用加載的方式展示目前正在相應。

進度Loading 則更像是進度條的外露，想要更凸顯目前的真實進度情況。目前在 Ant Design 5.18.0 版本當中即可支持

四、長時間加載

當然，在系統當中還會出現一些特殊的加載狀態。比如在針對數據量較大的情況下時，我們會采取什么樣的加載策略？

比如在神策數據當中，當我們在去分析后臺的行為數據時，需要進行大量的計算，因此在分析完一次過后所等待的時間也會更為長久。這時候神策會給出一套更為復雜的加載策略。

首先在加載層面上，它會優先告知用戶目前整體的加載進度，這對于用戶的等待是非常有益的。

其次，如果你對于整體加載的時間進度不夠滿意，那我可以給你相應的解決策略，像是分批加載等等。

最后如果你在加載過程當中有其他的分析任務，也可以通過異步加載的方式，進行后臺計算，等結果出來后會通過通知的方式進行提示。當然，在此過程中，你可以中斷、退出。

五、異步加載

異步加載也是針對長時間加載的一種策略，比如我需要去上傳較大信息的時候，我需要耗費特別多的時間。那這時候就可以采用異步加載的方式，滿足用戶的正常使用。

在飛書當中，我要上傳飛書妙記，我要導入飛書成員，那都可以通過異步加載的方式來進行呈現。

那在設計的時候需要去考慮異步加載整體的入口以及功能之間是如何實現的。

像是在飛書妙記中，它會將其作為一個上傳入口，進行快速的展現。而在導入飛書成員的時候，則會展現是將其放在后臺進行加載，等完成過后通過通知的方式來告知用戶（與神策相同）

關于加載，其實在設計上還會有很多細節，我們也會在課程當中，通過 功能設計 的方式給大家進行梳理設計要點（肯定會比現在更為系統），后續有時間，再和大家分享～

本文由人人都是產品經理作者【CE青年】，原創/授權 發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于 CC0 協議。

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan

從擬物風格到扁平化，再到如今的多變色彩與微妙質感，設計風格的演變不僅反映了技術的進步，也折射出用戶需求的轉變。本文結合釘釘近10年的B端設計經驗，深入探討2025年B端設計的三大趨勢：多變豐富的色彩、微妙克制的質感以及清晰明了的圖形。揭示了如何在滿足企業高效、專業需求的同時，為用戶帶來更具情感價值和科技感的視覺體驗。

回溯互聯網的發展進程，從桌面端的撥號上網，到5G移動互聯網，再至人工智能的助力，科技領域正在經歷著翻天覆地的變革。未來的數字世界，在沉浸感、參與度、個性化等維度對體驗會提出更進階的要求；與此同時，B端企業對于高效、簡便、用戶友好的界面需求與日俱增。在2025年的當下，B端設計師唯有持續學習，適應新技術與新趨勢，緊密圍繞客戶的業務價值展開設計，進一步注重實用性、包容性以及可定制化，方可為企業客戶塑造出卓越的產品與服務。

因此，我們結合釘釘近10年的B端產品設計經驗，鑒于未來B端設計趨勢將展現出多元化、智能化和人性化的特質，從B端產品個性化、風格與質感、界面版式、圖標、動態交互等多維度設計展開深度研究，與大家一道探討B端設計的本質和趨勢，期望在真正駕馭B端產品設計的這條道路上，帶來些許有益的啟迪。

做交互設計10年，我為何轉崗到產品經理？

真正轉崗之后，我發現很多工作還是超出了自己的想象。產品經理的工作確實比較雜。理論上，產品經理的工作包括了產品的方方面面，從市場研究、用戶調研、數據分析...

查看詳情 >

上篇文章我們講述了B端產品的個性化趨勢，如何利用個性化幫助個體提升用戶價值，打造個體形象、滿足個體情緒以及增強個體自信。

今天，我們要給大家分享的是B端產品風格&質感，為企業塑造品牌形象、為個人用戶提供情感價值。

一、從技術發展看UI設計風格的演變

設計作為科技和藝術的結合，UI設計風格的演變不僅與技術的發展密不可分，而且與藝術創作風格的發展有著異曲同工之妙，都經歷了抽象—具象—抽象的過程。

第一階段：萌芽風格

20世紀70-80年代是計算機圖形界面的萌芽階段，就像繪畫藝術起源之時的那個茹毛飲血的年代，當時的原始人所能利用的工具只有火堆熄滅后留下的木炭，圖像呈現的載體也只有山洞內的墻壁和巖石。就像剛剛進入計算機時代的設計師們，不僅缺少專業的繪圖軟件，而且當時計算機本身的顯示能力也尚且不足。這個階段的UI設計，能夠在顯示器上清晰地顯示并傳達明確的含義，比畫出風格更加重要。觀察當時的操作界面，不難猜測當時的設計師，努力以具象的表現風格來減少人們對計算機界面的陌生感，但由于工具和載體的限制無法完美實現，雖然這種風格無法被稱為擬物風格，但為后來真正的擬物風格的出現和發展奠定了基礎。

第二階段：擬物風格

1995年，家用計算機的顯示能力迎來了質的飛躍，Windows95發布、對真色彩的支持、PhotoShop5.0的發布……技術進步和專業軟件的加持讓設計師突破了過去創作工具和呈現載體的限制，就好像在山洞里用木炭繪畫的原始人，擁有了畫筆、顏料和畫布。設計師的創作空間和寫實能力得到極大提升。

與此同時，個人計算機和手機開始普及，圖形化的操作界面不再是科研人員和專業人士的專屬，而是普通人工作學習中的一部分。為了讓沒有接觸過圖形化操作界面的用戶快速識別圖標代表的功能，最好的方式就是在界面中對現實世界中的物體進行還原，這便推動了擬物風格的發展。

擬物風格的設計作品，通過模擬現實物品的造型和質感，通過疊加、高光、紋理、材質、陰影等效果對實物進行再現，讓用戶以極低的學習成本快速熟悉圖形化的操作界面和產品功能，并以符合日常習慣和直覺的方式引導用戶進行交互。

例如在ios6中的相機icon，對鏡頭部分細節刻畫非常細致，用戶很容易聯想到使用真實相機時能夠做到的事情，這對用戶理解和熟悉某一個產品功能的幫助無疑是巨大的；再比如同樣在ios6中的書架icon設計也十分精彩，不僅對真實報刊架的結構和質感極度還原，而且對書架內的雜志也進行了展示，用戶甚至能像真的面對一個書架一樣看到書架中的內容，小小的icon中信息含量極高。

第三階段：扁平化風格

到2013年左右，智能手機在全球主要國家和地區的普及率大幅提高。根據統計數據，許多發達國家的智能手機普及率超過了50%，發展中國家的智能手機普及率也在快速上升。大部分用戶已經對圖形化的操作界面非常熟悉，無需那些極致寫實的風格也能快速理解圖形背后的含義和功能。同時，越來越多的信息和應用涌入智能設備，擬物風格所推崇的肌理、質感、光影……帶來精致效果的同時，也讓細節變得冗余，如何處理爆炸的信息成為UI設計的首要問題。就像19世紀攝影技術對傳統寫實繪畫藝術的沖擊，讓藝術家們重新思考繪畫藝術的發展方向一樣，擬物風格的極致具象化在達到巔峰之時也漸漸到達了轉折點。

2013年9月ios7發布，并且首次在UI設計中采用了扁平化的設計風格。這種風格摒棄了擬物設計風格中的寫實光影、肌理、冗余的細節、甚至放棄了體積的塑造以及一切可能會對識別產生干擾的元素，只保留對用戶最關鍵的信息，呈現出十分干凈整潔的視覺效果。

然而物極必反，扁平化設計的極致簡潔，容易讓長期使用的用戶感到冷淡和無趣，于是新擬物風格應運而生。

新擬物融合了擬物和扁平兩種風格的特點，在光影和立體效果方面較為寫實，元素通常是凸起或凹陷于界面之上，視覺上錯落有致，但是在色彩和造型方面則更偏向于扁平化風格，圖形往往經過一定的簡化和抽象，并搭配少量簡潔的主觀顏色。但是新擬物風格過于依賴投影和立體效果對界面元素的區分，很難呈現復雜的信息層級，而且微妙的對比度也不利于無障礙識別，所以這種風格并未真正大面積流行和使用。

二、AI時代的B端設計風格趨勢

2022年，ChatGPT發布，AI在自然語言處理方面達到了前所未有的高度，同年Midjourney和stablediffusion的出圈讓每個人看到了AI生圖的魅力。不僅各種AI應用和網站如同雨后春筍般出現，而且各行各業的APP都在爭前恐后的升級自己的AI能力。這樣的時代背景，為UI設計提出了一個新的命題：如何用設計展現應用的AI能力以及企業的智能化心智。

趨勢1：多變豐富的色彩

色彩在B端設計風格中占據著至關重要的地位，能夠帶給用戶非常強烈的直觀感受，是用戶對產品和品牌的第一印象。例如藍色就是過去對To B或科技產品的色彩印象，諸如英特爾、微軟、聯想、戴爾、IBM…這些品牌通過藍色來傳達簡潔、未來感和高科技等視覺感受。但是這個標準并非是一成不變的，越來越多的B端設計，選擇使用豐富的色彩來表達智能化千變萬化的特點，科技感的表達不再是千篇一律的冷色，而有了更多的變化。

彌散漸變

彌散漸變是一種借助模糊效果將多種顏色進行混合的特殊漸變形式，多種顏色的混合以及不規律的漸變走勢，讓彌散漸變具有很強的氛圍烘托效果和表現力。暈開的色彩仿佛在一片虛空之中慢慢彌散開來，細膩、柔和又夢幻，很適合用來提升界面的局部氛圍。

優秀的場景適用性

在B端設計中，屏效和識別尤為重要，利用圖形或插畫的形式烘托氛圍，往往需要占用更多的空間，并且在網頁端的適配過程中，容易產生圖文重疊帶來的識別的問題。而彌散漸變由于其模糊和明度均勻的特點，可以在為畫面貢獻豐富度的同時，不產生視覺上的焦點，所以在適配過程中也不會產生圖文重疊的問題，具有很普遍的應用場景。

高效的場景拓展

在調整漸變時，通過保留一些相對清晰的輪廓，彌散漸變還能呈現出虛實結合的視覺體驗，讓畫面更具動感和層次變化，就像一面磨砂玻璃后飄浮著一些真實的物體一樣，十分具有空間感。虛實的變化讓色彩有了具體的造型，可能是一段波浪、一個球體、或是一座山丘……這樣的背景配合一些簡單的排版，便可以是一張海報、一張banner、一個推送封面……這無疑為高速迭代的B端設計提供了一個高效的解決方案。

動態變化

根據資料顯示，手機軟件的AI生圖時長一般在10秒至120秒之間，AI搜索平均時長大致在2秒到15秒之間，專業的寫作AI成文時間大致在3秒到30秒……

AI應用伴隨著大量的等待時間。使用動態變化的顏色能夠降低用戶在等待期間的焦慮感，并且不斷變化流動的色彩也能暗示用戶，當前仍處在“生成中”的狀態下。例如用戶在等待釘釘AI助理回答的過程中，聊天氣泡會呈現出多彩的流光效果；用戶在與AI助理進行語音交互時，整個屏幕邊緣會呈現動態的彩色光效，以表示當前的AI激活狀態。

除此之外，全屏動態的漸變背景還很適合用在信息不多的功能或應用首頁，例如在釘釘的登錄頁面，屏幕近三分之二的空間中只有簡單的文字動畫，搭配全氛圍的動態漸變背景，不僅清晰地傳達品牌的智能化心智，而且為“登錄”這一操作增添了滿滿的儀式感。類似的還有釘釘AI搜索的功能首頁，大面積涌動的動態漸變，充分在視覺層面展現了智能化的心智，而且大面積的留白也讓釘釘AI企業搜索的功能價值描述顯得格外突出。

趨勢2：微妙克制的質感

雖然新擬態風格并未大規模的使用和流行，但其衍生和沉寂的背后反映了設計的本質就是一場功能和審美之間的角逐。B端設計更是如此，用戶側需要美的設計來愉悅工作中的心情，但又不想被花哨的色彩和裝飾干擾工作效率，企業側需要擺脫沉悶古板的刻板印象，但同時也需要呈現專業、科技的高大形象保持可信度。微妙克制的質感表達為這種“平衡”的實現提供了解決思路。

玻璃擬態

玻璃擬態是2020年末開始流行的設計風格，顧名思義就是對玻璃這種材質的一種擬物化設計，玻璃擬態風格相較于新擬物風格最明顯的進步在于，它巧妙地利用玻璃這種材質解決了新擬物風格中元素邊界不清晰、難以體現復雜層級等問題。其風格特點可以總結為以下特點：

通透：

由于磨砂玻璃的通透性，在界面中存在多個層級時，會呈現出一種虛實結合的美感。并且其透明的屬性，能夠很好的暗示用戶目前所處的位置，利用此特性，不僅能更沉浸的展現用戶當前關注的信息，而且“疊加”而非“跳轉”的交互邏輯也極大減輕了用戶操作時的心理負擔。

懸?。?/p>

傳統的擬物風格往往會塑造一個地面，再將圖標“放置”在上面。而玻璃擬態風格則更像是構建了一個“無重力”的虛擬空間，界面中的元素有明顯的懸浮感，顯得十分輕盈，同時也非常適用于B端場景下對于科技感的體現。配合投影、虛實對比，用戶能夠清晰地感受到元素在空間上的高度差異，不僅保障了信息的可讀性，而且讓可交互元素更具點擊感。

微妙：

由于磨砂玻璃的物理特性，頁面背景在經過“玻璃層”的模糊處理后會變得十分柔和，類似上文所述的“彌散漸變”，呈現出一種明度均勻，沒有視覺焦點的狀態，無論是動態還是靜態都能很好的保障前景文字、UI控件等元素的可識別性。并且在玻璃擬態風格中，常常使用輕薄微妙的邊框來強化物理質感，這種既作為描邊，又作為“玻璃”的厚度的處理方式，讓卡片能夠以一個恰到好處的對比度呈現在界面中。

綜上所述，玻璃擬態風格在擬物程度上找到了一個很好的平衡點，既為枯燥的B端設計提供了真實感和趣味性，又保障了復雜信息情況下的識別度。并且由于玻璃光滑、透明等物理特性，也為“科技感”的視覺呈現提供了新的方向。

柔和光影+微質感材質

與C端設計中常用強烈的光影效果吸引用戶不同，b端設計相對更加沉穩。對比阿里云、WPS、釘釘、騰訊云的官網首頁，都不約而同地使用了非常柔和的環境光，這種光影設計，在保障整體亮度的基礎上，不會產生明確的光照方向和陰影效果，并且在材質選擇上，也都使用了高光、反光均不明顯的漫反射材質或微質感的毛玻璃材質，整體視覺感受十分沉靜和整潔。

趨勢3：清晰明了的圖形

圖形在設計中扮演著兩部分角色，一方面圖形作為頁面的裝飾需要保證審美的愉悅性，另一方面圖形也作為文字信息的補充，需要傳達某些特定的含義。好的圖形設計不僅能為整個頁面的氛圍添光加彩，而且能幫助用戶更好的理解文字信息。

規律感的幾何圖形

在b端場景下，常常需要借助圖形表達一些抽象的概念，例如PaaS、服務器、AI、用量、科技、流量……這類含義并不直接對應一個特定的造型，使用有規律的幾何圖形，似乎是一個不錯的選擇。這些技術概念的背后來自于二進制中0和1的組合，而將幾何元素有機地排列，甚至衍生出不同的形態的過程，不是正如代碼的編寫嗎？

簡潔高效的手繪元素

在當下的B端設計領域，越來越重視情感關懷和個人用戶的體驗。在頁面中使用具有手繪感的元素或使用直接使用手繪圖案作為配圖，不僅能夠快速拉近品牌和用戶之間的距離，塑造年輕化、有親和力的品牌形象，也能提升用戶在使用產品工作時的愉悅感。這類充滿輕松感的圖形比起傳統的插畫或3d建模更加簡潔，色彩鮮明，具有很強的表現力，并且設計成本也更低，十分適合作為一些小而美的產品配圖。

例如Google推出的Material design的設計語言就大量使用了抽象且配色艷麗的手繪元素作為配圖，這類圖案更加強調色彩并不過多細化造型，穿插在文字之間，讓深色背景的頁面一下活躍了起來。與此類似的還有figma的官網，設計師將軟件內的部分工具比如線條、線框、錨點、指針等元素抽象出來作為插圖，不僅簡潔耐看，而且十分具有自身的品牌特色。

除此之外，利用手繪線條來表現hover的交互狀態，圈畫重要的文字信息，或是進行操作引導，也具有極高的效率。簡單的箭頭或者波浪線，能夠非常直接地將用戶的注意力指引到重要信息處，就像學生時期在書本上圈畫重點一樣，感受上十分自然而親切。仿佛應用的設計者悄悄在用戶耳邊說了一句小tips，而不是粗暴地把信息丟到用戶眼前。

三、結語

無論是擬物風格時期的極致寫實，還是扁平化風格時期的極簡，又或是AI時代的多彩絢麗，設計風格的發展始終圍繞著技術發展的主線，其發展的目標，始終圍繞著如何讓當前時代的用戶更好更便捷地享受到技術應用帶來的便利。一個好的b端設計風格，不僅能夠幫助企業展現品牌心智和技術上的先進性；而且能夠讓個人用戶更高效且愉悅地完成工作任務。在未來的B端產品設計中，我們應該始終堅持形式服務于功能和以人為本的原則，探索更適合業務場景的設計風格，為用戶帶來更加舒適自然的視覺體驗。

以上是本期帶來的B端設計趨勢之個風格篇。

在B端產品設計中，退訂是用戶對產品不滿的直接表現，也是我們優化產品的重要信號。作為UI設計師，如何通過交互設計降低退訂率，提升用戶留存，是一個值得深入探討的話題。本文將結合 DeepSeek（深度探索） 的設計理念，從用戶心理和交互設計的角度，分享B端產品退訂心理學的設計策略與實踐。

一、DeepSeek+交互設計：理解用戶退訂的深層原因 DeepSeek

強調通過深度探索用戶行為和心理，找到問題的本質。在退訂場景中，用戶的行為背后往往隱藏著以下心理動因：

• 價值感知不足 用戶未感受到產品的核心價值，認為投入與回報不成正比。
• 操作體驗不佳 復雜的操作流程或低效的功能設計讓用戶失去耐心。
• 需求未被滿足 產品功能與用戶實際需求不匹配，導致用戶選擇離開。
• 缺乏情感連接 用戶對產品缺乏歸屬感或信任感，容易被競品吸引。

二、DeepSeek+交互設計策略：降低退訂率的四大關鍵

1. 深度探索用戶行為，優化退訂路徑

1）設計目標：通過數據分析，找到用戶退訂的高頻節點，優化交互路徑。

 

2）設計策略：

• 在用戶退訂前增加“挽回節點”，如彈窗提示“您是否遇到問題？我們可以幫您解決。”
•  提供“暫停服務”或“降級套餐”選項，而非直接退訂。

2. 強化價值感知，讓用戶看到“收益”

1）設計目標：通過設計手段，讓用戶直觀感受到產品的價值。

2）設計策略： 

• 在退訂頁面展示用戶使用產品的關鍵數據（如“您已節省XX小時”）。
• 提供成功案例或用戶評價，增強用戶信任感。

3. 簡化操作流程，提升用戶體驗

1）設計目標：降低用戶的操作成本，減少因體驗不佳導致的退訂。

2）設計策略：

• 提供清晰的操作指引和幫助文檔，降低學習成本。
• 在關鍵操作節點增加即時反饋（如“操作成功”提示）。

4. 建立情感連接，增強用戶歸屬感

1）設計目標：通過設計讓用戶感受到被重視，增強對產品的情感依賴。

2）設計策略： 

• 在退訂頁面增加個性化挽留信息（如“我們會想念您”）。
• 提供專屬優惠或免費試用機會，讓用戶感受到被重視。

三、DeepSeek+設計案例：某B端 SaaS 產品的退訂優化實踐

以某B端 SaaS 產品為例，通過 DeepSeek+交互設計策略，退訂率降低了20%。

具體優化包括：

• 在退訂頁面增加“您可能錯過的功能”模塊，強化價值感知。
• 提供“聯系客戶經理”按鈕，方便用戶咨詢和解決問題。

四、總結

退訂是用戶對產品的“最后反饋”，也是我們優化產品的重要機會。通過 DeepSeek+交互設計，我們可以深度探索用戶心理，優化交互路徑，強化價值感知，簡化操作流程，并建立情感連接，從而有效降低退訂率。希望本文的設計策略與實踐能為B端產品的優化提供啟發，讓我們的產品更好地服務于用戶，提升用戶留存與滿意度。

在數字化轉型和AI技術的推動下，B端設計正在經歷一場深刻的變革。本文從釘釘近10年的B端產品設計經驗出發，深入探討了2025年B端品牌物料系統設計的趨勢。

回溯互聯網的發展進程，從桌面端的撥號上網，到5G移動互聯網，再至人工智能的助力，科技領域正在經歷著翻天覆地的變革。未來的數字世界，在沉浸感、參與度、個性化等維度對體驗會提出更進階的要求；與此同時，B端企業對于高效、簡便、用戶友好的界面需求與日俱增。在2025年的當下，B端設計師唯有持續學習，適應新技術與新趨勢，緊密圍繞客戶的業務價值展開設計，進一步注重實用性、包容性以及可定制化，方可為企業客戶塑造出卓越的產品與服務。

因此，我們結合釘釘近10年的B端產品設計經驗，鑒于未來B端設計趨勢將展現出多元化、智能化和人性化的特質，從B端產品個性化、風格與質感、界面版式、品牌物料、動態、圖標等多維度設計展開深度研究，與大家一道探討B端設計的本質和趨勢，期望在真正駕馭B端產品設計的這條道路上，帶來些許有益的啟迪。

今日，將為大家分享2025 B端品牌物料的設計趨勢，深入探討如何系統的構建和管理品牌物料體系：從精心提煉品牌戰略，到積極探索客戶觸點創新，針對品牌物料的生產、加工和面客宣發等多元場景，聚焦于高效傳遞品牌一致性、強化專業信賴感、精確傳遞產品服務及價值，進而吸引目標客戶并推動轉化。

B端品牌物料：更專業且多維的進化之路

“當企業采購決策者同時收到5份方案書，你的設計怎樣才能率先映入眼簾？”引用Forrester報告可知，76%的B端采購決策會受視覺專業度影響。

B端究竟需要什么樣的產品經理？

B端產品經理都是以提升供應側的工作效率為目的，所以B端需求主要是以業務問題為導向。 這個是B端產品比較重要的一點，B端產品是服務于一個主體 ...

查看詳情 >

B端場景下，由于客戶具有一些特殊性：比如決策流程漫長、涉及角色眾多等，所需往往不只是產品，還涵蓋配套安裝、培訓、維護等整體解決方案，并且更看重穩定性、信任感與長期合作價值。因而，B端產品在面向客戶展示品牌服務與物料時，設計上需從品牌策略、視覺體系、場景應用、體驗升級及工具支持等多個維度，傳遞出專業、高效、創新的形象。

從【平面靜態】到【多維動態】

隨著數字化轉型的影響力與日俱增，綜合行業變革、技術發展以及客戶需求的動態演變，在實現品牌一致性傳達、提升專業信賴感以及達成目標客戶轉化等方面，B端品牌物料設計歷經了從基礎功能傳達邁向多維度體驗升級的不斷進化：

在傳統印刷時代，為我們所熟知的品牌物料核心載體包括信紙、手冊、單頁、展板等。

這些物料的設計呈現出高度標準化的特征：嚴格依照CI手冊執行，該手冊詳盡規定了企業在各類場景下正確運用品牌元素的方式，諸如標志（Logo）、標準字體、色彩系統、宣傳語等，以此確保所有對外傳播信息均契合企業的形象定位與價值觀。然而，這種模式也存在一些弊端，例如改版周期長、難以滿足客戶的定制化需求。

步入互聯網時代，B端面客的品牌物料通常覆蓋從線上到線下的多元場景，諸如官網、H5產品價值頁、文檔介紹、PPT模板、活動沙龍物料等等。不僅如此，線上產品一般還借助大量運營推廣、市場傳播等形式觸達客戶或用戶。

這種方式具備諸多優勢：比如制作周期短，更新迭代快，能夠針對客戶的不同身份與需求，實現更為定制化、精準化的服務。同時，還可通過復盤數據轉化情況，持續優化和調整價值內容的呈現方式。

近年來，技術迭代日新月異，諸如Web3、AR、生成式AI等新興技術重構了物料形態。與此同時，B端決策者的代際更替顯著，越來越多年輕的企業管理者對數字敘事的接受度大幅提升。數據可視化的融入，不僅讓內容更具說服力，也契合了B端客戶對數據的需求。加之產品競爭同質化現象愈發凸顯，當技術參數趨于相同時，視覺體驗便成為影響客戶選擇的關鍵差異點。

當前，B端品牌物料設計的前沿趨勢亮點紛呈：實時數據看板可與客戶系統API直接相連、動態信息圖表借助AE動畫演示技術架構、動態數據資產化表現多樣：比如阿里云以流體力學動畫演繹云計算資源調度，利用粒子系統可視化AI算法運行路徑；再比如AR說明書掃描設備可觸發三維拆解動畫，全息投影方案沙盤等，這些都為客戶帶來了從“單向傳播”到“交互式對話”的沉浸式體驗。

從【功能說明書】到【價值放大器】

“在B端領域，視覺設計不是美工，而是產品價值的翻譯官與商業信任的構筑者。”

我們不難察覺，B端品牌物料設計在視覺敘事邏輯上已然經歷了深刻的進化：

過去

產品介紹大多局限于功能說明書層面?；诰珳蕚鬟f技術參數這一核心目的，形成了以“產品圖 + 技術指標 + 對比表格”構成的模塊化排版定式，同時采用齒輪寓意工業設備、電路板象征智能化等隱喻圖形。然而，這種方式弊病明顯，同質化現象極為嚴重，且嚴重缺失品牌個性。

現在

產品介紹在兩方面實現了顯著突破。

其一: 在敘事方式上，實現了從“我們有什么”到“你能實現什么”的理念升級；

其二: 在創新策略上，通過插畫生動呈現客戶現有工作流程的痛點，將枯燥的數據進行戲劇化處理，例如把“節省30%成本”轉化為動態損益曲線，直觀且富有沖擊力。

從【功能導向】到【情感共鳴】

于B端品牌物料設計的發展進程里，如何在秉持專業性的基礎上，傳遞出飽含情感的溫度，已然成為關鍵所在。

舉例而言，當鼠標懸停（hover）在數據圖表上，粒子綻放的效果瞬間呈現，為用戶帶來耳目一新的奇妙體驗；借助材質隱喻來傳達特定情感，磨砂金屬質感猶如無聲的語言，訴說著可靠與安心；還有別出心裁的反數字化實踐：比如制作觸感編碼手冊，讓不同紙張紋理與產品特性一一呼應，磨砂紙寓意安全防護的堅實壁壘，金屬箔象征尖端科技的無限探索。

與此同時，可持續物料創新層出不窮，諸多環保實踐讓人眼前一亮：比如采用大豆油墨印刷，讓廢棄手冊在短短6個月內便可自然降解；電子說明書中巧妙內嵌碳足跡計算器，清晰展示環保貢獻數值。像某清潔設備廠商獨具匠心，其手冊采用種子紙制作，客戶將手冊種植后，便能收獲與企業LOGO形狀相關的植物，為環保行動增添一抹別樣的詩意。此外，展望未來生態感知期，諸如腦機接口情緒反饋設計等前沿探索，正引領著B端品牌物料設計邁向更多維的天地。

B端品牌物料：更系統的構建“有形”體驗

B端品牌物料作為與客戶之間的溝通材料，需要兼顧品牌戰略穿透力與商業場景適配性，其本質離不開以人為中心的服務和體驗，不管是網頁還是H5，印刷物還是空間，都大量借助“物理元素”進行可視化呈現，“有形”的體驗能夠加深客戶對服務的記憶，強化客戶感知。

接下來，我們從品牌戰略層到系統層再到執行層，深入闡述如何更系統地構建B端品牌物料設計。

品牌基因萃取

B端品牌物料系統設計的首要步驟，便是提煉其獨特的價值觀、差異化競爭優勢，以及與客戶建立信任的關鍵標識等要素。這些品牌基因的提取，應重點著眼于行業特性、技術門檻以及品牌服務定位，而非側重于感性的情感表達。

以釘釘為例，AI時代下，我們的品牌主張聚焦于讓組織和個人更敏捷、更有創造力，致力于塑造智能、簡約、普惠且開放的企業形象?；谶@一品牌戰略，我們在設計風格（涵蓋色彩、質感、版式以及傳播物料等方面）、面客產品介紹，以及文案描述等多個維度，都進行了系統性的煥新升級。

場景化物料矩陣設計

B端品牌物料設計，絕非僅僅著眼于美觀，更需具備策略性，以便針對不同客戶場景，精準傳遞相應信息。

在釘釘，我們精心構建了新紫品牌物料庫，無論是內部的企服人員、銷售、設計師、業務PDSA等，還是外部生態服務商及其他人員，都能開放使用，實現及時共享。

例如，當線下的前線銷售團隊舉辦面對面的會銷活動或客戶沙龍時，為了更直觀、規范地展示產品或服務，我們提供一系列契合釘釘調性的基礎演示物料，包括PPT、產品介紹文檔、手冊、企業名片、一&五&十頁紙、邀請函以及展廳氛圍布置等標準模板。同時，針對各類物料，配備詳細的使用說明文檔和生產SOP，內容涵蓋從文件下載到字體安裝，從素材使用到標準輸出，再從工藝制作到預算成本等各個環節。即便你是設計小白不懂設計，也能依據自身需求，迅速對接供應商，制作出精美且符合品牌調性的物料。

同時，為擴大新紫品牌物料在前線人員中的知曉度與認知度，提高物料使用頻率，并確保物料使用的一致性，我們與前線團隊緊密建聯，定期開展線上直播培訓與答疑活動。通過收集真實客戶需求反饋，反哺品牌物料不斷完善。

又如，當釘釘員工進行客戶共創、拜訪時，為保障服務專業度，提升企業品牌形象，我們會準備精美且適宜的伴手禮，并聯合市場團隊，輸出一套完整的釘釘官方品牌介紹、釘釘集團案例介紹等物料供其使用。

值得注意的是，釘釘的生態服務商也是展現釘釘企業服務與形象的關鍵力量，因此，我們還為其提供統一裝修建議，包括門頭設計、裝修風格、著裝要求、解決方案手冊等。

再如，在釘釘的線上場景中，釘釘官網、各業務產品H5價值頁等都是客戶快速了解產品的重要渠道。為提升內部人員協同效率，我們設計開發了釘釘內容運營生產平臺——「叮當貓」，其中沉淀并搭建了大量關于釘釘產品功能、價值介紹、企業案例和解決方案等模板，如同精心配置的“預制菜”，使用者可直接便捷取用。

此外，在B端具體業務中，品牌物料需更具靈活性。例如，在釘釘管理套件商業化場景中，針對面客材料繁多、演示組織操作門檻高、及時迭代性差等痛點，我們打造即開即用的產品體驗樣板間，讓客戶能夠快速、便捷、可視化地體驗產品，加速客戶決策。

最后，B端場域下，客戶除了通過線下一對一或線上觸達服務了解產品介紹，各類傳播渠道同樣是企業品牌與心智塑造的重要陣地。像大型企業發布會、產品公眾號、小紅書等平臺，都是不容忽視的關鍵場景。在釘釘，我們每年定期舉辦大型產品升級發布會，并借助各類傳播渠道持續宣傳推廣，不斷擴大品牌影響力。

品牌物料一致性管理

品牌物料管理在B端業務中不僅是設計規范問題，更是品牌資產運營、組織協同效能提升的系統工程。

在品牌物料投放與實際使用過程中，我們時常遭遇一些典型痛點場景，比如某會晤物料使用過期Logo、某線下展會采用過時的色彩規范、某產品價值頁與白皮書技術參數不一致等。追根溯源，這些問題的核心成因在于上下游協同與一致性管理的缺失。在幾十人的小型企業中，此類情況或許尚不嚴重，通過簡單的相互“問一嘴”，便能較快達成信息對焦。然而，一旦企業規模擴張，人數達到幾百、上千甚至過萬，品牌物料一致性的協同管理便會變得愈發困難。因此，為更高效地解決信息不對齊、不統一的難題，建立一套標準的品牌物料管理范式用以指導物料設計與使用的準入及準出，就顯得尤為必要。

在釘釘，隨著智能化的全面升級，為提升品牌物料的美觀度與專業度，同時提高物料調用效率、確保使用的一致性，我們與銷售團隊特別成立專項項目組。在企服前線代表和各業務產品代表的關鍵支持下，形成了 「生產部」-「加工中心」-「面客部」 的品牌物料生產、加工與調用管理機制?！干a部」的人負責做什么，再到「面客部」的人負責賣什么，而處于中間環節負責加工的人員，則如同橋梁一般，確保上下游信息傳遞的準確性以及品牌物料管理的一致性。比如：有人負責細化到行業或場景的demo設計，有人核心輸出標桿客戶案例，還有人負責輸出一套完整的企業服務面客規范。做好品牌物料的一致性管理，能夠極大的提升B端客戶決策效率（降低認知成本），同時強化企業專業可信度。

結語

隨著行業變遷、客戶需求的不斷更迭以及技術的日新月異，B端品牌物料設計已悄然蛻變，從傳統認知里單純的宣傳材料，逐步發展成為多維且個性化的服務與體驗。當下B端品牌物料的設計趨勢，聚焦于高效傳遞品牌一致性、強化專業信賴感，以及系統性管理好物料的生產、加工和面客宣發。從精心提煉品牌戰略，到積極探索客戶觸點創新，每一個環節都旨在降低客戶認知成本，助力企業精準傳遞產品服務及其價值，從而推動客戶轉化。

以上就是本期為大家帶來的B端設計趨勢之品牌物料系統設計的全部內容。后續，我們還將從動效、圖標等設計趨勢深入研究，期待在深耕B端產品設計的道路上，與各位攜手前行，共同進步。

常見的B端卡片組件，應該怎么設計才可以達成更好的傳播效果、傳遞更清晰、更完善的視覺體驗？在本篇文章里，作者就結合具體案例，對B端卡片組件設計進行了技巧拆解，一起來看看吧，或許會對你有所啟發。

B端設計的過程中，并不是所有元素抄一抄別人的，從組件庫里引用下就完事了，而是要經過具體組織并設計。尤其在一些特殊的組件中，是可以去表現設計水平，提升項目整體視覺質量的，而不是讓它們看起來非常的枯燥乏味。

這次，我們的改版主要就圍繞在B端常見的卡片組件中，通過3個以前提交過的作業，來分享如何設計B端的卡片。

三個改版案例我們都遵循相同的設計方式和順序：

• 分析組件包含字段
• 確認組件內部框架
• 完成字段權重表現
• 完成組建視覺樣式

一、卡片案例1

在該案例中，卡片作為頁面的核心對象，視覺重心不夠突出，且內容的權重沒有得到有效的表現，訂單標識只有一個的情況反復強調對識別卡片沒有任何幫助，且卡片占比過大，沒必要的浪費頁面空間。

所以，重構它的結構時，重點突出標題弱化標簽，將卡片拆分成標題、信息、操作三個欄，讓信息的呈現更簡潔直觀。

然后再具體優化內容和細節，對重要信息突出，固定的標題字段弱化。

最后，再根據主色的需要填充色彩進去即可。

二、卡片案例2

這個案例也是設計得比較有問題的，但是忽略掉全局組件的粗糙，卡片部分的設計也是很多作品案例中的常見問題，要素過多，沒有主次，在列表化的展示中，根本沒辦法很好的識別相關的內容和關注到有效的信息，會被淹沒在繁復的字段內容中。

所以，我們用相同的方法作下區分，將內容分為上中下三個欄。

然后再對字段做權重的劃分，雖然字段信息很多，但值得被突出的要素不多，企業名和數據是卡片中最重要的信息，一個用于識別卡片，一個用于查看核心的指標。

最后，再完成樣式的補全即可，只在星級和用戶職位上增加色彩。

三、卡片案例3

問題和前面還是一樣，內容很零碎，所有要素都強調，于是就沒有重點。所以，下面對它們進行改版，這次因為數據項不再是重點，卡片的目標不是用來查看數據而是用于檢索進入到下級頁面的，所以只分了兩欄。

然后，再對權重進行強調，查看詳情是這里面最重要的元素，圖片則沒有太大的意義僅僅是點綴所以縮小。

最后，再完成相應色彩的添加和圖片的填充，完成最終的視覺效果。

這三個改版都用了很簡單的修改方式，通過理解卡片的作用、字段信息，對它進行信息分區，然后填入相關的字段并做出權重劃分，最后再用顏色為不同的要素加權。

只要掌握這樣的設計思路，做絕大多數卡片都不會有阻力，只會糾結于應該用哪套樣式更合適。

結尾

因為時間關系只做了很簡單的調整，沒去做多套大跨度的樣式變更，同時套進原圖環境沒做整體的處理，所以還有很多升級優化的空間，理解這個感覺即可。

這些是一些創新和不同尋常的B端系統界面設計思路，可以根據具體的業務需求和用戶群體的特點進行定制和調整。希望這些思路能夠為您帶來新的靈感和想法！

在B端產品設計中，中后臺UI設計規范的建立對于提升設計效率、保證用戶體驗一致性以及優化開發流程至關重要。本文從設計規范的意義、原子設計理論、后臺設計系統搭建以及Design Token應用實踐四個方面，詳細總結了B端中后臺設計的要點和方法，供大家參考學習。

今天從以下4個方面，結合7年B端設計工作經驗，為大家分享原子設計理論和中后臺設計系統搭建的應用實踐。

01 搭建設計規范的意義

分別站在整個產品設計研發流程中各個角色的不同角度，在工作中可能會有以下“抱怨時刻”：

由此，體現出搭建設計規范的作用和意義：

① 產品側

?個產品不同分?多個團隊完成的時候，可以保證產品團隊使?同?份設計規范快速完成產品原型設計。保證可復?模塊的交互體驗的?致性。

② 設計側

通過設計規范去解決?部分需求，極?提?效率解放雙?，讓設計師能去做?些更發揮創意和想象?的設計。

③ 開發側

形成開發資產，可以提升研發效率，降低維護成本。開發?程師?需再重復開發同?個組件，只需要去組件庫?調?即可，配合業務邏輯，?效完成界?開發，做到開箱即?。

什么是B端產品經理？和C端產品經理有什么區別？

B端產品經理中的B是Business，商業的意思，B端產品經理首先就要理解這個職位的重要性，要設計出更適合這個項目需求的產品方案，B最終產品經理在日常工作中...

查看詳情 >

④ 測試側

標準化的設計規范，是測試?員最喜歡看到的。例如，設計規范規定彈窗 footer 區按鈕組居右，那么測試?員只要測到不居右，就可以給產品提優化建議了。

02 原子設計理論

設計規范中具像化的環節是設計組件化，最早可以追溯到?業?命時期，福特創造的流?線?產?式。福特將汽?分解成零部件，再把零部件模塊化組裝，這?創舉極?的提?了?產效率。

根據資料顯示，T型?是世界第?款?量使?通?零部件，并進??規模流?線裝配的汽?。這種?式極?地提?了T型??產效率，降低了?產成本。

1914年，福特已經可以做到93分鐘?產?輛汽?，?同期其他所有汽??商的?產能?總和也不及于此。

到了1920年代，T型?的價格甚?降到300美元?輛（問世之初T型?的售價僅需850美元，?同期的競爭對?則通常為2000-3000美元?輛）。

原子設計理論最初來源于化學領域，這一點從名字可以聽出來。在化學中，所有的物體都是由原?構成，原?組合構成分?，分?組合構成有機物，最終形成了宇宙萬物。

2013年前端?程師 Brad Forst將此理論運?在界?設計中，形成?套設計系統，包含 5 個層?：原?、分?、組織、模板、??。當公司的業務產品逐漸擴?時，我們就需要制定?套完整的設計系統，提升設計和開發的協作效率，統?所有設計師的輸出物。

總之，將設計拆分成?些基本元素，例如?個按鈕、?個彈窗，再根據業務需求、產品邏輯重新組裝，形成最終的產品，這就是原?設計理論（組件化設計），區別于整體設計制造的?種新的?作流程。

03 后臺設計系統搭建

① 設計系統搭建—原子

原?是物質的基礎組成部分，是構成設計系統的最基礎元素。

在界?中以「元素」的形式存在，例如：顏?、?字、圖標、分割線、間距、圓?、陰影等。

色彩體系

中后臺產品的?彩體系主要分為3類：品牌?、功能?、中性?。

• 品牌色：大型公司往往都會有專屬色號的品牌色，比如阿里橙色、美團黃色和騰訊藍色，以體現產品特性、傳播理念。在界面中主要體現在關鍵行動點、選中狀態、重要信息和插畫元素等。
• 功能色：旨在表示某種狀態提示，這類顏色往往是深入人心的，比如綠色代表成功，紅色代表失敗等等。
• 中性色：還有一種是不需要傳遞顏色代表的特殊含義的，稱為中性色，即黑白灰。

B端網站體現理性和效率特性，往往會使中性色占據九成以上，應用在背景、邊框、文本和分割線。下圖為顏色定義示例（考慮暗色模式）。

文字體系

B端產品的?字系統設計?標：增強閱讀體驗、提升信息獲取效率，字體是體系化界?設計中最基本的構成之?。

字體的??、字重、?彩區分體現界?信息的層級關系。

• 整體思路：在同?個系統的 UI 設計中先建?體系化的設計思路，對主、次、輔助、標題、展示等類別的字體做統?的規劃，再落地到具體場景中進?微調，最終確定建?體系化的設計思路，有助于強化字體落地的?致性。
• 少即是多：在視覺展現上能夠?盡量少的樣式去實現設計?的。避免毫?意義的使??量字階、顏?、字重強調視覺重點或對?關系，提?字體應?的性價?，減少不必要的樣式浪費。
• 拉開對?：在需要拉開差距的時候可以嘗試在字階表中跳躍地選擇字體??，會令字階之間產??種微妙的韻律感。

下圖為字階應用規范示意：

陰影、圓角、線條

陰影：在B端界?中，有些特殊的元素會使?到陰影，從陰影中我們可以看出物體距離平?的?度，距離平?越?的物體陰影越?；

圓角：從直?到圓?給?帶來從嚴謹冰冷到柔和親切的?理感受，在B端界? 中，常?2-8px圓?；

線條：分割模塊及輔助定位。

② 后臺設計系統搭建—分子

在界?中，分?是按照規律組合起來的元素，如：按鈕、搜索框、選擇器等。

以按鈕為例，?字、?塊、圖標和間距這些抽象的原?產?關聯組合成分?：圖標、?字傳達含義；顏?、圓?傳遞特性；間距、尺?定義規范。

③ 后臺設計系統搭建—組織

分?+原?組合成更復雜和可拓展的組織（區塊組件），如搜索區、卡?列表區、表單區、數據統計區等。

④ 后臺設計系統搭建—模板

由原?+分?+組織構成的更復雜更具拓展性的模塊，構成了典型??模板，如列表?、詳情?、異常?、Dashboard等。模板在設計系統中承載的作?就是保證設計?案在原型各階段的?致性，專注??底層架構，并?具體??。

⑤ 后臺設計系統搭建—頁面

帶業務邏輯的場景案例，如標注場景、權限管理、詳情設置等，將??模板填充真實的?字、圖?后形成??，即帶交互邏輯的?保真原型圖，真實內容使設計系統有了“?命” 。

04 Design Token應用實踐

雖然通過設計規范可以對產研流程提效，但在開發還原中還是會經常遇到?些棘?的問題。

開發還原準確度難以保證，走查幾輪還有有細節問題沒有修復；

領導要求開發暗色模式，或者客戶要求換一套主題色，找到替換的工作量巨大；

設計一處變更，涉及多個頁面模塊，維護工作量大。

為了解決和優化上述的問題，Design Token 應運??。它可以解決產品設計和開發過程中的細節、變更和?格?致性的問題，有效提?產研團隊設計質量和協作效率。

① Design Token介紹

“Token”原本的意思是“令牌，指令”，與 Design 連在?起指“設計變量”。在?程邏輯中?于?戶身份與服務器端進?驗證，?在設計體系中，Design Token 則可以簡單理解為封裝的視覺樣式參數。它通過規定樣式參數，并通過?套符合設計師、?程師理解的統?的命名規則，為這些樣式參數的定義名稱。

Design Token優勢

設計語義更易理解：幫助設計師和開發建?統?語?，設計?案更加?致。從下到上的Design Token命名思路。

主題?膚?鍵替換：主題?膚的替換可以?在兩個維度，?是淺?模式和暗?模式的替換，?是不同品牌?之間的替換。我們可以將不同主題的同?個場景下的顏?使?同?個 Token 命名，達到?鍵換膚的效果適配不同客戶?案。

設計變更?效維護：替代傳統?作流?鍵替換效果。例如修改二級文本的顏色，傳統工作流需要先修改設計規范，修改設計稿，然后輸出給開發，開發逐一更新代碼，完成后提交給設計師進行走查驗收。而當使用Token之后，只需要更新Token參數，就可以直接導出JSON給開發，一鍵自動更新。提高效率不止一點點。

設計效果精準還原：代碼編輯器?動化提示顏?選擇，如不正確則產?報錯。

總結一下使用Token開發的優勢：

• 設計語言 更易理解
• 主題皮膚 一鍵替換
• 設計變更 高效維護
• 設計成果 精準還原

② Design Token應用流程

第一步：提煉token元素；

第二步：定義命名規則；

第三步：整理Design Token資產表；

第四步：開發與應用。

接下來具體說說如何為Design Token命名，命名方式目前并沒有絕對統一的要求，不過有一定的邏輯規則，可以由設計師找前端開發一起商量出一個都能通俗易懂便于理解的命名規則，

舉個例子：

1.Token名稱由大到小排序，中間用“-”分隔；

2.Token前綴可自定義添加公司簡稱，如“–el-xx” 、“–ant-xx”、“–td-xx”。

為了更好的統一規范，應用Token，建議成熟的互聯網公司設計團隊搭建自己的低代碼平臺。一鍵更換主題，盡在指尖。

最后

以上就是從四個方面歸納的B端設計規范定義和總結，希望對你有所幫助！

在數字化時代，B端產品的用戶體驗設計正變得愈發重要。動效設計作為提升交互體驗和效率的關鍵手段，正在成為B端設計中不可或缺的一部分。本文將深入探討2025年B端設計中動效的趨勢，從動效的歷史演變、物理世界中的靈感汲取，到釘釘設計系統中的實踐應用，幫助我們理解動效如何從簡單的視覺裝飾轉變為提升產品效率和用戶體驗的核心工具。

回溯互聯網的發展進程，從桌面端的撥號上網，到5G移動互聯網，再至人工智能的助力，科技領域正在經歷著翻天覆地的變革。

未來的數字世界，在沉浸感、參與度、個性化等維度對體驗會提出更進階的要求；與此同時，B端企業對于高效、簡便、用戶友好的界面需求與日俱增。

在2025年的當下，B端設計師唯有持續學習，適應新技術與新趨勢，緊密圍繞客戶的業務價值展開設計，進一步注重實用性、包容性以及可定制化，方可為企業客戶塑造出卓越的產品與服務。

因此，我們結合釘釘近10年的B端產品設計經驗，鑒于未來B端設計趨勢將展現出多元化、智能化和人性化的特質，從B端產品個性化、風格與質感、界面版式、品牌物料、圖標、動態交互等多維度設計展開深度研究，與大家一道探討B端設計的本質和趨勢，期望在真正駕馭B端產品設計的這條道路上，帶來些許有益的啟迪。對交互等多維度設計展開深度研究，與大家一道探討B端設計的本質和趨勢，期望在真正駕馭B端產品設計的這條道路上，帶來些許有益的啟迪。

今天要和大家聊聊 B 端產品的動效設計趨勢。我們將回顧動效的發展軌跡，從歷史演變到設計哲學，探索如何從物理世界汲取靈感，并分享釘釘在動效設計中的思考與實踐。

一、回顧動效設計的演變歷程

動效設計在互聯網的發展歷程中經歷了多次變革。從最初簡單的過渡動畫，到如今復雜而精細的交互體驗，動效的演進不僅是技術發展的產物，也映射了用戶體驗設計理念的不斷深化。

B 端產品經理如何快速成長？

產品與業務架構主要是將整個業務工作流進行分層，梳理，然后抽象出一個個需求，將業務需求與產品合情合理的映射起來，最終使業務數據在產品中流動，執行，記錄，使用。

查看詳情 >

1990s-2000s：簡單的進度展示

在互聯網的早期，受限于帶寬和硬件性能，動效的應用較為基礎，主要用于加載進度條和頁面過渡，核心目的是向用戶提供反饋，減少操作過程中的不確定性。典型案例是 Windows 98 時代的加載進度條和網頁上的緩沖動畫。這些動效雖然簡單，卻在當時發揮了重要作用——幫助用戶理解系統狀態，降低等待焦慮。

2005-2012：Flash 技術引領網頁動畫

進入 2000 年代中期，Flash 技術的普及讓網頁動畫迎來了黃金時代。Flash 賦予了設計師更大的自由度，使得網頁可以呈現更豐富的動態效果，動效不再局限于狀態反饋，而開始深度參與交互體驗。這一時期，動效的作用從提示系統狀態進化為增強用戶沉浸感，例如按鈕懸停時的動態反饋，炫酷的頁面切換過渡，以及交互式動畫（如鼠標跟隨效果、小游戲動畫等）。

不過，Flash 的動效過度依賴插件，影響性能，并且在移動端難以兼容。2010 年代，隨著 HTML5 和 CSS3 的發展，Flash 逐漸被取代，動效設計進入新階段。

2012-至今：物理規律的引入與美學平衡

隨著移動互聯網興起，尤其是 Material Design，iOS，以及 Fluent Design 等動效規范的推出，動效設計進入了全新的階段。這個階段的核心理念是基于物理規律的自然動效，強調動效不僅僅是裝飾，而是信息層級傳遞、引導用戶操作的重要工具。

Material Design：強調物理隱喻與流暢性

• 點擊按鈕時的波紋擴散，讓操作反饋更自然
• 元素的加速、減速運動，使界面更富有生命感
• 卡片式界面層級動畫，通過漸變、位移等方式構建層級感，使導航更加清晰

Fluent Design：深度融合光影與層次感

• 通過陰影和模糊等方式，增強界面的深度和透視層次
• 交互時光效隨用戶操作產生微妙變化，提升體驗的直覺性
• 內容隨焦點流動，利用動效引導用戶注意力，使信息呈現更具邏輯性

由此可見，動效不再只是視覺上的炫技，而是成為提升可用性、降低認知負荷的重要工具。合理的動效可以提升用戶的操作流暢度，讓界面變得更自然、更具生命力。

二、從物理世界中捕捉動效的美感

在自然界里，每一次風吹樹葉的擺動、每一滴水滴入湖面的擴散，都遵循著物理規律，展現出流暢且和諧的運動軌跡。這些自然現象不僅帶來視覺上的愉悅，也蘊含著深層次的運動邏輯，為數字動效設計提供了源源不斷的靈感。動效的流暢性、節奏感、反饋感，本質上都是對物理世界美學的映射。

例如，波紋擴散是我們常見的自然現象。當一顆石子落入湖面，波紋自中心向外擴散，起初迅速，隨后逐漸放緩，最終消失。這個過程中的漸進減速特性為數字動效設計提供了極佳的靈感。在數字界面中，我們可以通過緩慢擴散的動畫來模擬水面波紋的效果，形成一種溫和的反饋感。

再比如，現實世界中的物體在運動時通常會表現出加速與減速的特性。以地球上的自由落體為例，物體從高空下落時，初始速度較慢，但隨著重力作用，它不斷加速。這種非勻速運動，在動效設計中被轉化為緩動曲線（Easing Curves），使得用戶在界面交互時感受到更加自然的動態變化。

而彈跳和反彈又是另一個物理世界中常見的運動方式。想象一顆籃球從地面反彈起來，起初速度快，隨后逐漸放緩，最終停止。這種逐漸衰減的回彈，正是彈性動效的靈感來源。在界面交互中，彈性動效可以模擬物體的重量和材質，提升操作的真實感。

三、釘釘設計系統里的動效哲學

當牛頓凝視落下的蘋果，他發現了萬有引力的奧秘；而當釘釘的設計團隊觀察一張任務卡片的拖拽軌跡時，我們探尋的是數字世界的運動法則。在物理規律與交互邏輯的交匯處，釘釘的動效設計體系逐漸凝練出一套方法論——讓每個像素的運動既符合自然規律，又服務于生產效率。

在 B 端產品中，動效遠不止是視覺與交互的簡單結合，更是提升可用性和降低認知成本的關鍵手段。它不僅承擔著引導用戶操作、傳遞信息層級、降低認知負荷的功能，還通過增強操作確定性，幫助用戶更高效地完成任務。換句話說，我們正以理性與直覺，重塑效率美學。

原則：平衡的藝術

釘釘的設計框架始終圍繞視覺感官和用戶體驗兩個核心維度展開，追崇理性與感性的精密協作：

1. 視覺感官：流暢

• 連貫性：組件狀態的切換應如同翻動書頁般自然，確保界面過渡流暢、節奏統一，讓數字世界保持有序
• 自然性：模仿現實世界的運動方式，使動效遵循慣性、彈性、摩擦等物理規律，減少割裂感，讓用戶的感知更直覺
• 不碰撞：就像城市道路的規劃，動效的路徑需經過精心設計，避免界面元素相撞或相互干擾，確保用戶注意力不被分散

2. 用戶體驗：高效

• 助交互：在復雜的信息架構中，動效可以作為層級引導，幫助用戶理解界面之間的主次關系
• 不干擾：平衡產品界面中的動效存在感，避免過度裝飾或喧賓奪主。最理想的動效，是讓用戶幾乎察覺不到它的存在，卻能享受它帶來的流暢體驗
• 明確性：每一個動效都有其清晰的目的，或是為了引導用戶操作，或是為了強化任務的完成感

時間梯度：數字節拍器

企業級應用中，物體的運動時間需要把控得恰到好處。研究表明，人類對 100ms 以下的變化幾乎無感，而超過 1s 的等待則會讓用戶產生不耐煩的情緒。因此，釘釘的動效體系嚴格遵循以下節奏，通過順應人類大腦的認知規律，確保每一次動效都恰到好處，帶來舒適的體驗：

• 最短動效時長設定為 100ms，并以 100ms 遞增，確保節奏穩定
• 不同動效的時間設定，取決于物體的大小、路徑長短以及動畫復雜度

速度：像素的重力場

現實世界中的物體運動受到重力、摩擦力等因素影響，呈現加速與減速的動態變化。釘釘的動效體系也采用緩動曲線（Easing），以模擬真實世界的運動節奏。當數字界面掙脫線性勻速的機械感，便擁有了令人愉悅的「生命感」。

空間：界面的立體語法

在二維屏幕上構建三維認知，需要更精密的「空間修辭學」。釘釘的動效體系確保每一次位移都符合用戶的直覺，并運用空間層次感，讓信息更易理解。

1. 同級物體

• 整體運動方向和遞進順序需符合用戶預期
• 確保物體運動順序符合「左到右、上到下、順時針」的視覺流

2. 從屬物體

• 核心物體的動效應更突出，而叢屬元素的動效需弱化或捆綁運動
• 確保物體的運動軌跡不發生碰撞

3. 三維空間

• 物體在 Z 軸上有位移變化時，尺寸應相應調整，以模擬透視效果
• 近大遠小的視差效果，可增強層次感，提升信息的空間可讀性

四、無障礙設計思考

在動效設計中，無障礙性不僅關乎技術標準，更關乎用戶的體驗公平性。一個包容的設計體系，應該讓所有用戶——無論其身體或認知能力如何——都能平等地理解和使用產品。無障礙動效的核心，在于減少干擾、提供替代方案，并賦予用戶選擇權，確保每一次交互都是安全、友好的。

避免誘發健康問題：高頻閃爍或快速變化的動畫可能誘發光敏性癲癇等健康問題。因此，在設計時，我們應避免超過3次/秒的快速閃爍，并盡可能減少過度刺激性的動效

提供替代方案：對于依賴屏幕閱讀器的用戶，純視覺動效可能難以感知。我們可以為動效添加文本描述或提供靜態替代方案，確保所有用戶都能理解動效傳達的信息。例如，在釘釘 AI 助理中的加載場景，我們提供「正在為你生成…」的文本標簽，方便屏幕閱讀器用戶理解當前狀態

五、總結

動效設計已成為現代數字產品中不可或缺的組成部分。從簡單的過渡動畫到如今富有交互感和情感觸動的設計，動效已經不再是單純的視覺裝飾，而是推動產品發展、提升用戶體驗的關鍵力量。

真正的好動效，是那種用戶幾乎察覺不到的流暢交互，它能夠讓信息傳遞變得高效、讓操作更加順暢，同時也讓數字產品展現出溫暖的人文氣息。動效，作為產品與用戶之間的一座橋梁，它不僅是界面的點綴，更是效率與體驗的催化劑。

未來，釘釘將繼續探索動效設計的創新與實踐，通過優化交互體驗、提升產品效率，不斷賦能用戶、創造更美好的數字世界。