萬字干貨！超全面的B端設(shè)計(jì)指南：選擇錄入（二）

關(guān)于下拉選擇器、日期選擇的攻略耐心看完，你一定有所收獲！

在整個「數(shù)據(jù)錄入場景」中，01 篇我們講到了單選框、多選框、開關(guān)。

通過較為淺顯易懂的方式與大家講清楚了其中的利弊以及一些邏輯上的使用方法，但是在實(shí)際工作中，所遇到的問題遠(yuǎn)不止文章當(dāng)中那么簡單，工作中遇到那么多復(fù)雜的選擇器我應(yīng)該如何設(shè)計(jì)？

02 篇中我們主要會針對下拉選擇、日期時間選擇的基礎(chǔ)內(nèi)容進(jìn)行相應(yīng)的解析，通過拆解實(shí)際工作當(dāng)中的需求，去了解其背后設(shè)計(jì)的邏輯。

咱們還是老規(guī)矩

先科普一個知識點(diǎn)，下拉菜單與選擇器之間的區(qū)別。

首先，在 Ant Design 中，它將下拉菜單（Dropdown）與 選擇器（Select）完全拆分開，如果單純從視覺樣式上來看，兩者并沒有較大差異，因此在日常的方案溝通中容易產(chǎn)生混淆。而我總結(jié)了一下日常描述此組件時出現(xiàn)的不同名稱，比如：選擇器、下拉選擇 、下拉菜單、下拉框、下拉選擇器、選擇框等等...那到底應(yīng)該叫什么？！！！！

首先，為了研究名稱的準(zhǔn)確性，我查閱了“字典” World Wide Web Consortium （W3C）的 cheatsheet 文檔，其中只存在有選擇器 （Select） 這一名詞，即選擇器。而下拉菜單（Dropdown）是并沒有存在的，結(jié)合對文檔的細(xì)致研究，因此總結(jié)出使用 “選擇器” 進(jìn)行表達(dá)是一個較為規(guī)范的說法。

而我們回過頭來看，為什么 Ant Deisgn 會將同樣的選擇拆分為 下拉菜單與選擇器呢？其實(shí)在實(shí)際功能上兩者會有較大的不同點(diǎn)。

1. 下拉菜單

在 Ant Design 的解釋中，其描述主要是針對操作進(jìn)行集合，主要的使用場景是在導(dǎo)航、工具菜單以及部分操作集合里。但在前端的實(shí)際使用中，Dropdown 主要被作為一個下拉容器的入口，他可以在里面放任意的內(nèi)容，一張圖片、一句話、甚至一個視頻，都可以在下拉菜單中進(jìn)行展示。

導(dǎo)航：比如在 Ｇrowing IO 的官網(wǎng)中，通過下拉菜單，他就可以將產(chǎn)品導(dǎo)航進(jìn)行分組，并且統(tǒng)一放置在一起。

假設(shè)我們這時候使用 Select 進(jìn)行展示的話，它的下拉菜單應(yīng)該是長這樣～（當(dāng)然，這里肯定不會出現(xiàn) Select 因?yàn)樗鄙黉浫肟颍@里只是作為舉例進(jìn)行假設(shè)）

工具菜單：比如在 MacOS 的全局菜單中，左側(cè)工具菜單都是將所有的操作放置榆次，在 Figma 的軟件那種，通過將頂部的工具欄，通過使用下拉菜單進(jìn)行呈現(xiàn)。

操作集合：比如我們在表格的操作區(qū)域經(jīng)常會使用下拉菜單將很多操作放到一起。

2. 選擇器

主要是針對選項(xiàng)進(jìn)行收折，必須包含兩個部分，錄入框以及下拉選項(xiàng)。使用場景是在表單的中可選項(xiàng)過多之后，會使用選擇器將所有選項(xiàng)進(jìn)行整合。比如我們選擇客戶的歸屬人，因?yàn)榭蛇x擇的成員較多，因此通過選擇器能夠使所有選項(xiàng)進(jìn)行集中展示。

其次，兩者的混淆，主要是對下拉選項(xiàng)的問題，其實(shí)一般下拉選項(xiàng)時，大家更通用的表述是下拉菜單，也會因此造成了兩者之間的混淆。

下拉選擇的基礎(chǔ)拆解

