今天蘭亭妙微UI設(shè)計(jì)公司，來講解 B 端產(chǎn)品界面的視覺風(fēng)格，聊聊在整個(gè)行業(yè)當(dāng)中視覺風(fēng)格的變化與目前的現(xiàn)狀。以及給大家說說未來應(yīng)該如何選擇自己產(chǎn)品的視覺風(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 還沒有出現(xiàn)，也沒有什么 Element、Semi Design，行業(yè)當(dāng)中最早的 B 端系統(tǒng)都是以客戶端的形式進(jìn)行呈現(xiàn)。

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

在經(jīng)典傳統(tǒng)的設(shè)計(jì)風(fēng)格當(dāng)中，會(huì)使用大面積的白色作為底色，同時(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ì)師對(duì)于客戶端、網(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)品會(huì)延續(xù)這個(gè)風(fēng)格。比如 醫(yī)療類產(chǎn)品、工業(yè)生產(chǎn)類系統(tǒng)，對(duì)于他們而言，能用即可，不必糾結(jié)太多。

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

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

我們將時(shí)間推移到 2015 年前后，隨著行業(yè)不斷發(fā)展，在國(guó)外 Fiori、Salesforce 的出現(xiàn)讓大家意識(shí)到，這類型的 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è)頁面進(jìn)行規(guī)整呈現(xiàn)。

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

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

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

我們的時(shí)間來到 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)品來進(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)。

你會(huì)發(fā)現(xiàn)它們?cè)谡w的設(shè)計(jì)上都會(huì)更加重視頁面的分塊顏色的區(qū)隔，整體頁面的識(shí)別效率。同時(shí)這段時(shí)間爆發(fā)出來非常多的 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)品都開始進(jìn)行跟進(jìn)，比如 智能家居的產(chǎn)品、金融類產(chǎn)品都有所涉及，甚至很多B端產(chǎn)品也勇敢嘗試，但大多數(shù)設(shè)計(jì)師設(shè)計(jì)完過后，整體評(píng)價(jià)都不算太高。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.hengshangtqd.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。