B端產(chǎn)品的設(shè)計(jì)風(fēng)格在不斷演變，從早期的經(jīng)典傳統(tǒng)風(fēng)到如今的灰白風(fēng)，每一個(gè)階段都反映了行業(yè)的發(fā)展和用戶(hù)需求的變化。本文將回顧B端產(chǎn)品設(shè)計(jì)風(fēng)格的演變歷程，分析每個(gè)階段的流行風(fēng)格及其背后的原因，幫助設(shè)計(jì)師更好地理解當(dāng)前的設(shè)計(jì)趨勢(shì)，并為未來(lái)的設(shè)計(jì)選擇提供參考。

在前兩篇文章當(dāng)中，我們聊到了色彩空間以及顏色具體的設(shè)定。但是你了解了這些依舊不夠，不能做出一個(gè)優(yōu)秀的 B 端界面。

因此今天我們來(lái)講解 B 端產(chǎn)品界面的視覺(jué)風(fēng)格，聊聊在整個(gè)行業(yè)當(dāng)中視覺(jué)風(fēng)格的變化與目前的現(xiàn)狀。以及給大家說(shuō)說(shuō)未來(lái)應(yīng)該如何選擇自己產(chǎn)品的視覺(jué)風(fēng)格～

我們會(huì)將整體分為行業(yè)初期，萌芽期、成長(zhǎng)期、野蠻發(fā)展期、新階段 ，每一個(gè)階段給大家總結(jié)一個(gè)最為流行的風(fēng)格，并分析這個(gè)風(fēng)格出現(xiàn)的原因，方便大家進(jìn)行理解。

一、行業(yè)初期-經(jīng)典傳統(tǒng)風(fēng)

我們把時(shí)間拉回到 2012 年。在那時(shí)，Ant Design 還沒(méi)有出現(xiàn)，也沒(méi)有什么 Element、Semi Design，行業(yè)當(dāng)中最早的 B 端系統(tǒng)都是以客戶(hù)端的形式進(jìn)行呈現(xiàn)。

整體風(fēng)格也非常老舊，像是那會(huì)兒的 Office、SAP、Salesforce，你可以看到都是他們青澀的模樣。

在經(jīng)典傳統(tǒng)的設(shè)計(jì)風(fēng)格當(dāng)中，會(huì)使用大面積的白色作為底色，同時(shí)在頁(yè)面中用灰色進(jìn)行分割，使得整個(gè)頁(yè)面散亂搶眼，導(dǎo)致整體的視覺(jué)很難被大眾所接受，總體感覺(jué)信息較散，難以進(jìn)行聚焦。

而在早期，出現(xiàn)這些老舊風(fēng)格主要有三個(gè)原因：

1.技術(shù)框架限制：因?yàn)楫?dāng)中成熟的前端框架較少，沒(méi)有太多技術(shù)棧提供給到開(kāi)發(fā)進(jìn)行使用，因此沒(méi)有精力將頁(yè)面做得漂亮

2.認(rèn)知不足：設(shè)計(jì)師對(duì)于客戶(hù)端、網(wǎng)頁(yè)端的設(shè)計(jì)理解認(rèn)知本身不夠，做得較為粗糙，比如當(dāng)時(shí)的 Office 的界面設(shè)計(jì)也大致是如此的模樣

3.風(fēng)格一致：早期 Windows 系統(tǒng)就是這樣的風(fēng)格，與 Windows 一致更容易被大眾所接受，因此就很難進(jìn)行創(chuàng)新

關(guān)于這類(lèi)風(fēng)格的產(chǎn)品，大家不要覺(jué)得這夸張，其實(shí)在目前依舊有很多產(chǎn)品會(huì)延續(xù)這個(gè)風(fēng)格。比如 醫(yī)療類(lèi)產(chǎn)品、工業(yè)生產(chǎn)類(lèi)系統(tǒng)，對(duì)于他們而言，能用即可，不必糾結(jié)太多。

但隨著時(shí)間的推移，行業(yè)中對(duì)于 B 端設(shè)計(jì)的要求也在逐漸變高。

二、萌芽期-清爽整潔風(fēng)

我們將時(shí)間推移到 2015 年前后，隨著行業(yè)不斷發(fā)展，在國(guó)外 Fiori、Salesforce 的出現(xiàn)讓大家意識(shí)到，這類(lèi)型的 B 端產(chǎn)品也是需要設(shè)計(jì)的。