說到選擇，就不得不提起下拉選擇，因?yàn)槠?“簡單無腦、適應(yīng)能力強(qiáng)” 因而成為新手設(shè)計(jì)師的使用首選。但在使用的過程中經(jīng)常會出現(xiàn)很多盲點(diǎn)，比如選項(xiàng)過多、下拉菜單過長、如何排序，這些都會在文章后面與大家進(jìn)行一一解答。

1. 下拉選擇器的結(jié)構(gòu)

下拉選擇的類型較廣，一般由下拉單選、下拉多選、下拉級聯(lián)選擇等...因此考慮到實(shí)際情況，我設(shè)計(jì)一個較為完整的結(jié)構(gòu)，大家可以根據(jù)實(shí)際情況進(jìn)行閱讀拆解。

在結(jié)構(gòu)中，挑選了幾個較為重要的結(jié)構(gòu)來為大家進(jìn)行講解。

選擇錄入框：與文本輸入框類似，擁有一個外邊框，用于提示用戶可操作的熱區(qū)范圍。其主要差距是能與下拉菜單進(jìn)行聯(lián)動：

當(dāng)下拉單選，選擇了一個選項(xiàng)后，下拉菜單會自動收起，并將選擇的值反顯到錄入框內(nèi)，進(jìn)行展示

當(dāng)下拉多選，選擇了一個選項(xiàng)后，下拉菜單會持續(xù)展開，并將選項(xiàng)表達(dá)為選中狀態(tài)，進(jìn)行展示

選擇器的下拉菜單：承載所有可選擇的選項(xiàng)列表，在選項(xiàng)數(shù)量過多時會對下拉菜單的高度進(jìn)行限制，即設(shè)置下拉菜單的最大高度，當(dāng)超過最大高度時，一定會出現(xiàn)滾動條。常見的高度設(shè)置一般為：264px （參考 Ant Design）

右側(cè)標(biāo)識：每個選擇錄入中的右側(cè)圖標(biāo)，都是其“身份”的象征，因?yàn)樵诤竺嬉v到的成員選擇、日期選擇、時間選擇等，在正常狀態(tài)下除了右側(cè)圖標(biāo)的標(biāo)識以外，你分辨不出其他地方有著較為明顯的差異，也因此在設(shè)計(jì)的過程中，如何將它們進(jìn)行合理的區(qū)分也是設(shè)計(jì)需要著重思考的點(diǎn)。

這里做了一個對應(yīng)表格，大家可以根據(jù)自己的實(shí)際情況進(jìn)行對齊。

回顯值：回顯值通常包含有兩種狀態(tài)。

在下拉單選時，因?yàn)槭褂玫膱鼍坝邢蓿话悴扇〖兾谋净仫@即可。

在下拉多選時，需要同時展示多個選中項(xiàng)，因此在錄入框中只能采取 Tag 形式，通過 Tag 將每一個選項(xiàng)進(jìn)行包裹，并在右側(cè)擁有單一選項(xiàng)清除的入口，讓用戶進(jìn)行點(diǎn)擊刪除，從而使單個選項(xiàng)擁有一個完整的閉環(huán)。

搜索：下拉選擇的搜索主要是對較多選項(xiàng)的優(yōu)化設(shè)計(jì)，目的是為了幫助用戶能夠快速找到相應(yīng)的選項(xiàng)值。而目前主流搜索的做法主要分為兩種，以大家最常見的 Ant Design 與 Teambition 進(jìn)行舉例。

Ant Design 在對搜索方式的處理上，采取的是將選擇錄入框看作是一個輸入框，通過點(diǎn)擊過后，將光標(biāo)首先聚焦在輸入框內(nèi)，能夠給用戶傳達(dá)出可以進(jìn)行搜索的操作

Teambition 則是在輸入框的下方，針對一些特定的場景，他可能會使用到主要是針對于搜索 type 下面的一些搜索值，只要滿足用戶在于多選操作的時候多，多選的值特別多，如果沒有一個單獨(dú)的區(qū)域進(jìn)行搜索的話，直接在搜索框內(nèi)進(jìn)行搜索，會特別的難用。這樣雖然占用了一定的區(qū)域，但能夠保證用戶獨(dú)立搜索的操作完整的體驗(yàn)

