超詳細(xì)！總監(jiān)出品的B端設(shè)計(jì)規(guī)范指南（五）：控件

下面，就回到我們之前停擺的控件講解，繼續(xù)認(rèn)識(shí)控件有關(guān)設(shè)計(jì)的內(nèi)容。

往期回顧：

時(shí)間選擇器控件

1. 時(shí)間選擇器的組成

時(shí)間選擇器，是一個(gè)非常復(fù)雜的控件，通常它由一個(gè)下拉菜單和時(shí)間面板組合而成。

下拉菜單作為一個(gè)表單控件，設(shè)計(jì)的方式前面已經(jīng)說(shuō)過了。時(shí)間的選擇包含兩種類型，單點(diǎn)選擇和范圍選擇，單點(diǎn)是具體到某天某日某時(shí)，比如鬧鐘提醒，而范圍是從某個(gè)時(shí)間點(diǎn)到另一個(gè)時(shí)間點(diǎn)之間的值，例如酒店預(yù)定時(shí)長(zhǎng)。

不管使用哪種選擇類型，我們優(yōu)先要注意時(shí)間的層級(jí)格式，要顯示年/月/日，還是精細(xì)到時(shí)/秒/分，以及鏈接層級(jí)的符號(hào)。

單點(diǎn)選擇模式的表單相對(duì)容易，就僅僅是顯示格式上的差異。但是，在范圍選擇中，表單的設(shè)計(jì)就有比較大的差異，要包含起始和結(jié)束兩個(gè)時(shí)間點(diǎn)。

我們可以在一個(gè)表單方框中將前后兩個(gè)時(shí)間點(diǎn)都囊括進(jìn)來(lái)，也可以將開始和結(jié)束拆分成兩個(gè)表單，兩種模式都有各自的交互邏輯和使用方式。

而點(diǎn)擊表單后，就是彈出的時(shí)間選擇面板。一個(gè)最完整的時(shí)間面板，會(huì)包含年份選擇、月份選擇、星期標(biāo)識(shí)、日期選擇、分時(shí)秒選擇。

2. 時(shí)間選擇面板的定義

下拉菜單部分的設(shè)計(jì)，和前面的表單輸入框基本一致，我就不在這里繼續(xù)討論了，主要來(lái)分享關(guān)于時(shí)間選擇面板的設(shè)計(jì)尺寸。

設(shè)計(jì)該面板的時(shí)候，也是先從模塊入手：

• 年/月份選擇
• 日期選擇
• 分時(shí)選擇

每個(gè)模塊都有高度的設(shè)置規(guī)則，年/月和分時(shí)選擇欄，都可以采取定高的模式設(shè)計(jì)，可以使用 28-36px 的高度。

而對(duì)于日期選擇模塊，高度的設(shè)計(jì)則有比較特殊，模塊的總高度不需要提前制定，而是根據(jù)內(nèi)容行數(shù)決定。包含星期標(biāo)識(shí)行、日期行數(shù)。

每個(gè)日期的數(shù)字，都由一個(gè)完整的矩形 View 包裹，整個(gè)日期展示區(qū)域，就是由這些矩形拼裝而成，每個(gè)矩形可以是正方形也可以是縱向長(zhǎng)方形。

在這個(gè)模式下，如果要增加選中模式，可以直接通過填充背景 View 的色彩來(lái)完成。

日期數(shù)值的顯示也有狀態(tài)的區(qū)分，包含 “不可選” 和 “今天” 兩個(gè)。不可選的日期置灰即可，而標(biāo)識(shí)今天的日期數(shù)字，可以使用特殊的色彩或添加特定的符號(hào)標(biāo)識(shí)。

最后，就是包含具體分時(shí)選擇的設(shè)置了，如果這個(gè)時(shí)間選擇器中即包含了從日期到秒的選擇，那么在面板中，就建議使用手動(dòng)輸入的方式來(lái)完時(shí)、分、秒的設(shè)置。

面包屑控件

面包屑控件，用來(lái)表示用戶當(dāng)前所處頁(yè)面的層級(jí)，由頁(yè)面鏈接和分隔元素組成，是一個(gè)比較容易設(shè)計(jì)的樣式。

