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

編輯導語：本文作者全面總結了B端系統的設計規范，包含UI規范、組件規范，總結了在實際工作中常用的組件，希望對正處于B端領域設計的你有所幫助。本篇文章適合正在從事B端設計工作的小伙伴閱讀，一起來看。

不知不覺已經深耕在B端這個領域3年有余，很多人接觸過B端后會覺得乏味，因為B端的設計在視覺上并沒有C端那么有沖擊力，更多的是結合業務邏輯，設計出符合業務需求的交互，以及界面排版的合理性，達到產品的可用性、易用性、好用性。

由于業務的復雜性，功能實現的難度程度相比C端會高很多，但是B端系統會有很多相似的組件可以共用，設計師一般會在項目前期做好這些組件的規范，便于后期設計使用，同時開發也能減少開發量，公用組件庫不僅能減少開發時間還能達到系統界面統一的效果，降低用戶的學習成本。

B端的組件也是豐富多樣、同時也比較復雜，因此此篇文章我只對組件樣式做統計，并作簡單的介紹，具體的組件使用場景后續一一分享，歡迎持續關注~

B端的系統規范我分為兩大類，分別是：UI規范、組件規范。

UI規范：色彩、字體、布局、圖標。

組件規范：按鈕、面包屑、導航菜單、分頁、下拉菜單、滑條、日期選擇框、樹、標簽頁、輸入框、表單、上傳、氣泡卡片、表格、警告提示、彈窗/抽屜

一、UI規范

1. 色彩

系統色彩規范，包含核心（品牌）色、輔助色、中性色

1）品牌色

即產品主色，產品主色的設定直接影響產品氣質和直觀感受，也是產品直接對外的形象，品牌色要根據產品特性、用戶使用場景、產品定位等進行選，盡量做好色彩的延伸性，可支持換膚，品牌色的應用場景包括操作狀態、按鈕色、可操作圖標等

2）輔助色

用于提示其他場景，比如：成功、失敗、警告、無效等

3）中性色

常用于文本、背景、邊框、分割線等，需要考慮深色背景和淺色背景的差異，可以選擇同一色相控制透明度變化，用來表現不同的層級結構

一整套系統所涉及到的色彩往往不止這幾種，如果我們只限制在上面所總結的幾種顏色，那么在一些需要多種顏色時就比較難區分，比如一些常見的數據圖表分析，就會涉及到多種顏色的結合使用，所以我們會根據主要的色彩規范衍生更多的色系供特殊情況使用，因此在作色彩規范時會準備一個“其它色”。

4）其它色

如統計圖、數據可視化、多個標簽的不同配色方案根據項目情況單獨設定，通過基本色彩衍生而來

2. 字體

字體是體系化界面設計中最基本的構成之一。

字體的大小、色彩區分體現界面信息的層級關系。

• 中文字體建議選擇：蘋方體、思源黑體
• 英文字體建議選擇：Helvetica Neue、思源黑體
• 系統中字體大小為：14px、16px、18px、20px、24px、26px、28px、30px、36px…
• 字體行高設定：根據文字大小及使用場景設置行高，行高=文字大小+8px

常規默認的系統字體規范最小為12px，上篇文章【B端系統】我的設計踩坑總結（上）中我也提到過關于不同分辨率下，不同顯示器分辨率和布局的默認設置情況，字體規范會作不同的梯度，這里就不再贅述，感興趣的可以回頭看看。

3. 布局

B端系統的用戶的主流分辨率主要為 1920、1440 和 1366，個別系統還存在 1280 的顯示設備，通過動態適配布局來完成在不同分辨率下展示內容。

系統中存在的結構方式有：左右結構、上下結構。

系統適配：采用24柵格。

1）左右結構布局

常被用于左右布局的設計方案中，常見的做法是將左邊的導航欄固定寬度，頂部欄固定高度（有頂部欄的情況下），對右邊的內容展示區域進行動態縮放。

2）上下結構布局

常被用于上下布局的設計方案中，常見的做法是將頂部欄固定，對下邊的內容展示區域進行動態縮放，內容區域左右兩邊固定有最小值。

4. 圖標

B端系統圖標簡潔為主、分類區分、便于識別，默認大?。?6X16px，SVG格式為主。

對于圖標來講，相信大家都不會陌生，而對于B端的圖標，圖標主要注重簡潔易懂，并且一般起到分類標識和點綴的效果。

這里分享一下我在工作中怎么整理我的項目圖標，以及怎么便捷的和開發小哥哥配合傳圖，圖標設計我使用AI完成，大小都設置為16x16px，畫好的圖標直接保存為SVG格式，然后批量上傳到iconfont.cn，在這里我會根據不同的項目分類，開發小哥哥只需要在每個項目中下載需要的圖標即可，這樣大大提高了工作效率。

二、組件規范

1. 按鈕

是按鈕觸發事件或動作，他們讓用戶知道接下來會發生什么。

按鈕的樣式分為5種，分別是：主按鈕、默認按鈕、虛線按鈕、文本按鈕、鏈接按鈕。

