2026-5-26 清陽(yáng) 行業(yè)趨勢(shì)
因此今天蘭亭妙微UI設(shè)計(jì)公司，來(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)行理解。
我們把時(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è)原因：
關(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ì)的要求也在逐漸變高。
我們將時(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)中的基本信息。
我們的時(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ì)的下限～
我們隨后將時(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)原因：
現(xiàn)在還會(huì)使用新擬態(tài)風(fēng)格的界面設(shè)計(jì)越來(lái)越少，大多數(shù)只會(huì)在官網(wǎng)設(shè)計(jì)的局部進(jìn)行使用，這樣可以轉(zhuǎn)換視覺(jué)感受，給到用戶(hù)更好的視覺(jué)沖擊～
時(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è)原因
關(guān)于設(shè)計(jì)風(fēng)格，我們這篇只是講解了過(guò)去的風(fēng)格內(nèi)容，下篇文章我們講解當(dāng)前整個(gè) B 端產(chǎn)品的設(shè)計(jì)梳理，講解了更為重要的四種風(fēng)格。
轉(zhuǎn)載：優(yōu)設(shè)
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.aknz.cn 是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.aknz.cn