頁(yè)面鏈接主要由文字展示，比較少會(huì)在這個(gè)部分玩花樣，最多關(guān)注當(dāng)前頁(yè)面和上級(jí)頁(yè)面的色彩差異。在設(shè)計(jì)它們的時(shí)候，最簡(jiǎn)單的做法，就是使用文本框直接鍵入，如：

• 電話亭首頁(yè) > 課程 > B 端入門
• 電話亭首頁(yè) / 課程 / B 端入門

如果要嚴(yán)謹(jǐn)一點(diǎn)，可以將手動(dòng)鍵入的大于號(hào)換成箭頭圖標(biāo)。這種基礎(chǔ)的形式占據(jù)了 95% 以上的項(xiàng)目場(chǎng)景，只有在高度復(fù)雜，層級(jí)眾多的項(xiàng)目中，我們會(huì)額外在該控件中增加頁(yè)面下拉菜單，以及使用的篩選標(biāo)簽元素。

頁(yè)碼控件

1. 頁(yè)碼控件的組成

頁(yè)碼控件是用來(lái)控制列表翻頁(yè)的工具，當(dāng)列表?xiàng)l目數(shù)量超出單頁(yè)顯示數(shù)量以后就會(huì)均分成若干數(shù)量的頁(yè)面，以頁(yè)碼控件進(jìn)行翻頁(yè)和跳轉(zhuǎn)。

在這個(gè)應(yīng)用場(chǎng)景中，包含許多需要考慮的因素，核心問題來(lái)自頁(yè)面數(shù)量過多和有限的展示區(qū)間的矛盾。對(duì)于數(shù)據(jù)量較大的列表，展示的數(shù)據(jù)往往會(huì)超過 4 位數(shù)，這就需要我們提供多種交互元素來(lái)輔助用戶進(jìn)行頁(yè)面跳轉(zhuǎn)。

在最完整的頁(yè)碼控件中，會(huì)包含下面這些元素：

不同的系統(tǒng)或者頁(yè)面，對(duì)所需的交互元素要求是不一致的，需要我們根據(jù)頁(yè)面的目標(biāo)來(lái)判斷應(yīng)該放哪些內(nèi)容。

2. 頁(yè)碼控件的尺寸

該控件的設(shè)計(jì)，樣式上主要的差異是是否包含矩形邊框，不過不管這個(gè)邊框是否可見，我們也依舊會(huì)以創(chuàng)建 View 視圖的方法來(lái)設(shè)計(jì)它。

頁(yè)面控件的設(shè)計(jì)首先從頁(yè)碼數(shù)字開始，優(yōu)先制定高度，再根據(jù)數(shù)字?jǐn)?shù)來(lái)制定寬度。通常，這類標(biāo)簽按鈕的高度在 28-36px 之間。

寬度非固定的設(shè)計(jì)模式是一個(gè)必須注意的問題，因?yàn)?1 位數(shù)和 4 位數(shù)所需空間是有非常大差異的。只要確認(rèn)好左右間距的數(shù)值，那么設(shè)計(jì)后面的前/后翻頁(yè)、輸入框、頁(yè)數(shù)等內(nèi)容，就會(huì)變得非常清晰了。

頁(yè)碼設(shè)計(jì)中，不要遺漏的就是省略號(hào)了，它代表還有大量的頁(yè)碼沒有被展示出來(lái)，通常這個(gè)省略號(hào)只出現(xiàn)在最后一頁(yè)或者最開頭一頁(yè)中。

切記不要把省略號(hào)安置到序列的中部，變成類似下方這種狀態(tài)：
1·2·3·4·5 …… 996·997·998·999

導(dǎo)航欄控件

1. 導(dǎo)航欄的組成

在今天，99% B 端項(xiàng)目導(dǎo)航欄都坐在左側(cè)，內(nèi)容在右側(cè)，通過選擇左側(cè)導(dǎo)航的鏈接快速打開和跳轉(zhuǎn)到不同的模塊中去。

導(dǎo)航欄的設(shè)計(jì)相對(duì)一般組件來(lái)說(shuō)，對(duì)頁(yè)面的視覺效果影響更大，因?yàn)閷?dǎo)航欄有較大的占比，而且通常為了和內(nèi)容做區(qū)分，都會(huì)采用和右側(cè)相反的色彩進(jìn)行凸顯，或使用品牌色。

