下面，就回到我們之前停擺的控件講解，繼續認識控件有關設計的內容。

往期回顧：

時間選擇器控件

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% 的黑色，太淺和太深都不好。

結語

今天的分享就到這邊，對于控件組件的說明，我會在后面單開更全更更細節的干貨分享出來。

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

歡迎關注作者的微信公眾號：「超人的電話亭」