B端產(chǎn)品的風(fēng)格梳理,整理了四個不同風(fēng)格趨勢!
在B端產(chǎn)品設(shè)計中,視覺風(fēng)格的選擇和應(yīng)用對于提升用戶體驗和品牌形象至關(guān)重要。本文將詳細(xì)介紹當(dāng)前B端產(chǎn)品設(shè)計中的四種主要風(fēng)格趨勢:頂黑風(fēng)、側(cè)黑風(fēng)、客戶端風(fēng)格和灰白風(fēng),供大家參考。
上篇文章,我們聊到了不同時間段的風(fēng)格趨勢,今天就來和大家說說視覺風(fēng)格上的具體差異,講講目前行業(yè)當(dāng)中的風(fēng)格趨勢。
我們會將其分為頂黑風(fēng)、側(cè)黑風(fēng)、客戶端、灰白風(fēng)。最后我們會根據(jù) “紅、橙、綠、藍(lán)” 四種顏色,分別推薦我認(rèn)為不錯的產(chǎn)品截圖,提供給大家進(jìn)行學(xué)習(xí)與借鑒。
文章圖片較多,大家可以截圖保存~
1.頂黑風(fēng):
頂黑風(fēng)強化頭部是通過深色背景,將頂部模塊進(jìn)行凸顯,用于表達(dá)頂部與下方內(nèi)容的關(guān)系。
通常對于頂部而言,是作為一級導(dǎo)航的形式,需要在頁面當(dāng)中進(jìn)行凸顯,所以才會使用深色將其強調(diào)。對于大多數(shù)的產(chǎn)品而言,因為頂部空間需要使用品牌色,再加上需要大面積展示,因此需要降低顏色飽和度。
比如在神策數(shù)據(jù)當(dāng)中,其品牌色原本是亮綠色,但因為需要在頂部處大面積使用,因此將品牌的明度減少、飽和度降低,才能應(yīng)付大面積使用的場景。通過這樣的設(shè)計風(fēng)格,可以解決以頂部為核心,側(cè)邊為輔助的產(chǎn)品架構(gòu)。
同樣有類似設(shè)計風(fēng)格的產(chǎn)品還有:騰訊云、小鵝通。
在設(shè)計上,部分情況我們可以使用漸變的方式,優(yōu)化它的整體呈現(xiàn)。
2.側(cè)黑風(fēng)
側(cè)黑風(fēng)強化側(cè)邊會和強化頂部的邏輯一樣,主要凸顯側(cè)邊的導(dǎo)航模塊,這也是我們在上篇文章當(dāng)中講到的側(cè)黑沉穩(wěn)風(fēng)。
這種設(shè)計風(fēng)格在國內(nèi)非常常見,不過隨著時間的推移,你會發(fā)現(xiàn)整體的設(shè)計細(xì)節(jié)也在發(fā)生變化。
最初我們會更為關(guān)注側(cè)邊與內(nèi)容的區(qū)分,因此呈現(xiàn)出來的風(fēng)格會較為固定。比如京東行云就會使用這樣的設(shè)計形式區(qū)分兩者內(nèi)容。
隨后想凸顯內(nèi)容模塊,導(dǎo)航上增加兩個圓角,就形成內(nèi)容的卡片模式,比如飛書的舊版本就會是這樣的設(shè)計風(fēng)格。
然后又會調(diào)整,針對側(cè)邊導(dǎo)航增加更多的漸變,讓其視覺風(fēng)格上進(jìn)行不斷地優(yōu)化。
最后我們還會考慮增加產(chǎn)品的底紋元素,讓整個導(dǎo)航提升更多的質(zhì)感。
3.客戶端
客戶端:通過較窄的寬度用于呈現(xiàn)較少的導(dǎo)航菜單數(shù)量,使得整個網(wǎng)頁更像一個客戶端,通常它在寬度的設(shè)定上不會超過 100px,顏色配色上會以藍(lán)色、深灰色為主。
很多研發(fā)管理型產(chǎn)品都會使用客戶端風(fēng)格的方式進(jìn)行呈現(xiàn)。比如飛蛾、workflow。
同時在導(dǎo)航數(shù)量較多時,可以考慮通過自定義的方式進(jìn)行配置。比如塵鋒、紛享銷客都可以提供給用戶進(jìn)行自定義。
這種風(fēng)格,大多數(shù)的產(chǎn)品最終的目的都是想封裝成為客戶端,通過這樣的風(fēng)格能減少開發(fā)成本。
那如果沒有類似需求,建議你就不要輕易使用這個風(fēng)格形式。
4.灰白風(fēng)
灰白風(fēng)通過頁面當(dāng)中的白色與灰色形成模塊分割,將次要信息用灰色弱化,使得用戶更偏向核心內(nèi)容區(qū)域。
這是目前最為流行的風(fēng)格,因為它的適配性強,無論你是什么品牌色,灰白風(fēng)都能輕松勝任。并且也能夠快速地封裝到第三方平臺當(dāng)中(因為國內(nèi)市場中,大多數(shù)的 B 端產(chǎn)品,都需要入駐上架到釘釘、企微、飛書上),嵌入進(jìn)去的整體形象依舊不錯。
同時針對各類型產(chǎn)品架構(gòu)都能輕松應(yīng)對,比如側(cè)邊導(dǎo)航、混合導(dǎo)航,都可以完全適配。
由于大家的品牌色其實并不相同,這里我們列舉了五種不同顏色的視覺風(fēng)格和對應(yīng)的競品界面,方便大家直接抄作業(yè)~
不同顏色的 B 端產(chǎn)品推薦
紅色:因為難以搭配,所以在顏色的設(shè)定上難度較高,這里推薦兩個產(chǎn)品。
百度愛番番,將紅色作為品牌色,在整個頁面當(dāng)中主要的提示信息部分都使用了紅色元素,比如主按鈕、導(dǎo)航菜單的選中狀態(tài)。
但在內(nèi)容的 hover 狀態(tài)、表單的 radio button 里依舊會使用藍(lán)色。(這里如果使用紅色就會過于離譜)所以即使是延續(xù)紅色,在很多需要顏色來提供交互的語義時,依舊只能使用藍(lán)色~
小紅書千帆,也是小紅書的商家平臺。在顏色上,除了 logo 會使用紅色之外,其他的頁面信息都會采取藍(lán)色的方式進(jìn)行。雖然這樣的設(shè)計會稍顯違和,但是至少能保證系統(tǒng)在眾多頁面當(dāng)中,不會遇到過多的麻煩。
橙色:作為暖色系當(dāng)中的顏色,它的搭配思路會存在兩種風(fēng)格。
一部分會與紅色接近,除了品牌 logo、導(dǎo)航菜單會使用橙色之外,其他品牌色都會以藍(lán)色呈現(xiàn)。并且藍(lán)色與橙色本身就為互補色,所以搭配起來依舊不錯。
另一部分則會考慮與深色結(jié)合,通過深色 + 橙色 + 藍(lán)色進(jìn)行搭配,比如 Hubspot 就會按照這個風(fēng)格進(jìn)行延續(xù)。
綠色:最近的出現(xiàn)頻率也在不斷增多,在 B 端產(chǎn)品當(dāng)中,可用的顏色確實已經(jīng)不多。
綠色通常會是小面積的方式進(jìn)行使用,因此配合白色是最佳的搭配方式,如果想要沉穩(wěn)一些,那頂黑、側(cè)黑也是可以進(jìn)行搭配。
藍(lán)色:就是萬精油的搭配,無論什么風(fēng)格,它都能輕松勝任。
視覺風(fēng)格雖然普通,但視覺的細(xì)節(jié)才是制勝的關(guān)鍵…
下篇文章我們聊聊一些真實案例,講講我們同學(xué)的設(shè)計方案的優(yōu)化思路~
本文由人人都是產(chǎn)品經(jīng)理作者【CE青年】,微信公眾號:【CE青年Youthce】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于 CC0 協(xié)議。
學(xué)習(xí)了