多層級：在多層級中，主要是針對選項(xiàng)中內(nèi)容的歸屬關(guān)系進(jìn)行相應(yīng)的定義，一般是由大到小進(jìn)行選擇，結(jié)構(gòu)采取 3>2>1，也就是我們常說的級聯(lián)選擇的形式。

全部清除：全部清除出現(xiàn)于下拉多選中，這是一個特別重要的功能，大家在設(shè)計(jì)中很容易忽略（劃重點(diǎn)了！！）。因?yàn)樵诙噙x時你選擇過多的選項(xiàng)后，不免會有清除所有選項(xiàng)的需求。如果沒有此入口就代表著用戶只有一個一個去刪除，在整個刪除的過程中便是十分痛苦的。

2. 下拉變種

上面講的只是下拉選擇的基礎(chǔ)結(jié)構(gòu)，而在實(shí)際業(yè)務(wù)中還會遇到各種各樣的下拉選擇，因?yàn)椴煌臉I(yè)務(wù)代表著你需要不同的組件，因此我接著給大家講一講下拉的各種變種。因?yàn)槭亲兎N，因此其使用場景較為局限，切勿生搬硬套。

分組

分組其實(shí)是我們遇到信息過載時最先想到的方式，通過不同的設(shè)計(jì)形式，使用分割線將同一類別的選項(xiàng)進(jìn)行相應(yīng)的劃分，這樣在用戶選擇時會思考由大到小的關(guān)系邏輯，即從大的分類思考到具體的選項(xiàng)。比如我們需要去選擇某某小學(xué)三年四班的李華同學(xué)時，如果將全校的所有名字都放在你面前，另一個則是根據(jù)班級進(jìn)行相應(yīng)的分組，你認(rèn)為哪一個更清晰？

這其實(shí)是人的一個正向思維，當(dāng)你去尋找時，通過三年級 > 四班 > 李華這樣由大到小的思考方式會使你檢索效率大大增加，因此在表單中很多信息過多時分組便是一個“常規(guī)手段”

分組雖然確定，但設(shè)計(jì)方式也有幾種不同的形式，在下方給大家進(jìn)行總結(jié)。

Tab 分類

Tab 分類其實(shí)是一種對于業(yè)務(wù)特殊的處理方式，其目的是幫助選項(xiàng)進(jìn)行合理的分類。

因?yàn)樵谠S多時候，與其說讓我在幾十個中尋找其中一個選項(xiàng)，不如說在設(shè)計(jì)本身上就先預(yù)設(shè)好一定規(guī)則的 Tab 分類，然后用戶可以根據(jù)不同的分類去盡可能縮小他所要的選擇項(xiàng)。比如在我之前設(shè)計(jì)的券商產(chǎn)品中會有選擇不同級別的銷售的場景。

圖中可以看到我們將銷售等級分為三類：初級銷售、中級銷售、高級銷售，為了使用戶在選擇器中不會產(chǎn)生太多違和感，我們將第一個 Tab 設(shè)定為“全部”，并且按照成員的字母順序進(jìn)行排列，同時當(dāng)用戶想要選擇某一類的銷售成員時，可以通過切換 Tab 進(jìn)行快速的分類選擇。

采取 Tab 分類一般需要滿足一下幾個條件：

• 選項(xiàng)數(shù)量較多，至少為 20 個選項(xiàng)以上。
• 選項(xiàng)中能夠有 3-4 個分類類型，通過分類能夠給用戶帶來明確的差異信息。
• 分類與分類之間的關(guān)系，一般是相互排斥，要特別留意分類之間的關(guān)系。

錨點(diǎn)

通過展示選擇器當(dāng)中分組的組名，在選擇器頂部制作出錨點(diǎn)能夠幫助用戶進(jìn)行快速跳轉(zhuǎn)，從而提高用戶的選擇效率。它與 Tab 分類十分接近，其二者存在一些 “細(xì)枝末節(jié)” 的區(qū)別。錨點(diǎn)是將整個選項(xiàng)都放置在同一個選擇器類型下，只是存在著簡單的分類。而 Tab 完全是將選項(xiàng)與選項(xiàng)之間的類型分割開，關(guān)系上會更加遠(yuǎn)些。

比如在神策數(shù)據(jù)的 LTV 分析中，就通過使用選擇器的錨點(diǎn)，可以方便用戶對內(nèi)容進(jìn)行快速跳轉(zhuǎn)，這樣就能完成三年級四班 > 李華的尋找思路，也更符合用戶的尋找路徑。