因此國(guó)內(nèi)外的很多系統(tǒng)都是在這一時(shí)間面世，像是 Ant Design 、Element 都相繼發(fā)布。

由于這些設(shè)計(jì)系統(tǒng)的誕生，你會(huì)發(fā)現(xiàn)大家對(duì)于整個(gè) B 端設(shè)計(jì)有了一點(diǎn)自己的想法。

在設(shè)計(jì)上，會(huì)去考慮使用 區(qū)塊劃分，將整個(gè)頁(yè)面進(jìn)行規(guī)整呈現(xiàn)。

比如 SAP 在使用了 Fiori 過(guò)后，就會(huì)使整個(gè)界面更干凈。

同樣非常老牌的 Salesforce 在2015年的時(shí)候。也帶來(lái)了相當(dāng)大的視覺(jué)變化。整體都能感受到，整個(gè)頁(yè)面會(huì)通過(guò)不斷的分層顏色的劃分通過(guò)黑白灰的方式去呈現(xiàn)頁(yè)面當(dāng)中的基本信息。

三、成長(zhǎng)期-沉穩(wěn)側(cè)黑風(fēng)

我們的時(shí)間來(lái)到 2018 年前后，在這個(gè)時(shí)間節(jié)點(diǎn)，很多產(chǎn)品都推出了自己的設(shè)計(jì)系統(tǒng)，對(duì)于 B 端設(shè)計(jì)風(fēng)格而言，也會(huì)提出更高的要求。

比如 Teambition 產(chǎn)品當(dāng)中，它們提供了自己的設(shè)計(jì)系統(tǒng)的內(nèi)容去指導(dǎo)整個(gè)產(chǎn)品來(lái)進(jìn)行迭代和優(yōu)化。同樣 Ant Design它們也推出了自己的 Ant Design Pro 來(lái)演示使用設(shè)計(jì)系統(tǒng)過(guò)后，能夠搭建出什么樣的產(chǎn)品。

同樣，這個(gè)時(shí)段很多產(chǎn)品也開(kāi)始進(jìn)行自己產(chǎn)品的視覺(jué)優(yōu)化，這時(shí)候整體的風(fēng)格是以：黑色側(cè)邊導(dǎo)航為主，然后內(nèi)容形態(tài)進(jìn)行延展。

比如像有贊、Coding、微盟、飛書(shū)，之前都是這樣的設(shè)計(jì)風(fēng)格來(lái)進(jìn)行呈現(xiàn)。

你會(huì)發(fā)現(xiàn)它們?cè)谡w的設(shè)計(jì)上都會(huì)更加重視頁(yè)面的分塊顏色的區(qū)隔，整體頁(yè)面的識(shí)別效率。同時(shí)這段時(shí)間爆發(fā)出來(lái)非常多的 B 端產(chǎn)品，隨后國(guó)內(nèi)都會(huì)按照側(cè)邊黑色導(dǎo)航的樣式進(jìn)行進(jìn)一步設(shè)計(jì)，這一定程度上提高了國(guó)內(nèi) B 端設(shè)計(jì)的下限～

四、野蠻發(fā)展期-新擬態(tài)風(fēng)

我們隨后將時(shí)間推移到 2019 年后，在這時(shí)誕生了新擬態(tài)設(shè)計(jì)風(fēng)格。

它最早是烏克蘭設(shè)計(jì)師 Alexander Plyuto 在追波和 ins 發(fā)布的一副系列作品，隨后大家發(fā)現(xiàn)非常奇特，所以得到廣泛的關(guān)注。

新擬態(tài)的設(shè)計(jì)風(fēng)格是以立體效果與浮雕元素，呈現(xiàn)更為三維立體的效果，會(huì)給人一種奇特、夢(mèng)幻的界面體驗(yàn)。

隨后就會(huì)有很多產(chǎn)品都開(kāi)始進(jìn)行跟進(jìn)，比如 智能家居的產(chǎn)品、金融類(lèi)產(chǎn)品都有所涉及，甚至很多B端產(chǎn)品也勇敢嘗試，但大多數(shù)設(shè)計(jì)師設(shè)計(jì)完過(guò)后，整體評(píng)價(jià)都不算太高。