• 主按鈕：用于主行動點，一個操作區域只能有一個主按鈕。
• 默認按鈕：用于沒有主次之分的一組行動點。
• 虛線按鈕：常用于添加操作。
• 文本按鈕：用于最次級的行動點。
• 鏈接按鈕：用于作為外鏈的行動點。
• 按鈕的狀態分為4種，分別是：正常、突出顯示、禁用、已選中。
• 正常（normal）：表示控件處于活動狀態，但是當前并未使用。
• 突出顯示（highlighted）：表示控件正被按住或正被使用。
• 禁用（disabled）：表示按鈕未啟用且無法使用。
• 已選中（selected）：僅特定控件具有該狀態，表示控件當前已被選中。

2. 面包屑

面包屑是一種導航系統，顯示當前頁面在系統層級結構中的位置，并能向上返回。

面包屑組件在B端系統是常用的組件，同時在網站中也是常用的，面包屑的樣式分為2種：短面包屑、長面包屑。

• 短面包屑：用戶層級比較淺的頁面。
• 長面包屑：用戶層級比較深的頁面。

3. 導航菜單

為頁面和功能提供導航的菜單列表。

導航菜單一般分為2種模式：左右結構導航、上下結構導航。

• 左右結構導航：我們見過最多的就是左右結構的導航，通常會采用圖標+文案的形式呈現，并且有層級區分，采用點擊展開的形式收縮二級目錄，左右結構的導航一般都會支持左側收縮的交互功能，為內容展示區域提供更大的展示空間，一鍵收縮或者鼠標左右拖動收縮，可根據實際情況而選擇合適的交互方式。
• 上下結構導航：菜單排版在頂部左側或者右側，這樣的導航方式在網站中比較常見，但是在B端系統中也會使用，我曾接觸過的實際項目中就有使用，主要運用于頁面內容量大，導航無次級時。

4. 分頁

采用分頁的形式分隔長列表，每次只加載一個頁面。

分頁的樣式也是多種多樣，在不同情況下也會選擇不同的樣式，我這里總結了我們目前系統使用的3種分頁樣式：常規樣式、長版樣式、簡潔樣式。

• 常規樣式：默認展示的樣式即常規樣式，控制在五個數字間，避免數字太多太混亂
• 長版樣式：當數據信息量巨大的情況下，分頁的數量也會增多，采用多數字可切換的樣式
• 簡潔樣式：頁數固定或最多不超過10頁時，一般采用左右切換的樣式

5. 下拉菜單

下拉菜單向用戶顯示操作或選項的列表。

下拉菜單樣式可分為2種：一級下拉、多級下拉。

• 一級下拉：最簡單的下拉選擇樣式，直接平鋪可選擇的選項內容。
• 多級下拉：下拉框種存在層級關系（主次層級）、樣式可分為左右分級展示、上下錯位分級展示、樹結構分級展示（這里關于樹結構的下拉展示方式沒有作樣式，不過后面有關于樹結構的組件介紹，可參考其樣式）。

6. 滑條

上下滑動展示更多內容。

滑條是作為產品中不可缺少的組件，無論是web端還是移動端，都會運用到，滑條的樣式也都差距不大，也沒有很大的設計發散，主要是還是根據實際需求情況區分其交互形式。

例如：在我的實際工作中，我選擇的交互方式是，滑條不會一直顯示在界面中（避免頁面整體視覺效果受到干擾），只有當鼠標移動到可滑動的區域才會出現滑條（告知用戶頁面內容可滑動看更多），所以我的組件中會出現兩個樣式。

7. 日期選擇框

輸入或選擇日期的控件。

對于B端系統來說，日期會根據業務的情況精度提取會不同，精確到日、時、分、秒，作為時間設置和過濾條件使用時，一般會使用到時間區間，所以日期選擇框分為以下3種：普通日期選擇、區間日期選擇、精準日期選擇。

• 普通日期選擇：只可選擇某年月日時間精度。
• 區間日期選擇：可選擇不同年月日時間區間。
• 精準日期選擇：可選擇年月日、時分秒高精度時間。

8. 單選/多選框

在一組可選項中進行單項/多項選擇時。

注意組件的使用場景：單選/多選框看是簡單又常見的組件，但是在實際項目中運用時也需要做到細致的區分，選項只支持單選時我們就采用合適的圓形單選框，支持多選時就采用方形的多選框，做好單選和多選的場景區分.

注意組件的狀態區分：單選/多選框的樣式雖然簡單，但是也有3種顯示狀態：默認、選中、不可選。

9. 樹

樹型展示和樹型選擇控件。

樹組件在B端系統中常用于權限設置，大部分的B端系統都會有權限設置的功能，當然在我實際工作中出來權限設置使用樹結構外，還有其它的使用場景，比如：組織維護、職能維護、事項維護等等。

樹結構可以清晰的展示層級關系，并且節約空間，但是在一些復雜的需求中，樹結構比較難維護，所以在選擇組件時也需要考慮實際業務場景和維護成本。