收折選擇

通過樹狀結(jié)構(gòu)的展示，將選項(xiàng)內(nèi)容展、收起。看上去似乎與錨點(diǎn)、Tab 分類，兩種較為類似，但是在我工作中，通常會與多選框進(jìn)行結(jié)合，能夠激發(fā)很大的魅力。用戶可以通過選擇一級標(biāo)簽來代表選擇該一級選項(xiàng)下的所有內(nèi)容，在一些特定的場景中有著意想不到的效果。

比如在一個在線教育的場景中，我們可以通過這類選擇，在一個選擇器中，同時可以選擇班級、同學(xué)兩類不同緯度下的選項(xiàng)，這是普通選擇器中無法達(dá)到的，并且也正是實(shí)際工作中需要的～

字母定位

字母定位是一種特別的錨點(diǎn)定位，它默認(rèn)提供從 A - Z 的字母進(jìn)行排序，通過右側(cè)的字母能夠起到很好的快捷跳轉(zhuǎn)的效果。這種方式最早出現(xiàn)于移動端，在咱們?nèi)粘Ｊ褂?IM 系統(tǒng)中，通訊錄、好友列表、所有應(yīng)用大多都會有這種方式。

同時結(jié)合著錨點(diǎn)與分組，能夠?qū)⒔o予用戶更為明確的表達(dá)形式，而隨著交互形式根深蒂固，B 端產(chǎn)品也逐漸演化，開始形成自己的風(fēng)格形式。

比如在紛享銷客的成員選擇中，因?yàn)槿萜鞯南拗疲荒軌蚴褂幂^小的下拉選擇項(xiàng)進(jìn)行展示，導(dǎo)致了用戶選擇特定員工變得困難重重，而員工基本信息中都是包含有名字作為基本字段，因此通過字母右側(cè)進(jìn)行定位排序，能夠極為方便進(jìn)行成員的選擇。但要注意一點(diǎn)的是，這類設(shè)計(jì)都是針對選擇頻率較低的情況，對于高頻、量大的情況下使用，則需要更為定制化的組件做處理。

3. 下拉的多種狀態(tài)

本來下拉的狀態(tài)是不打算去講的，想當(dāng)然覺得又會是一些十分基礎(chǔ)且通用形式，而下拉的狀態(tài)其實(shí)與咱們之前講到的很多內(nèi)容有很大的區(qū)別。因?yàn)橄吕x擇是由兩部分組成，錄入框以及下拉菜單，也就導(dǎo)致兩者之間的狀態(tài)同樣會存在許多較為復(fù)雜的組合，同時在組合中會有不少奇特的問題

禁用狀態(tài)

錄入框禁用是讓用戶無法進(jìn)行激活，將錄入框置灰并且直接不讓用戶進(jìn)行點(diǎn)擊。

在禁用狀態(tài)的設(shè)計(jì)中，一定要將禁用與正常狀態(tài)之間拉開差距，因?yàn)樵隗w驗(yàn)過很多下拉選擇時都會遇到此問題，將顏色差距拉大也能夠方便用戶進(jìn)行快速識別。

選項(xiàng)禁用

而選項(xiàng)禁用則代表該選項(xiàng)并不能夠被點(diǎn)擊，但是不影響整個選項(xiàng)的選擇情況。同樣字體置灰，但在選項(xiàng)禁用中是不會有 Hover 狀態(tài)，并且光標(biāo)會變成 Not Allowed。

多選狀態(tài)

因?yàn)槎噙x，代表其有較大的不可控性，也就意味著在很小的錄入框中，如何展示數(shù)量較多的選項(xiàng)，這里設(shè)計(jì)出了兩種不同的模式：滾動高度、撐開高度

滾動高度：主要是限制輸入框的高度，在輸入框的右側(cè)添加滾動條。這樣能夠?qū)⒍鄠€選項(xiàng)放置在錄入框容器中，最大的好處是能夠保證整個表單的整齊，讓表單的排布更加通用。但滾動高度帶來的問題是因?yàn)楦叨鹊南拗疲愫茈y完整看到所選擇的全部信息，但滾動高度是最簡單的處理的方式。