為什么沒(méi)有大規(guī)模的推行，我覺(jué)得有 3 點(diǎn)原因：

1.因?yàn)樾聰M態(tài)風(fēng)格整體所占面積較大，比較浪費(fèi)空間。像是一個(gè)按鈕，都需要使用較大空間才能呈現(xiàn)。

2.需要大面積的留白，但是對(duì)于 B 端設(shè)計(jì)來(lái)說(shuō)無(wú)法做到，因此很難進(jìn)行使用。

3.同時(shí)很多用戶(hù)剛開(kāi)始覺(jué)得好看，但隨著時(shí)間的推移，出現(xiàn)審美疲勞，因此就不太喜歡。

現(xiàn)在還會(huì)使用新擬態(tài)風(fēng)格的界面設(shè)計(jì)越來(lái)越少，大多數(shù)只會(huì)在官網(wǎng)設(shè)計(jì)的局部進(jìn)行使用，這樣可以轉(zhuǎn)換視覺(jué)感受，給到用戶(hù)更好的視覺(jué)沖擊～

五、新階段-灰白風(fēng)

時(shí)間來(lái)到 2022-2024 年左右，你會(huì)發(fā)現(xiàn)很多產(chǎn)品都開(kāi)始在這個(gè)時(shí)間節(jié)點(diǎn)進(jìn)行更新。

像我們熟知的 飛書(shū)、有贊、微盟、ONES、Coding，再到 Ant Design 、Salesforce，你會(huì)發(fā)現(xiàn)非常多的產(chǎn)品都在進(jìn)行界面風(fēng)格上的迭代。

對(duì)于這個(gè)風(fēng)格，我們?cè)敢饨兴鼮?灰白風(fēng)。

整體頁(yè)面是以 灰色和白色 進(jìn)行的頁(yè)面劃分，在分布上灰色占據(jù)弱側(cè)信息，白色占據(jù)核心信息，進(jìn)而形成對(duì)頁(yè)面內(nèi)容的劃分。

聊到這里，可能有部分同學(xué)不太理解，這里我們以飛書(shū)管理后臺(tái)的迭代作為示例，給大家進(jìn)行講解。

在 2018年，飛書(shū)管理后臺(tái)的第一個(gè)版本，采取的就是沉穩(wěn)側(cè)黑風(fēng)，

在 2022 年，飛書(shū)的管理后臺(tái)開(kāi)始改變?yōu)榛野罪L(fēng)格

由于業(yè)務(wù)的疊加，2023 年時(shí)，在此基礎(chǔ)上增加了頂部導(dǎo)航的業(yè)務(wù)維度，最終形成了現(xiàn)在這樣的界面。

為什么這類(lèi)型的風(fēng)格會(huì)大受追捧，我覺(jué)得有以下幾個(gè)原因

1.減少信息層級(jí)，給用戶(hù)減負(fù)：之前沉穩(wěn)側(cè)黑風(fēng)格，會(huì)發(fā)現(xiàn)頁(yè)面明顯進(jìn)行大面積的分割，導(dǎo)致視覺(jué)感受出現(xiàn)較大差異?，F(xiàn)在只用灰色作為底，去區(qū)分主副信息這樣會(huì)更簡(jiǎn)單的突出主要信息內(nèi)容。

2.平臺(tái)型產(chǎn)品更容易嵌入：因?yàn)閲?guó)內(nèi) B 端產(chǎn)品大多需要依附“釘釘、企微、飛書(shū)”三大平臺(tái)，因此使用灰白風(fēng)能夠讓自己產(chǎn)品快速嵌入，不需要過(guò)多調(diào)整。如果你的產(chǎn)品是沉穩(wěn)側(cè)黑風(fēng)，那結(jié)果想都不敢想…

3.更容易進(jìn)行適配：針對(duì)多產(chǎn)品的業(yè)務(wù)，也能夠使用同一套業(yè)務(wù)完整呈現(xiàn)才會(huì)更加合理。比如飛書(shū)的灰白風(fēng)，在飛書(shū)的其他很多產(chǎn)品里面也會(huì)存在

關(guān)于設(shè)計(jì)風(fēng)格，我們這篇只是講解了過(guò)去的風(fēng)格內(nèi)容，