下圖中左側為展示效果的樹結構、右側為可操作（選擇）的樹結構效果展示，兩種效果都可運用到上文提到的下拉選擇框中使用。

10. 標簽頁

選項卡切換組件。

標簽頁分為2種形式：橫向標簽、縱向標簽。

• 橫向標簽：橫向的標簽樣式是最常用的樣式，包括在網站和移動端都會運用，標簽樣式分為文字+線條、文字+色塊，分別區分選中和默認的狀態形式，標簽除了默認固定的標簽外，還會有可編輯的標簽，可滿足增刪除功能，所以這類標簽會有“刪除”標識，例如網頁頁簽就是可編輯的標簽樣式。
• 縱向標簽：縱向標簽有點類似左右結構的導航菜單，也是通過點擊選中頁簽，實現頁面內容的切換變化。

11. 輸入框

文本輸入框、數字輸入框。

輸入框是最為常見的組件了，這里就不做組件的介紹，主要還是分享一下關于輸入框組件在不同顯示器上排版布局的區別吧，例如在移動端輸入框的文本和輸入框一般會采用上下結構，因為移動端的尺寸比較小，可展示內容的區域有限。

而在web端，會根據此頁面的內容量以及內容顯示的形式來區分顯示方式，例如彈窗中內容較少時，輸入框樣式一般會采用上下結構，內容較多頁面空間較大時會選中左右結構排版，當然，這并不是固定的排版思維，而是需要根據實際情況選中合適的排版方式。

12. 表單

高性能表單控件，自帶數據域管理，包含數據錄入、校驗以及對應樣式。

表單在我認為，即多個輸入框的組合，表單的樣式可直接根據輸入框的兩種樣式作區分展示，左右結構和上下結構，普通的表單是會根據實際業務情況固定輸入的字段信息，而對于一些特殊的表單信息，用戶可以增減表單的內容時，表單的樣式則會和普通的樣式作區分，并且交互方式也會有所區分。

例如下圖右側的表單樣式即為可增減的表單，支持點擊右下角的“添加”按鈕增加一個和上面一樣的表單內容信息，可點擊表單模塊右上角的“x”刪除此表單，達到用戶自定義表單內容數量的要求。

13. 上傳

文件選擇上傳和拖拽上傳控件。

上傳的功能我們不少見，對于B端系統來講，上傳表單、文件是最為常見的操作，這里我總結了3種上傳的組件樣式：單件上傳、圖片上傳、批量上傳。

• 單件上傳：單文件上傳一般是上傳一個或者幾個文件，常采用按鈕或拖拽的交互形式。
• 圖片上傳：簡單的圖片替換上傳，常用于企業logo替換、登錄頁圖片替換等場景，需告知用戶圖片上傳的狀態。
• 批量上傳：對于大批量的文件上傳需要告知用戶文件的狀態，支持用戶取消上傳操作，例如：常用的百度網盤上傳和下載文件。

14. 氣泡卡片

點擊/鼠標移入元素，彈出氣泡式的卡片浮層。

由于B端產品內容量巨大，需要在有限的空間展示所有的數據不為是個難題，所以為了在有限的空間展示重要額內容，達到界面的可閱讀性、采用次要內容隱藏的功能，通過點擊或者懸浮展示全面的內容。

最常見的表格內容太長出現“…”，鼠標移入出現懸浮氣泡顯示完整的信息；名稱后面跟隨“？/！”圖標，鼠標移入出現懸浮氣泡顯示注釋的信息；數據分析圖表，鼠標移入出現懸浮氣泡顯示數據的信息等等。

15. 表格

展示行列數據。

表格作為常見的組件，樣式是多種多樣的，并且每一種表格的交互都各不相同，使用的常見也各有差異，下圖我只展示了2種表格的樣式，但是實際上遠不止于此，在我目前工作種涉及的一個項目中就采用了超過5種的表格樣式，這里我就不做詳細介紹，后期我會單獨總結關于表格的不同樣式以及使用場景

16. 警告提示

警告提示，展現需要關注的信息。

警告提示一般分為四個狀態：成功、信息注釋、警告、錯誤（失?。?

根據提醒內容的顯示以及是否需要用戶手動操作，我總結了四種樣式，如下圖：

17. 彈窗/抽屜

信息展示和信息填寫的浮層面板。

彈窗和抽屜都是內容展示的不同出現方式，組件的選擇同樣需要根據實際需求情況，比如需要參考頁面信息填寫表單信息，采用抽屜的樣式則更為合理，這樣就可以在右側填寫表單，在左側參考數據對比，抽屜的樣式可以是浮窗也可以是直接從右側推出，左邊內容被擠壓得形式，這樣得交互方式在我得實際項目中也是常用之一。

此篇文章我只總結了我實際工作中常用的組件，還有很多不常用的組件沒有作全面的總結，后期有機會再做總結吧！，也希望對處于B端領域的你有所幫助，歡迎一起探討關于B端設計有趣的事！

本文由 @設計小余 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于 CC0 協議