撐開高度：通過改變錄入框的整體高度來展示完整的選中信息。撐開高度能在表單中實(shí)現(xiàn)一些疏密變化，在撐開的過程中，處理的細(xì)節(jié)中會有所不同，這里我簡單做了一個總結(jié)：

固定最大高度：將錄入框的整體高度進(jìn)行限制，這樣能夠滿足常見的多選狀態(tài)展示。比如我們確定選項(xiàng)整體高度后，我們可以將最大高度設(shè)置為選項(xiàng)展示的 2.5 行，即讓用戶知道可以滾動。

選項(xiàng)融合：針對用戶只需要了解選項(xiàng)中的項(xiàng)目個數(shù)，而對實(shí)際的文字選項(xiàng)內(nèi)容不做過多了解時，就可以采取選項(xiàng)融合。通過一個統(tǒng)一的選項(xiàng)個數(shù)，去展示其共有 23 個選項(xiàng)選中，這樣能夠避免了出現(xiàn)一些較為離譜的情況。這種情況主要是針對于有全選功能的多選框時，當(dāng)你勾結(jié)了全選，就會選中非常多的選項(xiàng)（雖然在原則上不允許用戶在選擇器進(jìn)行全選）。

空狀態(tài)

在錄入框中的空狀態(tài)是以占位符的形式進(jìn)行表達(dá)，一般多為 “請選擇”等類似文案進(jìn)行提醒。

選項(xiàng)空狀態(tài)

選項(xiàng)是不會存在空狀態(tài)，其實(shí)本質(zhì)上的下拉菜單的空狀態(tài)，這時候基本的處理為空狀態(tài)的插畫即可，只是少部分空狀態(tài)是有特殊的業(yè)務(wù)原因，只需要把邏輯講清楚即可。

4. 下拉的樣式

下拉的樣式一共分為五種：標(biāo)準(zhǔn)樣式、分離樣式、圓角邊框、帶圖標(biāo)、帶圖像，大家看圖認(rèn)識即可

標(biāo)準(zhǔn)樣式

分離樣式

圓角邊框

圖標(biāo)選項(xiàng)

圖片選項(xiàng)

下拉選擇器的交互邏輯

1. 下拉選擇器與單選框、多選框的對比

下拉選擇器的優(yōu)點(diǎn)：

包容度高：下拉選擇的出現(xiàn)，代表著它擁有極高的包容度（雖然在極個別場景下使用會顯得比較突兀）。但是只要是 “選擇” 的內(nèi)容，就一定可以采取下拉選擇器進(jìn)行展示。單選框、多選框、成員選擇、地址選擇等都可以轉(zhuǎn)化為下拉選擇器。總結(jié)一句，萬物皆可下拉。

擴(kuò)展性強(qiáng)：它本身采取的是兩個容器組合的概念（即錄入框與下拉菜單組合），代表下拉菜單在表單上是不會有太多的限制，錄入框是在表單中，而下拉菜單是進(jìn)行呼出，因此下拉菜單的內(nèi)容可以進(jìn)行再次設(shè)計(jì)。比如在我實(shí)際工作中使用下拉選擇的頻率會明顯高于單、多選框，而且經(jīng)常會設(shè)計(jì)很多特殊的下拉變種，去滿足實(shí)際工作中的交互需求。

可更改性強(qiáng)：由于下拉選擇器的結(jié)構(gòu)，導(dǎo)致很多選項(xiàng)都是默認(rèn)隱藏，因此選項(xiàng)如果有任何的更改，用戶都難以去發(fā)現(xiàn)。

熟悉的交互：下拉選擇器是大多數(shù)用戶十分熟悉的交互形式，因?yàn)槠浔旧碓?Web 端設(shè)計(jì)中就已經(jīng)廣泛使用。

下拉選擇器的缺點(diǎn)：

內(nèi)容過載難處理：雖然在下拉的變種中講到許許多多內(nèi)容過多的處理方式，但是太多選項(xiàng)會造成頻繁的滾動是難以避免的，因此內(nèi)容過載時就要考慮更為特殊的選擇器：如成員選擇、穿梭框等... 我們會在 03 中為大家進(jìn)行剖析。

部分情況效率低：當(dāng)在一些有特殊規(guī)則、或者用戶熟悉的內(nèi)容時，它的交互效率明顯更低。比如在選擇生日時，明顯輸入要比選擇來的更高。

