在前兩篇文章當(dāng)中，我們聊到了色彩空間以及顏色具體的設(shè)定：

但是你了解了這些依舊不夠，不能做出一個(gè)優(yōu)秀的 B 端界面。

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

我們會將整體分為行業(yè)初期，萌芽期、成長期、野蠻發(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 還沒有出現(xiàn)，也沒有什么 Element、Semi Design，行業(yè)當(dāng)中最早的 B 端系統(tǒng)都是以客戶端的形式進(jìn)行呈現(xiàn)。

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

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

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

1. 技術(shù)框架限制：因?yàn)楫?dāng)中成熟的前端框架較少，沒有太多技術(shù)棧提供給到開發(fā)進(jìn)行使用，因此沒有精力將頁面做得漂亮
2. 認(rèn)知不足：設(shè)計(jì)師對于客戶端、網(wǎng)頁端的設(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)于這類風(fēng)格的產(chǎn)品，大家不要覺得這夸張，其實(shí)在目前依舊有很多產(chǎn)品會延續(xù)這個(gè)風(fēng)格。比如 醫(yī)療類產(chǎn)品、工業(yè)生產(chǎn)類系統(tǒng)，對于他們而言，能用即可，不必糾結(jié)太多。

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

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

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

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

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

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

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

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

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

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

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

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

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

你會發(fā)現(xiàn)它們在整體的設(shè)計(jì)上都會更加重視頁面的分塊顏色的區(qū)隔，整體頁面的識別效率。同時(shí)這段時(shí)間爆發(fā)出來非常多的 B 端產(chǎn)品，隨后國內(nèi)都會按照側(cè)邊黑色導(dǎo)航的樣式進(jìn)行進(jìn)一步設(shè)計(jì)，這一定程度上提高了國內(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)更為三維立體的效果，會給人一種奇特、夢幻的界面體驗(yàn)。

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

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

1. 因?yàn)樾聰M態(tài)風(fēng)格整體所占面積較大，比較浪費(fèi)空間。像是一個(gè)按鈕，都需要使用較大空間才能呈現(xiàn)。
2. 需要大面積的留白，但是對于 B 端設(shè)計(jì)來說無法做到，因此很難進(jìn)行使用。
3. 同時(shí)很多用戶剛開始覺得好看，但隨著時(shí)間的推移，出現(xiàn)審美疲勞，因此就不太喜歡。

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

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

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

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

對于這個(gè)風(fēng)格，我們愿意叫它為 灰白風(fēng)。

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

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

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

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

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

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

1. 減少信息層級，給用戶減負(fù)：之前沉穩(wěn)側(cè)黑風(fēng)格，會發(fā)現(xiàn)頁面明顯進(jìn)行大面積的分割，導(dǎo)致視覺感受出現(xiàn)較大差異。現(xiàn)在只用灰色作為底，去區(qū)分主副信息這樣會更簡單的突出主要信息內(nèi)容。
2. 平臺型產(chǎn)品更容易嵌入：因?yàn)閲鴥?nèi) B 端產(chǎn)品大多需要依附“釘釘、企微、飛書”三大平臺，因此使用灰白風(fēng)能夠讓自己產(chǎn)品快速嵌入，不需要過多調(diào)整。如果你的產(chǎn)品是沉穩(wěn)側(cè)黑風(fēng)，那結(jié)果想都不敢想...
3. 更容易進(jìn)行適配：針對多產(chǎn)品的業(yè)務(wù)，也能夠使用同一套業(yè)務(wù)完整呈現(xiàn)才會更加合理。比如飛書的灰白風(fēng)，在飛書的其他很多產(chǎn)品里面也會存在

關(guān)于設(shè)計(jì)風(fēng)格，我們這篇只是講解了過去的風(fēng)格內(nèi)容，下篇文章我們講解當(dāng)前整個(gè) B 端產(chǎn)品的設(shè)計(jì)梳理，講解了更為重要的四種風(fēng)格。

歡迎關(guān)注作者的微信公眾號： CE青年Youthce