從事 B 端設(shè)計第 6 個年頭了，接觸了各式各樣的 B 端客戶和需求，有很多的感悟和心得，人們常說，B 端設(shè)計只注重功能，不注重美感，要是幾年前，別人這么跟你說，你可以信，但是現(xiàn)在要是還有人跟你這么說，千萬別當(dāng)真，現(xiàn)在各企業(yè)的 B 端產(chǎn)品，功能近乎完善，想要拉開差距，就只能從細(xì)節(jié)、體驗(yàn)和設(shè)計來著手了，那么設(shè)計又該如何做到風(fēng)格多樣化，百看不厭呢，我總結(jié)了有以下 20 個風(fēng)格設(shè)計的切入點(diǎn)，希望我的分享能給大家?guī)韱l(fā)。

一、在首頁中添加微動的背景元素

可靈 AI 的首頁一改常規(guī)的設(shè)計，不再是一上來呈現(xiàn)精美的圖標(biāo)，而是用了一個簡潔的動效，配上一句 slogan，上面懸浮幾個常用的功能按鈕，簡潔有力，清晰明了。

二、在頂部加入廣告通欄的方式

在有銷售場景的需求中，在首頁加入廣告通欄的形式，循環(huán)告知用戶產(chǎn)品的折扣、福利以及產(chǎn)品亮點(diǎn)，是一個不錯的設(shè)計著手點(diǎn)。

下邊把大的圖片做成了功能切入點(diǎn)，避免了在頁面功能單一的情況下，只用圖標(biāo)出現(xiàn)的頁面單調(diào)問題。

三、用圖表來呈現(xiàn)內(nèi)容

在首頁中不需要華麗的圖片，也無需精美的圖標(biāo)，只需用圖表就能清晰表達(dá)內(nèi)容也是一種不錯的表達(dá)方式。

聯(lián)想電腦管家就是這樣的，用戶的主要需求是關(guān)注電腦的關(guān)鍵性能運(yùn)行狀態(tài)如何，用簡單的圖表就能清晰且美觀的呈現(xiàn)，那么圖表也是不錯的選擇。

四、植入壁紙來呈現(xiàn)內(nèi)容

在首頁中植入美圖壁紙也是不錯的思路，甚至連小程序圖標(biāo)也用圖片來呈現(xiàn)了，打開了我以往認(rèn)為只有繪制的圖才能成為主視覺的誤區(qū)。

聯(lián)想應(yīng)用商店，沒有應(yīng)用精美的插圖設(shè)計，就運(yùn)用了美輪美奐的壁紙圖片，效果很好，信息傳達(dá)很清晰，首頁 banner 沒有做成通欄，而是在右邊植入了四個功能入口，大大提升了頁面的利用率。

五、用卡片的視覺方式渲染主功能按鈕

發(fā)現(xiàn)在頁面中運(yùn)用 PPT 的卡片設(shè)計方式，視覺呈現(xiàn)也很哇塞，頁面簡潔又不失美觀。

通義千問，在設(shè)計學(xué)習(xí)助手時，就運(yùn)用了工作中常用的 PPT 卡片的方式來表達(dá)實(shí)時記錄、閱讀助手、PPT 創(chuàng)作，非常的形象，與現(xiàn)實(shí)場景很貼切，拉近了與用戶的距離。

六、用實(shí)物代替圖標(biāo)的造景也很美

用美的照片實(shí)物圖，代替圖標(biāo)，也很美，畫面很豐富，但是這時圖標(biāo)應(yīng)用就要立刻降噪了，不適合用樣式太多的圖標(biāo)，應(yīng)簡潔。

佐糖的界面，用了大量的實(shí)物圖，頁面看起來比較豐富，這時候它的圖標(biāo)就非常的簡潔，用了很簡潔的線性圖標(biāo)，這樣頁面就沒有看起來太散焦，很簡潔有序。

七、打破形式帶來新的視覺聚焦點(diǎn)

