中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在B端產品設計中，視覺風格的選擇和應用對于提升用戶體驗和品牌形象至關重要。本文將詳細介紹當前B端產品設計中的四種主要風格趨勢：頂黑風、側黑風、客戶端風格和灰白風，供大家參考。

上篇文章，我們聊到了不同時間段的風格趨勢，今天就來和大家說說視覺風格上的具體差異，講講目前行業當中的風格趨勢。

我們會將其分為頂黑風、側黑風、客戶端、灰白風。最后我們會根據 “紅、橙、綠、藍” 四種顏色，分別推薦我認為不錯的產品截圖，提供給大家進行學習與借鑒。

文章圖片較多，大家可以截圖保存～

1.頂黑風：

頂黑風強化頭部是通過深色背景，將頂部模塊進行凸顯，用于表達頂部與下方內容的關系。

通常對于頂部而言，是作為一級導航的形式，需要在頁面當中進行凸顯，所以才會使用深色將其強調。對于大多數的產品而言，因為頂部空間需要使用品牌色，再加上需要大面積展示，因此需要降低顏色飽和度。

比如在神策數據當中，其品牌色原本是亮綠色，但因為需要在頂部處大面積使用，因此將品牌的明度減少、飽和度降低，才能應付大面積使用的場景。通過這樣的設計風格，可以解決以頂部為核心，側邊為輔助的產品架構。

同樣有類似設計風格的產品還有：騰訊云、小鵝通。

在設計上，部分情況我們可以使用漸變的方式，優化它的整體呈現。

2.側黑風

側黑風強化側邊會和強化頂部的邏輯一樣，主要凸顯側邊的導航模塊，這也是我們在上篇文章當中講到的側黑沉穩風。

這種設計風格在國內非常常見，不過隨著時間的推移，你會發現整體的設計細節也在發生變化。

最初我們會更為關注側邊與內容的區分，因此呈現出來的風格會較為固定。比如京東行云就會使用這樣的設計形式區分兩者內容。

隨后想凸顯內容模塊，導航上增加兩個圓角，就形成內容的卡片模式，比如飛書的舊版本就會是這樣的設計風格。

然后又會調整，針對側邊導航增加更多的漸變，讓其視覺風格上進行不斷地優化。

最后我們還會考慮增加產品的底紋元素，讓整個導航提升更多的質感。

3.客戶端

客戶端：通過較窄的寬度用于呈現較少的導航菜單數量，使得整個網頁更像一個客戶端，通常它在寬度的設定上不會超過 100px，顏色配色上會以藍色、深灰色為主。

很多研發管理型產品都會使用客戶端風格的方式進行呈現。比如飛蛾、workflow。

同時在導航數量較多時，可以考慮通過自定義的方式進行配置。比如塵鋒、紛享銷客都可以提供給用戶進行自定義。

這種風格，大多數的產品最終的目的都是想封裝成為客戶端，通過這樣的風格能減少開發成本。

那如果沒有類似需求，建議你就不要輕易使用這個風格形式。

4.灰白風

灰白風通過頁面當中的白色與灰色形成模塊分割，將次要信息用灰色弱化，使得用戶更偏向核心內容區域。

這是目前最為流行的風格，因為它的適配性強，無論你是什么品牌色，灰白風都能輕松勝任。并且也能夠快速地封裝到第三方平臺當中（因為國內市場中，大多數的 B 端產品，都需要入駐上架到釘釘、企微、飛書上），嵌入進去的整體形象依舊不錯。

同時針對各類型產品架構都能輕松應對，比如側邊導航、混合導航，都可以完全適配。

由于大家的品牌色其實并不相同，這里我們列舉了五種不同顏色的視覺風格和對應的競品界面，方便大家直接抄作業～

不同顏色的 B 端產品推薦

紅色：因為難以搭配，所以在顏色的設定上難度較高，這里推薦兩個產品。

百度愛番番，將紅色作為品牌色，在整個頁面當中主要的提示信息部分都使用了紅色元素，比如主按鈕、導航菜單的選中狀態。

但在內容的 hover 狀態、表單的 radio button 里依舊會使用藍色。（這里如果使用紅色就會過于離譜）所以即使是延續紅色，在很多需要顏色來提供交互的語義時，依舊只能使用藍色～

小紅書千帆，也是小紅書的商家平臺。在顏色上，除了 logo 會使用紅色之外，其他的頁面信息都會采取藍色的方式進行。雖然這樣的設計會稍顯違和，但是至少能保證系統在眾多頁面當中，不會遇到過多的麻煩。

橙色：作為暖色系當中的顏色，它的搭配思路會存在兩種風格。

一部分會與紅色接近，除了品牌 logo、導航菜單會使用橙色之外，其他品牌色都會以藍色呈現。并且藍色與橙色本身就為互補色，所以搭配起來依舊不錯。

另一部分則會考慮與深色結合，通過深色 + 橙色 + 藍色進行搭配，比如 Hubspot 就會按照這個風格進行延續。

綠色：最近的出現頻率也在不斷增多，在 B 端產品當中，可用的顏色確實已經不多。

綠色通常會是小面積的方式進行使用，因此配合白色是最佳的搭配方式，如果想要沉穩一些，那頂黑、側黑也是可以進行搭配。

藍色：就是萬精油的搭配，無論什么風格，它都能輕松勝任。

視覺風格雖然普通，但視覺的細節才是制勝的關鍵…

下篇文章我們聊聊一些真實案例，講講我們同學的設計方案的優化思路～