2025 年 B 端設計趨勢｜風格 & 質感

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

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

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

從技術發展看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年末開始流行的設計風格，顧名思義就是對玻璃這種材質的一種擬物化設計，玻璃擬態風格相比較新擬物風格最明顯的進步在於，它巧妙地利用玻璃這種材質解決了新擬物風格中元素邊界不清晰、難以體現複雜層級等問題。其風格特點可以總結為以下特點：

通透：

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

懸浮：

傳統的擬物風格往往會塑造一個地面，再將圖標「放置」在上面。而玻璃擬態風格則更像是構建了一個「無重力」的虛擬空間，介面中的元素有明顯的懸浮感，顯得十分輕盈，同時也非常適用於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端設計的本質與發展趨勢。

多姆科技（DomTech）是釘釘在香港的官方指定服務商，專門為廣大客戶提供釘釘服務。如果您還想瞭解更多釘釘平臺應用的內容，可以直接諮詢我們的在線客服，或者通过电话+852 56253886或邮箱cs@dingtalk.com.hk联系我们。我們有優秀的開發和運維團隊，豐富的市場服務經驗，可以為您提供專業的釘釘解決方案和服務！