用破形的方式，改變常規(guī)的繪圖方式，可以帶來視覺聚焦。

智譜清言的精選工具一欄，所有拱形里面的圖都特意超出拱形，打破常規(guī)的拱形造型，吸引了人們的注意力，同時也更具設(shè)計感和美感，下面的的文字造型標(biāo)簽也特意呼應(yīng)上邊帶圓角的拱形造型。

八、用微質(zhì)感圖標(biāo)帶來的視覺聚焦

對于抽象的科技產(chǎn)品來說，無法用具體的實(shí)物進(jìn)行清晰傳達(dá)，此時用抽像的圖標(biāo)表達(dá)是不二選擇，可以降低產(chǎn)品的乏味性，同時又兼具美感。

騰訊電腦管家，用很有創(chuàng)意的圖標(biāo)把一些功能呈現(xiàn)出來，既表達(dá)了產(chǎn)品，又傳遞了美感，同時主視覺圖標(biāo)還有微動效，產(chǎn)生了讓人無法抗拒的喜愛之情。

九、簡潔扁平插畫的應(yīng)用風(fēng)

在界面中應(yīng)用簡潔的扁平插畫，也是一種思路，賦予產(chǎn)品文化氣息。

曾經(jīng)接觸過一個項(xiàng)目，客戶希望產(chǎn)品能表現(xiàn)出強(qiáng)烈的地域文化氣息，希望用戶打開界面，一眼就知道是哪個地方的產(chǎn)品，我當(dāng)時靈機(jī)一動，想到的是把地方的特色建筑融入產(chǎn)品，于是就產(chǎn)出了如下的產(chǎn)品呈現(xiàn)，采用了簡潔的建筑扁平插畫應(yīng)用其中。

十、幾何色塊的應(yīng)用

有時候在主要功能區(qū)，應(yīng)用簡潔的漸變幾何色塊也是不錯的視覺風(fēng)格。

曾經(jīng)做過一個項(xiàng)目，在點(diǎn)子窮盡的情況下，除了圖標(biāo)、圖片、形式等外，我發(fā)現(xiàn)在卡片上植入簡潔的漸變幾何色塊也是不錯的視覺呈現(xiàn)，只要信息表達(dá)清晰，也能給觀眾帶來不一樣的視覺感受。

十一、不同色塊的層級分區(qū)，打造別樣風(fēng)格

常規(guī)的卡片設(shè)計一般都是白色，然后配圖，有時候打破常規(guī)，運(yùn)用顏色卡片做區(qū)分也是一種不錯的選擇。

以下是我體驗(yàn)的稿定界面設(shè)計，它一改常規(guī)的白色卡片界面，整個底色運(yùn)用了灰色，主要功能區(qū)運(yùn)用有彩色，其他的非主要功能區(qū)運(yùn)用了各色的灰作為底色，整個界面看著非常的協(xié)調(diào)美觀，層次分明，有強(qiáng)有弱。

十二、圖標(biāo)與卡通插畫并用

界面中用圖標(biāo)和卡通插畫并用的方式，可以創(chuàng)造出豐富且驚喜的視覺效果。

星辰大模型的首頁就是運(yùn)用了圖標(biāo)和卡通插畫的方式，避免了頁面單調(diào)的窘境。其實(shí)卡通插畫也是功能點(diǎn)擊入口，只是換了一個形式，但是多樣的組合讓界面更豐盈。

十三、瀑布式的布局視覺風(fēng)

在圖片資源的需求場景中，瀑布式的布局很沉浸，方便用戶海量瀏覽。

花瓣官網(wǎng)用了菜單頂置，下面圖片內(nèi)容瀑布式陳列，瀏覽起來特別的舒適，視覺呈現(xiàn)也無比美觀。

十四、扁平功能圖標(biāo)配合 banner 圖的視覺風(fēng)

超質(zhì)感 banner 圖與簡潔圖標(biāo)的結(jié)合，畫面有對比、有節(jié)奏。

