超全梳理！B端產品設計風格的5個階段

在前兩篇文章當中，我們聊到了色彩空間以及顏色具體的設定：

但是你了解了這些依舊不夠，不能做出一個優秀的 B 端界面。

因此今天我們來講解 B 端產品界面的視覺風格，聊聊在整個行業當中視覺風格的變化與目前的現狀。以及給大家說說未來應該如何選擇自己產品的視覺風格～

我們會將整體分為行業初期，萌芽期、成長期、野蠻發展期、新階段 ，每一個階段給大家總結一個最為流行的風格，并分析這個風格出現的原因，方便大家進行理解。

一、行業初期-經典傳統風

我們把時間拉回到 2012 年。在那時，Ant Design 還沒有出現，也沒有什么 Element、Semi Design，行業當中最早的 B 端系統都是以客戶端的形式進行呈現。

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

在經典傳統的設計風格當中，會使用大面積的白色作為底色，同時在頁面中用灰色進行分割，使得整個頁面散亂搶眼，導致整體的視覺很難被大眾所接受，總體感覺信息較散，難以進行聚焦。

而在早期，出現這些老舊風格主要有三個原因：

1. 技術框架限制：因為當中成熟的前端框架較少，沒有太多技術棧提供給到開發進行使用，因此沒有精力將頁面做得漂亮
2. 認知不足：設計師對于客戶端、網頁端的設計理解認知本身不夠，做得較為粗糙，比如當時的 Office 的界面設計也大致是如此的模樣
3. 風格一致：早期 Windows 系統就是這樣的風格，與 Windows 一致更容易被大眾所接受，因此就很難進行創新

關于這類風格的產品，大家不要覺得這夸張，其實在目前依舊有很多產品會延續這個風格。比如 醫療類產品、工業生產類系統，對于他們而言，能用即可，不必糾結太多。

但隨著時間的推移，行業中對于 B 端設計的要求也在逐漸變高。

二、萌芽期-清爽整潔風

我們將時間推移到 2015 年前后，隨著行業不斷發展，在國外 Fiori、Salesforce 的出現讓大家意識到，這類型的 B 端產品也是需要設計的。

因此國內外的很多系統都是在這一時間面世，像是 Ant Design、Element 都相繼發布。

由于這些設計系統的誕生，你會發現大家對于整個 B 端設計有了一點自己的想法。

在設計上，會去考慮使用 區塊劃分，將整個頁面進行規整呈現。

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

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

三、成長期-沉穩側黑風

我們的時間來到 2018 年前后，在這個時間節點，很多產品都推出了自己的設計系統，對于 B 端設計風格而言，也會提出更高的要求。

比如 Teambition 產品當中，它們提供了自己的設計系統的內容去指導整個產品來進行迭代和優化。同樣 Ant Design 它們也推出了自己的 Ant Design Pro 來演示使用設計系統過后，能夠搭建出什么樣的產品。

同樣，這個時段很多產品也開始進行自己產品的視覺優化，這時候整體的風格是以：黑色側邊導航為主，然后內容形態進行延展。

比如像有贊、Coding、微盟、飛書，之前都是這樣的設計風格來進行呈現。

你會發現它們在整體的設計上都會更加重視頁面的分塊顏色的區隔，整體頁面的識別效率。同時這段時間爆發出來非常多的 B 端產品，隨后國內都會按照側邊黑色導航的樣式進行進一步設計，這一定程度上提高了國內 B 端設計的下限～

四、野蠻發展期-新擬態風

我們隨后將時間推移到 2019 年后，在這時誕生了新擬態設計風格。

它最早是烏克蘭設計師 Alexander Plyuto 在追波和 ins 發布的一副系列作品，隨后大家發現非常奇特，所以得到廣泛的關注。

新擬態的設計風格是以立體效果與浮雕元素，呈現更為三維立體的效果，會給人一種奇特、夢幻的界面體驗。

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

為什么沒有大規模的推行，我覺得有 3 點原因：

1. 因為新擬態風格整體所占面積較大，比較浪費空間。像是一個按鈕，都需要使用較大空間才能呈現。
2. 需要大面積的留白，但是對于 B 端設計來說無法做到，因此很難進行使用。
3. 同時很多用戶剛開始覺得好看，但隨著時間的推移，出現審美疲勞，因此就不太喜歡。

現在還會使用新擬態風格的界面設計越來越少，大多數只會在官網設計的局部進行使用，這樣可以轉換視覺感受，給到用戶更好的視覺沖擊～

五、新階段-灰白風

時間來到 2022-2024 年左右，你會發現很多產品都開始在這個時間節點進行更新。

像我們熟知的 飛書、有贊、微盟、ONES、Coding，再到 Ant Design、Salesforce，你會發現非常多的產品都在進行界面風格上的迭代。

對于這個風格，我們愿意叫它為 灰白風。

整體頁面是以 灰色和白色 進行的頁面劃分，在分布上灰色占據弱側信息，白色占據核心信息，進而形成對頁面內容的劃分。

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

在 2018 年，飛書管理后臺的第一個版本，采取的就是沉穩側黑風，

在 2022 年，飛書的管理后臺開始改變為灰白風格

由于業務的疊加，2023 年時，在此基礎上增加了頂部導航的業務維度，最終形成了現在這樣的界面。

為什么這類型的風格會大受追捧，我覺得有以下幾個原因

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

關于設計風格，我們這篇只是講解了過去的風格內容，下篇文章我們講解當前整個 B 端產品的設計梳理，講解了更為重要的四種風格。

歡迎關注作者的微信公眾號： CE青年Youthce