今天我們來(lái)講解 B 端産品界面的(de)視(shì)覺風(fēng)格，聊聊在整個(gè)行(xíng)業(yè)當中視(shì)覺風(fēng)格★的(de)變化(huà)與目前的(de)現(xiàn)狀。以及給大(dà)家(jiā)說(shuō)說(shuō)未來(lái)應該如(rú)何選擇自(zì&)己産品的(de)視(shì)覺風(fēng)格～

我們會(huì)将整體(tǐ)分(fēn)為(wèi)行(xíng)業(yè)初期，萌芽期、成長(cháng)期、野♣蠻發展期、新階段 ，每一(yī)個(gè)階段給大(dà)家(jiā)總結一(yī)個(gè)最為(wèi)流行(xíng)的(de)風(fēng)格，并分(fēn)α析這(zhè)個(gè)風(fēng)格出現(xiàn)的(de)原因，方便大(dà)家(jiā)進行(xíng)理(lǐ)解。

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

我們把時(shí)間(jiān)拉回到(dào) 2012 年(nián)。在那(nà)時(shí)，Ant Design 還(hái)沒&有(yǒu)出現(xiàn)，也(yě)沒有(yǒu)什(shén)麽 Element、Semi Design，行(xíng)業(yè)當中最早的 (de) B 端系統都(dōu)是(shì)以客戶端的(de)形式進行(xíng)呈現(xiàn)。

整體(tǐ)風(fēng)格也(yě)非常老(lǎo)舊(jiù)，像是(shì)那(nà)會(huì)兒(ér)的(de) Office、SεAP、Salesforce，你(nǐ)可(kě)以看(kàn)到(dào)都(dōu)是(shì)他(tā)們青澀的(de)模樣。

在經典傳統的(de)設計(jì)風(fēng)格當中，會(huì)使用(yòng)大(dà)面積的(de)白(bái©)色作(zuò)為(wèi)底色，同時(shí)在頁面中用(yòng)灰色進行(xíng)分(fēn)割，使得(deσ)整個(gè)頁面散亂搶眼，導緻整體(tǐ)的(de)視(shì)覺很(hěn)難被大(dà)衆所接受，總體(tǐ)感覺信息較散，難以進行(xíngσ)聚焦。

而在早期，出現(xiàn)這(zhè)些(xiē)老(lǎo)舊(jiù)風(fēng)格主要(yào)β有(yǒu)三個(gè)原因：

1. 技(jì)術(shù)框架限制(zhì)：因為(wèi)當中成熟的(de)前端框架較少(shǎo)，沒有(yǒu)太多(duō)技(j₽ì)術(shù)棧提供給到(dào)開(kāi)發進行(xíng)使用(yòng)，因此沒有(yǒu)精力将頁面做(zuò)得(de)漂亮(li€àng)

2. 認知(zhī)不(bù)足：設計(jì)師(shī)對(duì)于客戶端、網頁端的(de)設計(jì)理(lǐ)解認知(zhī)本身(shēn)不(bù)<夠，做(zuò)得(de)較為(wèi)粗糙，比如(rú)當時(shí)的(de) Office 的(de)界面設計(jì)也(yě)大(dà)緻是(shì)如(rú)此的(↕de)模樣

3. 風(fēng)格一(yī)緻：早期 Windows 系統就(jiù)是(shì)這(zhè)樣的(de)風(fēng)格，與 Windows 一(yī)緻更容易被大(d<à)衆所接受，因此就(jiù)很(hěn)難進行(xíng)創新

關于這(zhè)類風(fēng)格的(de)産品，大(dà)家(jiā)不(bù)要(yào)覺得(de)這(zhè)誇張，其實在目前依舊(jiù)有(yǒu)很π(hěn)多(duō)産品會(huì)延續這(zhè)個(gè)風(fēng)格。比如(rú) 醫(yī)療類産品、工(gōng)業(yè)生(shēng)産類系統，對(duì)于他&(tā)們而言，能(néng)用(yòng)即可(kě)，不(bù)必糾結太多(duō)。