釘釘塔，頭部運(yùn)用了立體的的質(zhì)感圖形場景，下面運(yùn)用極簡的扁平圖標(biāo)，質(zhì)感對比強(qiáng)烈，大小面積對比強(qiáng)烈，畫面布局很舒適。

十五、樂趣式表達(dá)，讓界面更有趣

B 端產(chǎn)品也可以很好玩、很有趣，同時兼顧功能的表達(dá)。

釘釘應(yīng)用中心，界面用 2.5D 的方式再配合動效表達(dá)，呈現(xiàn)出車水馬龍的熱鬧景象，很有生活的氣息，同時將釘釘?shù)膽?yīng)用全部呈現(xiàn)，表達(dá)了釘釘應(yīng)用的豐富。

十六、疊加式卡片 banner 輪播

疊加式的 banner 輪播，讓用戶感受到豐富的可能性。

CCtalk 首頁應(yīng)用了疊加式的 banner 輪播，讓用戶感受到廣告的豐富性及頁面的豐富性，頁面下邊應(yīng)用簡潔的疊加色塊圖標(biāo),打造出了別樣的視覺風(fēng)格，在設(shè)計形式上，banner 和圖標(biāo)都運(yùn)用疊加式，表達(dá)形式很統(tǒng)一。

十七、影視粒子動效的視覺應(yīng)用

運(yùn)用飛濺的粒子動效，從外往里走的視覺非常的震撼，視覺引導(dǎo)比較強(qiáng)烈，這種視覺效果經(jīng)常出現(xiàn)在電影中，應(yīng)用在 B 端中，也是別有一番風(fēng)味。

天翼云在中國電信算力套餐的推廣中，應(yīng)用了飛濺的光束動效，很耀眼，成功的吸引了用戶的注意力，為活動推廣做了很好的助力。

十八、沉浸式的氛圍運(yùn)營

運(yùn)用簡潔的幾何體、線條、飄帶、圖標(biāo)、光束、微動效，可以營造出熱鬧豐富的視覺效果。

天翼云在云端翼購節(jié)中，運(yùn)用了簡潔的飄帶形式、圖標(biāo)、光束動效，再配以明亮的色彩，讓購物節(jié)的氛圍瞬間靈動起來，同時也不乏科技感，設(shè)計感滿滿，朝氣感滿滿。

十九、跟隨鼠動的視覺風(fēng)格

當(dāng)鼠標(biāo)在頁面中滑動時，頁面中的元素也跟著鼠標(biāo)一起動起來，這種互動感和交流感大大增強(qiáng)。

Bilibili 在首頁菜單欄處，融入一張可以跟隨鼠標(biāo)大幅度動起來的漫畫，讓人眼前一亮，趣味性和互動感提升很多。

二十、大場景 3D 建模視覺風(fēng)的應(yīng)用

在首頁運(yùn)用全域場景的建模，配合適度的微動效，也會給界面帶來耳目一新的視覺體驗(yàn)。

嘉為藍(lán)鯨的 PC 端界面，特別的吸睛，完全打破了傳統(tǒng) B 端界面中規(guī)中矩的樣子，現(xiàn)代、時尚、震撼、有序，大大提升了用戶的視覺體驗(yàn)。

總結(jié)

探索 B 端界面多樣性，是我的需求，也是很多 B 端設(shè)計從業(yè)者的需求，通過大量的分析、體驗(yàn)、探索，我發(fā)現(xiàn)其實(shí) B 端產(chǎn)品也是這么的豐富多彩，它的表現(xiàn)手法也不拘泥，有時候也是那么的大膽、奔放，給用戶很多驚喜，也給設(shè)計從業(yè)者的我?guī)砹撕芏囔`感的碰撞，以及思維的啟發(fā)，設(shè)計永遠(yuǎn)沒有最好的，只有更好的。

本文觀點(diǎn)都為個人理解和總結(jié)，不足之處也歡迎大家留言區(qū)多多點(diǎn)評指正，大家共同進(jìn)步！

作者：姝斐suphie