易誤操作：因?yàn)楸旧斫换タ臻g的限制，導(dǎo)致很多人都會存在誤操作的情況，特別是正在滾動時，菜單收起就不得不進(jìn)行重新選擇。

2. 下拉選擇的排序方式

在下拉選擇中排序是一個特別重要的事，好的排序規(guī)則能夠彌補(bǔ)組件設(shè)計(jì)不足，并且在用戶的使用過程中，能夠體驗(yàn)到絲般順滑。同時排序是需要作為設(shè)計(jì)備注寫到整個交互文檔中，也因此學(xué)會整個排序方式是必然趨勢。

按字母

按字母排序通常是從 A 到 Z，這種排序方式最為穩(wěn)妥。

這類排序方式是通常都是對字母較為敏感，會非常在乎文字字母的順序關(guān)系，比如員工姓名、公司名稱等都可以采取按字母的排序方式，同時字母也能兼容中文和英文，使其能滿足更多的條件。在用戶的認(rèn)知當(dāng)中，按字母排序也是最為常見的排序方式。

按數(shù)值

顧名思義就是按照數(shù)字的大小，從小到大的順序進(jìn)行排列。這種都是一個默認(rèn)的邏輯，也因此不會存在有太多的問題。

給大家出一個小問題：“在數(shù)值排序當(dāng)中：1、1.1、1.1.1 哪一個在前哪一個在后？”大家可以在電腦中新建三個文件夾進(jìn)行嘗試～

按使用頻率

使用頻率大家可能會有一些陌生，如果我換一個詞 “熱門、猜你喜歡” 就可能會喚起大家腦袋中最深層的記憶。

這種方式常見于移動端，主要是針對一些用戶的特定喜好的選項(xiàng)進(jìn)行推薦。舉一個例子，大家在使用輸入法進(jìn)行打字時，被候選的漢字是根據(jù)你的選擇頻率的上升，將它的優(yōu)先級進(jìn)行不斷的提高，從而讓用戶在打字時能夠更方便的進(jìn)行選擇。

在我們系統(tǒng)中，主要是推薦使用頻率最高的三個選項(xiàng)，并在右側(cè)給出常用標(biāo)簽讓用戶能夠明白這是最為常見的內(nèi)容。

按用戶預(yù)設(shè)

用戶自己預(yù)設(shè)是目前低代碼平臺最為流行的做法。將產(chǎn)品的所有功能都交給用戶，其中也包括了選擇器以及下拉菜單里面的基本順序。作為用戶預(yù)設(shè)的一部分，顯然從設(shè)計(jì)層面就難以對其進(jìn)行把控，比如在清流的產(chǎn)品中，可以通過它最后你會發(fā)現(xiàn)，幾乎所有的低代碼產(chǎn)品都采取選擇器而非單選或多選，也正是選擇器的包容度高。

上面所提供的排序方式，所有選項(xiàng)都不是單一維度去執(zhí)行的，都需要一些組合的邏輯去排列執(zhí)行，才能夠達(dá)到最好的效果，比如說在我們常見的下列選擇中，首先我會預(yù)測三個選項(xiàng)作為熱門選項(xiàng)，當(dāng)用戶選擇的時候會在右側(cè)提供一個標(biāo)簽，顯示常用，并且其他的選擇順序是按字母從 A 到 Z 的順序排列，過后是數(shù)字，再其次是標(biāo)點(diǎn)符號。而這些是屬于下拉的一些基本邏輯，我們接下來看一下下列選擇的交互邏輯。

3. 鍵盤錄入

在表單的場景中，我不止一次的提起鍵盤錄入的重要性。因?yàn)橛脩粼趯?shí)際的錄入過程中，是需要一一填寫，在我對很多銷售進(jìn)行表單錄入的場景中，都會習(xí)慣采取 tab 鍵來進(jìn)行錄入框的切換，這樣能夠保證數(shù)據(jù)錄入的高效性。同樣我們回到下拉選擇的設(shè)計(jì)當(dāng)中，用戶可以通過點(diǎn)擊回車鍵進(jìn)行下拉選擇的展開，同時又可以通過上下鍵來對下拉選項(xiàng)進(jìn)行相應(yīng)的切換，完成整個交互步驟，無需借助鼠標(biāo)，能夠滿足極客用戶對于信息錄入的沉浸體驗(yàn)。