但(dàn)随著(zhe)時(shí)間(jiān)的(de)推移，行(xíng)業(yè)中對(duì)于 B 端設計(jì)的(de)要(yào)求也β(yě)在逐漸變高(gāo)。

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

我們将時(shí)間(jiān)推移到(dào) 2015 年(nián)前後，随著(zhe)行(xíng)業(yè)不(bù)斷發展，在國(guó)外(w¥ài) Fiori、Salesforce 的(de)出現(xiàn)讓大(dà)家(jiā)意識到(dào)，這(zhè)類型的(de) B ©端産品也(yě)是(shì)需要(yào)設計(jì)的(de)。

因此國(guó)內(nèi)外(wài)的(de)很(hěn)多(duō)系統都(dōu)是(shì)在這(zhè)≥一(yī)時(shí)間(jiān)面世，像是(shì) Ant Design、Element 都(dōu)相 (xiàng)繼發布。

由于這(zhè)些(xiē)設計(jì)系統的(de)誕生(shēng)，你(nǐ)會(huì)發現(xiàn)大(dà)家(jiā)®對(duì)于整個(gè) B 端設計(jì)有(yǒu)了(le)一(yī)點自(zì)己的(de)想法。

在設計(jì)上(shàng)，會(huì)去(qù)考慮使用(yòng) 區(qū)塊劃分(fēn)，&将整個(gè)頁面進行(xíng)規整呈現(xiàn)。

比如(rú) SAP 在使用(yòng)了(le) Fiori 過後，就(jiù)會(huì)使整個(gè)界面更幹淨。

同樣非常老(lǎo)牌的(de) Salesforce 在 2015 年(nián)的(de)時(shí)候。也(yě)帶來(lái)了(le)相(xiàng)當大(dà)的(d₹e)視(shì)覺變化(huà)。整體(tǐ)都(dōu)能(néng)感受到(dào)，整個(gèφ)頁面會(huì)通(tōng)過不(bù)斷的(de)分(fēn)層、顔色的(de)劃分(fēn)、通(tōng)過黑(₩hēi)白(bái)灰的(de)方式去(qù)呈現(xiàn)頁面當中的(de)基本信息。

三、成長(cháng)期-沉穩側黑(hēi)風(fēng)

我們的(de)時(shí)間(jiān)來(lái)到(dào) 2018 年(nián)前後，在這(zhè)個(gè)時(shí)間(jiān)節點，很(hěn)多(duō)産品都(d<ōu)推出了(le)自(zì)己的(de)設計(jì)系統，對(duì)于 B 端設計(jì)風(fēng)格而言，也>(yě)會(huì)提出更高(gāo)的(de)要(yào)求。

比如(rú) Teambition 産品當中，它們提供了(le)自(zì)己的(de)設計(jì)系統的(d↑e)內(nèi)容去(qù)指導整個(gè)産品來(lái)進行(xíng)叠代和(hé)優化(huà)。同樣 Ant Design 它們也(yě)推→出了(le)自(zì)己的(de) Ant Design Pro 來(lái)演示使用(yòng)設計(jì)系統過後，能(néng)夠搭建出什(shén)麽樣的(de)産品。↓

同樣，這(zhè)個(gè)時(shí)段很(hěn)多(duō)産品也(yě)開(kāi)始進行(xíng)自(zì)己産品的(de)視(shì)覺優化(huà)，這(zhè)時(‍shí)候整體(tǐ)的(de)風(fēng)格是(shì)以：黑(hēi)色側邊導航為(wèi)主，然後內(nèi)容形态進行(xíng)延展。

比如(rú)像有(yǒu)贊、Coding、微(wēi)盟、飛(fēi)書(shū)，之前都(dōu)是(shì)這(zhè)樣的(de)設計(jì)風(fαēng)格來(lái)進行(xíng)呈現(xiàn)。

