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

相關(guān)干貨：

一、在首頁(yè)中添加微動(dòng)的背景元素

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

九、簡(jiǎn)潔扁平插畫(huà)的應(yīng)用風(fēng)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

十六、疊加式卡片 banner 輪播

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

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

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

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

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

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

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

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

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

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

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

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

在首頁(yè)運(yùn)用全域場(chǎng)景的建模，配合適度的微動(dòng)效，也會(huì)給界面帶來(lái)耳目一新的視覺(jué)體驗(yàn)。

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

總結(jié)

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

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