4. 內(nèi)容的屬性

大家在使用下拉時，都會存在很多問題。因?yàn)橛泻芏鄡?nèi)容的特性決定了它并不適合使用下拉菜單進(jìn)行表達(dá)，比如我們舉一個很簡單的例子：

在一個購物平臺的網(wǎng)站中，它的設(shè)計(jì)上是通過下拉菜單去選擇購買的數(shù)量以及對應(yīng)的價格，這種小型的下拉使得整個購買流程都變得十分復(fù)雜，如果我們采取輸入數(shù)量的形式要比下拉菜單快速得多。

日期與時間選擇的基礎(chǔ)拆解

1. 時間類型

因?yàn)闀r間存在兩種不同表達(dá)方式， 將其分為時間段選擇與時間點(diǎn)選擇。

時間段選擇：選某一個時間范圍，一般包含開始時間與結(jié)束時間，比如（2020 年 10 月 22 日 至 2021 年 03 月 16 日），在時間段運(yùn)用中，主要是針對數(shù)據(jù)的篩選，常見于查看上一周銷售的業(yè)績、本季度的銷售任務(wù)完成情況等。

時間點(diǎn)選擇：選擇某一個時間節(jié)點(diǎn)，一般是設(shè)定好一個點(diǎn)過后去觸發(fā)某一件事。比如 2021 年 03 月 16 日 19 時 11 分 我設(shè)置的鬧鐘響起，起床準(zhǔn)備寫文章。

在我們拿到需求過后，就需要去明確時間類型，因?yàn)椴煌臅r間類型代表著采取的控件、設(shè)計(jì)的思路也會截然不同。

2. 時間粒度

在明確完成時間類型過后粒度同樣需要考慮，你需要去思考產(chǎn)品類型從而帶來的時間粒度也不會相同。一般時間粒度為年、季、月、周、天、小時、分鐘、秒。

比如在儀表盤主要針對銷售經(jīng)理對銷售每天、每周、每月、每季度的業(yè)績進(jìn)行管理，也因此在粒度上同樣需要去涵蓋到此粒度即可。同時對于一些云產(chǎn)品對時間要求極為苛刻的，使用秒級單位也十分常見。

時間粒度也是大家容易忽略的一個問題，因?yàn)榱６鹊拇旨?xì)將直接影響你的設(shè)計(jì)，因此在剛開始前一定要進(jìn)行明確才行。

3. 時間狀態(tài)

在時間維度與粒度之外，還存在另一種狀態(tài)靜態(tài)與動態(tài)。

動態(tài)時間：隨著每天日期的更替，進(jìn)行相應(yīng)的變化。我舉一個例子，比如我在一個儀表盤的設(shè)計(jì)中，我選擇動態(tài)時間去查看過去 7 天的數(shù)據(jù)情況，而設(shè)置完成動態(tài)時間過后。不管未來的哪一天，當(dāng)我進(jìn)入這個儀表盤之后，都是過去 7 天的數(shù)據(jù)，這就是動態(tài)時間最為常見的使用場景。

靜態(tài)時間：也就是我們理解的常規(guī)意義上的時間，選擇后不會跟隨變化。

動態(tài)時間較為特殊，一般出現(xiàn)在篩選功能、管理后臺配置中，主要是方便用戶一次配置，長期使用的效果。

4. 輸入與選擇

首先，在之前在選擇器講到過的內(nèi)容在日期選擇中同樣生效，在桌面端用戶的操作成本是：輸入> 滑動>點(diǎn)擊>拖拽；

因此在日期選擇器中需要同時允許用戶通過點(diǎn)擊選擇時間以及通過輸入日期。

比如在你選擇自己的出生日期時，明顯通過輸入要比自己一個一個進(jìn)行選擇效率要高，而由于日期格式有不同的格式：“2021/03/16”、“2021-03-16”、“2021.03.16”、“20210316”、“2021 年 03 月 16 日”；因此在設(shè)計(jì)一定要進(jìn)行多方面的思考。當(dāng)然就輸入而言，針對的是一些時間跨度較大、并且是每一個選項(xiàng)之間也有很大的跨度的情況，比如說每個人的出生年月日，從 1900 - 2020 的年份跨越，并且還需要選擇月份以及日期，如果通過選擇顯然難度頗大，反而可以通過輸入的方式更為高效。