你(nǐ)會(huì)發現(xiàn)它們在整體(tǐ)的(de)設計(jì)上(shàng)都(dōu)會(huì)更加重視(shì)頁面的(de)分(fēn)塊顔≤色的(de)區(qū)隔，整體(tǐ)頁面的(de)識别效率。同時(shí)這(zhè)段時(shí)間(jiān)爆發出來(lái)非常多(duō)的(de) B 端産品，随後國δ(guó)內(nèi)都(dōu)會(huì)按照(zhào)側邊黑(hēi)色導航的(de)樣式進行(xíng)進一(yī)步設計(jì)，這(zhè)一(yī)定程度上(shànλg)提高(gāo)了(le)國(guó)內(nèi) B 端設計(jì)的(de)下(xià)限～

四、野蠻發展期-新拟态風(fēng)

我們随後将時(shí)間(jiān)推移到(dào) 2019 年(nián)後，在這(zhè)時(shí)誕生(shēng)了(l✘e)新拟态設計(jì)風(fēng)格。

它最早是(shì)烏克蘭設計(jì)師(shī) Alexander Plyuto 在追波和(hé) ins 發布的(de)一(yī)♠副系列作(zuò)品，随後大(dà)家(jiā)發現(xiàn)非常奇特，所以得(de)到(dào)廣泛的(de)關注。

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

随後就(jiù)會(huì)有(yǒu)很(hěn)多(duō)産品都(dōu)開(kāi)始進行(xíng)跟進，比如(rú) 智能"(néng)家(jiā)居的(de)産品、金(jīn)融類産品都(dōu)有(yǒu)所涉及，甚至很(hěn)多(duō) B 端産品也(yě)勇☆敢嘗試，但(dàn)大(dà)多(duō)數(shù)設計(jì)師(shī)設計(jì)完過後，整體(tǐ)評價都(dōu)不(bù)算(suàn)太高(gāo)。

為(wèi)什(shén)麽沒有(yǒu)大(dà)規模的(de)推行(xíng)，我覺得(de)有(yǒu) 3 點原因：

1. 因為(wèi)新拟态風(fēng)格整體(tǐ)所占面積較大(dà)，比較浪費(fèi)空(kōng)間(jiān)。‍像是(shì)一(yī)個(gè)按鈕，都(dōu)需要(yào)使用(yòng)較大(dà)空(kōng)間(jiān)才能(nén₹g)呈現(xiàn)。

2. 需要(yào)大(dà)面積的(de)留白(bái)，但(dàn)是(shì)對(duì)于 B 端設計(jì)來(lái)說(shuō)無法做(zuò)到(dào)，因此很(hěn≥)難進行(xíng)使用(yòng)。

3. 同時(shí)很(hěn)多(duō)用(yòng)戶剛開(kāi)始覺得(de)好(hǎo)看(kàn)，但(dàn)随著(≥zhe)時(shí)間(jiān)的(de)推移，出現(xiàn)審美(měi)疲勞，因此就(jiù)不(bù)太喜歡。

現(xiàn)在還(hái)會(huì)使用(yòng)新拟态風(fēng)格的(de)界面設計(jì)越來(lái)越少(shǎo)，大(dà)↔多(duō)數(shù)隻會(huì)在官網設計(jì)的(de)局部進行(xíng)使用(yòng)，這‍(zhè)樣可(kě)以轉換視(shì)覺感受，給到(dào)用(yòng)戶更好(hǎo)的(de)視(shì)覺沖擊～

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

時(shí)間(jiān)來(lái)到(dào) 2022-2024 年(nián)左右，你(nǐ)會(huì)發現(xiàn)很(hěn)多(duō)産品都(dōu€)開(kāi)始在這(zhè)個(gè)時(shí)間(jiān)節點進行(xíng)更新。