常規(guī)的導(dǎo)航欄中，僅包含的內(nèi)容有后臺(tái) LOGO、導(dǎo)航選項(xiàng)。復(fù)雜的情況下可能還包含頭像、提醒、定制模塊，暫時(shí)不用考慮。

導(dǎo)航選項(xiàng)是導(dǎo)航欄的關(guān)鍵所在，最簡(jiǎn)單的 B 端項(xiàng)目往往只有一級(jí)，但業(yè)務(wù)越多的項(xiàng)目導(dǎo)航選項(xiàng)的層級(jí)也就越多，會(huì)以樹樁的形式展開和收起。

對(duì)于一些適配支持比較好的項(xiàng)目，導(dǎo)航欄還會(huì)有縮略模式，即縮減寬度后只顯示圖標(biāo)或更改文字排列方向的狀態(tài)。

2. 導(dǎo)航欄的數(shù)值

在導(dǎo)航欄設(shè)計(jì)中，一般 LOGO 放在頂部，使用 28-64 之間的高度，然后下方才放導(dǎo)航選項(xiàng)。

只要項(xiàng)目不太復(fù)雜，那么就建議為導(dǎo)航提供統(tǒng)一的高度，從 32-48px 之間選擇。即使是二級(jí)標(biāo)題，也可以使用相同的高度而不用特地縮小，通過變更文字的色彩、縮進(jìn)的方式來(lái)表現(xiàn)層級(jí)的區(qū)別，這樣在交互中更具整體性。

如果使用縮略型導(dǎo)航，則寬度控制在 32-64 即可。

開關(guān)控件

開關(guān)控件作為用來(lái)控制功能啟停的元素，包含開啟、關(guān)閉、禁用三個(gè)基本狀態(tài)。B 端開關(guān)設(shè)計(jì)受到移動(dòng)端系統(tǒng)的影響，所以和我們手機(jī)上使用的開關(guān)控件樣式幾乎一致。

但是，并不是所有啟停場(chǎng)景下都適用這種開關(guān)，如果啟用和關(guān)閉的邏輯比較復(fù)雜，那么就可以使用表單的兩個(gè)單選項(xiàng)控件并添加文字提示，或者使用勾選完成開啟關(guān)閉。

分頁(yè)選擇控件

在 B 端的分頁(yè)器中，設(shè)計(jì)的規(guī)格和移動(dòng)端是不同的，移動(dòng)端應(yīng)為屏幕窄，經(jīng)常將 2、3 個(gè)分頁(yè)標(biāo)簽進(jìn)行均分來(lái)實(shí)現(xiàn)布局。

而在 B 端分頁(yè)控件，也優(yōu)先確定設(shè)計(jì)的高度，小分頁(yè)控件在 24-36 之間，大的在 36-64 之間。如果文字字?jǐn)?shù)不太多，就使用等寬的設(shè)計(jì)，如果文字?jǐn)?shù)量比較捉摸不定，就采取等內(nèi)邊距自適應(yīng)設(shè)計(jì)。

提醒類控件

最后，就是提醒類控件的設(shè)計(jì)了。提醒類控件一般包含兩個(gè)類型，弱提醒和強(qiáng)提醒。

弱提醒是直接懸浮在畫面中，不會(huì)對(duì)遮擋以外區(qū)域有太大影響，并會(huì)自己消失的提示，也可以稱為 Toast 氣泡框。這個(gè)框的設(shè)計(jì)，是確定四周內(nèi)邊距的寬，然后再根據(jù)文字內(nèi)容來(lái)展示。

而強(qiáng)提示彈窗，則是一個(gè)正常的彈窗。我們會(huì)在這個(gè)彈窗中置入標(biāo)題、文本、按鈕三種要素。并且，為了體現(xiàn) “強(qiáng)”，會(huì)對(duì)窗口下方的界面使用黑色遮罩，讓用戶注意力集中到窗口中！

這類黑色遮罩通常使用透明度為 40-60% 的黑色，太淺和太深都不好。

結(jié)語(yǔ)

今天的分享就到這邊，對(duì)于控件組件的說(shuō)明，我會(huì)在后面單開更全更更細(xì)節(jié)的干貨分享出來(lái)。

掌握這兩篇內(nèi)容中設(shè)計(jì)的邏輯，就可以拓展到其它類似組件和元素中去。主要掌握的是設(shè)計(jì)的方式，而不要硬背具體的數(shù)值。

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」