前言

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

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

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

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

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

第一階段：萌芽風格

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

第二階段：擬物風格

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

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

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

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

第三階段：扁平化風格

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

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

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

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

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

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

趨勢 1：多變豐富的色彩

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

彌散漸變

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

① 優(yōu)秀的場景適用性

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

② 高效的場景拓展

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

動態(tài)變化

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

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

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

趨勢 2：微妙克制的質感

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

玻璃擬態(tài)

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

① 通透：

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

② 懸浮：

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

③ 微妙：

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

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

柔和光影+微質感材質

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

趨勢 3：清晰明了的圖形

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

規(guī)律感的幾何圖形

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

簡潔高效的手繪元素

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

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

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

結語

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

以上是本期帶來的 B 端設計趨勢之個風格篇。接下來，我們還將從版式方面，與大家共同探討 B 端設計的本質與發(fā)展趨勢。

作者：釘釘用戶體驗