像我們熟知(zhī)的(de) 飛(fēi)書(shū)、有(yǒu)贊、微(wēi)盟、ONES、Coding，再到(dào) Ant Design、Sale↑sforce，你(nǐ)會(huì)發現(xiàn)非常多(duō)的(de)産品都(dōu)在進行(xíng)界面風(fēng)格上(shàβng)的(de)叠代。

對(duì)于這(zhè)個(gè)風(fēng)格，我們願意叫它為(wèi) 灰白(bái)風(fēng)。

整體(tǐ)頁面是(shì)以 灰色和(hé)白(bái)色 進行(xíng)的(de)頁面劃分(fēn)，在分(fēn)布上(shàng)灰色占據弱側信息，白(bái)色占β據核心信息，進而形成對(duì)頁面內(nèi)容的(de)劃分(fēn)。

聊到(dào)這(zhè)裡(lǐ)，可(kě)能(néng)有(yǒu)部分(fēn)同學不(bù)太理(lǐ)解，這(zhè)裡(lǐ)我們以飛( fēi)書(shū)管理(lǐ)後台的(de)叠代作(zuò)為(wèi)示例，給大(dà)家(jiā)進行(xíng)講解。

在 2018 年(nián)，飛(fēi)書(shū)管理(lǐ)後台的(de)第一(yī)個(gè)版本，采取的(de)就(jiù)是(shì)沉穩側黑(hēi)風(fēng)，

在 2022 年(nián)，飛(fēi)書(shū)的(de)管理(lǐ)後台開(kāi)始改變為(wèi)灰白(bái)風(fēng)格

由于業(yè)務的(de)疊加，2023 年(nián)時(shí)，在此基礎上(shàng)增加了(le)頂部導航的(de)業(yè)務維度，最終形成了(le÷)現(xiàn)在這(zhè)樣的(de)界面。

為(wèi)什(shén)麽這(zhè)類型的(de)風(fēng)格會(huì)大(dà)受追捧，我覺得(de)有(yǒu)以下(xià)≥幾個(gè)原因

1. 減少(shǎo)信息層級，給用(yòng)戶減負：之前沉穩側黑(hēi)風(fēng)格，會(huì)發現(xiàn)頁面明(míng)顯進行(xíng)大(dà)面積的(de)'分(fēn)割，導緻視(shì)覺感受出現(xiàn)較大(dà)差異。現(xiàn)在隻用(yòng)灰色作(zuò)為(wèi)底，去(qù)區(qū)分(fēn)主副π信息這(zhè)樣會(huì)更簡單的(de)突出主要(yào)信息內(nèi)容。

2. 平台型産品更容易嵌入：因為(wèi)國(guó)內(nèi) B 端産品大(dà)多(duō)需要(yào)依附“釘釘、企微(wēi)、飛(fēi)書(shū)”三大(dà)平台，因 此使用(yòng)灰白(bái)風(fēng)能(néng)夠讓自(zì)己産品快(kuài)速嵌入，不(bù)需Ω要(yào)過多(duō)調整。如(rú)果你(nǐ)的(de)産品是(shì)沉穩側黑(hēi)風(fēng)，那(nà)結果想都(dōu)不(bù)敢想...

3. 更容易進行(xíng)适配：針對(duì)多(duō)産品的(de)業(yè)務，也(yě)能(néng)夠使用(yòng)同一(yī)套業(yè)務完整呈現(xiàn)才會(huλì)更加合理(lǐ)。比如(rú)飛(fēi)書(shū)的(de)灰白(bái)風(fēng)，在飛(fēi)書(shū)的(de)其他(tā)很(hěn)₽多(duō)産品裡(lǐ)面也(yě)會(huì)存在

關于設計(jì)風(fēng)格，我們這(zhè)篇隻是(shì)講解了(le)過去(qù)的(de)風(fēng)格內(nèi)容，下(xià)篇文(wΩén)章(zhāng)我們講解當前整個(gè) B 端産品的(de)設計(jì)梳理(lǐ)，講解了(le)更為(wèi)重要(yào)的(de)四種風(fēngφ)格。

【轉載：CE青年(nián)Youthce】