做交互設(shè)計10年，我為何轉(zhuǎn)崗到產(chǎn)品經(jīng)理？
2025-3-28 天宇 B端ui設(shè)計文章及欣賞
從擬物風(fēng)格到扁平化，再到如今的多變色彩與微妙質(zhì)感，設(shè)計風(fēng)格的演變不僅反映了技術(shù)的進步，也折射出用戶需求的轉(zhuǎn)變。本文結(jié)合釘釘近10年的B端設(shè)計經(jīng)驗，深入探討2025年B端設(shè)計的三大趨勢：多變豐富的色彩、微妙克制的質(zhì)感以及清晰明了的圖形。揭示了如何在滿足企業(yè)高效、專業(yè)需求的同時，為用戶帶來更具情感價值和科技感的視覺體驗。
回溯互聯(lián)網(wǎng)的發(fā)展進程，從桌面端的撥號上網(wǎng)，到5G移動互聯(lián)網(wǎng)，再至人工智能的助力，科技領(lǐng)域正在經(jīng)歷著翻天覆地的變革。未來的數(shù)字世界，在沉浸感、參與度、個性化等維度對體驗會提出更進階的要求；與此同時，B端企業(yè)對于高效、簡便、用戶友好的界面需求與日俱增。在2025年的當(dāng)下，B端設(shè)計師唯有持續(xù)學(xué)習(xí)，適應(yīng)新技術(shù)與新趨勢，緊密圍繞客戶的業(yè)務(wù)價值展開設(shè)計，進一步注重實用性、包容性以及可定制化，方可為企業(yè)客戶塑造出卓越的產(chǎn)品與服務(wù)。
因此，我們結(jié)合釘釘近10年的B端產(chǎn)品設(shè)計經(jīng)驗，鑒于未來B端設(shè)計趨勢將展現(xiàn)出多元化、智能化和人性化的特質(zhì)，從B端產(chǎn)品個性化、風(fēng)格與質(zhì)感、界面版式、圖標(biāo)、動態(tài)交互等多維度設(shè)計展開深度研究，與大家一道探討B(tài)端設(shè)計的本質(zhì)和趨勢，期望在真正駕馭B端產(chǎn)品設(shè)計的這條道路上，帶來些許有益的啟迪。
上篇文章我們講述了B端產(chǎn)品的個性化趨勢，如何利用個性化幫助個體提升用戶價值，打造個體形象、滿足個體情緒以及增強個體自信。
今天，我們要給大家分享的是B端產(chǎn)品風(fēng)格&質(zhì)感，為企業(yè)塑造品牌形象、為個人用戶提供情感價值。
設(shè)計作為科技和藝術(shù)的結(jié)合，UI設(shè)計風(fēng)格的演變不僅與技術(shù)的發(fā)展密不可分，而且與藝術(shù)創(chuàng)作風(fēng)格的發(fā)展有著異曲同工之妙，都經(jīng)歷了抽象—具象—抽象的過程。
20世紀(jì)70-80年代是計算機圖形界面的萌芽階段，就像繪畫藝術(shù)起源之時的那個茹毛飲血的年代，當(dāng)時的原始人所能利用的工具只有火堆熄滅后留下的木炭，圖像呈現(xiàn)的載體也只有山洞內(nèi)的墻壁和巖石。就像剛剛進入計算機時代的設(shè)計師們，不僅缺少專業(yè)的繪圖軟件，而且當(dāng)時計算機本身的顯示能力也尚且不足。這個階段的UI設(shè)計，能夠在顯示器上清晰地顯示并傳達明確的含義，比畫出風(fēng)格更加重要。觀察當(dāng)時的操作界面，不難猜測當(dāng)時的設(shè)計師，努力以具象的表現(xiàn)風(fēng)格來減少人們對計算機界面的陌生感，但由于工具和載體的限制無法完美實現(xiàn)，雖然這種風(fēng)格無法被稱為擬物風(fēng)格，但為后來真正的擬物風(fēng)格的出現(xiàn)和發(fā)展奠定了基礎(chǔ)。
1995年，家用計算機的顯示能力迎來了質(zhì)的飛躍，Windows95發(fā)布、對真色彩的支持、PhotoShop5.0的發(fā)布……技術(shù)進步和專業(yè)軟件的加持讓設(shè)計師突破了過去創(chuàng)作工具和呈現(xiàn)載體的限制，就好像在山洞里用木炭繪畫的原始人，擁有了畫筆、顏料和畫布。設(shè)計師的創(chuàng)作空間和寫實能力得到極大提升。
與此同時，個人計算機和手機開始普及，圖形化的操作界面不再是科研人員和專業(yè)人士的專屬，而是普通人工作學(xué)習(xí)中的一部分。為了讓沒有接觸過圖形化操作界面的用戶快速識別圖標(biāo)代表的功能，最好的方式就是在界面中對現(xiàn)實世界中的物體進行還原，這便推動了擬物風(fēng)格的發(fā)展。
擬物風(fēng)格的設(shè)計作品，通過模擬現(xiàn)實物品的造型和質(zhì)感，通過疊加、高光、紋理、材質(zhì)、陰影等效果對實物進行再現(xiàn)，讓用戶以極低的學(xué)習(xí)成本快速熟悉圖形化的操作界面和產(chǎn)品功能，并以符合日常習(xí)慣和直覺的方式引導(dǎo)用戶進行交互。
例如在ios6中的相機icon，對鏡頭部分細(xì)節(jié)刻畫非常細(xì)致，用戶很容易聯(lián)想到使用真實相機時能夠做到的事情，這對用戶理解和熟悉某一個產(chǎn)品功能的幫助無疑是巨大的；再比如同樣在ios6中的書架icon設(shè)計也十分精彩，不僅對真實報刊架的結(jié)構(gòu)和質(zhì)感極度還原，而且對書架內(nèi)的雜志也進行了展示，用戶甚至能像真的面對一個書架一樣看到書架中的內(nèi)容，小小的icon中信息含量極高。
到2013年左右，智能手機在全球主要國家和地區(qū)的普及率大幅提高。根據(jù)統(tǒng)計數(shù)據(jù)，許多發(fā)達國家的智能手機普及率超過了50%，發(fā)展中國家的智能手機普及率也在快速上升。大部分用戶已經(jīng)對圖形化的操作界面非常熟悉，無需那些極致寫實的風(fēng)格也能快速理解圖形背后的含義和功能。同時，越來越多的信息和應(yīng)用涌入智能設(shè)備，擬物風(fēng)格所推崇的肌理、質(zhì)感、光影……帶來精致效果的同時，也讓細(xì)節(jié)變得冗余，如何處理爆炸的信息成為UI設(shè)計的首要問題。就像19世紀(jì)攝影技術(shù)對傳統(tǒng)寫實繪畫藝術(shù)的沖擊，讓藝術(shù)家們重新思考繪畫藝術(shù)的發(fā)展方向一樣，擬物風(fēng)格的極致具象化在達到巔峰之時也漸漸到達了轉(zhuǎn)折點。
2013年9月ios7發(fā)布，并且首次在UI設(shè)計中采用了扁平化的設(shè)計風(fēng)格。這種風(fēng)格摒棄了擬物設(shè)計風(fēng)格中的寫實光影、肌理、冗余的細(xì)節(jié)、甚至放棄了體積的塑造以及一切可能會對識別產(chǎn)生干擾的元素，只保留對用戶最關(guān)鍵的信息，呈現(xiàn)出十分干凈整潔的視覺效果。
然而物極必反，扁平化設(shè)計的極致簡潔，容易讓長期使用的用戶感到冷淡和無趣，于是新擬物風(fēng)格應(yīng)運而生。
新擬物融合了擬物和扁平兩種風(fēng)格的特點，在光影和立體效果方面較為寫實，元素通常是凸起或凹陷于界面之上，視覺上錯落有致，但是在色彩和造型方面則更偏向于扁平化風(fēng)格，圖形往往經(jīng)過一定的簡化和抽象，并搭配少量簡潔的主觀顏色。但是新擬物風(fēng)格過于依賴投影和立體效果對界面元素的區(qū)分，很難呈現(xiàn)復(fù)雜的信息層級，而且微妙的對比度也不利于無障礙識別，所以這種風(fēng)格并未真正大面積流行和使用。
2022年，ChatGPT發(fā)布，AI在自然語言處理方面達到了前所未有的高度，同年Midjourney和stablediffusion的出圈讓每個人看到了AI生圖的魅力。不僅各種AI應(yīng)用和網(wǎng)站如同雨后春筍般出現(xiàn)，而且各行各業(yè)的APP都在爭前恐后的升級自己的AI能力。這樣的時代背景，為UI設(shè)計提出了一個新的命題：如何用設(shè)計展現(xiàn)應(yīng)用的AI能力以及企業(yè)的智能化心智。
色彩在B端設(shè)計風(fēng)格中占據(jù)著至關(guān)重要的地位，能夠帶給用戶非常強烈的直觀感受，是用戶對產(chǎn)品和品牌的第一印象。例如藍色就是過去對To B或科技產(chǎn)品的色彩印象，諸如英特爾、微軟、聯(lián)想、戴爾、IBM…這些品牌通過藍色來傳達簡潔、未來感和高科技等視覺感受。但是這個標(biāo)準(zhǔn)并非是一成不變的，越來越多的B端設(shè)計，選擇使用豐富的色彩來表達智能化千變?nèi)f化的特點，科技感的表達不再是千篇一律的冷色，而有了更多的變化。
彌散漸變
彌散漸變是一種借助模糊效果將多種顏色進行混合的特殊漸變形式，多種顏色的混合以及不規(guī)律的漸變走勢，讓彌散漸變具有很強的氛圍烘托效果和表現(xiàn)力。暈開的色彩仿佛在一片虛空之中慢慢彌散開來，細(xì)膩、柔和又夢幻，很適合用來提升界面的局部氛圍。
優(yōu)秀的場景適用性
在B端設(shè)計中，屏效和識別尤為重要，利用圖形或插畫的形式烘托氛圍，往往需要占用更多的空間，并且在網(wǎng)頁端的適配過程中，容易產(chǎn)生圖文重疊帶來的識別的問題。而彌散漸變由于其模糊和明度均勻的特點，可以在為畫面貢獻豐富度的同時，不產(chǎn)生視覺上的焦點，所以在適配過程中也不會產(chǎn)生圖文重疊的問題，具有很普遍的應(yīng)用場景。
高效的場景拓展
在調(diào)整漸變時，通過保留一些相對清晰的輪廓，彌散漸變還能呈現(xiàn)出虛實結(jié)合的視覺體驗，讓畫面更具動感和層次變化，就像一面磨砂玻璃后飄浮著一些真實的物體一樣，十分具有空間感。虛實的變化讓色彩有了具體的造型，可能是一段波浪、一個球體、或是一座山丘……這樣的背景配合一些簡單的排版，便可以是一張海報、一張banner、一個推送封面……這無疑為高速迭代的B端設(shè)計提供了一個高效的解決方案。
動態(tài)變化
根據(jù)資料顯示，手機軟件的AI生圖時長一般在10秒至120秒之間，AI搜索平均時長大致在2秒到15秒之間，專業(yè)的寫作AI成文時間大致在3秒到30秒……
AI應(yīng)用伴隨著大量的等待時間。使用動態(tài)變化的顏色能夠降低用戶在等待期間的焦慮感，并且不斷變化流動的色彩也能暗示用戶，當(dāng)前仍處在“生成中”的狀態(tài)下。例如用戶在等待釘釘AI助理回答的過程中，聊天氣泡會呈現(xiàn)出多彩的流光效果；用戶在與AI助理進行語音交互時，整個屏幕邊緣會呈現(xiàn)動態(tài)的彩色光效，以表示當(dāng)前的AI激活狀態(tài)。
除此之外，全屏動態(tài)的漸變背景還很適合用在信息不多的功能或應(yīng)用首頁，例如在釘釘?shù)牡卿涰撁?，屏幕近三分之二的空間中只有簡單的文字動畫，搭配全氛圍的動態(tài)漸變背景，不僅清晰地傳達品牌的智能化心智，而且為“登錄”這一操作增添了滿滿的儀式感。類似的還有釘釘AI搜索的功能首頁，大面積涌動的動態(tài)漸變，充分在視覺層面展現(xiàn)了智能化的心智，而且大面積的留白也讓釘釘AI企業(yè)搜索的功能價值描述顯得格外突出。
雖然新擬態(tài)風(fēng)格并未大規(guī)模的使用和流行，但其衍生和沉寂的背后反映了設(shè)計的本質(zhì)就是一場功能和審美之間的角逐。B端設(shè)計更是如此，用戶側(cè)需要美的設(shè)計來愉悅工作中的心情，但又不想被花哨的色彩和裝飾干擾工作效率，企業(yè)側(cè)需要擺脫沉悶古板的刻板印象，但同時也需要呈現(xiàn)專業(yè)、科技的高大形象保持可信度。微妙克制的質(zhì)感表達為這種“平衡”的實現(xiàn)提供了解決思路。
玻璃擬態(tài)
玻璃擬態(tài)是2020年末開始流行的設(shè)計風(fēng)格，顧名思義就是對玻璃這種材質(zhì)的一種擬物化設(shè)計，玻璃擬態(tài)風(fēng)格相較于新擬物風(fēng)格最明顯的進步在于，它巧妙地利用玻璃這種材質(zhì)解決了新擬物風(fēng)格中元素邊界不清晰、難以體現(xiàn)復(fù)雜層級等問題。其風(fēng)格特點可以總結(jié)為以下特點：
通透：
由于磨砂玻璃的通透性，在界面中存在多個層級時，會呈現(xiàn)出一種虛實結(jié)合的美感。并且其透明的屬性，能夠很好的暗示用戶目前所處的位置，利用此特性，不僅能更沉浸的展現(xiàn)用戶當(dāng)前關(guān)注的信息，而且“疊加”而非“跳轉(zhuǎn)”的交互邏輯也極大減輕了用戶操作時的心理負(fù)擔(dān)。
懸?。?/p>
傳統(tǒng)的擬物風(fēng)格往往會塑造一個地面，再將圖標(biāo)“放置”在上面。而玻璃擬態(tài)風(fēng)格則更像是構(gòu)建了一個“無重力”的虛擬空間，界面中的元素有明顯的懸浮感，顯得十分輕盈，同時也非常適用于B端場景下對于科技感的體現(xiàn)。配合投影、虛實對比，用戶能夠清晰地感受到元素在空間上的高度差異，不僅保障了信息的可讀性，而且讓可交互元素更具點擊感。
微妙：
由于磨砂玻璃的物理特性，頁面背景在經(jīng)過“玻璃層”的模糊處理后會變得十分柔和，類似上文所述的“彌散漸變”，呈現(xiàn)出一種明度均勻，沒有視覺焦點的狀態(tài)，無論是動態(tài)還是靜態(tài)都能很好的保障前景文字、UI控件等元素的可識別性。并且在玻璃擬態(tài)風(fēng)格中，常常使用輕薄微妙的邊框來強化物理質(zhì)感，這種既作為描邊，又作為“玻璃”的厚度的處理方式，讓卡片能夠以一個恰到好處的對比度呈現(xiàn)在界面中。
綜上所述，玻璃擬態(tài)風(fēng)格在擬物程度上找到了一個很好的平衡點，既為枯燥的B端設(shè)計提供了真實感和趣味性，又保障了復(fù)雜信息情況下的識別度。并且由于玻璃光滑、透明等物理特性，也為“科技感”的視覺呈現(xiàn)提供了新的方向。
柔和光影+微質(zhì)感材質(zhì)
與C端設(shè)計中常用強烈的光影效果吸引用戶不同，b端設(shè)計相對更加沉穩(wěn)。對比阿里云、WPS、釘釘、騰訊云的官網(wǎng)首頁，都不約而同地使用了非常柔和的環(huán)境光，這種光影設(shè)計，在保障整體亮度的基礎(chǔ)上，不會產(chǎn)生明確的光照方向和陰影效果，并且在材質(zhì)選擇上，也都使用了高光、反光均不明顯的漫反射材質(zhì)或微質(zhì)感的毛玻璃材質(zhì)，整體視覺感受十分沉靜和整潔。
圖形在設(shè)計中扮演著兩部分角色，一方面圖形作為頁面的裝飾需要保證審美的愉悅性，另一方面圖形也作為文字信息的補充，需要傳達某些特定的含義。好的圖形設(shè)計不僅能為整個頁面的氛圍添光加彩，而且能幫助用戶更好的理解文字信息。
規(guī)律感的幾何圖形
在b端場景下，常常需要借助圖形表達一些抽象的概念，例如PaaS、服務(wù)器、AI、用量、科技、流量……這類含義并不直接對應(yīng)一個特定的造型，使用有規(guī)律的幾何圖形，似乎是一個不錯的選擇。這些技術(shù)概念的背后來自于二進制中0和1的組合，而將幾何元素有機地排列，甚至衍生出不同的形態(tài)的過程，不是正如代碼的編寫嗎？
簡潔高效的手繪元素
在當(dāng)下的B端設(shè)計領(lǐng)域，越來越重視情感關(guān)懷和個人用戶的體驗。在頁面中使用具有手繪感的元素或使用直接使用手繪圖案作為配圖，不僅能夠快速拉近品牌和用戶之間的距離，塑造年輕化、有親和力的品牌形象，也能提升用戶在使用產(chǎn)品工作時的愉悅感。這類充滿輕松感的圖形比起傳統(tǒng)的插畫或3d建模更加簡潔，色彩鮮明，具有很強的表現(xiàn)力，并且設(shè)計成本也更低，十分適合作為一些小而美的產(chǎn)品配圖。
例如Google推出的Material design的設(shè)計語言就大量使用了抽象且配色艷麗的手繪元素作為配圖，這類圖案更加強調(diào)色彩并不過多細(xì)化造型，穿插在文字之間，讓深色背景的頁面一下活躍了起來。與此類似的還有figma的官網(wǎng)，設(shè)計師將軟件內(nèi)的部分工具比如線條、線框、錨點、指針等元素抽象出來作為插圖，不僅簡潔耐看，而且十分具有自身的品牌特色。
除此之外，利用手繪線條來表現(xiàn)hover的交互狀態(tài)，圈畫重要的文字信息，或是進行操作引導(dǎo)，也具有極高的效率。簡單的箭頭或者波浪線，能夠非常直接地將用戶的注意力指引到重要信息處，就像學(xué)生時期在書本上圈畫重點一樣，感受上十分自然而親切。仿佛應(yīng)用的設(shè)計者悄悄在用戶耳邊說了一句小tips，而不是粗暴地把信息丟到用戶眼前。
無論是擬物風(fēng)格時期的極致寫實，還是扁平化風(fēng)格時期的極簡，又或是AI時代的多彩絢麗，設(shè)計風(fēng)格的發(fā)展始終圍繞著技術(shù)發(fā)展的主線，其發(fā)展的目標(biāo)，始終圍繞著如何讓當(dāng)前時代的用戶更好更便捷地享受到技術(shù)應(yīng)用帶來的便利。一個好的b端設(shè)計風(fēng)格，不僅能夠幫助企業(yè)展現(xiàn)品牌心智和技術(shù)上的先進性；而且能夠讓個人用戶更高效且愉悅地完成工作任務(wù)。在未來的B端產(chǎn)品設(shè)計中，我們應(yīng)該始終堅持形式服務(wù)于功能和以人為本的原則，探索更適合業(yè)務(wù)場景的設(shè)計風(fēng)格，為用戶帶來更加舒適自然的視覺體驗。
以上是本期帶來的B端設(shè)計趨勢之個風(fēng)格篇。
本文由人人都是產(chǎn)品經(jīng)理作者【釘釘用戶體驗】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于 CC0 協(xié)議。
蘭亭妙微(m.gyxygd.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan
藍藍設(shè)計的小編 http://m.gyxygd.cn