起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識B 端設計 | B 端控件全面認識
編輯導語：對于B端控件設計，你的了解程度是多少呢？控件可以讓用戶自然、有效地完成系統功能的使用本文作者介紹了常規的B端控件設計，希望對你設計B端控件有所幫助，我們一起來看下吧。
一、B端基礎控件的認識
控件一詞，直譯的話可以翻譯成 “用來控制的元件”，是我們對 B 端系統進行信息錄入、更改、操作的元素。讓用戶可以自然、有效地完成系統功能的使用，正確使用控件元素是必要的基礎。
控件包含的類型、細節、規范非常多，我們先來解釋一下，常見的主流控件都有哪些。
第一，按鈕類控件，在 UI 界面中應用最多的控件類型，也是理解成本最低的元素。
但是，按鈕并不是只有一個矩形框中間放文字而已，還有多種細節的變體。包括但不局限于圓形、前置圖標、呈現加載進程等，標簽控件本質上也是按鈕的一種。
第二，表單類控件，表單是用來采集信息的控件。比如我們去銀行辦理業務，就會讓你填寫一張相應的表單，里面會收集各種不同的信息。
表單類的控件，就是都要根據我們想要采集的數據，以對應的樣式、交互呈現給用戶。比如文本輸入框、單選、復選、下拉菜單、級聯選擇、滑動條等等。
第三，時間選擇器，即選擇某一點或某一段時間的控件。嚴格來說，它也是表單控件中的一種，之所以單獨拿出來講，是因為它是所有表單控件中最復雜的一類。
時間選擇期可以選擇日期、時、分、秒，也可以選擇一段時間，包含大量的條件和狀態判斷。
第四，面包屑控件，可以理解成是步驟或層級的表現控件，直觀的反應當前頁面的位置，可以進行快速的切換和返回。
第五，頁碼控件，在通過列表呈現數據項目的時候，往往一頁是展示不完的，所以我們會將它切割成若干不同的頁面，于是就會使用分頁控件幫助用戶進行頁面的跳轉。
第六，導航欄，即 B 端內容模塊的導航控件，通過導航欄快速切換到不同的模塊。主流的B端項目，都會使用側邊導航的形式，也有少部分項目會使用傳統項目的頂部導航設計。
第七，開關，即對某判斷事件進行是或否的控制元素，和手機中我們使用的開關功能一致。
第八，分頁選擇控件，英文是 Tabs，在我的用法里從來不把 Tab 直接翻譯成 “標簽” 和英文 Tag 沖突。它的功能即切換對應內容區域的控件，和手機分頁器一樣。
第九，提醒類控件，用來提示、警示用戶的一系列控件類型。包含類似警告彈窗、強提示、氣泡、側邊提示欄等等。
以上就是我們在設計 B 端中常見的控件類型，有一個基本的認識，那么下面就分別講解它們設計的要點，以及常用的參數特征。
二、按鈕的設計要點
1. 按鈕的尺寸
按鈕是整個 UI 中最基礎的控件，學習任何一種 UI 類型的控件，都從按鈕展開。在移動端中，有官方建議的合理觸控區域 44pt 作為參照，來劃分大、小按鈕，但在網頁項目中，并沒有那么明確的官方建議。
所以，我們根據過往的經驗，依舊先將按鈕劃分成大、中、小三個等級，然后再講解它們對應的長寬數值區間。
首先從小按鈕開始說起，前面我們講過，中文最小字號在 11px，那么最小的按鈕尺寸就必然大于這個數值。所以，對于比較次要的按鈕、標簽，建議使用 16-28px 高的按鈕。
中按鈕，一般應用在一些表單確認、取消、上傳等基礎功能的使用上，可以使用 28-44px 高的按鈕。
大按鈕，就比較特殊，只有在登陸或者是意義非常重大的場景下（比如刪除重要數據提示）才會使用，它的高通常在 44-64px，大于 64px 的按鈕在 B 端項目中基本不會存在，除非有特殊的業務要求。
前面講的都是按鈕的高，那么按鈕的寬怎么來的呢？按鈕的寬度設置有兩種，一種是定寬，一種是自適應寬度。
定寬按鈕沒有非常明確的數值標準或比例標準，基本要求就是大于等于寬。常見的定寬按鈕寬高比為 1:1、2:3、2:1、3:1 。
雖然寬度沒有設限，但在網頁和手機客戶端不同，不會做出遠遠大于高，甚至撐滿屏幕的按鈕，這在巨大的電腦畫布中不僅不協調，而且會看起來非常不像按鈕。
自適應按鈕則是根據寬度進行伸縮的按鈕類型，通過定義左右內邊距的數值，來計算按鈕實際的寬度。無論里面只有文字還是圖標文字混合，使用自適應按鈕都可以完美匹配。
2. 按鈕的狀態
除了長寬尺寸外，還要額外關注按鈕的狀態。按鈕并不是一個 “死” 的靜態視覺元素，它本身包含了若干種不同的狀態，需要通過視覺樣式進行傳達。
比如最常見的，就是默認、懸浮、點擊、不可點狀態。
除此以外，當按鈕本身加入更多的功能、內涵以后，我們都需要根據它的使用場景來考慮對應的狀態，如下載按鈕，有些平臺點擊下載需要一個比較長的加載過程，于是這個Loding的動畫就可以在按鈕中進行呈現，表示下載請求正在處理，而不是讓用戶以為這是一個無效的按鈕。
三、表單控件的設計
表單是一個大類，包含的控件非常多。如果我們把每個細分選項都單獨挑出來講，那可以寫一本 B 端字典了。
所以，我們可以從輸入框這個控件入手，優先確認輸入框的尺寸基礎，然后再根據它拓展出其它的相關控件元素出來。
1. 輸入框的尺寸定義
輸入框雖然不如按鈕出現頻率高，包含的尺寸規格極多，但同樣也有大小之分。
常規輸入框的高度在24-48之間，根據實際場景的需要，盡量以4的倍數來定義輸入框的高度。
單行輸入框寬度通常是固定的，不像按鈕會向右延伸，所以輸入框的寬度需要根據對應的場景，輸入內容的長度來判斷，沒有統一的標準，盡量不要制定遠低于實際內容長度的數值即可。
雖然我們定制的輸入框看上去好像就是給一個矩形背景，把字體丟進去居中對齊就好。但是，開發中一個輸入框實際的尺寸，是通過內部元素尺寸+內邊距實現的。
所以，輸入框出現多行的時候，并不是簡單把原來的尺寸x2，而是先確定內部元素的行高，一個支持多行顯示，默認高 36px 的輸入框，行高20，那么當出現兩行的時候高 56，三行高 76，以此類推。
2. 下拉菜單
輸入框完成以后，那么之后的下拉菜單，在默認狀態下和輸入框就幾乎使用了一樣的樣式，只是增加了可以下拉的示意或圖標。
在下拉菜單中，如果包含了列表選項，那么每個列表的高度，也可以使用相同的尺寸，而不用給出一個新的數值。
3. 單選和復選控件
接著，就是單選和復選框的設計了，如果只看視覺效果，單選復選的實際大小好像都不大，不需要和輸入框有瓜葛。
這么想就不對了，實際上這類控件中，都有包含對應的選區，它的實際大小并不是我們視覺上的邊緣。而我們使用的實際背景選區尺寸，同樣使用輸入框的大小來制定，并對內容進行居中。
比較值得新手注意的是，在設計這類控件時，單選和復選框的尺寸，要控制在12-20px，超過20像素的選框會明顯偏大，缺失細節感。
4. 滑動條控件
之后，就是滑動條控件的設計了?；瑒訔l控件的樣式看起來并不復雜，一般由一個圓形滑塊（也有方形）和一個進度條組成。
在這類控件中，進度條的粗細雖然可以自由定義，但盡可能不要使用 1px，因為實在太細了，做的淺了看不清楚，做得深了又有很強的割裂感。
關鍵點在于對滑塊本身尺寸的控制上，前面我們講過單選和復選框的尺寸，實際上這個滑塊是可以繼承單選或復選框尺寸的。當它們使用相同大小的時候，往往在并列、并排的時候，會讓整個表單系統看起來更和諧、統一。
表單的設計，就是從輸入框和基礎的表單類型入手，然后再根據這些元素的尺寸拓展出后續其它表單控件的尺寸。
所以，掌握這種思路，就不需要對大量的表單控件死記硬背，可以靈活應對不同的表單設計需求。
四、時間選擇器控件
1. 時間選擇器的組成
時間選擇器，是一個非常復雜的控件，通常它由一個下拉菜單和時間面板組合而成。
下拉菜單作為一個表單控件，設計的方式前面已經說過了。時間的選擇包含兩種類型，單點選擇和范圍選擇，單點是具體到某天某日某時，比如鬧鐘提醒，而范圍是從某個時間點到另一個時間點之間的值，例如酒店預定時長。
不管使用哪種選擇類型，我們優先要注意時間的層級格式，要顯示年/月/日，還是精細到時/秒/分，以及鏈接層級的符號。
單點選擇模式的表單相對容易，就僅僅是顯示格式上的差異。但是，在范圍選擇中，表單的設計就有比較大的差異，要包含起始和結束兩個時間點。
我們可以在一個表單方框中將前后兩個時間點都囊括進來，也可以將開始和結束拆分成兩個表單，兩種模式都有各自的交互邏輯和使用方式。
而點擊表單后，就是彈出的時間選擇面板。一個最完整的時間面板，會包含年份選擇、月份選擇、星期標識、日期選擇、分時秒選擇。
2. 時間選擇面板的定義
下拉菜單部分的設計，和前面的表單輸入框基本一致，我就不在這里繼續討論了，主要來分享關于時間選擇面板的設計尺寸。設計該面板的時候，也是先從模塊入手：
- 年/月份選擇
- 日期選擇
- 分時選擇
每個模塊都有高度的設置規則，年/月和分時選擇欄，都可以采取定高的模式設計，可以使用 28-36px 的高度。
而對于日期選擇模塊，高度的設計則有比較特殊，模塊的總高度不需要提前制定，而是根據內容行數決定。包含星期標識行、日期行數。
每個日期的數字，都由一個完整的矩形 View 包裹，整個日期展示區域，就是由這些矩形拼裝而成，每個矩形可以是正方形也可以是縱向長方形。
在這個模式下，如果要增加選中模式，可以直接通過填充背景 View 的色彩來完成。
日期數值的顯示也有狀態的區分，包含 “不可選” 和 “今天” 兩個。不可選的日期置灰即可，而標識今天的日期數字，可以使用特殊的色彩或添加特定的符號標識。
最后，就是包含具體分時選擇的設置了，如果這個時間選擇器中即包含了從日期到秒的選擇，那么在面板中，就建議使用手動輸入的方式來完時、分、秒的設置。
五、面包屑控件
面包屑控件，用來表示用戶當前所處頁面的層級，由頁面鏈接和分隔元素組成，是一個比較容易設計的樣式。頁面鏈接主要由文字展示，比較少會在這個部分玩花樣，最多關注當前頁面和上級頁面的色彩差異。
在設計它們的時候，最簡單的做法，就是使用文本框直接鍵入，如：電話亭首頁 > 課程 > B端入門電話亭首頁 / 課程 / B端入門如果要嚴謹一點，可以將手動鍵入的大于號換成箭頭圖標。
這種基礎的形式占據了 95% 以上的項目場景，只有在高度復雜，層級眾多的項目中，我們會額外在該控件中增加頁面下拉菜單，以及使用的篩選標簽元素。
六、頁碼控件
1. 頁碼控件的組成
頁碼控件是用來控制列表翻頁的工具，當列表條目數量超出單頁顯示數量以后就會均分成若干數量的頁面，以頁碼控件進行翻頁和跳轉。
在這個應用場景中，包含許多需要考慮的因素，核心問題來自頁面數量過多和有限的展示區間的矛盾。對于數據量較大的列表，展示的數據往往會超過4位數，這就需要我們提供多種交互元素來輔助用戶進行頁面跳轉。在最完整的頁碼控件中，會包含下面這些元素：
不同的系統或者頁面，對所需的交互元素要求是不一致的，需要我們根據頁面的目標來判斷應該放哪些內容。
2. 頁碼控件的尺寸
該控件的設計，樣式上主要的差異是是否包含矩形邊框，不過不管這個邊框是否可見，我們也依舊會以創建 View 視圖的方法來設計它。頁面控件的設計首先從頁碼數字開始，優先制定高度，再根據數字數來制定寬度。通常，這類標簽按鈕的高度在 28-36px 之間。
寬度非固定的設計模式是一個必須注意的問題，因為 1 位數和 4 位數所需空間是有非常大差異的。只要確認好左右間距的數值，那么設計后面的前/后翻頁、輸入框、頁數等內容，就會變得非常清晰了。
頁碼設計中，不要遺漏的就是省略號了，它代表還有大量的頁碼沒有被展示出來，通常這個省略號只出現在最后一頁或者最開頭一頁中。
切記不要把省略號安置到序列的中部，變成類似下方這種狀態：1·2·3·4·5 …… 996·997·998·999
七、導航欄控件
1. 導航欄的組成
在今天，99% B端項目導航欄都坐在左側，內容在右側，通過選擇左側導航的鏈接快速打開和跳轉到不同的模塊中去。
導航欄的設計相對一般組件來說，對頁面的視覺效果影響更大，因為導航欄有較大的占比，而且通常為了和內容做區分，都會采用和右側相反的色彩進行凸顯，或使用品牌色。
常規的導航欄中，僅包含的內容有后臺 LOGO、導航選項。復雜的情況下可能還包含頭像、提醒、定制模塊，暫時不用考慮。導航選項是導航欄的關鍵所在，最簡單的B端項目往往只有一級，但業務越多的項目導航選項的層級也就越多，會以樹樁的形式展開和收起。
對于一些適配支持比較好的項目，導航欄還會有縮略模式，即縮減寬度后只顯示圖標或更改文字排列方向的狀態。
2. 導航欄的數值
在導航欄設計中，一般LOGO放在頂部，使用 28-64 之間的高度，然后下方才放導航選項。只要項目不太復雜，那么就建議為導航提供統一的高度，從32-48px 之間選擇。
即使是二級標題，也可以使用相同的高度而不用特地縮小，通過變更文字的色彩、縮進的方式來表現層級的區別，這樣在交互中更具整體性。
如果使用縮略型導航，則寬度控制在 32-64 即可。
八、開關控件
開關控件作為用來控制功能啟停的元素，包含開啟、關閉、禁用三個基本狀態。B端開關設計受到移動端系統的影響，所以和我們手機上使用的開關控件樣式幾乎一致。
但是，并不是所有啟停場景下都適用這種開關，如果啟用和關閉的邏輯比較復雜，那么就可以使用表單的兩個單選項控件并添加文字提示，或者使用勾選完成開啟關閉。
九、分頁選擇控件
在B端的分頁器中，設計的規格和移動端是不同的，移動端應為屏幕窄，經常將 2、3 個分頁標簽進行均分來實現布局。
而在 B 端分頁控件，也優先確定設計的高度，小分頁控件在 24-36 之間，大的在 36-64 之間。如果文字字數不太多，就使用等寬的設計，如果文字數量比較捉摸不定，就采取等內邊距自適應設計。
十、提醒類控件
最后，就是提醒類控件的設計了。提醒類控件一般包含兩個類型，弱提醒和強提醒。弱提醒是直接懸浮在畫面中，不會對遮擋以外區域有太大影響，并會自己消失的提示，也可以稱為 Toast 氣泡框。這個框的設計，是確定四周內邊距的寬，然后再根據文字內容來展示。
而強提示彈窗，則是一個正常的彈窗。我們會在這個彈窗中置入標題、文本、按鈕三種要素。并且，為了體現 “強”，會對窗口下方的界面使用黑色遮罩，讓用戶注意力集中到窗口中！這類黑色遮罩通常使用透明度為 40-60% 的黑色，太淺和太深都不好。
十一、結語
今天的分享就到這邊，對于控件組件的說明，我會在后面單開更全更更細節的干貨分享出來。
掌握這兩篇內容中設計的邏輯，就可以拓展到其它類似組件和元素中去。主要掌握的是設計的方式，而不要硬背具體的數值。
本文由 @酸梅干超人 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議
大佬，能共享下元件庫嗎？
厲害啊，感謝大佬分享
很標準，感謝分享
感謝分享，大佬的元件庫能分享下嗎？
感謝分享。
有學習到非常感謝樓主分享。
可不可以共享一下元件庫呢
已點贊收藏。
覬覦大佬的axure元件庫。不知道能不能分享一下
哇哦，超人耶
等內邊距自適應設計用axure怎么畫呢？