但別忘了一點(diǎn)，因?yàn)樯厦娼档饺掌谥杏休^為明顯的格式差異，我們一定提供一個默認(rèn)規(guī)則，讓用戶知道規(guī)則情況，這樣能夠避免在使用的過程中格式不統(tǒng)一，導(dǎo)致系統(tǒng)無端增加的校驗(yàn)成本

最后對于很多國際化的產(chǎn)品而言，還需要將時間日期的規(guī)則進(jìn)行對應(yīng)的調(diào)整。

5. 快捷選擇

在日期選擇中，快捷選擇也是其中重要的一部分，比如在常規(guī)的選擇中，經(jīng)常加入“此刻、今天、本周、本月、30 天前、90 天前”等

因?yàn)榭旖葸x擇能夠在一定程度上滿足用戶的日常所需，比如我們來看看神策數(shù)據(jù)，當(dāng)我們點(diǎn)擊日期篩選過后，神策數(shù)據(jù)會在其右側(cè)出現(xiàn)一個單獨(dú)的區(qū)域，用于放置許多快捷選擇項(xiàng)。通過快捷選擇項(xiàng)都會把用戶常用的情況進(jìn)行覆蓋，只在極少數(shù)情況下需要單獨(dú)點(diǎn)擊進(jìn)行選擇。

6. 日期時間段選擇的小迷思

這是我與整個產(chǎn)品組曾經(jīng)爭論過的問題，雖然最后我被說服，給大家講講當(dāng)時我們的爭論點(diǎn)以及事后的總結(jié)。

在時間段選擇的過程中，一直以來都有著兩種截然不同的交互形式，我簡單將兩個稱為：分體式與連體式 （總感覺哪里怪怪的 - -!! ）。

分體式：將開始時間與結(jié)束時間分開，通過兩個樣式相同的日期控件。當(dāng)用戶選擇完開始時間后，結(jié)束時間將會自動展開，提供給用戶進(jìn)行選擇。

連體式：開始日期和結(jié)束日期使用一個組件展示，通過用戶的兩次點(diǎn)擊來進(jìn)行決定其時間段關(guān)系。

那么這兩種交互形式如何進(jìn)行選擇？首先從交互場景上來講：

分體式：用戶通過兩次選擇，選擇明確的起始時間節(jié)點(diǎn)，來決定它的時間范圍。這個交互強(qiáng)調(diào)的是一個開始與結(jié)束時間點(diǎn)，多用于用戶已經(jīng)明確自己的時間段，而不是一個模糊的時間范圍。比如我們在外出選擇酒店時間時，需要去選擇入住時間與離店時間，絕大多數(shù)交互形式都采取開始時間與結(jié)束時間進(jìn)行展示。

連體式：用戶通過一次選擇，來選擇一個模糊的范圍時間段。其交互更強(qiáng)調(diào)某一個區(qū)域時間段。比如在我們篩選的情況中，是需要選擇的是某一段時間，并且需要經(jīng)常切換，一次點(diǎn)擊能夠帶來更方便的使用。

從認(rèn)知成本上來講：

分體式：顯然更為簡單，通過簡單描述的開始時間與結(jié)束時間，就可以直接進(jìn)行選擇，不需要過多的思考

連體式：相對而言更加復(fù)雜，需要用戶對于整個操作基礎(chǔ)都有著較強(qiáng)的理解，不然需要一定的認(rèn)知成本。但連體式整體交互明顯更為高效。

從實(shí)際運(yùn)用場景上來講：

分體式：多用于出行、酒旅，比如飛豬、攜程等產(chǎn)品大多采取分體式，因?yàn)槠溆脩羰褂谜咚絽⒉畈积R，且用戶都是明確時間段，因此分體式更為合適。

連體式：多用于數(shù)據(jù)的篩選場景中，最主要是更多人選擇的是一段時間，且選擇時間段的概念也較為模糊，因此連體式更為合適。

最后，留給大家一個思考題

你知道，為什么線上許多產(chǎn)品中 （明道云、簡道云、ONES...） 呼出下拉菜單后，滾動表單都沒有跟隨錄入框嗎？

歡迎在評論區(qū)與我留言，下個文章給你解答~

歡迎關(guān)注作者的微信公眾號：CE青年