輸入還是選擇？聊聊選擇字段在B端系統的意義

選擇對于 B 端系統來說究竟意味著什么？

如果將下圖兩個組件擺在設計師面前，它們唯一的差別便是 一個有著右側的下拉箭頭、一個右側沒有下拉箭頭。

當聽到了這種解釋時，我也就只能搖搖頭，一方面感覺很多設計師的基礎薄弱，同時又覺得需要和咱們讀者來講講，關于選擇這一大類，對于我們設計師究竟有什么意義？

首先，選擇類的組件對于我們來說已經非常常見，比如簡單的：單選框、復選框，難一點的：級聯選擇、層級選擇、樹形選擇，這些都是我們選擇類組件的一個大的范圍。

同樣的輸入也是，輸入通常會包含有 輸入框、網址輸入、特定規則輸入 等多種輸入方式，這些都是我們輸入類組件的一個大的范圍。

那先來了解一下選擇和輸入當中的差別。

往期B端設計干貨：

一、生活當中 輸入與選擇 的差別

想要理解 輸入與選擇 的差別，我們先來理解生活當中關于輸入選擇的差別。

舉一個生活當中的例子，圖片當中的這個物體是什么？

我相信大家給我的回答一定不會相同。比如：有的人可能會說是它是蘋果；而有些人則會說是紅蘋果、紅富士、大蘋果 等等...

也就導致雖然大家說的都是蘋果相關的詞匯，但是這些詞語往往都會存在細微的差別。

那假設同樣一張圖片，我們提問的方式是，圖片當中的物體是下列四個選項當中的哪一個？

A.香蕉 B.蘋果 C.西瓜 D.火龍果

這時候你會發現，得到的結果大多數都是選擇的「B.蘋果」

而上面講到的便是我們輸入和選擇的一個差異，從結果上來看我們就會發現 輸入要更難一些、選擇則會更加的容易。

這就像我們在學生時代做的卷子，選擇題往往還能動動筆，而到了填空題完全就是一頭霧水。

二、實際項目當中的例子

這種情況，在日常的工作當中，有非常多的例子，比如在一個 CRM 系統當中，我們會有一個叫做客戶類型的字段。假設最開始把它設定輸入框，這時候銷售將二次購買的客戶錄入系統當中，那不同的銷售錄入出來的結果完全不同。

銷售 A：二次客戶

銷售 B：復購客戶

銷售 C：老客戶

而數據在整個系統當中非常重要，因為我們錄入數據的最終目的都是在各個地方使用數據。比如在數據分析頁面、數據篩選頁面，由于出現了上訴提到的混亂的結果，系統的數據無法正常使用，在管理上就會出現很多問題。

假設把客戶類型的字段換做是選擇，那這些數據就能夠正常使用，并且能夠在系統當中我們就能夠合理的在各個頁面當中利用。

三、輸入與選擇的定義

通過上面兩個例子，我們會發現輸入與選擇的意義是完全不同的。我們就來看看，輸入與選擇究竟存在什么定義上的差別。

1. 錄入方式上的差異

輸入就是提供給用戶進行無規則的信息錄入，也就是用戶想輸入什么就可以進行填寫。而在輸入的過程當中，通常都是通過鍵盤的方式進行進行的數據提交，這也就意味著輸入的難度較大。

選擇則是系統預設好的條件提供給用戶進行規則的錄入，并且在組件的展示當中，都是以鼠標點擊的方式來進行的信息錄入，它的難度更低，但是選擇在系統當中是預設好的情況，也就意味著需要提前預設。如果是一個靈活的 B 端系統，就一定需要在管理后臺對于預設的系統進行配置，否則整個系統就缺乏靈活性。

這就是在 飛書 的管理后臺系統當中，我們需要單獨的配置一些自定義的信息，其中就可以定義選擇錄入的選項。

當然為了保證系統的靈活性，我們還會為組件去設定一些小心思，就是選擇錄入時，底部會有自定義選擇項的功能，這就叫能夠保證用戶都有自己想要的選項。

2. 字段屬性上的差異

關于兩個字段，其實在字段屬性上也會存在不同。

首先是輸入類型的字段，在整個系統當中，主要針對的是：名稱、手機號、地址、郵箱 等，系統本身無法規則化的字段，這時候只能采取輸入的形式。

而選擇字段，主要是針對的字段是：類型、屬性、狀態 等，用戶能夠快速選擇的字段，兩者在字段設定上存在差異，因此并不相同。

四、選擇與輸入的作用

關于作用，問大家這樣一個問題，你們認為在 B 端系統當中是輸入更多，還是選擇更多？

我想看完文章過后大家都會覺得輸入的限制過多、過于麻煩，因此輸入在整個 B 端系統里 錄入難度高、規則復雜，只會使用在少數位置來進行使用。同樣的邏輯選擇則會更為高頻使用。

字段，其實是涉及到 前臺、后臺的頁面信息，也就造成關于字段的影響，我們不能單純從表單一個頁面來進行看待。

而表單、表格、詳情頁本身是一個整體，這些字段的差別，會影響到后面的頁面的展示。

比如在表格頁面當中，會什么要采取 搜索 而非 篩選？

其實這就是在表單頁面當中，如果選擇了輸入，那在檢索的時候一定是 搜索的方式。那如果是選擇，那在檢索的時候一定是 篩選的方式。

那在其他頁面呢？詳情頁？這個咱們就不多說了。

這其實就是字段的對應關系，在整個系統當中是一個鏈接的整體，我們在去看待組件的時候，要關注的并不只是組件的樣式，而更應該在乎的是組件背后之間的關系。

如果覺得文章還不錯，也別忘了點贊轉發~

我們下篇文章，再聊~

歡迎關注作者的微信公眾號： CE青年Youthce